/* dove room · the conversation surface
 *
 * Dove is the thing people come back to, and it was the worst-looking room in
 * the harbor. Five stylesheets had opinions about it and they fought:
 * demo-v2 built a chip row for phones, session-control forced the chips back
 * into 68px cards with !important, and the result was 1217px of buttons inside
 * a 348px scroller — cards sliced in half at the right edge. On a desktop the
 * collapsed hero still reserved 200px of empty sky, the guidance card was
 * stranded in a 312px column with 200px of nothing under it, and the thread
 * floated in the middle of a void with the composer far below.
 *
 * So this file owns the room, and it is loaded last. The shape it makes is
 * the ordinary one that chat products converge on because it works:
 *
 *   rail | guidance | thread            the thread is the widest thing,
 *        |          | composer          the composer sits under it, and
 *                                       nothing floats.
 *
 * The one non-obvious move is bottom-anchoring the log. A thread with two
 * messages in a tall column normally pins them to the ceiling with a canyon
 * underneath; anchoring the first child with margin-top:auto rests the
 * conversation on the composer, the way a message app does, and still scrolls
 * correctly once the thread is long enough to overflow.
 */

/* ── the hero must not hold empty sky ───────────────────────────────────── */
/* .surface-hero sets height:clamp(200px,22vh,240px) for every tab's hero.
   the dove hero collapses to a strip, so it has to opt out of the height too,
   not only the min-height it was already overriding. */
#device[data-ui="sanctuary-v2"] .surface-hero-dove.is-collapsed {
  min-height: 0;
  height: auto;
  max-height: none;
  padding-bottom: 0;
  margin-bottom: 6px;
  /* the hero's own sky, border and vignette are for the expanded panel. a
     collapsed strip that keeps them leaves a ghost band ruled across the
     whole width behind a four-word chip. */
  border: 0;
  background: none;
  box-shadow: none;
}

#device[data-ui="sanctuary-v2"] .surface-hero-dove.is-collapsed > .scene {
  display: none;
}

#device[data-ui="sanctuary-v2"] .surface-hero-dove.is-collapsed::after,
#device[data-ui="sanctuary-v2"] .surface-hero-dove.is-collapsed::before {
  display: none;
}

#device[data-ui="sanctuary-v2"] .dove-presence-live.is-collapsed {
  margin: 0 var(--sv2-pad-x);
  padding: 0 12px;
  border-radius: 15px;
  background: rgba(16, 21, 14, 0.5);
}

#device[data-ui="sanctuary-v2"] .surface-hero-dove.is-collapsed .dove-hero-toggle {
  min-height: 42px;
  padding: 6px 0;
}

/* ── desktop · three flush bands ────────────────────────────────────────── */
@media (min-width: 760px) {
  /* the workspace was capped at 1040px and centred, which left it stranded
     between the rail and the right edge. it is the room; it fills. */
  #device[data-ui="sanctuary-v2"] .dove-workspace {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(248px, 292px) minmax(0, 1fr);
  }

  #device[data-ui="sanctuary-v2"] .dove-guidance-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 15px 20px 18px;
    border-right: 1px solid rgba(237, 231, 214, 0.07);
    background: rgba(11, 15, 10, 0.34);
  }

  #device[data-ui="sanctuary-v2"] .dove-intent {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  #device[data-ui="sanctuary-v2"] .dove-intent > div:first-child {
    margin-bottom: 12px;
  }

  #device[data-ui="sanctuary-v2"] .dove-start-grid > button {
    min-height: 0;
    padding: 12px 13px;
    border-radius: 14px;
  }

  #device[data-ui="sanctuary-v2"] .dove-start-grid > button strong {
    font-size: 12.5px;
  }

  #device[data-ui="sanctuary-v2"] .dove-start-grid > button small {
    font-size: 10px;
  }

  /* the truth line is the pane's floor, not another card in the stack. */
  #device[data-ui="sanctuary-v2"] .dove-guidance-truth {
    display: block;
    margin: auto 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(237, 231, 214, 0.06);
    font-size: 10px;
    line-height: 1.5;
  }

  #device[data-ui="sanctuary-v2"] .dove-conversation {
    padding-top: 0;
  }

  /* collapsed, this is a disclosure for the presence panel, not a banner.
     it was stretching 1286px wide to hold four words. as a chip on the
     header's own left margin it reads as status and stops competing with
     the thread for the eye. */
  #device[data-ui="sanctuary-v2"] .surface-hero-dove.is-collapsed .dove-presence-live {
    width: max-content;
    max-width: calc(100% - 2 * clamp(20px, 3vw, 34px));
    margin-inline: clamp(20px, 3vw, 34px);
    padding-right: 6px;
  }

  #device[data-ui="sanctuary-v2"] .surface-hero-dove.is-collapsed .dove-hero-toggle {
    gap: 12px;
    padding-inline: 4px;
  }

  #device[data-ui="sanctuary-v2"] .chat-log {
    display: flex;
    flex-direction: column;
    padding-inline: clamp(18px, 3vw, 40px);
  }

  /* rest the thread on the composer instead of pinning it to the ceiling. */
  #device[data-ui="sanctuary-v2"] .chat-log > :first-child {
    margin-top: auto;
  }

  /* one measure for the thread and the composer so they share an edge. */
  #device[data-ui="sanctuary-v2"] .chat-log > *,
  #device[data-ui="sanctuary-v2"] .dove-compose-dock > *,
  #device[data-ui="sanctuary-v2"] .dove-conversation > .dove-plain-truth,
  #device[data-ui="sanctuary-v2"] .dove-conversation > .dove-room-settings {
    width: 100%;
    max-width: 768px;
    margin-inline: auto;
  }

  #device[data-ui="sanctuary-v2"] .dove-compose-dock {
    padding-inline: clamp(18px, 3vw, 40px);
  }
}

/* ── phone · the chips are chips ────────────────────────────────────────── */
@media (max-width: 759px) {
  #device[data-ui="sanctuary-v2"] .dove-guidance-pane {
    padding-bottom: 0;
  }

  #device[data-ui="sanctuary-v2"] .dove-intent {
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    background: none;
  }

  /* full-bleed scroller with the padding inside it, so the first and last
     chip can sit against the screen edge while still clearing it. */
  #device[data-ui="sanctuary-v2"] .dove-start-grid {
    display: flex;
    gap: 7px;
    padding: 2px var(--sv2-pad-x) 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* without this the snap aligns the first chip's edge to the scrollport
       and eats the container's own inset, so chip one sits clipped against
       the screen edge. snapping has to respect the same margin the text does. */
    scroll-padding-inline: var(--sv2-pad-x);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #device[data-ui="sanctuary-v2"] .dove-start-grid::-webkit-scrollbar {
    display: none;
  }

  #device[data-ui="sanctuary-v2"] .dove-start-grid > button {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 38px;
    padding: 9px 15px;
    border-radius: 999px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  #device[data-ui="sanctuary-v2"] .dove-start-grid > button strong {
    font-size: 12px;
    font-weight: 500;
  }

  /* the description is what made every chip 273px wide. it lives in the
     aria-label and in the pane on a wider screen. */
  #device[data-ui="sanctuary-v2"] .dove-start-grid > button small {
    display: none;
  }

  #device[data-ui="sanctuary-v2"] .chat-log {
    display: flex;
    flex-direction: column;
  }

  #device[data-ui="sanctuary-v2"] .chat-log > :first-child {
    margin-top: auto;
  }
}