/* ============================================================================
 * pi · remote — "PILOT DECK"
 * Mobile-first command console. Monospace chrome, sans body, chartreuse
 * signature accent, cyan secondary. Bottom-sheet modals, dock composer.
 * ========================================================================== */

:root {
  /* surfaces */
  --bg: #08090b; --bg-elev: #111317; --bg-sunk: #050607; --bg-soft: #15181d;
  --border: #20242b; --border-bright: #323841; --hair: #14171c;
  /* text */
  --text: #e9ebf0; --text-dim: #888f9c; --text-faint: #4f555f;
  /* accents */
  --accent: #ccff00; --accent-dim: #93b300; --accent-soft: rgba(204,255,0,0.09);
  --accent-2: #46e3ff; --accent-2-soft: rgba(70,227,255,0.10);
  --err: #ff5c5c; --warn: #ffb454; --ok: #4ade80; --tool: #46e3ff;
  /* safe areas */
  --safe-top: env(safe-area-inset-top, 0px); --safe-bot: env(safe-area-inset-bottom, 0px);
  /* fonts */
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* layout */
  --gutter: 14px;
  --tap: 44px;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.5 var(--sans);
  display: flex; flex-direction: column;
  overscroll-behavior: none; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative; overflow: hidden;
}

/* Atmosphere: faint technical grid + a single focused glow. No generic noise. */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(var(--hair) 1px, transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0/32px 100%,
    radial-gradient(720px 420px at 88% -8%, rgba(204,255,0,0.06), transparent 62%),
    radial-gradient(620px 380px at -8% 108%, rgba(70,227,255,0.05), transparent 60%);
  background-attachment: fixed;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
}

/* power-line: signature accent strip under the status bar */
body::after {
  content:""; position:fixed; top:0; left:0; right:0; height:2px; z-index:50; pointer-events:none;
  background: linear-gradient(90deg, transparent, var(--accent) 12%, var(--accent-2) 55%, transparent 92%);
  opacity:.65;
}

/* z layering */
header, #stream, footer, #widgetSlot { position: relative; }
header { z-index: 10; }
#stream, footer, #widgetSlot { z-index: 1; }
#gate, #toastHost, #modalHost { position: relative; z-index: 60; }

/* ============================================================================
 * HEADER — compact status strip
 * ========================================================================== */
