*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:#0d0d0d;color:#f0ede6;font-family:'Georgia',serif;min-height:100vh;}
#app{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;}
#topbar{background:#111;border-bottom:1px solid #1e1e1e;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.back-btn{font-size:12px;color:#888;text-decoration:none;font-family:'Georgia',serif;border:1px solid #2a2a2a;border-radius:7px;padding:5px 10px;background:#1a1a1a;transition:all 0.15s;}
.back-btn:hover{color:#f5e642;border-color:#f5e642;}
.show-title-bar{font-size:15px;font-weight:bold;letter-spacing:0.02em;}
.nav-btn{font-size:11px;color:#888;text-decoration:none;font-family:'Georgia',serif;border:1px solid #2a2a2a;border-radius:7px;padding:5px 10px;background:#1a1a1a;transition:all 0.15s;}
.nav-btn:hover{color:#f5e642;border-color:#f5e642;}
.ad-box{background:#1a1a1a;border:1px dashed #2a2a2a;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#333;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;flex-shrink:0;}
.ad-top{height:50px;margin:10px 12px;}
#tabs{display:flex;background:#0d0d0d;border-bottom:1px solid #1e1e1e;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0;}
#tabs::-webkit-scrollbar{display:none;}
.tab-btn{flex:1;min-width:60px;padding:8px 4px 6px;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all 0.15s;}
.tab-btn.on{border-bottom-color:var(--a);}
.tab-av{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:'Georgia',serif;font-weight:900;font-size:13px;border:2px solid #2a2a2a;color:#444;background:#1a1a1a;transition:all 0.15s;}
.tab-btn.on .tab-av{border-color:var(--a);background:var(--bg);color:var(--a);}
.tab-nm{font-size:9px;font-weight:bold;color:#444;transition:color 0.15s;text-align:center;line-height:1.2;}
.tab-btn.on .tab-nm{color:var(--a);}
#char-label{padding:7px 14px;border-bottom:1px solid #1e1e1e;flex-shrink:0;}
#char-name{font-size:13px;font-weight:bold;}
#char-role{font-size:10px;color:#555;font-style:italic;}
#messages{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 6px;display:flex;flex-direction:column;gap:11px;min-height:0;}
.empty-msg{color:#333;font-size:12px;font-style:italic;text-align:center;margin-top:20px;line-height:1.6;}
.msg-user{display:flex;justify-content:flex-end;}
.msg-user .bubble{background:#1e1e3a;border:1px solid #2e2e5a;border-radius:14px 3px 14px 14px;padding:10px 13px;max-width:82%;font-size:14px;color:#c8c8f0;line-height:1.5;word-break:break-word;}
.msg-bot{display:flex;gap:8px;align-items:flex-start;}
.mini-av{width:28px;height:28px;min-width:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:'Georgia',serif;font-weight:900;font-size:12px;border:1.5px solid transparent;flex-shrink:0;}
.msg-bot .bubble{border-radius:3px 14px 14px 14px;padding:10px 13px;flex:1;font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word;}
.typing-wrap{display:none;padding:5px 12px 0;flex-shrink:0;}
.typing-wrap.visible{display:flex;gap:8px;align-items:flex-start;}
.dot-row{display:flex;gap:4px;align-items:center;padding:10px 13px;border-radius:3px 14px 14px 14px;}
.dot{width:6px;height:6px;border-radius:50%;animation:blink 1.2s ease-in-out infinite;opacity:0.3;}
.dot:nth-child(2){animation-delay:0.2s;}.dot:nth-child(3){animation-delay:0.4s;}
@keyframes blink{0%,80%,100%{opacity:0.2;transform:scale(0.8)}40%{opacity:1;transform:scale(1.1)}}
#chips{padding:7px 10px;display:flex;flex-wrap:wrap;gap:5px;border-top:1px solid #1a1a1a;flex-shrink:0;background:#0d0d0d;}
.chip{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:14px;padding:5px 11px;font-size:11px;color:#888;cursor:pointer;font-family:'Georgia',serif;transition:all 0.15s;}
#input-area{padding:8px 10px 12px;border-top:1px solid #1e1e1e;display:flex;gap:8px;align-items:flex-end;flex-shrink:0;background:#111;}
#user-input{flex:1;background:#1a1a1a;border:1px solid #2e2e2e;border-radius:10px;padding:10px 13px;color:#f0ede6;font-size:16px;font-family:'Georgia',serif;resize:none;outline:none;line-height:1.5;}
#user-input::placeholder{color:#444;}
#send-btn{width:42px;height:42px;border:none;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:default;background:#1a1a1a;color:#444;flex-shrink:0;transition:all 0.15s;}
#send-btn.active{cursor:pointer;}
#disclaimer{text-align:center;font-size:9px;color:#888;padding-bottom:8px;flex-shrink:0;background:#111;}
#disclaimer a{color:#666;text-decoration:none;margin:0 4px;}
#disclaimer a:hover{color:#f5e642;}
::-webkit-scrollbar{width:3px;}::-webkit-scrollbar-thumb{background:#222;border-radius:2px;}
textarea{-webkit-appearance:none;}