/* Shared action surfaces. Existing controllers, roles and hidden states are unchanged. */
body.yf-ui-prototype {
  --yf-control-radius: 10px;
  --yf-control-edge: color-mix(in srgb, var(--yf-border-strong) 68%, var(--yf-border));
  --yf-control-shadow: 0 1px 2px color-mix(in srgb, var(--yf-text) 4%, transparent);
}
body.yf-ui-prototype[data-yf-style="handdrawn"] { --yf-control-radius: 8px 12px 7px 11px; }
body.yf-ui-prototype[data-yf-style="minimal"] { --yf-control-radius: 8px; }
body.yf-ui-prototype[data-yf-style="book"] { --yf-control-radius: 6px; }

/* Buttons are actions: a stable surface, an obvious hit area and visible focus. */
body.yf-ui-prototype :is(button,.route-cta,.row-action) { text-decoration: none; text-underline-offset: initial; }
body.yf-ui-prototype :is(button,.route-cta,.row-action):focus-visible { outline: 2px solid var(--yf-primary); outline-offset: 3px; }
body.yf-ui-prototype button:disabled { cursor: not-allowed; }

/* Sidebar actions retain their locations, but have real button boundaries. */
body.yf-ui-prototype .yf-prototype-sidebar-bottom #newConversationBtn {
  min-height: 40px; padding: 9px 12px; border: 1px solid var(--yf-control-edge);
  border-radius: var(--yf-control-radius); background: var(--yf-primary-soft);
  color: var(--yf-text); font-weight: 500; box-shadow: var(--yf-control-shadow);
}
body.yf-ui-prototype .yf-prototype-sidebar-bottom #newConversationBtn:hover { border-color: var(--yf-primary); background: var(--yf-surface); }
body.yf-ui-prototype .yf-prototype-sidebar-bottom :is(#themeToggle,#loginBtn) {
  height: 38px; min-height: 38px; padding-inline: 12px; border-color: var(--yf-control-edge);
  border-radius: var(--yf-control-radius); box-shadow: var(--yf-control-shadow); font-weight: 500;
}
body.yf-ui-prototype .yf-prototype-sidebar-bottom #accessMenuButton {
  min-height: 32px; padding: 5px 10px; border: 1px solid var(--yf-border);
  border-radius: var(--yf-control-radius); background: var(--yf-surface); color: var(--yf-muted);
}
body.yf-ui-prototype .yf-prototype-recent { margin-top: 21px; }
body.yf-ui-prototype .yf-prototype-recent-new { width: 30px; height: 30px; min-height: 30px; border: 1px solid var(--yf-border); border-radius: 8px; background: var(--yf-surface); }

/* Composer: matching upload, mode and send controls rather than a loose text label. */
body.yf-ui-prototype[data-yf-style] #home #searchForm :is(#uploadMoreBtn,#chatActionBtn,#exitChatBtn) {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; flex-basis: 40px;
  border-radius: var(--yf-control-radius); box-shadow: var(--yf-control-shadow);
}
body.yf-ui-prototype[data-yf-style] #home #searchForm #uploadMoreBtn { border: 1px solid var(--yf-control-edge); background: var(--yf-surface); color: var(--yf-primary); }
body.yf-ui-prototype[data-yf-style] #home #searchForm #chatModelBtn {
  min-height: 40px; padding: 7px 11px; gap: 8px; border: 1px solid var(--yf-border);
  border-radius: var(--yf-control-radius); background: var(--yf-surface-soft-fill,var(--yf-surface-soft));
  color: var(--yf-text); font-size: 13px; font-weight: 500;
}
body.yf-ui-prototype[data-yf-style] #home #searchForm #chatActionBtn { border: 1px solid var(--yf-primary); background: var(--yf-primary-fill,var(--yf-primary)); color: var(--yf-on-primary); }
body.yf-ui-prototype[data-yf-style] #home #searchForm #chatActionBtn:disabled { opacity: .48; box-shadow: none; }
body.yf-ui-prototype[data-yf-style] #home #searchForm :is(#uploadMoreBtn,#chatModelBtn):hover { border-color: var(--yf-primary); background: var(--yf-primary-soft); }
body.yf-ui-prototype #home :is(.mode-menu,.upload-menu) { padding: 6px; border: 1px solid var(--yf-border); border-radius: 13px; box-shadow: 0 8px 24px color-mix(in srgb,var(--yf-text) 10%,transparent); }
body.yf-ui-prototype #home :is(.mode-menu,.upload-menu) button { min-height: 40px; padding: 9px 12px; border-radius: 8px; text-decoration: none; }
body.yf-ui-prototype :is(.yf-prototype-more,.yf-prototype-copy,.conversation-action) { min-height: 36px; padding: 7px 10px; border: 1px solid var(--yf-border); border-radius: var(--yf-control-radius); background: var(--yf-surface); color: var(--yf-text); }
body.yf-ui-prototype .yf-prototype-more { width: 36px; height: 36px; flex-basis: 36px; padding: 7px; }

