/* Workspace layout contract. Loaded last after feature styles; mobile navigation,
   panel geometry and shared surfaces live here rather than in historical themes. */
:root{--blue:#164b81;--navy:#18344e;--line:#dbe3eb;--muted:#607488;--panel-paper:#f6f8fa;--panel-ink:#233b50}
html,body{background:#eef2f5;color:var(--panel-ink)}
body{background:radial-gradient(ellipse at 80% 0,#e2ebf3 0,transparent 55%),#f0f3f6}
.shell,.shell>*{min-width:0}
.shell{background:transparent}
.shell>.nav,.shell.menu-open>.nav{background:rgba(241,246,250,.97)!important;border-color:#dfe7ee!important}
.nav-brand{width:48px!important;height:40px!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;flex-shrink:0}
.nav-brand img{display:block;width:100%;height:100%;object-fit:contain}
.mobile-topbar,.navigation-close,.navigation-scrim,.team-back{display:none}
.list,.team-sidebar{background:rgba(250,252,253,.94);border-color:#dfe6ed}
.conversation,.team-chat{background:#edf1f4}
.adminmain{background:rgba(249,251,253,.8);border-color:#dce5ed}
.card,.metric{background:rgba(255,255,255,.85);border-color:#dce4ec}
button.primary,.team-compose .team-tools button.primary{background:#194f80;border-color:#194f80;color:#fff}
button.primary:hover{background:#123e67}
.viewhead h1,.listhead h2,.team-sidebar h1{color:#203e59}
.config-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:6px;width:100%;background:#e8edf2;border-color:#dbe3eb}
.config-tabs button{min-height:38px;height:auto;padding:9px 13px;font-size:12px;line-height:1.4;color:#4f657a;white-space:normal}
.config-tabs button.selected{background:#fff;color:#164b81}
.adminmain .card:has(>table){overflow:auto}
.adminmain .card>table{min-width:760px;width:100%}
.adminmain th,.adminmain td{padding:12px 14px;font-size:12px;line-height:1.5}
.adminmain label,.adminmain input,.adminmain select,.adminmain textarea,.adminmain .select-trigger{min-width:0;max-width:100%;box-sizing:border-box}
.adminmain input[type=time],.adminmain input[type=date],.adminmain input[type=datetime-local]{width:100%;min-width:0;max-width:100%;-webkit-appearance:none;appearance:none;min-height:40px}
.adminmain input::-webkit-date-and-time-value{text-align:left;min-width:0}
.adminmain :is(.flow-grid,.flow-hours,.flow-exceptions,.settings-row)>*{min-width:0}
.team-layout{grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:12px}
.team-chat{border:1px solid #dce4eb;border-radius:16px}
.team-chat-head{padding:12px 16px;min-height:68px;border:0;border-bottom:1px solid #dbe3eb;border-radius:0;background:rgba(252,253,254,.94);box-shadow:none;gap:10px}
.team-chat-head h2{font-size:15px;line-height:1.4;letter-spacing:0;color:#243e54;overflow-wrap:anywhere}
.team-chat-head small{display:block;font-size:11px;line-height:1.5;color:#627588}
.team-chat-head .team-avatar{width:36px;height:36px;flex-basis:36px;border-radius:12px}
.team-sidebar-head{padding:18px 16px 12px}
.team-sidebar-head h1{font-size:22px;margin:6px 0 12px}
.team-sidebar-head p{font-size:12px;line-height:1.5;color:#607488}
.team-contact{height:64px;padding:10px;gap:10px}
.team-contact strong{font-size:13px;color:#29445c}
.team-contact small{font-size:11px;color:#607488}
.team-contact.selected{background:#e8eff6;border-color:#ccdbe8;box-shadow:none}
.team-timeline{padding:18px 16px;gap:12px;background:transparent;flex:1;min-height:0;overscroll-behavior:contain}
.team-message{max-width:min(80%,640px);gap:7px;align-self:flex-start}
.team-message.mine{align-self:flex-end}
.team-message>div{min-width:0;max-width:100%}
.team-bubble{padding:9px 12px;border:1px solid #dfe5eb;border-radius:12px 12px 12px 3px;background:#fff;color:#2b4257;font-size:13px;line-height:1.55;box-shadow:0 1px 2px #1d354908}
.team-message.mine .team-bubble{background:#dce9f5;border-color:#c9dceb;color:#203e5a;border-radius:12px 12px 3px 12px}
.team-bubble p{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.team-bubble p:empty{display:none}
.team-bubble a,.team-message.mine .team-bubble a{color:#164d7c;font-size:12px;overflow-wrap:anywhere;text-underline-offset:3px}
.team-bubble audio{display:block;width:260px;max-width:100%;height:42px;margin:5px 0}
.team-stamp{font-size:10px;color:#627588;margin-top:4px;line-height:1.4}
.team-compose{margin:8px;padding:0;background:#fff;border:1px solid #d8e1e9;border-radius:14px;box-shadow:0 2px 8px #1c3d5908;flex-shrink:0}
.team-compose textarea{display:block;min-height:46px;height:46px;max-height:130px;padding:12px 13px;border:0;background:transparent;font-size:14px;line-height:1.5;resize:vertical;color:#253f55}
.team-compose .team-tools{padding:5px 8px;gap:5px;border-top:0;background:transparent;flex-wrap:nowrap}
.team-compose .team-tools button{height:38px;min-width:38px;padding:0 10px;border-radius:10px;font-size:12px;background:#f0f4f7;border-color:#e2e8ee;color:#45647d}
.team-compose .team-tools button svg{width:18px;height:18px;flex-basis:18px}
.team-compose .team-tools button.primary{height:38px;padding:0 13px}
.team-compose-label{padding:8px 12px 0;font-size:10px;color:#61778b}
.team-hint{padding:0 12px 8px;color:#607488}
.team-empty{color:#627588;line-height:1.6;padding:28px 18px}
@media(min-width:801px){.shell>.adminmain{grid-column:2/-1}.team-back{display:none}.shell>.nav .workspace{overflow:visible}.shell>.nav .nav-brand{margin-left:-3px}}
@media(min-width:801px) and (max-width:1180px){.team-layout{grid-template-columns:230px minmax(0,1fr)}}
@media(max-width:800px){
 html,body{height:100%;overflow:hidden}
 .mobile-topbar{display:flex;align-items:center;gap:10px;height:54px;box-sizing:border-box;padding:5px 12px;padding-left:max(8px,env(safe-area-inset-left));background:rgba(250,252,254,.96);border-bottom:1px solid #dbe4ec;color:#28435b;position:relative;z-index:31}
 .mobile-topbar img{height:31px;width:65px;object-fit:contain}.mobile-topbar strong{font-size:13px;font-weight:600;margin-left:auto}
 .mobile-topbar .menu-toggle{display:grid;place-items:center;position:static!important;width:42px;height:42px;min-width:42px;font-size:20px;background:transparent;border:0;color:#254e70;box-shadow:none;padding:0}
 .shell,body.real-session .shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:calc(100dvh - 54px)!important;min-height:0;min-width:0;width:100%;margin:0!important;padding:8px 8px max(8px,env(safe-area-inset-bottom));gap:0;box-sizing:border-box;position:relative}
 body:not(.real-session) .shell{height:calc(100dvh - 106px)!important}body:not(.real-session) .demobar{height:52px;min-height:52px;box-sizing:border-box}
 .shell>.adminmain,.shell>.list,.shell>.conversation{grid-column:1;grid-row:1;min-width:0;width:auto;max-width:100%;min-height:0}
 .shell>.nav{display:none}
 .shell.menu-open>.nav{display:flex;position:fixed;inset:0 auto 0 0;z-index:61;width:min(256px,calc(100vw - 48px))!important;max-height:100dvh;padding:18px 16px max(20px,env(safe-area-inset-bottom))!important;border-radius:0 20px 20px 0!important;overflow-y:auto;overscroll-behavior:contain;clip-path:none;box-shadow:12px 0 40px #17324d29}
 .navigation-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:60;border:0;border-radius:0;background:#142c4566;backdrop-filter:blur(3px);width:100%;height:100%;box-shadow:none;padding:0}
 .shell.menu-open .navigation-close{display:grid;place-items:center;position:absolute;right:12px;top:12px;width:40px;height:40px;border:1px solid #dbe4ec;background:#fff;border-radius:12px;padding:10px;color:#254e70}
 .shell.menu-open>.nav .workspace{min-height:45px;justify-content:flex-start;margin-bottom:10px;padding-left:10px}
 .shell.menu-open>.nav .nav-brand{width:74px!important;height:42px!important}
 .shell.menu-open>.nav .navitem{width:100%!important;min-height:44px!important;height:44px!important;gap:14px;padding:0 14px!important;flex-shrink:0}
 .shell.menu-open>.nav .nav-caption{font-size:13px}.shell.menu-open>.nav .label{margin:7px auto!important}
 .shell.menu-open>.nav .presence{width:100%;margin-top:16px;flex-shrink:0}.shell.menu-open>.nav .presence-control{width:100%}
 .shell.menu-open>.nav .who{min-height:48px}.shell.menu-open>.nav .who strong{font-size:13px}.shell.menu-open>.nav .who small{font-size:11px}
 .shell>.list{display:none}.shell.show-list>.list:not(.hide){display:flex}.shell.show-list>.conversation{display:none}.shell:not(.show-list)>.conversation:not(.hide){display:flex}
 .list-toggle{display:inline-flex}.conversation,.list,.adminmain{border-radius:14px}
 .adminmain{padding:16px;overflow:auto;overscroll-behavior:contain}
 .adminmain .viewhead{flex-wrap:wrap;gap:12px}.adminmain .viewhead h1{font-size:23px;line-height:1.25}
 .config-tabs{gap:5px;margin-bottom:16px}.config-tabs button{flex:1 1 140px;min-height:42px;font-size:12px;text-align:left;padding:9px 10px}
 .adminmain .card{padding:14px}.adminmain .settings-row{flex-wrap:wrap;gap:10px}.adminmain .settings-row>span:first-child{flex-basis:100%}
 .adminmain .controls{gap:8px}.adminmain .controls button{height:auto;min-height:40px;white-space:normal}
 .adminmain input:not([type=checkbox]):not([type=radio]),.adminmain textarea,.adminmain select{font-size:16px}
 .adminmain .select-trigger{min-width:0;font-size:14px}
 .team-layout{grid-template-columns:minmax(0,1fr);gap:0}.team-sidebar{display:none;overflow:auto}.team-directory{overflow:visible;flex:0 0 auto}
 .team-show-list .team-sidebar{display:flex}.team-show-list .team-chat{display:none}.team-chat{height:100%;border-radius:14px}
 .team-chat-head{padding:9px 10px;min-height:62px;gap:9px}.team-chat-head h2{font-size:14px}.team-chat-head small{font-size:10px;line-height:1.35}
 .team-chat-head .team-back,.team-chat-head>[data-team=list]{display:grid;place-items:center;flex:0 0 36px;min-width:36px;width:36px;height:40px;padding:0;background:transparent;border:0;color:#214f77;font-size:30px;box-shadow:none}
 .team-chat-head .team-avatar{width:32px;height:32px;flex-basis:32px}.team-timeline{padding:14px 10px;gap:11px}.team-message{max-width:88%}
 .team-compose{margin:6px}.team-compose textarea{font-size:16px;min-height:44px;height:44px;padding:9px 12px}.team-compose .team-tools button{height:42px;min-width:42px}
 .team-compose .team-tools button[data-live]{width:42px;padding:0}.team-compose .team-tools button[data-live] span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .team-hint{display:none}.team-bubble{font-size:13px;padding:8px 11px}.team-stamp{font-size:10px}
 .context.drawer-open{position:fixed!important;inset:62px 8px max(8px,env(safe-area-inset-bottom)) auto!important;width:min(360px,calc(100vw - 16px));max-width:none;z-index:40;background:#f7fafded;overflow:auto}
 .headrow .grow{min-width:0;flex:1}.headrow{flex-wrap:wrap}.headrow .buttons{width:100%;justify-content:flex-end}.headrow h2{overflow-wrap:anywhere}.timelinebar{gap:6px;flex-wrap:wrap}.messages{padding:12px 8px}
 #toast{left:12px;right:12px;bottom:max(16px,env(safe-area-inset-bottom));max-width:none}
}

/* Dock anatomy: identity and account are stable; only destinations scroll.
   No clip-path expansion: it exposed the outer scrollbar beside both controls. */
.shell>.nav,.shell.menu-open>.nav{overflow:hidden;display:flex;flex-direction:column;gap:0;box-sizing:border-box}
.shell>.nav .workspace{display:flex;align-items:center;justify-content:flex-start!important;width:100%!important;min-width:0;min-height:64px;flex:0 0 64px;margin:0!important;padding:0 8px!important;gap:12px;box-sizing:border-box;position:static}
.shell>.nav .workspace::after{content:none!important}
.shell>.nav .workspace+small{display:none}
.shell>.nav .workspace .nav-brand{margin:0;flex:0 0 48px;width:48px!important;height:36px!important}
.shell>.nav .workspace-title{display:none;font-size:13px;line-height:1.4;font-weight:650;letter-spacing:-.2px;color:#2b4c68;white-space:nowrap}
.navigation-links{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:4px 4px 8px;scrollbar-width:thin;scrollbar-color:#bccddc transparent;scrollbar-gutter:stable}
.shell>.nav .presence{flex:0 0 auto;width:100%;min-width:0;max-width:100%;margin:0;padding:12px 4px 4px!important;gap:8px;border-top:1px solid #d8e2eb;background:transparent;box-sizing:border-box}
.shell>.nav .presence-control{margin:0;width:100%;min-height:40px;height:40px;box-sizing:border-box}
.shell>.nav .presence-control .select-trigger{height:40px;padding-left:37px;font-size:12px;padding-right:12px;box-sizing:border-box}
.shell>.nav .presence-control .presence-light{left:15px;top:16px}
.shell>.nav .presence .who{margin:0;padding:4px 8px;min-height:44px;box-sizing:border-box}
.shell>.nav .presence .logout-button{margin:0;min-height:38px;height:38px;padding:8px 12px;box-sizing:border-box}
.select-menu.presence-menu{padding:6px;border:1px solid #d4e0ea;border-radius:14px;background:rgba(250,252,255,.98);box-shadow:0 12px 34px #193a5924,0 2px 6px #193a5910;backdrop-filter:blur(20px);overflow-x:hidden;scrollbar-gutter:auto}
.presence-menu .select-option{min-height:40px;padding:10px 12px;gap:11px;font-size:12px;border-radius:9px}
.presence-menu .select-option.highlighted{background:#eaf1f8;color:#284e6c}
.presence-menu .select-option[aria-selected=true]{background:#e7f4ed;color:#226b4c}
.presence-menu .option-dot[data-state]{width:7px;height:7px;flex-basis:7px}
@media(min-width:801px){
 .shell>.nav .workspace{min-height:54px;flex-basis:54px;gap:8px}
 .shell>.nav .workspace-title{font-size:12px}
 .shell>.nav{height:min(680px,calc(100% - 24px));max-height:calc(100% - 24px);width:64px!important;padding:4px!important;clip-path:none!important;border-radius:18px;transition:box-shadow 180ms ease-out}
 .shell>.nav:is(:hover,:has(:focus-visible),[data-presence-menu=open]){width:216px!important;clip-path:none!important;padding:8px!important;box-shadow:10px 8px 30px #22486522}
 .shell>.nav:not(:hover):not(:has(:focus-visible)):not([data-presence-menu=open]) .workspace{padding:0!important;justify-content:center!important}
 .shell>.nav:is(:hover,:has(:focus-visible),[data-presence-menu=open]) .workspace-title{display:block}
 .shell>.nav:is(:hover,:has(:focus-visible),[data-presence-menu=open]) .workspace .nav-brand{flex-basis:48px;width:48px!important;height:34px!important}
 .shell>.nav .navigation-links .navitem{margin:2px 0!important;padding-left:10px!important;gap:13px}
 .shell>.nav:is(:hover,:has(:focus-visible),[data-presence-menu=open]) .navigation-links .navitem{width:100%!important;min-height:38px!important;height:38px!important}
 .shell>.nav:is(:hover,:has(:focus-visible),[data-presence-menu=open]) .presence :is(.who,.logout-button){width:100%;max-width:100%}
 .shell>.nav:not(:hover):not(:has(:focus-visible)):not([data-presence-menu=open]) .navigation-links{padding-inline:0;scrollbar-gutter:auto}
}
@media(max-width:800px){
 .shell>.nav{display:none}
 .shell.menu-open>.nav{display:flex;overflow:hidden;padding:8px 12px max(12px,env(safe-area-inset-bottom))!important}
 .shell.menu-open>.nav .workspace{padding:0 44px 0 4px!important;min-height:68px;flex-basis:68px;gap:10px}
 .shell.menu-open>.nav .workspace .nav-brand{width:56px!important;flex-basis:56px;height:36px!important}
 .shell.menu-open>.nav .workspace-title{display:block;font-size:12px;white-space:normal;max-width:95px}
 .shell.menu-open>.nav .presence{margin:0;padding-top:10px!important}
 .shell.menu-open>.nav .presence-control,.shell.menu-open>.nav .presence-control .select-trigger{height:44px;min-height:44px}
 .shell.menu-open>.nav .presence-control .presence-light{left:15px;top:18px}
 .shell.menu-open>.nav .presence-control .select-trigger{padding-left:37px}
 .shell.menu-open>.nav .presence .logout-button{width:100%;min-height:44px}
 .presence-menu .select-option{min-height:44px;font-size:13px}
}

/* Dialog forms must remain reachable above mobile keyboards and short windows. */
#modal{box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
#modal h2{gap:12px;align-items:flex-start;overflow-wrap:anywhere}
#modal h2 .ui-close-button{flex-shrink:0}
#modal form .buttons{flex-wrap:wrap}
#modal form .buttons button{white-space:normal;height:auto;min-height:42px;overflow-wrap:anywhere}
#modal input,#modal textarea,#modal select,#modal .select-trigger{box-sizing:border-box;max-width:100%;min-width:0}
.select-trigger[aria-invalid=true]{outline:2px solid #b33b4b;outline-offset:2px}
@media(max-width:800px){
 #modal{padding:18px;max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px)}
 #modal input:not([type=checkbox]):not([type=radio]),#modal textarea,#modal select{font-size:16px}
 #modal form .buttons button{flex:1 1 120px;min-height:44px}
}
.select-validation-error{display:block;color:#a32b3e;font-size:12px;line-height:1.5;margin-top:5px}

/* Hide only the scroll thumb at rest; keep its gutter, scrolling and touch UI. */
@media(hover:hover) and (pointer:fine){
 .shell>.nav .navigation-links{scrollbar-color:transparent transparent}
 .shell>.nav:hover .navigation-links,.shell>.nav:focus-within .navigation-links{scrollbar-color:#bccddc transparent}
 .shell>.nav .navigation-links::-webkit-scrollbar{width:6px}
 .shell>.nav .navigation-links::-webkit-scrollbar-track{background:transparent}
 .shell>.nav .navigation-links::-webkit-scrollbar-thumb{background:transparent;border-radius:8px}
 .shell>.nav:hover .navigation-links::-webkit-scrollbar-thumb,.shell>.nav:focus-within .navigation-links::-webkit-scrollbar-thumb{background:#bccddc}
}
.conversation .timelinebar button{border:0;background:transparent;box-shadow:none;padding:4px 8px;height:auto;min-height:28px;font-size:10px;font-weight:400;color:#526f85;border-radius:8px}
.conversation .timelinebar button:focus-visible{outline:2px solid #3977a7;outline-offset:1px}
@media(max-width:800px){.conversation .timelinebar button{min-height:36px}}
.message-delivery{font-size:10px;line-height:1.4;color:#5b7182;white-space:normal}
.message-delivery.delivery-failed{color:#a32b3e}
.message-delivery.delivery-read{color:#247852}

/* One geometric axis for the closed dock. Labels and counters are out of flow,
   so icon position never depends on caption length, badge count or legacy padding. */
@media(min-width:801px){
 .shell:not(.menu-open)>.nav:not(:hover):not(:has(:focus-visible)):not([data-presence-menu=open]) .navigation-links{padding-inline:0;scrollbar-gutter:auto}
 .shell:not(.menu-open)>.nav:not(:hover):not(:has(:focus-visible)):not([data-presence-menu=open]) :is(.navitem,.who,.logout-button){display:grid;grid-template-columns:minmax(0,1fr);place-items:center;justify-content:center;width:44px!important;max-width:44px;padding:0!important;margin:2px auto!important;gap:0;position:relative}
 .shell:not(.menu-open)>.nav:not(:hover):not(:has(:focus-visible)):not([data-presence-menu=open]) :is(.navitem,.logout-button)>.icon{grid-area:1/1;margin:0;justify-self:center}
 .shell:not(.menu-open)>.nav:not(:hover):not(:has(:focus-visible)):not([data-presence-menu=open]) .navitem .nav-caption{position:absolute;opacity:0;pointer-events:none}
 .shell:not(.menu-open)>.nav:not(:hover):not(:has(:focus-visible)):not([data-presence-menu=open]) .navitem b{position:absolute;left:auto;right:1px;top:1px;margin:0}
 .shell:not(.menu-open)>.nav:not(:hover):not(:has(:focus-visible)):not([data-presence-menu=open]) .presence{padding-inline:0!important}
 .shell:not(.menu-open)>.nav:not(:hover):not(:has(:focus-visible)):not([data-presence-menu=open]) .presence-control{margin-inline:auto}
 .shell:not(.menu-open)>.nav:not(:hover):not(:has(:focus-visible)):not([data-presence-menu=open]) .presence-light{left:50%;transform:translateX(-50%)}
 .shell:not(.menu-open)>.nav:not(:hover):not(:has(:focus-visible)):not([data-presence-menu=open]) .who>.avatar{grid-area:1/1;justify-self:center;margin:0}
}

/* Message spacing has one owner: the container gap, not stacked row margins. */
.conversation .messages{gap:12px}
.conversation .messages>.message{margin-block:0}

/* Short phones and keyboard-sized viewports: reserve real transcript space.
   The entire conversation may scroll when chrome + composer cannot fit; unlike
   the legacy sticky composer, normal flow never paints over a message. */
@media(max-width:800px) and (max-height:650px){
 .shell>.conversation{overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:8px}
 .conversation .chathead{padding:7px 10px;max-height:none;flex-shrink:0}
 .conversation .headrow{gap:6px}
 .conversation .subhead{margin-top:4px;padding-top:4px}
 .conversation .chat-labels{padding:2px 4px;flex-shrink:0}
 .conversation .timelinebar{margin-top:2px;padding:2px;gap:3px}
 .conversation .timelinebar span{padding:4px 8px}
 .conversation .timelinebar button{min-height:30px}
 .conversation .messages{flex:1 0 120px;min-height:120px;padding:6px 8px;gap:10px;overflow-y:auto}
 .conversation .messages .date{margin:0;padding-block:3px}
 .conversation .composerwrap{position:relative;bottom:auto;max-height:none;overflow:visible;padding:0 0 2px;flex-shrink:0}
 .conversation .composehead{padding:4px 9px}
 .conversation .input{height:42px;min-height:42px;padding:7px 10px;font-size:16px}
 .conversation .toolbar{padding:4px 8px}
 .conversation .toolbar :is(.iconbtn,.micro,.primary){height:36px;min-height:36px}
 .conversation .composerhint{margin:2px 5px 0;padding-top:2px}
}
@media(max-width:800px) and (max-height:480px){
 .conversation .chathead{max-height:90px;overflow-y:auto;overscroll-behavior:contain}
}