/* ===== PSK · Safe Override Pack (Nick visible on Web) ===== */
/* Loads LAST to win cascade over scheme/highlight css */

:root{
  --psk-bg: #ffffff;
  --psk-fg: #13161b;
  --psk-muted: #6b7280;
  --psk-border: #e5e7eb;
  --psk-accent: #0ea5e9;
  --psk-me: #f1f5ff;
  --psk-other: #f8fafc;
  --psk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --psk-safe-top: env(safe-area-inset-top, 0px);
  --psk-footer-h: 64px;
  --psk-header-h: 48px;
}

@media (prefers-color-scheme: dark){
  :root{ --psk-bg:#0b0d10; --psk-fg:#e5e7eb; --psk-muted:#9ca3af; --psk-border:#1f2937; --psk-me:#0f172a; --psk-other:#0c1116; }
}

html, body{ height:100%; }
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--psk-bg); color:var(--psk-fg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  padding-top: calc(var(--psk-header-h) + var(--psk-safe-top));
  padding-bottom: calc(var(--psk-footer-h) + var(--psk-safe-bottom));
}

.container{ max-width:1120px; margin:0 auto; padding:0 16px; }
article.container{ padding:12px 16px 0 16px; }

/* Header */
#psk-header{ position:fixed; left:0; right:0; top:0; background:var(--psk-bg); border-bottom:1px solid var(--psk-border); z-index:1100; }
#psk-header .bar{ display:flex; align-items:center; gap:12px; height:48px; }
#psk-header h1{ font-size:16px; font-weight:700; margin:0; }
#psk-menu{ appearance:none; border:1px solid var(--psk-border); border-radius:10px; height:34px; width:40px; background:var(--psk-bg); cursor:pointer; }
#psk-header .spacer{ flex:1 1 auto; }

/* Messages stream (leave original structure intact) */
#messages{
  display:block; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:8px 0;
  padding-bottom: max(16px, calc(var(--psk-footer-h) + var(--psk-safe-bottom) + 12px));
  padding-top:4px;
}
@media (max-width: 768px){
  #messages{ height: calc((var(--vh, 1vh) * 100) - var(--psk-footer-h) - var(--psk-header-h) - 16px); }
}

/* Bubbles */
.message{ list-style:none; margin:10px 0; padding:10px 12px; border:1px solid var(--psk-border); border-radius:14px; background:var(--psk-other); word-break:break-word; }
.message.me{ background:var(--psk-me); border-color:var(--psk-border); }
.message.info{ background:transparent; border:none; color:var(--psk-muted); padding:6px 0; }
.message.warn{ background:#fff1f2; border-color:#fecdd3; }

/* === Nickname visibility (strong overrides, desktop+mobile) === */
#messages .message .nick{ display:inline !important; visibility:visible !important; opacity:1 !important; color:var(--psk-fg) !important; font-weight:600; margin-right:8px; }
@media (min-width: 769px){
  #messages .message .nick{ display:inline !important; }
}
/* In case some theme hides via :where or attribute selectors */
#messages .message [class~="nick"]{ display:inline !important; }
#messages .message .trip{ font-size:12px; opacity:.72; margin-left:6px; }
#messages .message .text{ white-space:pre-wrap; line-height:1.55; margin:6px 0 0 0; }

/* Links/code */
.message a{ color:var(--psk-accent); text-decoration:none; } .message a:hover{ text-decoration:underline; }
.message pre, pre.text{ white-space:pre-wrap; word-break:break-word; background:transparent; margin:6px 0 0; padding:0; font-size:14px; }

/* Footer */
#footer{ position:fixed; left:0; right:0; bottom:0; background:var(--psk-bg); border-top:1px solid var(--psk-border); box-shadow:0 -6px 24px rgba(0,0,0,.04); z-index:1000; padding-bottom:var(--psk-safe-bottom); }
#footer .container{ padding:8px 16px; }
#chatform{ display:flex; gap:10px; align-items:center; margin:0; }
#chatinput{ flex:1 1 auto; min-height:44px; max-height:42dvh; padding:10px 12px; font-size:16px; border:1px solid var(--psk-border); border-radius:12px; background:var(--psk-bg); color:var(--psk-fg); outline:none; resize:none; }
#chatinput:focus{ border-color:#cbd5e1; }
#sendbtn{ flex:0 0 auto; height:44px; padding:0 16px; border-radius:12px; border:1px solid var(--psk-border); background:var(--psk-fg); color:var(--psk-bg); font-weight:600; cursor:pointer; }
#sendbtn:active{ transform: translateY(1px); }
#psk-voice-hold{ flex:0 0 auto; height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--psk-border); background:#0ea5e9; color:#fff; font-weight:600; cursor:pointer; }
#psk-voice-hold.psk-recording{ background:#ef4444; }

/* Sidebar: keep desktop, hide on mobile */
@media (max-width: 768px){ #sidebar{ display:none !important; } }

hr{ border:none; border-top:1px solid var(--psk-border); margin:12px 0; }
button{ font-family:inherit; font-size:14px; }
::placeholder{ color:var(--psk-muted); opacity:.9; }