/* Vyaas · conversation surface, built from the customer's chat wireframe (1 Nov 2026):
   lavender user cards on the right with avatar, time and a sent tick; white reply cards with the
   mark, name · time, icon actions top-right, sectioned headings with icon tiles, lavender code
   headers. Loaded after chat.css by templates/chat/_page.html. Tokens only. */

.conv { max-width: 1090px; padding: 28px 24px 20px; gap: 26px; }
.chat-page:not(.is-empty) .foot .composer, .chat-page:not(.is-empty) .foot .notices { max-width: 1090px; }
.chat-page:not(.is-empty) .composer.v2 { padding: 18px 22px 16px; border-radius: 18px; }
.chat-page:not(.is-empty) .composer.v2 textarea { font-size: 15px; }
.chat-page:not(.is-empty) .cbtn { height: 36px; padding: 0 13px; font-size: 13px; }
.chat-page:not(.is-empty) .cbtn.round { width: 44px; }
.chat-page:not(.is-empty) .composer.v2 .send { width: 64px; height: 46px; }
.chat-page:not(.is-empty) .foot .hint { font-size: 12.5px; color: var(--t2); margin-top: 10px; }
.chat-page:not(.is-empty) .foot .crafted { margin-top: 6px; }

/* ---- your message: lavender card, right-aligned ---- */
.u { align-self: flex-end; display: flex; align-items: center; gap: 16px; max-width: min(64%, 720px); padding: 14px 20px 14px 16px; border: 0; border-radius: 16px; background: var(--accent-soft); color: var(--t1); font: 400 15.5px/1.55 var(--sans); white-space: normal; box-shadow: 0 1px 2px rgba(11, 18, 48, .04); }
.u .u-av { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--s1); color: var(--accent); box-shadow: 0 1px 3px rgba(11, 18, 48, .08); }
.u .u-av .i { width: 20px; height: 20px; }
.u .u-body { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.u .u-body .files { margin-bottom: 8px; white-space: normal; }
.u .u-opt { margin-top: 8px; font: 500 12px var(--sans); color: var(--t2); white-space: normal; }
.u .u-opt summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--s1) 70%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.u .u-opt summary::-webkit-details-marker { display: none; }
.u .u-opt summary::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.u .u-sent { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--s1); border: 1px solid var(--l1); color: var(--t1); font-size: 13px; }
.u .u-sent b { display: block; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); margin-bottom: 6px; }
.u .u-sent pre { margin: 0; white-space: pre-wrap; font: 13px/1.5 var(--sans); }
.u .u-orig { margin-top: 8px; border: 1px solid var(--l2); background: var(--s1); color: var(--t1); font: 500 12.5px var(--sans); padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.u .u-orig:hover { border-color: var(--accent); color: var(--accent); }
/* "View what was sent" modal */
.sent-dim { position: fixed; inset: 0; z-index: 60; background: rgba(5, 10, 35, .35); backdrop-filter: blur(2px); }
.sent-modal { position: fixed; z-index: 61; left: 50%; top: 8vh; transform: translateX(-50%); width: min(820px, calc(100vw - 24px)); max-height: 84vh; display: flex; flex-direction: column; background: var(--s1); border-radius: 16px; box-shadow: 0 40px 90px -30px rgba(5, 10, 35, .5), 0 0 0 1px var(--l1); }
.sent-modal[hidden], .sent-dim[hidden] { display: none; }
.sent-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--l1); }
.sent-head h3 { margin: 0; font: 600 16px var(--sans); }
.sent-body { padding: 16px 18px 20px; overflow-y: auto; font-size: 14px; color: var(--t1); }
.sent-body h4 { margin: 18px 0 8px; font: 600 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.sent-body h4:first-child { margin-top: 0; }
.sent-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sent-body th, .sent-body td { padding: 7px 8px; border-bottom: 1px solid var(--l1); text-align: left; }
.sent-body th { font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.sent-body td.r, .sent-body th.r { text-align: right; font-variant-numeric: tabular-nums; }
.sent-body td.saved { color: var(--ok); font-weight: 600; }
.sent-body .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sent-body .pair > div { padding: 10px 12px; border: 1px solid var(--l1); border-radius: 10px; background: var(--s0); }
.sent-body .pair b { display: block; font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--t3); margin-bottom: 6px; }
.sent-body pre { margin: 0; white-space: pre-wrap; font: 13px/1.5 var(--sans); max-height: 220px; overflow: auto; }
.sent-body .stage { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--l1); }
.sent-body .stage b { min-width: 170px; font-weight: 600; }
.sent-body .stage .ok { color: var(--ok); } .sent-body .stage .skip { color: var(--t3); } .sent-body .stage .bad { color: var(--bad); }
.sent-body .kpi-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.sent-body .kpi-row span { padding: 6px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--t1); font-weight: 500; }
.sent-body .muted { color: var(--t2); }
@media (max-width: 760px) { .sent-body .pair { grid-template-columns: 1fr; } }
.u .u-meta { flex: none; display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font: 400 13px var(--sans); color: var(--t2); white-space: nowrap; }
.u .u-meta .i { width: 18px; height: 18px; color: var(--accent); }
.u .file { background: color-mix(in srgb, var(--s1) 70%, transparent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 8px; font-size: 12.5px; padding: 5px 10px; }

/* ---- Vyaas reply: white card ---- */
.a { position: relative; gap: 12px; padding: 22px 26px 20px; border: 1px solid var(--l1); border-radius: 18px; background: var(--s1); box-shadow: var(--shadow); font: 400 14.5px/1.68 var(--sans); color: var(--t1); letter-spacing: 0; }
.a .who { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-left: 56px; padding-right: 220px; font: 400 14px var(--sans); color: var(--t3); }
.a .who::before { content: ""; position: absolute; left: 22px; top: 22px; width: 40px; height: 40px; border-radius: 50%; background: var(--s1) url("../img/brand/vyaas-mark.6c2ccc4dcd64.svg") center / 26px no-repeat; box-shadow: 0 2px 8px rgba(11, 18, 48, .12), 0 0 0 1px var(--l1); }
.a .who b { color: var(--t1); font: 600 16px var(--sans); letter-spacing: -.01em; }
.a .who b::after { content: " AI"; }
.a .who time { font-variant-numeric: tabular-nums; }
.a .md { padding-left: 56px; }
.a .think, .a .tools, .a .state { margin-left: 56px; }

/* icon actions, top right of the card */
.acts-row { position: absolute; top: 18px; right: 18px; margin: 0; padding: 0; gap: 2px; opacity: 1; }
.acts-row button { width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; border-radius: 9px; color: var(--t2); font-size: 0; }
.acts-row button .i { width: 19px; height: 19px; }
.acts-row button:hover:not(:disabled) { background: var(--s2); color: var(--t1); }
.acts-row button.on { color: var(--accent); background: var(--accent-soft); }
.acts-row button:disabled { opacity: .45; }
.acts-row button[data-act="regenerate"] { display: inline-grid; }
.a .meta { padding-left: 56px; font: 400 12px var(--sans); color: var(--t3); font-family: var(--mono); }
.a .meta:empty { display: none; }

/* ---- markdown ---- */
.md p { margin: 0 0 .9em; }
.md > p:last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 1.2em 0 .45em; font: 500 15px/1.4 var(--sans); letter-spacing: -.006em; color: var(--t1); }
.md h1 { font-size: 18.5px; } .md h2 { font-size: 16.5px; } .md h3 { font-size: 15px; }
.md ul, .md ol { margin: 0 0 .9em; padding-left: 26px; }
.md li { margin: 4px 0; }
.md li::marker { color: var(--t3); }
.md a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-underline-offset: 3px; }
.md strong { font-weight: 500; color: var(--t1); }
.md blockquote { margin: 0 0 .9em; padding: 10px 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 12px 12px 0; color: var(--t1); }
.md hr { border-top: 1px solid var(--l1); margin: 20px 0; }
.md img { border-radius: 12px; box-shadow: var(--shadow); }
.md code { font-size: .88em; background: var(--s2); border: 1px solid var(--l1); padding: .12em .45em; border-radius: 6px; color: var(--t1); }
.md .tbl { border-radius: 12px; margin: 6px 0 1em; box-shadow: 0 1px 2px rgba(11, 18, 48, .04); }
.md table { font-size: 14px; }
.md th { font: 600 12px var(--sans); letter-spacing: .06em; padding: 11px 14px; background: var(--s2); }
.md td { padding: 11px 14px; }

