/* Chat, thread and chain composition. Colour values belong to design-system.css. */
/* One readable feed, one optional panel. Closed panels occupy no columns. */
.chat-heading { padding: var(--space-6); }
.chat-heading h1 { white-space: normal; overflow-wrap: anywhere; }
.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.chat-layout--panel { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.chat-layout > * { min-width: 0; }
.details-panel[hidden], .chain-panel[hidden] { display: none; }
.details-panel, .chain-panel { position: sticky; top: var(--space-4); width: auto; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.technical-diagnostics { margin-top: var(--space-3); color: var(--text-muted); font-size: 13px; }
.technical-diagnostics summary { min-height: 40px; cursor: pointer; }
.message, .file-card div, .details-heading { min-width: 0; overflow-wrap: anywhere; }
.markdown img { max-width: 100%; height: auto; }
.markdown table { display: block; max-width: 100%; overflow: auto; }
.chain-open { margin: 12px 0 0 8px; color: var(--viewer-classification-text); background: var(--viewer-classification-bg); transition: transform .18s ease; }
.chain-open:hover { transform: translateY(-2px); }

.chain-classification { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 10px; border: 1px solid var(--viewer-classification-border); border-radius: var(--radius-md); color: var(--viewer-classification-text); background: var(--viewer-classification-bg); font-size: 12px; font-weight: 800; }
.chain-classification--panel { display: grid; gap: 4px; margin: 0; padding: 12px 18px; border-width: 0 0 1px; border-radius: 0; background: var(--surface-subtle); font-size: 13px; }
.chain-classification--panel span,
.classification-scope-note { color: var(--text-muted) !important; font-size: 12px !important; font-weight: 600 !important; }
.message-classification-v3,
.classification-tag-list,
.message-fragment__tags,
.chain-classification-v3 > span { display: flex; flex-wrap: wrap; gap: 6px; }
.classification-scope-note { flex-basis: 100%; font-size: 11px !important; }
.classification-tag { display: inline-flex; padding: 2px 7px; border: 1px solid var(--viewer-classification-border); border-radius: var(--radius-pill); color: var(--viewer-classification-text) !important; background: var(--surface); font-size: 11px !important; font-weight: 800 !important; }
.message-fragments { margin-top: 8px; padding: 7px 10px; border-left: 3px solid var(--viewer-positive-border); color: var(--viewer-positive-text); background: var(--viewer-positive-bg); font-size: 12px; }
.message-fragments summary,
.message-fragment__label { cursor: pointer; font-weight: 800; }
.message-fragment { display: grid; gap: 5px; margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--viewer-positive-border); }
.message-fragment__text { margin: 0; padding: 7px 9px; border-left: 2px solid var(--viewer-positive-border); color: var(--text); background: var(--surface); }
.message-fragments .classification-tag { border-color: var(--viewer-positive-border); color: var(--viewer-positive-text) !important; }
.chain-classification--panel.chain-classification-v3 { border-left: 0; color: var(--text); background: var(--surface-subtle); font-weight: 400; }
.chain-classification--panel.chain-classification-v3 .classification-tag { border-color: var(--border); color: var(--text-muted) !important; font-size: 12px !important; font-weight: 600 !important; }

.chain-summary { margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.thread-history { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.chain-item { position: relative; min-width: 0; }
.chain-position { position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 7px; border-radius: var(--radius-pill); color: var(--text-muted); background: var(--surface-subtle); font-size: 12px; font-weight: 600; }
.chain-links,
.preparation-legend,
.preparation-relations { margin: 0 14px 14px; padding: 13px; border-radius: var(--radius-md); color: var(--viewer-classification-text); background: var(--viewer-classification-bg); }
.chain-links { margin-bottom: 16px; padding: 14px; }
.chain-links h3,
.preparation-pair h3,
.preparation-legend h3,
.preparation-relations h3 { margin: 0 0 8px; font-size: 14px; }
.chain-links ul,
.preparation-legend ul,
.preparation-relations ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.chain-links li,
.preparation-legend li,
.preparation-relations li { display: flex; gap: 9px; align-items: baseline; font-size: 13px; }
.chain-links strong,
.preparation-legend code,
.preparation-relations strong { color: var(--brand-deep-blue); white-space: nowrap; }
.chain-links span { line-height: 1.35; }
.chat-card h2 { overflow-wrap: anywhere; }

.details-panel { border-width: 2px; }
.details-panel--open { animation: panel-arrive .3s ease-out both; }
.details-heading { align-items: center; }
.details-heading > div { min-width: 0; flex: 1; }
.details-heading .eyebrow { margin: 0 0 var(--space-1); color: var(--text-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.details-heading h2 { font-size: 18px; line-height: 1.35; }
.panel-close { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border-color: var(--border); font-size: 24px; font-weight: 400; }
.chain-item .message-meta { padding-right: var(--space-8); }
.details-mascot { width: 43px; height: 43px; object-fit: contain; animation: mascot-float 4s ease-in-out infinite; }
.preparation-open { margin: 12px 0 0 8px; color: var(--viewer-positive-text); background: var(--viewer-positive-bg); transition: transform .18s ease; }
.preparation-open:hover { transform: translateY(-2px); }
.chain-preparation-action { padding: 0 18px 12px; border-bottom: 1px solid var(--line); }
.chain-preparation-action .preparation-open { margin-left: 0; }
.preparation-state { display: grid; gap: 5px; margin: 14px; padding: 14px; border-radius: var(--radius-md); }
.preparation-state span { line-height: 1.45; }
.preparation-state--ready { color: var(--viewer-positive-text); background: var(--viewer-positive-bg); }
.preparation-state--unavailable,
.preparation-warning,
.preparation-safety { color: var(--viewer-warning-text); background: var(--viewer-warning-bg); }
.preparation-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px; }
.preparation-versions div { min-width: 0; padding: 11px; border-radius: var(--radius-md); background: var(--soft); }
.preparation-versions dt,
.preparation-legend p { color: var(--muted); font-size: 12px; font-weight: 700; }
.preparation-versions dd { margin: 5px 0 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 12px; }
.preparation-warning,
.preparation-safety { margin: 14px; padding: 12px; border-left: 3px solid var(--viewer-warning-border); line-height: 1.45; }
.preparation-messages { display: grid; gap: 12px; padding: 0 14px 14px; }
.preparation-message { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); }
.preparation-message > header { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; color: var(--muted); background: var(--surface-subtle); font-size: 12px; }
.preparation-message > header strong { color: var(--ink); }
.preparation-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preparation-pair section { min-width: 0; padding: 12px; }
.preparation-pair section + section { border-left: 1px solid var(--line); background: var(--surface-subtle); }
.preparation-pair pre { margin: 0; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; font: 13px/1.5 var(--font-mono); }
.preparation-legend p { margin: 10px 0 0; font-weight: 400; }
.preparation-loading { display: grid; min-height: 230px; align-content: center; }

.thread-history .message { animation: message-in .35s ease-out both; }
.thread-history .message:nth-child(2) { animation-delay: .05s; }
.thread-history .message:nth-child(3) { animation-delay: .1s; }
.thread-history .message:nth-child(4) { animation-delay: .15s; }
.reaction { transition: transform .18s ease, background .18s ease; }
.reaction:hover,
.reaction:focus { background: var(--viewer-help-bg); transform: translateY(-2px) rotate(-2deg); }
.reaction-emoji { display: inline-block; animation: reaction-pop .45s ease-out both; }
.thread-open { transition: transform .18s ease, box-shadow .18s ease; }
.thread-open:hover { box-shadow: 0 5px 12px var(--viewer-shadow); transform: translateY(-2px); }
.panel-expand { color: var(--viewer-help-text); background: var(--viewer-help-bg); }

.message-questions { display: grid; gap: 8px; margin-top: 10px; }
.message-question { display: grid; gap: 7px; padding: 10px 12px; border: 1px solid var(--viewer-annotation-border); border-radius: var(--radius-md); background: var(--viewer-annotation-bg); }
.message-question__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.message-question blockquote { margin: 0; padding-left: 10px; border-left: 3px solid var(--viewer-annotation-border); color: var(--viewer-annotation-text); }
.question-status { display: inline-flex; padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; }
.question-status--open { color: var(--viewer-warning-text); background: var(--viewer-warning-bg); }
.question-status--answered { color: var(--viewer-positive-text); background: var(--viewer-positive-bg); }
.question-answers { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.question-answers li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.question-answers a { font-weight: 800; }
.question-answers small { color: var(--text-muted); }

@keyframes mascot-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes bubble-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(-1deg); } }
@keyframes panel-arrive { from { opacity: .35; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes reaction-pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }

@media (min-width: 901px) {
  .chat-layout { align-items: start; }
  #chat-results,
  .details-panel,
  .chain-panel { max-height: calc(100dvh - 112px); min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
  .details-panel,
  .chain-panel { position: sticky; top: var(--space-4); }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .chat-layout--panel { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
}
@media (max-width: 900px) {
  .chat-layout--panel { grid-template-columns: minmax(0, 1fr); }
  .details-panel:not([hidden]), .chain-panel:not([hidden]) {
    position: fixed; inset: var(--space-4); z-index: 40;
    max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
    box-shadow: var(--shadow-md);
  }
}
@media (max-width: 700px) {
  .preparation-versions,
  .preparation-pair { grid-template-columns: 1fr; }
  .preparation-pair section + section { border-top: 1px solid var(--line); border-left: 0; }
  .preparation-message > header { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .brand img,
  .details-placeholder img,
  .message,
  .chat-heading-mascot,
  .mascot-bubble,
  .details-mascot,
  .details-panel--open,
  .thread-history .message,
  .reaction-emoji { animation: none !important; }
  .reaction,
  .thread-open { transition: none !important; }
}