:root{
  --bg:#ffffff;--sidebar:#f9fafb;--line:#e5e7eb;--text:#1f2937;--sub:#6b7280;--hover:#f3f4f6;--active:#e8e8e8;
  --blue:#1a73e8;--blueSoft:#e8f0fe;--danger:#ef4444;--code:#111827;
  --success:#16a34a;--radius-lg:16px;--radius-md:12px;--authShadow:0 8px 30px rgba(16,24,40,.06);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC",sans-serif;
}
html.dark{
  --bg:#0f1115;--sidebar:#171a20;--line:#252933;--text:#e5e7eb;--sub:#9ca3af;--hover:#1e232c;--active:#2a313b;
  --blue:#4d8dff;--blueSoft:#1a2740;--danger:#f87171;--code:#0b0f17;
  --success:#4ade80;--authShadow:0 8px 28px rgba(0,0,0,.26);
}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}

.wrap{height:100vh;display:flex;overflow:hidden}
.sidebar{width:260px;background:var(--sidebar);border-right:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:10px}
.logoRow{display:flex;align-items:center;justify-content:space-between}
.logo{font-size:18px;font-weight:800}
.mobileClose{display:none;border:0;background:transparent;color:var(--sub);cursor:pointer}
.newBtn{border:0;background:var(--blueSoft);color:var(--blue);border-radius:12px;padding:10px 12px;font-weight:700;cursor:pointer;transition:.2s}
.newBtn:hover{filter:brightness(.98)}
.searchWrap{position:relative}
.searchIcon{position:absolute;left:10px;top:9px;font-size:12px;color:var(--sub)}
.search{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);padding:8px 10px 8px 28px}
.sessions{flex:1;overflow:auto;display:flex;flex-direction:column;gap:4px}
.empty{font-size:12px;color:var(--sub);padding:8px}
.session{border:0;background:transparent;border-radius:10px;padding:8px;display:flex;gap:8px;cursor:pointer;text-align:left;transition:.2s}
.session:hover{background:var(--hover)}
.session.active{background:var(--active)}
.sessionMain{flex:1;min-width:0}
.sessionTitle{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sessionMeta{margin-top:2px;font-size:11px;color:var(--sub)}
.moreWrap{position:relative;display:flex;align-items:center}
.more{color:var(--sub)}
.moreBtn{border:0;background:transparent;color:var(--sub);cursor:pointer;width:24px;height:24px;border-radius:8px}
.moreBtn:hover{background:var(--hover);color:var(--text)}
.sidebarFoot{border-top:1px solid var(--line);padding-top:8px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--sub)}
.ghost{border:1px solid var(--line);background:transparent;border-radius:10px;padding:6px 10px;color:var(--text);cursor:pointer}
.ghost.small{font-size:12px;padding:4px 8px;border-radius:8px;color:var(--sub)}

.mask{display:none}

