:root{color-scheme:light dark;--bg:light-dark(#eef3f7,#141920);--panel:light-dark(#fff,#202731);--ink:light-dark(#263644,#eef3f7);--soft:light-dark(#617080,#b4bfcb);--line:light-dark(#e0e5e9,#394352);--accent:light-dark(#0086b3,#62d4f7);--on-accent:light-dark(#fff,#143744);--tint:light-dark(#dff5fd,#203e4b);--warning:light-dark(#fff4df,#443623);--danger:light-dark(#9b302f,#ffb4ab)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:9px 12px;min-height:38px}button:disabled{cursor:not-allowed;opacity:.6}button:hover:not(:disabled){background:var(--tint)}button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}button.active,button[aria-pressed=true]{background:var(--tint);color:var(--accent)}a{color:var(--accent)}input,select,textarea{width:100%;padding:9px 10px;background:var(--bg);border:1px solid var(--line);border-radius:7px}textarea{resize:vertical;min-height:85px}label{display:block;margin:10px 0;font-size:13px}label>input,label>select,label>textarea{display:block;margin-top:5px}h1{font-size:25px;letter-spacing:-.6px;margin:0 0 6px}h2{font-size:19px;margin:0 0 14px}h3{font-size:15px;margin:0 0 10px}p{margin:6px 0}small,.muted{font-size:12px;color:var(--soft)}[hidden]{display:none!important}.brand{font-size:23px;font-weight:650;letter-spacing:-.7px}.brand span{color:var(--accent)}.top{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:18px 24px;background:var(--panel);border-bottom:1px solid var(--line)}#logout{margin-left:auto}.badge{display:inline-block;font-size:11px;background:var(--tint);color:var(--accent);padding:4px 8px;border-radius:6px}.notice{background:var(--warning);padding:12px;border-radius:8px;font-size:13px}.shell{display:grid;grid-template-columns:170px minmax(0,1fr)}nav{background:var(--panel);border-right:1px solid var(--line);padding:18px 10px}nav button{display:block;border:0;width:100%;text-align:left;margin-bottom:6px;background:transparent}main{padding:24px;min-width:0}.page-title{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:20px}.page-title p{font-size:12px;color:var(--soft)}footer{font-size:12px;color:var(--soft);padding:14px 24px;border-top:1px solid var(--line);background:var(--panel)}.inbox{display:grid;grid-template-columns:230px minmax(250px,1fr) 235px;gap:14px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}.filters,.actions{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.filters button{font-size:12px;padding:7px 9px}.queue-item{display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--line);border-radius:7px;padding:14px 8px;overflow-wrap:anywhere}.queue-item strong{display:block;margin:5px 0}.queue-item .muted{display:block}.thread-head{border-bottom:1px solid var(--line);padding-bottom:14px}.message{padding:12px;border-radius:10px;background:var(--bg);margin:12px 28px 12px 0;overflow-wrap:anywhere;white-space:pre-wrap}.message.out{background:var(--tint);margin:12px 0 12px 28px}.message.note{background:var(--warning);margin:12px 0}.message small{display:block;margin-top:6px;white-space:normal}.composer{margin-top:18px;border-top:1px solid var(--line);padding-top:10px}.client-block{border-top:1px solid var(--line);padding:12px 0}.client-block button{margin:6px 0;width:100%}.empty{padding:30px 15px;color:var(--soft)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.record{padding:14px 0;border-bottom:1px solid var(--line)}.pre{white-space:pre-wrap;overflow-wrap:anywhere}.login{max-width:420px;margin:8vh auto;padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.login h1{margin-top:20px}.login button{margin:10px 0;width:100%}#error,#login-error{color:var(--danger)}#error{padding:12px;background:var(--warning);border-radius:8px}dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;width:min(620px,calc(100% - 24px));max-height:85vh;padding:24px}dialog::backdrop{background:#0008}.modal-top{display:flex;justify-content:space-between;gap:12px}.mobile-tools{display:none}.presence{color:var(--danger);font-size:12px}.spinner{color:var(--soft)}.status-line{min-height:24px;font-size:12px;overflow-wrap:anywhere}.status-line:empty{min-height:0}
.shell{grid-template-columns:210px minmax(0,1fr)}
#nav.cabinet-nav{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background:light-dark(#f5f8fa,#1a222c);padding:20px 12px;min-width:0}
.nav-group{margin-bottom:20px}.nav-heading{font-size:11px;letter-spacing:.6px;color:var(--soft);padding:0 9px 9px}.nav-parent{display:flex;align-items:center;gap:9px;padding:9px;color:var(--soft)}
#nav button{display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 9px;margin:3px 0;border-radius:6px;width:100%;white-space:normal}
#nav button.active{box-shadow:inset 3px 0 #2fc6f6}.nav-icon{width:20px;text-align:center;flex:none;color:var(--accent)}.nav-label{flex:1;min-width:0}.nav-count{flex:none;align-self:center;min-width:20px;padding:1px 5px;text-align:center;border-radius:12px;background:var(--accent);color:var(--on-accent);font-size:11px}
@media(min-width:1450px){main{max-width:1500px;width:100%;margin:auto}.inbox{grid-template-columns:270px minmax(300px,1fr) 280px}}
@media(max-width:1150px){.shell{grid-template-columns:150px minmax(0,1fr)}main{padding:18px}.inbox{grid-template-columns:200px minmax(0,1fr)}.client{grid-column:1/-1}}
@media(min-width:681px) and (max-width:1150px){.shell{grid-template-columns:195px minmax(0,1fr)}}
@media(max-width:680px){.shell{grid-template-columns:1fr}nav{display:flex;gap:4px;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);padding:8px}nav button{width:auto;margin:0;font-size:12px;padding:7px 9px}.top{padding:14px;gap:8px}.top .brand{font-size:20px}#identity{font-size:12px}main{padding:12px}.inbox{grid-template-columns:1fr}.queue,.client{display:none}.inbox.show-queue .queue{display:block}.inbox.show-queue .thread,.inbox.show-queue .client{display:none}.inbox.show-client .client{display:block}.inbox.show-client .queue,.inbox.show-client .thread{display:none}.mobile-tools{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.message{margin-right:15px}.message.out{margin-left:15px}input,select,textarea{font-size:16px}button{min-height:44px}.login{margin:20px 12px}.page-title h1{font-size:22px}.grid{grid-template-columns:1fr}footer{padding:14px}.client{grid-column:auto}dialog{padding:16px}}
@media(max-width:680px){#nav.cabinet-nav{display:flex;flex-direction:row;overflow-x:auto;flex-wrap:nowrap;padding:8px;gap:8px}.nav-group{display:flex;gap:4px;margin:0;flex:none}.nav-heading,.nav-parent{display:none}#nav button{width:auto;margin:0;white-space:nowrap;padding:8px 10px}.nav-icon{width:16px}.nav-label{flex:none}}
:root{color-scheme:light;--bg:#eef3f7;--panel:#fff;--ink:#263644;--soft:#627888;--line:#e0e8ef;--accent:#0086b3;--on-accent:#fff;--tint:#dff5fd;--action:#2fc6f6;--warning:#fff2cc;--danger:#a53333}
.brand{font-weight:500}.brand .brand-teen{color:#00a9df}
button.primary{background:var(--action);border-color:var(--action);color:#123b4b}button.primary:hover:not(:disabled){background:#53d2f8}
#nav.cabinet-nav{background:#f5f8fa;align-self:stretch;justify-content:flex-start;min-height:calc(100vh - 145px)}
.ui-icon{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}.icon-label{display:inline-flex;align-items:center;gap:7px}#nav .ui-icon{color:var(--accent)}
.inbox{gap:0;align-items:stretch;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel)}
.inbox>.panel{border:0;border-radius:0;padding:18px}.inbox>.queue{border-right:1px solid var(--line)}.inbox>.client{border-left:1px solid var(--line)}
.inbox>.thread{background:#eaf3f8}.thread-head{background:#fff;margin:-18px -18px 16px;padding:18px}.message{background:#fff;box-shadow:0 1px 2px #25415a08}.message.out{background:#d5f4ff}.message.note{border-left:3px solid #e3b44a;background:#fff2cc}.composer{background:#fff;margin:18px -18px -18px;padding:18px}.queue-item[aria-pressed=true]{box-shadow:inset 3px 0 var(--action)}
@media(max-width:1150px){.inbox>.client{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:680px){#nav.cabinet-nav{min-height:0}.inbox>.queue{border-right:0}.inbox>.client{border-top:0}.inbox>.panel{padding:14px}.thread-head{margin:-14px -14px 14px;padding:14px}.composer{margin:14px -14px -14px;padding:14px}}
.staff-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px}.staff-layout>section:first-child button{display:block;width:100%;text-align:left;margin:6px 0}@media(max-width:680px){.staff-layout{grid-template-columns:1fr}}
.staff-notice{position:fixed;bottom:20px;right:20px;z-index:50;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--action);padding:14px;box-shadow:0 5px 24px #20304020;display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);flex-wrap:wrap}

/* KeenTeen communications: purple navigation and a compact conversation queue. */
#app{background:linear-gradient(125deg,#5547b5,#292675)}
.top{background:transparent;color:white;border-color:#ffffff25}.top .brand-teen{color:#7cddff}.top .badge{background:#ffffff20;color:#fff}.top button{background:#ffffff15;border-color:#ffffff40;color:white}
.shell{grid-template-columns:235px minmax(0,1fr)}
#nav.cabinet-nav{background:transparent;border-color:#ffffff20;color:#fff;min-height:calc(100vh - 100px);padding:22px 14px}
#nav .ui-icon{color:#d0cbff}.nav-heading{color:#c6c2f2}#nav button{color:#fff;min-height:46px;border-radius:10px}#nav button.active,#nav button:hover{background:#ffffff30;color:#fff;box-shadow:none}.nav-count{background:#ff615b;color:#fff}
main{max-width:none!important;margin:0!important;padding:0 18px 18px}.communication-tabs{display:flex;gap:8px;align-items:center;min-height:62px;overflow-x:auto}.communication-tabs button{background:transparent;color:#dedaff;border:0;white-space:nowrap}.communication-tabs button.active,.communication-tabs button:hover{background:#ffffff26;color:white}.page-title{color:white;margin-bottom:14px}.page-title p{color:#d1ccf6}.page-title h1{font-size:21px}.page-title>button{background:#ffffff20;border-color:#ffffff40;color:#fff}
.inbox{grid-template-columns:310px minmax(280px,1fr) 260px;border:0;border-radius:16px;min-height:calc(100vh - 215px)}.inbox>.queue{padding:18px 12px}.queue>input{border-radius:24px;border:0;background:#f4f5f7}.queue>label{display:inline-block;width:100%;margin:4px 0;font-size:11px}.queue-section{color:#00abd8;font-weight:500;display:flex;align-items:center;gap:10px;margin:20px 5px 8px}.queue-section:after{content:'';height:1px;background:#61daf3;flex:1}.queue-item{position:relative;padding:12px 10px 12px 62px;border:0;margin:4px 0;border-radius:11px;min-height:104px}.queue-avatar{position:absolute;left:10px;top:18px;width:42px;height:42px;border-radius:50%;background:#e4f3fa;color:#0283ac;display:grid;place-items:center;font-weight:600}.queue-item strong{margin:2px 0;font-size:14px}.queue-item .badge{padding:0;background:transparent}.queue-item .badge .ui-icon{width:13px;height:13px}.queue-item[aria-pressed=true]{background:#00b4df;color:white;box-shadow:none}.queue-item[aria-pressed=true] .muted,.queue-item[aria-pressed=true] .badge{color:#eaffff}
.inbox>.thread{background:linear-gradient(125deg,#b2e0d7,#91b8f2);display:flex;flex-direction:column}.thread-head{border:0}.thread-head h2{margin:5px 0}.thread-head label{display:inline-block;min-width:150px;margin:5px 8px 5px 0}.thread-head label select{padding:5px}.message{max-width:90%;background:#fff}.message.out{background:#dcf6ed}.composer{margin-top:auto;border:0;border-radius:16px 16px 0 0}.composer textarea{background:white;border:0;min-height:65px}.client{background:#fff}footer{background:transparent;color:#d5d1ef;border-color:#ffffff20}#content>.muted{color:#e0dcfa}
@media(max-width:1300px){.shell{grid-template-columns:205px minmax(0,1fr)}.inbox{grid-template-columns:270px minmax(0,1fr)}.inbox>.client{grid-column:1/-1}}
@media(max-width:680px){.shell{grid-template-columns:1fr}#nav.cabinet-nav{min-height:0}.communication-tabs{min-height:52px}main{padding:0 10px 10px}.inbox{grid-template-columns:1fr;min-height:65vh}.inbox>.thread{display:flex}.inbox.show-queue>.thread,.inbox.show-client>.thread{display:none}.top{padding:12px}.page-title{margin-bottom:10px}}

/* Wide conversation, with the client card revealed on demand. */
.inbox{position:relative;grid-template-columns:340px minmax(0,1fr)}.inbox>.client{display:none}.inbox.client-open{grid-template-columns:300px minmax(0,1fr) 280px}.inbox.client-open>.client{display:block;grid-column:auto;border-left:1px solid var(--line);border-top:0}
.queue-advanced{margin:6px 0 10px;color:var(--soft);font-size:12px}.queue-advanced summary{cursor:pointer;padding:6px}.queue-advanced label{margin:6px 0}.client-toggle{float:right;margin-left:12px}.client-close{width:100%;margin-bottom:14px}.queue-item{min-height:96px}.queue-item>.muted:nth-last-child(2){font-size:11px}
@media(max-width:1150px){.inbox{grid-template-columns:280px minmax(0,1fr)}.inbox.client-open{grid-template-columns:280px minmax(0,1fr)}.inbox.client-open>.client{position:absolute;right:0;top:0;bottom:0;width:min(340px,100%);z-index:5;overflow-y:auto;box-shadow:-12px 0 30px #26364424}}
@media(max-width:680px){.inbox,.inbox.client-open{grid-template-columns:1fr}.inbox.show-client>.client{display:block}.client-toggle{float:none;margin:0 0 10px}.inbox.client-open>.client{width:100%}.inbox.show-client>.thread{display:none}}

/* Keep the response editor visible regardless of queue or history length. */
#app.contact-view{height:100dvh;display:flex;flex-direction:column;overflow:hidden}.contact-view>.top,.contact-view>footer{flex:none}.contact-view>.shell{flex:1;min-height:0;overflow:hidden}.contact-view #nav.cabinet-nav{min-height:0;overflow-y:auto}.contact-view main{display:flex;flex-direction:column;min-height:0;overflow:hidden}.contact-view .communication-tabs,.contact-view .page-title,.contact-view #error,.contact-view .mobile-tools{flex:none}.contact-view #content{display:flex;flex-direction:column;flex:1;min-height:0}.contact-view #content>.muted{flex:none;font-size:11px;margin:4px 0}.contact-view .inbox{flex:1;min-height:0;height:100%;overflow:hidden}.contact-view .inbox>.queue,.contact-view .inbox>.client{min-height:0;overflow-y:auto;overscroll-behavior:contain}.contact-view .inbox>.thread{min-height:0;overflow:hidden;padding:0}.contact-view .thread-head{flex:none;margin:0;padding:12px 18px;max-height:40%;overflow-y:auto}.thread-history{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 18px}.contact-view .composer{flex:none;margin:0;padding:10px 18px;max-height:46%;overflow-y:auto}.contact-view .composer .filters{margin:0 0 4px}.contact-view .composer label{margin:4px 0}.contact-view .composer textarea{min-height:50px;height:60px}.contact-view footer{padding:7px 18px;font-size:11px}
@media(max-width:680px){.contact-view>.shell{display:flex;flex-direction:column}.contact-view #nav{flex:none;max-height:62px}.contact-view main{flex:1}.contact-view .top{padding:8px}.contact-view .communication-tabs{min-height:42px}.contact-view .page-title{margin-bottom:5px}.contact-view .page-title p{display:none}.contact-view .thread-head{padding:8px 12px;max-height:32%}.contact-view .thread-head h2{font-size:16px}.contact-view .client-toggle{float:right;font-size:11px;min-height:34px}.contact-view .composer{padding:8px 12px;max-height:48%}.contact-view footer,.contact-view #content>.muted{display:none}}