header {
  padding: calc(8px + var(--safe-top)) var(--gutter) 10px;
  background: linear-gradient(180deg, rgba(17,19,23,.97), rgba(8,9,11,.82));
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.brand { display:flex; flex-direction:column; gap:6px; min-width:0; }
.wordmark {
  font-family: var(--mono); font-weight:600; font-size:12px; letter-spacing:.18em;
  color: var(--text); text-transform: lowercase;
  display:flex; align-items:center; gap:7px;
}
.wordmark::before {
  content:""; width:6px; height:6px; border-radius:1px; background: var(--accent);
  box-shadow: 0 0 10px rgba(204,255,0,.7);
}
.wordmark .pi-sym { color: var(--accent); font-size:14px; }

/* HUD = instrument readout */
.hud { display:flex; gap:6px; align-items:center; font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:.02em; flex-wrap:wrap; }
.hud .chip, .hud-extra .chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 9px; min-height:26px;
  border:1px solid var(--border); border-radius:7px;
  background: var(--bg-sunk);
  font-family: var(--mono); font-size:11px; font-variant-numeric: tabular-nums;
  white-space:nowrap; cursor:pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.hud .chip:active, .hud-extra .chip:active { transform: scale(.96); }
.hud .chip:hover, .hud-extra .chip:hover { border-color: var(--border-bright); background: color-mix(in srgb, var(--bg-sunk) 82%, var(--border)); }
.hud .chip .k, .hud-extra .chip .k { color: var(--text-faint); font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.hud .chip > span:not(.k):not(.signal), .hud-extra .chip > span:not(.k):not(.signal) { color: var(--text); font-weight:500; }
.hud-extra { display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-family:var(--mono); font-size:11px; }
.hud-extra .chip .sep { width:1px; height:11px; background:var(--border); margin:0 1px; flex:0 0 auto; }

.signal { width:7px; height:7px; border-radius:1px; background: var(--text-faint); flex-shrink:0; }
.signal.on { background: var(--accent); box-shadow:0 0 8px rgba(204,255,0,.8); }
.signal.busy { background: var(--warn); animation: blink .9s steps(2) infinite; }
.signal.off { background: var(--err); }
@keyframes blink { 50% { opacity:.25; } }

.icon-btn {
  background: transparent; border:1px solid var(--border); color: var(--text-dim);
  width: var(--tap); height: var(--tap); border-radius:9px;
  display:grid; place-items:center; cursor:pointer; transition:all .15s; position:relative; z-index:1;
}
.icon-btn:active { background: var(--border); color: var(--text); transform: scale(.95); }
.icon-btn svg { width:17px; height:17px; display:block; }

.menu-wrap { position:relative; }
.menu {
  position:fixed; top: calc(58px + var(--safe-top)); right: 12px;
  background: var(--bg-elev); border:1px solid var(--border-bright); border-radius:12px;
  padding:6px; min-width:210px;
  box-shadow: 0 18px 50px rgba(0,0,0,.65), 0 0 0 1px rgba(204,255,0,.04);
  display:none; z-index:100;
}
.menu.open { display:block; animation: menuIn .16s cubic-bezier(.2,.7,.3,1); }
@keyframes menuIn { from { opacity:0; transform: translateY(-6px); } }
.menu button {
  width:100%; text-align:left; background:transparent; border:0; color:var(--text);
  padding:12px 12px; border-radius:8px;
  font:500 14px/1 var(--sans); cursor:pointer;
  display:flex; gap:10px; align-items:center; min-height:42px;
}
.menu button:active { background: var(--bg-soft); }
.menu button.danger { color: var(--err); }
.menu hr { border:0; border-top:1px solid var(--border); margin:5px 4px; }
.menu .label { font-family:var(--mono); font-size:9px; color:var(--text-faint); letter-spacing:.14em; text-transform:uppercase; padding:8px 12px 4px; }

/* ============================================================================
 * STREAM
 * ========================================================================== */
#stream {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding: 18px var(--gutter) calc(22px + var(--safe-bot));
  display:flex; flex-direction:column; gap:14px;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}

.msg { max-width:100%; word-wrap:break-word; overflow-wrap:anywhere; animation: bubbleIn .22s cubic-bezier(.2,.7,.3,1); }
@keyframes bubbleIn { from { opacity:0; transform:translateY(6px); } }

.msg-label {
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--text-faint);
  margin-bottom:5px; text-transform:uppercase;
  display:flex; align-items:center; gap:6px;
}
.msg-label::before { content:""; width:8px; height:1px; background: var(--border-bright); }

/* user = outbound command (chartreuse-tinted, right aligned) */
.msg.user { align-self:flex-end; max-width:86%; }
.msg.user .msg-label { color: var(--accent-dim); justify-content:flex-end; }
.msg.user .msg-label::before { display:none; }
.msg.user .msg-label::after { content:""; width:8px; height:1px; background: var(--accent-dim); }
.msg.user .body {
  background: var(--accent-soft); border:1px solid rgba(204,255,0,.24);
  padding:11px 14px; border-radius: var(--radius) var(--radius) 4px var(--radius);
}

/* assistant = console output (elevated slab, left) */
.msg.assistant { align-self:flex-start; max-width:95%; }
.msg.assistant .body {
  background: var(--bg-elev); border:1px solid var(--border);
  padding:12px 14px; border-radius: var(--radius) var(--radius) var(--radius) 4px;
}

.msg .body { font-size:15px; }
.msg .body p { margin:0 0 8px; } .msg .body p:last-child { margin-bottom:0; }
.msg .body ul, .msg .body ol { margin:6px 0 8px; padding-left:20px; }
.msg .body li { margin:2px 0; }
.msg .body h1, .msg .body h2, .msg .body h3 { margin:12px 0 6px; line-height:1.25; font-weight:600; }
.msg .body h1 { font-size:18px; } .msg .body h2 { font-size:16.5px; } .msg .body h3 { font-size:15px; }
.msg .body table { border-collapse:collapse; margin:8px 0; font-size:13px; display:block; overflow-x:auto; }
.msg .body th, .msg .body td { border:1px solid var(--border); padding:6px 9px; text-align:left; }
.msg .body th { background: var(--bg-sunk); }
.msg .body blockquote { border-left:2px solid var(--accent-dim); padding-left:11px; color:var(--text-dim); margin:6px 0; }
.msg pre {
  margin:8px 0; padding:0; background:var(--bg-sunk); border-radius:9px; overflow:hidden;
  font:12.5px/1.55 var(--mono); border:1px solid var(--border); color:#d6dae0;
  -webkit-overflow-scrolling:touch; position:relative;
}
.msg pre code { display:block; padding:10px 12px; overflow-x:auto; }
code { font-family:var(--mono); font-size:.9em; }
.msg.user code, .msg.assistant code { background:var(--bg-sunk); padding:1px 5px; border-radius:4px; border:1px solid var(--border); }
pre code { background:none; border:0; padding:0; }
a { color: var(--accent-2); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent-2) 35%, transparent); }

