/* Zuno AI — chat app UI styles */

:root {
  --ai-sidebar-w: 268px;
}

html, body.ai-app-body {
  height: 100%;
  background: var(--color-bg);
  overflow: hidden;
}

body.ai-app-body {
  margin: 0;
}

/* ===== APP SHELL ===== */

.ai-app {
  display: flex;
  height: 100vh;
  height: 100dvh;
  /* iOS Safari's own toolbars resize as you interact with the page, and
     100vh/100dvh can momentarily stop matching the real visible viewport
     when that happens — leaving a gap top and/or bottom where WebKit's
     own default canvas (a light grey) shows through instead of this
     app's background. --app-height is kept in sync with the actual
     visual viewport from JS (see ai-chat.js) as a more reliable source
     of truth than the CSS units alone. */
  height: var(--app-height, 100dvh);
  background: var(--color-bg);
}

/* Removes the ~300ms tap delay and double-tap-to-zoom gesture on
   interactive elements on mobile — without this, a slightly mistimed or
   double tap on things like the sidebar toggle can trigger the browser's
   own zoom gesture (reported as "zoom problems and the screen moves"). */
.ai-app button,
.ai-app a,
.ai-app input,
.ai-app textarea,
.ai-app [role="tab"] {
  touch-action: manipulation;
}

/* --- Sidebar --- */

.ai-sidebar {
  width: var(--ai-sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* Plain white in light mode, not --color-bg-cream's warm pink tint
     (#fef0f3) — every light-theme neutral (bg-soft, bg-cream, border) in
     style.css shares that same pink undertone by design everywhere else
     on the site, but asked for specifically NOT here, in the history
     sidebar. Dark mode's own --color-bg-cream (#222222, no pink cast to
     begin with) is untouched below. */
  background: #ffffff;
  border-right: 1px solid var(--color-border);
  transition: transform 0.2s ease;
}

:root[data-theme="dark"] .ai-sidebar {
  background: var(--color-bg-cream);
}

.ai-sidebar-top {
  padding: calc(16px + env(safe-area-inset-top)) 14px 12px;
  border-bottom: 1px solid var(--color-border);
}

.ai-sidebar-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ai-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16px;
  color: var(--color-text);
  text-decoration: none;
}

.ai-theme-toggle {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--ai-surface);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ai-theme-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.ai-nav-tabs {
  display: flex;
  gap: 4px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 3px;
  margin-bottom: 10px;
}

.ai-nav-tab {
  flex: 1;
  background: none;
  border: none;
  border-radius: calc(var(--radius-md) - 3px);
  padding: 7px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ai-nav-tab:hover {
  color: var(--color-text);
}

.ai-nav-tab.is-active {
  background: var(--ai-surface);
  color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ai-new-chat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ai-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ai-new-chat-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-soft);
}

.ai-new-chat-btn span {
  font-size: 16px;
  line-height: 1;
}

.ai-scheduled-nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ai-scheduled-nav-btn:hover,
.ai-scheduled-nav-btn.is-active {
  background: var(--color-bg-soft);
  color: var(--color-text);
}

.ai-sidebar-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 10px;
}

.ai-sidebar-empty {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 12px 8px;
  text-align: center;
}

.ai-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

/* Neutral light gray in light mode, not --color-bg-soft's pink tint
   (#fdf5f8) — same reasoning as .ai-sidebar's own background above. Dark
   mode keeps --color-bg-soft (already a neutral dark gray, no pink cast)
   via the override just below. */
.ai-sidebar-item:hover {
  background: #f2f2f2;
}

.ai-sidebar-item.active {
  background: #f2f2f2;
  font-weight: 600;
}

:root[data-theme="dark"] .ai-sidebar-item:hover,
:root[data-theme="dark"] .ai-sidebar-item.active {
  background: var(--color-bg-soft);
}

.ai-sidebar-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-sidebar-item-delete {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.ai-sidebar-item:hover .ai-sidebar-item-delete {
  opacity: 1;
}

.ai-sidebar-item-delete:hover {
  color: var(--color-primary-dark);
}

.ai-sidebar-bottom {
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
}

.ai-account {
  margin-bottom: 10px;
}

.ai-google-btn {
  display: flex;
  justify-content: center;
  min-height: 34px;
}

.ai-login-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  color: var(--color-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ai-login-divider::before,
.ai-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* #aiSetPasswordForm is the first use of `hidden` on the form element
   itself (the original two forms only ever hid individual inputs inside
   them) — without this it hits the same bug as every other place in this
   file where a class sets `display` directly: that beats the browser's
   default `[hidden] { display: none }` rule, so toggling .hidden = true
   left it visibly flexed open anyway. */
.ai-login-form[hidden] {
  display: none;
}

.ai-login-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-login-submit {
  width: 100%;
}

.ai-login-password-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 11.5px;
  color: var(--color-text-muted);
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
  margin-top: -2px;
}

.ai-login-password-toggle:hover {
  color: var(--color-primary);
}

.ai-login-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  font-size: 12.5px;
  font-family: inherit;
  background: var(--ai-surface);
  color: var(--color-text);
}

.ai-login-submit {
  border: 1px solid var(--color-border);
  background: var(--ai-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.ai-login-submit:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.ai-login-msg {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.ai-login-msg.ai-login-error {
  color: var(--color-primary-dark);
}

/* ---- Modal (shared shell: sign-in-to-subscribe uses this) ---- */

.ai-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.ai-modal-backdrop[hidden] {
  display: none;
}

.ai-modal {
  position: relative;
  background: var(--ai-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 28px 26px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  /* Without a fixed margin here, a modal taller than the viewport gets
     vertically centered by the backdrop's flex align-items — which pushes
     its top edge (and the close button) off-screen with no way to scroll up
     to it. A shrink-to-fit auto margin keeps it pinned to the top instead
     once it's tall enough to need scrolling. */
  margin: auto 0;
}

.ai-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 6px;
}

.ai-modal-close:hover {
  color: var(--color-text);
}

/* ---- Image lightbox (click a Zuno-generated image to zoom + edit) ---- */

.ai-image-lightbox-backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.ai-image-lightbox {
  position: relative;
  max-width: min(720px, 100%);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.ai-image-lightbox-img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-soft);
}

.ai-image-lightbox .ai-modal-close {
  top: -6px;
  right: -6px;
  background: var(--ai-surface);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.ai-image-lightbox-edit {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 480px;
}

.ai-image-lightbox-edit input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  background: var(--ai-surface);
}

.ai-image-lightbox-msg {
  font-size: 13px;
  color: var(--color-text-muted);
}

.ai-image-lightbox-msg.ai-login-error {
  color: var(--color-primary);
}

/* ---- Explore/Pics photo viewer (float-over-page lightbox with prev/next)
   — see openPicModal/closePicModal in ai-chat.js. Verified live feedback:
   a near-opaque backdrop and viewport-pinned arrows read as "leaving
   Explore" rather than a light peek at one photo, and an instant show/hide
   felt like a jump cut — this version keeps Explore visibly dimmed rather
   than hidden, keeps the arrows physically next to the card via the flex
   row below instead of the screen edges, and morphs open/closed from/to
   the actual clicked tile's position (the FLIP technique — see the
   getBoundingClientRect() usage in ai-chat.js) instead of popping in. ---- */

/* Confined to the Explore column, not the whole page — starts to the
   right of the chat history sidebar (--ai-sidebar-w, defined in the app
   shell section above) rather than covering it too. The sidebar itself
   goes off-screen below 860px (see the Responsive section at the bottom
   of this file), so this only needs to account for its width above that,
   matching the same breakpoint. */
.ai-pic-modal-backdrop {
  background: rgba(20, 16, 14, 0.42);
  left: var(--ai-sidebar-w);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.ai-pic-modal-backdrop.is-visible {
  opacity: 1;
}

@media (max-width: 860px) {
  .ai-pic-modal-backdrop {
    left: 0;
  }
}

/* Arrow | card | arrow, centered together as one unit by the backdrop's
   own flex centering — this is what keeps the arrows beside the card
   itself rather than pinned to the far screen edges regardless of how
   wide the Explore column is. */
/* width:100% + max-width:900px + margin:0 auto is the exact same
   centering mechanism .ai-pics-grid itself uses (see that rule further
   down) — deliberately matched so this row centers within the Explore
   column exactly where the grid does, via plain CSS block-centering
   instead of a JS-measured position. Verified live (three JS-measurement
   attempts, each confirmed correctly deployed) that some other reflow
   this couldn't pin down was shifting a getBoundingClientRect()-based
   position by a consistent ~80px specifically once the key points
   finished loading — a static CSS rule has nothing to recompute and
   nothing to get invalidated by whatever that was, so there's no
   remaining mechanism left for it to drift through. justify-content:
   center on top of that centers the arrows+card AS A GROUP within
   whatever width this row actually ends up with. */
.ai-pic-modal-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 8px;
}

.ai-pic-modal {
  max-width: min(400px, 100%);
  width: 100%;
  padding: 0;
  text-align: left;
  overflow: hidden;
  touch-action: pan-y;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  /* transform/opacity are driven from JS during the open/close morph
     (see openPicModal/closePicModal) — transition-property is scoped to
     just these two so nothing else (e.g. a hover style) unexpectedly
     animates via this same rule. */
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease;
}

/* Wider on laptop/desktop — 400px reads as narrow with the extra room a
   larger viewport actually has (the modal row itself already budgets up
   to 900px for arrow + card + arrow, see .ai-pic-modal-row above). Left at
   400px below this breakpoint, matching the sidebar's own mobile/desktop
   split (see .ai-pic-modal-backdrop and .ai-pic-modal-nav above) rather
   than a new one, since a narrower-than-laptop window has the same "no
   room to spare" reasoning that already governs those. */
@media (min-width: 861px) {
  .ai-pic-modal {
    max-width: min(480px, 100%);
  }
}

.ai-pic-modal-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 38vh;
  background: #000;
  /* The grid tile's equivalent (.ai-pic-tile-media) already clips — this
     one never did, which was harmless for a photo (an <img> respects its
     own box regardless) but not for a video: initYouTubePlayer's cover-fit
     math deliberately oversizes the iframe slightly wider than its
     container to crop-fill it, and without this, that overshoot bled down
     over the title/points/buttons below instead of getting cropped off —
     reported live as "no card background, text just floating on the
     video's thumbnail," videos only, never photos. */
  overflow: hidden;
}

.ai-pic-modal-img {
  width: 100%;
  max-height: 38vh;
  object-fit: contain;
  display: block;
}

.ai-pic-modal-body {
  padding: 16px 18px 18px;
}

/* Reserves roughly the space 3 real bullets take up from the very first
   render (while still just showing "Finding key points…") — verified live
   that even with the height-transition in setPicModalPointsHtml
   (ai-chat.js), the popup's own position still visibly drifted once the
   loading placeholder was replaced by much taller real content, since
   growing the row taller/wider changes how the backdrop's flex centering
   distributes space around it. Reserving the space up front so there's
   barely any size change left to trigger that in the first place is more
   reliable than animating around it after the fact. */
#aiPicModalPoints {
  min-height: 130px;
}

