:root{
  --bg:#0b0c10; --fg:#e6e8ec; --muted:#a3a9b8; --card:#111317; --line:#1b1f2a;
  --brand:#7c4dff; --brand2:#00e5ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; color:var(--fg); background:
  radial-gradient(1200px 600px at 10% -10%, rgba(124,77,255,.16), transparent),
  radial-gradient(1000px 500px at 90% 10%, rgba(0,229,255,.12), transparent),
  linear-gradient(180deg, #0b0c10 0%, #0b0c10 100%);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.row{display:flex;gap:16px}
.between{justify-content:space-between}
.center{align-items:center}
.site-header{position:sticky;top:0;backdrop-filter:saturate(140%) blur(8px);background:rgba(11,12,16,.6);border-bottom:1px solid var(--line);z-index:10}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:22px}
.nav a{color:var(--fg);opacity:.9;text-decoration:none;margin:0 10px}
.nav a:hover{opacity:1}
.btn{border:1px solid var(--line);background:transparent;color:var(--fg);padding:10px 14px;border-radius:10px;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#000;font-weight:700;border:none}
.btn.ghost{border-color:#2a2f3a}
.btn.lg{padding:14px 18px;font-size:1.05rem}
.btn.small{padding:6px 10px;font-size:12px}

.hero{padding:72px 0 40px}
.hero h1{font-size:48px;line-height:1.1;margin:0 0 12px}
.lead{color:var(--muted);max-width:820px}
.cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.section{padding:56px 0}
.section.alt{background:rgba(255,255,255,.02);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.steps{padding-left:18px}
.site-footer{border-top:1px solid var(--line);padding:18px 0;margin-top:40px}
.site-footer a{color:var(--muted);text-decoration:none;margin-left:16px}
@media (max-width: 900px){
  .grid3{grid-template-columns:1fr 1fr}
  .hero h1{font-size:36px}
}
@media (max-width: 640px){
  .grid3,.grid2{grid-template-columns:1fr}
  .nav .btn{display:none}
}



/* Characters grid */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card.char{padding:0;overflow:hidden}
.char .thumb{width:100%;height:180px;display:block;object-fit:cover;border-bottom:1px solid var(--line);background:#0f1116}
.char .thumb.vertical{object-fit:contain;height:260px}
.char .thumb.horizontal{object-fit:contain;height:180px}
.char .char-meta{padding:12px}
.char-name{font-weight:700}
.badge{display:inline-block;padding:3px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;margin:2px 4px 0 0;color:var(--muted)}

/* Chat layout */
.chat-root{display:grid;grid-template-columns:240px 1fr 360px;gap:16px;max-width:1100px;margin:16px auto;padding:0 20px}
.chat-left{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.chat-left-head{padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700}
.chat-recent{padding:8px;font-size:14px;color:var(--muted)}
/* recent list */
.recent-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;color:var(--fg);text-decoration:none}
.recent-item:hover{background:rgba(255,255,255,.04)}
.recent-avatar{width:34px;height:34px;border-radius:50%;background:#0f1116;background-size:cover;background-position:center top;border:1px solid var(--line);flex:0 0 34px}
.recent-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.chat-main{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
/* background video/image for chat center */
.chat-main .bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.chat-main .bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(11,12,16,0.72), rgba(11,12,16,0.88));z-index:1}
/* content should sit above bg */
/* typing indicator */
@keyframes dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} 100%{content:''} }
.msg.from.typing{opacity:.85}
.msg.from.typing::after{content:''; margin-left:2px}

.chat-scroll,.chat-input{position:relative;z-index:2}
/* bottom-anchored chat area with top reserve for face (about upper half) */
.chat-scroll{position:absolute; top:50%; left:0; right:0; bottom: var(--input-h, 72px); overflow:auto; padding:16px; display:flex; flex-direction:column; z-index:2; -webkit-user-select:none; user-select:none}
@media (max-width: 640px){
/* subtle, modern scrollbars for chat area only */
.chat-scroll{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.chat-scroll::-webkit-scrollbar{width:8px;height:8px}
.chat-scroll::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.chat-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.16));border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.chat-scroll:hover::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.25))}
.chat-scroll::-webkit-scrollbar-thumb:active{background:rgba(255,255,255,.45)}
.chat-scroll::-webkit-scrollbar-corner{background:transparent}

  /* rules now global; keep block for future overrides if needed */
}
.msg{max-width:72%;padding:10px 12px;border-radius:12px;margin:8px 0}
.msg.from{background:rgba(26,31,42,.78);align-self:flex-start;backdrop-filter:saturate(130%) blur(4px);border:1px solid var(--line)}
.msg.to{background:linear-gradient(90deg, rgba(124,77,255,.82), rgba(0,229,255,.82));color:#000;align-self:flex-end;backdrop-filter:saturate(130%) blur(4px);border:1px solid var(--line)}
/* intro overlay centered */
.intro-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.intro-box{max-width:70%;background:rgba(26,31,42,.85);border:1px solid var(--line);border-radius:12px;padding:16px 18px;color:var(--fg);text-align:left}
/* input stacked with a control row on top */
.chat-input{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:12px;border-top:1px solid var(--line);background:rgba(11,12,16,.55);backdrop-filter:saturate(120%) blur(8px)}
.chat-input .controls-row{display:flex;justify-content:flex-end}
.chat-input .input-row{display:flex;gap:10px}
.chat-input input{flex:1;background:rgba(15,17,22,.6);backdrop-filter:saturate(140%) blur(6px);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
/* immersive mode hides text and input row */
.chat-main.immersive .chat-scroll{display:none}
.chat-main.immersive .chat-input .input-row{display:none}
.chat-right{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative}
.right-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.char-title{font-weight:700}
.only-mobile{display:none}
.media{padding:6px}
.media .detail{width:100%;border-radius:12px;background:#0f1116}
.media .detail.vertical{object-fit:contain;height:360px}
.media .detail.horizontal{object-fit:contain;height:260px}
.right-body{padding:12px 14px}
.tag-list .badge{margin-bottom:6px}

@media (max-width: 1000px){
  .chat-root{grid-template-columns:1fr}
  .chat-right{position:fixed;right:12px;bottom:12px;width:min(88vw,380px);max-height:80vh;transform:translateY(110%);transition:transform .2s ease;z-index:20}
  .chat-right.open{transform:translateY(0)}
  .only-mobile{display:inline-block}
}
@media (max-width: 900px){
  .grid4{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid4{grid-template-columns:1fr}
}


/* Fill to bottom on chat page */
:root{ --header-h: 60px; }
/* subtract the top+bottom margins (16px each) to prevent tiny page scroll */
.chat-root{ height: calc(100vh - var(--header-h) - 32px); min-height: calc(100vh - var(--header-h) - 32px); }
.chat-left,.chat-main,.chat-right{ height:100%; }
.chat-left{ display:flex; flex-direction:column; }
.chat-recent{ flex:1; overflow:auto; }
.chat-main{ min-height:0; }
.chat-scroll{ min-height:0; }
.chat-right{ display:flex; flex-direction:column; }
@media (max-width: 1000px){
  .chat-root{ height:auto; min-height: calc(100vh - var(--header-h)); }
  .chat-right{ height:auto; max-height:80vh; }
}

/* Improve visibility and stable placement for immersive toggle */
#toggle-immersive{
  position:absolute; top:12px; right:12px; z-index:3;
  background:rgba(0,0,0,.65); color:#fff; border-color:#2a2f3a;
}
/* Keep layout stable when input row hides */
.chat-input .controls-row{ height:0; }
