:root {
  --navy: #0F1E33;
  --navy-2: #22344F;
  --gold: #8F6B30;
  --gold-2: #B79A5A;
  --gold-pale: #F3EAD8;
  --paper: #FBF7F0;
  --card: #FFFFFF;
  --line: #E6DDCC;
  --ink: #1D2430;
  --muted: #6B6252;
  --help: #9A3B2E;
  --help-pale: #F7E6E2;
  --ok: #3E6B4F;
  --ok-pale: #E5EFE7;
  --warn: #9A6A12;
  --warn-pale: #FBF0D9;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
textarea, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- top bar */
#topbar { position: fixed; top: 0; left: 0; right: 0; height: 64px; background: var(--navy); color: #fff; display: flex; align-items: center; gap: 18px; padding: 0 18px; z-index: 20; }
#brand { font-family: var(--serif); font-size: 21px; letter-spacing: .2px; white-space: nowrap; }
#brand small { font-family: var(--sans); font-size: 11px; color: var(--gold-2); text-transform: uppercase; letter-spacing: 1.4px; margin-left: 8px; }
#light { display: flex; gap: 4px; flex: 1 1 auto; min-width: 260px; max-width: 600px; margin: 0 auto; }
.seg { min-width: 0; overflow: hidden; }
.seg { flex: 1; background: transparent; border: 0; color: #9FB0C8; padding: 6px 4px 4px; text-align: left; border-top: 3px solid #33465F; }
.seg b { font-family: var(--serif); font-size: 17px; color: #C9D3E2; margin-right: 6px; }
.seg span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: calc(100% - 22px); vertical-align: bottom; }
.seg.done { border-top-color: var(--gold-2); color: #DCCDA9; }
.seg.done b { color: var(--gold-2); }
.seg.current { border-top-color: #fff; color: #fff; }
.seg.current b { color: #fff; }
.seg.viewing { background: rgba(255,255,255,.07); }
#tools { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.tb { background: transparent; color: #DDE4EE; border: 1px solid #3A4D68; border-radius: 6px; padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.tb:hover { background: rgba(255,255,255,.08); }
.tb.on { background: var(--gold-2); border-color: var(--gold-2); color: var(--navy); }
#mode { white-space: nowrap; font-size: 12px; padding: 4px 9px; border-radius: 99px; background: #33465F; color: #E6ECF4; border: 0; }
#mode.demo { background: var(--gold-2); color: var(--navy); }
#cost { font-size: 12px; color: #9FB0C8; min-width: 46px; text-align: right; }
#helpnow { background: var(--help); color: #fff; border: 0; border-radius: 6px; padding: 7px 12px; font-size: 13px; font-weight: 600; }
#casechip { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; background: #2B3E59; color: #E6ECF4; border: 0; border-radius: 99px; padding: 4px 10px; }

/* ---------------------------------------------------------------- layout */
#main { position: fixed; top: 64px; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: minmax(380px, 1fr) minmax(360px, 460px); }

#convo { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
#messages { flex: 1; overflow-y: auto; padding: 28px 8% 20px; }
#panel { overflow-y: auto; padding: 22px 22px 40px; background: #F6F0E4; }

/* ---------------------------------------------------------------- invitation */
#invite { max-width: 620px; margin: 9vh auto 0; }
#invite h1 { font-family: var(--serif); font-weight: 500; font-size: 34px; color: var(--navy); margin: 0 0 10px; }
#invite p { font-family: var(--serif); font-size: 18px; color: var(--muted); margin: 0 0 22px; }
#invite textarea { width: 100%; min-height: 170px; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 16px 18px; font-family: var(--serif); font-size: 17px; line-height: 1.6; resize: vertical; outline: none; }
#invite textarea:focus { border-color: var(--gold-2); }
#invite .row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 12px; }
#invite .hint { font-size: 13px; color: var(--muted); }
.primary { background: var(--navy); color: #fff; border: 0; border-radius: 8px; padding: 10px 20px; font-weight: 600; }
.primary:hover:not(:disabled) { background: var(--navy-2); }
.primary.gold { background: var(--gold); }
.secondary { background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 8px; padding: 9px 16px; }
.secondary:hover:not(:disabled) { border-color: var(--gold-2); }
.link { background: none; border: 0; color: var(--gold); padding: 0; text-decoration: underline; text-underline-offset: 2px; font-size: 13px; }
.casebox { margin-top: 26px; border: 1px dashed var(--gold-2); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--muted); background: var(--gold-pale); }
.casebox b { color: var(--navy); }

/* ---------------------------------------------------------------- conversation */
.msg { max-width: 640px; margin: 0 0 18px; position: relative; }
.msg.person { margin-left: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px 12px 2px 12px; padding: 11px 15px; font-size: 15px; width: fit-content; max-width: 78%; white-space: pre-wrap; }
.msg.app { font-family: var(--serif); font-size: 17.5px; line-height: 1.6; color: var(--navy); padding-left: 14px; border-left: 2px solid var(--gold-2); }
.msg.app .mark { position: absolute; left: 14px; bottom: -18px; font-family: var(--sans); font-size: 12px; color: var(--muted); opacity: 0; transition: opacity .15s; }
.msg.app:hover .mark, .msg.app.flagged .mark { opacity: 1; }
.msg.app.flagged { border-left-color: var(--help); }
.flagform { margin: 6px 0 22px 16px; max-width: 620px; background: var(--help-pale); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.flagform label { display: block; font-weight: 600; color: var(--help); margin: 4px 0 3px; }
.flagform textarea { width: 100%; min-height: 48px; border: 1px solid #E3C5BE; border-radius: 6px; padding: 6px 8px; background: #fff; font-family: var(--sans); font-size: 13px; }
.flagform .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.divider { text-align: center; margin: 30px 0 22px; font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 14px; }
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.event { text-align: center; font-size: 12.5px; color: var(--muted); font-style: italic; margin: -6px 0 18px; }
.notice { max-width: 640px; margin: 0 0 18px; padding: 10px 14px; border-radius: 8px; background: var(--warn-pale); color: #5E4310; font-size: 14px; }
.notice button { margin-left: 8px; }
.typing { padding-left: 14px; border-left: 2px solid var(--gold-2); color: var(--gold); font-size: 22px; letter-spacing: 3px; height: 30px; margin-bottom: 18px; }
.typing span { animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

#found { border-top: 1px solid var(--line); background: #FFFDF8; padding: 8px 8%; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 10px; min-height: 38px; }
#found b { color: var(--navy); font-weight: 600; }
#found .pill { background: var(--gold-pale); color: var(--gold); border-radius: 99px; padding: 1px 9px; font-size: 12px; }
#composer { display: flex; gap: 10px; padding: 12px 8% 18px; background: #FFFDF8; }
#composer textarea { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; min-height: 48px; max-height: 200px; resize: none; background: #fff; font-size: 15px; outline: none; }
#composer textarea:focus { border-color: var(--gold-2); }

/* ---------------------------------------------------------------- the panel */
.ph { margin-bottom: 14px; }
.ph .kicker { font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }
.ph h2 { font-family: var(--serif); font-weight: 500; font-size: 23px; margin: 2px 0 4px; color: var(--navy); }
.ph p { margin: 0; color: var(--muted); font-size: 13.5px; }
.empty { color: var(--muted); font-size: 14px; font-style: italic; padding: 14px 0; }
.group { margin: 18px 0 8px; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 9px; transition: box-shadow .4s, border-color .4s; }
.card.new { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(183,154,90,.25); }
.card.confirmed { border-left: 3px solid var(--ok); }
.card.possible { border-left: 3px dashed var(--gold-2); }
.card.unclear { border-left: 3px dotted #9AA4B2; }
.card .text { font-family: var(--serif); font-size: 15.5px; color: var(--navy); }
.card .text.editing { outline: 1px solid var(--gold-2); background: #FFFCF4; border-radius: 4px; padding: 2px 4px; }
.card .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; }
.lab { border-radius: 99px; padding: 1px 8px; font-size: 11.5px; background: #EEF0F3; color: #45505F; }
.lab.told { background: #E7ECF4; color: #2F4566; }
.lab.possible { background: var(--gold-pale); color: var(--gold); }
.lab.confirmed { background: var(--ok-pale); color: var(--ok); }
.lab.unclear { background: #EEF0F3; color: #5D6673; }
.lab.type { background: transparent; color: var(--muted); padding-left: 0; }
.lab.yours { background: transparent; color: var(--ok); padding-left: 0; }
.evidence { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.evidence q { font-style: italic; }
.question { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--gold); margin-top: 5px; }
.actions { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.actions button { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 2px 9px; font-size: 12px; color: var(--navy); }
.actions button:hover { border-color: var(--gold-2); background: #FFFBF1; }
.actions button.save { background: var(--navy); color: #fff; border-color: var(--navy); }
.chipsel { border: 1px solid var(--line); border-radius: 99px; padding: 1px 6px; font-size: 12px; background: #fff; color: var(--navy); }
.chipsel.situation { background: #E7ECF4; }
.chipsel.added { background: var(--gold-pale); }
.chipsel.both { background: #EFE6F2; }
.addrow { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.addrow select { max-width: 100%; min-width: 0; }
.addrow input, .addrow select { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: #fff; font-size: 13px; }
.addrow input { flex: 1; }
.addrow button { font-size: 13px; padding: 6px 10px; }
.removed { margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.removed div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; text-decoration: line-through; }
.removed div button { text-decoration: none; }
.confirmbar { position: sticky; bottom: -40px; margin: 22px -22px -40px; padding: 14px 22px 22px; background: linear-gradient(transparent, #F6F0E4 18%); }
.confirmbar .primary { width: 100%; padding: 12px; }
.confirmbar .why { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 6px; }
.confirmbar.ready .primary { background: var(--gold); }
.links { font-size: 13px; color: var(--muted); }
.links div { padding: 3px 0; }
.links q { font-style: italic; color: var(--navy); }

.metaphor { background: var(--navy); color: #F2EBDD; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.metaphor .k { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-2); }
.metaphor .t { font-family: var(--serif); font-size: 16px; font-style: italic; }

.rank { display: flex; gap: 10px; align-items: flex-start; }
.rank .bar { height: 5px; background: var(--line); border-radius: 3px; margin-top: 7px; overflow: hidden; }
.rank .bar i { display: block; height: 100%; background: var(--gold-2); }
.rank .body { flex: 1; }
.card.proposed { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(143,107,48,.15); }
.proposedtag { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; }
.reason { font-family: var(--serif); font-size: 14px; color: var(--muted); margin-top: 5px; font-style: italic; }
.startbtn { background: var(--navy); color: #fff; border: 0; border-radius: 6px; padding: 5px 11px; font-size: 12.5px; white-space: nowrap; }
.startbtn.alt { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.real { background: #EEF2F7; border-radius: 10px; padding: 10px 13px; margin-top: 8px; font-size: 13.5px; color: #2F4566; }
.real .k { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #5D6F8A; margin-bottom: 3px; }
.real div { font-family: var(--serif); }

.lens { background: var(--navy); color: #fff; border-radius: 12px; padding: 16px 18px; margin: 12px 0; }
.lens .k { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-2); }
.lens .n { font-family: var(--serif); font-size: 21px; margin: 2px 0 8px; }
.lens .q { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.55; color: #F2EBDD; }
.lens .alt { margin-top: 12px; }
.lens .alt button { background: transparent; color: var(--gold-2); border: 1px solid #3A4D68; border-radius: 6px; padding: 3px 9px; font-size: 12px; margin: 4px 4px 0 0; }
.lens .alt button:hover { background: rgba(255,255,255,.07); }
.lens .link { color: var(--gold-2); }
.tool { background: #fff; border: 1px solid var(--gold-2); border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.tool .k { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); }
.tool .n { font-family: var(--serif); font-size: 17px; color: var(--navy); }
.tool .s { font-size: 12.5px; color: var(--muted); }
.tool.declined { opacity: .55; border-style: dashed; }
.field { margin: 14px 0; }
.field label { display: block; font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.field textarea { width: 100%; min-height: 64px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-family: var(--serif); font-size: 15px; background: #fff; resize: vertical; outline: none; }
.field textarea:focus { border-color: var(--gold-2); }
.field .help { font-size: 12px; color: var(--muted); margin-top: 3px; }
.felt { display: flex; gap: 6px; }
.felt button { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 4px; font-size: 13px; color: var(--navy); }
.felt button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.twobtn { display: flex; gap: 8px; }
.twobtn button { flex: 1; }
.step { display: flex; gap: 8px; align-items: flex-start; }
.step .kind { font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--gold); min-width: 58px; padding-top: 3px; }
.step .text { flex: 1; }
.needs { font-size: 12px; color: var(--help); margin-top: 3px; }
.check { display: flex; gap: 9px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: 14px; }
.check input { margin-top: 4px; }

/* ---------------------------------------------------------------- workbench */
#workbench { position: fixed; top: 64px; right: 0; bottom: 0; width: 540px; background: #fff; border-left: 1px solid var(--line); display: flex; flex-direction: column; z-index: 15; box-shadow: -6px 0 20px rgba(15,30,51,.06); }
#wbtabs { display: flex; gap: 2px; padding: 10px 12px 0; border-bottom: 1px solid var(--line); background: #FAF6EE; flex-wrap: wrap; }
#wbtabs button { background: transparent; border: 0; padding: 8px 11px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; }
#wbtabs button.on { color: var(--navy); border-bottom-color: var(--gold); font-weight: 600; }
#wbtabs button .n { background: var(--help); color: #fff; border-radius: 99px; font-size: 10.5px; padding: 0 6px; margin-left: 4px; }
#wbbody { flex: 1; overflow-y: auto; padding: 16px 18px 40px; font-size: 13.5px; }
#wbbody h3 { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: 18px; margin: 18px 0 8px; }
#wbbody h3:first-child { margin-top: 0; }
.intro { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.tc { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; }
.tc.safety { border-left: 3px solid var(--help); }
.tc.active { border-color: var(--gold); background: #FFFBF1; }
.tc .h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tc .h b { font-family: var(--serif); font-size: 15.5px; color: var(--navy); font-weight: 600; }
.tc .m { font-size: 12px; color: var(--muted); }
.tc dl { margin: 8px 0 0; display: none; }
.tc.open dl { display: block; }
.tc dt { font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--gold); margin-top: 7px; }
.tc dd { margin: 1px 0 0; }
.tc .fail { color: var(--help); }
.tcgroup { font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; }
.turn { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.turn .h { background: #FAF6EE; padding: 7px 11px; display: flex; justify-content: space-between; font-size: 12.5px; }
.turn .h b { color: var(--navy); }
.turn .b { padding: 8px 11px; }
.turn .row { margin: 4px 0; }
.turn .k { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.badge { border-radius: 99px; padding: 0 8px; font-size: 11.5px; }
.badge.normal { background: var(--ok-pale); color: var(--ok); }
.badge.professional { background: var(--warn-pale); color: var(--warn); }
.badge.urgent, .badge.immediate, .badge.unavailable { background: var(--help-pale); color: var(--help); }
.warnline { color: var(--warn); }
.voiceline { color: var(--help); }
.psg { font-size: 12.5px; color: var(--muted); padding: 2px 0; }
.psg b { color: var(--navy); font-weight: 600; }
pre.raw { background: #0F1E33; color: #DCE4EE; font-size: 11.5px; padding: 10px; border-radius: 8px; overflow-x: auto; max-height: 360px; white-space: pre-wrap; word-break: break-word; }
details summary { cursor: pointer; color: var(--gold); font-size: 12.5px; margin-top: 6px; }
table.mods { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mods th { text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding: 5px 4px; font-weight: 500; }
table.mods td { border-bottom: 1px solid #F0EADF; padding: 5px 4px; }
.path { font-family: Consolas, 'Courier New', monospace; font-size: 12px; background: #F6F1E7; border-radius: 4px; padding: 1px 5px; word-break: break-all; }
.gap { border-left: 3px solid var(--gold-2); padding: 5px 10px; margin-bottom: 8px; background: #FFFBF1; }
.gap .m { font-size: 12px; color: var(--muted); }
.markitem { border-left: 3px solid var(--help); padding: 5px 10px; margin-bottom: 10px; background: #FFF8F6; }
.markitem .r { font-family: var(--serif); color: var(--navy); }
.markitem .w { color: var(--help); }
.markitem .b { font-style: italic; }
#notes { width: 100%; min-height: 140px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 14px; }
.file { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #F0EADF; }

/* ---------------------------------------------------------------- overlays */
.overlay { position: fixed; inset: 0; background: rgba(15,30,51,.55); z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; }
.modal { background: var(--paper); border-radius: 14px; width: 100%; max-width: 620px; padding: 26px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal h2 { font-family: var(--serif); font-weight: 500; font-size: 25px; color: var(--navy); margin: 0 0 8px; }
.modal p { margin: 0 0 12px; }
.modal .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.modal label.f { display: block; font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
.modal input[type=password], .modal input[type=text], .modal select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: #fff; }
.modal .small { font-size: 12.5px; color: var(--muted); }
.modal .msgline { font-size: 13px; margin-top: 8px; }
.support { border-top: 6px solid var(--help); }
.support .lead { font-family: var(--serif); font-size: 19px; color: var(--navy); }
.route { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 15px; margin: 8px 0; }
.route.first { border-color: var(--help); background: var(--help-pale); }
.route b { font-size: 16px; color: var(--navy); }
.route .num { font-family: var(--serif); font-size: 22px; color: var(--help); white-space: nowrap; }
.route .s { font-size: 13px; color: var(--muted); }
.map h3 { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: 17px; margin: 16px 0 6px; }
.map ul { margin: 0; padding-left: 20px; font-family: var(--serif); }
.map li { margin: 3px 0; }
.map .sub { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.retrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin: 6px 0; }
.retrow .t { font-family: var(--serif); color: var(--navy); }
.seg3 { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.seg3 button { background: #fff; border: 0; border-left: 1px solid var(--line); padding: 5px 10px; font-size: 12.5px; color: var(--navy); }
.seg3 button:first-child { border-left: 0; }
.seg3 button.on { background: var(--navy); color: #fff; }
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.2); max-width: 80vw; }

.busy .card .actions, .busy .confirmbar, .busy .felt, .busy .lens .alt, .busy .addrow, .busy .startbtn, .busy .twobtn, .busy .marks, .busy .chain input, .busy .seedrow select, .busy .cabinet button { pointer-events: none; opacity: .55; }

@media (max-width: 1500px) { #casechip { max-width: 130px; } .tb { padding: 6px 8px; } #topbar { gap: 12px; } }
@media (max-width: 1280px) { #cost, #brand small { display: none; } }

/* ================================================================ v0.2 additions */
.seg small { display: block; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: #7F90A8; margin-top: 1px; }
.seg.current small { color: var(--gold-2); }
#menu { position: relative; }
#menupop { position: absolute; right: 0; top: 40px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,30,51,.15); padding: 6px; min-width: 210px; z-index: 30; }
#menupop button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; color: var(--navy); font-size: 14px; }
#menupop button:hover { background: var(--gold-pale); }
.lock { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #5D6F8A; }
.card.fact { border-left: 3px solid #5D6F8A; }
.card.fact .text { color: #22344F; }
.card.interp .text::before { content: '‘'; color: var(--gold); }
.card.interp .text::after { content: '’'; color: var(--gold); }
.seedrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--muted); }
.chain { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.chain .row { display: grid; grid-template-columns: 112px 1fr; gap: 6px; align-items: center; margin: 4px 0; }
.chain label { font-size: 11.5px; color: var(--muted); letter-spacing: .4px; }
.chain label b { color: var(--navy); font-weight: 600; }
.chain input { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-family: var(--serif); font-size: 13.5px; background: #fff; width: 100%; }
.chain input::placeholder { color: #A9A094; font-style: italic; font-family: var(--sans); font-size: 12px; }
.reclass { margin-top: 8px; background: var(--gold-pale); border-radius: 6px; padding: 6px 9px; font-size: 12.5px; color: #5E4310; }
.above { background: #EEF2F7; border-radius: 10px; padding: 11px 13px; margin-bottom: 12px; }
.above .k { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #5D6F8A; }
.above .t { font-family: var(--serif); font-size: 15px; color: var(--navy); margin-top: 3px; }
.above .t i { color: var(--muted); font-style: normal; font-family: var(--sans); font-size: 12px; margin-right: 4px; }
.angles-note { font-size: 12.5px; color: var(--muted); background: #fff; border: 1px dashed var(--gold-2); border-radius: 8px; padding: 7px 10px; margin: 6px 0 10px; }
.angle { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 9px; }
.angle.new { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(183,154,90,.25); }
.angle .t { font-family: var(--serif); font-size: 15.5px; color: var(--navy); }
.angle .src { font-size: 12px; color: var(--muted); margin-top: 4px; }
.angle .src b { color: var(--gold); font-weight: 600; }
.angle .serious { font-size: 11px; color: #5D6F8A; letter-spacing: .6px; text-transform: uppercase; margin-left: 6px; }
.angle .marks { display: flex; gap: 5px; margin-top: 8px; }
.angle .marks button { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 5px 4px; font-size: 12.5px; color: var(--navy); }
.angle .marks button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.angle.declined { opacity: .5; }
.cabinet { background: #FFF8EC; border: 1px solid var(--gold-2); border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.cabinet .k { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); }
.cabinet .n { font-family: var(--serif); font-size: 17px; color: var(--navy); }
.cabinet .s { font-size: 12.5px; color: var(--muted); margin: 2px 0 8px; }
.cabinet textarea { width: 100%; min-height: 54px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: var(--serif); font-size: 14.5px; background: #fff; }
.cabinet.done { background: #F1EEE6; }
.minilens { background: var(--navy); color: #F2EBDD; border-radius: 10px; padding: 11px 14px; margin: 10px 0; }
.minilens .k { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-2); }
.minilens .q { font-family: var(--serif); font-style: italic; font-size: 15px; margin-top: 3px; }
.codebox { max-width: 440px; margin: 12vh auto 0; text-align: left; }
.codebox h1 { font-family: var(--serif); font-weight: 500; font-size: 30px; color: var(--navy); margin: 0 0 8px; }
.codebox input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 18px; letter-spacing: 2px; background: #fff; margin: 12px 0; }
.codebox .err { color: var(--help); font-size: 13.5px; min-height: 20px; }
.quiet { font-size: 13px; color: var(--muted); }
/* the first-visit consent screen and Your information */
.consentbox { max-width: 560px; margin-top: 4vh; padding-bottom: 40px; }
.consentbox .hero { margin-bottom: 8px; }
.consentbox p { line-height: 1.5; }
.consentbox .cbox { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: 15px; line-height: 1.45; cursor: pointer; }
.consentbox .cbox input { width: 20px; height: 20px; min-width: 20px; margin: 2px 0 0; padding: 0; letter-spacing: 0; accent-color: var(--navy); }
.consentbox .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.consentbox .primary:disabled { opacity: .4; cursor: default; }
.minelist { margin: 8px 0 14px; }
.consentbox a, .modal a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold-2); }
.minelist .secondary { display: block; width: 100%; text-align: left; margin-top: 10px; }
.minelist .quiet { margin: 4px 2px 0; }
.danger { background: var(--help); color: #fff; border: 0; border-radius: 8px; padding: 10px 20px; font-weight: 600; }
#b-panel { display: none; }
@media (max-width: 900px) {
  #b-panel { display: inline-block; }
  #brand { font-size: 17px; }
  #main { grid-template-columns: 1fr; }
  #panel { display: none; }
  #panel.show { display: block; position: fixed; inset: 64px 0 0 0; z-index: 12; }
  #light .seg span, #light .seg small { display: none; }
  #light { min-width: 0; flex: 1 1 0; }
  #topbar { gap: 8px; padding: 0 10px; }
  #tools { gap: 5px; }
  .tb { padding: 5px 7px; font-size: 12px; }
  #helpnow { padding: 6px 8px; font-size: 12px; }
  #messages { padding: 20px 16px; }
  #composer, #found { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 480px) { #brand { font-size: 16px; } #topbar { gap: 8px; padding: 0 12px; } }
@media (max-width: 340px) { #brand { display: none; } }
.seg small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================ v0.3: conversation first */
body.conv #main { grid-template-columns: 1fr; }
body.conv #panel { display: none; }
body.conv #messages { padding: 28px max(16px, calc((100% - 760px) / 2)) 24px; }
body.conv #composer, body.conv #found { padding-left: max(16px, calc((100% - 760px) / 2)); padding-right: max(16px, calc((100% - 760px) / 2)); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 20px 16px; }
.chips button { background: #fff; border: 1px solid var(--gold-2); color: var(--navy); border-radius: 99px; padding: 6px 14px; font-size: 14px; }
.chips button:hover:not(:disabled) { background: var(--gold-pale); }
.chips button.quiet { border-color: var(--line); color: var(--muted); }
.scale { margin: 26px 0 22px 16px; }
.scale .row { display: flex; gap: 6px; flex-wrap: wrap; }
.scale button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 600; font-size: 15px; }
.scale button:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-pale); }
.scale .ends { display: flex; justify-content: space-between; max-width: 474px; font-size: 12px; color: var(--muted); margin-top: 4px; }
.anglecard { margin: -4px 0 20px 16px; max-width: 600px; background: #fff; border: 1px solid var(--gold-2); border-radius: 12px; padding: 12px 15px; }
.anglecard .k { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gold); }
.anglecard .t { font-family: var(--serif); font-size: 16.5px; color: var(--navy); margin: 3px 0 4px; }
.anglecard .s { font-size: 12.5px; color: var(--muted); }
.anglecard .row { display: flex; gap: 8px; margin-top: 10px; }
.anglecard .row button { background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 5px 14px; font-size: 13.5px; color: var(--navy); }
.anglecard .row button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.anglecard.declined { opacity: .55; }
.nextrow { display: flex; gap: 10px; margin: 26px 0 22px 16px; flex-wrap: wrap; }
#notebook { position: fixed; top: 64px; right: 0; bottom: 0; width: min(420px, 100vw); background: #F6F0E4; border-left: 1px solid var(--line); z-index: 25; overflow-y: auto; padding: 22px 22px 40px; box-shadow: -8px 0 24px rgba(15,30,51,.08); }
#notebook h2 { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: 22px; margin: 0 0 4px; }
#notebook .sub { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
#notebook h3 { font-size: 11.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gold); margin: 16px 0 6px; font-weight: 600; }
#notebook .line { font-family: var(--serif); font-size: 15px; color: var(--navy); padding: 6px 8px; margin: 0 -8px; border-radius: 6px; cursor: pointer; }
#notebook .line:hover { background: #FFFBF1; }
#notebook .line small { font-family: var(--sans); color: var(--muted); font-size: 12px; }
#notebook .lineact { font-size: 12.5px; margin: 0 0 6px; display: flex; gap: 12px; }
#notebook .close { position: absolute; right: 16px; top: 16px; }
.saw h3 { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: 17px; margin: 16px 0 4px; }
.saw .num { font-family: var(--serif); font-size: 20px; color: var(--gold); }
.saw p { margin: 2px 0 6px; }
.how { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.how .r { display: grid; grid-template-columns: 130px 1fr; gap: 10px; margin: 8px 0; font-size: 14px; }
.how .r b { font-family: var(--serif); color: var(--gold); font-weight: 600; }

/* ================================================================ v0.4: the Lens */
.msg.app { white-space: pre-wrap; }
.msg.app.streaming { opacity: .92; }
.carry { background: var(--navy); color: #F4EEDF; border-radius: 12px; padding: 12px 16px; margin: 14px 0; }
.carry .k { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gold-2); margin-bottom: 4px; }
.carry p { font-family: var(--serif); font-size: 17px; margin: 4px 0; color: #F4EEDF; }

/* ---------------------------------------------------------------- what you're taking away (v0.4.3) */
.modal.tkmodal { max-width: 680px; max-height: calc(100vh - 40px); overflow-y: auto; }
.tk .k { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.tk-kicker { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 10px; }
.tk-kicker span { color: var(--muted); font-weight: 400; letter-spacing: .4px; text-transform: none; font-size: 12px; }
.modal .tk-head { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.3; color: var(--navy); margin: 0 0 18px; text-wrap: balance; }
.tk q { font-family: var(--serif); font-style: italic; color: var(--ink); quotes: '“' '”'; }
.tk-shift { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 12px; }
.tk-shift q { display: block; margin-top: 4px; font-size: 16px; line-height: 1.4; }
.tk-arrow { font-family: var(--serif); font-size: 26px; color: var(--gold-2); padding-top: 14px; }
.tk-soft { display: block; margin-top: 4px; font-family: var(--serif); font-size: 16px; color: var(--navy); }
.tk-none { color: var(--muted); }
.tk-weight { display: flex; gap: 12px; align-items: baseline; margin: 0 0 12px; }
.tk-nums { font-family: var(--serif); color: var(--gold); white-space: nowrap; }
.tk-nums b { font-size: 21px; font-weight: 500; }
.tk-nums i { font-style: normal; margin: 0 6px; color: var(--gold-2); }
.tk-nums small { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-left: 8px; }
.tk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 4px; }
.tk-split.one { grid-template-columns: 1fr; }
.tk-split > div { border-radius: 12px; padding: 12px 14px; background: var(--ok-pale); }
.tk-split > div.added { background: var(--gold-pale); }
.tk-split ul { margin: 6px 0 0; padding-left: 18px; }
.tk-split li { margin: 3px 0; font-size: 14.5px; }
.tk-split .added li { font-family: var(--serif); font-style: italic; }
.tk-next { font-size: 14.5px; }
.tk-next .k { margin-right: 6px; }
.tk-how { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.tk-how h3 { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: 20px; margin: 0 0 2px; }
.tk-intro { font-size: 13px; color: var(--muted); }
.tk-step { display: grid; grid-template-columns: 132px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.tk-step:last-of-type { border-bottom: 0; }
.tk-l b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--gold-2); font-family: var(--serif); font-size: 16px; margin-right: 8px; }
.tk-l span { font-family: var(--serif); font-size: 14px; color: var(--navy); }
.tk-step.off .tk-l b { background: transparent; border: 1px solid var(--line); color: #B9AE98; }
.tk-step.off .tk-l span { color: #A79D88; }
.tk-b blockquote { margin: 0 0 4px; padding-left: 10px; border-left: 3px solid var(--gold-2); font-family: var(--serif); font-style: italic; font-size: 15.5px; color: var(--ink); }
.tk-b blockquote::before { content: '“'; } .tk-b blockquote::after { content: '”'; }
.tk-saw { font-size: 14.5px; color: var(--ink); margin: 0 0 4px !important; }
.tk-gen { font-size: 12px; color: #9A907C; font-style: italic; margin: 0 !important; }
.tk-gen span { font-style: normal; font-weight: 600; color: #A79D88; }
.tk-key { font-size: 12px; color: var(--muted); margin-top: 10px !important; }
.tk-key span { color: #9A907C; font-style: italic; }
.tk-credit { font-size: 12px; color: var(--muted); font-style: italic; }
.tk-loading { font-size: 13px; color: var(--gold); display: flex; align-items: center; gap: 8px; }
.tk-loading span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gold-pale); border-top-color: var(--gold); animation: tkspin 0.9s linear infinite; }
@keyframes tkspin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .tk-shift { grid-template-columns: 1fr; } .tk-arrow { transform: rotate(90deg); padding: 0; justify-self: start; }
  .tk-split { grid-template-columns: 1fr; } .tk-step { grid-template-columns: 1fr; gap: 4px; }
  .modal .tk-head { font-size: 22px; }
}

/* ---------------------------------------------------------------- exploring ideas (v0.5) */
#invite .ideas { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 10px 0 2px; font-size: 13.5px; color: var(--muted); }
#invite .ideas .link { background: none; border: 0; padding: 0; color: var(--gold); font-size: 13.5px; text-decoration: underline; text-decoration-color: var(--gold-pale); text-underline-offset: 3px; }
#invite .ideas .link:hover { text-decoration-color: var(--gold); }
.tk-shift.one { grid-template-columns: 1fr; }
.tk-ideas { margin-top: 18px; }
.tk-ideas h3 { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: 20px; margin: 0 0 8px; }
.tk-idea { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.tk-idea:last-child { border-bottom: 0; }
.tk-idea b { font-family: var(--serif); font-size: 16.5px; color: var(--navy); font-weight: 600; }
.tk-idea p { margin: 4px 0 0 !important; font-size: 14.5px; }
.tk-try .k { margin-right: 6px; }
.msg.app .mt { display: block; font-family: var(--serif); font-size: 23px; line-height: 1.3; color: var(--navy); font-weight: 500; margin: 2px 0 12px; }
.msg.app .mh { display: block; font-family: var(--serif); font-size: 17.5px; color: var(--navy); font-weight: 600; margin: 2px 0 4px; }
.chips.deeper button { border-color: var(--gold-2); color: var(--gold); }

/* ---------------------------------------------------------------- private conversations (v0.5) */
#privpill { margin-left: 12px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-2); border: 1px solid var(--gold-2); border-radius: 999px; padding: 2px 9px; }
#invite .privrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
#invite .priv { font-size: 14px; color: var(--navy); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
#invite .priv input { accent-color: var(--navy); width: 16px; height: 16px; }
#invite .privnote { font-size: 12.5px; color: var(--muted); flex: 1 1 260px; }
#invite .privrow .link { font-size: 13px; }
.privline { font-size: 12.5px; color: var(--muted); margin: 14px 0 0 !important; }
.carry .when { font-size: 14px; color: #D9CFB8; margin: 2px 0 8px; }
.carry .when i { font-family: var(--serif); color: #F4EEDF; }
.carry .ask-k { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-2); }

.tk-l .aria { display: block; margin: 4px 0 0 36px; font-style: normal; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.tk-step.off .tk-l .aria { color: #B9AE98; }
.tk-intro b { color: var(--gold); font-weight: 700; }
@media (max-width: 560px) { .tk-l .aria { display: inline; margin: 0 0 0 8px; } }
#notebook .line.ro { cursor: default; }
#notebook .line.ro:hover { background: none; }
#invite.closed h1 { margin-top: 40px; }

/* On touch screens there is no hovering: 'Mark this reply' sits in its own line under the reply, clear of any buttons below. */
@media (hover: none) {
  .msg.app .mark { position: static; display: block; opacity: 1; margin-top: 10px; padding: 4px 0; }
  .chips, .scale, .nextrow { margin-top: 14px; }
}


/* Save as PDF (CR-022): the A4 page the PDF is drawn from, laid out like the screen */
.printdoc { width: 794px; background: var(--paper); }
.printdoc .pd-bar { background: var(--navy); color: #fff; display: flex; align-items: baseline; justify-content: space-between; padding: 20px 56px; }
.printdoc .pd-brand { font-family: var(--serif); font-size: 24px; }
.printdoc .pd-meta { font-family: var(--sans); font-size: 12px; color: var(--gold-2); letter-spacing: .4px; }
.printdoc .pd-convo { padding: 30px 56px 10px; }
.printdoc .pd-convo .msg.app { max-width: none; }
.printdoc .pd-cardwrap { padding: 10px 56px 0; }
.printdoc .pd-card.modal { box-shadow: none; max-width: none; max-height: none; overflow: visible; padding: 26px 28px; border: 1px solid var(--line); }

/* Navigate Lightly: the strapline */
#invite p.strap, .codebox p.strap { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--gold); margin: 0 0 6px; }
.codebox p.strap { margin-top: 10px; }
.printdoc .pd-strap { display: block; font-family: var(--sans); font-size: 11.5px; font-style: italic; color: var(--gold-2); margin-top: 3px; letter-spacing: .2px; }
.tk-credit b { font-style: normal; color: var(--navy); font-weight: 600; }

/* voice */
.mic { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gold-2); background: #fff; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mic:hover { background: var(--gold-pale); }
.mic.live { background: #8E3B2E; border-color: #8E3B2E; color: #fff; animation: micpulse 1.4s ease-in-out infinite; }
@keyframes micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(142, 59, 46, .45); } 50% { box-shadow: 0 0 0 9px rgba(142, 59, 46, 0); } }
.beginrow { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.msg.app .listen { position: absolute; right: 14px; bottom: -18px; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.msg.app .listen:hover { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .mic.live { animation: none; } }

/* ---------------------------------------------------------------- brand: the squiggle
   From the Navigate Lightly poster: a tangle that resolves into a clear path towards a point of light. */
:root { --gold-3: #C9A464; --cream: #F5EFE6; --navy-deep: #0C1828; }
.sq { display: block; overflow: visible; }
.sq .sq-line { fill: none; stroke: var(--gold-3); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sq .sq-glow { fill: var(--gold-3); opacity: .2; }
.sq .sq-dot { fill: var(--cream); }
.sq.light .sq-line { stroke: var(--gold-2); }
.sq.light .sq-glow { fill: var(--gold-2); }
.sq.light .sq-dot { fill: var(--gold); }
.sq.draw .sq-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sqdraw 2.6s cubic-bezier(.5, .05, .3, 1) .25s forwards; }
.sq.draw .sq-dot { opacity: 0; animation: sqshow .7s ease-out 2.6s forwards; }
.sq.draw .sq-glow { opacity: 0; animation: sqglow 1.4s ease-out 2.6s forwards; }
@keyframes sqdraw { to { stroke-dashoffset: 0; } }
@keyframes sqshow { to { opacity: 1; } }
@keyframes sqglow { 0% { opacity: 0; } 40% { opacity: .45; } 100% { opacity: .2; } }
.sq.think .sq-line { stroke: var(--gold); stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sqthink 2.8s ease-in-out infinite; }
.sq.think .sq-dot { fill: var(--gold); opacity: 0; animation: sqthinkdot 2.8s ease-in-out infinite; }
.sq.think .sq-glow { fill: var(--gold-2); opacity: 0; animation: sqthinkglow 2.8s ease-in-out infinite; }
@keyframes sqthink { 0% { stroke-dashoffset: 1; opacity: 1; } 62% { stroke-dashoffset: 0; opacity: 1; } 88%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sqthinkdot { 0%, 58% { opacity: 0; } 66%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes sqthinkglow { 0%, 58% { opacity: 0; } 70% { opacity: .35; } 92%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sq.draw .sq-line, .sq.think .sq-line { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .sq.draw .sq-dot, .sq.think .sq-dot { animation: none; opacity: 1; }
  .sq.draw .sq-glow, .sq.think .sq-glow { animation: none; opacity: .2; }
}
#brand i { font-style: italic; color: var(--gold-3); }
.hero { background: var(--navy-deep); color: var(--cream); border-radius: 16px; padding: 26px 30px 26px; margin: 0 0 30px; }
.hero .eyebrow { font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold-3); }
.hero .wordmark { font-family: var(--serif); font-weight: 500; font-size: 48px; line-height: 1.1; margin: 10px 0 0; color: var(--cream); letter-spacing: -.3px; }
.hero .wordmark i { color: var(--gold-3); font-weight: 500; }
.hero .sq { width: 100%; max-width: 460px; height: auto; margin: 4px 0 6px -4px; }
#invite .hero .heroline, .codebox .hero .heroline { font-family: var(--serif); font-size: 21px; line-height: 1.4; margin: 0; color: var(--cream); }
#invite .hero .heroline i, .codebox .hero .heroline i { color: var(--gold-3); }
.typing.sqwait { border-left: 0; padding-left: 0; height: auto; letter-spacing: 0; }
.typing.sqwait .sq { width: 140px; height: 46px; }
.tk .tk-mark { width: 150px; height: auto; margin: 0 0 10px; }
.codebox .hero { margin-bottom: 24px; }
@media (max-width: 560px) {
  .hero { padding: 20px 20px 22px; border-radius: 12px; }
  .hero .wordmark { font-size: 36px; }
  #invite .hero .heroline, .codebox .hero .heroline { font-size: 18px; }
  }
#invite { margin-top: 4vh; }
#b-voice { display: inline-flex; align-items: center; gap: 6px; }
#b-voice.hidden { display: none !important; }
@media (max-width: 560px) { #b-voice .vtext { display: none; } #b-voice { padding: 6px 8px; } }

/* ---------------------------------------------------------------- Talk mode */
.talkbtn { flex: none; height: 48px; border-radius: 24px; border: 1px solid var(--gold-2); background: #fff; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-family: var(--sans); font-weight: 600; font-size: 14px; cursor: pointer; }
.talkbtn:hover { background: var(--gold-pale); }
.talkbtn.hidden { display: none; }
#talk { position: fixed; inset: 0; z-index: 60; background: var(--navy-deep); color: var(--cream); display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); }
#talk.hidden { display: none; }
body.talking { overflow: hidden; }
#talk .talk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#talk .talk-mark { font-family: var(--serif); font-size: 20px; } #talk .talk-mark i { color: var(--gold-3); }
#talk .talk-end { background: transparent; color: var(--cream); border: 1px solid rgba(245, 239, 230, .35); border-radius: 99px; padding: 8px 14px; font-family: var(--sans); font-size: 14px; }
#talk .talk-pad { flex: 1; margin: 18px 0 12px; width: 100%; border: 0; border-radius: 22px; background: rgba(245, 239, 230, .05); color: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer; }
#talk .talk-word { font-family: var(--serif); font-size: clamp(40px, 11vw, 64px); line-height: 1.05; }
#talk .talk-hint { font-family: var(--sans); font-size: 16px; opacity: .75; max-width: 30ch; text-align: center; }
#talk .talk-sq .sq { width: 200px; height: 66px; }
#talk .talk-sq .sq .sq-line { stroke: var(--gold-3); }
#talk:not([data-phase="thinking"]) .talk-sq { visibility: hidden; }
#talk[data-phase="listening"] .talk-pad { background: rgba(201, 164, 100, .12); box-shadow: inset 0 0 0 2px rgba(201, 164, 100, .45); }
#talk[data-phase="listening"] .talk-word { color: var(--gold-3); }
#talk[data-phase="tap"] .talk-pad { box-shadow: inset 0 0 0 2px rgba(245, 239, 230, .5); }
#talk .talk-text { min-height: 2.6em; max-height: 22vh; overflow: auto; font-family: var(--serif); font-size: 17px; line-height: 1.45; opacity: .8; text-align: center; }
.talkhow { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.talkhow summary { cursor: pointer; color: var(--navy); font-weight: 600; }
.talkhow ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.55; }
.talkhow li { margin: 3px 0; }
#talk .talk-btns { display: inline-flex; gap: 8px; }
#talk .talk-help { background: #B4442F; color: #fff; border: 0; border-radius: 99px; padding: 8px 14px; font-family: var(--sans); font-size: 14px; font-weight: 600; }
@media (max-width: 420px) { #talk .talk-mark { display: none; } }

/* ---------------------------------------------------------------- phones: Help now must always be on screen */
#helpnow { flex-shrink: 0; }
#brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  #b-notes .ncount { display: none; }
  #privpill { margin-left: 0; font-size: 10px; letter-spacing: .6px; padding: 2px 7px; flex-shrink: 0; }
}
@media (max-width: 460px) { body.inconv #brand { display: none; } }
@media (max-width: 380px) {
  #b-voice .vstate { display: none; }
  #b-voice { padding: 6px 7px; }
  #tools { gap: 4px; }
  .tb { padding: 5px 6px; }
  #helpnow { padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 340px) { #privpill { display: none !important; } }

/* help lines: tap a number to call or text it */
.route a.num { color: inherit; text-decoration: none; white-space: nowrap; }
.route a.num:hover { text-decoration: underline; }
.helpwhere { margin-top: 10px; color: var(--muted); }
@media (max-width: 460px) { body:not(.inconv) #b-notes { display: none; } }   /* phones: nothing in Notes before a conversation, and the wordmark needs the room */
.helpwhere select { margin-left: 4px; font: inherit; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--navy); }

/* ---------------------------------------------------------------- phones: nothing wider than the screen */
#main { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); }
@media (max-width: 900px) { #main { grid-template-columns: minmax(0, 1fr); } }
body.conv #main { grid-template-columns: minmax(0, 1fr); }
#convo, #messages, #composer { min-width: 0; }
#composer textarea { min-width: 0; }
.msg { overflow-wrap: anywhere; }
.chips { margin-left: 0; }
.chips button { max-width: 100%; white-space: normal; text-align: left; }
/* Talk offered at the top of the opening screen */
.talkbar { margin: 4px 0 18px; }
.talkgo { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; background: #fff; border: 1px solid var(--gold-2); border-radius: 14px; padding: 12px 16px; color: var(--navy); cursor: pointer; }
.talkgo:hover { background: var(--gold-pale); }
.talkgo-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--navy-deep); color: var(--gold-3); display: inline-flex; align-items: center; justify-content: center; }
.talkgo-t b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; }
.talkgo-t small { display: block; font-family: var(--sans); font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.talkbar .talkhow { margin-top: 8px; }

/* opening screen: the box, then Talk and Begin side by side */
#invite .ideas { margin: 6px 0 12px; }
#invite .privrow, #invite .resumeline { margin: 0 0 10px; }
#invite p.hint { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.beginline { display: flex; gap: 12px; align-items: stretch; margin-top: 12px; }
.beginline .primary { flex: none; padding: 0 30px; min-height: 48px; }
.beginline .talkgo { flex: 1; width: auto; padding: 8px 14px; gap: 12px; }
.beginline .talkgo-ic { width: 38px; height: 38px; }
.beginline .talkgo-t b { font-size: 17px; }
.beginline .talkgo-t small { font-size: 12.5px; }
.beginline .mic { align-self: center; }
#invite > .talkhow { margin-top: 10px; }
@media (max-width: 420px) { .beginline .talkgo-t small { display: none; } .beginline .primary { padding: 0 22px; } }

@media (max-width: 420px) { .beginline .primary { padding: 0 14px; } .beginline .talkgo { padding: 8px 10px; gap: 10px; } .beginline .talkgo-t b { font-size: 16px; } }
@media (max-width: 380px) { .beginline .talkgo-ic { display: none; } .beginline .talkgo { justify-content: center; text-align: center; } .beginline .talkgo-t b, .beginline .primary { font-size: 15px; } }

/* Panic or physical symptoms: the help numbers above the reply (the conversation carries on) */
.supportnote { max-width: 640px; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--help-pale); border-left: 3px solid var(--help); color: var(--ink); font-size: 14px; line-height: 1.5; }
.supportnote b { color: var(--help); font-weight: 600; }
.supportnote a { color: var(--help); font-weight: 600; white-space: nowrap; }
.supportnote .link { font-size: 13px; color: var(--help); }

/* About, and questions and answers */
.modal.infomodal { max-width: 680px; max-height: calc(100vh - 40px); overflow-y: auto; }
.info h3 { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: 19px; margin: 20px 0 6px; }
.info p, .info li { font-size: 15px; line-height: 1.6; }
.info ul { margin: 0 0 12px; padding-left: 20px; }
.info li { margin: 5px 0; }
.lightlist { margin: 4px 0 8px; }
.lightlist > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.lightlist > div:last-child { border-bottom: 0; }
.lightlist dt { font-family: var(--serif); color: var(--navy); font-size: 15px; }
.lightlist dt b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--gold-2); font-size: 15px; margin-right: 8px; }
.lightlist dd { margin: 0; font-size: 14.5px; }
.faq { border-bottom: 1px solid var(--line); padding: 2px 0; }
.faq summary { cursor: pointer; padding: 9px 0; font-size: 15px; color: var(--navy); font-weight: 500; }
.faq p { margin: 0 0 12px; font-size: 14.5px; color: var(--ink); }
@media (max-width: 560px) { .lightlist > div { grid-template-columns: 1fr; gap: 2px; } }
.msg.app .listen.on { color: var(--help); font-weight: 600; }
.codebox .err.calm { color: var(--navy); }
.info a { color: var(--gold); }
#talk .talk-fin { background: var(--gold-3, #C9A464); color: var(--navy-deep, #0F1E33); border: 0; border-radius: 99px; padding: 8px 14px; font-family: var(--sans); font-size: 14px; font-weight: 600; }
@media (max-width: 400px) { #talk .talk-btns { gap: 6px; } #talk .talk-help, #talk .talk-fin, #talk .talk-end { padding: 7px 10px; font-size: 13px; } }
/* Talk mode: the listening pad glows with the sound it hears, so the person can see they are being heard */
#talk[data-phase="listening"] .talk-pad { box-shadow: inset 0 0 0 calc(2px + 10px * var(--lvl, 0)) rgba(201, 164, 100, calc(.45 + .4 * var(--lvl, 0))); transition: box-shadow .12s linear; }
/* 'One moment' while the microphone gets ready; then 'Your turn' arrives with a gold flash as well as the tone */
#talk[data-phase="ready"] .talk-word { opacity: .7; }
#talk.turn[data-phase="listening"] .talk-pad { animation: yourturn .9s ease-out 1; }
@keyframes yourturn { 0% { background: rgba(201, 164, 100, .45); } 100% { background: rgba(201, 164, 100, .12); } }
@media (prefers-reduced-motion: reduce) { #talk.turn[data-phase="listening"] .talk-pad { animation: none; } }

/* Talk mode, 12 November evening: a smaller panel, so what is heard and what is being said have room below it
   and long replies scroll instead of disappearing off the screen. */
#talk .talk-pad { flex: 0 0 auto; height: clamp(150px, 30vh, 250px); margin: 14px 0 12px; gap: 10px; }
#talk .talk-word { font-size: clamp(32px, 9vw, 52px); }
#talk .talk-sq .sq { width: 160px; height: 52px; }
#talk .talk-text { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-size: 19px; line-height: 1.5; opacity: .9; text-align: left; padding: 4px 6px 8px; overscroll-behavior: contain; }
#talk .talk-text:empty { display: block; }
@media (max-height: 560px) { #talk .talk-pad { height: clamp(120px, 26vh, 180px); margin: 10px 0 8px; } }