/* ===========================================================
   纸上戏台 · Paper Stage
   调色板: 靛夜幕 #14151c / 面板 #1b1c26 / 描边 #2a2c3a
           暖金 #c9a24b / 深锈 #a8563a / 苔青 #5fa39a
           暖白 #ece7da / 灰米 #9496a6
   字体: Fraunces(展示衬线) / Inter(界面) / JetBrains Mono(台词)
   =========================================================== */

:root{
  --bg: #14151c;
  --bg-alt: #101117;
  --panel: #1b1c26;
  --panel-2: #21222e;
  --border: #2b2d3c;
  --border-soft: #24263300;
  --gold: #c9a24b;
  --gold-soft: #c9a24b33;
  --rust: #b06246;
  --teal: #5fa39a;
  --text: #ece7da;
  --text-dim: #c8c4b4;
  --muted: #8d8fa0;
  --danger: #c05a52;
  --radius: 14px;
  --radius-sm: 8px;
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --shadow-lg: 0 20px 60px -20px rgba(0,0,0,0.6);
}

*{ box-sizing: border-box; }
/* 全局规则：任何带 hidden 属性的元素强制不显示。
   这条必须放在最前面且用 !important——
   否则任何后面写的 .xxx{ display:flex } 之类的类选择器，
   哪怕元素本身有 hidden 属性，也会因为"作者样式表优先级高于浏览器默认样式表"
   而盖过浏览器内置的 [hidden]{display:none}，导致该元素明明设了 hidden 却仍然显示。
   这一类 bug 在这个项目里出现过好几次（弹窗、登录遮罩、聊天区），
   加这一条统一兜底，以后新增任何 hidden 元素都不会再中招。 */
