/*
 * 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: 1.0625rem; line-height: 1.6rem; }
.chat-compact article[data-controller~="message-sheet"] { margin-top: 0.25rem; padding-top: 0.125rem; padding-bottom: 0.125rem; }

/* Fixed anchored panels escape the DM rail's independent scroll container. */
.dm-rail-slot[data-current]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--color-fg);
}
.dm-rail-badge > span {
  height: 22px;
  min-width: 22px;
  border: 2.5px solid var(--color-surface-soft);
}
.dm-rail-tip, .dm-rail-form {
  left: anchor(right);
  top: anchor(top);
  margin-left: 8px;
  position-try-fallbacks: flip-block;
}
.dm-rail-tip::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 17px;
  width: 10px;
  height: 10px;
  background: var(--color-surface-soft);
  border-left: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  transform: rotate(45deg);
}
.dm-rail-form { position-anchor: --dm-rail-add; }

/* 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 assistant page reads like a chat app: one column of at most 760px in
   the middle, the ask box held at the foot of the window however short the
   conversation, and the page itself never scrolls. Each row is capped rather
   than a wrapper, because Turbo appends new answers straight into the list. */
html:has([data-role="ai-chat-layout"]),
body:has([data-role="ai-chat-layout"]) { height: 100%; overflow: hidden; }
[data-role="ai-chat-column"] #chat-messages > * { width: 100%; max-width: 760px; margin-inline: auto; }
[data-role="ai-chat-column"] #chat-messages > [data-role="ai-answer"]:last-child [data-role="regenerate-answer"] { display: inline-flex; }
[data-role="ai-chat-column"] #chat-messages > [data-role="ai-answer"]:last-child [data-role="answer-actions"] { opacity: 1; }
html[data-native-shell] [data-role="ai-chat-layout"] { height: calc(100svh - 2rem); }

@media (width < 640px) {
  [data-role="ai-chat-column"] #chat-messages { padding-bottom: 160px; scroll-padding-bottom: 160px; }
}

/* 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;
}

/* Short windows still need room to read messages above the two-row composer.
   Keep the controls full-sized and let long drafts scroll inside the writing area. */
@media (max-height: 480px) {
  #conversation_composer { padding-top: 0.5rem; padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)); }
  #conversation_composer [data-role="composer-hint"],
  #conversation_composer #typing-indicator:not(:has(span)) { display: none; }
  #conversation_composer textarea[name="body"] { max-height: 2.75rem; }
  #conversation_messages { padding-top: 0.5rem; padding-bottom: 0.5rem; }
}

/* 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; }
}
/* An ordinary page keeps its own top gap (py-6, sm:py-8, lg:py-9) below the
   bar; the offset above used to replace it, so pages sat flush on the bar. */
body:has([data-role="workspace-header"]) > main.main-gutter { padding-top: calc(64px + 1.5rem); }
@media (min-width: 640px) {
  body:has([data-role="workspace-header"]) > main.main-gutter { padding-top: calc(64px + 2rem); }
}
@media (min-width: 1024px) {
  body:has([data-role="workspace-header"]) > main.main-gutter { padding-top: calc(66px + 2.25rem); }
}