.ai-pic-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  margin-bottom: 10px;
}

.ai-pic-modal-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 101;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  color: #fff;
}

.ai-pic-modal-close:hover {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

.ai-pic-modal-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: var(--ai-surface);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  color: var(--color-text);
  cursor: pointer;
}

.ai-pic-modal-nav:hover {
  background: var(--color-bg-soft);
}

.ai-pic-modal-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 640px) {
  /* No room for arrows beside a near-full-width card on a phone — swipe
     (see the touchstart/touchend handlers in ai-chat.js) is the only nav
     there, same as any mobile photo viewer. */
  .ai-pic-modal-nav {
    display: none;
  }
}

/* ---- Discover intro modal (shown once, after the first answer) ---- */

.ai-discover-intro-preview {
  display: block;
  width: calc(100% + 56px);
  margin: -32px -28px 16px;
  height: 172px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.ai-discover-intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.ai-discover-intro-title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 10px;
}

.ai-discover-intro-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 22px;
}

.ai-discover-intro-btn {
  width: 100%;
  margin-bottom: 12px;
}

.ai-discover-intro-skip {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.ai-discover-intro-skip:hover {
  color: var(--color-text);
}

/* ---- Story preview panel (slides out from underneath a tapped Discover
   card/tile instead of jumping straight into a generated Chat answer —
   see openStoryPanel in ai-chat.js). A sibling inserted right after the
   card, not a child of it, so it works the same way whether that card
   lives in the Feed's plain list or Explore's CSS grid: grid-column
   spans it full-width there (auto-placement then wraps subsequent tiles
   below it), and is simply a no-op in the Feed's non-grid list. The
   height animation is JS-driven (see openStoryPanel/closeStoryPanel) —
   max-height here is just the transition target. */

.ai-story-panel {
  grid-column: 1 / -1;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s ease;
}

.ai-story-panel-inner {
  background: var(--ai-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px 16px;
}

.ai-story-points {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ai-story-points li {
  font-size: 13.5px;
  color: var(--color-text);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}

.ai-story-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}

.ai-story-points-loading {
  color: var(--color-text-muted);
}

.ai-story-points-loading::before {
  display: none;
}

.ai-story-actions {
  display: flex;
  gap: 8px;
}

.ai-story-action-btn {
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.ai-story-action-secondary {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.ai-story-action-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.ai-story-action-secondary.is-following {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ---- Premium modal ---- */

.ai-premium-modal-note {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.ai-premium-subscribe-btn {
  font-size: 15px;
  padding: 13px 14px;
}

/* ---- Select-your-plan modal (Pro / Max) ---- */

.ai-plans-modal {
  max-width: 780px;
  padding: 36px 32px 30px;
}

.ai-plans-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 6px;
}

.ai-plans-sub {
  font-size: 14.5px;
  color: var(--color-text-muted);
  margin: 0 0 24px;
}

.ai-plans-billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.ai-plans-billing-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.ai-plans-switch {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-primary);
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.ai-plans-switch[aria-checked="false"] {
  background: var(--color-border);
}

.ai-plans-switch-thumb {
  position: absolute;
  top: 3px;
  left: 21px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
}

.ai-plans-switch[aria-checked="false"] .ai-plans-switch-thumb {
  left: 3px;
}

.ai-plans-save-badge {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.ai-plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .ai-plans-grid { grid-template-columns: 1fr; }
}

.ai-plan-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: left;
  background: var(--ai-surface);
}

.ai-plan-card-max {
  border-color: var(--color-primary);
  border-width: 2px;
}

.ai-plan-badge {
  position: absolute;
  top: -11px;
  left: 20px;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.ai-plan-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 6px;
}

.ai-plan-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 16px;
  min-height: 40px;
}

.ai-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ai-plan-price-amount {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text);
}

.ai-plan-price-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.ai-plan-price-note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.ai-plan-features {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.ai-plan-features li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.5;
}

.ai-plan-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ai-plan-btn {
  width: 100%;
  background: var(--color-bg-soft);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 11px 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ai-plan-btn:hover {
  background: var(--color-border);
}

.ai-plan-btn-max {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.ai-plan-btn-max:hover {
  background: var(--color-primary-dark);
}

.ai-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ai-account-email {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-account-logout {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
  flex-shrink: 0;
}

.ai-account-logout:hover {
  color: var(--color-primary-dark);
}

.ai-upgrade-btn {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ai-upgrade-btn:hover {
  background: var(--color-primary-dark);
}

.ai-upgrade-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

#aiSeePlansBtn {
  margin-bottom: 12px;
}

.ai-premium-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-primary-dark);
  padding: 8px 0;
}

.ai-upsell {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
}

:root[data-theme="dark"] .ai-upsell {
  background: #2e2410;
  border-color: #5c4a1f;
  color: #fde68a;
}

.ai-upsell button {
  margin-top: 10px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ai-sidebar-link {
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: none;
}

.ai-sidebar-link:hover {
  color: var(--color-primary-dark);
}

.ai-sidebar-footer-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-text-muted);
}

.ai-sidebar-footer-links .ai-sidebar-link {
  font-size: 12px;
}

.ai-sidebar-toggle {
  display: none;
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 20px));
  left: 12px;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--ai-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  font-size: 16px;
  cursor: pointer;
}

/* --- Main / thread --- */

.ai-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

/* The empty-state composer and trending teaser are positioned absolutely
   against .ai-main itself (see .ai-chat-empty rules below), not inside
   .ai-thread's own scroll area — on a short window they could otherwise
   run past the bottom edge with no way to reach them at all. This lets
   .ai-main itself scroll in that case, which absolutely-positioned
   descendants extending past its bounds do contribute to. */
.ai-chat-empty .ai-main {
  overflow-y: auto;
}

.ai-thread {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px 20px 12px;
}

/* Only needed once there's a real conversation that could scroll a message
   up underneath the fixed .ai-top-upgrade-btn (user bubbles are
   right-aligned) — the empty/centered state below has nothing to scroll,
   so it keeps the plain symmetric padding above instead of being biased
   down by this extra clearance, which was pushing the centered greeting
   noticeably below the actual vertical middle. */
body:not(.ai-chat-empty) .ai-thread {
  padding-top: calc(76px + env(safe-area-inset-top, 0px));
}

/* Before any question has been asked (see the ai-chat-empty class toggled
   by showWelcome in ai-chat.js): the composer sits grouped with the
   greeting in the vertical middle of the screen, Gemini-style, instead of
   docked to the bottom like a normal chat input. Taken out of .ai-main's
   flex flow into an absolute overlay (positioned against .ai-main, which
   is already position:relative) rather than physically moving it in the
   DOM — .ai-thread naturally reclaims the full height once it's not
   sharing the column with the composer's normal flow space. */
.ai-chat-empty .ai-thread {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  justify-content: flex-start;
}

/* .ai-chat-empty .ai-thread's own display:flex (specificity 0,2,0) beats
   the browser's built-in "[hidden] { display:none }" (0,1,0) the same way
   it did for .ai-top-upgrade-btn and .ai-home-trending — see those rules'
   comments. Without this, the empty-state welcome message bleeds through
   underneath the Discover/Scheduled tabs whenever the account has never
   sent a message (body keeps the ai-chat-empty class regardless of which
   tab is active; only the `hidden` attribute set by refreshChatTabActive
   in ai-chat.js is supposed to hide #aiThread on those tabs). */
.ai-thread[hidden],
.ai-composer-wrap[hidden] {
  display: none !important;
}

/* Everything below is a plain top-down flow now (welcome -> composer ->
   trending -> discover promo), each a normal in-flow sibling with a small
   margin to the next. Previously these were position:absolute and anchored
   independently to a shared 30vh reference point with hand-tuned pixel
   offsets — that math silently double-counted .ai-thread's own flexed
   height (it still filled .ai-main via flex:1) on top of the vh anchor,
   which is what was pushing "Trending now" and the discover card off the
   bottom of the viewport. Plain flow can't get that kind of thing wrong:
   each element just sits under the one before it. .ai-main's
   overflow-y:auto (below) is the fallback for genuinely short viewports. */
.ai-chat-empty .ai-welcome {
  margin: 14vh auto 0;
}

.ai-chat-empty .ai-composer-wrap {
  /* Explicit static overrides the mobile media query's position:fixed
     (see .ai-composer-wrap further down) — empty state keeps the composer
     in normal flow under the welcome message on every breakpoint, same as
     before this rule stopped setting `position` implicitly via `absolute`. */
  position: static;
  width: 100%;
  max-width: 720px;
  margin: 28px auto 0;
  padding-left: 20px;
  padding-right: 20px;
  background: none;
}

/* A short feature card below the composer — same "Don't just ask —
   discover" pitch as the one-time intro modal (see #aiDiscoverIntroModal),
   just always reachable here instead of shown once and gone. */
.ai-home-discover-promo {
  display: none;
}

.ai-home-discover-promo[hidden] {
  display: none !important;
}

.ai-chat-empty .ai-home-discover-promo {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 640px;
  margin: 32px auto 40px;
  padding: 18px;
  background: var(--ai-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
}

.ai-home-discover-promo-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.ai-home-discover-promo-img {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex: 0 0 auto;
}

.ai-home-discover-promo-caption {
  width: 96px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--color-text-muted);
  text-align: center;
}

.ai-home-discover-promo-body {
  min-width: 0;
  flex: 1;
}

