:root{color-scheme:dark; --bg:#1d1f24; --fg:#e8e6e3; --dim:#9a9ea8; --acc:#7cc4ff; --card:#272a31}
[hidden]{display:none !important}
*{box-sizing:border-box}
html,body{margin:0; height:100%; background:var(--bg); color:var(--fg); font:16px/1.45 -apple-system, system-ui, sans-serif}
body{display:flex; flex-direction:column}
header{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; padding-top:max(12px, env(safe-area-inset-top))}
#dot{width:10px; height:10px; border-radius:50%; background:#c55}
#dot.ok{background:#4c8}
main{flex:1; overflow:auto; padding:0 14px 14px}
.card{background:var(--card); border-radius:12px; padding:14px 16px; margin:8px 0}
.dim{color:var(--dim); font-size:14px}
.sas{font:600 40px/1.2 ui-monospace, monospace; letter-spacing:.14em; text-align:center; color:var(--acc); margin:10px 0}
input,textarea{width:100%; font:inherit; color:var(--fg); background:#15171b; border:1px solid #3a3e47; border-radius:10px; padding:10px}
button{font:inherit; border:0; border-radius:10px; padding:10px 16px; margin-top:8px; background:#3a3e47; color:var(--fg)}
button.primary{background:var(--acc); color:#08121c; font-weight:600}
#log .m{margin:8px 0; padding:9px 12px; border-radius:12px; max-width:88%; white-space:pre-wrap; word-wrap:break-word}
#log .me{background:#2f4d66; margin-left:auto}
#log .ai{background:var(--card)}
#log .note{color:var(--dim); font-size:14px; text-align:center}
#log .ask{border:1px solid #6b5a2a}
footer{display:flex; gap:8px; align-items:flex-end; padding:8px 12px; padding-bottom:max(8px, env(safe-area-inset-bottom)); border-top:1px solid #30333a}
footer textarea{flex:1; resize:none; max-height:30vh}
footer button{margin:0}