/* sections: heading with an icon tile, content indented under the heading text */
.md .sec { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 24px; margin: 20px 0 6px; }
.md .sec + .sec { margin-top: 26px; }
.md .sec-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tint-blue); color: var(--ink-blue); margin-top: 2px; }
.md .sec-ic .i { width: 22px; height: 22px; }
.md .sec:nth-of-type(2n) .sec-ic { background: var(--tint-purple); color: var(--ink-purple); }
.md .sec:nth-of-type(3n) .sec-ic { background: var(--tint-green); color: var(--ink-green); }
.md .sec:nth-of-type(4n) .sec-ic { background: var(--tint-orange); color: var(--ink-orange); }
.md .sec-body { min-width: 0; }
.md .sec-body > h2, .md .sec-body > h3 { margin: 6px 0 4px; }
.md .sec-body > h2 + p, .md .sec-body > h3 + p { margin-top: 0; }
.md .sec-body > p:first-of-type { color: var(--t2); }

/* ---- code cards: lavender header, white body ---- */
.code { border: 1px solid var(--l1); border-radius: 12px; background: var(--s1); font-size: 13.5px; line-height: 1.65; margin: 10px 0 1em; box-shadow: none; }
.code .h { padding: 8px 10px 8px 14px; background: var(--accent-soft); border-bottom: 1px solid var(--l1); font: 500 14px var(--sans); color: var(--t1); gap: 10px; }
.code .h::before { content: none; }
.code .h .lang { display: inline-flex; align-items: center; gap: 10px; }
.code .h .lang .i { width: 18px; height: 18px; color: var(--accent); }
.code .h button { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--sans); color: var(--t1); padding: 5px 10px; border-radius: 8px; border: 1px solid transparent; }
.code .h button .i { width: 17px; height: 17px; }
.code .h button:hover { background: var(--s1); border-color: var(--l1); }
.code pre { padding: 14px 16px; background: var(--s1); color: var(--t1); }
.hljs { background: transparent; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type, .hljs-literal, .hljs-tag, .hljs-name { color: var(--accent); }
.hljs-string, .hljs-attr, .hljs-regexp, .hljs-template-variable, .hljs-addition, .hljs-quote, .hljs-symbol { color: var(--bad); }
.hljs-comment, .hljs-meta, .hljs-deletion { color: var(--t3); font-style: italic; }
.hljs-title.function_, .hljs-title.class_ { color: var(--ok); }

/* ---- thinking and tool activity ---- */
.think { font-size: 13.5px; color: var(--t2); }
.think summary { gap: 10px; padding: 7px 12px 7px 10px; border: 1px solid var(--l1); border-radius: 999px; background: var(--s0); color: var(--t2); font-weight: 500; }
.think summary:hover { border-color: var(--l2); color: var(--t1); }
.think[open] summary { border-radius: 12px 12px 0 0; }
.think i { width: 14px; height: 14px; border-width: 2px; border-color: var(--accent); }
.think .body { margin: 0; padding: 12px 14px; border: 1px solid var(--l1); border-top: 0; border-radius: 0 0 12px 12px; background: var(--s0); color: var(--t2); font-size: 13.5px; max-height: 280px; }
.tools { gap: 8px; flex-direction: row; flex-wrap: wrap; }
.tool { padding: 7px 14px 7px 12px; border-radius: 999px; font: 500 13.5px var(--sans); color: var(--t2); background: var(--s0); border-color: var(--l1); gap: 10px; }
.tool i { width: 14px; height: 14px; border-width: 2px; border-color: var(--accent); }
.tool.done { color: var(--t1); }
.tool.done i { background: var(--ok); border-color: var(--ok); }
.cite { min-width: 18px; height: 18px; border-radius: 6px; background: var(--accent-soft); border-color: transparent; color: var(--accent); font: 600 10.5px var(--mono); }
.a .state { font-size: 14px; }

/* ---- streaming ---- */
.cursor { width: 8px; height: 18px; border-radius: 2px; background: var(--grad); vertical-align: -3px; }
.a.streaming .who::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .a.streaming .who::before { animation: vy-ring 1.4s ease-in-out infinite; }
  @keyframes vy-ring { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); } 60% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); } }
}
.sys { border-radius: 12px; padding: 11px 14px; font-size: 13.5px; border-left-width: 3px; }

