/* People lead the conversation; saved turns read as evidence, not chat bubbles. */
@layer components {
  :root[data-register] .conversation-library { max-inline-size: 56rem; gap: var(--space-3); }
  :root[data-register] .conversation-library .page-head__title { font-size: var(--text-2xl); }
  :root[data-register] .conversation-library .page-head__sub { font-size: var(--text-md); font-weight: 400; max-width: 55ch; }
  .conversation-start { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); max-width: 35rem; }
  .conversation-start .field { min-width: 0; }
  .conversation-start .select { width: 100%; }
  .saved-conversations { display: grid; gap: var(--space-2); }
  .saved-conversations .section__head { justify-content: space-between; }
  .saved-conversation-list { display: grid; gap: var(--space-2); }
  .saved-conversation { min-width: 0; }
  .saved-conversation__link { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); text-decoration: none; color: var(--on-surface); }
  :root[data-register='card'] .saved-conversation__link { background: var(--surface-raised); }
  :root[data-register='type'] .saved-conversation__link { border-top: 1px solid var(--line); border-radius: 0; padding-inline: 0; }
  .saved-conversation__head, .saved-conversation__identity, .saved-conversation__foot { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
  .saved-conversation__head, .saved-conversation__foot { justify-content: space-between; flex-wrap: wrap; }
  .saved-conversation__identity > div { min-width: 0; }
  .saved-conversation__identity .avatar { inline-size: 48px; block-size: 48px; border-radius: var(--radius-sm); }
  .saved-conversation__name { font-size: var(--text-md); font-weight: 700; overflow-wrap: anywhere; }
  .saved-conversation__role { font-size: var(--text-sm); color: var(--on-surface-muted); overflow-wrap: anywhere; }
  .saved-conversation__title { font-size: var(--text-lg); line-height: 1.4; font-weight: 700; overflow-wrap: anywhere; }
  .saved-conversation__link:hover .saved-conversation__title { text-decoration: underline; text-underline-offset: 3px; }
  .saved-conversation__excerpt { max-width: 70ch; color: var(--on-surface-muted); overflow-wrap: anywhere; line-height: 1.6; }
  .saved-conversation__excerpt > span { font-weight: 600; }
  .saved-conversation__hint { font-size: var(--text-sm); color: var(--on-surface-muted); max-width: 65ch; }
  .saved-conversation__foot { font-size: var(--text-sm); }
  .saved-conversation__foot time { color: var(--on-surface-muted); }
  .saved-conversation__action { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .conversation-empty { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); }
  .conversation-empty h2 { font-size: var(--text-xl); line-height: 1.3; font-weight: 700; }
  .conversation-empty p { max-width: 50ch; color: var(--on-surface-muted); }
  .conversation-empty .page-head__kicker { color: var(--on-surface); }
  .conversation-empty__note { font-size: var(--text-sm); }
  :root[data-register] .conversation-page { max-inline-size: 56rem; gap: var(--space-3); }
  :root[data-register] .conversation-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
  .conversation-identity { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
  .conversation-identity > div { min-width: 0; }
  .conversation-identity > .avatar { inline-size: 56px; block-size: 56px; flex-shrink: 0; border-radius: var(--radius-md); }
  :root[data-register] .conversation-header .page-head__title { font-size: var(--text-2xl); margin-block: 2px; }
  :root[data-register] .conversation-header .page-head__sub { font-size: var(--text-md); font-weight: 400; margin: 0; }
  .conversation-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-2); }
  .conversation-controls > * { min-width: 0; }
  :root[data-register] .conversation-page details { background: var(--surface-raised); border: 0; border-radius: var(--radius-md); padding-inline: var(--space-3); }
  .conversation-page summary { display: flex; align-items: center; gap: var(--space-2); min-height: 3rem; padding-block: var(--space-2); cursor: pointer; font-size: var(--text-sm); font-weight: 600; list-style: none; }
  .conversation-page summary::-webkit-details-marker { display: none; }
  .conversation-tools > .conversation-controls { padding-block: var(--space-2) var(--space-3); }
  :root[data-register] .conversation-controls > details { padding: 0; }
  .conversation-tools__content { display: grid; gap: var(--space-3); padding-block: var(--space-2) var(--space-3); }
  .conversation-tools .form { padding: 0; background: none; border: 0; }
  .conversation-history .collection { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--space-2); }
  :root[data-register] .conversation-history .item { padding: var(--space-2) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  .conversation-history .history-item { min-height: 2.75rem; }
  .conversation-thread { display: grid; gap: var(--space-3); }
  :root[data-register] .conversation-page .chat { min-height: 0; padding: 0; border: 0; gap: var(--space-3); }
  :root[data-register] .conversation-page .msg { grid-template-columns: 40px minmax(0, 1fr); padding: 0; border: 0; }
  .conversation-page .msg > .avatar { inline-size: 40px; block-size: 40px; border-radius: var(--radius-sm); }
  :root[data-register] .conversation-page .msg__who { grid-column: 2; grid-row: 1; display: block; align-self: center; font-size: var(--text-md); }
  :root[data-register] .conversation-page .msg__time { display: block; margin: 2px 0 0; font-size: var(--text-sm); }
  :root[data-register] .conversation-page .msg__body { grid-column: 2; grid-row: 2; padding: 0; border-radius: 0; background: none; max-width: 68ch; color: var(--on-surface); font-style: normal; }
  :root[data-register='card'] .conversation-page .chat-message--persona { padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-raised); }
  :root[data-register] .conversation-page .msg--user { grid-template-columns: minmax(0, 1fr) 32px; }
  :root[data-register] .conversation-page .msg > .avatar { grid-column: 1; grid-row: 1; }
  :root[data-register] .conversation-page .msg--user > .avatar { inline-size: 32px; block-size: 32px; border-radius: var(--radius-pill); grid-column: 2; grid-row: 1; }
  :root[data-register] .conversation-page .msg--user .msg__who { grid-column: 1; justify-self: end; text-align: end; }
  :root[data-register] .conversation-page .msg--user .msg__body { grid-column: 1; justify-self: end; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-control); }
  :root[data-register='type'] .conversation-page .chat-message--persona { padding-block: var(--space-3); border-block: 1px solid var(--line); }
  :root[data-register='type'] .conversation-page .msg > .avatar { display: flex; }
  :root[data-register] .conversation-page .chat-composer { padding: var(--space-3); border: 0; border-radius: var(--radius-lg); background: var(--surface-raised); }
  :root[data-register] .conversation-page .chat-composer .textarea { min-height: 6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: var(--space-2); background: var(--surface-control); }
  .conversation-page .composer__hint { font-size: var(--text-sm); }
  .conversation-page .chat-welcome { padding: var(--space-3); background: var(--surface-raised); border-radius: var(--radius-lg); max-width: none; }
  .conversation-page .chat-welcome p { max-width: 55ch; }
  .conversation-page .chat-welcome h2 { font-size: var(--text-xl); }
  :root[data-register] .transcript-page { max-inline-size: 56rem; gap: var(--space-3); }
  :root[data-register] .transcript-page .page-head { gap: var(--space-1); }
  :root[data-register] .transcript-page .page-head__title { font-size: var(--text-2xl); margin: 0; }
  :root[data-register] .transcript-page .page-head__sub { font-size: var(--text-md); font-weight: 400; margin: 0; max-width: 65ch; }
  .transcript-meta { font-size: var(--text-sm); color: var(--on-surface-muted); }
  :root[data-register] .transcript-page .chat { padding: 0; border: 0; gap: var(--space-3); }
  :root[data-register] .transcript-page .transcript-turn { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-2); border-inline-start: 3px solid transparent; padding: var(--space-3); scroll-margin-top: var(--space-3); }
  .transcript-turn > .avatar { inline-size: 40px; block-size: 40px; border-radius: var(--radius-sm); }
  :root[data-register] .transcript-turn .msg__who { grid-column: 2; grid-row: 1; display: block; font-size: var(--text-md); line-height: 1.4; align-self: center; }
  .msg__role { display: block; font-size: var(--text-sm); color: var(--on-surface-muted); font-weight: 400; margin-top: 2px; }
  .transcript-turn__link { grid-column: 3; grid-row: 1; align-self: start; display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--on-surface-muted); text-underline-offset: 3px; }
  :root[data-register] .transcript-turn .msg__body { grid-column: 2 / -1; grid-row: 2; padding: 0; background: none; border-radius: 0; max-width: 68ch; }
  :root[data-register='card'] .transcript-turn { background: var(--surface-raised); border-radius: var(--radius-lg); }
  :root[data-register='type'] .transcript-turn { padding-inline: 0 var(--space-2); border-bottom: 1px solid var(--line); }
  :root[data-register='type'] .transcript-turn > .avatar { display: flex; }
  :root[data-register] .transcript-turn:target { border-inline-start-color: var(--selection); }
  .transcript-empty { padding: var(--space-3); background: var(--surface-raised); border-radius: var(--radius-lg); color: var(--on-surface-muted); }
}

