*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f172a; --bg2:#1e293b; --bg3:#334155;
  --text:#f1f5f9; --text2:#94a3b8;
  --accent:#38bdf8; --accent2:#0284c7;
  --green:#22c55e; --red:#ef4444;
  --radius:12px; --radius-sm:8px;
}
html,body{height:100%;overflow:hidden}
body{
  font-family:system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;
}
#app{display:flex;flex-direction:column;height:100dvh;max-width:480px;margin:0 auto;width:100%}

/* header */
header{
  padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--bg3);
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
header .dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex-shrink:0}
header h1{font-size:16px;font-weight:600}
header .sub{font-size:11px;color:var(--text2);margin-top:1px}

/* messages */
#messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px;
  scroll-behavior:smooth}
#messages::-webkit-scrollbar{width:4px}
#messages::-webkit-scrollbar-track{background:transparent}
#messages::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:4px}

.msg{max-width:88%;padding:10px 14px;border-radius:var(--radius);font-size:14px;line-height:1.5;
  animation:msgIn .2s ease-out;word-break:break-word}
.msg.mine{align-self:flex-end;background:var(--accent2);color:#fff;border-bottom-right-radius:4px}
.msg.theirs{align-self:flex-start;background:var(--bg2);border-bottom-left-radius:4px;color:var(--text)}
.msg .time{font-size:10px;color:var(--text2);margin-top:4px;text-align:right}
.msg.mine .time{color:rgba(255,255,255,.6)}
.msg-voice{display:flex;align-items:center;gap:8px;cursor:pointer}
.msg-voice .play{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s}
.msg-voice .play:active{transform:scale(.92)}
.msg-voice .play svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.msg-voice .bar{flex:1;height:4px;background:var(--bg3);border-radius:2px;position:relative;overflow:hidden}
.msg-voice .bar span{display:block;height:100%;background:var(--accent);border-radius:2px;width:0;transition:width .3s}
.msg-voice .dur{font-size:11px;color:var(--text2);min-width:32px;text-align:right}

.empty{text-align:center;color:var(--text2);font-size:13px;margin-top:40px;padding:0 24px}
.empty svg{width:48px;height:48px;fill:var(--bg3);margin-bottom:12px;opacity:.5}

/* input */
#input-area{
  padding:8px 12px 12px;background:var(--bg2);border-top:1px solid var(--bg3);
  display:flex;align-items:flex-end;gap:8px;flex-shrink:0
}
#input-area textarea{
  flex:1;resize:none;border:none;outline:none;background:var(--bg3);
  color:var(--text);font-size:14px;font-family:inherit;padding:10px 14px;
  border-radius:var(--radius);max-height:80px;line-height:1.4
}
#input-area textarea::placeholder{color:var(--text2)}
.btn{
  width:42px;height:42px;border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .15s,opacity .2s;background:var(--accent2)
}
.btn:active{transform:scale(.9)}
.btn:disabled{opacity:.4;pointer-events:none}
.btn svg{width:20px;height:20px;fill:#fff}
#btn-record{background:var(--bg3)}
#btn-record.recording{background:var(--red);animation:pulse 1s infinite}

/* recording overlay */
#rec-overlay{
  display:none;position:fixed;inset:0;background:rgba(15,23,42,.9);
  flex-direction:column;align-items:center;justify-content:center;gap:24px;z-index:100;
  backdrop-filter:blur(8px)
}
#rec-overlay.active{display:flex}
#rec-overlay .wave{
  width:120px;height:120px;border-radius:50%;background:var(--red);
  display:flex;align-items:center;justify-content:center;animation:pulse 1.2s infinite
}
#rec-overlay .wave svg{width:48px;height:48px;fill:#fff}
#rec-overlay .timer{font-size:48px;font-weight:200;font-variant-numeric:tabular-nums;letter-spacing:2px}
#rec-overlay .hint{font-size:13px;color:var(--text2)}
#rec-overlay .actions{display:flex;gap:40px;margin-top:12px}
#rec-overlay .actions button{
  width:56px;height:56px;border:none;border-radius:50%;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:transform .15s
}
#rec-overlay .actions button:active{transform:scale(.9)}
#rec-overlay .actions .cancel{background:var(--bg3)}
#rec-overlay .actions .cancel svg{fill:var(--text);width:24px;height:24px}
#rec-overlay .actions .send-rec{background:var(--green)}
#rec-overlay .actions .send-rec svg{fill:#fff;width:24px;height:24px}

/* spinner */
.spinner{width:20px;height:20px;border:2px solid var(--bg3);border-top-color:var(--accent);
  border-radius:50%;animation:spin .6s linear infinite;margin:20px auto}

@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes spin{to{transform:rotate(360deg)}}