.ai-home-discover-promo-title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.ai-home-discover-promo-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ai-home-discover-promo-specs li {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.ai-home-discover-promo-specs li::before {
  content: '✦ ';
  color: var(--color-primary);
}

.ai-home-discover-promo-btn {
  padding: 8px 16px;
  font-size: 13px;
}

.ai-welcome {
  max-width: 680px;
  margin: 4vh auto 0;
  text-align: center;
  padding: 0 8px;
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

.ai-welcome h1 {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 auto 16px;
}

/* A single light-weight greeting line (no badge/subtitle) — Gemini-style
   simplified welcome screen instead of the old badge+headline+paragraph
   stack. */
.ai-welcome-greeting {
  /* !important because ".ai-welcome h1" (a descendant selector, higher
     specificity than this single class) already sets font-weight:800 —
     without it this lighter weight silently never applied at all. */
  font-weight: 500 !important;
  color: var(--color-text);
  margin: 0;
}

/* Persistent pill in the main content area's top-right corner, visible on
   every view (Chat/Discover/Scheduled) — mirrors Gemini's own always-there
   Upgrade button, rather than only being reachable from inside the
   sidebar's account section. */
.ai-top-upgrade-btn {
  position: fixed;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: 22px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 18px 9px 14px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.ai-top-upgrade-btn:hover {
  background: var(--color-primary-dark);
}

/* [hidden] and .ai-top-upgrade-btn's own class selector above are the same
   specificity (0,1,0) — without this, the browser's built-in
   "[hidden] { display: none }" rule loses the cascade tiebreak to this
   stylesheet's own unconditional "display: inline-flex" purely because it
   loads later, so toggling the hidden property in JS visually did nothing
   at all despite being set correctly. This one rule (specificity 0,2,0)
   is what actually makes hidden work. */
.ai-top-upgrade-btn[hidden] {
  display: none;
}

.ai-hero-sub {
  max-width: 560px;
  margin: 0 auto 28px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6;
}

.ai-provider-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-provider-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 5px 12px 5px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.ai-provider-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.ai-dot-openai { background: #10a37f; }
.ai-dot-anthropic { background: #d97757; }
.ai-dot-google { background: #4285f4; }
.ai-dot-xai { background: #111111; }

/* --- Explore chips (below the Discover grid) --- */

.ai-discover-explore {
  max-width: 760px;
  margin: 32px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.ai-explore-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.ai-explore-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-explore-chip-loading {
  font-size: 13px;
  color: var(--color-text-muted);
}

.ai-explore-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ai-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.ai-explore-chip-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary-dark);
}

.ai-explore-chip:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-soft);
  transform: translateY(-1px);
}

/* --- Discover --- */

.ai-discover-view {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6vh 20px 40px;
}

/* ---- Discover sub-tabs (Feed / Pics) ---- */

.ai-discover-subtabs-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.ai-discover-subtabs-row .ai-discover-subtabs {
  margin-bottom: 0;
}

.ai-discover-subtabs-row .ai-pics-search {
  flex: 1 1 180px;
  max-width: 320px;
  margin: 0;
}

.ai-discover-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.ai-discover-subtab {
  flex: 0 0 auto;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ai-discover-subtab:hover {
  color: var(--color-text);
}

.ai-discover-subtab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ---- Pics (visual discovery grid, lives inside the Discover tab's Pics sub-tab) ---- */

.ai-discover-visual {
  margin: 0 0 28px;
}

.ai-pics-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  scrollbar-width: none;
}

.ai-pics-filters::-webkit-scrollbar {
  display: none;
}

.ai-pics-filter {
  flex: 0 0 auto;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ai-pics-filter:hover {
  color: var(--color-text);
}

.ai-pics-filter.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.ai-pics-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0 14px;
  margin: 0 2px 14px;
  max-width: 320px;
  transition: border-color 0.15s ease;
}

.ai-pics-search:focus-within {
  border-color: var(--color-primary);
}

.ai-pics-search-icon {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

.ai-pics-search-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: none;
  background: none;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text);
}

.ai-pics-search-input:focus {
  outline: none;
}

.ai-pics-search-input::placeholder {
  color: var(--color-text-muted);
  font-weight: 500;
}

.ai-pics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* dense lets a normal square tile fill the gap a --featured/--wide tile
     would otherwise leave open beside it, instead of leaving a hole in
     the row until the next tile happens to be sized right for it. */
  grid-auto-flow: dense;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}

.ai-pic-tile {
  cursor: pointer;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Bento-style variety (see pickTileSizeClass in ai-chat.js) — a plain
   uniform grid of squares reads as a social-media photo grid (Instagram),
   which is explicitly NOT the goal here; mixing in a big featured tile
   and wide comparison tiles among the normal squares reads as a curated
   feed instead. */
/* Auto-placement's default for an unpositioned span-2 item in a 3-column
   grid always starts it at column 1 — --featured-left leans on that
   default, --featured-right forces the explicit start instead, which is
   what actually varies which side the featured tile lands on as more of
   them load in via scroll (see pickTileSizeClass). */
.ai-pic-tile--featured-left,
.ai-pic-tile--featured-right {
  grid-row: span 2;
}

.ai-pic-tile--featured-left {
  grid-column: span 2;
}

.ai-pic-tile--featured-right {
  grid-column: 2 / span 2;
}

.ai-pic-tile--wide {
  grid-column: span 2;
}

.ai-pic-tile--wide .ai-pic-tile-media {
  aspect-ratio: 2 / 1;
}

.ai-pic-tile--featured-left .ai-pic-tile-title,
.ai-pic-tile--featured-right .ai-pic-tile-title {
  font-size: 17px;
  font-weight: 700;
}

.ai-pic-tile-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-bg-soft);
}

.ai-pic-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ai-pic-tile-video {
  position: absolute;
  inset: 0;
}

/* YT.Player replaces the .ai-pic-tile-video span with a brand-new <iframe>
   sized by its own literal width/height attributes (computed in JS as
   real pixels, not CSS %) — that new element inherits none of the span's
   position:absolute/inset:0, so without this it just sits at its
   JS-computed pixel size instead of actually filling the square tile the
   way a photo's <img> does, reported live as the video tiles looking
   visibly thinner/shorter than the photo tiles beside them. */
.ai-pic-tile-video iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* The modal's own video wrapper — deliberately NOT sharing
   .ai-pic-tile-video's iframe rule above: that rule's !important
   width/height:100% is exactly right for 'cover' mode (an intentionally
   oversized, absolutely-positioned iframe that needs to fill its box) but
   would silently force-override 'contain' mode's own JS-computed
   shrink-to-fit sizing here, undoing the whole reason the modal uses a
   different fit mode in the first place. This iframe is a plain, normal
   (non-absolute) element sized directly by initYouTubePlayer's width/
   height attributes — no CSS override needed at all, .ai-pic-modal-video
   just needs to center whatever size it ends up being (see inline
   style="display:flex;align-items:center;justify-content:center" set
   alongside this class in ai-chat.js). */
.ai-pic-modal-video iframe {
  border: 0;
}

/* Sits on top of the YouTube iframe so a tap opens the tile (like a photo
   tile does) instead of being swallowed by the iframe's own play/pause
   toggle — see picTileHtml in ai-chat.js. */
.ai-pic-tile-video-catch {
  position: absolute;
  inset: 0;
}

.ai-pic-tile-title {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The desktop size above reads as clipped mid-word on a phone — a 3-column
   grid tile is much narrower there, so the same font-size fits less of the
   headline into the 2-line clamp before cutting it off. Back to the
   original pre-bump size, but only below the mobile/desktop split this
   file already uses elsewhere (see .ai-pic-modal above) — desktop keeps
   the larger, more premium-reading size from the wider tiles it has room
   for. */
@media (max-width: 860px) {
  .ai-pic-tile-title {
    font-size: 13px;
  }

  .ai-pic-tile--featured-left .ai-pic-tile-title,
  .ai-pic-tile--featured-right .ai-pic-tile-title {
    font-size: 15px;
  }
}

.ai-pic-tile-actions {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  gap: 6px;
  z-index: 1;
}

.ai-pic-tile-like,
.ai-pic-tile-share,
.ai-pic-tile-follow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(2px);
}

.ai-pic-tile-like:hover,
.ai-pic-tile-share:hover,
.ai-pic-tile-follow:hover {
  background: rgba(0, 0, 0, 0.65);
}

.ai-pic-tile-like.is-liked,
.ai-pic-tile-follow.is-following {
  color: var(--color-primary-light);
}

.ai-pics-loading-more {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  padding: 20px 0 40px;
}

/* Pull-to-refresh — custom since Discover scrolls inside this nested
   container, not the real page, so the OS's native pull-to-refresh never
   sees it. Height/opacity are driven inline by touch handlers in
   ai-chat.js while dragging (transition disabled during that via
   .ai-pull-dragging so it tracks the finger 1:1), then this transition
   takes over to snap it open/closed on release. */
.ai-pull-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--color-primary);
  transition: height 0.25s ease, opacity 0.25s ease;
}

.ai-pull-refresh.ai-pull-dragging {
  transition: none;
}

.ai-pull-refresh.ai-pull-spinning svg {
  animation: ai-pull-spin 0.8s linear infinite;
}

@keyframes ai-pull-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ai-discover-header {
  max-width: 680px;
  margin: 0 auto 32px;
  text-align: center;
  padding: 0 8px;
}

.ai-discover-trending {
  max-width: 760px;
  margin: 0 auto 36px;
}

.ai-trending-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 12px;
}

.ai-trending-label svg {
  color: var(--color-primary);
}

.ai-trending-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* A card is a div (role="button"), not a <button> — Like/Share below need
   to be real nested <button> elements, and buttons can't nest inside
   buttons. */
.ai-trending-item {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--ai-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  width: 100%;
}

.ai-trending-item:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-soft);
}

.ai-trending-item-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.ai-trending-item-emoji {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary);
}

.ai-trending-item-body {
  min-width: 0;
  flex: 1;
}

.ai-trending-item-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary-dark);
  margin-bottom: 2px;
}

.ai-trending-item-prompt {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.ai-trending-item-preview {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-top: 4px;
}

/* --- Like / Share footer, shared by text and image cards --- */

.ai-card-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border);
}

.ai-card-like,
.ai-card-share,
.ai-card-follow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
}

.ai-card-like:hover,
.ai-card-share:hover,
.ai-card-follow:hover {
  color: var(--color-primary);
}

.ai-card-like.is-liked,
.ai-card-follow.is-following {
  color: var(--color-primary);
}

.ai-card-like:disabled,
.ai-card-follow:disabled {
  cursor: default;
}

/* --- Image cards (real photos, selectively — see discoverCardHtml) --- */

.ai-trending-item-image {
  overflow: hidden;
}

