@font-face{font-family:local-ui;src:local("Segoe UI")}
:root{color-scheme:light;--ink:#263b50;--muted:#63768a;--line:#dde7ee;--accent:#137d70;--accent-dark:#0d655a;--surface:#fff}
*{box-sizing:border-box}
body{margin:0;background:#f3f7fb;color:var(--ink);font-family:local-ui,Tahoma,sans-serif;font-size:14px}
button,input,textarea,select{font:inherit}
button{cursor:pointer;color:inherit;border:0;background:transparent}
button:disabled{opacity:.55;cursor:wait}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.app{display:flex;height:100dvh;min-height:460px}
.sidebar{width:284px;flex-shrink:0;background:#ffffffed;padding:28px 20px;display:flex;flex-direction:column;border-left:1px solid var(--line)}
.brand{display:flex;gap:12px;align-items:center;margin:4px 4px 30px}
.brand-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:15px;background:linear-gradient(145deg,#dcf7ef,#dfeefa);color:var(--accent);font-size:30px}
.brand strong{font-size:18px}
.brand small{display:block;font-size:9px;letter-spacing:1.3px;color:var(--muted);margin-top:6px;direction:ltr}
.brand{display:block;text-align:center}
.brand-logo{display:block;width:100%;height:auto;max-width:230px;margin:0 auto 8px}
.brand strong{display:none}
.primary{background:var(--accent);color:#fff;border-radius:11px;padding:12px 20px;font-weight:700;box-shadow:0 4px 12px #137d7018;transition:background .18s,box-shadow .18s}
.primary:hover:not(:disabled){background:var(--accent-dark);box-shadow:0 5px 16px #137d702a}
.new{margin-bottom:28px;width:100%}
.side-caption{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;padding:0 8px;margin-bottom:14px}
.side-caption span{background:#edf3f8;padding:2px 8px;border-radius:6px;color:#47657e}
nav{overflow:auto;flex:1;min-height:0}
nav button{width:100%;text-align:right;padding:14px 12px;border:1px solid transparent;border-radius:11px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav button:hover:not(:disabled){background:#f3f7fa}
nav button.active{background:#edf8f5;border-color:#c3e7dd;color:#125e55}
nav button small{display:block;font-size:11px;color:var(--muted);margin-top:5px}
.side-bottom{border-top:1px solid var(--line);padding-top:20px;color:#47657b;font-size:11px;line-height:1.9}
.side-bottom p{color:var(--muted);margin:10px 0 0}
.dot{display:inline-block;background:#1a9b77;width:7px;height:7px;border-radius:50%;margin-left:7px;box-shadow:0 0 0 3px #1a9b7710}
main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 75% 0%,#e7f6f1 0%,transparent 48%),linear-gradient(150deg,#f9fcfe,#f1f6fc)}
header{padding:24px 40px 20px;display:flex;gap:18px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);flex-shrink:0}
header>div:first-child{min-width:0}
.eyebrow{color:var(--accent);font-size:11px;letter-spacing:.3px}
h1{font-size:21px;font-weight:650;margin:7px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55vw}
.connection{font-size:12px;color:var(--muted);white-space:nowrap}
.version{display:inline-block;background:#fff9;border:1px solid #d4e4e8;padding:5px 10px;border-radius:7px;margin-right:12px;color:#517085;direction:ltr;font-size:10px}
.context{margin:16px 40px 0;background:#ffffffb8;border:1px solid var(--line);border-radius:14px;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0}
.context>div:first-child{min-width:0}
.context-label{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}
#context-id{direction:ltr;font:11px Consolas,monospace;color:#426b88;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.context-tags{display:flex;flex-wrap:wrap;gap:7px}
.context-tags span{font-size:11px;border-radius:7px;background:#edf3f8;padding:6px 10px;color:#516d83;overflow-wrap:anywhere}
#role-badge{color:#126556;background:#def3eb}
#chat{flex:1;min-height:0;overflow:auto;padding:24px 40px;scroll-behavior:smooth;scrollbar-color:#b9cbd7 transparent;scrollbar-width:thin}
.welcome{text-align:center;margin:clamp(15px,4vh,55px) auto 30px;max-width:710px}
.welcome-icon{font-size:44px;color:var(--accent);width:78px;height:78px;margin:0 auto 24px;border:1px solid #c7e5dd;border-radius:25px;background:linear-gradient(145deg,#fff,#e1f4ed);box-shadow:0 12px 35px #137d7012}
.welcome h2{font-size:32px;margin:13px 0 17px;font-weight:650}
.welcome p{color:var(--muted);line-height:2.1}
.features{display:flex;gap:12px;margin:28px auto;max-width:650px}
.features div{padding:20px 12px;width:33.33%;border:1px solid var(--line);border-radius:14px;background:#ffffffd6;box-shadow:0 5px 20px #426b8805}
.features b{display:block;color:var(--accent);font-size:24px;margin-bottom:14px}
.features strong{display:block;font-size:12px}
.features small{display:block;margin-top:9px;color:var(--muted);font-size:10px}
footer{padding:8px 40px 20px;flex-shrink:0}
#composer{background:var(--surface);border:1px solid #cbdce5;border-radius:18px;padding:16px 18px;box-shadow:0 8px 30px #263b500a;transition:border-color .18s,background .18s}
#composer:focus-within{border-color:#78bcaf;box-shadow:0 0 0 3px #137d700b,0 8px 30px #263b500a}
#composer.is-busy{background:#f1f7f6;border-color:#c5ded8;box-shadow:none}
textarea{background:transparent;color:var(--ink);border:0;width:100%;resize:none;outline:0;line-height:1.9;min-height:74px;display:block}
textarea::placeholder{color:#6f8293}
textarea:disabled{color:var(--muted);cursor:wait;opacity:1;-webkit-text-fill-color:var(--muted)}
.composer-bottom{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:10px}
.tools{display:flex;align-items:center;gap:14px;color:#516c80;font-size:12px}
.tools button{padding:7px 4px}
.tools button:hover:not(:disabled){color:var(--accent)}
.tools label{display:flex;align-items:center;gap:6px}
input[type=checkbox]{accent-color:var(--accent)}
.footnote{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:10px;margin:12px 2px 0;line-height:1.7}
.message{margin:12px 0 25px;display:flex;gap:13px;max-width:1100px}
.avatar{width:34px;height:34px;background:#deeee9;border-radius:11px;display:grid;place-items:center;flex-shrink:0;color:var(--accent)}
.user .avatar{background:#e1ebf9;color:#426c9b}
.message-main{flex:1;min-width:0}
.message-head{font-size:11px;color:var(--muted);margin-bottom:8px;display:flex;gap:13px;align-items:center}
.bubble{white-space:pre-wrap;overflow-wrap:anywhere;line-height:2;font-size:14px;padding:18px 22px;background:#fff;border:1px solid var(--line);border-radius:4px 15px 15px 15px;box-shadow:0 4px 16px #263b5004}
.user .bubble{background:#eaf6f2;border-color:#cce7df}
.message-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:9px;font-size:11px;color:#526f84}
.message-actions button:hover{color:var(--accent)}
.type{background:#def2e9;color:#175f4d;padding:5px 10px;border-radius:7px}
.type.needs_information{background:#fff1d7;color:#775316}
.type.escalation_ready{background:#ddf1e3;color:#23633b}
.type.restricted{background:#eee6f6;color:#684783}
.file-image{max-width:100%;max-height:450px;object-fit:contain;border-radius:12px;display:block;margin-top:14px;border:1px solid var(--line)}
.download{color:var(--accent);text-decoration:none}
.escalate{padding:6px 12px;border:1px solid #93c3a5;border-radius:7px;color:#24663b}
.pending{display:flex;align-items:center;gap:10px;color:var(--accent);font-size:12px;padding:16px 20px;background:#e7f4ef;border:1px solid #cde6dc;border-radius:12px;margin:0 47px 16px 0;line-height:1.8}
.pending::before{content:'';width:16px;height:16px;flex-shrink:0;border:2px solid #b4d8cd;border-top-color:var(--accent);border-radius:50%;animation:spin .85s linear infinite}
.pending.error{background:#fff0ef;border-color:#efd1ce}
.pending.error::before{content:'!';animation:none;border:0;display:grid;place-items:center;font-weight:bold}
@keyframes spin{to{transform:rotate(360deg)}}
#attachments{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:8px;max-height:110px;overflow:auto}
.attachment{display:flex;align-items:center;border:1px solid #ccdde8;border-radius:10px;background:#fff;padding:8px 12px;max-width:250px;font-size:11px}
.attachment span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attachment button{margin-right:9px;color:#a84440}
.attachment img{height:36px;border-radius:5px;margin-left:9px}
.error{color:#ab3631}
dialog{border:1px solid #d0dfe7;border-radius:20px;background:#fff;color:var(--ink);padding:30px;width:min(530px,95vw);box-shadow:0 20px 80px #263b502d}
dialog::backdrop{background:#243c5366;backdrop-filter:blur(5px)}
.dialog-title{display:flex;justify-content:space-between;align-items:center}
.dialog-title h2{margin:0;font-size:22px}
.dialog-title button{font-size:25px;color:var(--muted)}
dialog p{color:var(--muted);font-size:12px;line-height:1.9}
dialog label{display:block;font-size:12px;color:#47657b;margin:15px 0}
dialog input,dialog select{display:block;width:100%;border:1px solid #cbdce5;background:#f7fafc;color:var(--ink);border-radius:9px;padding:11px 12px;margin-top:8px}
.two{display:flex;gap:15px}
.two label{width:50%}
.secure-note{color:#316955;background:#ecf7f1;border:1px solid #cde7d9;padding:12px;border-radius:10px;font-size:11px;line-height:1.8;margin:15px 0 20px}
.identity-box{padding:12px;border:1px solid #d3e6e4;border-radius:12px;background:#f0faf7;margin-bottom:16px;font-size:12px;line-height:1.9}
.identity-box button{display:block;color:#176e64;margin-top:7px;text-align:right}
[hidden]{display:none!important}
#login-submit{width:100%}
#database-dialog{width:min(900px,95vw)}
#database-result{white-space:pre-wrap;overflow-wrap:anywhere;max-height:45vh;overflow:auto;background:#f4f8fc;padding:12px;border-radius:10px;font:12px Consolas,monospace}
#create{width:100%}
@media(max-width:1000px){.sidebar{width:225px}header,#chat,footer{padding-right:22px;padding-left:22px}.context{margin-right:22px;margin-left:22px;padding:12px}.context-tags span{font-size:9px}}
@media(max-width:720px){.sidebar{width:72px;padding:20px 8px}.brand{margin:0 0 20px}.brand>div,.side-caption,.side-bottom,nav button small{display:none}.brand-icon{width:46px;height:46px}.new{font-size:0;padding:15px 0}.new::after{content:'＋';font-size:22px}nav button{font-size:10px;padding:10px 4px}header{padding:18px 14px}h1{font-size:16px;max-width:55vw}.connection{font-size:0}.version{font-size:9px;margin-right:0}.context{margin:10px 12px 0;display:block;padding:10px}.context-tags{margin-top:8px}#chat{padding:15px 12px}.welcome h2{font-size:25px}.features{gap:6px}.features strong{font-size:10px}.features small{font-size:9px}.features div{padding:15px 5px}footer{padding:8px 12px 14px}.tools{gap:8px;font-size:10px}.tools button span{display:none}.footnote{display:block;font-size:9px}.footnote>span{display:block}.bubble{padding:13px;font-size:13px}.two{display:block}.two label{width:100%}.pending{margin-right:0}}
@media(max-width:480px){.sidebar{width:58px;padding:16px 5px}.brand-icon{width:44px;height:44px}.context-tags span{padding:4px 6px}.composer-bottom{flex-wrap:wrap;gap:8px}#composer{padding:12px}#send{padding:10px 15px;font-size:12px;margin-right:auto}.message{gap:8px}.avatar{width:28px;height:28px}.context-label{font-size:9px}.features{flex-direction:column}.features div{width:100%;padding:12px}.features b{margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(max-width:720px){.brand-logo{width:45px;height:45px;object-fit:cover;object-position:left}.identity-box{padding:4px;font-size:9px}.identity-box button{text-align:center;font-size:9px}#identity-name{display:none}}
#send{min-width:145px;white-space:nowrap;font-variant-numeric:tabular-nums}