@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap";:root{color:#172033;font-synthesis:none;background:#f6f7fb;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{margin:0}button,textarea{font:inherit}.app-shell{height:100dvh;display:flex;overflow:hidden}.sidebar{color:#d8deec;background:#111a33;border-right:1px solid #1e2947;flex-direction:column;flex-shrink:0;width:270px;display:flex}.brand{border-bottom:1px solid #26304b;align-items:center;gap:12px;height:74px;padding:0 20px;display:flex}.brand-mark{color:#fff;background:linear-gradient(135deg,#ff812d,#f45916);border-radius:11px;place-items:center;width:38px;height:38px;display:grid;box-shadow:0 7px 20px #f9731638}.brand strong{color:#fff;font:700 15px Manrope;display:block}.brand span{text-transform:uppercase;letter-spacing:.12em;color:#8f9ab3;font-size:10px}.new-chat{color:#fff;cursor:pointer;background:#202b48;border:1px solid #39435d;border-radius:9px;align-items:center;gap:10px;height:42px;margin:18px 14px 9px;padding:0 13px;display:flex}.new-chat:hover{background:#293654}.nav-section{padding:12px 12px 4px}.nav-section>span{color:#77839e;text-transform:uppercase;letter-spacing:.16em;padding:0 10px 7px;font-size:10px;font-weight:700;display:block}.nav-section button,.sidebar-footer>button{color:#aeb7cb;cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:11px;width:100%;height:39px;padding:0 10px;display:flex}.nav-section button:hover,.sidebar-footer>button:hover{color:#fff;background:#1b2541}.agents{overflow:auto}.agents button{height:52px;margin:2px 0}.agents button.active{color:#fff;background:#222d4a;position:relative}.agents button.active:before{content:"";background:#f97316;border-radius:0 3px 3px 0;width:3px;height:28px;position:absolute;left:0}.agents i{background:color-mix(in srgb,var(--agent) 16%,transparent);width:30px;height:30px;color:var(--agent);border-radius:8px;place-items:center;font-style:normal;display:grid}.agents em{text-align:left;min-width:0;font-style:normal}.agents b,.agents small{display:block}.agents b{font-size:13px;font-weight:600}.agents small{color:#78849e;margin-top:2px;font-size:10px}.sidebar-footer{border-top:1px solid #26304b;margin-top:auto;padding:10px 12px}.profile{align-items:center;gap:10px;margin-top:8px;padding:12px 8px 4px;display:flex}.profile>div{color:#fff;background:#f97316;border-radius:50%;place-items:center;width:34px;height:34px;font-size:12px;font-weight:700;display:grid}.profile span b,.profile span small{display:block}.profile b{color:#fff;font-size:12px}.profile small{color:#7e8aa4;font-size:10px}main{background:#f7f8fb;flex-direction:column;flex:1;min-width:0;display:flex}header{background:#fff;border-bottom:1px solid #e7e9ef;justify-content:space-between;align-items:center;height:64px;padding:0 26px;display:flex}.crumb{align-items:center;gap:9px;font-size:13px;display:flex}.crumb span{color:#9098a8}.crumb b{color:#d4d8e0}.crumb strong{font-weight:600}.agent-picker{color:#424a5a;background:#fff;border:1px solid #e2e5eb;border-radius:9px;align-items:center;gap:8px;height:36px;padding:0 11px;font-size:12px;font-weight:600;display:flex}.agent-picker span{border-radius:50%;width:8px;height:8px}.menu-button,.mobile-close{background:0 0;border:0;display:none}.chat{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.welcome{text-align:center;width:min(780px,100% - 40px);margin:auto;padding:30px 0 122px}.welcome-icon{width:58px;height:58px;color:var(--agent);background:color-mix(in srgb,var(--agent) 12%,white);border:1px solid color-mix(in srgb,var(--agent) 20%,white);border-radius:17px;place-items:center;margin:0 auto 16px;display:grid}.eyebrow{letter-spacing:.18em;color:#9098a8;margin:0 0 9px;font-size:10px;font-weight:800}.welcome h1{color:#182038;margin:0;font:700 clamp(26px,4vw,38px)/1.25 Manrope}.welcome h1 span{color:#f36b20}.intro{color:#6f788b;max-width:560px;margin:15px auto 25px;font-size:14px;line-height:1.6}.starter-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.starter-grid button{text-align:left;color:#343c4e;cursor:pointer;background:#fff;border:1px solid #e2e6ed;border-radius:12px;padding:15px;box-shadow:0 3px 14px #27334d08}.starter-grid button:hover{border-color:#ffb17e;transform:translateY(-1px)}.starter-grid svg{color:#f97316;margin-bottom:12px}.starter-grid span,.starter-grid small{display:block}.starter-grid span{font-size:12px;font-weight:700}.starter-grid small{color:#999fad;margin-top:4px;font-size:10px}.messages{width:min(880px,100% - 40px);margin:0 auto;padding:42px 0 140px;overflow-y:auto}.messages article{gap:12px;margin-bottom:22px;display:flex}.messages article.user{flex-direction:row-reverse}.avatar{color:#fff;background:#17213c;border-radius:9px;flex:none;place-items:center;width:32px;height:32px;font-size:10px;font-weight:700;display:grid}.user .avatar{background:#f97316}.bubble{background:#fff;border:1px solid #e5e8ee;border-radius:4px 14px 14px;max-width:min(76%,680px);padding:12px 16px;font-size:14px;line-height:1.65;box-shadow:0 3px 15px #1c29440a}.user .bubble{color:#fff;background:#17213c;border:0;border-radius:14px 4px 14px 14px}.bubble p{margin:0 0 10px}.bubble p:last-child{margin-bottom:0}.bubble.error{color:#b42318;background:#fff4f2;border-color:#ffd1cc}.thinking{color:#7b8496;align-items:center;gap:4px;display:flex}.thinking i{background:#f97316;border-radius:50%;width:5px;height:5px;animation:1s infinite pulse}.thinking i:nth-child(2){animation-delay:.18s}.thinking i:nth-child(3){animation-delay:.36s}.composer-wrap{text-align:center;background:linear-gradient(#0000,#f7f8fb 28%);padding:16px 25px 18px;position:absolute;bottom:0;left:0;right:0}.composer{background:#fff;border:1px solid #dce0e8;border-radius:14px;align-items:end;width:min(820px,100%);margin:0 auto;padding:9px 9px 9px 15px;display:flex;box-shadow:0 12px 35px #1a284416}.composer:focus-within{border-color:#fb9b5b;box-shadow:0 0 0 3px #f9731611,0 12px 35px #1a284416}.composer textarea{resize:none;color:#242c3c;background:0 0;border:0;outline:0;flex:1;min-height:38px;max-height:130px;padding:9px 4px}.composer button{color:#fff;cursor:pointer;background:#f97316;border:0;border-radius:10px;place-items:center;width:38px;height:38px;display:grid}.composer button:disabled{background:#d8dbe2}.composer-wrap>small{color:#a0a6b2;margin-top:7px;font-size:10px;display:block}.backdrop{display:none}@keyframes pulse{50%{opacity:.25;transform:translateY(-2px)}}@media (width<=800px){.sidebar{z-index:20;transition:all .25s;position:fixed;inset:0 auto 0 0;transform:translate(-100%)}.sidebar.open{transform:none}.backdrop{z-index:19;background:#0e152677;border:0;display:block;position:fixed;inset:0}.mobile-close{color:#9aa4b9;margin-left:auto;display:block}.menu-button{color:#293248;place-items:center;display:grid}.crumb{display:none}header{padding:0 15px}.starter-grid{grid-template-columns:1fr 1fr}.welcome{padding-bottom:138px}.messages{width:calc(100% - 24px);padding-top:25px}.bubble{max-width:86%}.composer-wrap{padding:14px 12px}.agent-picker{max-width:210px}.chat{overflow:hidden}}@media (width<=450px){.starter-grid{grid-template-columns:1fr 1fr;gap:8px}.starter-grid button{padding:12px}.welcome{width:calc(100% - 24px);padding-top:20px}.welcome h1{font-size:25px}.intro{font-size:13px}.sidebar{width:286px}}.connection-banner{color:#8b5c25;background:#fff8ed;border:1px solid #fbd6a8;border-radius:10px;justify-content:space-between;align-items:center;gap:12px;width:min(880px,100% - 40px);margin:16px auto 0;padding:9px 12px;font-size:12px;display:flex}.connection-banner span{align-items:center;gap:7px;display:flex}.connection-banner button,.status-card button,.message-status button{color:#d95d18;cursor:pointer;background:0 0;border:0;font-size:11px;font-weight:700}.workspace-page{width:min(980px,100% - 48px);margin:0 auto;padding:54px 0 50px;overflow:auto}.workspace-page h1{color:#182038;margin:0 0 10px;font:700 clamp(27px,4vw,38px) Manrope}.page-intro{color:#6f788b;max-width:650px;margin:0 0 24px;font-size:14px;line-height:1.65}.status-card{color:#256044;background:#f2faf5;border:1px solid #dce9e2;border-radius:13px;align-items:center;gap:14px;margin:0 0 24px;padding:16px;display:flex}.status-card.attention{color:#8b5c25;background:#fff8ed;border-color:#fbd6a8}.status-card>div{flex:1}.status-card strong{font-size:14px}.status-card p{color:#6f788b;margin:4px 0 0;font-size:12px;line-height:1.5}.secondary-button,.primary-button{cursor:pointer;border-radius:9px;justify-content:center;align-items:center;gap:8px;min-height:42px;padding:0 14px;font-size:12px;font-weight:700;display:inline-flex}.secondary-button{color:#384357;background:#fff;border:1px solid #dce1e9}.primary-button{color:#fff;background:#f97316;border:0}.agent-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px;display:grid}.agent-card{text-align:left;cursor:pointer;background:#fff;border:1px solid #e2e6ed;border-radius:12px;flex-direction:column;align-items:flex-start;min-height:136px;padding:16px;display:flex}.agent-card:hover,.history-list button:hover{border-color:#ffb17e}.agent-card i{width:35px;height:35px;color:var(--agent);background:color-mix(in srgb,var(--agent) 15%,white);border-radius:9px;place-items:center;margin-bottom:12px;font-style:normal;display:grid}.agent-card strong{color:#30394a;font-size:13px}.agent-card span,.agent-card small{color:#8992a2;margin-top:3px;font-size:10px}.agent-card small{color:#b06b34;margin-top:auto}.history-filters{gap:10px;margin-bottom:16px;display:flex}.search-field{color:#8992a2;background:#fff;border:1px solid #dce1e9;border-radius:9px;flex:1;align-items:center;gap:8px;height:43px;padding:0 12px;display:flex}.search-field input,.history-filters select,.settings-card input{color:#384357;background:0 0;border:0;outline:0;width:100%;min-width:0;font-size:12px}.history-filters select{background:#fff;border:1px solid #dce1e9;border-radius:9px;width:190px;padding:0 10px}.history-list{flex-direction:column;gap:8px;margin-bottom:22px;display:flex}.history-list button{text-align:left;cursor:pointer;background:#fff;border:1px solid #e2e6ed;border-radius:11px;justify-content:space-between;align-items:center;gap:15px;padding:14px 16px;display:flex}.history-list strong,.history-list span{display:block}.history-list strong{color:#30394a;font-size:13px}.history-list span,.history-list time{color:#8992a2;margin-top:5px;font-size:11px}.empty-state{text-align:center;color:#8992a2;padding:55px 20px}.empty-state h2{color:#30394a;margin:13px 0 5px;font:700 20px Manrope}.empty-state p{margin:0 0 18px;font-size:13px}.settings-card{background:#fff;border:1px solid #e2e6ed;border-radius:13px;margin-bottom:16px;padding:20px}.settings-card h2{color:#30394a;margin:0 0 16px;font:700 16px Manrope}.settings-card label{color:#4a5363;margin-bottom:7px;font-size:12px;font-weight:700;display:block}.settings-card input{border:1px solid #dce1e9;border-radius:9px;height:43px;padding:0 12px}.settings-card>p{color:#8992a2;margin:8px 0 0;font-size:11px;line-height:1.55}.button-row{gap:9px;margin-top:18px;display:flex}.form-error,.form-success,.storage-warning{border-radius:9px;margin:0 0 14px;padding:11px 13px;font-size:12px}.form-error{color:#b42318;background:#fff4f2;border:1px solid #ffd1cc}.form-success{color:#256044;background:#f2faf5;border:1px solid #c9ead7}.agent-status-list{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.agent-status-list>div{color:#4a5363;border:1px solid #eef0f4;border-radius:8px;justify-content:space-between;padding:10px 11px;font-size:12px;display:flex}.agent-status-list small{color:#b06b34}.agent-status-list small.configured{color:#218653}.message-status{border-top:1px solid #f1c5bf;margin-top:9px;padding-top:9px;font-size:11px;line-height:1.5}.message-status button{padding:5px 0;display:block}.chat>.connection-banner+.welcome{padding-top:12px}@media (width<=800px){.connection-banner{width:calc(100% - 24px);margin-top:10px}.workspace-page{width:calc(100% - 24px);padding-top:30px}.agent-grid{grid-template-columns:1fr 1fr}.status-card{flex-wrap:wrap;align-items:flex-start}.history-filters{flex-direction:column}.history-filters select{width:100%;height:43px}.history-list button{flex-direction:column;align-items:flex-start;gap:5px}.button-row{flex-direction:column}.button-row button{width:100%}.agent-status-list{grid-template-columns:1fr}}
