*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#101014;--surface:#16161c;--s2:#1e1e26;--border:#2a2a35;--green:#5af7a8;--green-dim:#3dd68e;--green-dark:#1a3a2a;--cyan:#64d8ff;--yellow:#f5d67b;--red:#ff6b7a;--text:#d4d4dc;--muted:#6b6b80;--font:'JetBrains Mono',monospace}
body{font-family:var(--font);background:var(--bg);color:var(--text);height:100vh;height:100dvh;display:flex;overflow:hidden}
::selection{background:var(--green);color:#000}

/* Sidebar */
.sidebar{width:320px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
/* Sidebar Layout */
.sidebar{width:320px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.logo{padding:20px;border-bottom:1px solid var(--border);flex-shrink:0}
.status{padding:12px 20px;border-bottom:1px solid var(--border);font-size:11px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.actions{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px;flex-shrink:0}

/* Notebook Section */
.nb-section{display:flex;flex-direction:column;border-bottom:1px solid var(--border);flex-shrink:0;max-height:40%;overflow:hidden}
.nb-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px}
.nb-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
.nb-add-btn{background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--green);font-family:var(--font);font-size:14px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.nb-add-btn:hover{border-color:var(--green);background:var(--green-dark)}
.nb-grid{display:flex;flex-direction:column;gap:6px;padding:0 12px 12px;overflow-y:auto}

/* History Section */
.hist-section{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.hist-header{padding:10px 20px;flex-shrink:0}
.hist-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
.hist{flex:1;overflow-y:auto;padding:0 8px}

/* Session Info */
.session-info{padding:12px 16px;border-top:1px solid var(--border);font-size:11px;line-height:1.8;flex-shrink:0}
.session-info .label{color:var(--muted)}
.session-info .val{color:var(--text)}
.session-info .val.ok{color:var(--green)}
.session-info .val.warn{color:var(--yellow)}
.session-info .val.bad{color:var(--red)}
.btn{padding:8px 14px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--text);font-family:var(--font);font-size:11px;cursor:pointer;transition:.2s;text-align:left}
.btn:hover{border-color:var(--green);color:var(--green)}
.btn.active{border-color:var(--green);color:var(--green);background:var(--green-dark)}
.nb-row{display:flex;gap:4px;padding:8px 16px 12px}
.nb-row input{flex:1;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--green);font-family:var(--font);font-size:11px;outline:none}
.nb-row input:focus{border-color:var(--green)}
.nb-row button{padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font);font-size:11px;cursor:pointer}
.nb-row button:hover{border-color:var(--green);color:var(--green)}
.hist-title{padding:10px 20px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
.hist{flex:1;overflow-y:auto;padding:0 8px}
.hist-item{padding:8px 12px;border-radius:4px;cursor:pointer;transition:.15s;border-left:2px solid transparent;margin-bottom:1px}
.hist-item:hover{background:var(--s2);border-left-color:var(--green)}
.hist-item.active{background:var(--green-dark);border-left-color:var(--green)}
.hist-item .q{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.hist-item .m{font-size:10px;color:var(--muted);margin-top:4px}

/* Chat */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{padding:12px 24px;border-bottom:1px solid var(--border);font-size:11px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.topbar .nb{color:var(--cyan)}
.feed{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px}

.feed:empty::before{
    content:'> ready. type a query to begin_';
    display:flex;align-items:center;justify-content:center;height:100%;
    color:var(--muted);font-size:13px;animation:blink 1s step-end infinite;
}
@keyframes blink{50%{opacity:.4}}

.entry{animation:fadeUp .25s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.entry .prompt{font-size:12px;margin-bottom:8px}
.entry .prompt .arrow{color:var(--green);font-weight:700}
.entry .prompt .ip{color:var(--muted);font-size:10px;margin-left:8px}
.entry .prompt .ts{color:var(--muted);font-size:10px;float:right}

.entry.user .body{
    padding:12px 16px;background:var(--s2);border:1px solid var(--border);border-radius:6px;
    font-size:13px;color:var(--green);border-left:3px solid var(--green)
}

.entry.bot .body{
    padding:14px 18px;background:var(--s2);border:1px solid var(--border);border-radius:6px;
    font-size:13px;line-height:1.8;border-left:3px solid var(--cyan);white-space:pre-wrap;color:#e0e0e8
}

.entry.bot .body strong{color:var(--yellow)}
.entry.bot .body em{color:var(--cyan);font-style:normal}

.entry .dur{font-size:10px;color:var(--muted);margin-top:4px;text-align:right}

.typing-row{animation:fadeUp .25s ease}
.typing-row .body{padding:10px 14px;background:var(--s2);border:1px solid var(--border);border-radius:4px;border-left:3px solid var(--cyan)}
.cursor-blink{display:inline-block;width:8px;height:14px;background:var(--cyan);animation:cblink .6s step-end infinite;vertical-align:middle}
@keyframes cblink{50%{opacity:0}}

/* Skeleton Loading */
.skeleton-box { padding: 14px 18px; background: var(--s2); border: 1px solid var(--border); border-radius: 6px; border-left: 3px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.skeleton-line { height: 12px; background: linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; opacity: 0.5; }
.skeleton-line.l-100 { width: 100%; }
.skeleton-line.l-85 { width: 85%; }
.skeleton-line.l-60 { width: 60%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Input */
.input-area{padding:12px 24px 20px;border-top:1px solid var(--border)}
.input-row{display:flex;align-items:flex-end;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:2px}
.input-row:focus-within{border-color:var(--green);box-shadow:0 0 0 1px var(--green-dark)}
.input-prefix{padding:8px 4px 8px 12px;color:var(--green);font-size:13px;font-weight:700;flex-shrink:0;user-select:none}
.input-row textarea{flex:1;background:none;border:none;color:var(--green);font-family:var(--font);font-size:13px;padding:8px 0;resize:none;outline:none;min-height:20px;max-height:100px}
.input-row textarea::placeholder{color:var(--muted)}
.send{width:34px;height:34px;background:var(--green-dark);border:1px solid var(--green);border-radius:3px;color:var(--green);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s}
.send:hover{background:var(--green);color:#000}
.send:disabled{opacity:.2;cursor:not-allowed}
.send svg{width:16px;height:16px}

/* Toast */
.toast{position:fixed;top:16px;right:16px;padding:10px 16px;border-radius:4px;font-size:11px;font-family:var(--font);z-index:100;animation:slideIn .2s ease,fadeOut .2s ease 2.8s forwards;border:1px solid}
.toast.ok{background:#002a1a;color:var(--green);border-color:var(--green-dark)}
.toast.err{background:#2a0000;color:var(--red);border-color:#400}
@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeOut{to{opacity:0}}

::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
/* Mobile */
.menu-btn{display:none;background:none;border:1px solid var(--border);border-radius:4px;color:var(--green);font-family:var(--font);font-size:14px;cursor:pointer;padding:4px 10px}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40}
.overlay.open{display:block}
@media(max-width:768px){
    .sidebar{position:fixed;left:-320px;top:0;bottom:0;z-index:50;transition:left .25s ease;box-shadow:4px 0 20px rgba(0,0,0,.5)}
    .sidebar.open{left:0}
    .menu-btn{display:block}
    .topbar{padding:12px 16px}
    .feed{padding:16px}
    .input-area{padding:10px 16px max(16px, env(safe-area-inset-bottom))}
}
/* Grid */
.nb-grid{display:flex;flex-direction:column;gap:8px;padding:16px;border-bottom:1px solid var(--border)}
.nb-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:10px;cursor:pointer;transition:.2s;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.nb-card:hover{border-color:var(--green)}
.nb-card.active{border-color:var(--green);background:var(--bg)}
.nb-card .title{font-size:12px;color:var(--green);font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:48px}
.nb-card .url{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0.3;transition:0.2s}
.nb-card:hover .nb-actions{opacity:1}
.nb-act-btn{background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--muted);cursor:pointer;font-size:10px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;outline:none;transition:.2s}
.nb-act-btn:hover{color:var(--green);border-color:var(--green)}
.nb-act-btn.del:hover{color:var(--red);border-color:var(--red)}
.nb-add{border:1px dashed var(--border);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;padding:10px;cursor:pointer;transition:.2s}
.nb-add:hover{border-color:var(--green);color:var(--green)}

/* Modal */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;pointer-events:none}
.modal.active{pointer-events:auto}
.modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);opacity:0;transition:opacity .2s}
.modal.active .modal-overlay{opacity:1}
.modal-content{background:var(--surface);border:1px solid var(--border);padding:24px;border-radius:6px;width:100%;max-width:400px;position:relative;z-index:1;transform:scale(.95);opacity:0;transition:transform .2s,opacity .2s}
.modal.active .modal-content{transform:scale(1);opacity:1}
.modal-content.modal-danger{border-color:var(--red)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modal-content h2{font-size:14px;color:var(--green);margin:0}
.modal-content.modal-danger h2{color:var(--red)}
.modal-close{background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--muted);font-family:var(--font);font-size:16px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.modal-close:hover{border-color:var(--red);color:var(--red)}
.modal-content p{font-size:11px;color:var(--muted);margin-bottom:20px;line-height:1.5}
.modal-content p small{color:var(--muted);font-size:10px}
.modal-content input{width:100%;padding:10px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font);font-size:11px;margin-bottom:16px;outline:none}
.modal-content input:focus{border-color:var(--green)}
.modal-actions{display:flex;gap:8px}
.modal-actions button{flex:1;padding:10px;font-family:var(--font);font-size:12px;cursor:pointer;transition:.2s;border-radius:4px}
.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-secondary:hover{border-color:var(--green);color:var(--green)}
.btn-primary{background:var(--green-dark);border:1px solid var(--green);color:var(--green)}
.btn-primary:hover{background:var(--green);color:#000}
.btn-danger{background:#2a0000;border:1px solid #400;color:var(--red)}
.btn-danger:hover{background:var(--red);color:#fff}