.ai-trending-item-photo {
  display: block;
  width: 100%;
  /* A definite height instead of aspect-ratio+max-height together — Safari
     was observed back-deriving this element's WIDTH from the aspect-ratio
     against the clamped 110px height (110 * 3.2 ≈ 352px) instead of
     respecting the explicit width:100%, rendering it well under half the
     card's actual width. A plain fixed height sidesteps that ambiguity
     entirely (object-fit:cover still handles the crop the same way). */
  height: 110px;
  object-fit: cover;
  background: var(--color-bg-soft);
}

.ai-trending-item-image-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 14px;
}

.ai-trending-item-image-body {
  min-width: 0;
  flex: 1;
}

.ai-trending-item-image-prompt {
  display: block;
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
  margin-top: 2px;
}

/* If the external photo fails to load, fall back to looking like a plain
   text card instead of leaving a broken-image icon behind. */
.ai-trending-item-image.ai-image-broken .ai-trending-item-photo {
  display: none;
}

/* Persists in the DOM (unlike .ai-trending-item-video below it, which
   YT.Player replaces outright with its own iframe) — this is what actually
   holds the size, matching the photo cards' aspect ratio/max-height. */
.ai-trending-item-video-wrap {
  position: relative;
  display: block;
  width: 100%;
  /* Same fixed-height fix as .ai-trending-item-photo above — see its
     comment for why aspect-ratio+max-height together isn't used here. */
  height: 110px;
  overflow: hidden;
  background: var(--color-bg-soft);
}

/* Sizing/position is set inline by initYouTubePlayer (real pixels, computed
   from the wrapper's actual rendered box) — a fixed CSS percentage here
   didn't reliably override the fixed pixel width/height YT.Player always
   gives its iframe regardless of what it's asked for. This just needs to
   not draw a default iframe border. */
.ai-trending-item-video-wrap iframe {
  border: 0;
}

/* --- For You (personalized trending + evergreen mix) --- */

.ai-discover-foryou {
  max-width: 760px;
  margin: 0 auto 36px;
}

.ai-foryou-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 12px;
}

.ai-foryou-label svg {
  color: var(--color-primary);
}

.ai-foryou-edit {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
}

.ai-foryou-edit:hover {
  color: var(--color-primary);
}

.ai-foryou-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-interest-picker {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
}

.ai-interest-picker-intro {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

.ai-interest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ai-interest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ai-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 7px 13px 7px 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ai-interest-chip:hover {
  border-color: var(--color-primary);
}

.ai-interest-chip.is-selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.ai-interest-picker-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.ai-interest-skip {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.ai-interest-skip:hover {
  color: var(--color-text);
}

.ai-interest-save {
  padding: 9px 20px;
  font-size: 13.5px;
}

.ai-discover-header h1 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 auto 10px;
}

.ai-discover-grid {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.ai-explore-paywall {
  max-width: 380px;
  margin: 60px auto 0;
  text-align: center;
  padding: 32px 24px;
  border-radius: var(--radius-lg);
  background: var(--ai-surface);
  border: 1px solid var(--color-border);
}

.ai-explore-paywall-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.ai-explore-paywall-body {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 18px;
}

.ai-discover-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 40px 0;
}

.ai-discover-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  font: inherit;
  color: inherit;
}

.ai-discover-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.ai-discover-card-emoji {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary-dark);
}

.ai-discover-card-body {
  min-width: 0;
}

.ai-discover-card-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.ai-discover-card-prompt {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
}

@media (max-width: 640px) {
  .ai-discover-grid {
    grid-template-columns: 1fr;
  }
  .ai-pics-search {
    max-width: none;
  }
}

/* --- Chat messages --- */

.ai-msg {
  max-width: 720px;
  margin: 0 auto 22px;
}

.ai-msg-user {
  display: flex;
  justify-content: flex-end;
}

.ai-msg-user-bubble {
  background: var(--color-primary);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  max-width: 80%;
  white-space: pre-wrap;
}

.ai-msg-assistant-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.ai-msg-mode-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  vertical-align: middle;
}

.ai-loading[hidden] {
  display: none;
}

.ai-loading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.ai-loading-plan-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: ai-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

/* Regular answer-text size — same idea as ChatGPT's own "I'll compare
   X..." line while it works, not a small caption. Purely transient: shown
   only inside .ai-loading while waiting, never after the real answer
   replaces it (see fillAssistantMessage in ai-chat.js). */
.ai-plan-sentence {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text);
}

/* The smaller "Searched N websites" detail(s), stacked underneath the plan
   sentence — separate element from it on purpose (not the same line/row),
   same as ChatGPT's own layout. */
.ai-work-summary {
  font-size: 12.5px;
  color: var(--color-text-muted);
  padding-left: 30px; /* lines up under the plan text, past the spinner */
}

.ai-work-summary div + div {
  margin-top: 4px;
}

.ai-answer {
  background: var(--ai-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.ai-followups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.ai-followup-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-primary-dark);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ai-followup-btn:hover {
  border-color: var(--color-primary);
  background: var(--ai-surface);
}

.ai-followup-skel {
  display: block;
  width: 100%;
  height: 37px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--color-bg-soft) 25%, var(--ai-surface) 50%, var(--color-bg-soft) 75%);
  background-size: 200% 100%;
  animation: ai-followup-shimmer 1.4s ease-in-out infinite;
}

@keyframes ai-followup-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ai-answer-image-wrap {
  display: flex;
  justify-content: center;
}

/* Real photos attached to a "show me pictures of X" answer (see
   maybeAttachPictures on the backend) — small side-by-side thumbnails
   under the text, not a single hero image like .ai-answer-image above
   (that class is for AI-generated images, a different feature/size). */
.ai-answer-photos {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
}

.ai-answer-photo {
  height: 140px;
  width: auto;
  max-width: 220px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.ai-answer-image {
  max-width: 100%;
  width: 420px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.ai-answer-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text);
}

.ai-answer-text p {
  margin: 0 0 14px;
}

.ai-answer-text a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.ai-answer-text a:hover {
  border-bottom-color: var(--color-primary);
}

.ai-table-wrap {
  overflow-x: auto;
  margin: 4px 0 14px;
}

.ai-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
}

.ai-table th,
.ai-table td {
  padding: 8px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.ai-table th {
  font-weight: 700;
  color: var(--color-text);
}

.ai-table td {
  color: var(--color-text);
}

.ai-table tr:last-child td {
  border-bottom: none;
}

.ai-answer-text h3,
.ai-answer-text h4,
.ai-answer-text h5,
.ai-answer-text h6 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 18px 0 8px;
}

.ai-answer-text h3:first-child,
.ai-answer-text h4:first-child,
.ai-answer-text h5:first-child,
.ai-answer-text h6:first-child {
  margin-top: 0;
}

.ai-answer-text p:last-child {
  margin-bottom: 0;
}

.ai-answer-text ul,
.ai-answer-text ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.ai-answer-text li {
  margin-bottom: 6px;
  line-height: 1.55;
}

.ai-answer-text li:last-child {
  margin-bottom: 0;
}

.ai-answer-text strong {
  font-weight: 700;
}


.ai-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--color-primary-dark);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 14px;
}

:root[data-theme="dark"] .ai-error {
  background: #3a1518;
  border-color: #5c2328;
}

/* --- Composer (fixed bottom bar) --- */

.ai-composer-wrap {
  padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--color-bg) 40%);
  /* Smooths the translateY set in ai-chat.js (repositionComposerForKeyboard)
     as the keyboard opens/closes — without this, each intermediate
     visualViewport resize event along the way (the keyboard's own slide-up
     isn't instant) snapped the composer straight to that frame's value,
     visible as a small down-then-up jump instead of one smooth motion
     matching the keyboard's own animation. Scoped to transform only, not
     `all` — nothing else about this element should ease. */
  transition: transform 0.15s ease-out;
}

.ai-ask-box {
  max-width: 720px;
  margin: 0 auto;
  background: var(--ai-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px 10px;
  transition: border-color 0.15s, background 0.15s;
}

.ai-drag-over .ai-ask-box {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--ai-surface));
}

.ai-ask-box textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  max-height: 160px;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--color-text);
  line-height: 1.5;
  display: block;
  background: transparent;
}

.ai-attachments-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ai-attachment-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 200px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.ai-attachment-chip img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.ai-attachment-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-attachment-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1;
  padding: 0 0 0 2px;
  flex-shrink: 0;
}

.ai-attachment-chip-remove:hover {
  color: var(--color-text);
}

.ai-attachment-chip-error {
  color: #a6121a;
  border-color: #a6121a;
}

/* --- Scheduled tasks --- */

.ai-scheduled-view {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6vh 20px 40px;
}

.ai-scheduled-header {
  max-width: 680px;
  margin: 0 auto 24px;
  text-align: center;
}

.ai-scheduled-header h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.ai-scheduled-list {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-scheduled-item {
  background: var(--ai-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.ai-scheduled-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.ai-scheduled-item-prompt {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: break-word;
}

.ai-scheduled-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ai-scheduled-toggle-btn {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12.5px;
  color: var(--color-text);
  cursor: pointer;
}

.ai-scheduled-delete-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.ai-scheduled-delete-btn:hover {
  color: #a6121a;
}

.ai-scheduled-item-meta {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.ai-scheduled-item-error {
  margin-top: 8px;
  font-size: 13px;
  color: #a6121a;
}

.ai-scheduled-runs {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
}

.ai-scheduled-run-time {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.ai-scheduled-run-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

.ai-scheduled-suggestions {
  max-width: 680px;
  margin: 32px auto 0;
}

.ai-scheduled-suggestions-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.ai-scheduled-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-scheduled-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--ai-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.ai-scheduled-suggestion-body {
  flex: 1;
  min-width: 0;
}

.ai-scheduled-suggestion-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text);
}

.ai-scheduled-suggestion-prompt {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-scheduled-suggestion-btn {
  flex-shrink: 0;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}

.ai-scheduled-suggestion-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.ai-msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  justify-content: flex-end;
}

.ai-msg-attachment-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.3);
}

.ai-msg-attachment-file {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12.5px;
  color: #fff;
  max-width: 200px;
}

.ai-msg-attachment-file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-business-context-wrap {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.ai-business-context-wrap textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--color-text);
  line-height: 1.5;
  padding: 8px 10px;
  box-sizing: border-box;
}

.ai-ask-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* Still used by the Web Agent modal's "Where should it work?" selector
   (.ai-wa-where-selector) — only the composer's own mode picker moved to
   the dropdown below. */
.ai-mode-selector {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(166, 18, 26, 0.08));
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-pill);
  padding: 3px;
  box-shadow: 0 8px 24px rgba(166, 18, 26, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(166, 18, 26, 0.05);
}

