:root{--bg:#212121;--side:#171717;--panel:#2f2f2f;--hover:#2a2a2a;--text:#ececec;--muted:#b4b4b4;--line:rgba(255,255,255,.10);--accent:#10a37f}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;background:var(--bg);color:var(--text)}
.app{height:100vh;display:flex;overflow:hidden}
.sidebar{width:280px;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:10px}
.newchat{height:44px;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:12px;cursor:pointer;text-align:left;padding:0 12px;font-size:14px;margin-bottom:10px}
.newchat:hover{background:var(--hover)}
.side-title{color:#888;font-size:12px;margin:8px 8px}
.conv-list{flex:1;overflow:auto}
.conv{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 8px;border-radius:10px;cursor:pointer;color:#ddd;font-size:14px}
.conv:hover{background:var(--hover)}.conv.active{background:#2f2f2f}
.conv-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.del{opacity:.55;border:0;background:transparent;color:#ccc;cursor:pointer;display:none}.conv:hover .del{display:block}
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}.menu-btn{display:none;border:0;background:transparent;color:#ececec;font-size:24px;cursor:pointer}
.logo{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#10a37f,#7c3aed);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff}
.actions{display:flex;gap:8px;align-items:center}
.select,.mini{background:#2f2f2f;color:#ececec;border:1px solid var(--line);border-radius:10px;padding:8px 10px;outline:none}.mini{cursor:pointer}
.chat-scroll{flex:1;overflow:auto}
.chat{width:100%;max-width:900px;margin:0 auto;padding:24px 14px 170px}
.welcome{min-height:calc(100vh - 270px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#ececec}
.welcome h1{font-size:30px;margin:0 0 18px;font-weight:650}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:660px;width:100%}
.card{background:#2f2f2f;border:1px solid var(--line);color:#e8e8e8;border-radius:14px;padding:14px;text-align:left;cursor:pointer;min-height:74px}
.card:hover{background:#383838}.card b{display:block;margin-bottom:6px;font-size:14px}.card span{font-size:13px;color:#b4b4b4}
.msg{display:flex;gap:14px;padding:18px 0;line-height:1.75;word-break:break-word}
.msg.user{justify-content:flex-end}.msg.user .avatar{order:2;background:#565869}.msg.assistant .avatar{background:var(--accent)}
.avatar{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;margin-top:2px}
.content{max-width:78%;white-space:pre-wrap;font-size:15.5px}.user .content{background:#2f2f2f;border-radius:18px;padding:12px 15px}.assistant .content{padding:4px 0;max-width:calc(100% - 46px)}
.filecards{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.filecard{background:#333;border:1px solid var(--line);border-radius:12px;padding:8px;min-width:230px}
.filecard .fname{font-size:13px;color:#fff;margin-bottom:5px;word-break:break-all}
.filecard .meta{font-size:12px;color:#bbb;margin-bottom:6px}
.filecard a{font-size:12px;color:#93c5fd;text-decoration:none}
.filecard img{max-width:220px;max-height:150px;border-radius:8px;display:block;margin-top:6px}
.filecard audio,.filecard video{width:260px;max-width:100%;display:block;margin-top:6px}
.composer-wrap{position:fixed;left:280px;right:0;bottom:0;background:linear-gradient(to top,#212121 70%,rgba(33,33,33,0));padding:34px 12px 18px}
.composer{max-width:900px;margin:0 auto;position:relative}
.inputbox{background:#2f2f2f;border:1px solid var(--line);border-radius:26px;display:flex;align-items:flex-end;padding:8px 8px 8px 10px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.iconbtn{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:#ececec;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 38px}
.iconbtn:hover{background:#3a3a3a}
textarea{flex:1;background:transparent;color:#ececec;border:0;resize:none;outline:none;min-height:34px;max-height:180px;font-size:16px;line-height:1.55;padding:6px 8px;font-family:inherit}
.send{width:36px;height:36px;border-radius:50%;border:0;background:#ececec;color:#111;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 36px}
.send:disabled{background:#555;color:#999;cursor:not-allowed}
.upload-menu{display:none;position:absolute;left:0;bottom:70px;background:#2f2f2f;border:1px solid var(--line);border-radius:16px;padding:8px;width:210px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.upload-menu.show{display:block}.upload-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;cursor:pointer;color:#ececec;font-size:14px}.upload-item:hover{background:#3a3a3a}
.file-preview{display:none;margin:0 0 8px 4px;color:#cfcfcf;font-size:13px;background:#2f2f2f;border:1px solid var(--line);border-radius:12px;padding:8px 10px;max-height:140px;overflow:auto}
.file-preview.show{display:block}.err{color:#ffb4b4}
.local-previews{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.local-item{background:#333;border:1px solid var(--line);border-radius:10px;padding:6px;font-size:12px;max-width:180px}
.local-item img{max-width:160px;max-height:110px;border-radius:8px;display:block;margin-top:5px}
.local-item video,.local-item audio{width:160px;display:block;margin-top:5px}
.loading{display:inline-flex;align-items:center;gap:5px}.dot{width:6px;height:6px;background:#d1d5db;border-radius:50%;animation:bounce 1.2s infinite ease-in-out}.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.hidden-input{display:none}.overlay{display:none}
@media(max-width:800px){.sidebar{position:fixed;left:-290px;top:0;bottom:0;z-index:30;transition:.2s}.sidebar.show{left:0}.overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20}.menu-btn{display:block}.composer-wrap{left:0}.topbar{height:52px;padding:0 12px}.brand span{display:none}.select{max-width:155px}.chat{padding:16px 12px 160px}.cards{grid-template-columns:1fr}.welcome h1{font-size:25px}.msg{gap:10px}.avatar{width:28px;height:28px;flex-basis:28px}.content{max-width:82%}.photo-btn{display:none}}