:root { --bg: #f6f1ea; --panel: #fff; --ink: #2b2623; --soft: #7b716a; --line: #e7dfd5; --me: #2f6f5e; --him: #fff; --accent: #e08a3c; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #15181c; --panel: #1d2127; --ink: #ece7e1; --soft: #9a948d; --line: #2c323a; --me: #3a8a74; --him: #232830; }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; }
header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
.orb { width: 42px; height: 42px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff8 0, transparent 40%), var(--accent);
       animation: breathe 4s ease-in-out infinite; }
.orb.off { filter: grayscale(1); opacity: .5; animation: none; }
.orb.thinking { animation: pulse .9s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.05); } }
@keyframes pulse { 50% { transform: scale(1.12); } }
.who { flex: 1; min-width: 0; } .who b { font-size: 1.1rem; } .who small { display: block; color: var(--soft); }
.icon-btn { background: none; border: 0; font-size: 1.2rem; padding: 8px; border-radius: 10px; cursor: pointer; color: var(--ink); opacity: .75; }
.icon-btn:hover { opacity: 1; background: var(--line); }
#login { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; }
#loginForm { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
#loginForm h1 { margin: 0; } #loginForm p { margin: 0; color: var(--soft); }
#loginForm input, #loginForm button { font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
#loginForm button { background: var(--accent); color: #fff; border: 0; cursor: pointer; }
.err { color: #c0392b !important; min-height: 1.2em; }
#feed { flex: 1; overflow-y: auto; padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 18px; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.msg.joshua { align-self: flex-start; background: var(--him); border-bottom-left-radius: 6px; }
.msg.user { align-self: flex-end; background: var(--me); color: #fff; border-bottom-right-radius: 6px; }
.msg .time { display: block; font-size: .7rem; opacity: .55; margin-top: 4px; }
.msg.wait { color: var(--soft); font-style: italic; }
.msg .pic { display: block; max-width: 100%; border-radius: 12px; margin-top: 8px; cursor: zoom-in; }
.msg .tracks { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.msg .track { text-align: left; font: inherit; font-size: .9rem; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
              background: color-mix(in srgb, var(--line) 50%, transparent); color: var(--ink); cursor: pointer; white-space: normal; }
.msg .track.on { border-color: var(--accent); }
.note { margin: 0 14px 8px; padding: 10px 12px; border-radius: 12px; background: var(--panel); color: var(--soft); font-size: .85rem; border: 1px solid var(--line); }
#sendForm { display: flex; align-items: flex-end; gap: 8px; padding: 8px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
textarea { flex: 1; resize: none; max-height: 140px; padding: 11px 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; outline: none; }
#send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 1.2rem; cursor: pointer; flex: none; }
#send:disabled { opacity: .45; }
[hidden] { display: none !important; }