/* Bosigo WorkOS layout optimisation
   Information hierarchy, progressive disclosure and responsive density. */
:root{
  --sidebar-expanded:280px;
  --sidebar-collapsed:82px;
  --topbar-height:72px;
  --layout-transition:260ms cubic-bezier(.2,.8,.2,1);
}

/* Smooth structural transitions without making the workspace feel unstable. */
.sidebar,.main-area,.tech-data-rail,.tech-scanline,.route-transition,.sidebar:after{
  transition:width var(--layout-transition),margin-left var(--layout-transition),left var(--layout-transition),transform var(--layout-transition);
}
body.sidebar-collapsed{--sidebar:var(--sidebar-collapsed)}

/* Sidebar: expanded by default, compact by choice. */
.sidebar{padding:18px 14px 16px;overflow-x:hidden}
.brand-block{min-height:46px;position:relative;padding-right:30px}
.brand-logo{width:128px;height:auto;object-fit:contain}
.brand-icon{display:none;width:42px;height:42px;object-fit:contain}
.brand-product{min-width:0}.brand-product strong{font-size:.8rem}.brand-product small{font-size:.61rem}
.sidebar-collapse-control{position:absolute;right:-4px;top:5px;width:30px;height:30px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);color:#fff;display:grid;place-items:center;z-index:2;transition:.18s}
.sidebar-collapse-control:hover{background:rgba(255,212,0,.14);border-color:rgba(255,212,0,.34)}
.sidebar-collapse-control span{font-size:1.35rem;line-height:1;transition:transform var(--layout-transition)}
.nav-list{gap:4px}.nav-item{position:relative;min-height:44px;padding:10px 12px;border-radius:11px}.nav-item span{flex:0 0 24px}.nav-unread{margin-left:auto}
.workspace-card{margin:22px 0 14px}.workos-module-key{margin-top:10px}