/* ---- dark: cards sit on the navy wave ---- */
:root[data-theme="dark"] .a { background: color-mix(in srgb, var(--s1) 92%, transparent); }
:root[data-theme="dark"] .u .u-av { background: var(--s1); }

/* ---- phone ---- */
@media (max-width: 760px) {
  .conv { padding: 16px 10px 12px; gap: 18px; }
  .u { max-width: 92%; font-size: 15.5px; padding: 12px 14px; gap: 10px; }
  .u .u-av { width: 32px; height: 32px; } .u .u-av .i { width: 16px; height: 16px; }
  .u .u-meta { display: none; }
  .a { padding: 16px 14px 14px; font-size: 15.5px; }
  .a .who { padding-left: 48px; padding-right: 0; min-height: 36px; }
  .a .who::before { left: 14px; top: 16px; width: 36px; height: 36px; background-size: 22px; }
  .a .md, .a .meta { padding-left: 0; }
  .a .think, .a .tools, .a .state { margin-left: 0; }
  .acts-row { position: static; margin-top: 4px; }
  .md .sec { grid-template-columns: 32px minmax(0, 1fr); gap: 0 12px; }
  .md .sec-ic { width: 32px; height: 32px; } .md .sec-ic .i { width: 18px; height: 18px; }
}

