:root{color-scheme:light dark;--bg:#f4f6f4;--panel:#fff;--ink:#12201a;--muted:#617067;--accent:#08795b;--line:#d5ddd8;--safe:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root{--bg:#0d1210;--panel:#151d19;--ink:#edf6f0;--muted:#9aaba1;--accent:#4bd6a8;--line:#29372f}}
:root[data-theme=light]{color-scheme:light;--bg:#f4f6f4;--panel:#fff;--ink:#12201a;--muted:#617067;--accent:#08795b;--line:#d5ddd8}
:root[data-theme=dark]{color-scheme:dark;--bg:#0d1210;--panel:#151d19;--ink:#edf6f0;--muted:#9aaba1;--accent:#4bd6a8;--line:#29372f}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,sans-serif}button,input{font:inherit}button{color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:12px;min-height:44px}header{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px)}h1,h2{margin:.1rem 0}small,p{color:var(--muted)}main{max-width:760px;margin:auto;padding:8px 14px 160px}.pairing{min-height:100vh;display:grid;place-items:center;padding:20px}.pairing>.card{max-width:540px}.pairing code{overflow-wrap:anywhere}.surface{display:none}.surface.active{display:block}.cards{display:grid;gap:10px;margin-top:12px}.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px}.badge{display:inline-block;padding:3px 8px;border-radius:99px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-size:.8rem}.chat-log{min-height:42vh}.drawer{position:fixed;z-index:7;inset:0 0 0 auto;width:min(92vw,520px);padding:18px;background:var(--panel);transform:translateX(105%);transition:.2s;overflow:auto}.drawer.open{transform:none}#composer{position:fixed;z-index:5;left:8px;right:8px;bottom:calc(63px + var(--safe));display:flex;gap:6px;max-width:744px;margin:auto;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:18px}#composer input{min-width:0;flex:1;border:0;background:transparent;color:inherit}nav{position:fixed;z-index:4;left:0;right:0;bottom:0;display:flex;gap:4px;padding:7px 7px calc(7px + var(--safe));overflow-x:auto;background:var(--panel);border-top:1px solid var(--line)}nav button{flex:1;min-width:66px;border:0;font-size:.76rem}nav button.selected{color:var(--accent);font-weight:700}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-width:800px){nav{left:50%;transform:translateX(-50%);max-width:760px;border:1px solid var(--line);border-radius:18px 18px 0 0}}

/* SOFIA Mobile UI V1 */
body{background:radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--accent) 10%,var(--bg)),var(--bg) 38%);min-height:100dvh}
header{border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.chat-log{display:flex;flex-direction:column;gap:10px;padding-top:10px}.chat-log .card{box-shadow:0 8px 30px color-mix(in srgb,#000 7%,transparent)}
.welcome{display:flex;gap:12px;align-items:center;margin:18px 2px 26px}.welcome p{margin:.25rem 0}.orb{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:50%;font-weight:800;color:#07110d;background:linear-gradient(135deg,#66e6bd,#25a982);box-shadow:0 0 30px color-mix(in srgb,var(--accent) 35%,transparent)}
#composer{box-shadow:0 12px 40px color-mix(in srgb,#000 18%,transparent);border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}#composer button:last-child{padding:0 16px;background:var(--accent);color:#06110d;border-color:transparent;font-weight:750}
@media(max-width:560px){main{padding-left:10px;padding-right:10px}header{padding-top:calc(10px + env(safe-area-inset-top,0px))}.chat-log{min-height:56vh}}