:root{
  --primary:#00a7b7; --primary-dark:#008a99; --primary-soft:#e0f7f9;
  --ink:#1a2327; --muted:#5b6b70; --line:#dce6e8; --bg:#eef4f5;
  --bot:#ffffff; --user:#e0f7f9;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);display:flex;justify-content:center;
}
.app{
  width:100%;max-width:560px;height:100dvh;display:flex;flex-direction:column;
  background:var(--bg);box-shadow:0 0 24px rgba(0,0,0,.08);
}
header{
  background:linear-gradient(135deg,#00a7b7 0%,#008a99 100%);color:#fff;
  padding:14px 18px;display:flex;align-items:center;gap:12px;flex:none;
}
header img{height:30px}
header .ttl{font-weight:700;font-size:16px;line-height:1.2}
header .sub{font-size:12px;opacity:.9}
header .badge{margin-left:auto;font-size:10px;background:rgba(255,255,255,.2);
  padding:3px 8px;border-radius:10px}

#messages{flex:1;overflow-y:auto;padding:18px 14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:82%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45;
  white-space:pre-wrap;word-wrap:break-word;animation:pop .18s ease}
.msg.bot{background:var(--bot);align-self:flex-start;border-bottom-left-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.06)}
.msg.user{background:var(--user);align-self:flex-end;border-bottom-right-radius:4px;color:#063b41}
.msg b{font-weight:700}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.typing{align-self:flex-start;background:var(--bot);padding:12px 16px;border-radius:16px;
  border-bottom-left-radius:4px;display:none;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.typing.show{display:flex;gap:4px}
.typing span{width:7px;height:7px;background:#9bb4b8;border-radius:50%;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

.composer{flex:none;display:flex;gap:8px;padding:10px;background:#fff;border-top:1px solid var(--line)}
.composer textarea{
  flex:1;resize:none;border:1px solid var(--line);border-radius:20px;padding:10px 14px;
  font-size:15px;font-family:inherit;max-height:120px;outline:none;line-height:1.4}
.composer textarea:focus{border-color:var(--primary)}
.composer button{
  flex:none;width:46px;height:46px;border:none;border-radius:50%;cursor:pointer;
  background:var(--primary);color:#fff;font-size:20px;display:grid;place-items:center}
.composer button:hover{background:var(--primary-dark)}
.composer button:disabled{opacity:.45;cursor:not-allowed}

.done-note{align-self:center;text-align:center;color:var(--muted);font-size:12px;padding:8px 16px}
.footer-mini{flex:none;text-align:center;font-size:10px;color:var(--muted);padding:4px 8px;background:#fff}