/* ============================================================================
 * TOOL — collapsible console log (cyan accent)
 * ========================================================================== */
.tool {
  align-self:flex-start; max-width:95%;
  background: var(--bg-soft); border:1px solid var(--border); border-left:2px solid var(--tool);
  border-radius:9px; overflow:hidden; font-family:var(--mono); font-size:12px;
  animation: bubbleIn .2s ease-out;
}
.tool .t-head { display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer; min-height:42px; }
.tool .t-head::before { content:"▸"; color: var(--tool); font-size:11px; transition: transform .15s; }
.tool.open .t-head::before { transform: rotate(90deg); }
.tool .t-head .t-name { color:var(--tool); font-weight:600; letter-spacing:.01em; }
.tool .t-head .t-chev { display:none; }
.tool .t-body { display:none; padding:0 12px 10px; border-top:1px solid var(--border); }
.tool.open .t-body { display:block; }
.tool .t-args { color:var(--text-dim); white-space:pre-wrap; word-break:break-word; padding:8px 0; font-size:11.5px; }
.tool .t-out-label { font-size:9px; letter-spacing:.14em; color:var(--text-faint); text-transform:uppercase; margin:5px 0 3px; }
.tool pre { margin:0; background:var(--bg-sunk); border:1px solid var(--border); border-radius:6px; padding:8px 9px; font-size:11px; max-height:240px; overflow:auto; color:#aab0bc; }

/* TYPING */
.typing {
  align-self:flex-start; background:var(--bg-elev); border:1px solid var(--border);
  padding:14px 16px; border-radius: var(--radius) var(--radius) var(--radius) 4px;
  display:flex; gap:6px; align-items:center;
}
.typing .d { width:7px; height:7px; border-radius:50%; background:var(--accent); animation: bounce 1.2s infinite ease-in-out; box-shadow:0 0 6px rgba(204,255,0,.5); }
.typing .d:nth-child(2) { animation-delay:.18s; background: var(--text-dim); box-shadow:none; }
.typing .d:nth-child(3) { animation-delay:.36s; background: var(--text-dim); box-shadow:none; }
@keyframes bounce { 0%,70%,100% { transform:translateY(0); opacity:.5; } 35% { transform:translateY(-5px); opacity:1; } }

/* SYS */
.sys { align-self:center; color:var(--text-faint); font-size:11px; font-family:var(--mono); padding:4px 14px; letter-spacing:.04em; text-align:center; max-width:90%; }
.sys.err { color: var(--err); } .sys.ok { color: var(--ok); } .sys.warn { color: var(--warn); }

/* EMPTY */
.empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:40px 24px; text-align:center; color:var(--text-faint); }
.empty .glyph {
  font-family:var(--mono); font-size:34px; color:var(--accent);
  text-shadow:0 0 24px rgba(204,255,0,.45); animation: caret 1.1s steps(2) infinite;
  border:1px solid var(--border); width:64px; height:64px; border-radius:14px;
  display:grid; place-items:center; background: var(--bg-sunk);
}
@keyframes caret { 50% { opacity:.3; } }
.empty h2 { font:600 17px/1.3 var(--sans); color:var(--text-dim); }
.empty p { font-size:13.5px; line-height:1.55; max-width:280px; }
.empty .hint { font-family:var(--mono); font-size:11px; color:var(--text-faint); letter-spacing:.06em; margin-top:4px; }

/* ============================================================================
 * FOOTER — command dock
 * ========================================================================== */
