:root{--bg:#f6f7f9;--panel:#fff;--line:#e3e6ea;--text:#1b1f24;--muted:#6b7280;
      --brand:#2563eb;--code:#0f172a;--danger:#dc2626}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"PingFang SC",sans-serif;
     background:var(--bg);color:var(--text)}
.hidden{display:none!important}
button{font:inherit;cursor:pointer;border:1px solid var(--line);
       background:var(--panel);border-radius:8px;padding:8px 14px}
button.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
button.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
button.link{border:0;background:0;color:var(--muted);padding:4px}
button.icon{border:0;background:0;font-size:18px;padding:4px 8px}
/* 模型不支持图片/PDF 时回形针按钮会被 disabled，这里统一给所有禁用态一个视觉提示 */
button:disabled{opacity:.4;cursor:not-allowed}
input,textarea,select{font:inherit;padding:9px 12px;border:1px solid var(--line);
                      border-radius:8px;background:var(--panel);color:var(--text)}
.error{color:var(--danger);min-height:1.4em;margin:6px 0 0;font-size:14px}

.gate{position:fixed;inset:0;display:flex;align-items:center;
      justify-content:center;padding:16px}
.gate-card{background:var(--panel);padding:28px;border-radius:14px;width:100%;
           max-width:360px;display:flex;flex-direction:column;gap:12px;
           box-shadow:0 8px 30px rgba(0,0,0,.08)}
.gate-card h1{margin:0;font-size:20px}
.tabs{display:flex;gap:8px}
.tab{flex:1}
.tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}

.app{display:flex;height:100dvh}
.sidebar{width:260px;background:var(--panel);border-right:1px solid var(--line);
         display:flex;flex-direction:column;padding:12px;gap:10px}
.chat-list{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto}
.chat-list li{padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px;
              display:flex;justify-content:space-between;gap:6px}
.chat-list li:hover{background:var(--bg)}
.chat-list li.active{background:#e8efff}
.chat-list .acts{display:flex;gap:6px;flex:none}
.chat-list .del,.chat-list .ren{opacity:0;color:var(--muted);padding:0 2px}
.chat-list li:hover .del,.chat-list li:hover .ren{opacity:1}
/* 触屏没有 hover，不常显的话在手机上等于没有这两个按钮 */
@media (hover:none){.chat-list .del,.chat-list .ren{opacity:.55}}
.chat-list li>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-foot{display:flex;align-items:center;gap:8px;font-size:13px;
              color:var(--muted)}
.sidebar-foot span{flex:1}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
/* 定高是为了让窄屏下的抽屉侧栏能精确地从顶栏下方开始 */
:root{--topbar-h:56px}
.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;
        min-height:var(--topbar-h);box-sizing:border-box;
        background:var(--panel);border-bottom:1px solid var(--line)}
.topbar .icon{display:none;flex:none}
/* flex 子项的 min-width 默认是 auto，意思是「不能小于内容的固有宽度」。
   <select> 的固有宽度由最长的那个选项决定，而模型名可以很长
   （gemini-3.1-flash-lite-preview），52 个模型里总有一个能撑到 257px。
   不写 min-width:0 的话，它在 280px 宽的设备上（DevTools 的 Galaxy Fold）
   会把整个顶栏顶出视口，页面就得左右拉才能看全。这一行是那个 bug 的正解。 */
.model-select{min-width:0;max-width:60%}
/* 同理：min-width:0 才能让 ellipsis 真正生效，否则它顶着内容宽度不肯缩 */
.chat-title{color:var(--muted);font-size:14px;overflow:hidden;min-width:0;flex:1;
            text-overflow:ellipsis;white-space:nowrap;cursor:text}
.chat-title:hover{color:var(--text);text-decoration:underline dotted}
#chat-title-input{flex:1;min-width:0;font-size:14px;padding:4px 8px}
.messages{flex:1;overflow-y:auto;padding:20px;display:flex;
          flex-direction:column;gap:16px}
.msg{max-width:min(760px,86%);padding:12px 16px;border-radius:14px;
     overflow-wrap:anywhere}