.ai-mode-selector::-webkit-scrollbar { display: none; }

.ai-mode-option {
  position: relative;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.ai-mode-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ai-mode-option span {
  display: block;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(166, 18, 26, 0.14);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ai-mode-option:hover span {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(166, 18, 26, 0.25);
}

.ai-mode-option span em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.7;
  margin-left: 3px;
}

.ai-mode-option input:checked + span {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-primary-dark);
  border-color: rgba(166, 18, 26, 0.3);
  box-shadow: 0 4px 14px rgba(166, 18, 26, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* The mode selector's glass effect is hand-tuned around a white base and
   doesn't invert via variables — swap it for a dark-appropriate version. */
:root[data-theme="dark"] .ai-mode-selector {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(226, 71, 76, 0.1));
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .ai-mode-option span {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .ai-mode-option:hover span {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

:root[data-theme="dark"] .ai-mode-option input:checked + span {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1));
  border-color: rgba(226, 71, 76, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ChatGPT-style compact mode dropdown — the composer's own mode picker
   (Ask/Debate/Expert Council) now uses this instead of the pill row
   above. A single button showing the current mode, opening a small menu
   of radio-backed options (see the label+input markup in index.html). */
.ai-mode-dropdown-wrap {
  position: relative;
}

.ai-mode-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--ai-surface);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ai-mode-dropdown-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-soft);
}

.ai-mode-dropdown-btn svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Same author-vs-UA-stylesheet issue as .ai-mode-menu-item[hidden] below —
   .ai-mode-menu's own display:flex otherwise beats the browser's default
   [hidden] { display:none } regardless of the hidden attribute's actual
   value, which is exactly why toggling modeMenuEl.hidden in ai-chat.js
   correctly flipped the attribute but the menu stayed visibly open. */
.ai-mode-menu[hidden] {
  display: none !important;
}

.ai-mode-menu {
  position: absolute;
  /* Opens downward, under the composer, by default — see the mobile
     override below for the one case that needs it flipped upward. */
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--ai-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 190px;
  z-index: 20;
}

/* Beats the browser's own [hidden] { display:none } (same specificity,
   but author styles win over the UA stylesheet on source order alone) —
   without this, #aiCodeModeOption's `hidden` attribute would be silently
   overridden by .ai-mode-menu-item's own display:flex below. Same fix as
   .ai-thread[hidden] elsewhere in this file. */
.ai-mode-menu-item[hidden] {
  display: none !important;
}

.ai-mode-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.ai-mode-menu-item:hover {
  background: var(--color-bg-soft);
}

.ai-mode-menu-item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ai-mode-menu-item input:checked ~ span {
  color: var(--color-primary);
  font-weight: 700;
}

.ai-mode-menu-item span em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.6;
  margin-left: 4px;
}

.ai-composer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-composer-actions-left,
.ai-composer-actions-right {
  min-width: 0;
}

/* Hidden by default (see the `hidden` attribute in index.html) — revealed
   by updateAskBtnVisibility in ai-chat.js the moment there's text or an
   attachment to send, matching ChatGPT instead of always showing a
   full-width button with nothing to do. */
/* .ai-icon-btn below (same specificity, later in the file) used to win and
   strip this fill, leaving a thin outline that looked smaller than the
   solid live-voice button beside it. */
.ai-icon-btn.ai-send-btn {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.ai-icon-btn.ai-send-btn:hover {
  background: var(--color-primary-dark, var(--color-primary));
  border-color: var(--color-primary-dark, var(--color-primary));
}

.ai-icon-btn.ai-send-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.ai-attach-wrap {
  position: relative;
}

.ai-attach-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--ai-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 140px;
  z-index: 20;
}

.ai-attach-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

.ai-attach-menu-item:hover {
  background: var(--color-bg-soft);
}

.ai-icon-btn[hidden] {
  display: none;
}

.ai-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--ai-surface);
  color: var(--color-text);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ai-icon-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-soft);
}

.ai-icon-btn-filled,
.ai-icon-btn-filled:hover {
  background: #e2e2e2;
  border-color: #e2e2e2;
  color: #1a1a1a;
}

.ai-icon-btn.ai-mic-recording {
  background: #fee2e2;
  border-color: #c33a3f;
  animation: ai-pulse 1s ease-in-out infinite;
}

:root[data-theme="dark"] .ai-icon-btn.ai-mic-recording {
  background: #3a1518;
  border-color: #ea6367;
}

@keyframes ai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ---- Live voice call ---- */

.ai-live-backdrop {
  background: rgba(10, 10, 12, 0.92);
}

.ai-live-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.ai-live-orb-wrap {
  width: 420px;
  height: 420px;
  margin-top: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Real 3D head (WebGL canvas), lip-syncing to real audio — replaced a flat
   gradient orb, then a waveform-bar version, then a flat-photo jaw-split
   trick, on request for something custom and eventually for a real head
   rather than a 2D image faking it. live-voice-head.js (loaded as a module
   from index.html) owns the actual scene/render loop against this canvas;
   this is deliberately just sizing, no background/border/box-shadow — a
   plain rectangle would show as a visible box, but the renderer is created
   with alpha:true and the scene has no background color, so only the
   rendered head pixels themselves are ever opaque. */
.ai-live-head {
  display: block;
  width: 400px;
  height: 400px;
}

.ai-live-head.connecting {
  animation: ai-live-head-connecting 1.4s ease-in-out infinite;
}

@keyframes ai-live-head-connecting {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.ai-live-status {
  color: #f4f4f5;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

.ai-live-error {
  color: #f5a9aa;
  font-size: 13.5px;
  text-align: center;
  max-width: 280px;
}

.ai-live-trial-countdown {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
}

.ai-live-suggestions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  padding: 0 20px;
}

.ai-live-suggestions-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 600;
}

.ai-live-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-live-suggestion-item {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}

.ai-live-controls {
  display: flex;
  gap: 20px;
}

.ai-live-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.ai-live-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.ai-live-btn.ai-live-muted {
  background: rgba(255, 255, 255, 0.25);
}

.ai-live-end-btn {
  background: #a6121a;
}

.ai-live-end-btn:hover {
  background: #7d0e14;
}

/* ===== Responsive ===== */

@media (max-width: 860px) {
  .ai-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 15;
    transform: translateX(calc(-1 * var(--ai-sidebar-w)));
    box-shadow: var(--shadow-lg);
    will-change: transform;
  }

  .ai-app.ai-sidebar-open .ai-sidebar {
    transform: translateX(0);
  }

  .ai-sidebar-backdrop {
    /* No visible dim tint on purpose — a colored overlay here was causing
       a stuck grey rendering artifact on iOS Safari (both the status-bar
       and home-indicator safe-area strips) that persisted after closing
       and survived several targeted attempts to fix the repaint. Staying
       fully transparent sidesteps the whole class of bug. It's still a
       real element so tapping outside the open sidebar closes it. */
    position: fixed;
    inset: 0;
    z-index: 14;
    background: transparent;
    pointer-events: none;
  }

  .ai-app.ai-sidebar-open .ai-sidebar-backdrop {
    pointer-events: auto;
  }

  .ai-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ai-thread {
    padding-top: calc(56px + env(safe-area-inset-top, 20px));
    /* Room for the now-fixed composer below so the last message isn't
       hidden behind it. Empty-state only needs this reserved when the
       composer is actually fixed to the bottom, which it no longer is
       once a real conversation hasn't started — see the [hidden]-adjacent
       .ai-chat-empty override right below, which zeroes this back out and
       was previously missing, leaving a stray 200px gap baked into the
       welcome screen before the composer even started.
       --composer-h tracks the composer's real rendered height (set in
       ai-chat.js via ResizeObserver) — a hardcoded guess went stale
       whenever the composer's actual height changed (keyboard open, mode
       row wrapping on a narrow phone, safe-area differences by device),
       either leaving the last message hidden behind a taller composer or
       a big dead gap below a shorter one. 200px is only the fallback
       before JS has measured it once. */
    padding-bottom: calc(var(--composer-h, 200px) + 12px);
  }

  .ai-chat-empty .ai-thread {
    padding-bottom: 0;
  }

  /* The empty-state welcome/composer/discover-promo stack (see .ai-welcome
     etc. above) is anchored off .ai-welcome's own margin-top, which stacks
     on top of .ai-thread's own mobile-only padding-top just above — pushing
     the whole group noticeably lower on a phone than on desktop. Trimmed
     back down here so it lands in about the same spot. */
  .ai-chat-empty .ai-welcome {
    margin-top: 24vh;
  }

  .ai-chat-empty .ai-composer-wrap {
    margin-top: 20px;
  }

  .ai-discover-view {
    /* The fixed hamburger toggle (.ai-sidebar-toggle) sits at
       20px + safe-area-inset-top with a 36px height, so its bottom edge
       lands at 56px + inset — 6vh wasn't reliably clearing that on shorter
       phone viewports, so Feed's tabs/Trending header rendered right under
       (sometimes behind) the button. Match .ai-thread's own 56px clearance
       for the same button, plus a little breathing room since this is a
       visible header/tab row rather than a scrolled-past message. */
    padding-top: calc(72px + env(safe-area-inset-top, 20px));
  }
}

/* Plain, unconditional mobile rules — no .zuno-desktop-app exclusion.
   Two attempts at excluding the desktop app's own resized-narrow window
   from these (a (pointer: coarse) media condition, then an :where()-
   wrapped class selector) each broke real mobile Safari in a different
   way — reported live twice in a row as the composer failing to pin above
   the keyboard at all. The desktop-app narrow-window case (see
   mac-app/src/main.js's "small corner overlay" window) is handled in
   JavaScript instead — see the window.zunoNative check near the top of
   ai-chat.js, which now overrides these inline for that case specifically
   — rather than risking a third CSS specificity trick blind. */
@media (max-width: 860px) {
  .ai-composer-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }

  body:not(.ai-chat-empty) .ai-mode-menu {
    top: auto;
    bottom: calc(100% + 8px);
  }
}

@media (max-width: 640px) {
  .ai-msg-user-bubble { max-width: 90%; }
}

/* ---------- web agent ---------- */

.ai-wa-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  background: var(--ai-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto 0;
}

.ai-wa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.ai-wa-title { font-size: 15px; font-weight: 800; color: var(--color-text); }

.ai-wa-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
}

