:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c232d; --border:#2a323d;
  --text:#e6edf3; --muted:#8b949e; --accent:#3b82f6; --accent2:#2563eb;
  --user:#1f2937; --assistant:#11161d; --err:#f87171;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.5}

/* ---- login ---- */
.login-body{display:flex;align-items:center;justify-content:center}
.login-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:32px;width:320px;display:flex;flex-direction:column;gap:12px}
.login-card h1{margin:0;font-size:24px}
.login-card .muted{margin:0 0 8px;color:var(--muted);font-size:13px}
.login-card input{background:var(--panel2);border:1px solid var(--border);border-radius:8px;
  padding:11px 12px;color:var(--text);font-size:15px}
.login-card button{background:var(--accent);border:none;border-radius:8px;color:#fff;
  padding:11px;font-size:15px;cursor:pointer;font-weight:600}
.login-card button:hover{background:var(--accent2)}
.err{color:var(--err);font-size:13px;min-height:16px}

/* ---- layout ---- */
#app{display:grid;grid-template-columns:240px 1fr 260px;height:100vh}
aside{background:var(--panel);border-right:1px solid var(--border);display:flex;
  flex-direction:column;min-height:0}
#filepanel{border-right:none;border-left:1px solid var(--border)}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px;
  border-bottom:1px solid var(--border);font-weight:600}
.brand{font-size:17px}
.side-head button{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer}
.side-head button:hover{color:var(--text)}

#chatList,#fileList{flex:1;overflow-y:auto;padding:8px}
.chat-item{padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;justify-content:space-between;gap:6px}
.chat-item:hover{background:var(--panel2);color:var(--text)}
.chat-item.active{background:var(--panel2);color:var(--text)}
.chat-item .ctitle{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item .del,.chat-item .ren{opacity:0;color:var(--muted);flex:0 0 auto;padding:0 1px}
.chat-item:hover .del,.chat-item:hover .ren{opacity:.75}
.chat-item .ren:hover,.chat-item .del:hover{opacity:1;color:var(--text)}
.chat-item .ctitle.editing{background:var(--bg);color:var(--text);outline:1.5px solid var(--accent);border-radius:5px;padding:1px 5px;cursor:text;caret-color:var(--accent)}
.logout{margin:8px;padding:9px;background:none;border:1px solid var(--border);border-radius:8px;
  color:var(--muted);cursor:pointer}
.logout:hover{color:var(--text);border-color:var(--muted)}

.file-item{display:flex;flex-direction:column;padding:8px 10px;border-radius:8px;font-size:13px}
.file-item a{color:var(--accent);text-decoration:none;word-break:break-all}
.file-item a:hover{text-decoration:underline}
.file-item .sz{color:var(--muted);font-size:11px}

/* ---- chat ---- */
#main{display:flex;flex-direction:column;min-height:0;position:relative}
#messages{flex:1;overflow-y:auto;padding:24px 0}
.msg{max-width:760px;margin:0 auto 18px;padding:0 24px;display:flex;gap:12px}
.msg .avatar{width:28px;height:28px;border-radius:6px;flex:0 0 28px;font-size:13px;
  display:flex;align-items:center;justify-content:center;font-weight:700}
.msg.user .avatar{background:var(--user)}
.msg.assistant .avatar{background:var(--accent2)}
.msg .body{flex:1;min-width:0}
.msg .body p{margin:0 0 10px}
.msg .body pre{background:#0a0d12;border:1px solid var(--border);border-radius:8px;padding:12px;
  overflow-x:auto;font-size:13px}
.msg .body code{background:#0a0d12;padding:2px 5px;border-radius:4px;font-size:13px}
.msg .body pre code{background:none;padding:0}
.tool-chip{display:inline-block;background:var(--panel2);border:1px solid var(--border);
  border-radius:12px;padding:2px 10px;font-size:12px;color:var(--muted);margin:2px 4px 2px 0}
.filepill{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);
  border:1px solid var(--border);border-radius:8px;padding:6px 10px;margin:4px 6px 0 0;font-size:13px}
.filepill a{color:var(--accent);text-decoration:none}

/* ---- composer ---- */
#composer{display:flex;align-items:flex-end;gap:8px;max-width:760px;margin:0 auto;width:100%;
  padding:12px 24px 20px}
#composer button{background:var(--accent);border:none;border-radius:8px;color:#fff;padding:10px 16px;
  cursor:pointer;font-weight:600}
#composer button:hover{background:var(--accent2)}
#attachBtn{background:var(--panel2);color:var(--muted);padding:10px 12px}
#attachBtn:hover{background:var(--border);color:var(--text)}
#input{flex:1;resize:none;background:var(--panel2);border:1px solid var(--border);border-radius:10px;
  color:var(--text);padding:11px 12px;font:inherit;max-height:200px}
#input:focus{outline:none;border-color:var(--accent)}

