/* BTG OS: the bay and desk app. Dark, big targets, one thumb. Tokens follow the website. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/fonts/inter-v20-latin-var.woff2") format("woff2")}
@font-face{font-family:"Saira";font-style:normal;font-weight:600;font-stretch:125%;font-display:swap;src:url("/assets/fonts/saira-v23-latin-600-expanded.woff2") format("woff2")}

:root{
  --bg:#0C0D10; --bg-2:#111317; --bg-3:#16181D; --fg:#F2F3F5; --soft:#D5D8DC; --muted:#A3A9B1; --dim:#8A9099;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
  --yellow:#FFCD00; --red:#DA291C; --lblue:#009CDE; --dblue:#0047BB; --kbar:#24272D;
  --good:#3DDC84; --warn:#FFCD00; --bad:#FF5A4E;
  --stripes:linear-gradient(90deg,var(--kbar) 0 16.66%,var(--yellow) 0 33.33%,var(--red) 0 50%,var(--lblue) 0 66.66%,var(--dblue) 0 83.33%,var(--red) 0);
  --display:"Saira",system-ui,sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px; --gut:16px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 var(--body);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
.display{font-family:var(--display);font-weight:600;font-stretch:125%;letter-spacing:.01em;text-transform:uppercase}
.muted{color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.error{color:var(--bad);margin:8px 0 0}
.row{display:flex;gap:10px;flex-wrap:wrap}

.btn{border:1px solid var(--line-2);background:var(--bg-3);border-radius:999px;padding:12px 20px;min-height:48px;font-weight:600}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn:active{transform:translateY(1px)}
.link{background:none;border:0;color:var(--lblue);padding:4px 0;font-weight:600}
.chip{border:1px solid var(--line-2);background:var(--bg-3);border-radius:999px;padding:8px 14px;min-height:40px;font-weight:600;white-space:nowrap}

/* Sign in */
.view{min-height:100%}
#view-login{display:grid;place-items:center;padding:var(--gut)}
.login-card{width:min(360px,100%);text-align:center}
.login-logo{width:220px;height:auto;margin:0 auto 12px}
.login-card h1{margin:0 0 4px;font-size:28px}
.login-card p{margin:0 0 20px}
.pin{display:block;width:100%;text-align:center;font-size:36px;letter-spacing:.4em;padding:14px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg-2);margin-bottom:14px}
.login-card .btn{width:100%}

/* Shell */
#view-main{display:flex;flex-direction:column;min-height:100dvh}
.top{position:sticky;top:0;z-index:5;background:rgba(12,13,16,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.stripes{height:5px;background:var(--stripes)}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gut)}
.top-logo{height:30px;width:auto;min-width:0;flex:0 1 auto}
.top-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.bay-pick{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px}
.bay-pick select{background:var(--bg-3);border:1px solid var(--line-2);border-radius:999px;padding:8px 10px;min-height:40px}

.main{flex:1;padding:14px var(--gut) 200px;display:flex;flex-direction:column;gap:14px;max-width:760px;width:100%;margin:0 auto}

.job{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.job-head{display:flex;justify-content:space-between;align-items:center}
.job-summary{margin:6px 0 0;font-size:17px;line-height:1.4}

.screen{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px}
.screen h2{margin:0 0 10px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}
.screen table{width:100%;border-collapse:collapse;font-size:15px}
.screen td,.screen th{padding:8px 6px;border-top:1px solid var(--line);vertical-align:top;text-align:left}
.screen th{color:var(--muted);font-weight:500;width:38%}
.screen .list{list-style:none;margin:0;padding:0}
.screen .list li{padding:10px 0;border-top:1px solid var(--line)}
.screen .list li:first-child{border-top:0}
.screen .list .sub{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.sev{display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--line-2);margin-right:8px;vertical-align:1px}
.sev.urgent{color:var(--bad);border-color:var(--bad)}
.sev.recommend{color:var(--warn);border-color:var(--warn)}
.sev.ok{color:var(--good);border-color:var(--good)}
.screen .pick{background:none;border:0;padding:0;text-align:left;width:100%;color:inherit}
.screen .pick:hover{color:var(--lblue)}
.photos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.photos img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line-2)}
.empty{color:var(--dim)}