footer {
  flex-shrink:0;
  background: linear-gradient(0deg, rgba(17,19,23,.98), rgba(8,9,11,.88));
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top:1px solid var(--border);
  padding:10px var(--gutter) calc(10px + var(--safe-bot));
}
.composer {
  display:flex; gap:8px; align-items:flex-end;
  background:var(--bg-sunk); border:1px solid var(--border); border-radius:16px;
  padding:7px 7px 7px 7px;
  transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within { border-color: var(--accent-dim); box-shadow:0 0 0 3px rgba(204,255,0,.08); }
.composer-addons { display:flex; gap:6px; align-items:center; flex-shrink:0; padding-left:5px; }
.composer-addons:empty { display:none; }
.composer-addon-btn {
  width: var(--tap); height: var(--tap); border-radius:11px;
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  display:grid; place-items:center; cursor:pointer; transition:all .15s;
}
.composer-addon-btn:active { background:var(--border); color:var(--text); border-color:var(--border-bright); transform:scale(.95); }
.composer-addon-btn.active { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-soft); }
.composer-addon-btn svg { width:18px; height:18px; display:block; }

textarea {
  flex:1; resize:none; background:transparent; color:var(--text); border:0;
  padding:9px 4px; font:15px/1.4 var(--sans); max-height:140px; min-height:26px;
}
textarea::placeholder { color: var(--text-faint); }
textarea:focus { outline:none; }

.send-btn {
  width: var(--tap); height: var(--tap); border-radius:13px; flex-shrink:0;
  background: var(--accent); color: var(--bg-sunk); border:0;
  display:grid; place-items:center; cursor:pointer;
  transition: transform .1s, opacity .15s, box-shadow .15s;
  box-shadow: 0 0 0 0 rgba(204,255,0,0);
}
.send-btn:active { transform: scale(.9); }
.send-btn:disabled { opacity:.35; cursor:not-allowed; }
.send-btn svg { width:18px; height:18px; display:block; }
.stop-btn {
  width: var(--tap); height: var(--tap); border-radius:13px; flex-shrink:0;
  background:transparent; color:var(--err); border:1px solid var(--err);
  display:grid; place-items:center; cursor:pointer;
}
.stop-btn:active { background: rgba(255,92,92,.14); transform: scale(.95); }
.stop-btn svg { width:14px; height:14px; display:block; }

/* ============================================================================
 * GATE
 * ========================================================================== */
#gate {
  position:fixed; inset:0; z-index:60;
  background:
    radial-gradient(800px 500px at 50% 26%, rgba(204,255,0,.07), transparent 60%),
    var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  padding: 36px 26px calc(36px + var(--safe-bot)); gap:0;
  max-width:480px; margin:0 auto;
}
.gate-logo {
  font-family:var(--mono); font-size:13px; letter-spacing:.2em; color:var(--accent);
  margin-bottom:10px; display:flex; align-items:center; gap:9px;
}
.gate-logo::before { content:""; width:7px; height:7px; border-radius:1px; background: var(--accent); box-shadow:0 0 12px rgba(204,255,0,.6); }
.gate-logo .pi-sym { font-size:20px; }
#gate h1 { font:700 27px/1.15 var(--sans); letter-spacing:-.015em; margin-bottom:10px; }
#gate .lead { color:var(--text-dim); font-size:14.5px; line-height:1.55; margin-bottom:26px; }
#gate .lead code { font-family:var(--mono); font-size:.92em; color: var(--accent-dim); }
#gate label { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--text-faint); text-transform:uppercase; margin-bottom:8px; }
#gate input {
  width:100%; background:var(--bg-sunk); border:1px solid var(--border); color:var(--text);
  border-radius:12px; padding:15px; font:15px var(--mono);
}
#gate input:focus { outline:none; border-color:var(--accent-dim); box-shadow:0 0 0 3px rgba(204,255,0,.1); }
.gate-actions { display:flex; gap:9px; margin-top:16px; }
.btn {
  border-radius:12px; padding:14px 18px; min-height: var(--tap);
  font:600 15px var(--sans); border:1px solid var(--border); background:var(--bg-elev); color:var(--text);
  cursor:pointer; flex:1;
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent); color: var(--bg-sunk); border-color: var(--accent); }
#gateMsg { color:var(--err); font-size:13px; min-height:1em; margin-top:14px; font-family:var(--mono); }
.hidden { display:none !important; }

/* ============================================================================
 * TOAST — thumb-friendly, top center
 * ========================================================================== */