body.sidebar-collapsed .sidebar{padding-left:10px;padding-right:10px}
body.sidebar-collapsed .brand-block{justify-content:center;padding-right:0}
body.sidebar-collapsed .brand-logo,body.sidebar-collapsed .brand-product{display:none}
body.sidebar-collapsed .brand-icon{display:block}
body.sidebar-collapsed .sidebar-collapse-control{right:-1px;top:7px}
body.sidebar-collapsed .sidebar-collapse-control span{transform:rotate(180deg)}
body.sidebar-collapsed .workspace-card{width:50px;height:50px;margin:22px auto 14px;padding:0;display:grid;place-items:center;border-radius:15px}
body.sidebar-collapsed .workspace-card>strong,body.sidebar-collapsed .workspace-card>span:last-child,body.sidebar-collapsed .workspace-signal,body.sidebar-collapsed .workspace-live>span:last-child{display:none}
body.sidebar-collapsed .workspace-live{display:grid;place-items:center}
body.sidebar-collapsed .workspace-live .live-dot{margin:0}
body.sidebar-collapsed .nav-item{font-size:0;justify-content:center;gap:0;padding:10px 8px}
body.sidebar-collapsed .nav-item>span{font-size:.68rem;flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.055);color:#9e9e97}
body.sidebar-collapsed .nav-item.active>span{background:#ffd400;color:#050505}
body.sidebar-collapsed .nav-item:hover{transform:none}
body.sidebar-collapsed .nav-unread{position:absolute;right:3px;top:2px;font-size:.5rem;min-width:16px;height:16px;padding:0 4px}
body.sidebar-collapsed .workos-module-key,body.sidebar-collapsed .support-card div,body.sidebar-collapsed .sidebar-bottom>.text-button{display:none}
body.sidebar-collapsed .support-card{justify-content:center;border:0;padding:12px 0}
body.sidebar-collapsed .support-card .status-dot{margin:0}

/* Primary header: one task, three utilities, one identity. */
.topbar{height:var(--topbar-height);min-height:var(--topbar-height);padding:9px 22px;gap:16px;background:rgba(249,249,246,.95);border-bottom:1px solid rgba(0,0,0,.12);box-shadow:0 8px 28px rgba(0,0,0,.035)}
.topbar:after{height:1px}
.topbar-left{min-width:0;flex:1;gap:10px}
.page-context{min-width:0}.page-context .eyebrow{font-size:.57rem;letter-spacing:.12em;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-context h1{font-size:1.08rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 0}
.menu-button{display:grid;width:38px;height:38px;flex:0 0 auto}.menu-button svg,.topbar-icon-action svg,.topbar-command svg,.profile-chevron{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar-actions{gap:6px;position:relative;flex:0 0 auto}
.topbar-command{height:42px;width:230px;border:1px solid #d8d8d1;border-radius:12px;background:#fff;display:flex;align-items:center;gap:9px;padding:0 10px;color:#777;text-align:left;transition:.16s}
.topbar-command:hover{border-color:#b8a000;box-shadow:0 7px 22px rgba(0,0,0,.055);color:#222}.topbar-command span{flex:1;font-size:.7rem}.topbar-command kbd,.global-search-head kbd{font:700 .58rem/1 ui-sans-serif,system-ui;padding:5px 7px;border:1px solid #deded8;border-bottom-width:2px;border-radius:6px;background:#f6f6f2;color:#6f6f68}
.topbar-icon-action{position:relative;width:42px;height:42px;border-radius:12px;border:1px solid #d8d8d1;background:#fff;color:#333;display:grid;place-items:center;transition:.16s}
.topbar-icon-action:hover,.topbar-icon-action[aria-expanded="true"]{border-color:#b8a000;background:#fff9d5;transform:translateY(-1px)}
.topbar-icon-action .count-badge{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 4px;font-size:.55rem;border:2px solid #f9f9f6;background:#ffd400;color:#111}
.profile-button{height:44px;max-width:230px;padding:3px 7px 3px 4px;gap:8px;border-left:1px solid #dddcd5;margin-left:4px;padding-left:10px}
.profile-button .avatar{width:36px;height:36px;border-radius:11px;font-size:.72rem}.profile-copy{min-width:0;max-width:150px}.profile-copy strong,.profile-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-copy strong{font-size:.69rem}.profile-copy small{font-size:.58rem}.profile-chevron{width:15px;height:15px;color:#888;transition:transform .18s}.profile-button[aria-expanded="true"] .profile-chevron{transform:rotate(180deg)}

/* Secondary controls remain available but do not compete with the current task. */
.workspace-controls-wrap{position:relative}.workspace-controls-menu{position:fixed;z-index:92;top:62px;right:92px;width:310px;border:1px solid #dcdcd5;border-radius:18px;background:#fff;padding:10px;box-shadow:0 24px 80px rgba(0,0,0,.19);animation:menuReveal .18s ease both}
.workspace-controls-head{padding:10px 10px 12px;border-bottom:1px solid #ecece6;margin-bottom:7px}.workspace-controls-head>*{display:block}.workspace-controls-head strong{font-size:.78rem;margin-top:3px}.workspace-controls-head small{font-size:.6rem;color:#7c7e78;margin-top:2px}
.workspace-controls-menu .motion-toggle,.workspace-controls-menu .data-mode-toggle{width:100%;min-height:50px;border:0;border-radius:11px;padding:8px 10px;background:transparent;box-shadow:none;justify-content:flex-start}
.workspace-controls-menu .motion-toggle:hover,.workspace-controls-menu .data-mode-toggle:hover,.workspace-control-row:hover{background:#f4f4ef;transform:none}
.workspace-controls-menu .motion-toggle-copy,.workspace-controls-menu .data-mode-toggle>span:last-child{flex:1;text-align:left}.workspace-controls-menu .motion-toggle-copy strong,.workspace-controls-menu .data-mode-toggle strong{font-size:.68rem}.workspace-controls-menu .motion-toggle-copy small,.workspace-controls-menu .data-mode-toggle small{font-size:.57rem}
.workspace-control-row{width:100%;min-height:50px;border:0;background:transparent;border-radius:11px;padding:8px 10px;display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;text-align:left;color:#222}.workspace-control-row strong,.workspace-control-row small{display:block}.workspace-control-row strong{font-size:.68rem}.workspace-control-row small{font-size:.57rem;color:#7b7d77;margin-top:3px}.workspace-control-row b{font-size:1rem;color:#8d8e88}.control-row-icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#111;color:#ffd400;font-size:.68rem}.status-icon{color:#0b6b3f}.focus-icon{font-size:.9rem}
.profile-account-context{max-width:none;margin:2px 6px 7px;background:#fafaf6}.profile-menu{top:62px;right:18px}

/* The status key is optional context, not permanent chrome. */
.status-guide{top:var(--topbar-height);min-height:0;max-height:0;padding:0 22px;gap:14px;opacity:0;overflow:hidden;pointer-events:none;border-bottom:0;box-shadow:none;transition:max-height .22s ease,padding .22s ease,opacity .18s ease,border-color .18s ease}
body.status-guide-open .status-guide{max-height:66px;min-height:52px;padding:8px 22px;opacity:1;pointer-events:auto;border-bottom:1px solid #deded8;box-shadow:0 5px 18px rgba(0,0,0,.035)}
.status-guide-title{flex:0 0 auto}.status-guide-items{min-width:0}.status-guide-close{width:28px;height:28px;border:0!important;border-radius:8px!important;background:#f1f1ec!important;color:#555!important;font-size:1rem!important;display:grid;place-items:center}

/* Retain a technological feel as an ambient signal rather than a competing banner. */
.tech-data-rail{top:calc(var(--topbar-height) - 2px);height:3px;background:transparent;border:0;overflow:hidden}
.tech-data-rail:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,212,0,.15) 24%,#ffd400 48%,rgba(255,212,0,.15) 72%,transparent 100%);background-size:220% 100%;animation:optimisedSignal 5.5s linear infinite}
.tech-data-rail>div{display:none}.route-transition{top:var(--topbar-height)}.tech-scanline{opacity:.55}.content-wrap{padding:24px clamp(18px,2.2vw,34px) 44px;max-width:1540px}

/* Global search and command palette. */
.global-search-modal{width:min(720px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 48px));padding:0;border:0;border-radius:20px;background:#fff;box-shadow:0 34px 120px rgba(0,0,0,.34);overflow:hidden}
.global-search-modal::backdrop{background:rgba(5,5,5,.58);backdrop-filter:blur(5px)}
.global-search-shell{min-height:360px}.global-search-head{height:66px;display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:0 18px;border-bottom:1px solid #e5e5df}.global-search-head svg{width:22px;height:22px;fill:none;stroke:#555;stroke-width:1.8;stroke-linecap:round}.global-search-head input{width:100%;border:0;outline:0;background:transparent;font-size:.95rem}.global-search-context{display:flex;justify-content:space-between;gap:12px;padding:9px 18px;background:#f7f7f2;color:#6d6e69;font-size:.59rem}.global-search-results{padding:10px;max-height:490px;overflow:auto}.search-result{width:100%;border:0;background:transparent;border-radius:12px;padding:11px;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;text-align:left;color:#222}.search-result:hover,.search-result.active{background:#fff7c9}.search-result-icon{width:32px;height:32px;border-radius:9px;background:#111;color:#ffd400;display:grid;place-items:center;font-size:.62rem;font-weight:900}.search-result strong,.search-result small{display:block}.search-result strong{font-size:.72rem}.search-result small{font-size:.6rem;color:#777;margin-top:2px}.search-result>kbd{font-size:.55rem;color:#777}.search-empty{padding:40px 20px;text-align:center}.search-empty strong,.search-empty span{display:block}.search-empty span{font-size:.68rem;color:#777;margin-top:4px}

/* Focus mode: preserve the task and remove secondary stimulation. */
body.focus-mode .sidebar{transform:translateX(-100%)}
body.focus-mode .main-area{margin-left:0}
body.focus-mode .tech-motion-scene,body.focus-mode .innovation-ambient,body.focus-mode .tech-data-rail,body.focus-mode .innovation-assistant,body.focus-mode .assistant-panel{display:none!important}
body.focus-mode .topbar-command,body.focus-mode .topbar-actions>.topbar-icon-action,body.focus-mode .workspace-controls-wrap{display:none}
body.focus-mode .topbar{justify-content:space-between}.focus-mode-exit{display:none}.focus-mode .focus-mode-exit{display:flex}

/* Whole-platform density improvements. */
.section-header{gap:18px}.section-header h2{letter-spacing:-.035em}.panel,.metric-card{box-shadow:0 8px 28px rgba(0,0,0,.035)}
.metric-card{min-height:132px;padding:18px}.metric-card>strong{font-size:1.55rem}.panel{padding:20px}
.data-table th{position:sticky;top:0;z-index:1;background:#f7f7f3}.table-scroll{border:1px solid #e3e3dc;border-radius:14px;overflow:auto}.table-scroll .data-table{border:0}
.filter-row{position:relative}.search-field input{min-height:42px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(255,212,0,.48);outline-offset:2px}

@keyframes optimisedSignal{to{background-position:-220% 0}}

@media(max-width:1280px){
  .topbar-command{width:44px;padding:0;display:grid;place-items:center}.topbar-command span,.topbar-command kbd{display:none}
  .profile-copy{max-width:118px}
}
@media(max-width:1080px){
  .profile-copy{display:none}.profile-button{padding-left:7px;border-left:0;margin-left:0}.profile-chevron{display:none}
  .workspace-controls-menu{right:58px}
}
@media(max-width:960px){
  body.sidebar-collapsed{--sidebar:var(--sidebar-expanded)}
  .sidebar-collapse-control{display:none}.sidebar{width:var(--sidebar-expanded)}
  .main-area{margin-left:0}.tech-data-rail,.tech-scanline,.route-transition{left:0}
  .menu-button{display:grid}.content-wrap{padding-top:22px}
}
@media(max-width:720px){
  :root{--topbar-height:64px}
  .topbar{height:64px;min-height:64px;padding:8px 11px;gap:8px}.page-context .eyebrow{display:none}.page-context h1{font-size:.92rem}
  .topbar-actions{gap:4px}.topbar-icon-action,.menu-button,.topbar-command{width:38px;height:38px;border-radius:10px}.topbar-actions>.topbar-icon-action[data-route="chat"]{display:none}
  .profile-button{height:38px;padding:0}.profile-button .avatar{width:36px;height:36px}.workspace-controls-menu{top:56px;right:8px;width:min(310px,calc(100vw - 16px))}.profile-menu{top:56px;right:8px}
  body.status-guide-open .status-guide{padding:7px 11px;max-height:106px;flex-wrap:wrap}.status-guide-title small,.status-guide>button#statusGuideHelp{display:none}.status-guide-items{order:3;flex-basis:100%;padding-bottom:2px}.status-guide-close{margin-left:auto}
  .global-search-modal{width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:15px}.global-search-context small{display:none}
  .content-wrap{padding:18px 12px 34px}.panel{padding:17px}.metric-card{min-height:120px}
}
@media(prefers-reduced-motion:reduce){
  .sidebar,.main-area,.tech-data-rail,.tech-scanline,.route-transition,.status-guide{transition:none!important}.tech-data-rail:before{animation:none}
}
.focus-mode-exit{display:none;border:1px solid #d7d7d0;background:#fff;border-radius:10px;padding:8px 11px;font-size:.66rem;font-weight:850;gap:6px;align-items:center;color:#333}
body.focus-mode .focus-mode-exit{display:flex}
.chat-route .topbar{height:var(--topbar-height);min-height:var(--topbar-height);padding-top:8px;padding-bottom:8px}
.chat-route #screen-chat{height:calc(100vh - var(--topbar-height))}
.chat-route .status-guide{display:none}
.topbar-icon-action.is-pressed{transform:scale(.95);background:#fff3ad}


/* Navigation semantics: route-specific icons improve recognition and reduce scanning effort. */
.nav-item{
  display:grid;
  grid-template-columns:28px 34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.nav-index{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:9px;
  background:rgba(255,255,255,.045);
  color:#8e8e88;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.04em;
}
.nav-icon{
  width:34px;
  height:34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.045);
  color:#d8d8d1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.nav-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.95rem;
}
.nav-item:hover .nav-icon,
.nav-item:hover .nav-index{background:rgba(255,212,0,.08);color:#fff}
.nav-item.active .nav-index,
.nav-item.active .nav-icon{background:rgba(8,8,8,.12);color:#080808;box-shadow:none}
.nav-item.active .nav-label{font-weight:780}
.nav-unread{margin-left:0}

/* Cleaner brand block and less visual collision at the top of the sidebar. */
.brand-block{padding-right:38px;align-items:center;gap:10px}
.brand{min-width:0;align-items:center;gap:10px;padding-right:6px}
.brand-logo{width:132px;max-width:100%}
.brand-product{overflow:hidden}
.brand-product strong,.brand-product small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-product strong{font-size:.88rem;letter-spacing:-.01em}
.brand-product small{font-size:.66rem;color:#a6a69f}
.workspace-card{border-color:rgba(255,212,0,.12);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03))}

/* Better balance in compact mode. */
body.sidebar-collapsed .nav-item{grid-template-columns:1fr;justify-items:center;gap:6px;padding:9px 6px;min-height:56px}
body.sidebar-collapsed .nav-index{order:2;width:auto;height:auto;padding:0;background:transparent;font-size:.56rem;color:#8e8e88}
body.sidebar-collapsed .nav-icon{width:34px;height:34px}
body.sidebar-collapsed .nav-label{display:none}
body.sidebar-collapsed .nav-item.active .nav-icon{background:#ffd400;color:#050505}
body.sidebar-collapsed .nav-item.active .nav-index{color:#ffd400}
body.sidebar-collapsed .nav-unread{right:8px;top:4px}

/* Topbar resilience and guardrail readability across dense routes. */
.topbar-actions{min-width:0}
.topbar-command{max-width:min(260px,28vw)}
.profile-button{min-width:0}
.profile-copy{min-width:0}
.prototype-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.prototype-banner p{margin:0;flex:1;min-width:240px}
.prototype-banner button{margin-left:auto}

/* Collaboration view: avoid overlap and preserve space for the message composer. */
.chat-route .content-wrap{padding-bottom:18px}
.collaboration-shell,.collab-rail,.conversation-pane,.conversation-side{min-width:0}
.conversation-pane{overflow:hidden}
.message-composer{position:sticky;bottom:0;background:#fff;z-index:2}
@media(max-width:1320px){
  .topbar-command{max-width:200px}
}
@media(max-width:1160px){
  .nav-label{font-size:.9rem}
  .brand-logo{width:122px}
}