@media (max-width: 48rem) {
  .conversation-controls { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  :root[data-register] .conversation-library { gap: var(--space-3); }
  .saved-conversation__head { align-items: start; row-gap: var(--space-1); }
  .saved-conversation__head .status { margin-inline-start: 60px; }
  .saved-conversation__link { padding: 20px; }
  .saved-conversation__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .conversation-empty { padding: var(--space-3); }
  :root[data-register] .conversation-header { grid-template-columns: minmax(0, 1fr) 66px; gap: var(--space-1); }
  .conversation-header .page-head__actions { margin: 0; }
  .conversation-header .btn { inline-size: 66px; min-height: 44px; padding: 4px; border: 0; background: transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; text-align: center; }
  :root[data-register] .conversation-page, :root[data-register] .transcript-page { gap: var(--space-2); }
  :root[data-register] .conversation-page .msg { grid-template-columns: 40px minmax(0, 1fr); }
  :root[data-register] .conversation-page .msg__who { grid-column: 2; grid-row: 1; }
  :root[data-register] .conversation-page .msg--user { grid-template-columns: minmax(0, 1fr) 32px; }
  :root[data-register] .conversation-page .msg--user .msg__who { grid-column: 1; grid-row: 1; }
  :root[data-register] .conversation-page .msg__body { grid-column: 1 / -1; }
  :root[data-register] .conversation-page .msg--user .msg__body { grid-column: 1 / -1; max-inline-size: calc(100% - 32px); }
  :root[data-register] .conversation-page .chat-message--persona, :root[data-register] .conversation-page .chat-composer { padding: var(--space-3); }
  :root[data-register] .transcript-page .transcript-turn { grid-template-columns: 40px minmax(0, 1fr) auto; padding: var(--space-3); }
  :root[data-register='type'] .transcript-page .transcript-turn { padding-inline: 0 var(--space-2); }
  :root[data-register] .transcript-turn .msg__who { grid-column: 2; grid-row: 1; }
  :root[data-register] .transcript-turn .msg__body { grid-column: 1 / -1; grid-row: 2; }
}