[hidden]{ display:none !important; }
html,body{ height:100%; overflow:hidden; overscroll-behavior:none; }
body{
  margin:0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 1200px 600px at 20% -10%, #23243a55, transparent 60%),
    radial-gradient(ellipse 900px 500px at 100% 0%, #c9a24b14, transparent 55%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--gold-soft); color: var(--text); }
button{ font-family: inherit; }
textarea, input, select{ font-family: inherit; color: inherit; }
.muted{ color: var(--muted); }

#app{ height:100vh; height:100dvh; display:flex; flex-direction:column; }

/* ---------------- topbar ---------------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #17181f, #14151c);
  flex-shrink:0;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:36px; height:36px; border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg, var(--gold), #8a6a2c);
  color:#1a1305; font-family: var(--font-display); font-weight:600; font-size:18px;
  box-shadow: 0 4px 14px -4px #c9a24b66;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-title{ font-family: var(--font-display); font-size:19px; letter-spacing:.3px; }
.brand-sub{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color: var(--muted); }

.topbar-actions{ display:flex; align-items:center; gap:14px; }
.user-badge{ display:flex; align-items:center; gap:7px; font-size:12.5px; color: var(--muted); }
.user-badge .dot{ width:8px; height:8px; border-radius:50%; background: var(--teal); box-shadow:0 0 8px #5fa39aaa; }

/* ---------------- 登录 / 注册门禁 ---------------- */
.auth-gate{
  position:fixed; inset:0; z-index: 300; background: var(--bg);
  background-image:
    radial-gradient(ellipse 1200px 600px at 20% -10%, #23243a55, transparent 60%),
    radial-gradient(ellipse 900px 500px at 100% 0%, #c9a24b14, transparent 55%);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-box{
  width: 380px; max-width:100%; background: var(--panel); border:1px solid var(--border);
  border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-lg);
}
.auth-msg{ margin: 10px 0 0; font-size:12.5px; min-height:16px; color: var(--danger); text-align:center; }
.auth-msg.ok{ color: var(--teal); }

/* ---------------- buttons ---------------- */
.btn{
  border:1px solid var(--border); background: var(--panel-2); color: var(--text);
  padding: 8px 14px; border-radius: 10px; font-size: 13.5px; font-weight:500;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition: all .15s ease;
}
.btn:hover{ border-color:#3a3d52; background:#262838; }
.btn-primary{
  background: linear-gradient(160deg, var(--gold), #a9812f);
  border-color: transparent; color:#1a1305; font-weight:600;
}
.btn-primary:hover{ filter: brightness(1.08); }
.btn-ghost{ background: transparent; }
.btn-danger{ background: transparent; border-color:#5a2e2b; color: var(--danger); }
.btn-danger:hover{ background:#c05a521a; }
.icon-btn{
  width:32px; height:32px; border-radius:9px; border:1px solid var(--border);
  background: var(--panel-2); color: var(--text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  transition: all .15s ease;
}
.icon-btn:hover{ border-color: var(--gold); color: var(--gold); }

/* ---------------- layout ---------------- */
.layout{ flex:1; display:flex; min-height:0; }

/* ---------------- roster (sidebar) ---------------- */
.roster{
  width: 300px; flex-shrink:0;
  border-right: 1px solid var(--border);
  background: var(--bg-alt);
  display:flex; flex-direction:column; min-height:0;
}
.roster-head{ display:flex; align-items:center; justify-content:space-between; padding: 16px 16px 10px; }
.roster-head h2{ font-family: var(--font-display); font-weight:600; font-size:16px; margin:0; letter-spacing:.3px; }
.roster-head-actions{ display:flex; gap:6px; }
.roster-search{ padding: 0 16px 12px; }
.roster-search input{
  width:100%; padding:8px 12px; border-radius:9px; border:1px solid var(--border);
  background: var(--panel); color: var(--text); font-size:13px; outline:none;
}
.roster-search input:focus{ border-color: var(--gold); }
.roster-list{ flex:1; overflow-y:auto; padding: 4px 12px 16px; display:flex; flex-direction:column; gap:8px; }
.roster-empty{ padding: 40px 24px; text-align:center; }
.roster-empty p{ margin:4px 0; }

.char-card{
  display:flex; align-items:center; gap:11px; padding:9px; border-radius:12px;
  border:1px solid transparent; cursor:pointer; position:relative;
  background: var(--panel);
  transition: all .15s ease;
}
.char-card:hover{ border-color: var(--border); background: var(--panel-2); }
.char-card.active{ border-color: var(--gold); background: linear-gradient(90deg, #c9a24b14, transparent); }
.char-card img{ width:42px; height:42px; border-radius:9px; object-fit:cover; background:#2a2c3a; flex-shrink:0; }
.char-card-info{ min-width:0; flex:1; }
.char-card-info .name{ font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.char-card-info .desc{ font-size:11.5px; color: var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.char-card-badges{ display:flex; gap:3px; flex-shrink:0; }
.badge{ font-size:9px; padding:2px 5px; border-radius:5px; background:#2a2c3a; color: var(--muted); letter-spacing:.3px; }
.badge.gold{ background: var(--gold-soft); color: var(--gold); }
.badge.teal{ background:#5fa39a22; color: var(--teal); }

/* ---------------- stage (main) ---------------- */
.stage{ flex:1; display:flex; flex-direction:column; min-width:0; position:relative; }
.stage-welcome{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:20px;
}
.curtain-deco{ font-size:54px; margin-bottom:6px; filter: drop-shadow(0 8px 20px #0006); }
.stage-welcome h1{ font-family: var(--font-display); font-weight:600; font-size:24px; margin:0; }

.stage-chat{ flex:1; display:flex; flex-direction:column; min-height:0; }
.stage-chat-head{
  display:flex; align-items:center; gap:12px; padding:14px 22px;
  border-bottom:1px solid var(--border); flex-shrink:0;
  background: linear-gradient(180deg, #191a24, transparent);
}
.chat-avatar{ width:38px; height:38px; border-radius:9px; object-fit:cover; background:#2a2c3a; }
.stage-chat-head-info{ flex:1; min-width:0; }
.stage-chat-head-info h2{ font-family: var(--font-display); font-size:16.5px; margin:0; font-weight:600; }
.stage-chat-head-info .muted{ font-size:11.5px; font-family: var(--font-mono); }
.stage-chat-head-actions{ display:flex; gap:6px; }

.stage-messages{ flex:1; overflow-y:auto; padding: 22px 22px 8px; display:flex; flex-direction:column; gap:16px; }

.msg{ display:flex; gap:11px; max-width: 760px; }
.msg.user{ align-self:flex-end; flex-direction:row-reverse; }
.msg-avatar{ width:30px; height:30px; border-radius:8px; object-fit:cover; background:#2a2c3a; flex-shrink:0; margin-top:2px; }
.msg-body{ min-width:0; }
.msg-meta{ font-size:10.5px; color: var(--muted); margin-bottom:4px; font-family: var(--font-mono); letter-spacing:.3px; }
.msg.user .msg-meta{ text-align:right; }
.msg-bubble{
  padding: 11px 15px; border-radius: 14px; background: var(--panel);
  border:1px solid var(--border); white-space:pre-wrap; word-break: break-word;
  font-size:14.5px; line-height:1.65;
}
.msg.assistant .msg-bubble{ border-top-left-radius:4px; }
.msg.user .msg-bubble{ border-top-right-radius:4px; background: linear-gradient(160deg, #23283a, #1c1f2c); border-color:#343850; }
.msg-bubble p{ margin: 0 0 .6em; }
.msg-bubble p:last-child{ margin-bottom:0; }
.msg-bubble em{ color: var(--gold); font-style: italic; }
.msg-actions{ display:flex; gap:6px; margin-top:5px; opacity:0; transition: opacity .15s; }
.msg:hover .msg-actions{ opacity:1; }
.msg-actions button{
  font-size:10.5px; padding:3px 7px; border-radius:6px; border:1px solid var(--border);
  background: var(--panel-2); color: var(--muted); cursor:pointer;
}
.msg-actions button:hover{ color: var(--gold); border-color: var(--gold); }
.msg-typing span{ display:inline-block; width:5px; height:5px; border-radius:50%; background: var(--gold); margin-right:3px; animation: blink 1.2s infinite; }
.msg-typing span:nth-child(2){ animation-delay:.2s; }
.msg-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{ opacity:.2 } 40%{ opacity:1 } }

.stage-input{
  border-top:1px solid var(--border); padding: 14px 22px 18px; flex-shrink:0;
  display:flex; gap:10px; align-items:flex-end;
  background: linear-gradient(0deg, #17181f, transparent);
}
.stage-input textarea{
  flex:1; resize:none; max-height: 200px; min-height: 44px;
  background: var(--panel); border:1px solid var(--border); border-radius: 12px;
  padding: 11px 14px; color: var(--text); outline:none; font-size:14px; line-height:1.5;
}
.stage-input textarea:focus{ border-color: var(--gold); }
.stage-input-actions{ display:flex; gap:8px; }

/* ---------------- modals ---------------- */
.modal-overlay{
  position:fixed; inset:0; background: #0a0a10cc; backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; z-index: 100; padding: 24px;
}
.modal{
  width: 460px; max-width:100%; max-height: 86vh; display:flex; flex-direction:column;
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.modal-wide{ width: 780px; }
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 20px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.modal-head h3{ margin:0; font-family: var(--font-display); font-size:17px; font-weight:600; }
.modal-body{ padding: 18px 20px; overflow-y:auto; flex:1; }
.modal-foot{ padding: 14px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; flex-shrink:0; }

.field{ display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.field > span{ font-size:12.5px; color: var(--text-dim); font-weight:500; }
.field input[type=text], .field input[type=password], .field input[type=number], .field textarea, .field select{
  background: var(--bg-alt); border:1px solid var(--border); border-radius: 9px;
  padding: 9px 12px; color: var(--text); outline:none; font-size:13.5px; width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--gold); }
.field textarea{ resize:vertical; line-height:1.5; }
.field-row{ display:flex; gap:12px; }
.field-row .field{ flex:1; }
.checkbox-field{ flex-direction:row; align-items:center; gap:9px; }
.checkbox-field input{ width:16px; height:16px; accent-color: var(--gold); }
.row-inline{ display:flex; gap:8px; }
.row-inline select{ flex:1; }
.hint{ font-size:12px; line-height:1.6; margin-top:2px; }

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.tab-btn{
  background:none; border:none; color: var(--muted); padding: 8px 4px; margin-right:16px;
  font-size:13.5px; font-weight:500; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab-btn.active{ color: var(--gold); border-bottom-color: var(--gold); }

.dropzone{
  display:flex; align-items:center; justify-content:center; text-align:center;
  border: 1.5px dashed var(--border); border-radius: 12px; padding: 40px 20px;
  color: var(--muted); font-size:13.5px; cursor:pointer; transition: all .15s;
}
.dropzone:hover, .dropzone.drag{ border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.import-status{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.import-status-item{ font-size:12.5px; padding:8px 11px; border-radius:8px; background: var(--panel-2); border:1px solid var(--border); display:flex; justify-content:space-between; gap:10px; }
.import-status-item.ok{ border-color:#5fa39a55; }
.import-status-item.err{ border-color:#c05a5255; color:#e39189; }

.editor-basic-grid{ display:flex; gap:20px; }
.editor-avatar-col{ display:flex; flex-direction:column; align-items:center; gap:10px; flex-shrink:0; width:130px; }
.editor-avatar-preview{ width:130px; height:130px; border-radius:14px; object-fit:cover; background: var(--panel-2); border:1px solid var(--border); }
.editor-fields-col{ flex:1; min-width:0; }

.entry-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.entry-item{ border:1px solid var(--border); border-radius:10px; padding:12px; background: var(--panel-2); }
.entry-item-head{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.entry-item-head input[type=text]{ flex:1; }
.entry-item textarea{ width:100%; margin-top:6px; }
.entry-item .row-inline{ margin-top:6px; }
.entry-item-remove{ color: var(--danger); background:none; border:none; cursor:pointer; font-size:16px; }

.history-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background: var(--panel-2); cursor:pointer; }
.history-item:hover{ border-color: var(--gold); }
.history-item .meta{ font-size:11.5px; color: var(--muted); }

.admin-user-item{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background: var(--panel-2); }
.admin-user-item .meta{ font-size:11.5px; color: var(--muted); }
.admin-user-item .actions{ display:flex; gap:6px; flex-shrink:0; }
.status-pill{ font-size:10.5px; padding:2px 8px; border-radius:20px; letter-spacing:.3px; }
.status-pill.pending{ background:#c9a24b22; color: var(--gold); }
.status-pill.approved{ background:#5fa39a22; color: var(--teal); }
.status-pill.rejected{ background:#c05a5222; color: var(--danger); }

#toast-root{ position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index: 200; }
.toast{
  background: var(--panel); border:1px solid var(--border); border-left:3px solid var(--gold);
  padding: 11px 16px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow-lg);
  animation: toast-in .2s ease;
}
.toast.err{ border-left-color: var(--danger); }
@keyframes toast-in{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }

/* scrollbars */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background: #2f3140; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover{ background: #3a3d52; }
::-webkit-scrollbar-track{ background: transparent; }

/* ---------------- responsive ---------------- */
.stage-back-btn{ display:none; }

@media (max-width: 860px){
  .layout{ flex-direction:column; min-height:0; }
  .roster{ width:100%; height:100%; border-right:none; }
  .modal-wide{ width:100%; }
  .editor-basic-grid{ flex-direction:column; }
  .editor-avatar-col{ flex-direction:row; width:100%; }
  .stage-back-btn{ display:flex; }

  /* 名录 / 对话 二选一全屏显示，互不挤压 */
  #app[data-view="chat"] .roster{ display:none; }
  #app[data-view="roster"] .stage{ display:none; }
  #app:not([data-view]) .stage{ display:none; } /* 初始状态默认显示名录 */
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

:focus-visible{ outline: 2px solid var(--gold); outline-offset:2px; }