/* Account modal: segmented login modes and an explicit secondary registration action. */
body.yf-ui-prototype .auth-tabs {
  display: flex; gap: 4px; padding: 4px; margin: 20px 0 18px;
  border: 1px solid var(--yf-border); border-radius: 12px; background: var(--yf-surface-soft);
}
body.yf-ui-prototype .auth-tabs .auth-tab {
  flex: 1; min-height: 38px; padding: 8px 12px; border: 1px solid transparent;
  border-radius: 8px; box-shadow: none; color: var(--yf-muted); font-weight: 500;
}
body.yf-ui-prototype .auth-tabs .auth-tab.is-active { border-color: var(--yf-border); background: var(--yf-surface); color: var(--yf-text); box-shadow: var(--yf-control-shadow); }
body.yf-ui-prototype .auth-register { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--yf-border); text-align: left; }
body.yf-ui-prototype .auth-register[hidden] { display: none; }
body.yf-ui-prototype .auth-register button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 14px; border: 1px solid var(--yf-control-edge);
  border-radius: var(--yf-control-radius); background: var(--yf-primary-soft);
  color: var(--yf-text); font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer; box-shadow: var(--yf-control-shadow);
}
body.yf-ui-prototype .auth-register button:hover { border-color: var(--yf-primary); background: var(--yf-surface); }
body.yf-ui-prototype .auth-submit { min-height: 44px; border: 1px solid var(--yf-primary); border-radius: var(--yf-control-radius); background: var(--yf-primary); color: var(--yf-on-primary); font-weight: 550; box-shadow: var(--yf-control-shadow); }
body.yf-ui-prototype .auth-code-button { min-height: 42px; padding: 8px 12px; border-color: var(--yf-control-edge); border-radius: var(--yf-control-radius); background: var(--yf-primary-soft); color: var(--yf-text); font-weight: 500; }
body.yf-ui-prototype .auth-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid var(--yf-border); border-radius: 10px; background: var(--yf-surface-soft); font-size: 23px; }

