/* ============================================================================
   Chief360.Ui — Chat Room components (v0.8 add-on)
   Served at _content/Chief360.Ui/chat.css. Link alongside chief360.css.
   Adapted from Chief360_ChatRoom_WatchDesk_Mockup.html; all classes .c3-chat-*
   (collision-safe) and token-driven so day/night flips with the content tokens.
   ============================================================================ */

.c3-chat { display:grid; grid-template-columns:280px 1fr; background:var(--card); border:1px solid var(--line);
           border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; min-height:0; height:100%; }

/* accents for coins/avatars */
.c3-chat-a0 { background:var(--side); }
.c3-chat-a1 { background:#7A4FB5; }
.c3-chat-a2 { background:#2D8C6F; }
.c3-chat-a3 { background:#B5603A; }
.c3-chat-sys { background:var(--orange) !important; }
.c3-chat-me-av { background:var(--under) !important; }

/* room list */
.c3-chat-rooms { border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.c3-chat-rhead { background:var(--black); color:#fff; font-weight:700; font-size:13px; padding:10px 13px; display:flex; align-items:center; gap:8px; }
.c3-chat-rhead .ic { color:var(--orange); display:inline-flex; }
.c3-chat-rsearch { padding:9px 11px; border-bottom:1px solid var(--line-2); }
.c3-chat-rsearch input { width:100%; border:1px solid var(--line); border-radius:7px; padding:7px 9px; font:inherit; background:var(--input-bg); color:var(--text); }
.c3-chat-rlist { overflow:auto; flex:1; }
/* BORDER:0 FIRST, and it is load-bearing. The mockup's row is a <div>; this component renders a <button>
   so the whole row is keyboard-reachable, and a button carries the browser's default border. The rule set
   only border-bottom and border-left, which left the UA's dark border on the TOP and RIGHT of every room
   row (Brooks, 2026-10-21: "the dark lines above and to the right of each chat room"). Reset the
   shorthand, then re-declare the two edges the design actually has. */
.c3-chat-room { display:flex; gap:10px; padding:10px 12px; border:0; border-bottom:1px solid var(--line-2); cursor:pointer; align-items:flex-start; width:100%; text-align:left; background:transparent; border-left:3px solid transparent; color:var(--text); }
.c3-chat-room:hover { background:var(--line-2); }
.c3-chat-room.active { background:var(--orange-soft); border-left-color:var(--orange); }
.c3-chat-rc { width:36px; height:36px; border-radius:9px; flex:none; display:grid; place-items:center; color:#fff; font-weight:800; font-size:12px; }
.c3-chat-rmeta { flex:1; min-width:0; }
.c3-chat-rn { font-weight:700; }
.c3-chat-rp { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c3-chat-rright { text-align:right; flex:none; }
.c3-chat-rt { color:var(--muted-2); font-size:11px; white-space:nowrap; }
.c3-chat-unread { background:var(--orange); color:#fff; font-size:11px; font-weight:800; border-radius:20px; padding:1px 7px; display:inline-block; margin-top:3px; }

/* The room row's two lines. The mockup stacks name over preview in divs; this component uses spans
   (a <button> may not contain a <div>), which are inline — so without these the name and the last
   message ran together on one line. Same markup, same look as the design. */
.c3-chat-rmeta > .c3-chat-rn, .c3-chat-rmeta > .c3-chat-rp { display:block; }

/* ---- Global (user-based) chat: rooms grouped by agency (Brooks 2026-10-20) ----
   Ported from Chief360ChatRoom.html's .cr-chips/.cr-chip/.cr-adot/.cr-ahead/.cr-last, token-driven so
   day/night flips with the content tokens (the mockup hard-codes #fff on the chip). */
.c3-chat-chips { display:flex; gap:6px; flex-wrap:wrap; padding:8px 11px; border-bottom:1px solid var(--line-2); }
.c3-chat-chip { font:inherit; font-size:11.5px; font-weight:700; padding:3px 10px; border:1px solid var(--line);
                background:var(--card); border-radius:20px; cursor:pointer; color:var(--muted);
                display:inline-flex; align-items:center; gap:5px; }
.c3-chat-chip.on { background:var(--orange-soft); border-color:var(--orange); color:var(--orange-ink, #8a4b0a); }
.c3-chat-adot { width:8px; height:8px; border-radius:50%; background:var(--under, #c0392b); display:inline-block; flex:none; }
.c3-chat-ahead { display:flex; align-items:center; gap:8px; padding:9px 12px 5px; font-size:11px; font-weight:800;
                 letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:var(--surface);
                 position:sticky; top:0; z-index:1; }
.c3-chat-ahead .grow { flex:1; }
.c3-chat-lock { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700;
                text-transform:none; letter-spacing:0; }
.c3-chat-lock .c3-ico { width:12px; height:12px; }
.c3-chat-last { margin-left:6px; font-size:10px; font-weight:800; color:var(--orange-ink, #8a4b0a);
                border:1px solid var(--orange); border-radius:10px; padding:0 6px; vertical-align:middle; }

/* The thread header's agency chip: rooms from different agencies sit side by side, so the thread has to
   name which agency it is (Chat Room's .cr-tag). */
.c3-chat-tag { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.04em;
               text-transform:uppercase; color:var(--orange-ink, #8a4b0a); background:var(--orange-soft);
               border-radius:20px; padding:1px 9px 1px 3px; margin-bottom:2px; }
.c3-chat-tag i { font-style:normal; background:var(--side); color:#fff; border-radius:50%; width:18px; height:18px;
                 display:grid; place-items:center; font-size:9px; }

/* thread */
.c3-chat-thread { display:flex; flex-direction:column; min-width:0; min-height:0; }
.c3-chat-thead { border-bottom:1px solid var(--line); padding:10px 15px; display:flex; align-items:center; gap:11px; flex:none; }
.c3-chat-tc { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:12px; flex:none; }
.c3-chat-tn { font-weight:800; font-size:15px; }
.c3-chat-tm { color:var(--muted); font-size:12px; }

/* seen-by */
.c3-chat-seen { margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.c3-chat-avstack { display:flex; }
.c3-chat-avstack .a { width:22px; height:22px; border-radius:50%; background:var(--side); color:#fff; font-size:9px; font-weight:800; display:grid; place-items:center; border:2px solid var(--card); margin-left:-7px; }

/* messages */
.c3-chat-msgs { flex:1; overflow:auto; padding:16px 16px 6px; background:var(--surface); display:flex; flex-direction:column; gap:14px; }
.c3-chat-day { align-self:center; background:var(--line-2); color:var(--muted); font-size:11px; font-weight:700; padding:3px 12px; border-radius:20px; }
.c3-chat-m { display:flex; gap:10px; max-width:76%; }
.c3-chat-m .av { width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-weight:800; font-size:12px; }
.c3-chat-m .col { min-width:0; }
.c3-chat-m .top { display:flex; align-items:baseline; gap:8px; margin-bottom:3px; }
.c3-chat-m .who2 { font-weight:700; }
.c3-chat-m .time { color:var(--muted-2); font-size:11px; }
.c3-chat-bubble { background:var(--card); border:1px solid var(--line); border-radius:4px 12px 12px 12px; padding:9px 12px; box-shadow:var(--shadow); }
.c3-chat-m.me { margin-left:auto; flex-direction:row-reverse; }
.c3-chat-m.me .bubble, .c3-chat-m.me .c3-chat-bubble { background:var(--orange-soft); border-color:#d3e3f5; border-radius:12px 4px 12px 12px; }
.c3-chat-m.me .top { flex-direction:row-reverse; }

/* attachments */
.c3-chat-attach { margin-top:8px; border-radius:9px; overflow:hidden; border:1px solid var(--line); }
.c3-chat-attach img { display:block; width:100%; max-width:320px; }
.c3-chat-gif { margin-top:8px; border-radius:9px; border:1px solid var(--line); width:220px; height:130px;
  background:repeating-linear-gradient(45deg,#dfe7f1,#dfe7f1 12px,#eef3f9 12px,#eef3f9 24px); display:grid; place-items:center; color:var(--muted); font-weight:700; position:relative; }
.c3-chat-gif .tag { position:absolute; left:8px; bottom:8px; background:#000a; color:#fff; font-size:10px; font-weight:800; padding:2px 6px; border-radius:5px; letter-spacing:.05em; }
.c3-chat-link { margin-top:8px; display:flex; gap:10px; border:1px solid var(--line); border-left:3px solid var(--side); border-radius:8px; overflow:hidden; max-width:360px; background:var(--card); }
.c3-chat-link .thumb { width:74px; background:linear-gradient(135deg,#2D8C6F,#159A4C); flex:none; }
.c3-chat-link .lc { padding:8px 10px; min-width:0; }
.c3-chat-link .lt { font-weight:700; font-size:12.5px; }
.c3-chat-link .ld { color:var(--muted); font-size:11.5px; }
.c3-chat-link .lu { color:var(--muted-2); font-size:11px; margin-top:2px; }
.c3-chat-card { margin-top:8px; border:1px solid var(--line); border-radius:10px; overflow:hidden; max-width:380px; background:var(--card); box-shadow:var(--shadow); }
.c3-chat-card .banner { height:96px; background:linear-gradient(120deg,var(--navy),var(--side)); }
.c3-chat-card .cc { padding:10px 12px; }
.c3-chat-card .ck { display:inline-block; background:var(--orange-soft); color:var(--orange-ink); font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.05em; }
.c3-chat-card .ct { font-weight:800; font-size:14px; margin:6px 0 3px; }
.c3-chat-card .cd { color:var(--muted); font-size:12px; }
.c3-chat-card .cf { border-top:1px solid var(--line-2); padding:8px 12px; display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted); }
.c3-chat-card .cf .prov { margin-left:auto; color:var(--side); font-weight:700; }

/* reactions */
.c3-chat-reacts { display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; }
.c3-chat-react { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--card); border-radius:20px; padding:2px 9px; font-size:12px; font-weight:700; cursor:pointer; }
.c3-chat-react.on { border-color:var(--orange); background:var(--orange-soft); color:var(--orange-ink); }
.c3-chat-react .n { font-variant-numeric:tabular-nums; }
.c3-chat-addreact { border:1px dashed var(--line); color:var(--muted); border-radius:20px; padding:2px 8px; font-size:12px; cursor:pointer; background:transparent; }
.c3-chat-addwrap { position:relative; display:inline-block; }
.c3-chat-addreact { opacity:.6; min-height:24px; }
.c3-chat-m:hover .c3-chat-addreact, .c3-chat-m:focus-within .c3-chat-addreact, .c3-chat-addreact.open, .c3-chat-addreact:focus-visible { opacity:1; }
@media (hover:none) { .c3-chat-addreact { opacity:1; min-height:32px; padding:4px 10px; } }
.c3-chat-pickscrim { position:fixed; inset:0; background:transparent; border:0; padding:0; cursor:default; z-index:19; }
.c3-chat-picker { position:absolute; bottom:calc(100% + 6px); left:0; z-index:20; display:grid; grid-template-columns:repeat(6, 36px); gap:2px; padding:6px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.c3-chat-m.me .c3-chat-picker { left:auto; right:0; }
.c3-chat-pick { width:36px; height:36px; border:0; background:transparent; border-radius:8px; font-size:20px; line-height:1; cursor:pointer; }
.c3-chat-pick:hover, .c3-chat-pick:focus-visible { background:var(--orange-soft); outline:none; }
@media (max-width:560px) { .c3-chat-picker { grid-template-columns:repeat(6, 40px); } .c3-chat-pick { width:40px; height:40px; } }

/* links in a message */
.c3-chat-bubble a { color:var(--side); text-decoration:underline; word-break:break-all; }
.c3-chat-bubble a:hover { color:var(--orange-ink); }

/* typing */
.c3-chat-typing { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; padding:2px 4px; }
.c3-chat-typing .dots { display:inline-flex; gap:3px; }
.c3-chat-typing .dots i { width:5px; height:5px; border-radius:50%; background:var(--muted-2); animation:c3chatblink 1.2s infinite; }
.c3-chat-typing .dots i:nth-child(2) { animation-delay:.15s; }
.c3-chat-typing .dots i:nth-child(3) { animation-delay:.3s; }
@keyframes c3chatblink { 0%,60%,100%{opacity:.3} 30%{opacity:1} }

/* composer */
.c3-chat-composer { border-top:1px solid var(--line); padding:10px 12px; display:flex; align-items:flex-end; gap:9px; flex:none; background:var(--card); position:relative; }
.c3-chat-composer .me { width:32px; height:32px; border-radius:50%; background:var(--under); color:#fff; display:grid; place-items:center; font-weight:800; font-size:11px; flex:none; }
.c3-chat-box { flex:1; border:1px solid var(--line); border-radius:12px; padding:6px 8px; background:var(--input-bg); }
.c3-chat-box textarea { width:100%; border:0; resize:none; font:inherit; outline:none; max-height:110px; padding:4px; background:transparent; color:var(--text); }
.c3-chat-tools { display:flex; align-items:center; gap:2px; margin-top:2px; }
.c3-chat-tbtn { width:30px; height:30px; border:0; background:transparent; border-radius:7px; color:var(--muted); cursor:pointer; display:grid; place-items:center; font-size:15px; }
.c3-chat-tbtn:hover { background:var(--orange-soft); color:var(--orange-ink); }
.c3-chat-send { border:0; background:var(--orange); color:#fff; border-radius:10px; padding:9px 16px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.c3-chat-send:hover { filter:brightness(1.05); }
.c3-chat-quick { position:absolute; bottom:56px; left:52px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:7px 9px; display:flex; gap:4px; align-items:center; }
.c3-chat-quick .q { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; font-size:18px; cursor:pointer; border:0; background:transparent; }
.c3-chat-quick .q:hover { background:var(--orange-soft); }
.c3-chat-quick .lbl { font-size:10.5px; color:var(--muted-2); font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:0 6px 0 2px; }

.c3-chat-rempty { padding:16px 14px; font-size:12.5px; color:var(--muted); line-height:1.5; }

/* Honest states. A chat surface with nothing in it is ambiguous — "no one has spoken", "you are in no rooms"
   and "we could not reach the server" look identical if all three render as blank space. These say which. */
.c3-chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:28px 24px; text-align:center; }
.c3-chat-empty .t { font-weight:800; font-size:14px; color:var(--text); }
.c3-chat-empty .d { font-size:12.5px; color:var(--muted); max-width:46ch; line-height:1.5; }

/* A feature the service layer cannot answer yet, stated where the feature would have been rather than
   filled in with something plausible. */
.c3-chat-gap { margin-left:auto; display:flex; align-items:center; gap:5px; color:var(--muted-2); font-size:11.5px; font-style:italic; }

@media (max-width:720px){ .c3-chat { grid-template-columns:1fr; } .c3-chat-m { max-width:90%; } }
@media (max-width:560px){ .c3-chat-gap { display:none; } }

/* ---- Media Converter states (Chat Room bus 3619; mockup .cr-proc, note 14) ----
   Same footprint as finished media — 16/9 at max-width 320 — so the thread does not jump when the
   real image or video replaces the tile. A reader watching a long upload should not have the
   conversation shift under them twice. */
.c3-chat-proc{margin-top:8px;width:100%;max-width:320px;aspect-ratio:16/9;border-radius:9px;
  border:1px dashed var(--line);
  background:repeating-linear-gradient(45deg,var(--line-2),var(--line-2) 12px,var(--surface) 12px,var(--surface) 24px);
  display:grid;place-content:center;justify-items:center;gap:6px;color:var(--muted);font-size:12px;
  text-align:center;padding:10px}
.c3-chat-proc b{color:var(--text);font-size:13px}
.c3-chat-proc a{color:var(--under);font-weight:700}
.c3-chat-spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);
  border-top-color:var(--under);animation:c3-chat-spin 1s linear infinite}
.c3-chat-proc.fail{border-style:solid;border-color:#e3b3b3;background:#fdf3f3}
.c3-chat-proc.fail .c3-chat-x{font-size:20px;font-weight:800;color:#a02828;line-height:1}
@keyframes c3-chat-spin{to{transform:rotate(360deg)}}
/* A spinner is decoration; someone who asked the OS to stop animations should not get one anyway. */
@media (prefers-reduced-motion:reduce){.c3-chat-spin{animation:none;border-top-color:var(--line)}}

/* Video sits in the same frame as an image so a mixed thread lines up. */
.c3-chat-attach video{display:block;width:100%;max-width:320px;background:#000}