/* 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); grid-template-rows: minmax(0, 1fr); }
  [data-role="ai-chat-column"] { min-height: 0; height: 100%; }

  .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; }
#message_dock_body details[data-inline] [data-role="sent-translations-panel"] { width: auto; }

/* Catch-up uses the existing page tokens so both panes follow the theme. */
.inbox-catchup { max-width: 1440px; margin: 0 auto; padding-top: 18px; color: var(--color-fg); }
.inbox-catchup, .inbox-catchup * { word-break: keep-all; overflow-wrap: anywhere; }
.inbox-catchup [hidden] { display: none !important; }
.inbox-catchup button, .inbox-catchup a, .inbox-catchup input { font: inherit; }
.inbox-catchup button { cursor: pointer; }
.inbox-catchup button:disabled { opacity: .5; cursor: default; }
.inbox-catchup button:focus-visible, .inbox-catchup a:focus-visible, .inbox-catchup input:focus-visible { outline: 2px solid var(--color-brand-blue); outline-offset: 3px; }
.inbox-catchup svg { width: 21px; height: 21px; flex-shrink: 0; }
.inbox-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; }
.inbox-page-heading h1 { font-size: 28px; line-height: 1.3; font-weight: 700; letter-spacing: -.025em; }
.inbox-page-heading p { color: var(--color-fg-3); font-size: 13px; }
.inbox-status:empty { display: none; }
.inbox-status { margin-bottom: 12px; color: var(--color-fg-3); font-size: 14px; }
.inbox-undo { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 12px; border-radius: 12px; background: var(--color-card-soft); }
.inbox-undo button { min-height: 44px; text-decoration: underline; }
.inbox-panes { display: grid; grid-template-columns: minmax(280px, 30.5%) minmax(0, 1fr); border: 1px solid var(--color-line); border-radius: 24px; overflow: hidden; }
.inbox-list { min-width: 0; padding: 26px 22px; background: var(--color-bg); border-right: 1px solid var(--color-line); }
.inbox-summary h2 { font-size: 23px; font-weight: 700; letter-spacing: -.025em; }
.inbox-summary > p { margin-top: 12px; color: var(--color-fg-3); font-size: 14px; }
.inbox-group-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0; }
.inbox-group-totals > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 12px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card-soft); }
.inbox-group-totals span { font-size: 13px; color: var(--color-fg-3); }
.inbox-group-totals strong { font-size: 23px; }
.inbox-start { width: 100%; min-height: 58px; border-radius: 15px; background: var(--color-fg); color: var(--color-bg); font-weight: 600 !important; }
.inbox-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 24px 0 14px; font-size: 15px; font-weight: 600; }
.inbox-group-count { padding: 3px 8px; border-radius: 8px; background: var(--color-notification-badge); color: var(--color-fixed-canvas); font-size: 13px; }
.inbox-list-row { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; padding: 13px 10px; border-radius: 16px; }
.inbox-list-row.is-selected { background: color-mix(in srgb, var(--color-brand-coral) 8%, var(--color-bg)); }
.inbox-list-choose { display: flex; align-items: center; flex: 1; min-width: 0; gap: 11px; text-align: left; }
.inbox-room-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 14px; background: var(--color-card-soft); }
.inbox-list-copy { min-width: 0; flex: 1; }
.inbox-list-copy strong { display: block; font-size: 14px; font-weight: 600; }
.inbox-list-copy > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; color: var(--color-fg-3); font-size: 12px; }
.inbox-unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-notification-badge); flex-shrink: 0; }
.inbox-unread-count { flex-shrink: 0; min-width: 24px; padding: 3px 7px; border-radius: 8px; background: var(--color-notification-badge); color: var(--color-fixed-canvas); font-size: 13px; font-weight: 600; text-align: center; }
.inbox-summary > p + .inbox-start { margin-top: 22px; }
.inbox-activity-toggle { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 18px; padding: 13px 12px; border: 1px solid var(--color-line); border-radius: 16px; text-align: left; }
.inbox-activity-count { color: var(--color-fg-3); font-weight: 400; }
.inbox-activity-show { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--color-fg-3); font-size: 13px; }
.inbox-activity-show svg { width: 16px; height: 16px; }
.inbox-small-read { display: grid; place-items: center; width: 34px; min-height: 44px; flex-shrink: 0; }
.inbox-small-read svg { width: 19px; height: 19px; }
.inbox-deck { min-width: 0; background: var(--color-surface-soft); padding: 26px 28px 12px; }
.inbox-deck-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.inbox-deck-heading h2 { font-size: 17px; font-weight: 600; }
.inbox-deck-heading button { min-height: 44px; color: var(--color-fg-3); font-size: 13px; }
.inbox-progress-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; }
.inbox-progress-heading p { font-size: 21px; font-weight: 600; }
.inbox-progress-heading span { color: var(--color-fg-3); font-size: 13px; }
.inbox-progress { display: block; width: 100%; height: 5px; margin-bottom: 14px; border: 0; border-radius: 3px; overflow: hidden; background: var(--color-line-soft); appearance: none; }
.inbox-progress::-webkit-progress-bar { background: var(--color-line-soft); border-radius: 3px; }
.inbox-progress::-webkit-progress-value { background: var(--color-fg); border-radius: 3px; }
.inbox-progress::-moz-progress-bar { background: var(--color-fg); border-radius: 3px; }
.inbox-card { border: 1px solid var(--color-line); border-radius: 22px; background: var(--color-bg); overflow: hidden; }
.inbox-card-header { display: flex; align-items: center; gap: 13px; padding: 20px 24px 17px; border-bottom: 1px solid var(--color-line); }
.inbox-card-heading { min-width: 0; flex: 1; }
.inbox-card-heading h3 { font-size: 19px; font-weight: 600; }
.inbox-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 6px; font-size: 12px; color: var(--color-fg-3); }
.inbox-reason { border-radius: 9px; padding: 4px 7px; background: var(--color-card-soft); color: var(--color-fg-2); }
.inbox-open { display: flex; align-items: center; gap: 7px; color: var(--color-fg-3); font-size: 13px; }
.inbox-card-body { padding: 4px 24px 14px; }
.inbox-message { display: flex; align-items: flex-start; gap: 11px; margin: 17px 0; }
.inbox-message.is-context { opacity: .5; }
.inbox-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 12px; background: color-mix(in srgb, var(--color-brand-coral) 12%, var(--color-bg)); color: var(--color-fg-2); font-size: 13px; font-weight: 600; }
.inbox-message:nth-of-type(even) .inbox-avatar { background: color-mix(in srgb, var(--color-brand-purple) 10%, var(--color-bg)); }
.inbox-message-content { min-width: 0; flex: 1; }
.inbox-message-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.inbox-message-heading strong { font-size: 14px; font-weight: 600; }
.inbox-message-heading time { font-size: 11px; color: var(--color-fg-3); }
.inbox-message-body { margin-top: 5px; white-space: pre-wrap; font-size: 14px; line-height: 1.65; }
.inbox-message-content button { border-color: var(--color-line); background: var(--color-card-soft); }
.inbox-date-divider { text-align: center; margin: 24px 0 15px; color: var(--color-fg-3); font-size: 11px; }
.inbox-new-divider { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--color-brand-coral); font-size: 11px; font-weight: 600; }
.inbox-new-divider::before, .inbox-new-divider::after { content: ""; height: 1px; flex: 1; background: var(--color-brand-coral); }
.inbox-composer { display: flex; align-items: center; gap: 8px; min-height: 52px; margin-top: 18px; padding: 6px 10px 6px 18px; border: 1px solid var(--color-line); border-radius: 28px; background: var(--color-card-soft); }
.inbox-composer input { min-width: 0; flex: 1; background: transparent; border: 0; color: var(--color-fg); font-size: 14px; }
.inbox-composer input::placeholder { color: var(--color-fg-3); }
.inbox-send { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--color-fg); color: var(--color-bg); }
.inbox-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.inbox-actions button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; padding: 10px; border: 1px solid var(--color-line); border-radius: 14px; font-weight: 600; }
.inbox-later { background: var(--color-card-soft); }
.inbox-read { background: var(--color-fg); color: var(--color-bg); }
.inbox-keyboard { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--color-line); color: var(--color-fg-3); font-size: 11px; }
.inbox-keyboard kbd { padding: 3px 6px; border: 1px solid var(--color-line); border-radius: 5px; background: var(--color-bg); color: var(--color-fg); font-size: 12px; }
.inbox-note { color: var(--color-fg-3); font-size: 13px; }
.inbox-empty { padding: 60px 12px; text-align: center; font-size: 21px; font-weight: 600; }
.inbox-activity-body { padding: 24px 0; white-space: pre-wrap; line-height: 1.65; }
.inbox-more { min-height: 44px; margin-top: 18px; padding: 0 20px; border: 1px solid var(--color-line); border-radius: 12px; }
@media (max-width: 1023px) {
  .inbox-catchup { padding-top: 10px; }
  .inbox-page-heading { margin-bottom: 18px; }
  .inbox-page-heading h1 { font-size: 24px; }
  .inbox-page-heading p { display: none; }
  .inbox-panes { display: block; border: 0; border-radius: 0; }
  .inbox-list { border: 1px solid var(--color-line); border-radius: 20px; padding: 18px; }
  .inbox-deck { padding: 0; background: var(--color-bg); }
  .inbox-deck-heading { margin-bottom: 10px; }
  .inbox-deck:has([data-unread-inbox-target="detail"].hidden) .inbox-progress-heading,
  .inbox-deck:has([data-unread-inbox-target="detail"].hidden) .inbox-progress { display: none; }
  .inbox-card-header { padding: 16px; gap: 9px; }
  .inbox-card-heading h3 { font-size: 17px; }
  .inbox-card-body { padding: 4px 16px 14px; }
  .inbox-keyboard { display: none; }
  .inbox-actions { gap: 8px; }
  .inbox-actions button { min-height: 54px; font-size: 13px; }
}