/* Every element below that's toggled via the `hidden` property also sets
   its own `display` in this stylesheet, which otherwise beats the browser's
   default `[hidden] { display: none }` rule (same specificity, later in the
   cascade) — without this, setting .hidden = true left them visually open
   anyway. This was the actual cause of the Web Agent modal rendering all
   three phases stacked on top of each other at once instead of one
   replacing another. */
.ai-wa-form[hidden],
.ai-wa-run[hidden],
.ai-wa-done[hidden],
.ai-wa-confirm-bar[hidden],
.ai-wa-talk-bar[hidden],
.ai-wa-voice-toggle-btn[hidden],
.ai-wa-mic-btn[hidden],
.ai-wa-talk-mic-btn[hidden] {
  display: none;
}

.ai-wa-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  overflow-y: auto;
}

.ai-wa-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 6px;
}

.ai-wa-task-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.ai-wa-task-input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  background: var(--ai-surface);
  resize: vertical;
  min-height: 64px;
}

.ai-wa-mic-btn, .ai-wa-talk-mic-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--ai-surface);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ai-wa-mic-btn.ai-wa-mic-active, .ai-wa-talk-mic-btn.ai-wa-mic-active {
  background: #a6121a;
  border-color: #a6121a;
  color: #fff;
  animation: ai-wa-pulse 1.2s ease-in-out infinite;
}

@keyframes ai-wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(166, 18, 26, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(166, 18, 26, 0); }
}

.ai-wa-url-input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  background: var(--ai-surface);
}

.ai-wa-note {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 2px 0 4px;
}

.ai-wa-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-wa-attach-file-btn {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--ai-surface);
  cursor: pointer;
  white-space: nowrap;
}

.ai-wa-file-name {
  font-size: 13px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-wa-remove-file-btn {
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.ai-wa-start-btn { width: 100%; margin-top: 4px; }
.ai-wa-start-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ai-wa-run {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.ai-wa-viewport {
  position: relative;
  background: #0a0a0c;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-wa-screenshot {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ai-wa-viewport-loading {
  position: absolute;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.ai-wa-url-bar {
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 6px 14px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.ai-wa-chat-log {
  flex: 1;
  min-height: 60px;
  max-height: 160px;
  overflow-y: auto;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-wa-chat-bubble {
  max-width: 88%;
  padding: 7px 11px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
}

.ai-wa-chat-bubble.agent {
  align-self: flex-start;
  background: var(--color-bg-soft);
  color: var(--color-text);
}

.ai-wa-chat-bubble.user {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
}

.ai-wa-status-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0 14px 8px;
  flex-shrink: 0;
}

.ai-wa-confirm-bar {
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.ai-wa-confirm-text { font-size: 13.5px; color: var(--color-text); line-height: 1.4; }

.ai-wa-confirm-btns { display: flex; gap: 8px; }

.ai-wa-confirm-btn {
  flex: 1;
  border-radius: var(--radius-pill, 999px);
  padding: 10px;
  font-size: 13.5px;
  font-weight: 700;
  border: 1px solid var(--color-border);
  cursor: pointer;
}

.ai-wa-approve-btn { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.ai-wa-reject-btn { background: var(--ai-surface); color: var(--color-text); }

.ai-wa-talk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.ai-wa-talk-input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill, 999px);
  padding: 9px 14px;
  font: inherit;
  font-size: 13.5px;
  color: var(--color-text);
  background: var(--ai-surface);
}

.ai-wa-voice-toggle-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--ai-surface);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ai-wa-voice-toggle-btn.ai-wa-voice-muted {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background: var(--color-bg-soft);
}

.ai-wa-stop-btn {
  flex-shrink: 0;
  background: #a6121a;
  color: #fff;
  border: none;
  border-radius: var(--radius-pill, 999px);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ai-wa-take-control-btn {
  flex-shrink: 0;
  background: var(--color-bg-soft);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill, 999px);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ai-wa-take-control-btn.ai-wa-control-taken {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.ai-wa-done {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  overflow-y: auto;
}

.ai-wa-done-screenshot {
  width: 100%;
  border-radius: var(--radius-sm);
  background: #0a0a0c;
}

.ai-wa-result-text { font-size: 14px; color: var(--color-text); line-height: 1.5; }

/* iOS Safari auto-zooms the whole page when a focused text input's
   computed font-size is under 16px — every text input/textarea on this
   site sits below that threshold for a tighter desktop look, which was
   causing the page to zoom in as soon as someone tapped into one (and
   stay zoomed after they tapped away, until manually pinched back out).
   Bumping to exactly 16px on touch-sized viewports avoids triggering it at
   all, without touching the tighter sizing on desktop. */
@media (max-width: 768px) {
  .ai-login-form input,
  .ai-ask-box textarea,
  .ai-business-context-wrap textarea,
  .ai-wa-task-input,
  .ai-wa-url-input,
  .ai-wa-talk-input,
  .ai-pics-search-input {
    font-size: 16px;
  }
}

/* Computer Control popup — feature list + how-to line, and the live
   "working on it" status bubble shown while a session runs. */
.ai-cc-features {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.ai-cc-features li { padding: 6px 0 6px 22px; position: relative; }
.ai-cc-features li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
}
.ai-cc-features strong { color: var(--color-text); font-weight: 600; }
.ai-cc-howto {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 18px;
  text-align: left;
}
.ai-cc-status {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-muted);
  font-size: 15px;
}
.ai-cc-setup {
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 16px;
}
.ai-cc-setup-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}
.ai-cc-perm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.ai-cc-perm + .ai-cc-perm { border-top: 1px solid var(--color-border); }
.ai-cc-perm-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}
.ai-cc-perm.is-granted .ai-cc-perm-dot {
  border-color: #1f9d55;
  background: #1f9d55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ai-cc-perm-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--color-text-muted);
}
.ai-cc-perm-text strong { color: var(--color-text); font-weight: 600; font-size: 14px; }
.ai-cc-perm-btn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.ai-cc-perm.is-granted .ai-cc-perm-btn { display: none; }
.ai-cc-setup-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin: 6px 0 0;
}
.ai-cc-restart {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.ai-cc-restart[hidden], .ai-cc-setup[hidden] { display: none; }
#aiComputerControlTryBtn:disabled { opacity: 0.5; cursor: not-allowed; }
/* The classes above set display, which beats the browser's own
   [hidden] rule — keep hidden actually hidden. */
.ai-scheduled-nav-btn[hidden],
#aiComputerControlTryBtn[hidden],
#aiCcDownloadBtn[hidden],
#aiCcWebNote[hidden] { display: none; }

/* Memory screen */
.ai-memory-modal { max-height: min(640px, 90vh); display: flex; flex-direction: column; }
.ai-memory-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 14px;
  cursor: pointer;
  text-align: left;
}
.ai-memory-toggle input { width: 16px; height: 16px; accent-color: var(--color-primary); }
.ai-memory-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.ai-memory-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text);
}
.ai-memory-item + .ai-memory-item { border-top: 1px solid var(--color-border); }
.ai-memory-item span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ai-memory-item small { display: block; color: var(--color-text-muted); font-size: 12px; margin-top: 2px; }
.ai-memory-delete {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  flex-shrink: 0;
}
.ai-memory-delete:hover { color: var(--color-text); background: var(--color-bg-soft); }
.ai-memory-empty { padding: 16px 12px; font-size: 13px; color: var(--color-text-muted); text-align: center; }
#aiMemoryClearBtn[hidden] { display: none; }

/* Thumbs up/down under answers */
.ai-feedback {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}
.ai-feedback-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  padding: 5px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
}
.ai-feedback-btn:hover { background: var(--color-bg-soft); color: var(--color-text); }
.ai-feedback-btn.is-selected { color: var(--color-primary); }
.ai-feedback-reason {
  display: flex;
  gap: 6px;
  flex: 1 1 260px;
  margin-left: 4px;
}
.ai-feedback-reason[hidden], .ai-feedback-thanks[hidden] { display: none; }
.ai-feedback-reason input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
}
.ai-feedback-reason button {
  font-size: 13px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
}
.ai-feedback-thanks { font-size: 12px; color: var(--color-text-muted); margin-left: 4px; }

/* Double-tap to like (Explore tiles and the photo popup) */
.ai-pic-tile, .ai-pic-modal-media { touch-action: manipulation; }
.ai-pic-tile-media, .ai-pic-modal-media { position: relative; }
.ai-like-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  color: #fff;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
  pointer-events: none;
  z-index: 5;
  animation: ai-like-burst 0.9s ease-out forwards;
}
.ai-like-burst svg { width: 100%; height: 100%; }
@keyframes ai-like-burst {
  0% { transform: scale(0.3); opacity: 0; }
  15% { transform: scale(1.15); opacity: 1; }
  30% { transform: scale(0.95); }
  45% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* ---------- Rabbit Hole ---------- */
.ai-rh-backdrop { z-index: 1200; }
.ai-rh {
  max-width: 520px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  max-height: min(760px, calc(100vh - 40px));
  overflow: hidden;
}
.ai-rh-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--color-border);
}
.ai-rh-icon-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
.ai-rh-icon-btn:hover { background: var(--color-bg-soft); color: var(--color-text); }
.ai-rh-crumbs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.ai-rh-crumbs::-webkit-scrollbar { display: none; }
.ai-rh-crumb {
  border: none;
  background: none;
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.ai-rh-crumb:hover { background: var(--color-bg-soft); color: var(--color-text); }
.ai-rh-crumb.is-current { color: var(--color-text); font-weight: 600; cursor: default; }
.ai-rh-crumb-sep { color: var(--color-text-muted); font-size: 12px; flex-shrink: 0; }
.ai-rh-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 8px; }
.ai-rh-label, .ai-rh-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.ai-rh-section-label { margin: 18px 0 8px; }
.ai-rh-title { font-size: 21px; line-height: 1.3; margin: 0 0 12px; color: var(--color-text); }
.ai-rh-branches { display: flex; flex-direction: column; gap: 8px; }
.ai-rh-branch {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ai-rh-branch:hover { border-color: var(--color-primary); transform: translateX(2px); }
.ai-rh-branch-emoji { font-size: 18px; flex-shrink: 0; }
.ai-rh-branch > span:nth-child(2) { flex: 1; }
.ai-rh-branch-arrow { color: var(--color-text-muted); font-size: 18px; }
.ai-rh-skel, .ai-rh-branch-skel {
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--color-bg-soft), var(--color-border), var(--color-bg-soft));
  background-size: 200% 100%;
  animation: ai-rh-shimmer 1.2s linear infinite;
}
.ai-rh-branch-skel { height: 44px; border-radius: var(--radius-md); }
@keyframes ai-rh-shimmer { to { background-position: -200% 0; } }
.ai-rh-error { font-size: 13px; color: var(--color-text-muted); }
.ai-rh-scenarios[hidden] { display: none; }
.ai-rh-scenario {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--color-bg-soft);
}
.ai-rh-scenario-head { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text); }
.ai-rh-scenario-head strong { flex: 1; font-weight: 600; }
.ai-rh-scenario p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.ai-rh-likelihood {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #1f9d5522;
  color: #1f9d55;
  flex-shrink: 0;
}
.ai-rh-likelihood[data-l="Possible"] { background: #d9920022; color: #b87800; }
.ai-rh-likelihood[data-l="Wild card"] { background: #8b5cf622; color: #8b5cf6; }
.ai-rh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--color-border);
}
.ai-rh-actions .ai-story-action-btn { flex: 1 1 auto; }

