/* Oswin phone app (F22) - theme "Command", phone sized. Same tokens as the laptop's Command Center. */
:root {
  --bg: #040912; --bg2: #071226; --panel: rgba(9, 20, 40, .86); --line: rgba(0, 212, 255, .22); --line-hi: rgba(0, 212, 255, .6);
  --text: #dcecff; --muted: #7f93b5; --dim: #4c5d7d; --accent: #00d4ff; --accent-2: #5ce1ff;
  --ok: #2ee6a6; --warn: #ffb547; --alert: #ff4d5e;
  --hud: "Bahnschrift", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  --ui: system-ui, "Segoe UI", Roboto, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
body[data-mode="listening"] { --accent: #2ee6a6; --accent-2: #7cf5cb; --line-hi: rgba(46, 230, 166, .7); }
body[data-mode="thinking"] { --accent: #ffb547; --accent-2: #ffd18a; --line-hi: rgba(255, 181, 71, .7); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: flex; flex-direction: column; color: var(--text); font: 15px/1.45 var(--ui);
  background: radial-gradient(700px 400px at 80% -10%, rgba(0, 140, 255, .18), transparent 60%), linear-gradient(180deg, var(--bg2), var(--bg));
  background-attachment: fixed; -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.top { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  border-bottom: 1px solid var(--line); background: rgba(4, 10, 22, .9); }
.mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 0 6px rgba(0, 212, 255, .5)); }
.brand { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.brand b { font: 600 16px/1.1 var(--hud); letter-spacing: .28em; color: var(--accent-2); }
.brand span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link { display: flex; align-items: center; gap: 6px; font: 600 10px var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--alert); }
.icon { background: none; border: 1px solid var(--line); border-radius: 50%; width: 38px; height: 38px; flex: none; }
.icon[aria-pressed="false"] { opacity: .45; }

main { flex: 1; min-height: 0; overflow-y: auto; }
.screen { padding: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); padding: 16px; border-radius: 4px; }
.card h1 { font: 600 16px var(--hud); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 10px; }
.card p { margin: 8px 0; }
.muted, .empty { color: var(--muted); font-size: 13px; }
.empty { text-align: center; padding: 30px 10px; }

#thread { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 92%; padding: 9px 12px; border: 1px solid var(--line); background: rgba(0, 212, 255, .04); border-radius: 3px; white-space: pre-wrap; word-break: break-word; }
.msg.me { align-self: flex-end; background: rgba(0, 212, 255, .1); border-color: var(--line-hi); }
.msg.sys { align-self: center; background: none; border-style: dashed; color: var(--muted); font-size: 13px; text-align: center; }
.msg.err { border-color: rgba(255, 77, 94, .6); color: #ffb3bb; }
.msg.pending::after { content: " ▍"; color: var(--accent); animation: blink 1s infinite; }
.msg .t { display: block; font: 10px var(--hud); letter-spacing: .12em; color: var(--dim); margin-top: 4px; text-transform: uppercase; }
@keyframes blink { 50% { opacity: 0; } }

#approvals { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.appr { border: 1px solid rgba(255, 181, 71, .65); background: rgba(255, 181, 71, .08); padding: 12px; border-radius: 4px; }
.appr .h { font: 600 12px var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--warn); }
.appr .s { margin: 6px 0; font-weight: 600; }
.appr .m { color: var(--muted); font-size: 12px; }
.appr details { margin-top: 6px; font-size: 12px; color: var(--muted); }
.appr pre { white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; background: rgba(0, 0, 0, .35); padding: 6px; border: 1px solid var(--line); }
.appr .acts { display: flex; gap: 10px; margin-top: 10px; }
.appr .acts button { flex: 1; padding: 12px; border-radius: 3px; font: 600 13px var(--hud); letter-spacing: .14em; text-transform: uppercase; }
.appr .yes { background: rgba(46, 230, 166, .15); border: 1px solid var(--ok); color: var(--ok); }
.appr .no { background: rgba(255, 77, 94, .12); border: 1px solid var(--alert); color: #ff9ea8; }

.bar { display: flex; gap: 8px; align-items: center; padding: 10px 12px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); background: rgba(3, 8, 18, .95); }
.bar input { flex: 1; min-width: 0; background: rgba(2, 8, 18, .9); border: 1px solid var(--line); padding: 12px; border-radius: 3px; outline: none; }
.bar input:focus { border-color: var(--line-hi); }
.mic { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-hi); flex: none; font-size: 20px;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .25), rgba(0, 212, 255, .25) 50%, rgba(0, 40, 70, .6)); }
body[data-mode="listening"] .mic { box-shadow: 0 0 18px var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(.92); } }
.send { padding: 12px 14px; border-radius: 3px; border: 1px solid var(--accent); background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #001018; font: 600 12px var(--hud); letter-spacing: .14em; text-transform: uppercase; }
.stopbtn { width: 46px; height: 46px; border-radius: 3px; border: 1px solid var(--alert); background: rgba(255, 77, 94, .15); color: #ff9ea8; flex: none; }
.toast { position: fixed; left: 14px; right: 14px; bottom: calc(86px + var(--safe-b)); padding: 10px 12px; background: rgba(14, 30, 58, .96); border: 1px solid var(--line-hi);
  border-radius: 3px; opacity: 0; transform: translateY(6px); transition: .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.tap { position: fixed; left: 50%; bottom: calc(90px + var(--safe-b)); transform: translateX(-50%); z-index: 5; padding: 14px 22px;
  border-radius: 28px; border: 1px solid var(--accent); background: rgba(0, 212, 255, .18); color: var(--accent-2);
  font: 600 13px var(--hud); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 0 18px rgba(0, 212, 255, .35); }