/* Chat polish (modules/chat.js): Markdown answers, message actions, voice input, scroll button, key hint. */

/* ---------- Markdown in Corvela's answers ---------- */
.md { white-space: normal; min-width: 0; color: var(--ink); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.md p { margin: 0; white-space: normal; }
/* Space between blocks (strong enough to beat the old ".msg.ai p { margin: 0 }"). */
.msg.ai .md > * + *, .msg.ai .md li > * + *, .msg.ai .md blockquote > * + * { margin-top: 8px; }
.md strong { font-weight: 650; }
.md em { font-style: italic; }
.md del { color: var(--ink-muted); }
.md .md-h { margin: 12px 0 0; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; }
.md > .md-h:first-child { margin-top: 0; }
.md h3.md-h { font-size: 16px; } .md h4.md-h { font-size: 15px; } .md h5.md-h, .md h6.md-h { font-size: 14px; }
.md .md-list { margin: 0; padding-left: 20px; }
.msg.ai .md li > .md-list { margin-top: 6px; }
.md li + li { margin-top: 4px; }
.md li::marker { color: var(--ink-muted); }
.md ol > li::marker { font-variant-numeric: tabular-nums; }
.md .md-ic { font-family: var(--mono); font-size: .88em; padding: 1px 6px; border-radius: 6px; background: var(--chip-bg); border: 1px solid var(--line); color: var(--ink); overflow-wrap: anywhere; }
.md .md-link { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.md .md-link:hover { text-decoration-thickness: 2px; }
.md .md-link:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; border-radius: 4px; }
.md .md-quote { margin-left: 0; margin-right: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--line); color: var(--ink-muted); }
.md .md-hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.md .md-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.md table { border-collapse: collapse; width: 100%; font-size: 13px; }
.md th, .md td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.md th { font-weight: 650; background: var(--chip-bg); }
.md tr:last-child td { border-bottom: 0; }

/* Code blocks: a dark panel like the live code view, with the language and a Copy button. */
.md .md-code { border-radius: 12px; overflow: hidden; background: #15161A; border: 1px solid rgba(255, 255, 255, .06); color: #C9D1D9; }
.md .md-code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 6px 0 12px; background: #1E1F24; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.md .md-lang { font: 600 11px/1 var(--mono); color: #8B929C; text-transform: lowercase; letter-spacing: .02em; }
.md .md-copy { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: #AEB5BF; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.md .md-copy:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.md .md-copy:focus-visible { outline: 2px solid var(--select); outline-offset: 1px; }
.md .md-copy.done { color: #7BE3A6; }
.md .md-code pre { margin: 0; padding: 10px 12px; overflow: auto; max-height: 420px; white-space: pre; font: 12px/1.6 var(--mono); tab-size: 2; }
.md .md-code pre code { font: inherit; }

/* The live answer: raw text stays hidden, its Markdown copy is shown. */
.b-say.cvc-raw { display: none; }
.b-say-md { margin: 2px 0; }

/* ---------- Message actions and times ---------- */
.msg.cvc-has-tools { position: relative; margin-bottom: 22px; }
.cvc-tools { position: absolute; top: 100%; left: 0; display: flex; align-items: center; gap: 2px; padding-top: 2px; height: 28px; white-space: nowrap;
  color: var(--ink-faint); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.msg.user .cvc-tools { left: auto; right: 0; flex-direction: row-reverse; }
.msg:hover > .cvc-tools, .msg:focus-within > .cvc-tools, .msg.cvc-last > .cvc-tools { opacity: 1; pointer-events: auto; }
.cvc-act { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-muted); cursor: pointer;
  transition: background-color .15s ease, color .15s ease; }
.cvc-act:hover { background: var(--hover); color: var(--ink); }
.cvc-act:focus-visible { outline: 2px solid var(--select); outline-offset: 1px; }
.cvc-act.done { color: var(--accent-text); }
.cvc-time { font-size: 11px; color: var(--ink-muted); padding: 0 6px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .18s ease; }
.msg:hover .cvc-time, .msg:focus-within .cvc-time { opacity: 1; }
/* Touch screens have no hover: keep the actions in view. */
@media (hover: none) {
  .cvc-tools { opacity: 1; pointer-events: auto; }
  .cvc-time { opacity: .85; }
  .cvc-act { width: 32px; height: 28px; }
}

/* ---------- Scroll-to-bottom button ---------- */
.chat.cvc-chat { position: relative; }
.cvc-down { position: absolute; left: 50%; z-index: 5; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); background: var(--card); color: var(--ink); cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 14, 8, .12), 0 10px 24px -6px rgba(40, 25, 10, .38); opacity: 0; pointer-events: none; transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .2s ease, background-color .15s ease; }
.cvc-down.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.cvc-down:hover { background: var(--card-hover, var(--card)); }
.cvc-down:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }
.cvc-down.new::after { content: ""; position: absolute; top: 1px; right: 1px; width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cta-a), var(--cta-b)); box-shadow: 0 0 0 2px var(--card); }

/* ---------- Voice input ---------- */
.cvc-mic { position: relative; flex-shrink: 0; }
.cvc-mic.on { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.cvc-rec { display: none; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 2px var(--card); }
.cvc-mic.on .cvc-rec { display: block; animation: cvc-rec 1.1s ease-in-out infinite; }
@keyframes cvc-rec { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

.chat .ainote { min-height: 18px; line-height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .cvc-tools, .cvc-time, .cvc-down, .cvc-hint, .cvc-act { transition: none; }
  .cvc-down { transform: translate(-50%, 0); }
  .cvc-mic.on .cvc-rec { animation: none; }
}

/* ---------- A tidy composer row ----------
   The project chat is narrow (about 380px), and its row (level, photos, voice, Chat mode, estimate, send)
   used to spill past the edge once an estimate showed. Tighter spacing, and Chat mode turns into an icon
   (still with its tooltip and blue "on" tint) when the composer is narrow. The estimate shortens with "…" last. */
#chat-form { container-type: inline-size; }
#chat-form .crow { gap: 5px; }
#chat-form .crow .clip, #chat-form .crow .cvc-mic { width: 32px; }
#chat-form .crow .pk-btn { padding: 0 8px; gap: 6px; }
#chat-form .crow .est { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 440px) {
  #chat-form .crow .chat-mode { width: 32px !important; padding: 0; gap: 0; }
  #chat-form .crow .chat-mode .cm-label { display: none; }
}