:root { --bg:#111827; --panel:#1f2937; --fg:#f9fafb; --muted:#9ca3af; --accent:#22c55e; --warn:#f59e0b; }
* { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--fg); font-size:16px;
  font-family: system-ui, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
  display:flex; flex-direction:column; min-height:100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#bar { display:flex; gap:12px; align-items:center; padding:10px 14px; background:var(--panel); font-size:14px; }
#pending { color:var(--warn); font-weight:700; margin-left:auto; }
#count { color:var(--muted); }
.hidden { display:none !important; }
main { flex:1; display:flex; flex-direction:column; padding:12px; gap:10px; min-height:0; }
#input {
  width:100%; min-height:28vh; resize:vertical; padding:14px; border-radius:12px;
  border:1px solid #374151; background:var(--panel); color:var(--fg); font-size:17px; line-height:1.6;
}
#actions, #editActions { display:flex; gap:10px; }
button { flex:1; padding:16px; font-size:17px; border:0; border-radius:12px; background:#374151; color:var(--fg); }
button.primary { background:var(--accent); color:#04180c; font-weight:700; }
button.danger { background:#dc2626; }
button:disabled { opacity:.5; }
#mic.recording { background:#dc2626; }
#input.editing { border-color:var(--warn); }
#list li.editing { background:#374151; }
#list { list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; min-height:0; }
#list li { padding:12px; border-bottom:1px solid #374151; display:flex; gap:8px; align-items:baseline; }
#list .time { color:var(--muted); font-size:13px; flex-shrink:0; }
#list .text { flex:1; white-space:pre-wrap; overflow-wrap:anywhere; }
#list li.unsent .time::after { content:" ⏳"; color:var(--warn); }
footer { padding:10px 12px; }
dialog { background:var(--panel); color:var(--fg); border:0; border-radius:12px; padding:20px; }
dialog input { width:100%; padding:12px; margin:10px 0; font-size:16px; }