.msg.user{align-self:flex-end;background:var(--brand);color:#fff}
.msg.assistant{align-self:flex-start;background:var(--panel);
               border:1px solid var(--line)}
.msg.failed{border-color:var(--danger);color:var(--danger)}
/* 消息上的删除按钮：平时藏起来，悬停才出现，别干扰阅读 */
.msg{position:relative}
.msg-del{position:absolute;top:2px;right:4px;border:0;background:0;
         color:inherit;opacity:0;padding:2px 6px;font-size:13px;line-height:1}
.msg:hover .msg-del{opacity:.45}
.msg-del:hover{opacity:1!important}
/* 触屏没有 hover，常显一点，否则等于没这个按钮 */
@media (hover:none){.msg-del{opacity:.35}}
/* 流到一半失败时追加在内容下方的淡色提示，不抢正文 */
.err-tip{margin-top:8px;font-size:13px;color:var(--danger);opacity:.85}
.msg p{margin:0 0 .7em}
.msg p:last-child{margin-bottom:0}
.msg pre{background:var(--code);color:#e2e8f0;padding:12px 14px;
         border-radius:10px;overflow-x:auto;position:relative}
.msg pre code{font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.msg :not(pre)>code{background:rgba(127,127,127,.16);padding:1px 5px;
                    border-radius:5px;font:.92em ui-monospace,Menlo,monospace}
.copy{position:absolute;top:8px;right:8px;font-size:12px;padding:3px 8px;
      background:rgba(255,255,255,.14);color:#e2e8f0;border:0;border-radius:6px}
.tok-str{color:#a5d6a7}
.tok-com{color:#7f8ea3;font-style:italic}
.tok-num{color:#ffcc80}
.tok-kw{color:#82b1ff}

.composer{border-top:1px solid var(--line);background:var(--panel);padding:10px 14px}
.composer-row{display:flex;align-items:flex-end;gap:8px}
/* 输入框同样要解开收缩下限；按钮则不许被挤变形 */
.composer textarea{flex:1;min-width:0;resize:none;max-height:180px}
.composer-row>button{flex:none}
.attachments{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.chip{font-size:13px;background:var(--bg);border:1px solid var(--line);
      border-radius:999px;padding:4px 10px}
.chip button{border:0;background:0;padding:0 0 0 6px;color:var(--muted)}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;
       align-items:center;justify-content:center;padding:16px;z-index:9}
.modal-card{background:var(--panel);border-radius:14px;width:100%;
            max-width:720px;max-height:86dvh;overflow:auto;
            /* padding 挪到内层，好让标题栏能贴边 sticky */
            padding:0}
.modal-body{padding:0 22px 22px}
/* 关闭按钮以前是卡片里的最后一个元素，排在 52 行模型表后面 ——
   实测它在 top=5220px 的位置，而视口才 780px 高，等于关不掉。
   改成贴顶的 sticky 标题栏，滚到哪儿都在。 */
.modal-head{position:sticky;top:0;z-index:1;background:var(--panel);
            display:flex;align-items:center;gap:10px;
            padding:18px 22px 12px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:18px;flex:1;min-width:0}
.modal-head .icon{font-size:24px;line-height:1;padding:2px 10px}

/* 侧栏遮罩：窄屏下侧栏是浮层，点它外面就该关掉。
   之前没有这层，而 ☰ 按钮又正好被侧栏盖住，于是侧栏一开就关不掉了。 */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:7;display:none}
.scrim.show{display:block}
/* 52 行模型、名字又长，窄屏下必然撑破卡片。
   给表格一个最小宽度、让外层横向滚 —— 否则它会为了塞进 100% 宽而把
   「gemini」折成 ge/mi/ni 三行，宽度是不溢出了，但根本没法读。
   滚动被关在卡片里，不会顶穿页面。 */
.table-wrap{overflow-x:auto;margin-bottom:10px;-webkit-overflow-scrolling:touch}
.table{width:100%;min-width:420px;border-collapse:collapse;font-size:14px}
.table td,.table th{overflow-wrap:anywhere;white-space:nowrap}
.table td:nth-child(2),.table td:nth-child(3){white-space:normal}
.table td,.table th{border-bottom:1px solid var(--line);padding:7px 6px;
                    text-align:left}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.inline-form input{flex:1;min-width:120px}
/* 表格里的可编辑格子：做小做窄，别把表撑爆 */
.table input.cell{width:100%;min-width:90px;padding:4px 6px;font-size:13px}
.table input.cell.num{min-width:56px;width:56px}

/* 52 行里挑那两三行，眼睛得有个抓手：上架的整行浅绿、左侧一条绿边；
   下架的整体灰下去。再配上「已上架的排最前面」，扫一眼就够了。 */
.table tr.row-on td{background:#f0f9f2}
.table tr.row-on td:first-child{box-shadow:inset 3px 0 0 #2e9e5b}
.table tr.row-off td{opacity:.5}
.tag{font-size:12px;padding:2px 8px;border-radius:999px;white-space:nowrap}
.tag.on{background:#dcf3e4;color:#1c7a45}
.tag.off{background:var(--bg);color:var(--muted)}
/* 「下架」是会影响别人的动作，用红边提醒一下；「上架」是安全动作，用主色 */
button.danger-outline{color:var(--danger);border-color:var(--danger);background:var(--panel)}

@media (max-width:760px){
  /* 抽屉从顶栏「下方」开始 —— 侧栏若盖满整个高度，☰ 就被压在
     「新对话」按钮底下：用户凭直觉再点一次 ☰ 不但关不掉侧栏，
     反而会新建一个对话。让出顶栏这一条，☰ 就一直点得到。 */
  .sidebar{position:fixed;inset:var(--topbar-h) auto 0 0;z-index:8;
           transform:translateX(-100%);transition:transform .2s}
  .scrim{inset:var(--topbar-h) 0 0 0}
  .sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.2)}
  .topbar .icon{display:block}
  .msg{max-width:92%}
}