body.chat-page{display:flex;flex-direction:column;background:var(--bg,#f4f3ef);color:var(--ink,#0f172a)}
.chat-app{
  flex:1;
  height:auto;
  min-height:0;
  max-width:880px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  background:var(--bg,#f4f3ef);
  color:var(--ink,#0f172a);
}
.chat-head{
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-bottom:1px solid var(--line,#e2e8f0);
  background:var(--paper,#fff);
}
.chat-head-copy{min-width:0;flex:1}
.chat-head h1{margin:0;font-size:1.15rem;line-height:1.2}
.chat-status{margin:2px 0 0;color:var(--muted,#334155);font-size:.9rem}
.chat-head-actions{display:flex;gap:6px;flex:none}
.chat-tool,.chat-menu button,.who-panel .aim-icons button,#aimUhoh{
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--line,#e2e8f0);
  border-radius:12px !important;
  background:var(--paper,#fff);
  color:var(--ink,#0f172a);
  font:700 .9rem -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;
}
.chat-menu{
  flex:none;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:8px 12px;
  background:var(--paper,#fff);
  border-bottom:1px solid var(--line,#e2e8f0);
}
.chat-menu[hidden]{display:none}
.who-panel{
  flex:none;
  max-height:46dvh;
  overflow:auto;
  padding:10px 12px 12px;
  background:var(--paper,#fff);
  border-bottom:1px solid var(--line,#e2e8f0);
  color:var(--ink,#0f172a);
}
.who-panel[hidden]{display:none}
.who-panel h2{margin:0 0 8px;font-size:1rem}
.who-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.who-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px !important;
  background:var(--chip,#f1f5f9);
  color:var(--ink,#0f172a);
  overflow-wrap:anywhere;
}
.away-field{display:flex;flex-direction:column;gap:4px;font-weight:700;margin:0 0 8px}
.away-field textarea{
  width:100%;
  min-height:64px;
  font-size:16px;
  padding:8px 10px;
  border:1px solid var(--line,#e2e8f0);
  border-radius:12px !important;
  background:var(--bg,#f4f3ef);
  color:var(--ink,#0f172a);
  resize:vertical;
}
.aim-icons{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.aim-icons button[aria-pressed="true"]{background:var(--accent,#0f172a)!important;color:var(--accent-ink,#fff)!important;border-color:var(--accent,#0f172a)!important}
.chat-body{flex:1;min-height:0;display:flex;flex-direction:column}
.chat-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.chat-log{
  flex:1;
  min-height:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  -webkit-overflow-scrolling:touch;
}
.chat-empty{margin:auto;color:var(--ink,#f8fafc);text-align:center;font-weight:650}
html[data-theme="dark"] .chat-empty,html[data-theme="harbor"] .chat-empty{color:#f8fafc !important}
.bubble{
  max-width:min(82%,440px);
  align-self:flex-start;
  background:var(--chip,#f1f5f9);
  color:var(--ink,#0f172a);
  border-radius:16px !important;
  padding:8px 12px;
}
.bubble.is-mine{align-self:flex-end;background:var(--accent,#0f172a);color:var(--accent-ink,#fff)}
.bubble header{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bubble-name{font-weight:700}
.bubble time{color:var(--muted,#334155);font-size:.8rem}
.bubble.is-mine time{color:inherit;opacity:.85}
.bubble p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble a{color:inherit;text-decoration:underline}
.bubble .msg-actions{display:none;gap:6px;margin-left:auto}
body.is-owner .bubble .msg-actions{display:inline-flex}
.msg-act{
  min-height:36px;
  padding:0 8px;
  border-radius:8px !important;
  border:1px solid var(--line,#e2e8f0);
  background:var(--paper,#fff);
  color:var(--ink,#0f172a);
  font:700 .78rem -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.chat-app .mbadge{
  display:inline-block;
  max-width:7.5rem;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px;
  line-height:1.3;
  padding:1px 6px;
  border-radius:999px !important;
  background:#7f1d1d;
  color:#fff !important;
}
.new-pill{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  min-height:44px;
  padding:0 14px;
  border:0;
  border-radius:999px !important;
  background:var(--accent,#0f172a);
  color:var(--accent-ink,#fff);
  font-weight:700;
  box-shadow:0 8px 20px rgba(15,23,42,.25);
}
.chat-compose{
  flex:none;
  padding:8px 12px 8px;
  border-top:1px solid var(--line,#e2e8f0);
  background:var(--paper,#fff);
}
.chat-as{margin:0 0 6px;color:var(--muted,#334155);font-size:.92rem}
.chat-as strong{color:var(--ink,#0f172a)}
.chat-as button{
  min-height:44px;
  margin-left:4px;
  padding:0 8px;
  border:0;
  background:transparent;
  color:var(--link,#1d4ed8);
  font-weight:700;
  text-decoration:underline;
}
.compose-row{display:flex;gap:8px;align-items:center}
.compose-row input{
  flex:1;
  min-width:0;
  height:44px;
  min-height:44px;
  font-size:16px;
  padding:8px 12px;
  border:1px solid var(--line,#e2e8f0);
  border-radius:12px !important;
  background:var(--bg,#f4f3ef);
  color:var(--ink,#0f172a);
}
.compose-row .btn{min-height:44px;flex:none;padding:0 16px}
.chat-bans{margin-top:8px;color:var(--muted,#334155);font-size:.9rem}
.chat-bans ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.chat-bans li{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#nameDialog form,#ownerDialog form{padding:16px}
#nameDialog label,#ownerDialog label{display:block;margin:10px 0;font-weight:700}
#nameDialog input,#ownerDialog input{width:100%;font-size:16px;min-height:44px}
.chat-error{color:#b91c1c;font-weight:700}
@media (min-width:900px){
  .chat-app{border-left:1px solid var(--line,#e2e8f0);border-right:1px solid var(--line,#e2e8f0)}
  .chat-body{flex-direction:row}
  .who-panel{width:260px;max-height:none;border-bottom:0;border-right:1px solid var(--line,#e2e8f0)}
}
@media print{
  .chat-compose,.chat-head-actions,.who-panel,.new-pill{display:none!important}
  body.chat-page{height:auto;overflow:visible}
}