#toastHost {
  position:fixed; top: calc(14px + var(--safe-top)); left:50%; transform:translateX(-50%);
  z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none; width:max-content; max-width:92vw;
}
.toast {
  background: var(--bg-elev); border:1px solid var(--border-bright); color:var(--text);
  padding:11px 16px; border-radius:11px; font-size:13.5px;
  box-shadow:0 10px 30px rgba(0,0,0,.55); animation:toastIn .25s cubic-bezier(.2,.7,.3,1); max-width:92vw;
}
.toast.warn { border-color: var(--warn); }
.toast.err { border-color: var(--err); color:var(--err); }
.toast.ok { border-color: var(--ok); }
.toast.leaving { animation: toastOut .25s ease-in forwards; }
@keyframes toastIn { from { opacity:0; transform: translateY(-12px); } }
@keyframes toastOut { to { opacity:0; transform: translateY(-12px); } }

/* ============================================================================
 * MODAL — bottom sheet on mobile (thumb-reachable)
 * ========================================================================== */
#modalHost {
  position:fixed; inset:0; z-index:90; display:none;
  background: rgba(4,5,7,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items:flex-end; justify-content:center; padding:0;
}
#modalHost.open { display:flex; animation: fade .18s; }
@keyframes fade { from { opacity:0; } }
.modal {
  background: var(--bg-elev); border:1px solid var(--border-bright); border-bottom:0;
  border-radius:18px 18px 0 0; padding: 8px 20px calc(20px + var(--safe-bot));
  width:100%; max-width:480px; max-height:86vh; overflow-y:auto;
  box-shadow: 0 -20px 60px rgba(0,0,0,.7);
  animation: sheetUp .26s cubic-bezier(.2,.7,.3,1);
}
.modal::before {
  content:""; display:block; width:38px; height:4px; border-radius:2px;
  background: var(--border-bright); margin: 4px auto 16px;
}
@keyframes sheetUp { from { opacity:0; transform: translateY(40px); } }
.modal h3 { font:600 18px/1.3 var(--sans); margin-bottom:6px; }
.modal .modal-msg { color:var(--text-dim); font-size:14px; line-height:1.5; margin-bottom:16px; white-space:pre-wrap; }
.modal .modal-msg:empty { display:none; }
.modal-actions { display:flex; gap:8px; flex-direction:column; }
.modal-btn {
  width:100%; padding:14px; min-height: var(--tap); border-radius:11px;
  font:600 15px var(--sans); border:1px solid var(--border); background:var(--bg-soft); color:var(--text);
  cursor:pointer; text-align:center;
}
.modal-btn:active { background:var(--border); transform: scale(.99); }
.modal-btn.primary { background:var(--accent); color:var(--bg-sunk); border-color:var(--accent); }
.modal-btn.danger { background:transparent; color:var(--err); border-color:var(--err); }
.modal-input {
  width:100%; background:var(--bg-sunk); border:1px solid var(--border); color:var(--text);
  border-radius:11px; padding:13px; font:15px var(--sans); margin-bottom:12px;
}
.modal-input:focus { outline:none; border-color: var(--accent-dim); }
.modal textarea.modal-input { font:14px/1.5 var(--mono); min-height:160px; resize:vertical; max-height:50vh; }

/* WIDGET SLOT */
#widgetSlot { flex-shrink:0; }
#widgetSlot:empty { display:none; }
.widget {
  background:var(--bg-soft); border:1px solid var(--border); border-left:2px solid var(--accent-dim);
  border-radius:9px; padding:9px 12px; margin:0 12px 6px;
  font-family:var(--mono); font-size:11.5px; color:var(--text-dim);
  white-space:pre; overflow-x:auto;
}
.widget .widget-title { font-size:9px; letter-spacing:.14em; color:var(--text-faint); text-transform:uppercase; margin-bottom:4px; }

/* ============================================================================
 * >= 720px: modali diventano centered (desktop-friendly), menu più compatto
 * ========================================================================== */
@media (min-width: 720px) {
  :root { --gutter: 22px; }
  #stream { padding-left: 22px; padding-right: 22px; }
  .msg.user { max-width:72%; }
  .msg.assistant, .tool { max-width:82%; }
  #modalHost { align-items:center; padding:20px; }
  .modal { border-radius:16px; border-bottom:1px solid var(--border-bright); padding:24px; max-width:440px; animation: modalIn .2s cubic-bezier(.2,.7,.3,1); }
  .modal::before { display:none; }
  @keyframes modalIn { from { opacity:0; transform: scale(.96) translateY(6px); } }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}