/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Per-person chat display. The scroller carries the viewer's choice, so rows
   arriving over the live stream adapt without re-rendering. */
.chat-text-small .message-body { font-size: 0.8125rem; line-height: 1.3rem; }
.chat-text-large .message-body { font-size: 1rem; line-height: 1.6rem; }
.chat-compact article[data-controller~="message-sheet"] { margin-top: 0.25rem; padding-top: 0.125rem; padding-bottom: 0.125rem; }

/* Theme switch: the whole page changes as ONE picture. The old theme holds
   still while the new one washes out of the toggle in a circle, so nothing
   re-colors on its own clock. */
html.theme-switching::view-transition-old(root) {
  animation: none;
}
html.theme-switching::view-transition-new(root) {
  animation: theme-sweep 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes theme-sweep {
  from { clip-path: circle(0 at var(--theme-sweep-x, 50%) var(--theme-sweep-y, 0)); }
  to   { clip-path: circle(var(--theme-sweep-r, 150%) at var(--theme-sweep-x, 50%) var(--theme-sweep-y, 0)); }
}

/* The AI chat holds its own scroll: the sidebar and composer must not ride a
   page-level scrollbar. Desktop only, since the columns stack on a phone. */
@media (min-width: 1024px) {
  html:has([data-role="ai-chat-layout"]),
  body:has([data-role="ai-chat-layout"]) { height: 100%; overflow: hidden; }
}

/* A room fills the screen and scrolls inside itself. Without this the page
   itself scrolls on iOS: the app bar slides away and a gap opens under the
   composer as Safari's toolbars come and go. */
html:has(#workspace-conversation-shell),
body:has(#workspace-conversation-shell) {
  height: 100%;
  overflow: hidden;
  overscroll-behavior-y: none;
}

/* The top bar is fixed, so it stays put while a long page scrolls under it on
   iOS. Everything that follows starts below its height. */
body:has([data-role="workspace-header"]) > main { padding-top: 64px; }
@media (min-width: 1024px) {
  body:has([data-role="workspace-header"]) > main { padding-top: 66px; }
}


/* The mobile drawer unfolds from the top bar and folds back up. */
[data-mobile-nav-target="panel"] {
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out;
}
[data-mobile-nav-target="panel"].mobile-nav--open { transform: translateY(0); opacity: 1; }
[data-mobile-nav-target="panel"].mobile-nav--leaving { transform: translateY(-8px); opacity: 0; }
/* The rows arrive just behind the panel, so the list reads as unfolding. */
.mobile-nav--open > div > * {
  animation: mobile-nav-row 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes mobile-nav-row {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-mobile-nav-target="panel"] svg { transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  [data-mobile-nav-target="panel"],
  [data-mobile-nav-target="panel"].mobile-nav--open,
  .mobile-nav--open > div > * { transition: none; animation: none; transform: none; opacity: 1; }
}

/* The AI history as a phone drawer: off-canvas until asked for, sliding in
   over a dimmed page like every assistant app. Desktop keeps it as a column.
   The open state is decided here, in one place, so no utility class can win
   the argument mid-slide. */
@media (max-width: 1023px) {
  [data-role="ai-chat-layout"] { height: calc(100svh - 64px); }
  [data-role="ai-chat-column"] { min-height: 0; }

  .ai-chat-drawer {
    position: fixed;
    top: 64px;
    bottom: 0;
    left: 0;
    z-index: 45;
    width: min(20rem, 86vw);
    overflow-y: auto;
    padding: 1rem;
    background: var(--color-canvas, #fff);
    border-right: 1px solid var(--color-hairline-soft, rgba(0, 0, 0, 0.08));
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateX(-101%);
  }
  [data-role="ai-chat-layout"].drawer-open .ai-chat-drawer { transform: translateX(0) !important; }

  .ai-chat-scrim {
    position: fixed;
    inset: 64px 0 0 0;
    z-index: 44;
    background: rgba(0, 0, 0, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-chat-drawer { transition: none; }
}

/* The floating message panel is narrow: the "translated" marker takes its own
   line there instead of jostling the last words of a wrapped message, and
   the sent-translations popup stays inside the panel's width. */
#message_dock_body .translation-marker { display: inline-block; margin-left: 0; margin-top: 0.15rem; }
#message_dock_body .translation-inline > p:last-of-type,
#message_dock_body .translation-inline > [data-translation-toggle-target] > p:last-of-type { display: block; }
#message_dock_body [data-role="sent-translations-panel"] { width: min(18rem, calc(100% - 1rem)); right: 0.5rem; }