/* ---------- Today's rabbit hole card (top of Explore) ---------- */
.ai-daily-rh {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-soft);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.ai-daily-rh[hidden] { display: none; }
.ai-daily-rh:hover { border-color: var(--color-primary); }
.ai-daily-rh-img { width: 34%; max-width: 220px; min-height: 120px; object-fit: cover; flex-shrink: 0; }
.ai-daily-rh-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-width: 0; }
.ai-daily-rh-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); }
.ai-daily-rh-question { font-size: 17px; font-weight: 600; line-height: 1.3; }
.ai-daily-rh-teaser { font-size: 13px; color: var(--color-text-muted); line-height: 1.45; }
.ai-daily-rh-cta { font-size: 13px; font-weight: 600; color: var(--color-primary); margin-top: 2px; }

@media (max-width: 600px) {
  .ai-rh-scroll { padding: 16px 16px 8px; }
  .ai-rh-actions { padding: 10px 16px 14px; }
  .ai-daily-rh-img { width: 32%; min-height: 110px; }
  .ai-daily-rh-question { font-size: 15.5px; }
}

/* Computer Control: plan checklist, "Your turn" handoff, do-steps button */
.ai-cc-plan { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; }
.ai-cc-plan-title { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 6px; }
.ai-cc-plan ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--color-text); }
.ai-cc-plan li.is-done { color: var(--color-text-muted); text-decoration: line-through; }
.ai-cc-plan li.is-done::marker { content: '✓  '; color: #1f9d55; }
.ai-cc-takeover { border: 2px solid var(--color-primary); border-radius: var(--radius-md); padding: 14px 16px; background: var(--color-bg-soft); }
.ai-cc-takeover.is-resolved { border-color: var(--color-border); opacity: 0.7; }
.ai-cc-takeover-title { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.ai-cc-takeover p { margin: 4px 0; font-size: 14px; line-height: 1.5; color: var(--color-text); }
.ai-cc-takeover .ai-cc-takeover-note { font-size: 12.5px; color: var(--color-text-muted); }
.ai-cc-takeover-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ai-cc-takeover-stop { background: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 8px 14px; color: var(--color-text); cursor: pointer; font-size: 14px; }
.ai-do-steps-btn { margin-top: 12px; }

/* ---------- Zuno Agent panel ---------- */
.ai-agent-modal { max-width: 560px; text-align: left; }
.ai-agent-modal .ai-discover-intro-title { text-align: left; }
.ai-agent-intro { font-size: 14px; line-height: 1.5; color: var(--color-text-muted); margin: 0 0 8px; }
.ai-agent-section { border-top: 1px solid var(--color-border); padding: 14px 0 4px; }
.ai-agent-section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 8px; }
.ai-agent-note { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45; margin: 6px 0 0; }
.ai-agent-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ai-agent-btn { background: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 7px 12px; font-size: 13px; color: var(--color-text); cursor: pointer; }
.ai-agent-btn:hover { border-color: var(--color-primary); }
.ai-agent-btn:disabled { opacity: 0.6; cursor: default; }
.ai-agent-levels { display: flex; flex-direction: column; gap: 6px; }
.ai-agent-level { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; cursor: pointer; font-size: 13px; line-height: 1.45; color: var(--color-text-muted); }
.ai-agent-level strong { display: block; color: var(--color-text); font-size: 14px; }
.ai-agent-level input { margin-top: 3px; accent-color: var(--color-primary); }
.ai-agent-level:has(input:checked) { border-color: var(--color-primary); background: var(--color-bg-soft); }
.ai-agent-rules { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: transparent; color: var(--color-text); resize: vertical; }
.ai-agent-apps { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ai-agent-app { display: flex; justify-content: space-between; font-size: 14px; color: var(--color-text); }
.ai-agent-app .is-on { color: #1f9d55; font-size: 13px; }
.ai-agent-app .is-off { color: var(--color-text-muted); font-size: 13px; }
.ai-agent-suggestions { display: flex; flex-direction: column; gap: 8px; }
.ai-agent-empty { font-size: 13px; color: var(--color-text-muted); padding: 6px 0; }
.ai-agent-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; }
.ai-agent-item.is-handled { opacity: 0.65; }
.ai-agent-item-title { font-size: 14px; font-weight: 600; color: var(--color-text); }
.ai-agent-item-detail, .ai-agent-when { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.45; }
.ai-agent-draft { width: 100%; box-sizing: border-box; margin-top: 8px; font: inherit; font-size: 13.5px; line-height: 1.5; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); color: var(--color-text); resize: vertical; }
.ai-agent-done { font-size: 13px; color: #1f9d55; margin-top: 6px; }
.ai-agent-badge { margin-left: auto; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.ai-agent-badge[hidden] { display: none; }
#aiAgentNavBtn[hidden] { display: none; }
.ai-agent-item .btn { padding: 7px 14px; font-size: 13px; min-height: 0; border-radius: var(--radius-md); }

/* ---------- Zuno mascot (the hologram head, as a round badge) ---------- */
/* Home screen: just the head, facing straight — a blueprint-blue version
   for light mode and a glowing one for dark mode. */
.ai-welcome-mascot {
  display: flex;
  justify-content: center;
  margin: 0 auto 12px;
  animation: ai-mascot-float 5s ease-in-out infinite;
}
.ai-welcome-head { width: auto; height: 128px; }
.ai-welcome-head-dark { display: none; filter: drop-shadow(0 0 16px rgba(95, 208, 255, 0.35)); }
:root[data-theme="dark"] .ai-welcome-head-light { display: none; }
:root[data-theme="dark"] .ai-welcome-head-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ai-welcome-head-light { display: none; }
  :root:not([data-theme="light"]) .ai-welcome-head-dark { display: block; }
}
@keyframes ai-mascot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) { .ai-welcome-mascot { animation: none; } }
/* Small avatar before every "Zuno AI" answer label. */
.ai-msg-assistant-label { display: flex; align-items: center; gap: 7px; }
.ai-msg-assistant-label::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 21px;
  background: var(--zuno-head-img) center / contain no-repeat;
  filter: var(--zuno-head-filter);
}
.ai-agent-heading, .ai-cc-takeover-title { display: flex; align-items: center; gap: 10px; }
/* The straight-on head as a small icon (Zuno Agent title, "Your turn"). */
.ai-zuno-icon { flex-shrink: 0; width: 24px; height: 32px; background: var(--zuno-head-img) center / contain no-repeat; filter: var(--zuno-head-filter); }
.ai-cc-takeover-title .ai-zuno-icon { width: 21px; height: 28px; }
:root { --zuno-head-img: url('/images/zuno-head-light.webp?v=3'); --zuno-head-filter: none; }
:root[data-theme="dark"] { --zuno-head-img: url('/images/zuno-head-dark.webp?v=3'); --zuno-head-filter: brightness(1.8) drop-shadow(0 0 5px rgba(95, 208, 255, 0.55)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --zuno-head-img: url('/images/zuno-head-dark.webp?v=3'); --zuno-head-filter: brightness(1.8) drop-shadow(0 0 5px rgba(95, 208, 255, 0.55)); } }

/* Home greeting: the live head + what Zuno says to you */
.ai-welcome-mascot { position: relative; }
.ai-welcome-head-canvas { width: 150px; height: 170px; display: block; }
.ai-welcome-mascot.is-live .ai-welcome-head { display: none !important; }
.ai-greeting {
  max-width: 520px;
  margin: 0 auto 18px;
  text-align: center;
}
.ai-greeting-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text);
  min-height: 1.55em;
}
.ai-greeting-text.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--color-primary);
  animation: ai-greeting-caret 0.9s steps(2) infinite;
}
@keyframes ai-greeting-caret { 50% { opacity: 0; } }
.ai-greeting-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.ai-greeting-chip {
  font: inherit;
  font-size: 13.5px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
  animation: ai-greeting-chip-in 0.3s ease both;
}
.ai-greeting-chip:hover { border-color: var(--color-primary); transform: translateY(-1px); }
@keyframes ai-greeting-chip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Once the head has spoken, its message is the heading — the big title
   steps aside for a quiet lead-in to the ask box. */
.ai-welcome-or { display: none; }
.ai-greeting:not([hidden]) ~ .ai-welcome-greeting { display: none; }
.ai-greeting:not([hidden]) ~ .ai-welcome-or {
  display: block;
  margin: 18px 0 0;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) { .ai-greeting-chip { animation: none; } }

/* Live head pinned at the top of an open chat (the home head's canvas is
   moved in here, see placeHead in ai-chat.js). */
.ai-chat-head {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 72px;
  z-index: 3;
  pointer-events: none;
}
.ai-chat-head canvas { width: 100% !important; height: 100% !important; display: block; }
body.ai-chat-has-head:not(.ai-chat-empty) .ai-thread { padding-top: calc(92px + env(safe-area-inset-top, 0px)); }