.notification-pause-range {
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}
.notification-pause-range::-webkit-slider-runnable-track {
  height: 0.625rem;
  border-radius: 999px;
  background: var(--color-hairline);
}
.notification-pause-range::-moz-range-track {
  height: 0.625rem;
  border-radius: 999px;
  background: var(--color-hairline);
}
.notification-pause-range::-webkit-slider-thumb {
  appearance: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: -0.5625rem;
  border: 3px solid var(--color-canvas);
  border-radius: 50%;
  background: var(--color-ink);
  box-shadow: 0 0 0 1px var(--color-hairline);
}
.notification-pause-range::-moz-range-thumb {
  width: 1.375rem;
  height: 1.375rem;
  border: 3px solid var(--color-canvas);
  border-radius: 50%;
  background: var(--color-ink);
}
.notification-pause-range:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: 999px;
}

.notification-pause-custom-toggle[aria-expanded="true"] {
  background: var(--color-ink);
  color: var(--color-canvas);
  border-color: var(--color-ink);
}
.dark .notification-pause-range::-webkit-slider-runnable-track {
  background: var(--color-fg-4);
}
.dark .notification-pause-range::-moz-range-track {
  background: var(--color-fg-4);
}

.notification-pause-menu-side {
  position: absolute;
  right: calc(100% + 0.5rem);
  top: 0;
  width: 17rem;
  max-height: min(34rem, calc(100dvh - 24rem));
  overflow-y: auto;
  z-index: 50;
}
.notification-pause-menu-inline {
  margin: 0.25rem 0.5rem 0.5rem;
}

.notification-pause-inline-trigger[aria-expanded="true"] .notification-pause-chevron {
  transform: rotate(90deg);
}

.room-mobile-preferences {
  display: none;
}

@media (max-width: 639px) {
  .room-header-narrow {
    gap: 4px;
    padding-inline: 8px;
  }

  .room-header-narrow > button,
  .room-header-narrow > a:first-child {
    width: 40px;
    flex-shrink: 0;
  }

  .room-header-narrow > .room-header-title {
    min-width: 64px;
  }

  .room-header-narrow > [data-role="room-originals-toggle"],
  .room-header-narrow > form:has([data-role="header-start-secret-chat"]),
  .room-header-narrow > [data-role="room-notify"] {
    display: none;
  }

  .room-mobile-preferences {
    display: block;
  }
}