/* Go live — the chat block layer (public/live.js) */
:root { --live:#c0392b; --live-soft:#fbe9e6; }
@media (prefers-color-scheme: dark) { :root { --live:#ff6b5b; --live-soft:#3a1714; } }

.wl-dot { width:8px; height:8px; border-radius:50%; background:var(--live); flex:none; position:relative; display:inline-block; }
.wl-dot::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--live); opacity:0; animation:wl-ping 1.8s var(--ease) infinite; }
.wl-dot.big { width:12px; height:12px; }
@keyframes wl-ping { 0% { transform:scale(.6); opacity:.7; } 100% { transform:scale(1.8); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .wl-dot::after { animation:none; } }

/* header switch */
.wl-chip { display:inline-flex; align-items:center; gap:6px; flex:none; height:28px; padding:0 11px 0 9px; margin-right:4px; border-radius:99px; border:1px dashed color-mix(in srgb, var(--gold) 60%, transparent); background:none; color:var(--gold-ink); font:600 12.5px/1 Montserrat, -apple-system, sans-serif; cursor:pointer; transition:box-shadow .15s, background .15s; }
.wl-chip svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; }
.wl-chip:hover { background:var(--gold-soft); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
.wl-chip.on { border:1px solid color-mix(in srgb, var(--live) 45%, transparent); background:var(--live-soft); color:var(--live); }
.wl-chip.on:hover { box-shadow:0 0 0 3px color-mix(in srgb, var(--live) 18%, transparent); }
.wl-chip small { font-weight:500; opacity:.8; font-size:11.5px; }
@media (max-width: 720px) { .wl-chip span, .wl-chip small { display:none; } .wl-chip { padding:0 8px; } .wl-chip.on { padding:0 9px; } }

/* chat list tag */
.wl-tag { display:inline-flex; align-items:center; gap:5px; height:18px; padding:0 7px 0 6px; border-radius:99px; background:var(--live-soft); color:var(--live); font:700 10px/1 Montserrat, sans-serif; letter-spacing:.06em; text-transform:uppercase; flex:none; }
.wl-tag .wl-dot { width:6px; height:6px; }
.wl-tag .wl-dot::after { inset:-3px; border-width:1.5px; }

/* strip above the composer */
.wl-strip { display:flex; align-items:center; gap:10px; padding:7px 14px; font-size:12.5px; color:var(--ink-2); position:relative;
  background:linear-gradient(90deg, var(--live-soft), color-mix(in srgb, var(--live-soft) 30%, var(--surface))); border-top:1px solid color-mix(in srgb, var(--live) 25%, transparent); }
.wl-strip::before { content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:linear-gradient(90deg, var(--live), var(--gold) 55%, transparent); opacity:.8; }
.wl-strip span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wl-strip b { color:var(--live); font-weight:600; }
.wl-strip button { border:1px solid color-mix(in srgb, var(--live) 40%, transparent); background:var(--surface); color:var(--live); font:600 12px/1 Montserrat, sans-serif; height:26px; padding:0 12px; border-radius:99px; cursor:pointer; }
.wl-strip button:hover { background:var(--live); color:#fff; }

/* AI mark on bubbles */
.wl-ai { display:inline-grid; place-items:center; height:14px; padding:0 4px; margin-right:2px; border-radius:4px; background:color-mix(in srgb, var(--gold) 22%, transparent); color:var(--gold-ink); font:700 9px/1 Montserrat, sans-serif; letter-spacing:.05em; }

/* popover */
.wl-pop { position:fixed; z-index:210; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; color:var(--ink); font:14px/1.5 Montserrat, -apple-system, "Segoe UI", Roboto, sans-serif; animation:wl-in .16s var(--ease); }
@keyframes wl-in { from { opacity:0; transform:translateY(-4px) scale(.98); } }
.wl-pop::before { content:""; height:2px; background:var(--strip); flex:none; }
.wl-pop-h { display:flex; align-items:center; gap:10px; padding:14px 12px 4px 16px; }
.wl-pop-h b { flex:1; font:700 15px/1.25 Montserrat, sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wl-pop-h.on b { color:var(--live); }
.wl-bolt { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; background:var(--gold-soft); color:var(--gold-ink); }
.wl-bolt svg { width:16px; height:16px; }
.wl-x { width:28px; height:28px; border:0; background:none; border-radius:8px; color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.wl-x:hover { background:var(--hover); color:var(--ink); }
.wl-x svg { width:16px; height:16px; }
.wl-pop-b { padding:6px 16px 14px; overflow:auto; }
.wl-note { margin:4px 0 12px; font-size:13px; color:var(--ink-2); }
.wl-lab { display:flex; justify-content:space-between; margin:10px 0 6px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.wl-lab span { text-transform:none; letter-spacing:0; font-weight:500; }
.wl-pop textarea { width:100%; resize:vertical; min-height:72px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font:inherit; font-size:13.5px; padding:9px 11px; outline:none; transition:border-color .15s, box-shadow .15s; }
.wl-pop textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
.wl-pop textarea:disabled { opacity:.75; }
.wl-durs { display:flex; flex-wrap:wrap; gap:6px; }
.wl-durs button { height:30px; padding:0 11px; border-radius:99px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font:500 12.5px/1 Montserrat, sans-serif; cursor:pointer; transition:all .15s; }
.wl-durs button:hover { border-color:var(--gold); }
.wl-durs button.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.wl-facts { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:6px 0 10px; }
.wl-facts div { padding:9px 10px; border-radius:10px; background:var(--soft); display:flex; flex-direction:column; min-width:0; }
.wl-facts small { font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.wl-facts b { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wl-pop-f { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:10px 14px; border-top:1px solid var(--line); background:var(--soft); }
.wl-only { display:inline-flex; align-items:center; gap:6px; margin-right:auto; font-size:12px; color:var(--muted); }
.wl-only svg { width:14px; height:14px; }
.wl-pop-b > .wl-only { margin:6px 0 0; }
.wl-btn { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:10px; border:1px solid transparent; font:600 13px/1 Montserrat, sans-serif; cursor:pointer; transition:filter .15s, background .15s; }
.wl-btn svg { width:15px; height:15px; }
.wl-btn.go { background:linear-gradient(145deg, #2a12b8, #100069); color:#fff4dc; box-shadow:inset 0 0 0 1px rgba(255,169,4,.45), 0 3px 10px rgba(16,0,105,.25); }
.wl-btn.go:hover, .wl-btn.stop:hover { filter:brightness(1.08); }
.wl-btn.stop { background:var(--live); color:#fff; }
.wl-btn.ghost { background:var(--surface); border-color:var(--line); color:var(--ink); }

/* The AI → Live */
.wl-hero { display:flex; align-items:center; gap:14px; padding:16px 18px; margin-bottom:18px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); position:relative; overflow:hidden; }
.wl-hero::before { content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--strip); opacity:.7; }
.wl-hero.on { background:linear-gradient(90deg, var(--live-soft), var(--surface) 60%); border-color:color-mix(in srgb, var(--live) 25%, var(--line)); }
.wl-hero > div:nth-child(2) { flex:1; display:flex; flex-direction:column; min-width:0; }
.wl-hero b { font:700 17px/1.3 Montserrat, sans-serif; }
.wl-hero span { font-size:13px; color:var(--muted); }
.wl-hero-i { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; background:var(--soft); color:var(--muted); }
.wl-hero.on .wl-hero-i { background:color-mix(in srgb, var(--live) 12%, transparent); }
.wl-clip { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width: 640px) { .wl-hero { flex-wrap:wrap; } }

/* phones: give the chat name room next to the Map and Live chips */
@media (max-width: 720px) {
  .wa-hdr { gap:6px; padding-right:6px; }
  .wa-hdr .who { flex:1 1 auto; }
  .wa-hdr .wm-chip { margin:0 0 0 2px; }
  .wa-hdr .wl-chip { margin-right:0; }
}
@media (max-width: 440px) { .wa-hdr .who span:not(.live) { display:none; } }

/* Live / Off switch (chat rows and header) */
.wl-sw { display:inline-flex; align-items:center; gap:6px; flex:none; height:26px; padding:0 9px 0 4px; margin-right:6px; border-radius:99px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font:600 11.5px/1 Montserrat, -apple-system, sans-serif; letter-spacing:.02em; cursor:pointer; transition:background .15s, border-color .15s, color .15s, box-shadow .15s; }
.wl-sw i { width:30px; height:18px; border-radius:99px; background:color-mix(in srgb, var(--muted) 30%, transparent); position:relative; flex:none; transition:background .18s var(--ease); }
.wl-sw i::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .18s var(--ease); }
.wl-sw.on { border-color:color-mix(in srgb, var(--live) 40%, transparent); background:var(--live-soft); color:var(--live); }
.wl-sw.on i { background:var(--live); }
.wl-sw.on i::after { transform:translateX(12px); }
.wl-sw:hover:not(.ro) { box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
.wl-sw:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.wl-sw.ro { cursor:default; }
.wl-sw.row { height:20px; padding:0 7px 0 3px; margin:0 0 0 4px; font-size:10px; gap:4px; text-transform:uppercase; letter-spacing:.06em; }
.wl-sw.row i { width:22px; height:13px; }
.wl-sw.row i::after { top:1.5px; left:1.5px; width:10px; height:10px; }
.wl-sw.row.on i::after { transform:translateX(9px); }
.wl-chip.on small { opacity:1; }
@media (max-width: 720px) { .wl-sw:not(.row) span { display:none; } .wl-sw:not(.row) { padding:0 4px; } }

/* AI draft: list label, strip, typing box */
.wl-dlab { color:var(--gold-ink); font-weight:600; margin-right:4px; flex:none; }
.wl-strip.draft { background:linear-gradient(90deg, var(--gold-soft), color-mix(in srgb, var(--gold-soft) 30%, var(--surface))); border-top-color:color-mix(in srgb, var(--gold) 30%, transparent); }
.wl-strip.draft::before { background:linear-gradient(90deg, var(--gold), transparent); }
.wl-strip.draft b { color:var(--gold-ink); }
.wl-strip.draft button { border-color:color-mix(in srgb, var(--gold) 45%, transparent); color:var(--gold-ink); }
.wl-strip.draft button:hover { background:var(--gold); color:#fff; }
.wl-dtag { flex:none !important; font:700 10.5px/1 Montserrat, sans-serif; letter-spacing:.05em; padding:4px 6px; border-radius:6px; background:color-mix(in srgb, var(--gold) 22%, transparent); color:var(--gold-ink); }
textarea.wl-filled { font-style:italic; color:var(--ink-2); }
.wl-brief { width:100%; resize:vertical; min-height:70px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font:inherit; font-size:13.5px; padding:9px 11px; outline:none; }
.wl-brief:focus { border-color:var(--gold); }