/* Palette sampled from https://substi.ai/assets/styles.css on 2026-09-07.
   Component geometry mirrors src/app.css: btn, card, input, floating-popover. */
:root {
  font:15px/1.55 Inter,"Avenir Next",Avenir,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--bg); color-scheme:dark;
  --bg:#191a1c; --sidebar:#18191b; --panel:#242527; --panel-soft:#202123;
  --text:#e7eaf0; --text-strong:#ffffff; --muted:#b5c1d3;
  --line:#3d4149; --hover:#303238; --accent:#155eef; --accent-deep:#0d49bf;
  --accent-soft:rgba(21,94,239,.18); --lavender:#7868d8; --on-accent:#ffffff;
  --danger:#ff9cac; --shadow-color:rgba(7,18,38,.24);
  --radius-lg:.5rem; --radius-xl:.75rem;
}
*{box-sizing:border-box}
body{margin:0}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0;background:transparent;color:inherit;border-radius:8px;padding:9px 13px}
button:hover{background:var(--hover)}
button:disabled{opacity:.45;cursor:default}
a{color:inherit;text-decoration:none}
input,select,textarea{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:10px 12px;color:inherit;max-width:100%}
textarea{resize:vertical}
label{display:block;font-size:.9rem;font-weight:600;margin:14px 0}
label input:not([type=checkbox]),label textarea{display:block;width:100%;margin-top:7px}
h1,h2,h3,p{margin-top:0}
h1{font-size:2rem;letter-spacing:-.045em;font-weight:600;line-height:1.25}
h2{font-size:1.5rem;letter-spacing:-.03em}
h3{font-size:1.05rem}
.primary{background:var(--accent);color:var(--on-accent)}
.primary:hover{background:var(--accent-deep)}
.secondary{border:1px solid var(--line);background:var(--panel)}
.text-button{color:var(--accent);font-size:.85rem}
.icon-button{font-size:1.4rem;padding:3px 9px}
.muted{color:var(--muted);font-size:.85rem}
.eyebrow{font-size:.72rem;letter-spacing:.16em;color:var(--muted);font-weight:700}
.error{color:var(--danger);white-space:pre-wrap}
.notice{background:var(--accent-soft);border:1px solid var(--line);padding:12px 18px;border-radius:9px}
.mark{display:inline-grid;place-items:center;background:var(--accent);color:var(--on-accent);border-radius:10px;width:35px;height:35px;font:italic 28px Georgia,serif}
.brand{display:flex;align-items:center;gap:10px;font-size:1.1rem;white-space:nowrap}
.brand strong{font-weight:400;color:var(--muted)}
.login-screen{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.login-art{position:relative;overflow:hidden;padding:60px 12%;background:var(--sidebar)}
.login-art h1{font:4rem/1.1 Georgia,serif;letter-spacing:-.05em;margin-top:110px;color:var(--text-strong)}
.login-art p{color:var(--muted);font-size:1.1rem}
.art-lines{position:absolute;width:400px;height:400px;bottom:-220px;right:-100px;border:1px solid var(--accent);border-radius:50%;box-shadow:0 0 0 50px var(--sidebar),0 0 0 51px var(--lavender),0 0 0 101px var(--sidebar),0 0 0 102px var(--line)}
.login-form{align-self:center;justify-self:center;width:min(390px,85%);padding:50px 0}
.login-form h2{font-size:2.2rem}
.login-form .primary{width:100%;margin-top:14px}
.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);height:100vh}
.sidebar{display:flex;flex-direction:column;gap:24px;padding:26px 18px 0;border-right:1px solid var(--line);background:var(--sidebar);min-height:0}
.sidebar .brand{margin:0 10px}
.side-nav{display:grid;gap:5px}
.side-nav button{text-align:left}
.history-heading{font-size:.66rem;letter-spacing:.14em;font-weight:700;color:var(--muted);padding-left:12px;margin-bottom:-12px}
.history{flex:1;overflow:auto}
.history button{display:block;width:100%;text-align:left;margin-bottom:5px;font-size:.83rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history .selected{background:var(--accent-soft)}
.history small{display:block;color:var(--muted);font-size:.68rem}
.account{display:flex;align-items:center;gap:10px;padding:18px 0;border-top:1px solid var(--line);font-size:.83rem}
.account>div{flex:1;overflow:hidden}
.account strong,.account small{display:block;overflow:hidden;text-overflow:ellipsis}
.account small{color:var(--muted)}
.avatar{width:32px;height:32px;background:var(--hover);border-radius:50%;display:grid;place-items:center}
.main{display:flex;flex-direction:column;min-height:0;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 34px;border-bottom:1px solid var(--line);background:var(--panel)}
.top-actions{display:flex;align-items:center;gap:14px}
#targets{display:flex;align-items:center;gap:22px}
#connection-banner{font-size:.84rem;color:var(--muted);white-space:nowrap}
.target-controls{display:flex;gap:12px}
.target-controls label{font-size:.74rem;color:var(--muted);display:flex;align-items:center;gap:8px;margin:0}
.target-controls select{padding:6px 24px 6px 8px;background:var(--bg);font-size:.83rem}
.context-row{display:flex;align-items:center;gap:15px;padding:6px 34px;border-bottom:1px solid var(--line);font-size:.8rem}
.context-row label{margin:4px 0;font-size:.8rem}
.context-row select{padding:5px 10px;max-width:230px}
.conversation-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px 7% 15px}
.conversation-heading>div:first-child{flex:1;min-width:0}
.conversation-heading h1{margin-bottom:0;font-size:1.4rem;line-height:1.4;letter-spacing:-.025em;overflow-wrap:anywhere}
.conversation-heading .eyebrow{margin-bottom:9px}
.welcome{max-width:920px;padding:18px 7%;align-self:center;width:100%;color:var(--muted)}
.suggestions{display:grid;grid-template-columns:1fr;gap:12px;margin-top:34px}
.suggestions button{text-align:left;border:1px solid var(--line);background:var(--panel);padding:18px 22px;color:var(--text-strong);font-weight:600}
.suggestions span{display:block;font-size:.8rem;font-weight:400;color:var(--muted);margin-top:4px}
.messages{flex:1;min-height:0;overflow:auto;padding:0 7% 25px}
.message{padding:20px 0;border-bottom:1px solid var(--line)}
.message .author{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:8px;color:var(--muted)}
.message .content{white-space:pre-wrap;overflow-wrap:anywhere}
.message.userMessage .content{background:var(--hover);padding:15px 18px;border-radius:10px}
.message details{font-size:.86rem}
.message pre{max-height:340px;overflow:auto;background:var(--panel-soft);border-radius:8px;padding:12px;white-space:pre-wrap;font-size:.8rem}
.message summary{cursor:pointer;color:var(--muted)}
.composer-area{padding:10px 7% 18px}
.composer{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px;box-shadow:0 6px 24px var(--shadow-color)}
.composer textarea{width:100%;border:0;padding:2px;outline:none;resize:none;min-height:65px}
.composer-bottom{display:flex;align-items:center;gap:10px}
.composer-bottom .muted{flex:1;font-size:.75rem}
.composer-note{text-align:center;font-size:.67rem;color:var(--muted);margin:8px 0 0}
.main-error,.main>.notice{margin:12px 7% 0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
dialog{border:1px solid var(--line);border-radius:16px;width:min(760px,92vw);padding:28px;color:inherit;max-height:88vh;overflow:auto}
dialog::backdrop{background:#071226a8;backdrop-filter:blur(3px)}
.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}
.dialog-heading h2{margin:0}
dialog section{padding:20px 0;border-bottom:1px solid var(--line)}
.device-card,.user-card{padding:15px;border:1px solid var(--line);border-radius:9px;margin:12px 0}
.device-card strong,.user-card strong{display:block}
.device-card .secondary{margin-top:10px}
.invite-result{font:1.3rem ui-monospace,monospace;padding:18px;background:var(--accent-soft);margin:15px 0;overflow-wrap:anywhere}
.downloads{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.downloads a{padding:15px;background:var(--hover);border-radius:8px;font-size:.85rem}
.downloads small{display:block;font-size:.7rem;color:var(--muted)}
.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid-form label{margin:0}
.grid-form fieldset{grid-column:1/-1;border:1px solid var(--line);border-radius:8px;margin:10px 0}
.check{display:inline-flex;align-items:center;gap:7px;padding:4px}
.user-card .check{font-size:.78rem}
.user-card button{margin:8px 8px 0 0}
.tabs{display:flex;gap:15px;border-bottom:1px solid var(--line)}
.tabs .selected{background:var(--accent-soft);color:var(--accent)}
.tools-dialog{width:min(940px,94vw)}
.inline-form{display:flex;gap:10px}
.inline-form input{flex:1;min-width:0}
.inline-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.file-list{max-height:210px;overflow:auto;display:flex;flex-wrap:wrap;gap:4px;margin:12px 0}
.file-list button{border:1px solid var(--line);font-size:.8rem}
#editor{width:100%;font:13px/1.5 ui-monospace,Consolas,monospace;tab-size:2}
.file-upload{cursor:pointer;border:1px solid var(--line);padding:8px 12px;border-radius:8px;font-weight:400}
.file-upload input{display:none!important}
.output{background:var(--sidebar);color:var(--text);padding:15px;border-radius:8px;min-height:100px;max-height:45vh;overflow:auto;white-space:pre-wrap;font:13px/1.5 ui-monospace,monospace}
[hidden]{display:none!important}
@media(max-width:1000px){.workspace{grid-template-columns:215px 1fr}
.sidebar{padding:22px 12px 0}
.topbar{padding:14px 20px}
.top-actions .muted{display:none}
#targets{gap:12px;flex-wrap:wrap}
.conversation-heading{padding-top:24px}
.context-row{padding:8px 20px;flex-wrap:wrap}
.login-art h1{font-size:3rem}
}
@media(max-width:700px){.workspace{grid-template-columns:1fr;height:auto;min-height:100vh}
.sidebar{padding:14px;gap:12px;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr}
.sidebar .brand{margin:0}
.history,.history-heading{display:none}
.side-nav{display:flex;grid-column:1}
.account{padding:0;border:0;grid-column:2;grid-row:2}
.main{min-height:85vh}
.topbar{padding:14px}
.target-controls{gap:6px}
.target-controls label{font-size:.8rem}
.target-controls select{font-size:.8rem}
.conversation-heading h1{font-size:1.2rem}
.composer-bottom .muted{max-width:50%}
.composer-area{padding:10px 18px}
.messages{padding:0 20px 20px}
.welcome{padding:10px 20px}
.login-screen{grid-template-columns:1fr}
.login-art{padding:30px}
.login-art h1{margin-top:35px;font-size:2.5rem}
.login-art p{font-size:.9rem}
.login-form{padding:35px 0}
.grid-form,.downloads{grid-template-columns:1fr}
}


/* Original WebUI component styles, expressed without a framework dependency. */
body{-webkit-font-smoothing:antialiased}
button,.button-link{border-radius:var(--radius-lg);font-weight:500;padding:8px 16px;transition:background .2s,border-color .2s,box-shadow .2s;line-height:1.5}
button:disabled{opacity:.5;cursor:not-allowed}
.primary{box-shadow:0 1px 2px var(--shadow-color)}
.secondary{background:transparent;border:1px solid var(--line)}
.secondary:hover{background:var(--hover)}
input,select,textarea{border-radius:var(--radius-lg);padding:8px 16px;background:var(--panel);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
select{appearance:none;padding-right:36px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23b5c1d3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px;background-position:right 12px center}
.suggestions button,.device-card,.user-card{border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:0 1px 2px var(--shadow-color);background:var(--panel)}
.suggestions button:hover{background:var(--hover);border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.login-art{background:radial-gradient(ellipse at 10% 100%,#7868d866,transparent 60%),radial-gradient(ellipse at 95% 100%,#155eefa0,transparent 65%),var(--sidebar)}
.login-art h1{color:var(--text-strong)}
.art-lines{opacity:.25;background:transparent;box-shadow:none;border-color:var(--lavender)}
.mark{background:linear-gradient(135deg,var(--accent),var(--lavender));border-radius:var(--radius-lg)}
.topbar{background:var(--bg)}
.target-controls label{font-size:.84rem;font-weight:500;color:var(--text)}
.target-controls select{min-width:148px;background-color:var(--panel);font-weight:600}
.history .selected{color:var(--text-strong);box-shadow:inset 2px 0 var(--accent)}
.composer{background:var(--panel);border-radius:var(--radius-xl);box-shadow:0 6px 24px var(--shadow-color)}
.composer:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.composer textarea{background:transparent;box-shadow:none;border:0}
dialog{background:var(--panel);border-radius:var(--radius-xl);box-shadow:0 28px 72px -32px rgba(7,18,38,.85)}
.boot-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:16px;flex-direction:column;color:var(--muted)}
.boot-screen p{margin:0}
.account .icon-button{padding:4px 6px;font-size:1.1rem}
.button-link{display:inline-flex;border:1px solid var(--line);margin:5px 8px 5px 0}
.button-link:hover{background:var(--hover)}
#provider-account{font-weight:600}#provider-code:empty{display:none}#provider-usage-text{white-space:pre-line}
.account-advanced summary{cursor:pointer;color:var(--muted);padding:15px 0}.account-advanced form{margin-bottom:24px}
.message.agentMessage .content{white-space:normal;line-height:1.75}
.message.agentMessage .content>:last-child{margin-bottom:0}
.content p{margin:0 0 1em}.content ul,.content ol{padding-left:1.6em;margin:0 0 1em}.content li+li{margin-top:.3em}
.content h1,.content h2,.content h3{margin:1.3em 0 .5em;color:var(--text-strong);font-family:inherit}
.content h1{font-size:1.5rem}.content h2{font-size:1.3rem}.content h3{font-size:1.1rem}
.content strong{color:var(--text-strong);font-weight:650}
.content a{color:#96b7ff;text-decoration:underline;text-underline-offset:3px}
.content code{font: .9em ui-monospace,Consolas,monospace;background:var(--hover);padding:.15em .35em;border-radius:4px}
.content pre{max-height:none;white-space:pre;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-xl);padding:16px;background:var(--panel-soft)}
.content pre code{background:transparent;padding:0}
.content blockquote{border-left:3px solid var(--accent);margin:1em 0;padding:4px 18px;color:var(--muted)}
.content table{border-collapse:collapse;display:block;max-width:100%;overflow:auto;margin:1em 0}
.content th,.content td{border:1px solid var(--line);padding:8px 14px;text-align:left}.content th{background:var(--panel)}
.content hr{border:0;border-top:1px solid var(--line);margin:1.5em 0}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.assistant-activity{display:flex;align-items:center;gap:13px;width:fit-content;max-width:100%;margin:20px 0 8px;padding:14px 18px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:var(--radius-xl);background:linear-gradient(105deg,var(--panel),#155eef10,#7868d817);font-size:.9rem}
.activity-orbit{flex:0 0 22px;width:22px;height:22px;border:2px solid #7868d84d;border-top-color:#97b8ff;border-right-color:var(--lavender);border-radius:50%;animation:orbit 1.6s linear infinite}
.activity-label{color:var(--text);animation:activity-glow 3s ease-in-out infinite}
.activity-dots{display:inline-flex;gap:4px}.activity-dots i{display:block;width:4px;height:4px;border-radius:50%;background:#96b7ff;animation:activity-dot 1.4s ease-in-out infinite}.activity-dots i:nth-child(2){animation-delay:.2s}.activity-dots i:nth-child(3){animation-delay:.4s}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes activity-glow{50%{opacity:.6}}@keyframes activity-dot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.history-row{display:flex;align-items:center;gap:2px;margin-bottom:5px;border-radius:var(--radius-lg)}
.history .history-open{flex:1;min-width:0;margin:0}
.history .history-delete{flex:0 0 30px;display:grid;place-items:center;width:30px;padding:7px;margin:0;color:var(--muted);opacity:0}
.history-row:hover .history-delete,.history-row:focus-within .history-delete{opacity:1}.history .history-delete:hover{color:var(--danger);background:#ff9cac12}
.conversation-actions{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.danger-button{background:#a62d45;color:#fff}.danger-button:hover{background:#ba3550}.delete-title{font-weight:600;overflow-wrap:anywhere}
.quota-button{display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--line);background:var(--panel);text-align:left;gap:3px;margin-top:auto}.quota-button small{color:var(--muted);font-size:.74rem}
.quota-card{padding:18px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--panel-soft);margin:12px 0}.quota-card h3{margin-bottom:15px}
.quota-period+.quota-period{margin-top:20px}.quota-row{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.87rem;margin-bottom:8px}
.quota-period progress{display:block;width:100%;height:7px;border:0;border-radius:9px;overflow:hidden;background:var(--hover);margin-bottom:9px;accent-color:var(--accent)}
.quota-period progress::-webkit-progress-bar{background:var(--hover);border-radius:9px}.quota-period progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),var(--lavender));border-radius:9px}.quota-period progress::-moz-progress-bar{background:var(--accent)}
#quota-result{margin:12px 0 0;color:var(--text)}#quota-credit{display:block;width:100%;margin:7px 0}#quota-confirm-dialog,#delete-dialog{max-width:520px}
@media(hover:none){.history .history-delete{opacity:1}}
@media(max-width:700px){.sidebar .quota-button{grid-row:3;grid-column:1/-1}.conversation-heading{align-items:flex-start;gap:10px}.conversation-actions{max-width:120px}.assistant-activity{font-size:.82rem;padding:12px;gap:8px}.activity-orbit{flex-basis:18px;width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.activity-orbit,.activity-label,.activity-dots i{animation:none!important}}

.user-create-section{padding-top:0}
#create-user fieldset{margin:4px 0}
#create-user fieldset .muted{margin:5px 0 0}
.user-options,#create-user-error,#create-user-result{grid-column:1/-1}
.user-options summary,.disabled-users>summary{cursor:pointer;color:var(--muted);font-size:.87rem;padding:8px 0}
.user-options .grid-form{margin:8px 0 12px}
#create-user-submit{justify-self:start;margin-top:4px}
#create-user-error,#create-user-result{margin:0;overflow-wrap:anywhere}
.user-card>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
.user-card>summary::-webkit-details-marker{display:none}
.user-identity{flex:1;min-width:0;overflow-wrap:anywhere}
.user-manage-label{color:var(--muted);font-size:.8rem;white-space:nowrap}
.user-manage-label::after{content:' ＋'}.user-card[open] .user-manage-label::after{content:' −'}
.user-card[open]>summary{margin-bottom:12px}
.user-card select{max-width:100%;margin:5px 8px 5px 0}
.user-card button{max-width:100%}
.disabled-users{margin-top:12px}
.conversation-panel{display:contents}
.documents-screen{min-height:0;overflow:auto;padding:26px 36px 40px;flex:1}
.documents-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:20px}
.documents-heading h1{font-size:1.6rem;margin:5px 0 12px}.documents-heading p{max-width:680px;line-height:1.6}
.document-upload-form{border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--panel);padding:22px;margin:20px 0}
.document-drop-zone{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;border:1px dashed var(--line);border-radius:var(--radius-lg);padding:25px;cursor:pointer;text-align:center}
.document-drop-zone:focus-within,.document-drop-zone.drag-over{border-color:var(--accent);background:var(--hover)}
.document-drop-zone span{color:var(--muted)}.document-drop-zone input{max-width:100%;font-size:.85rem}
.document-upload-form .grid-form{margin:18px 0}.document-upload-form textarea{width:100%;resize:vertical;min-height:85px}
#document-associations{margin:18px 0}#document-associations summary{cursor:pointer;color:var(--muted)}.document-context-list{max-height:180px;overflow:auto}
.documents-filters{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:24px}.documents-filters label{display:flex;flex-direction:column;gap:7px;font-size:.83rem;min-width:130px}.documents-filters label:first-child{flex:1}
.documents-list{display:grid;gap:14px}.document-card{border:1px solid var(--line);border-radius:var(--radius-xl);padding:20px;background:var(--panel)}
.document-card-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.document-card h2{font-size:1rem;margin:0;overflow-wrap:anywhere}.document-card p{font-size:.86rem;line-height:1.6;overflow-wrap:anywhere}.document-card .inline-actions{margin-top:15px}
.document-state{display:inline-block;flex-shrink:0;font-size:.75rem;border:1px solid var(--line);border-radius:var(--radius-lg);padding:4px 9px;color:var(--muted)}.state-ready{color:#9cddbd}.state-failed{color:var(--danger)}.state-review{color:#f1d293}
.document-card progress{width:100%;height:6px;accent-color:var(--accent)}.document-empty{padding:26px;text-align:center}
#document-detail-dialog{max-width:800px}#document-detail-content p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}#document-remove-dialog{max-width:560px}#document-remove-name{font-weight:600;overflow-wrap:anywhere}
@media(max-width:700px){.documents-screen{padding:20px 16px}.documents-heading,.document-card-heading{flex-direction:column;gap:12px}.documents-heading h1{font-size:1.35rem}.document-upload-form{padding:15px}.document-drop-zone{padding:18px 10px}.documents-filters{gap:10px}.documents-filters label:first-child{flex-basis:100%}.document-state{max-width:100%}.document-card{padding:16px}}