/* ---------- For You cards (home) ---------- */
.ai-for-you { display: flex; flex-direction: column; gap: 8px; width: min(560px, 100%); margin: 14px auto 4px; text-align: left; }
.ai-for-you-card {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px 11px 14px; border: 1px solid var(--color-border); border-radius: 14px;
  background: var(--ai-surface); animation: ai-greeting-chip-in 0.35s ease both;
}
.ai-for-you-icon { font-size: 18px; flex-shrink: 0; width: 22px; text-align: center; }
.ai-for-you-text { flex: 1; min-width: 0; }
.ai-for-you-title { font-size: 14.5px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-for-you-detail { font-size: 13px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.ai-for-you-btn {
  flex-shrink: 0; border: none; border-radius: 999px; padding: 7px 13px;
  background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ai-for-you-btn:hover { background: var(--color-primary-dark, var(--color-primary)); }
@media (max-width: 520px) {
  .ai-for-you-card { flex-wrap: wrap; }
  .ai-for-you-btn { margin-left: 34px; }
}

/* ---------- Goals ---------- */
.ai-agent-btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ai-agent-btn-primary:hover { background: var(--color-primary-dark, var(--color-primary)); }
.ai-agent-btn-primary:disabled { opacity: 0.6; }
.ai-goal-form { display: flex; gap: 8px; margin: 6px 0 4px; }
.ai-goal-form input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--ai-surface); color: var(--color-text); font-size: 14px;
}
.ai-goals-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ai-goal { border: 1px solid var(--color-border); border-radius: 14px; padding: 14px; }
.ai-goal.is-done { opacity: 0.7; }
.ai-goal-head { display: flex; justify-content: space-between; gap: 10px; }
.ai-goal-title { font-weight: 700; font-size: 15px; color: var(--color-text); }
.ai-goal-why { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }
.ai-goal-remove { border: none; background: none; color: var(--color-text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.ai-goal-bar { height: 5px; border-radius: 999px; background: var(--color-bg-soft); margin: 10px 0; overflow: hidden; }
.ai-goal-bar span { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; transition: width 0.3s ease; }
.ai-goal-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ai-goal-steps li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.ai-goal-steps label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; color: var(--color-text); }
.ai-goal-steps input { margin-top: 3px; accent-color: var(--color-primary); }
.ai-goal-steps li.is-done span { text-decoration: line-through; color: var(--color-text-muted); }
.ai-goal-do { flex-shrink: 0; border: 1px solid var(--color-border); background: var(--ai-surface); color: var(--color-text); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ai-goal-do:hover { border-color: var(--color-primary); }

/* ---------- Universal search results ---------- */
.ai-usearch p { margin: 0 0 10px; }
.ai-usearch-section { margin: 12px 0; }
.ai-usearch-title { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 6px; }
.ai-usearch-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 9px 12px; margin-bottom: 6px; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--ai-surface); color: var(--color-text); text-decoration: none; font: inherit; cursor: pointer;
}
a.ai-usearch-item:hover, button.ai-usearch-item:hover { border-color: var(--color-primary); }
.ai-usearch-item strong { font-size: 14px; }
.ai-usearch-item span { font-size: 12.5px; color: var(--color-text-muted); }
.ai-usearch-item em { font-style: normal; font-size: 13px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-usearch-note { font-size: 13px; color: var(--color-text-muted); }

/* ---------- Automation setup card ---------- */
.ai-automation { border: 1px solid var(--color-border); border-radius: 14px; padding: 14px 16px; background: var(--ai-surface); }
.ai-automation-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-primary); }
.ai-automation-summary { font-size: 15.5px; font-weight: 600; color: var(--color-text); margin: 4px 0; }
.ai-automation-detail { font-size: 13.5px; color: var(--color-text-muted); }
.ai-automation-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ai-automation-note { font-size: 13.5px; color: var(--color-text-muted); margin-top: 8px; }

/* ---------- Connect Google pop-up ---------- */
.ai-connect-modal { max-width: 400px; text-align: center; padding-top: 28px; }
.ai-connect-logo { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
.ai-connect-title { margin: 0 0 4px; font-size: 21px; color: var(--color-text); }
.ai-connect-sub { margin: 0 0 14px; color: var(--color-text-muted); font-size: 14.5px; }
.ai-connect-list { list-style: none; padding: 0; margin: 0 auto 16px; display: inline-flex; flex-direction: column; gap: 7px; text-align: left; font-size: 14.5px; color: var(--color-text); }
.ai-connect-go {
  width: 100%; padding: 12px 16px; border: none; border-radius: 12px; cursor: pointer;
  background: var(--color-primary); color: #fff; font-size: 15.5px; font-weight: 700;
}
.ai-connect-go:hover { background: var(--color-primary-dark, var(--color-primary)); }
.ai-connect-go:disabled { opacity: 0.6; cursor: default; }
.ai-connect-status { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--color-bg-soft); color: var(--color-text); font-size: 14px; }
.ai-connect-status.is-ok { background: rgba(22, 163, 74, 0.14); color: #16a34a; font-weight: 600; }
.ai-connect-fine { margin: 10px 0 0; font-size: 12.5px; color: var(--color-text-muted); }

/* For You cards make the home stack much taller than the old one-line
   greeting, so the centering gap above it pushed the ask box out of view
   in the Mac app's default window. With cards showing, start near the top;
   in short windows also shrink the head. */
.ai-chat-empty .ai-welcome:has(.ai-for-you:not([hidden])) { margin-top: 2vh; }
@media (max-width: 768px) {
  .ai-chat-empty .ai-welcome:has(.ai-for-you:not([hidden])) { margin-top: 4vh; }
}
@media (max-height: 820px) {
  .ai-chat-empty .ai-welcome { margin-top: 5vh; }
  .ai-welcome-head-canvas { width: 116px; height: 132px; }
  .ai-welcome-mascot .ai-welcome-head { height: 104px; width: auto; }
  .ai-for-you { margin-top: 10px; gap: 6px; }
  .ai-for-you-card { padding-top: 8px; padding-bottom: 8px; }
  .ai-chat-empty .ai-composer-wrap { margin-top: 18px; }
}
@media (max-height: 560px) {
  .ai-welcome-head-canvas { width: 84px; height: 96px; }
  .ai-welcome-mascot .ai-welcome-head { height: 80px; }
  .ai-chat-empty .ai-welcome, .ai-chat-empty .ai-welcome:has(.ai-for-you:not([hidden])) { margin-top: 0; }
}
@media (max-height: 560px) {
  .ai-for-you-detail { display: none; }
  .ai-for-you-card { padding-top: 6px; padding-bottom: 6px; }
  .ai-greeting-chips { margin-top: 6px; }
  .ai-chat-empty .ai-composer-wrap { margin-top: 10px; }
  .ai-chat-empty .ai-thread { padding-top: 44px; }
}

/* For You, list style: "📧 Sarah hasn't replied in 3 days — Prepare follow-up" */
.ai-for-you { gap: 2px; margin-top: 12px; width: min(600px, 100%); }
.ai-for-you-card {
  border: none; background: none; border-radius: 10px;
  padding: 7px 10px; gap: 10px; align-items: baseline; flex-wrap: nowrap;
}
.ai-for-you-card:hover { background: var(--color-bg-soft); }
.ai-for-you-icon { font-size: 17px; width: auto; }
.ai-for-you-line { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.45; color: var(--color-text); }
.ai-for-you-title { font-weight: 400; white-space: normal; overflow: visible; font-size: inherit; }
.ai-for-you-dash { color: var(--color-text-muted); }
.ai-for-you-btn,
.ai-for-you-btn:hover {
  display: inline; padding: 0; margin: 0; border: none; background: none; border-radius: 0;
  color: var(--color-primary); font: inherit; font-weight: 600; cursor: pointer;
}
.ai-for-you-btn:hover { text-decoration: underline; }
@media (max-width: 520px) { .ai-for-you-btn { margin-left: 0; } }
@media (max-height: 820px) { .ai-for-you-card { padding-top: 5px; padding-bottom: 5px; } }

/* ---------- Live screen card (Web Agent / Computer Control in the chat) ---------- */
.ai-lsc { border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; background: var(--ai-surface); max-width: 560px; }
.ai-lsc-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ai-lsc-head .ai-spinner { flex-shrink: 0; }
.ai-lsc-head-text { flex: 1; min-width: 0; }
.ai-lsc-title { font-size: 13px; font-weight: 700; color: var(--color-primary); }
.ai-lsc-status { font-size: 14px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-lsc-stop { flex-shrink: 0; border: 1px solid var(--color-border); background: var(--ai-surface); color: var(--color-text); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ai-lsc-stop:hover { border-color: var(--color-primary); }
.ai-lsc-screen { position: relative; background: #0b0b0d; border-top: 1px solid var(--color-border); }
.ai-lsc-screen.is-empty { height: 160px; display: flex; align-items: center; justify-content: center; }
.ai-lsc-placeholder { color: #9a9a9a; font-size: 13px; }
.ai-lsc-screen img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; cursor: zoom-in; }
.ai-lsc-url { position: absolute; top: 8px; left: 8px; max-width: calc(100% - 16px); padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #eee; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-lsc.is-done .ai-lsc-title { color: var(--color-text-muted); }
.ai-lsc.is-done .ai-lsc-screen img { max-height: 180px; opacity: 0.85; }
.ai-lsc-zoom { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.82); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.ai-lsc-zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }

/* ---------- "Book this for me" ---------- */
.ai-book-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ai-book-btn { border: none; border-radius: 999px; padding: 9px 16px; background: var(--color-primary); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.ai-book-btn:hover { background: var(--color-primary-dark, var(--color-primary)); }
.ai-book-note { font-size: 13px; color: var(--color-text-muted); }

/* ---------- Path to letting Zuno run everything (home) ---------- */
.ai-journey { width: min(560px, 100%); margin: 16px auto 0; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--ai-surface); text-align: left; }
.ai-journey-top { display: flex; align-items: center; gap: 10px; }
.ai-journey-level { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-primary); white-space: nowrap; }
.ai-journey-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--color-bg-soft); overflow: hidden; }
.ai-journey-bar span { display: block; height: 100%; border-radius: 999px; background: var(--color-primary); transition: width 0.4s ease; }
.ai-journey-all { border: none; background: none; color: var(--color-text-muted); font-size: 12.5px; cursor: pointer; padding: 0; }
.ai-journey-all:hover { color: var(--color-text); }
.ai-journey-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 14.5px; color: var(--color-text); }
.ai-journey-go { flex-shrink: 0; border: none; border-radius: 999px; padding: 7px 14px; background: var(--color-primary); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.ai-journey-go:disabled { opacity: 0.85; cursor: default; }
.ai-journey-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 13.5px; color: var(--color-text-muted); }
.ai-journey-steps li.is-done { color: var(--color-text); }
.ai-journey-steps li.is-next { color: var(--color-primary); font-weight: 600; }
@media (max-width: 520px) { .ai-journey-steps { grid-template-columns: 1fr; } }
@media (max-height: 560px) { .ai-journey { margin-top: 8px; padding: 8px 12px; } }
.ai-journey-steps[hidden] { display: none; }
.ai-journey { transition: opacity 0.4s ease, transform 0.4s ease; }
.ai-journey.is-leaving { opacity: 0; transform: translateY(-6px); }