@font-face{font-family:'DM Sans';src:url(/fonts/dm-sans-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url(/fonts/dm-sans-latin-600-normal.woff2) format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:'DM Sans';src:url(/fonts/dm-sans-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
/* BrainStorm Tron theme: approved colours */
:root{
  --ground:#080C17; --panel:#0C1220; --field:#141D30; --midnight:#11192B; --line:#1F2A40;
  --frost:#ECF6FF; --dim:#8795B0; --ink:#06101C;
  --cyan:#45E9FF; --ice:#719FFF; --violet:#A66CFF; --lilac:#C9A8FF;
  --green:#39FF88; --mint:#68E6D0; --yellow:#FFE83D; --red:#FF2E4D;
  --body:'DM Sans', system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ground);color:var(--frost);font-family:var(--body);-webkit-text-size-adjust:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--cyan)}
#app{height:100dvh;display:flex;flex-direction:column;max-width:720px;margin:0 auto;background:var(--ground)}
.hidden{display:none!important}

/* Sign in: the big storm brain, full width */
.signin{flex:1;display:flex;flex-direction:column;align-items:center;padding:0 24px calc(22px + var(--safe-b));overflow:auto}
.hero{position:relative;width:calc(100% + 48px);max-width:720px;margin:0 -24px}
.hero .storm{display:block;width:100%;height:min(56dvh,560px);object-fit:cover;object-position:center 30%;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.hero .wordmark{display:block;width:min(94%,460px);height:auto;margin:-15% auto 0;position:relative;filter:drop-shadow(0 0 18px rgba(69,233,255,.35))}
.tagline{margin:4px 0 18px;font-size:15px;text-align:center;color:var(--frost)}
.form{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px}
label.field{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:700}
.input{height:50px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--field);font-size:16px;outline:none;color:var(--frost)}
.input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(69,233,255,.15)}
.code{letter-spacing:10px;text-align:center;font-size:24px}
.btn{min-height:50px;border-radius:12px;border:0;background:linear-gradient(90deg,var(--cyan),var(--ice));color:var(--ink);font-weight:700;font-size:15px;cursor:pointer;padding:0 18px;box-shadow:0 0 20px rgba(69,233,255,.4)}
.btn.ghost{background:transparent;border:1px solid var(--cyan);color:var(--cyan);box-shadow:none}
.btn.danger{background:transparent;border:1px solid var(--red);color:var(--red);box-shadow:none}
.btn.small{min-height:40px;font-size:14px;border-radius:10px}
.btn[disabled]{opacity:.5;cursor:default}
.note{color:var(--dim);font-size:12px;text-align:center}

