/*
 * public/m33-static/proto-chat.css — Proto's default centre chat
 * (lib/views/htmls/proto/chat.ejs; ADR 0082 D6, rule 10a).
 *
 * Served from /m33/ by every host that renders it: the Proto host
 * (lib/proto/serve.js), The Agency and Truth. Rules unchanged from the
 * <style> block lib/proto/chat-view.js used to inject.
 */
.m33-chat{display:flex;flex-direction:column;height:100%;min-height:0;}
.m33-chat-scroll{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:14px;}
.m33-chat-empty{margin:auto;text-align:center;color:var(--m33-text-muted,#8a93a6);}
.m33-chat-empty-title{font-size:20px;font-weight:600;color:var(--m33-text,#e6e9f2);margin-bottom:4px;}
.m33-chat-empty-sub{font-size:13px;}
.m33-chat-msg{max-width:760px;line-height:1.55;font-size:14px;white-space:pre-wrap;word-wrap:break-word;}
/* An agent's reply arrives as MARKDOWN and is rendered to real block
   elements — <p>, <ul>, <blockquote>. pre-wrap was right when a message
   was plain text, and wrong the moment it became HTML: the newlines left
   BETWEEN those blocks survive as literal blank lines and stack on top of
   the block margins, so every paragraph break was drawn twice. Measured at
   865px for one reply; 634px once the phantom lines go.
   A rich message therefore collapses whitespace like any HTML, and the gap
   is carried by the margins where it belongs. Plain-text messages (the
   human's, which have no block children) keep pre-wrap and their newlines. */
.m33-chat-msg:has(p),.m33-chat-msg:has(ul),.m33-chat-msg:has(ol),
.m33-chat-msg:has(blockquote),.m33-chat-msg:has(table),.m33-chat-msg:has(pre){white-space:normal;}
.m33-chat-msg > p,.m33-chat-msg > ul,.m33-chat-msg > ol,.m33-chat-msg > blockquote{margin:0 0 1.1em;}
.m33-chat-msg > ul,.m33-chat-msg > ol{padding-left:1.3em;}
.m33-chat-msg li{margin-bottom:0.3em;}
.m33-chat-msg > :last-child{margin-bottom:0;}
.m33-chat-msg.user{align-self:flex-end;background:var(--m33-accent-soft,rgba(125,138,255,0.16));border:1px solid rgba(125,138,255,0.35);color:var(--m33-text,#e6e9f2);padding:9px 13px;border-radius:12px 12px 3px 12px;}
/* Assistant bubble: same rounded-rectangle chip as user, mirrored corner,
   neutral gray fill a shade darker than the user's tinted background. */
.m33-chat-msg.assistant{align-self:flex-start;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);color:var(--m33-text,#e6e9f2);padding:9px 13px;border-radius:12px 12px 12px 3px;}
/* A1 typed progressive bubbles — subtle differentiation without being loud. */
.m33-chat-msg.assistant.m33-chat-msg-bubble-status{color:var(--m33-text-muted,#8a93a6);font-size:12.5px;padding:6px 13px;letter-spacing:0.01em;}
.m33-chat-msg.assistant.m33-chat-msg-bubble-framing{padding:8px 13px;}
.m33-chat-msg.assistant.m33-chat-msg-bubble-section{padding:9px 13px;}
.m33-chat-msg.assistant.m33-chat-msg-bubble-sources{color:var(--m33-text-muted,#8a93a6);font-size:12.5px;padding:9px 13px;}
/* A2 inline research images — hotlinked from image_search tool results.
   RESEARCH-BRIEF-1G (2026-08-26): cursor:zoom-in + click-to-open-in-
   new-tab (see delegated handler below) so a thumbnail always expands
   to full size on click. Also constrain ANY <img> in a chat message
   (not just .m33-chat-img) so history-load-rendered images from the
   markdown path stay thumbnail-sized instead of blowing out the bubble. */
.m33-chat-msg.assistant .m33-chat-img,
.m33-chat-msg.assistant img{display:block;max-width:100%;max-height:360px;width:auto;height:auto;margin:8px 0;border-radius:8px;background:rgba(255,255,255,0.03);object-fit:contain;cursor:zoom-in;}
.m33-chat-msg.assistant .m33-chat-img-caption{display:block;color:var(--m33-text-muted,#8a93a6);font-size:11.5px;margin:-4px 0 8px;font-style:italic;}
.m33-chat-msg.assistant .m33-chat-img-missing{display:block;color:var(--m33-text-muted,#8a93a6);font-size:11.5px;font-style:italic;padding:4px 0;}
.m33-chat-msg.assistant .m33-chat-cursor{display:inline-block;width:7px;height:15px;background:var(--m33-accent,#7d8aff);vertical-align:text-bottom;animation:m33blink 1s steps(2) infinite;}
@keyframes m33blink{50%{opacity:0;}}
.m33-chat-composer{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;align-items:flex-end;}
.m33-chat-composer textarea{flex:1 1 160px;min-width:140px;resize:none;max-height:180px;background:var(--m33-panel-2,#22253a);border:1px solid var(--m33-border,rgba(255,255,255,0.12));border-radius:10px;color:var(--m33-text,#e6e9f2);font:inherit;font-size:14px;padding:10px 12px;line-height:1.4;}
.m33-chat-composer textarea:focus{outline:none;border-color:var(--m33-accent,#7d8aff);}
.m33-chat-ctl{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--m33-panel-2,#22253a);border:1px solid var(--m33-border,rgba(255,255,255,0.12));border-radius:10px;color:var(--m33-text-muted,#8a93a6);cursor:pointer;transition:color .12s,border-color .12s,background .12s;}
.m33-chat-ctl:hover{color:var(--m33-text,#e6e9f2);border-color:var(--m33-accent,#7d8aff);}
.m33-chat-ctl:disabled{opacity:0.45;cursor:default;}
/* icon swap — the .m33-ic-stop square only shows in the active (stop) state */
.m33-chat-ctl .m33-ic-stop{display:none;}
/* mic — recording (red pulse, shows stop square) / transcribing (dim spinner) */
.m33-chat-mic.recording{color:#fff;background:#e5484d;border-color:#e5484d;animation:m33pulse 1.3s ease-in-out infinite;}
.m33-chat-mic.recording .m33-ic-mic{display:none;}
.m33-chat-mic.recording .m33-ic-stop{display:block;}
@keyframes m33pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,0.55);}50%{box-shadow:0 0 0 6px rgba(229,72,77,0);}}
.m33-chat-mic.busy{color:var(--m33-accent,#7d8aff);}
.m33-chat-mic.busy svg{animation:m33spin 0.8s linear infinite;}
@keyframes m33spin{to{transform:rotate(360deg);}}
/* speaker — on (accent, auto-speak armed) / speaking (shows stop square to cut it off) */
.m33-chat-speaker.on{color:#fff;background:var(--m33-accent,#5b6cff);border-color:var(--m33-accent,#5b6cff);}
.m33-chat-speaker .m33-spk-wave{transition:opacity .12s;}
.m33-chat-speaker:not(.on) .m33-spk-wave{opacity:0.35;}
.m33-chat-speaker.speaking{color:#fff;background:#e5484d;border-color:#e5484d;}
.m33-chat-speaker.speaking .m33-ic-spk{display:none;}
.m33-chat-speaker.speaking .m33-ic-stop{display:block;}
/* dedicated Stop control — shown only while speaking (state-bound), a stop not a mute */
.m33-chat-stopspeak{color:#fff;background:#e5484d;border-color:#e5484d;}
.m33-chat-stopspeak:hover{filter:brightness(1.08);color:#fff;border-color:#e5484d;}
.m33-chat-stopspeak[hidden]{display:none;}
.m33-chat-send{background:var(--m33-accent,#5b6cff);border:none;color:#fff;font:inherit;font-weight:600;font-size:13px;padding:0 18px;height:40px;border-radius:10px;cursor:pointer;}
.m33-chat-send:disabled{opacity:0.5;cursor:default;}
/* rendered markdown — a reply, and the person's own message when their composer wrote
   markdown (.m33-user-md, set where the bubble is painted): the same marks on both */
.m33-chat-msg.assistant{white-space:normal;}
.m33-chat-msg.assistant .m33-md-p,.m33-chat-msg.m33-user-md .m33-md-p{margin:0 0 10px;}
.m33-chat-msg.assistant .m33-md-p:last-child,.m33-chat-msg.m33-user-md .m33-md-p:last-child{margin-bottom:0;}
.m33-chat-msg.assistant .m33-md-h,.m33-chat-msg.m33-user-md .m33-md-h{margin:16px 0 8px;font-weight:650;line-height:1.3;}
.m33-chat-msg.assistant h3.m33-md-h,.m33-chat-msg.m33-user-md h3.m33-md-h{font-size:16px;}
.m33-chat-msg.assistant h4.m33-md-h,.m33-chat-msg.m33-user-md h4.m33-md-h{font-size:14.5px;}
.m33-chat-msg.assistant h5.m33-md-h,.m33-chat-msg.m33-user-md h5.m33-md-h{font-size:13.5px;color:var(--m33-text-muted,#8a93a6);text-transform:uppercase;letter-spacing:.04em;}
.m33-chat-msg.assistant .m33-md-ul,.m33-chat-msg.assistant .m33-md-ol,.m33-chat-msg.m33-user-md .m33-md-ul,.m33-chat-msg.m33-user-md .m33-md-ol{margin:0 0 10px;padding-left:22px;}
/* a list inside an item hangs under it, without the gap a list leaves after itself */
.m33-chat-msg.assistant li > .m33-md-ul,.m33-chat-msg.assistant li > .m33-md-ol,.m33-chat-msg.m33-user-md li > .m33-md-ul,.m33-chat-msg.m33-user-md li > .m33-md-ol{margin:3px 0 0;}
/* a quote: a rule down its left edge, its words a shade quieter */
.m33-chat-msg.assistant .m33-md-bq,.m33-chat-msg.m33-user-md .m33-md-bq{margin:0 0 10px;padding:1px 0 1px 12px;border-left:3px solid var(--m33-border,rgba(255,255,255,0.22));color:var(--m33-text-muted,#b4bbcb);}
.m33-chat-msg.assistant .m33-md-bq > :last-child,.m33-chat-msg.m33-user-md .m33-md-bq > :last-child{margin-bottom:0;}
.m33-chat-msg.assistant li,.m33-chat-msg.m33-user-md li{margin:3px 0;}
.m33-chat-msg.assistant strong,.m33-chat-msg.m33-user-md strong{font-weight:650;color:var(--m33-text,#e6e9f2);}
.m33-chat-msg.assistant a,.m33-chat-msg.m33-user-md a{color:#9aa4ff;}
.m33-chat-msg.assistant code,.m33-chat-msg.m33-user-md code{background:rgba(255,255,255,0.08);border-radius:4px;padding:1px 5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;}
.m33-chat-msg.assistant .m33-md-pre,.m33-chat-msg.m33-user-md .m33-md-pre{background:rgba(0,0,0,0.28);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:12px 14px;overflow-x:auto;margin:0 0 10px;}
.m33-chat-msg.assistant .m33-md-pre code,.m33-chat-msg.m33-user-md .m33-md-pre code{background:none;padding:0;font-size:12.5px;line-height:1.5;}
/* error modal */
.m33-chat-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;}
.m33-chat-modal[hidden]{display:none;}
.m33-chat-modal-backdrop{position:absolute;inset:0;background:rgba(6,8,14,0.62);backdrop-filter:blur(2px);}
.m33-chat-modal-box{position:relative;max-width:440px;width:100%;background:var(--m33-panel,#1a1d2e);border:1px solid rgba(229,72,77,0.4);border-radius:14px;padding:22px 22px 18px;box-shadow:0 18px 50px rgba(0,0,0,0.5);}
.m33-chat-modal-head{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.m33-chat-modal-icon{flex:none;width:26px;height:26px;border-radius:50%;background:#e5484d;color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;}
.m33-chat-modal-title{font-size:16px;font-weight:650;color:var(--m33-text,#e6e9f2);}
.m33-chat-modal-msg{font-size:14px;line-height:1.55;color:var(--m33-text,#d4d9e8);word-wrap:break-word;}
.m33-chat-modal-detail{margin-top:10px;font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--m33-text-muted,#8a93a6);word-break:break-all;}
.m33-chat-modal-detail[hidden]{display:none;}
.m33-chat-modal-actions{display:flex;justify-content:flex-end;margin-top:18px;}
.m33-chat-modal-btn{background:var(--m33-accent,#5b6cff);border:none;color:#fff;font:inherit;font-weight:600;font-size:13px;padding:8px 18px;border-radius:9px;cursor:pointer;}
.m33-chat-modal-btn:hover{filter:brightness(1.08);}
/* the live-voice client's Live button while a session runs (it joins the
   composer at runtime; lib/views/javascripts/proto/voice/client.js) */
.m33-chat-ctl.live-on{color:#fff;background:#e5484d;border-color:#e5484d;animation:m33pulse 1.3s ease-in-out infinite;}