.dropzone{position:absolute;inset:0;background:rgba(37,99,235,.15);border:2px dashed var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text);z-index:5}
.hidden{display:none}
.typing{color:var(--muted);font-style:italic}
@media(max-width:900px){#app{grid-template-columns:1fr}aside{display:none}}

/* --- markdown tables, headers, and message export actions --- */
.msg .body table{border-collapse:collapse;margin:10px 0;font-size:13px;display:block;overflow-x:auto}
.msg .body th,.msg .body td{border:1px solid var(--border);padding:5px 10px;text-align:left;white-space:nowrap}
.msg .body th{background:var(--panel2);font-weight:600}
.msg .body h1,.msg .body h2,.msg .body h3,.msg .body h4{margin:12px 0 6px;line-height:1.25;font-weight:600}
.msg .body h1{font-size:1.4em}
.msg .body h2{font-size:1.25em}
.msg .body h3{font-size:1.1em}
.msg .body h4{font-size:1em;color:var(--muted)}
.msg-actions{margin-top:8px;display:flex;gap:8px}
.msg-actions .act{font-size:12px;padding:3px 10px;border:1px solid var(--border);background:transparent;
  color:var(--muted);border-radius:6px;cursor:pointer;transition:.15s}
.msg-actions .act:hover{background:var(--panel2);color:var(--text);border-color:var(--accent2)}

/* ============ v2 polish (2026-06-25) — fancier dark UI, kept light ============ */
:root{
  --accent:#2dd4bf; --accent2:#13b6a6;            /* teal replaces the flat blue */
  --accent-grad:linear-gradient(135deg,#2dd4bf 0%,#0ea5a4 100%);
  --panel:#141a22; --panel2:#1b232e; --border:#27313d; --bg:#0d1117;
}
body{background:radial-gradient(1100px 560px at 72% -12%, #18212d 0%, var(--bg) 58%)}
button{transition:background .15s,color .15s,border-color .15s,filter .15s,box-shadow .2s}
.brand{font-weight:700;letter-spacing:.3px}
.brand::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent-grad);margin-right:8px;vertical-align:middle;box-shadow:0 0 9px rgba(45,212,191,.55)}
.side-head button:hover,#refreshFiles:hover{color:var(--accent)}
.chat-item{transition:background .15s,color .15s,box-shadow .15s}
.chat-item.active{box-shadow:inset 3px 0 0 var(--accent)}
.file-item a:hover{text-decoration:underline}
.msg.assistant .avatar{background:var(--accent-grad)}
/* composer as a floating card with a focus ring */
#composer{background:var(--panel2);border:1px solid var(--border);border-radius:14px;
  padding:8px;box-shadow:0 8px 26px rgba(0,0,0,.38)}
#composer:focus-within{border-color:var(--accent);box-shadow:0 8px 26px rgba(0,0,0,.38),0 0 0 1px rgba(45,212,191,.25)}
#input{background:transparent;border:none;padding:9px 6px}
#input:focus{border:none;outline:none}
#composer button#send{background:var(--accent-grad);color:#06231f;font-weight:700;border-radius:10px;
  box-shadow:0 2px 10px rgba(45,212,191,.25)}
#composer button#send:hover{filter:brightness(1.08);box-shadow:0 4px 16px rgba(45,212,191,.42)}
#composer button#send:active{transform:translateY(1px)}
#attachBtn{background:transparent;border:1px solid var(--border);border-radius:10px;color:var(--muted)}
#attachBtn:hover{background:var(--panel);color:var(--accent);border-color:var(--accent)}

/* ---- elegant thin scrollbars (replace the clunky default ones) ---- */
*{scrollbar-width:thin;scrollbar-color:#33404e transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2f3b48;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3e4d5d;background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ---- never let a long URL/token push the chat sideways (kills horizontal scroll) ---- */
#messages{overflow-x:hidden}
.msg .body{overflow-wrap:anywhere}
.msg .body a{word-break:break-all}
.msg .body p,.msg .body li,.msg .body .content{overflow-wrap:anywhere}

/* ---- password-change modal ---- */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;
  justify-content:center;z-index:20;backdrop-filter:blur(2px)}
.modal-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px 18px 14px;
  width:320px;box-shadow:0 18px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:9px}
.modal-card h3{margin:0 0 4px;font-size:15px;font-weight:600}
.modal-card input{background:var(--panel2);border:1px solid var(--border);border-radius:8px;
  padding:10px 11px;color:var(--text);font-size:14px}
.modal-card input:focus{outline:none;border-color:var(--accent)}
.modal-err{color:var(--err);font-size:12px;min-height:14px}
.modal-row{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
.modal-row button{padding:8px 14px;border-radius:8px;border:none;cursor:pointer;font-size:13px}
.modal-row #pwSave{background:var(--accent-grad);color:#06231f;font-weight:700}
.modal-row .act{background:transparent;border:1px solid var(--border);color:var(--muted)}
.modal-row .act:hover{color:var(--text);border-color:var(--muted)}