:root{
    --bg:#fff;
    --sidebar:#171717;
    --sidebar-hover:#242424;
    --sidebar-line:#303030;
    --text:#202123;
    --muted:#6e6e80;
    --line:#e5e5e5;
    --soft:#f4f4f4;
    --dark:#111;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
button,input,textarea,select{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}
.app-shell{height:100vh;display:flex;overflow:hidden}

.sidebar{width:260px;background:var(--sidebar);color:#f5f5f5;display:flex;flex-direction:column;flex-shrink:0}
.sidebar-top{padding:12px 10px 7px}
.brand{height:40px;display:flex;align-items:center;gap:10px;padding:0 4px 8px}
.brand-mark{width:40px;height:40px;border-radius:12px;background:#111;color:#fff;display:grid;place-items:center;font-weight:800}
.sidebar .brand-mark{background:#fff;color:#111}
.brand-mark.small{width:28px;height:28px;border-radius:8px}
.brand-mark.hero{width:48px;height:48px;border-radius:15px;margin:auto;background:#111;color:#fff}

.btn{border:1px solid var(--line);background:#fff;padding:9px 12px;border-radius:10px}
.btn.primary{background:#111;color:#fff;border-color:#111}
.btn.full{width:100%}

.new-chat{
    width:100%;text-align:left;background:#232323;color:#fff;border:1px solid #383838;
    font-weight:600;padding:10px 12px;border-radius:10px;margin-top:2px
}
.new-chat:hover{background:#2c2c2c}
.search-wrap{padding:10px 0 4px}
.search-wrap input{
    width:100%;border:1px solid #3b3b3b;background:#fff;color:#111;border-radius:10px;
    padding:9px 10px;outline:0
}
.search-wrap input:focus{box-shadow:0 0 0 2px #ffffff22}

.conversation-list{padding:7px 8px;overflow:auto;flex:1}
.conv{display:flex;align-items:center;border-radius:9px;margin:2px 0}
.conv:hover,.conv.active{background:#2a2a2a}
.conv .title{flex:1;border:0;background:transparent;color:#eee;text-align:left;padding:9px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .delete{opacity:0;border:0;background:transparent;padding:7px;color:#aaa}
.conv:hover .delete{opacity:1}

.sidebar-bottom{border-top:1px solid var(--sidebar-line);padding:11px 10px}
.usage-card{padding:6px 4px 10px}
.usage-track{height:5px;background:#3a3a3a;border-radius:99px;overflow:hidden;margin-bottom:11px}
.usage-track span{display:block;height:100%;background:#f0f0f0;border-radius:99px;transition:width .2s}
.usage-line{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#d5d5d5;padding:2px 0}
.usage-line strong{font-size:12px;color:#fff}
.usage-line.secondary{color:#9f9f9f;margin-top:3px}
.usage-line.secondary strong{color:#bdbdbd}
.side-link{display:block;padding:8px 7px;border-radius:8px;font-size:14px;color:#eee}
.side-link:hover{background:#262626}
.user-card{margin-top:6px;padding:9px 7px 0;border-top:1px solid var(--sidebar-line);display:flex;flex-direction:column}
.user-card span{font-size:12px;color:#999;overflow:hidden;text-overflow:ellipsis}

.main{position:relative;min-width:0;display:flex;flex-direction:column;flex:1;background:#fff}
.topbar{height:56px;display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f1f1;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);z-index:5}
.topbar select{border:1px solid #dedede;background:#fff;font-weight:600;padding:8px 10px;border-radius:10px}
.mobile-only{display:none}.icon-btn{border:0;background:transparent;font-size:20px}

.chat-area{flex:1;overflow:auto;scroll-behavior:smooth;padding:0 18px 260px;scroll-padding-bottom:260px}
.messages{max-width:790px;margin:0 auto;padding-top:28px}
.empty-state{max-width:760px;margin:10vh auto 0;text-align:center}
.empty-state h1{font-size:30px;margin:17px 0 7px}
.empty-state p{color:var(--muted);line-height:1.5}
.suggestions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:24px}
.suggestions button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:15px;text-align:left}
.suggestions button:hover{background:#fafafa}

.message{display:flex;margin:22px 0}
.message.user{justify-content:flex-end}
.bubble{max-width:100%;font-size:15px;line-height:1.62}
.message.user .bubble{max-width:78%;padding:10px 14px;background:#f4f4f4;border-radius:18px 18px 4px 18px;white-space:pre-wrap}
.message.assistant .bubble{width:100%}
.message-meta{margin-top:8px;color:#9a9a9a;font-size:11px}
.status{font-size:13px;color:#777;margin:8px 0;display:flex;align-items:center;gap:7px}
.status:before{content:"";width:7px;height:7px;border-radius:50%;background:#999;animation:pulse .8s infinite alternate}

/* Rendered markdown */
.md{line-height:1.65}
.md p{margin:0 0 12px}
.md h1,.md h2,.md h3,.md h4{margin:20px 0 8px;line-height:1.25}
.md h1{font-size:1.45em}.md h2{font-size:1.3em}.md h3{font-size:1.15em}.md h4{font-size:1.03em}
.md ul,.md ol{margin:8px 0 14px;padding-left:24px}
.md li{margin:3px 0}
.md code.inline{background:#f2f2f2;padding:2px 5px;border-radius:5px;font:0.9em "SFMono-Regular",Consolas,monospace}
.md blockquote{margin:12px 0;padding-left:14px;border-left:3px solid #ddd;color:#666}
.md strong{font-weight:650}

.code-block{
    background:#17191e;color:#e9edf1;border-radius:12px;overflow:hidden;margin:15px 0;
    max-width:100%
}
.code-head{background:#272a31;display:flex;align-items:center;justify-content:space-between;padding:7px 10px;font-size:12px;color:#c7cad0}
.code-actions{display:flex;gap:6px}
.code-actions button{border:0;background:#373b45;color:#fff;border-radius:6px;padding:4px 8px;font-size:11px}
.code-scroll{
    max-height:430px;
    overflow:auto;
    overscroll-behavior:contain
}
.code-block pre{
    margin:0;padding:14px;min-width:max-content;
    font:13px/1.5 "SFMono-Regular",Consolas,monospace;white-space:pre
}

.asset-card{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:9px 11px;border-radius:12px;margin:8px 8px 0 0;background:#fff}
.asset-card .asset-icon{font-size:20px}.asset-card small{display:block;color:#888}
.generated-image{max-width:min(100%,650px);border-radius:15px;border:1px solid #eee;display:block;margin-top:10px}

.composer-wrap{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 10px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 26%)}
.attachment-strip{max-width:790px;margin:0 auto 7px;display:flex;gap:7px;flex-wrap:wrap}
.attachment-chip{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 9px;font-size:12px;display:flex;gap:8px;align-items:center}
.attachment-chip button{border:0;background:transparent;color:#777}

.composer{
    max-width:790px;margin:auto;border:1px solid #d8d8d8;border-radius:24px;
    padding:12px 12px 10px;box-shadow:0 4px 22px rgba(0,0,0,.07);background:#fff;
    cursor:text
}
.composer:focus-within{border-color:#c6c6c6;box-shadow:0 4px 24px rgba(0,0,0,.09)}
.composer textarea{
    display:block;width:100%;border:0;resize:none;outline:0;min-height:54px;max-height:170px;
    line-height:1.5;padding:3px 5px 8px;background:transparent;cursor:text
}
.composer-bottom{display:flex;align-items:center;gap:7px;min-height:36px}
.attach-btn{
    width:34px;height:34px;border:1px solid #e0e0e0;border-radius:50%;display:grid;place-items:center;
    font-size:21px;color:#555;cursor:pointer
}
.attach-btn:hover{background:#f7f7f7}
.composer-hint{font-size:11px;color:#a0a0a0}
.spacer{flex:1}
.send-btn{width:34px;height:34px;border:0;background:#111;color:#fff;border-radius:50%;font-size:19px}
.send-btn:disabled{opacity:.3}
.composer-note{text-align:center;font-size:10px;color:#aaa;margin-top:6px}

.notice{padding:11px 13px;border-radius:10px;margin:12px 0;font-size:14px}
.notice.error{background:#fef3f2;color:#b42318;border:1px solid #fecdca}
.notice.success{background:#ecfdf3;color:#067647;border:1px solid #abefc6}
.auth-page{min-height:100%;display:grid;place-items:center;background:#f5f5f5;padding:20px}
.auth-card{width:min(430px,100%);background:#fff;padding:30px;border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 35px rgba(0,0,0,.06)}
.auth-card label,.admin-page label{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-size:13px;color:#555}
.auth-card input,.admin-page input,.admin-page select{border:1px solid #d8d8d8;border-radius:9px;padding:9px}
.muted{color:#777}
.admin-page{background:#f5f6f8;min-height:100%}.admin-container{max-width:1150px;margin:auto;padding:30px 20px 80px}
.admin-head{display:flex;justify-content:space-between;align-items:center}.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin-top:20px}
.admin-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end}.admin-grid label{margin:0}
.user-row{border-top:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:1.2fr 2fr 1.4fr;gap:18px}
.user-main{display:flex;flex-direction:column;gap:3px}.user-main span,.user-main small{color:#777}.user-controls{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.password-form{display:flex;gap:7px;align-items:center}
@keyframes pulse{to{opacity:.25}}
@media(max-width:900px){
    .sidebar{position:fixed;left:-270px;top:0;bottom:0;z-index:20;transition:.2s}
    .sidebar.open{left:0;box-shadow:10px 0 40px #0004}
    .mobile-only{display:block}.admin-grid{grid-template-columns:1fr 1fr}.user-row{grid-template-columns:1fr}
    .chat-area{padding-left:12px;padding-right:12px}.composer-wrap{padding-left:10px;padding-right:10px}
}
@media(max-width:600px){
    .suggestions{grid-template-columns:1fr}.message.user .bubble{max-width:92%}.empty-state{margin-top:6vh}
    .empty-state h1{font-size:26px}.admin-grid{grid-template-columns:1fr}.composer-hint{display:none}
}


/* v2.2 attachment previews */
.message-attachments{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:8px;
}
.message-attachment{
    max-width:260px;
}
.message-attachment-image{
    display:block;
    width:auto;
    max-width:260px;
    max-height:180px;
    object-fit:cover;
    border-radius:12px;
    border:1px solid #dedede;
    background:#fff;
}
.message-attachment-name{
    max-width:260px;
    margin-top:4px;
    font-size:10px;
    color:#888;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.message-attachment-file{
    display:flex;
    align-items:center;
    gap:7px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;
    padding:8px 10px;
    color:#333;
}
.user-text + .message-attachments{
    margin-top:9px;
}
.attachment-chip.image-chip{
    padding:5px 7px 5px 5px;
}
.attachment-chip.image-chip img{
    width:40px;
    height:40px;
    object-fit:cover;
    border-radius:8px;
    border:1px solid #ddd;
}


/* v2.3 scrolling safety */
.chat-area{
    padding-bottom:260px !important;
    scroll-padding-bottom:260px;
}
.messages{
    padding-bottom:24px;
}
.status{
    color:#777;
}


/* v2.4 waiting state */
.response-buffer[hidden]{
    display:none !important;
}
.status{
    min-height:24px;
    margin:10px 0;
}


/* v2.5.1 - prevent long attachment names from overflowing user bubbles */
.message.user .bubble{
    min-width:0;
    overflow:hidden;
}

.message-attachments{
    min-width:0;
    max-width:100%;
}

.message-attachment{
    min-width:0;
    max-width:100%;
}

.message-attachment-file{
    min-width:0;
    max-width:100%;
    overflow:hidden;
}

.message-attachment-file > span:last-child{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.message.user .message-attachment-file{
    width:min(100%, 360px);
}

@media(max-width:600px){
    .message.user .message-attachment-file{
        width:100%;
        max-width:100%;
    }
}


/* v2.5.2 - clickable links in assistant responses */
.md .chat-link{
    color:inherit;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:2px;
    overflow-wrap:anywhere;
    cursor:pointer;
}
.md .chat-link:hover{
    text-decoration-thickness:2px;
}