/* chat.css — чат (v403): плавающая кнопка и панель. Телефон — панель выезжает снизу на ~60% высоты; ПК — панель справа ~360px */
.chat-fab{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:35;width:52px;height:52px;padding:0;border-radius:50%;border:1px solid var(--gold-edge);background:var(--ink);color:var(--gold-on-ink);box-shadow:var(--shadow);display:grid;place-items:center}
.chat-fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chat-fab .chat-n{position:absolute;top:-5px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--foe);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center;border:2px solid var(--bg)}
.chat-fab.new{animation:chat-pulse 1.6s ease-in-out 2}
@keyframes chat-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.chat-fab.new{animation:none}}

.chat-box{position:fixed;left:0;right:0;bottom:0;z-index:40;height:min(60vh,560px);display:flex;flex-direction:column;background:var(--surface);border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:var(--shadow);padding-bottom:env(safe-area-inset-bottom,0px);animation:chat-up .18s ease-out}
@keyframes chat-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.chat-box{animation:none}}
.chat-h{display:flex;align-items:center;gap:8px;padding:8px 10px 6px max(10px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
.chat-h .chat-tabs{flex:1 1 auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
.chat-h .chat-tabs::-webkit-scrollbar{display:none}
.chat-h .chat-tabs button{white-space:nowrap;flex:none}
.chat-h .x{width:32px;height:32px}
.chat-list{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:8px max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:5px;font-size:15px;line-height:1.35}
.chat-empty{align-self:center;margin:auto;text-align:center}
.cmsg{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;padding:4px 8px;border-radius:9px;max-width:100%}
.cmsg .ct{font-size:12px;color:var(--muted);flex:none}
.cmsg .cx{overflow-wrap:anywhere;min-width:0}
.cmsg .nick{flex:none}
.cmsg.me{background:var(--ally-soft)}
.cmsg.me .nick{color:var(--ally)}
/* объявления глашатая — на золотом, с полоской слева */
.cmsg.sys{background:var(--gold-soft);border-left:3px solid var(--gold);font-family:var(--f-head);font-weight:600}
.cmsg.sys .cbot{color:var(--gold);font-size:14px;letter-spacing:.02em}
.chat-f{display:flex;gap:8px;padding:8px max(10px,env(safe-area-inset-right,0px)) 8px max(10px,env(safe-area-inset-left,0px));border-top:1px solid var(--line)}
.chat-f .inp{flex:1 1 auto;min-width:0;min-height:40px}
.chat-f .btn{flex:none}

@media (min-width:820px){
  /* внизу справа на ПК стоит кнопка «Вид телефона» (preview.js) — чат выше неё */
  .chat-fab{bottom:58px;right:20px}
  .chat-box{left:auto;right:16px;bottom:58px;width:360px;height:min(72vh,640px);border:1px solid var(--line);border-radius:14px}
  .chat-h{padding:8px 8px 6px 10px}
}

/* упоминания и шёпот (v403) */
.cmsg .at{color:var(--ally);font-weight:700}
.cmsg.atme{background:var(--gold-soft);box-shadow:inset 3px 0 0 var(--gold)}
.cmsg.pm{background:var(--surface-2);border:1px dashed var(--line);font-style:italic}
.cmsg.pm.me{background:var(--ally-soft);border-color:transparent}
.cmsg.pm .pmw{font-size:12px;color:var(--mana);font-weight:700;font-style:normal;letter-spacing:.03em}
.chat-tabs .pmtab{color:var(--mana)}
.chat-tabs .pmtab[aria-pressed="true"]{color:var(--surface)}
.pm-h{display:flex;align-items:center;gap:10px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--line);position:sticky;top:-8px;background:var(--surface);z-index:1}
.pm-h .btn.sm{min-height:32px;padding:0 10px;font-size:14px}
.pm-dl{display:grid;gap:6px}
.pm-d{display:grid;grid-template-columns:1fr auto;gap:2px 8px;text-align:left;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2)}
.pm-d b{color:var(--ally);font-family:var(--f-num);font-size:14px}
.pm-d .c{grid-column:2;grid-row:1;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--foe);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center;justify-self:end}
.pm-d .ct{grid-column:2;grid-row:2;font-size:12px;color:var(--muted)}
.pm-d .pm-last{grid-column:1;grid-row:2;font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pm-d.new{border-color:var(--gold)}