/* Character-server app layer — builds on style.css's variables/brand. */

.previewbar{background:#1a2b1c;border-bottom:1px solid #2f4a33;color:#b9e8bf;font-size:13px;text-align:center;padding:8px 14px}
.previewbar b{color:#8af09a}

.app-shell{display:flex;min-height:calc(100vh - 118px)}
.sidebar{width:248px;flex:0 0 248px;border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;gap:14px}
.sidebar h3{margin:0 0 2px;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:750}

.persona-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid transparent;cursor:pointer;background:transparent;text-align:left;width:100%;color:var(--text);font:inherit}
.persona-card:hover{background:var(--panel)}
.persona-card.active{background:var(--panel);border-color:var(--cyan)}
.persona-card img,.persona-avatar-fallback{width:38px;height:38px;border-radius:10px;object-fit:cover;flex:0 0 38px;background:#243040;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--amber)}
.persona-card .pname{font-weight:700;font-size:14px}
.persona-card .ptag{font-size:12px;color:var(--muted);margin-top:1px}
.persona-card.soon{opacity:.45;cursor:not-allowed}
.persona-card.soon:hover{background:transparent}

.chat-main{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.chat-top .who{display:flex;align-items:center;gap:12px}
.chat-top .who img,.chat-top .who .persona-avatar-fallback{width:34px;height:34px;border-radius:9px}
.chat-top .who .meta{line-height:1.25}
.chat-top .who .meta b{display:block;font-size:15px}
.chat-top .who .meta span{font-size:12px;color:var(--muted)}

.modelpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.modelpick select{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px}
.admin-pin{display:none;align-items:center;gap:6px;font-size:12px;color:var(--amber);border:1px dashed #5a4420;border-radius:8px;padding:6px 10px;background:#241d0f}
.admin-mode .admin-pin{display:flex}
.admin-pin input{accent-color:var(--amber)}

.transcript{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:14px}
.bubble{max-width:72%;padding:12px 16px;border-radius:14px;font-size:15px;line-height:1.55}
.bubble.user{align-self:flex-end;background:var(--cyan);color:#08121a;border-radius:14px 14px 4px 14px}
.bubble.persona{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px 14px 14px 4px}
.bubble.persona .pname{display:block;font-size:12px;color:var(--amber);font-weight:750;margin-bottom:4px;letter-spacing:.02em}
.bubble.typing{align-self:flex-start;color:var(--muted);font-size:13px;font-style:italic}

.composer{border-top:1px solid var(--line);padding:16px 24px;display:flex;flex-direction:column;gap:8px}
.composer form{display:flex;gap:10px}
.composer input[type=text]{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px 14px;font-size:15px}
.composer input[type=text]:focus{outline:2px solid var(--cyan);outline-offset:0}
.composer button{background:var(--cyan);color:#08121a;border:none;border-radius:10px;padding:0 20px;font-weight:800;cursor:pointer}
.composer button:hover{background:#9cf6ff}
.composer .hint{font-size:12px;color:var(--muted)}

.authbtn{background:transparent;border:1px solid var(--line);color:var(--muted);padding:7px 14px;border-radius:8px;font-size:13px;cursor:not-allowed}

.landing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:22px 0 10px}
.persona-tile{background:linear-gradient(125deg,rgba(25,36,48,.94),rgba(14,24,33,.96));border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px}
.persona-tile img,.persona-tile .persona-avatar-fallback{width:52px;height:52px;border-radius:12px;object-fit:cover}
.persona-tile h3{margin:0;font-size:18px}
.persona-tile p{margin:0;color:var(--muted);font-size:14px}
.persona-tile.soon{opacity:.5}
.persona-tile .enter{align-self:flex-start;margin-top:4px}

@media(max-width:760px){
  .app-shell{flex-direction:column}
  .sidebar{width:auto;flex:none;border-right:none;border-bottom:1px solid var(--line);flex-direction:row;overflow-x:auto}
  .sidebar h3{display:none}
  .persona-card{flex:0 0 auto;width:auto}
  .persona-card .ptag{display:none}
  .bubble{max-width:88%}
}