/* Palette editor: neutral segmented tabs and surfaced secondary controls. */
body.yf-ui-prototype .ps-tabs { gap: 4px; padding: 4px; border: 1px solid var(--yf-border); border-radius: 12px; background: var(--yf-surface-soft); }
body.yf-ui-prototype .ps-tabs .ps-tab { flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: 12px !important; text-align: center; }
body.yf-ui-prototype .ps-tabs .ps-tab[aria-selected="true"] { border-color: var(--yf-border); background: var(--yf-surface); color: var(--yf-text) !important; box-shadow: var(--yf-control-shadow); }
body.yf-ui-prototype .ps-preview-tools button,
body.yf-ui-prototype .ps-panel :is(.ps-custom-toggle,.ps-reset-region,.ps-reset-all,.ps-library-refresh,.ps-library-retry),
body.yf-ui-prototype .ps-saved-actions button,
body.yf-ui-prototype .ps-rename-form button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 7px 11px; border: 1px solid var(--yf-border);
  border-radius: 9px; background: var(--yf-surface); color: var(--ps-action-text,var(--yf-text)) !important;
  font-size: 12px !important; font-weight: 500; text-decoration: none; box-shadow: var(--yf-control-shadow);
}
body.yf-ui-prototype .ps-quick-tools { gap: 8px; }
body.yf-ui-prototype .ps-quick-tools .ps-custom-toggle { margin-left: auto; background: var(--yf-primary-soft); color: var(--ps-on-soft,var(--yf-text)) !important; }
body.yf-ui-prototype .ps-preview-tools button:not(:disabled):hover,
body.yf-ui-prototype .ps-panel :is(.ps-custom-toggle,.ps-reset-region,.ps-reset-all,.ps-library-refresh,.ps-library-retry):not(:disabled):hover { border-color: var(--yf-border-strong); background: var(--yf-primary-soft); color: var(--ps-on-soft,var(--yf-text)) !important; }
body.yf-ui-prototype .ps-preview-tools button[aria-pressed="true"] { border-color: var(--yf-primary); background: var(--yf-primary-soft); color: var(--ps-on-soft,var(--yf-text)) !important; }
body.yf-ui-prototype .ps-panel :is(.ps-more,.ps-exact-details,.ps-readability,.ps-save-details) > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 8px 11px; border: 1px solid var(--yf-border); border-radius: 9px; list-style: none; background: var(--yf-surface); color: var(--ps-action-text,var(--yf-text)); cursor: pointer; }
body.yf-ui-prototype .ps-panel summary::-webkit-details-marker { display: none; }
body.yf-ui-prototype .ps-panel :is(.ps-more,.ps-exact-details,.ps-readability,.ps-save-details) > summary::after { content: '⌄'; font-size: 14px; line-height: 1; }
body.yf-ui-prototype .ps-panel details[open] > summary::after { transform: rotate(180deg); }
body.yf-ui-prototype .ps-panel details > summary:hover { border-color: var(--yf-border-strong); background: var(--yf-primary-soft); color: var(--ps-on-soft,var(--yf-text)); }
body.yf-ui-prototype .ps-readability.is-warn > summary { border-color: var(--yf-danger); color: var(--yf-danger); }
body.yf-ui-prototype .ps-panel .ps-apply { min-height: 42px; padding: 9px 18px; border-radius: 10px; font-weight: 600; }
body.yf-ui-prototype .ps-panel .ps-save { min-height: 40px; padding: 8px 12px; border-radius: 9px; font-weight: 500; }
body.yf-ui-prototype .ps-close { display: flex; align-items: center; justify-content: center; border: 1px solid var(--yf-border); border-radius: 10px; background: var(--yf-surface-soft); }
body.yf-ui-prototype .ps-mobile-preview { border: 1px solid var(--yf-border); border-radius: 9px; }
body.yf-ui-prototype .ps-footer-actions { align-items: center; gap: 10px; }

body.yf-ui-prototype #legacyHistoryBtn { width: fit-content; max-width: 100%; align-self: flex-start; }

/* Existing route operations also read as buttons, without changing navigation links. */
body.yf-ui-prototype .route-content :is(button,.route-cta,.row-action) {
  min-height: 38px; padding: 9px 13px; border: 1px solid var(--yf-control-edge);
  border-radius: var(--yf-control-radius); background: var(--yf-surface); color: var(--yf-text);
  font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer;
}
body.yf-ui-prototype .route-content :is(.route-cta,.row-action) { display: inline-flex; align-items: center; justify-content: center; background: var(--yf-primary-soft); }
body.yf-ui-prototype .route-content button:not(:disabled):hover { border-color: var(--yf-primary); background: var(--yf-primary-soft); }

@media (max-width: 720px) {
  body.yf-ui-prototype[data-yf-style] #home #searchForm :is(#uploadMoreBtn,#chatActionBtn,#exitChatBtn) { width: 42px; height: 42px; min-width: 42px; min-height: 42px; flex-basis: 42px; }
  body.yf-ui-prototype[data-yf-style] #home #searchForm #chatModelBtn { min-height: 42px; padding-inline: 10px; }
  body.yf-ui-prototype .ps-tabs .ps-tab { min-height: 40px; padding-inline: 7px; }
  body.yf-ui-prototype .auth-tabs .auth-tab { min-height: 40px; }
  body.yf-ui-prototype .auth-register button { min-height: 42px; }
  body.yf-ui-prototype .ps-panel :is(.ps-apply,.ps-save,.ps-mobile-preview) { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) { body.yf-ui-prototype button { transition: none !important; } }