/* Shell */
header.top{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--line)}
header.top .logo{width:40px;height:40px;border-radius:10px;display:block}
header.top .wm{height:36px;width:auto;display:block}
header.top .grow{flex:1}
header.top h1{flex:1;margin:0;font-size:20px;font-weight:700}
.iconbtn{width:44px;height:44px;border-radius:22px;border:1px solid var(--line);background:var(--panel);color:var(--frost);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.iconbtn.primary{background:var(--cyan);border:0;color:var(--ink);box-shadow:0 0 18px rgba(69,233,255,.45)}
.search{margin:14px 16px 4px;display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--dim)}
.search input{flex:1;background:transparent;border:0;outline:none;font-size:14px;color:var(--frost)}
main.list{flex:1;overflow:auto;padding:0 8px 12px}
.section{padding:16px 10px 6px;font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase}
.s-ann{color:var(--green)} .s-room{color:var(--cyan)} .s-dm{color:var(--lilac)} .s-req{color:var(--yellow)}
.row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;cursor:pointer;border:1px solid transparent;background:none;width:100%;text-align:left;color:var(--frost)}
.row:hover,.row:focus-visible{background:var(--panel);outline:none}
.row.unread{background:#142438;border-color:rgba(69,233,255,.45)}
.av{width:36px;height:36px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:var(--ink);flex:none;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.sq{border-radius:9px;background:var(--panel);border:1px solid var(--line);color:var(--cyan);font-size:16px}
.av.ann{border-radius:9px;background:var(--panel);border:1px solid var(--green);color:var(--green)}
.row .mid{flex:1;min-width:0}
.row .name{font-weight:700;font-size:15px;display:flex;justify-content:space-between;gap:8px}
.row .name small{font-weight:400;font-size:12px;color:var(--dim);flex:none}
.row .last{font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--cyan);color:var(--ink);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.empty{color:var(--dim);padding:24px 12px;text-align:center}
nav.tabs{display:flex;justify-content:space-around;padding:10px 8px calc(10px + var(--safe-b));border-top:1px solid var(--line);background:var(--panel)}
nav.tabs button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;min-height:44px;color:var(--dim);font-size:12px;cursor:pointer;position:relative}
nav.tabs button[aria-current="page"]{color:var(--cyan);font-weight:700}
nav.tabs .dot{position:absolute;top:0;right:14px;width:9px;height:9px;border-radius:5px;background:var(--yellow)}

/* Conversation */
header.conv{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line)}
header.conv .back{width:40px;height:40px}
header.conv .t{flex:1;min-width:0}
header.conv .t .n{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.conv .t .n .hash{color:var(--cyan)}
header.conv .t .s{font-size:12px;color:var(--dim)}
.msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:18px}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg .who b{font-weight:700;font-size:14px}
.msg .who small{font-size:11px;color:var(--dim);margin-left:6px}
.msg .body{font-size:14px;line-height:1.5;margin-top:2px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.removed .body{color:var(--dim);font-style:italic}
.sticker{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 3px;margin:0 2px;border-radius:999px;background:#160f2b;border:1px solid var(--violet);color:var(--lilac);font-weight:700;font-size:12px;letter-spacing:.5px;vertical-align:middle;box-shadow:0 0 10px rgba(166,108,255,.45)}
.sticker img{width:20px;height:20px;border-radius:10px;object-fit:cover}
.composer{display:flex;gap:8px;align-items:flex-end;padding:10px 12px calc(10px + var(--safe-b));border-top:1px solid var(--line);background:var(--panel)}
.composer textarea{flex:1;min-height:44px;max-height:140px;padding:11px 16px;border-radius:22px;border:1px solid var(--line);background:var(--field);outline:none;resize:none;font-size:14px;color:var(--frost)}
.composer textarea:focus{border-color:var(--cyan)}
.readonly{padding:14px 16px calc(14px + var(--safe-b));text-align:center;color:var(--dim);border-top:1px solid var(--line);font-size:13px;background:var(--panel)}

/* Sheets */
.sheet-back{position:fixed;inset:0;background:rgba(3,6,12,.72);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet{width:100%;max-width:720px;max-height:88dvh;overflow:auto;background:var(--ground);border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + var(--safe-b));box-shadow:0 -10px 40px rgba(69,233,255,.08)}
.sheet h2{margin:0 0 12px;font-size:20px;font-weight:700}
.pick{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:12px;cursor:pointer}
.pick input{width:22px;height:22px;accent-color:var(--cyan)}
.pick .meta{font-size:12px;color:var(--dim)}
.actions{display:flex;gap:10px;margin-top:14px}
.actions .btn{flex:1}
.req{border:1px solid var(--line);border-radius:14px;padding:12px;margin:8px 4px;background:var(--panel)}
.req .meta{color:var(--dim);font-size:13px;margin:4px 0 10px}
#toast{position:fixed;left:50%;bottom:calc(90px + var(--safe-b));transform:translateX(-50%);max-width:92vw;background:var(--panel);border:1px solid var(--cyan);color:var(--frost);padding:12px 16px;border-radius:12px;z-index:40;font-size:14px;box-shadow:0 0 18px rgba(69,233,255,.3)}
#toast.alert{border-color:var(--red);box-shadow:0 0 18px rgba(255,46,77,.35)}
@media (prefers-reduced-motion:no-preference){.btn,.row{transition:background .15s,border-color .15s}}

/* Phase 2: mentions, urgent, files */
.mention{color:var(--yellow);font-weight:700}
.mention.me{background:rgba(255,232,61,.12);border-radius:6px;padding:0 3px}
.badge.mention{background:var(--yellow);color:var(--ink)}
.row.urgent{border-color:rgba(255,46,77,.55);background:rgba(255,46,77,.07);box-shadow:0 0 16px rgba(255,46,77,.25)}
.pill-urgent{height:20px;padding:0 8px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;display:inline-flex;align-items:center}
.urgent{border:1px solid var(--red);border-radius:14px;padding:10px 12px;background:rgba(255,46,77,.08);box-shadow:0 0 16px rgba(255,46,77,.3)}
.urgent .ul{font-size:10px;font-weight:700;letter-spacing:1.6px;color:var(--red)}
.urgent .body{font-size:14px;line-height:1.45;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}
#urg.on{border-color:var(--red);color:var(--red);box-shadow:0 0 12px rgba(255,46,77,.45)}
.composer .iconbtn{width:40px;height:40px;background:var(--field)}
.composer .iconbtn.primary{width:44px;height:44px;background:var(--cyan)}
.photo{display:block;max-width:min(260px,100%);max-height:320px;border-radius:12px;margin-top:8px;border:1px solid var(--line)}
.filecard{display:flex;gap:10px;align-items:center;margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--frost);text-decoration:none;max-width:300px}
.filecard .ft{width:34px;height:34px;border-radius:7px;background:var(--cyan);color:var(--ink);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.filecard b{display:block;font-size:13px}.filecard small{font-size:11px;color:var(--dim)}

/* ---------- Themes: storm-dark (default), storm-light, jungle ---------- */
[data-theme="storm-light"]{
  /* Neon white: Apple whites and greys with mint neon. No black anywhere; deep green only for text. */
  --ground:#F4F8F9; --panel:#FDFDFC; --field:#E9F1F3; --midnight:#D8E9ED; --line:#C9D7DA;
  --frost:#03303A; --dim:#597073; --ink:#03303A;
  --cyan:#1D798A; --ice:#5EB2C2; --violet:#0B5D6D; --lilac:#55858E;
  --green:#1D798A; --mint:#5497A4; --yellow:#B98E00; --red:#D9334A;
}
[data-theme="storm-light"] .btn{background:linear-gradient(90deg,#87BDCA,#5EB2C2);color:#03303A;box-shadow:0 0 18px rgba(94,178,194,.55),0 4px 14px rgba(3,48,58,.08)}
[data-theme="storm-light"] .iconbtn.primary{background:#5EB2C2;color:#03303A;box-shadow:0 0 16px rgba(94,178,194,.6)}
[data-theme="storm-light"] .badge{background:#5EB2C2;color:#03303A}
[data-theme="storm-light"] .search,[data-theme="storm-light"] .row.unread,[data-theme="storm-light"] .req,[data-theme="storm-light"] .filecard{box-shadow:0 1px 2px rgba(3,48,58,.05),inset 0 1px 0 #fff}
[data-theme="storm-light"] .row.unread{background:#FFFFFF;border-color:#5EB2C2;box-shadow:0 0 0 1px rgba(94,178,194,.35),0 0 14px rgba(94,178,194,.35)}
[data-theme="storm-light"] .input:focus,[data-theme="storm-light"] .composer textarea:focus{border-color:#5EB2C2;box-shadow:0 0 0 3px rgba(94,178,194,.25)}
[data-theme="storm-light"] nav.tabs{background:linear-gradient(#FFFFFF,#F4F8F9);border-top:1px solid #C9D7DA}
[data-theme="storm-light"] nav.tabs button[aria-current="page"]{color:#1D798A;text-shadow:0 0 10px rgba(94,178,194,.55)}
[data-theme="storm-light"] .composer{background:linear-gradient(#FFFFFF,#F4F8F9)}
[data-theme="storm-light"] header.top{background:linear-gradient(180deg,#FFFFFF,#D8E9ED);border-bottom-color:transparent;box-shadow:inset 0 -2px 0 #5EB2C2,0 0 18px rgba(94,178,194,.35)}
[data-theme="storm-light"] header.top h1{color:#03303A}
[data-theme="storm-light"] header.top .logo{box-shadow:0 0 0 1px #C9D7DA,0 0 12px rgba(94,178,194,.35)}
[data-theme="storm-light"] header.conv{background:#FFFFFF;box-shadow:inset 0 -2px 0 rgba(94,178,194,.6)}
[data-theme="storm-light"] .hero .wordmark{filter:drop-shadow(0 0 6px rgba(94,178,194,.35))}
[data-theme="storm-light"] .hero{border-bottom:3px solid #5EB2C2;box-shadow:0 6px 18px -8px rgba(94,178,194,.6)}
[data-theme="jungle"]{
  --ground:#F4EADB; --panel:#FFF9EF; --field:#FBF2E4; --midnight:#1F3D2B; --line:#E0CBAA;
  --frost:#1E2B22; --dim:#6B5E4A; --ink:#FFFFFF;
  --cyan:#13867A; --ice:#2F7D4F; --violet:#7E57C2; --lilac:#7E57C2;
  --green:#2E7D32; --mint:#13867A; --yellow:#B7791F; --red:#D7263D;
  --wood:#C9A27A;
}
/* Headers stay dark on the light themes so the neon lettering still glows */
[data-theme="jungle"] header.top{background:var(--midnight);border-bottom-color:transparent}
[data-theme="jungle"] header.top h1{color:#ECF6FF}
[data-theme="jungle"] header.top{background:linear-gradient(90deg,#1F3D2B,#2B5236);box-shadow:inset 0 -3px 0 var(--wood)}
[data-theme="jungle"] .iconbtn.primary{color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18)}
[data-theme="jungle"] .btn{color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.15)}
[data-theme="jungle"] .btn{background:linear-gradient(90deg,#2E7D32,#13867A)}
[data-theme="storm-light"] .btn.ghost,[data-theme="jungle"] .btn.ghost{background:transparent;color:var(--cyan);box-shadow:none}
[data-theme="storm-light"] .btn.danger,[data-theme="jungle"] .btn.danger{background:transparent;color:var(--red);box-shadow:none}
[data-theme="jungle"] .badge{color:#fff}
[data-theme="jungle"] .row.unread{background:#EAF3E3;border-color:#A9C99A}
[data-theme="storm-light"] .row:hover,[data-theme="jungle"] .row:hover{background:var(--field)}
[data-theme="storm-light"] .row.urgent,[data-theme="jungle"] .row.urgent{background:#FDECEE;box-shadow:none}
[data-theme="storm-light"] .urgent,[data-theme="jungle"] .urgent{background:#FDECEE;box-shadow:none}
[data-theme="storm-light"] .sticker{background:#E2F1F4;box-shadow:none}
[data-theme="jungle"] .sticker{background:#F1EBFD;box-shadow:none}
[data-theme="storm-light"] .mention.me,[data-theme="jungle"] .mention.me{background:#FFF4CC}
[data-theme="storm-light"] .av.sq,[data-theme="jungle"] .av.sq{background:var(--field)}
[data-theme="jungle"] .av.sq{border-color:var(--wood)}
[data-theme="storm-light"] .av.ann,[data-theme="jungle"] .av.ann{background:var(--field)}
[data-theme="storm-light"] #toast{box-shadow:0 6px 20px rgba(3,48,58,.15)}
[data-theme="jungle"] #toast{box-shadow:0 6px 20px rgba(0,0,0,.15)}
[data-theme="storm-light"] nav.tabs{box-shadow:0 -2px 10px rgba(3,48,58,.05)}
[data-theme="jungle"] nav.tabs{box-shadow:0 -2px 10px rgba(0,0,0,.04)}
[data-theme="jungle"] nav.tabs{border-top:3px solid var(--wood)}
[data-theme="jungle"] .composer{border-top:3px solid var(--wood)}
[data-theme="jungle"] .req,[data-theme="jungle"] .filecard{border-color:var(--wood)}
[data-theme="jungle"] main.list,[data-theme="jungle"] .msgs{background-image:repeating-linear-gradient(90deg,rgba(201,162,122,.10) 0 2px,transparent 2px 120px)}
/* Sign-in on light themes: same full-width picture and size as Storm; the lettering sits on the picture so it still glows */
[data-theme="storm-light"] .hero .storm,[data-theme="jungle"] .hero .storm{-webkit-mask-image:none;mask-image:none}
[data-theme="storm-light"] .hero .wordmark,[data-theme="jungle"] .hero .wordmark{position:absolute;left:0;right:0;bottom:12px;margin:0 auto}
[data-theme="jungle"] .hero{border-bottom:4px solid var(--wood)}
[data-theme="storm-light"] .tagline,[data-theme="jungle"] .tagline{margin-top:14px}
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.themes button{border:2px solid var(--line);border-radius:14px;padding:0 0 8px;background:var(--panel);cursor:pointer;overflow:hidden;color:var(--frost);font-size:13px;font-weight:700}
.themes button[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(69,233,255,.2)}
.themes .sw{height:64px;margin-bottom:8px;display:flex}
.themes .sw span{flex:1}