/* ---- generated documents (apps.documents): download cards inside the reply ---- */
.docs-out { display: flex; flex-wrap: wrap; gap: 12px; padding-left: 56px; margin-top: 4px; }
.doc-card { display: inline-flex; align-items: center; gap: 14px; min-width: 300px; max-width: 100%; padding: 12px 14px 12px 12px; border: 1px solid var(--l1); border-radius: 14px; background: var(--s0); color: var(--t1); text-decoration: none; box-shadow: 0 1px 2px rgba(11, 18, 48, .04); transition: border-color .15s, transform .15s; }
.doc-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--l1)); transform: translateY(-1px); }
.doc-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tint-blue); color: var(--ink-blue); flex: none; }
.doc-ic .i { width: 22px; height: 22px; }
.doc-ic.kind-docx { background: var(--tint-blue); color: var(--ink-blue); }
.doc-ic.kind-pptx { background: var(--tint-orange); color: var(--ink-orange); }
.doc-ic.kind-xlsx, .doc-ic.kind-csv { background: var(--tint-green); color: var(--ink-green); }
.doc-ic.kind-md, .doc-ic.kind-txt, .doc-ic.kind-html { background: var(--tint-purple); color: var(--ink-purple); }
.doc-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.doc-tx b { font: 600 14.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-tx span { font-size: 12.5px; color: var(--t2); }
.doc-dl { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; background: var(--grad); color: #fff; font: 600 13px var(--sans); flex: none; }
.doc-dl .i { width: 16px; height: 16px; }
.doc-card.inline { min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; gap: 10px; }
.doc-card.inline .doc-ic { width: 32px; height: 32px; border-radius: 9px; } .doc-card.inline .doc-ic .i { width: 17px; height: 17px; }
.tool.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--l1)); }
.tool.bad i { background: var(--bad); border-color: var(--bad); }
@media (max-width: 760px) { .docs-out { padding-left: 0; } .doc-card { min-width: 0; width: 100%; } }

.doc-card.building, .doc-card.error { cursor: default; }
.doc-card.building:hover, .doc-card.error:hover { transform: none; border-color: var(--l1); }
.doc-dl.wait { background: var(--s2); color: var(--t2); }
.doc-dl.wait i { width: 14px; height: 14px; border: 2px solid var(--accent); border-top-color: transparent; border-radius: 50%; display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .doc-dl.wait i { animation: vy-spin .9s linear infinite; } }
.doc-dl.bad { background: var(--bad-soft); color: var(--bad); }
.doc-card.error .doc-tx span { color: var(--bad); }