.main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.topbar{height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative}
.mobileMenu{display:none;position:absolute;left:12px}
.iconBtn{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--bg);cursor:pointer}
.title{font-size:14px;font-weight:700;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actions{position:absolute;right:12px;display:flex;gap:8px;align-items:center}
.btn{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer}
.menuWrap{position:relative}
.menu{position:absolute;top:34px;right:0;width:200px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.12);display:none}
.menu.show{display:block}
.groupHead{width:100%;border:0;background:transparent;border-radius:8px;padding:7px 8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--sub);font-size:12px}
.groupHead:hover{background:var(--hover)}
.groupArrow{transition:transform .2s ease}
.groupArrow.open{transform:rotate(0deg)}
.groupBody{max-height:500px;overflow:hidden;transition:max-height .2s ease}
.groupBody.collapsed{max-height:0}
.menuItem{width:100%;border:0;background:transparent;border-radius:8px;padding:8px;cursor:pointer;display:flex;gap:8px;align-items:center;text-align:left;flex-wrap:wrap}
.menuItem:hover{background:var(--hover)}
.menuDesc{flex-basis:100%;margin-left:16px;font-size:11px;color:var(--sub);line-height:1.4}
.dot{width:8px;height:8px;border-radius:99px;background:#d1d5db}
.dot.on{background:var(--blue)}

.panel{border-bottom:1px solid var(--line);padding:10px 14px;display:none;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}
.panel.show{display:grid}
.input{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);padding:8px 10px}
.primary{border:0;border-radius:10px;background:var(--blue);color:#fff;cursor:pointer}

.scroll{flex:1;min-height:0;overflow:auto;padding:24px 16px 12px}
.scroll{position:relative}
.scrollJump{
  position:sticky;
  left:calc(100% - 124px);
  bottom:14px;
  z-index:30;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  cursor:pointer;
  font-size:12px;
}
.scrollJump:hover{background:var(--hover)}
.center{max-width:768px;margin:0 auto}
.welcome{margin-top:60px;text-align:center}
.welcomeLogo{font-size:42px;color:var(--blue)}
.welcome h2{margin:8px 0 16px;font-size:26px}
.samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sample{border:1px solid var(--line);border-radius:12px;background:var(--hover);padding:12px;cursor:pointer;transition:.2s}
.sample:hover{transform:translateY(-1px)}

.msgs{display:flex;flex-direction:column;gap:16px}
.row{display:flex;flex-direction:column;gap:6px}
.row.user{align-items:flex-end}
.row.ai{align-items:flex-start}
.modelLabel{font-size:11px;color:var(--sub)}
.msgActions{display:flex;gap:6px;position:relative;flex-wrap:wrap}
.mini{border:1px solid var(--line);background:transparent;border-radius:8px;color:var(--sub);font-size:11px;padding:3px 8px;cursor:pointer}
.moreMini{padding:3px 10px}
.msg{max-width:70%;line-height:1.6;word-break:break-word;overflow-wrap:anywhere}
.msg.user{background:var(--blueSoft);border-radius:16px;padding:10px 14px}
.msg.ai{padding:0}
.error{color:var(--danger);font-size:12px}
.reasoningCard{width:min(70%,900px);border:1px solid var(--line);border-radius:12px;background:var(--hover);overflow:hidden}
.reasoningHead{width:100%;text-align:left;border:0;background:transparent;color:var(--sub);padding:8px 10px;cursor:pointer;font-size:12px}
.reasoningBody{max-height:0;overflow:hidden;transition:max-height .2s ease;padding:0 10px}
.reasoningCard.open .reasoningBody{max-height:320px;padding:0 10px 10px}
.reasoningText{margin:0;white-space:pre-wrap;font-size:12px;line-height:1.55;color:var(--sub);max-height:250px;overflow:auto}
.reasoningActions{display:flex;justify-content:flex-end;margin-top:8px}

/* Doubao-style typing indicator (3 bouncing dots) */
.typingDots{display:inline-flex;align-items:flex-end;gap:6px;padding:6px 2px}
.typingDots .dot{
  width:9px;height:9px;border-radius:99px;
  background:var(--blue);
  opacity:.85;
  animation:typingBounce 1s infinite ease-in-out;
}
.typingDots .dot:nth-child(2){animation-delay:.16s;opacity:.7}
.typingDots .dot:nth-child(3){animation-delay:.32s;opacity:.55}
@keyframes typingBounce{
  0%, 80%, 100% { transform:translateY(0) scale(1); }
  40% { transform:translateY(-6px) scale(1.05); }
}

.md{color:var(--text)}
.md h1,.md h2,.md h3{margin:12px 0 8px;line-height:1.35;font-weight:800}
.md h1{font-size:22px}
.md h2{font-size:19px}
.md h3{font-size:17px}
.md p{margin:8px 0}
.md strong{font-weight:800}
.md em{font-style:italic}
.md ul,.md ol{margin:8px 0 8px 22px;padding:0}
.md li{margin:4px 0}
.md blockquote{margin:10px 0;padding:8px 12px;border-left:3px solid var(--blue);background:var(--hover);color:var(--sub);border-radius:8px}
.md a{color:var(--blue);text-decoration:underline}
.md code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;background:var(--hover);padding:2px 6px;border-radius:6px;font-size:12px}
.md pre{background:var(--code);color:#e5e7eb;border-radius:12px;padding:10px;overflow:auto;margin:10px 0}
.md pre code{background:transparent;padding:0;color:inherit;font-size:12px}
.md table{width:100%;border-collapse:collapse;margin:10px 0;border:1px solid var(--line);font-size:13px}
.md th,.md td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.md th{background:var(--hover);font-weight:700}
.codeHead{display:flex;justify-content:space-between;font-size:11px;color:#9ca3af;margin-bottom:8px}
.codeHead button{border:1px solid #374151;border-radius:6px;background:transparent;color:#cbd5e1;font-size:11px;padding:2px 6px;cursor:pointer}
html.dark .hljs{background:var(--code)!important;color:#e5e7eb}

.composerWrap{border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.04);padding:10px 16px 8px}
.tools{max-width:768px;margin:0 auto 8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pill{border:1px solid var(--line);border-radius:999px;background:var(--hover);color:var(--sub);font-size:12px;padding:4px 10px;cursor:pointer}
.pill.on{background:var(--blueSoft);color:var(--blue);border-color:transparent}
.composer{max-width:768px;margin:0 auto;display:flex;gap:8px;align-items:flex-end}
.ta{flex:1;resize:none;max-height:calc(24px*6);border:1px solid #e0e0e0;border-radius:24px;padding:12px 16px;font-size:16px;line-height:1.4;background:var(--bg);color:var(--text)}
.send{width:42px;height:42px;border-radius:99px;border:0;background:var(--blue);color:#fff;cursor:pointer}
.send:disabled{background:#9ca3af;cursor:not-allowed}
.foot{max-width:768px;margin:6px auto 0;display:flex;justify-content:space-between;font-size:11px;color:var(--sub)}

.auth{min-height:100vh;display:grid;place-content:center;padding:16px;background:var(--bg)}
.card{width:min(520px,92vw);border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--bg)}
.card h1{margin:0 0 12px;font-size:20px}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{flex:1;border:1px solid var(--line);border-radius:10px;background:transparent;padding:8px;cursor:pointer;color:var(--sub)}
.tab.on{background:var(--hover);color:var(--text)}
.stack{display:grid;gap:8px}
.hint{font-size:12px;color:var(--sub)}

.authCard{width:min(420px,calc(100vw - 32px));padding:22px 18px;border-radius:var(--radius-lg);background:var(--bg);box-shadow:var(--authShadow)}
.authBrand{text-align:center;margin-bottom:12px}
.authLogo{font-size:26px;font-weight:800;letter-spacing:.3px}
.authWelcome{margin-top:6px;font-size:13px;color:var(--sub)}
.authTabs{margin-bottom:14px}
.authTabs .tab{border-radius:var(--radius-md);padding:9px 8px}
.authTabs .tab.on{background:var(--blueSoft);color:var(--blue);border-color:transparent}
.authForm{gap:10px}
.fieldLabel{font-size:12px;color:var(--sub);margin-top:2px}
.fieldWrap{position:relative}
.fieldIcon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--sub);pointer-events:none}
.authInput{height:44px;border:1px solid #e0e0e0;border-radius:var(--radius-md);padding:10px 12px 10px 36px}
.authInput:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent)}
html.dark .authInput{border-color:#303746}
.authSubmit{height:44px;border-radius:var(--radius-md);font-weight:700;transition:background-color .2s,transform .2s}
.authSubmit:hover{filter:brightness(.94)}
.authSubmit:disabled{opacity:.75;cursor:not-allowed;transform:none}
.authSwitch{border:0;background:transparent;padding:4px 0 0;color:var(--blue);cursor:pointer;font-size:13px}
.authSwitch:hover{text-decoration:underline}
.fieldError{margin-top:-3px;font-size:12px;color:var(--danger);animation:shakeX .2s linear}
.authNotice{font-size:13px;padding:4px 2px}
.authNotice.error{color:var(--danger)}
.authNotice.success{color:var(--success)}
@keyframes shakeX{
  0%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  50%{transform:translateX(3px)}
  75%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}

.ctxMenu{position:absolute;right:0;top:26px;min-width:138px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.16);display:none !important;z-index:40}
.ctxMenu.show{display:block !important}
.ctxItem{width:100%;border:0;background:transparent;border-radius:8px;padding:8px 10px;color:var(--text);cursor:pointer;text-align:left;font-size:12px}
.ctxItem:hover{background:var(--hover)}
.ctxItem.danger{color:var(--danger)}

@media (max-width:880px){
  .sidebar{position:fixed;left:-270px;top:0;bottom:0;z-index:30;transition:left .2s}
  .sidebar.open{left:0}
  .mobileClose{display:inline-block}
  .mask{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.2s;z-index:20}
  .mask.show{opacity:1;pointer-events:auto}
  .mobileMenu{display:inline-block}
  .samples{grid-template-columns:1fr}
  .panel.show{grid-template-columns:1fr}
  .msg{max-width:88%}
  .authCard{padding:18px 14px}
  .scrollJump{
    left:calc(100% - 118px);
    bottom:10px;
    padding:7px 10px;
  }
}