.pending{background:rgba(255,205,0,.08);border:1px solid var(--yellow);border-radius:var(--r);padding:14px 16px}
.pending p{margin:6px 0 12px;font-size:17px}

.chat{display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;padding:10px 14px;border-radius:18px;line-height:1.4;scroll-margin-bottom:210px}
.msg.user{align-self:flex-end;background:var(--bg-3);border:1px solid var(--line-2);border-bottom-right-radius:6px}
.msg.user.voice::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px}
.msg.bot{align-self:flex-start;background:var(--fg);color:var(--bg);border-bottom-left-radius:6px}
.msg.err{align-self:center;color:var(--bad);background:none;border:1px solid var(--bad);font-size:14px}

/* Push to talk */
.talk{position:fixed;left:0;right:0;bottom:0;z-index:6;padding:12px var(--gut) calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(12,13,16,0),rgba(12,13,16,.96) 30%)}
.talk-row{display:flex;align-items:center;justify-content:center;gap:22px;max-width:760px;margin:0 auto}
.round{width:56px;height:56px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg-3);display:grid;place-items:center}
.ptt{position:relative;width:132px;height:132px;border-radius:50%;border:0;background:var(--red);color:#fff;font-weight:600;font-size:15px;box-shadow:0 10px 40px rgba(218,41,28,.35);user-select:none;-webkit-user-select:none;touch-action:none}
.ptt-ring{position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(218,41,28,.5);opacity:0;transition:opacity .2s}
.ptt.listening{background:#fff;color:var(--red)}
.ptt.listening .ptt-ring{opacity:1;animation:pulse 1.1s ease-out infinite}
.ptt.thinking{background:var(--kbar);color:var(--fg);box-shadow:none}
.ptt.thinking .ptt-ring{opacity:1;border-color:rgba(255,255,255,.35);animation:spin 1s linear infinite;border-top-color:#fff}
.ptt.speaking{background:var(--lblue);color:#fff;box-shadow:0 10px 40px rgba(0,156,222,.35)}
.ptt.speaking .ptt-ring{opacity:1;border-color:rgba(0,156,222,.5);animation:pulse 1.6s ease-out infinite}
.ptt.oncall::after{content:attr(data-hint);position:absolute;left:0;right:0;bottom:16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;font-weight:500}
.ptt.busy{background:var(--kbar);color:var(--muted);box-shadow:none}
@keyframes spin{to{transform:rotate(360deg)}}
.caption{text-align:center;margin:2px 0 0;min-height:1.3em;color:var(--soft);font-size:15px;font-style:italic}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.type{display:flex;gap:8px;max-width:760px;margin:10px auto 0}
.type input{flex:1;min-height:48px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-2);padding:0 16px}
.status{text-align:center;margin:8px 0 0;min-height:1.4em;color:var(--dim);font-size:14px}

/* Job picker */
dialog{background:var(--bg-2);color:var(--fg);border:1px solid var(--line-2);border-radius:var(--r);width:min(560px,calc(100% - 24px));max-height:80dvh;padding:0}
dialog::backdrop{background:rgba(0,0,0,.6)}
.jobs-head{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg-2)}
.jobs-head input{flex:1;min-height:44px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-3);padding:0 14px}
.jobs-list{list-style:none;margin:0;padding:6px 0}
.jobs-list button{display:block;width:100%;text-align:left;background:none;border:0;padding:12px 16px;border-top:1px solid var(--line);color:inherit;line-height:1.35}
.jobs-list button:hover{background:var(--bg-3)}
.jobs-list .st{display:inline-block;margin-top:4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

@media (min-width:760px){
  .main{padding-top:20px}
  .ptt{width:120px;height:120px}
}