@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Compact operator workspace, measured against the reference on 10 Oct 2026. */
:root { --primary:#5341cc; --primary-dark:#4031a6; --primary-soft:#f0effc; --accent:#930dcf; --muted:#667085; --ink:#202636; --text:#344054; --line:#e9ecf1; --canvas:#f5f7fa; --radius:8px; font-family:Inter,system-ui,sans-serif; }
html,body { height:100%; overflow:hidden; scroll-behavior:auto; }
body { font-size:13px; }
button { touch-action:manipulation; }
svg { stroke-width:1.7; width:19px; height:19px; }
.app-shell { height:100dvh; min-height:0; display:flex; flex-direction:column; }
.sidebar { position:relative; height:58px; min-height:58px; padding-right:180px; border-color:var(--line); box-shadow:0 1px 2px #10182806; z-index:50; }
.brand { width:137px; min-height:58px; padding:0 28px; border:0; flex-shrink:0; }
.brand-logo-wrap { width:80px; height:auto; padding:0; border-radius:0; }
.main-nav { padding:6px 0; gap:3px; overflow:visible; }
.nav-item { min-height:44px; padding:0 14px; gap:10px; border:0; border-radius:3px; color:#202636; font-size:12px; font-weight:500; }
.nav-item svg { display:block; color:#707b8a; }
.nav-item:hover,.nav-item.is-active { background:#f3f4f6; color:#202636; border:0; }
#nav-unread { display:none; }
.nav-group { position:relative; display:flex; }
.nav-dropdown { position:absolute; top:49px; left:0; min-width:240px; padding:6px; background:white; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 26px #1018281a; }
.nav-dropdown .nav-item { width:100%; white-space:nowrap; }
.sidebar-footer { display:none; }
.app-area { min-height:0; width:100%; flex:1; display:flex; flex-direction:column; margin:0; }
.topbar { position:absolute; top:0; right:12px; left:auto; height:58px; width:164px; min-height:0; padding:0; border:0; box-shadow:none; background:transparent; z-index:55; }
.topbar-actions { gap:5px; }
.topbar .page-title { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.topbar-actions>.icon-button { width:30px; height:36px; color:#344054; }
.profile-button { padding:0; background:none; border:0; }
.profile-button>div,.profile-button>i { display:none; }
.profile-button>span { width:29px; height:29px; font-size:10px; background:var(--primary-soft); color:var(--primary); border:1px solid #ded9f8; border-radius:50%; }
#main-content { flex:1; min-height:0; overflow:hidden; }
.view { height:100%; min-height:0; overflow:auto; }
.content-page { max-width:1600px; margin:auto; padding:28px; }
.content-page h2 { font-size:23px; font-weight:600; }
.content-page h3 { font-weight:600; }
.button { min-height:36px; border-radius:6px; font-size:12px; font-weight:500; }
.inbox-layout { position:relative; height:100%; min-height:0; grid-template-columns:360px minmax(0,1fr) 58px; }
.conversation-list { min-height:0; height:100%; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.connection-banner { min-height:29px; display:flex; align-items:center; gap:8px; padding:4px 16px; border:0; color:white; background:#4936bb; font-size:10px; font-weight:600; text-align:left; flex-shrink:0; }
.connection-banner svg { width:15px; height:15px; }
.connection-banner.is-offline { background:#92400e; }
.queue-tabs { height:46px; min-height:46px; padding:6px 8px; gap:3px; align-items:center; background:#f6f7fa; border-bottom:1px solid var(--line); }
.queue-tab { flex:0 1 auto; min-height:32px; padding:5px 10px; gap:5px; border:0; border-radius:20px; color:#5b6576; font-size:11px; font-weight:400; white-space:nowrap; }
.queue-tab.is-active { color:#202636; background:#e6e9ef; border:0; }
.queue-tab b { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:10px; background:#c52d32; color:white; font-size:9px; font-weight:600; }
.queue-tab b:empty { display:none; }
.queue-tabs .archive-toggle { margin-left:auto; }
.icon-button { width:32px; height:32px; border-radius:6px; color:#717c8d; }
.icon-button:hover { background:#eceff4; color:var(--primary); }
.icon-button[aria-pressed=true] { background:var(--primary-soft); color:var(--primary); }
.list-toolbar { height:42px; min-height:42px; padding:5px 10px; gap:3px; background:#f6f7fa; border-bottom:1px solid var(--line); }
.filter-chip { padding:5px 11px; border:0; border-radius:20px; color:#596579; background:transparent; font-size:11px; white-space:nowrap; }
.filter-chip.is-active { color:white; background:var(--primary); }
.list-toolbar .icon-button { width:29px; height:30px; flex-shrink:0; }
.list-toolbar .filter-chip:nth-child(2) { margin-right:auto; }
.inbox-search { padding:8px 12px; border-bottom:1px solid var(--line); }
.inbox-search .search-field { min-height:35px; border-radius:6px; }
.inbox-search input { min-width:0; font-size:12px; }
.active-filters { padding:6px 12px; display:flex; gap:5px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.active-filters button { color:var(--primary); background:var(--primary-soft); border:0; border-radius:4px; padding:4px 8px; font-size:10px; }
.conversation-items { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#d3d7df transparent; }
.conversation-item { width:100%; min-height:60px; padding:9px 14px; gap:11px; border:0; border-bottom:1px solid #f0f1f4; border-radius:0; text-align:left; display:flex; align-items:center; background:white; position:relative; }
.conversation-item:hover { background:#f8f9fc; }
.conversation-item.is-active { background:#f0effc; border-left:0; box-shadow:inset 3px 0 var(--primary); }
.avatar { border-radius:50%; width:36px; height:36px; flex-shrink:0; font-size:11px; font-weight:500; position:relative; overflow:hidden; background:#e6e8ed; color:#667085; }
.avatar.blue,.avatar.green,.avatar.purple,.avatar.orange { background:#e9e7f6; color:#675397; }
.avatar-photo { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.conversation-copy { min-width:0; flex:1; display:grid; gap:3px; }
.conversation-copy strong { font-size:12px; font-weight:500; color:#202636; }
.conversation-copy>span { font-size:11px; color:#5141b8; }
.conversation-meta { flex:0 0 auto; min-width:48px; max-width:108px; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.conversation-meta time { color:#727d8e; font-size:10px; white-space:nowrap; }
.conversation-meta .team-chip { max-width:108px; padding:2px 9px; border-radius:12px; font-size:10px; line-height:16px; color:#4737ac; background:#eaedf3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-meta .meta-bottom { display:flex; gap:5px; align-items:center; }
.unread-count { min-width:17px; height:17px; padding:0 4px; font-style:normal; background:#c52d32; font-size:9px; }
.load-more { display:block; width:calc(100% - 24px); margin:12px; min-height:36px; border:1px solid var(--line); border-radius:6px; color:var(--primary); background:white; font-size:11px; }
.quick-start { min-height:65px; padding:12px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; background:white; }
.quick-start input,.quick-start select { min-width:0; height:37px; border:1px solid #e3e5e9; border-radius:6px; padding:7px 10px; background:white; color:var(--text); font-size:11px; }
.quick-start select { width:78px; flex-shrink:0; }
.quick-start input { flex:1; width:90px; }
.quick-start .button { min-height:37px; padding:0 11px; border-radius:20px; color:var(--primary); }
.chat-panel { position:relative; display:flex; min-width:0; min-height:0; overflow:hidden; background:white; }
.chat-panel.is-empty { background:#f1f5f9; }
.chat-panel.is-empty .chat-header { display:none; }
.chat-header { min-height:51px; height:51px; padding:7px 21px; gap:10px; border-bottom:1px solid var(--line); background:#f8f9fb; flex-shrink:0; }
.chat-header .avatar { width:35px; height:35px; }
.chat-person strong { font-size:14px; font-weight:600; }
.chat-person span { color:#667085; font-size:10px; }
.chat-header .status-pill { padding:6px 10px; border:0; font-size:10px; background:#ececf4; color:var(--primary); }
.chat-header .status-pill i { display:none; }
.chat-actions { gap:2px; }
.chat-header::before { display:none; }
.chat-back { display:none; }
.chat-search { padding:7px 20px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); background:#fafbfc; }
.chat-search .search-field { min-height:34px; flex:1; }
.chat-search input { font-size:12px; }
#search-matches { color:var(--muted); font-size:11px; }
.messages { flex:1 1 0; min-height:0; padding:20px 28px; background:white; overflow:auto; overflow-anchor:none; scrollbar-width:thin; scrollbar-color:#d3d7df transparent; }
.is-empty .messages { display:grid; place-items:center; background:transparent; }
.inbox-welcome { display:grid; justify-items:center; text-align:center; gap:20px; color:#8490a3; }
.inbox-welcome>svg { width:100px; height:100px; stroke-width:1.2; }
.inbox-welcome strong { font-size:17px; font-weight:600; }
.message-row { margin-bottom:7px; }
.message-bubble { min-width:115px; max-width:min(75%,540px); border:0; border-radius:7px; padding:10px 12px 6px; background:#f1f4f8; box-shadow:none; color:#273142; font-size:12px; line-height:1.5; }
.message-row.out .message-bubble { background:#f0effc; border:0; border-radius:7px; }
.message-text { color:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }
.message-info { margin-top:6px; font-size:9px; gap:5px; color:#737d8c; }
.message-info svg { width:13px; height:13px; color:var(--primary); }
.message-info .status-failed { color:#b42318; }
.message-row.is-search-match .message-bubble { outline:2px solid #d5ad23; background:#fffaeb; }
.day-divider { margin:10px 0 24px; font-size:10px; color:#778196; }
.system-message { margin:16px auto; font-size:10px; text-align:center; color:#798394; }
.message-media-image img { max-height:320px; }
.message-media-video video { max-height:320px; }
.conversation-controls { display:flex; align-items:center; justify-content:flex-end; gap:9px; padding:11px 21px; flex-shrink:0; background:#f8f9fb; border-top:1px solid var(--line); }
.conversation-controls .protocol { margin-right:auto; font-size:10px; color:#7a8495; }
.conversation-controls .button { border-radius:20px; min-height:34px; padding:0 13px; gap:7px; font-size:11px; }
.conversation-controls .button.secondary { background:white; color:var(--primary); }
.composer { flex:0 0 auto; padding:10px 20px 14px; gap:8px; align-items:flex-end; background:#f8f9fb; border-top:0; }
.composer textarea { min-height:42px; padding:11px 12px; border-radius:6px; font-size:13px; background:white; }
.composer-tools { padding-bottom:5px; }
.send-button { width:39px; height:39px; border-radius:50%; margin-bottom:2px; }
.jump-latest { position:absolute; right:24px; bottom:130px; padding:7px 12px; display:flex; align-items:center; gap:6px; border:1px solid #ddd8f1; border-radius:20px; color:var(--primary); background:white; box-shadow:0 3px 12px #10182816; font-size:11px; z-index:2; }
.utility-rail { grid-column:-2; grid-row:1; border-left:1px solid var(--line); display:flex; align-items:center; flex-direction:column; padding:12px 8px; gap:10px; background:white; }
.utility-rail .icon-button { width:36px; height:36px; border-radius:50%; }
.rail-bottom { margin-top:auto; width:7px; height:7px; border-radius:50%; background:#c28b16; }
.rail-bottom.is-connected { background:#059669; }
.contact-panel { display:none; background:#fff; }
.inbox-layout.details-open { grid-template-columns:360px minmax(0,1fr) 280px 58px; }
.details-open .contact-panel { display:block; }
.contact-profile { position:relative; padding:22px 16px; }
.contact-profile .avatar { width:62px; height:62px; border-radius:50%; }
.contact-profile h3 { font-size:15px; font-weight:600; }
.contact-profile .close-details { position:absolute; top:7px; right:8px; }
.detail-section { padding:17px; }
.detail-section h4 { font-size:10px; font-weight:600; letter-spacing:.02em; }
.detail-section .button { min-height:28px; padding:3px 7px; font-size:10px; }
.detail-section .section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.section-heading h4 { margin:0; }
.detail-row strong { font-size:11px; font-weight:500; overflow-wrap:anywhere; }
.contact-notes { font-size:11px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; color:#667085; }
.modal { border-radius:10px; }
.modal-backdrop { backdrop-filter:none; background:#0f172a55; }
.modal-eyebrow { color:var(--primary); }
.modal h2 { font-weight:600; }
.tag { color:#5141b8; background:#f0effc; border-radius:12px; }
.settings-links { display:grid; gap:8px; }
.toast.error { color:#b42318; background:#fef3f2; border-color:#fecdca; }
.toast.warning { color:#92400e; background:#fffbeb; border-color:#fde68a; }
.list-loading { padding:24px; text-align:center; color:var(--muted); font-size:12px; }
.inbox-error { padding:24px; display:grid; justify-items:center; gap:12px; text-align:center; }
.skeleton-row { height:60px; border-bottom:1px solid var(--line); background:linear-gradient(100deg,#fff 20%,#f6f7fa 50%,#fff 80%); }
.crm-table { width:100%; background:white; border:1px solid var(--line); border-radius:8px; }
.crm-list-mode { display:block; }
.radial { background:var(--primary-soft); border-radius:10px; color:var(--primary); }
@media(max-width:1250px) { .inbox-layout { grid-template-columns:330px minmax(0,1fr) 48px; }.inbox-layout.details-open { grid-template-columns:330px minmax(0,1fr) 260px 48px; }.nav-item { padding:0 10px; }.brand { width:125px; padding-inline:22px; } }
@media(max-width:1050px) { .inbox-layout.details-open { grid-template-columns:330px minmax(0,1fr) 48px; }.details-open .contact-panel { position:absolute; right:48px; inset-block:0; width:280px; z-index:10; box-shadow:-8px 0 25px #10182815; }.nav-item { padding:0 8px; gap:6px; }.sidebar { padding-right:150px; }.topbar { width:140px; }.topbar-actions>[data-action=global-search] { display:none; }.brand { width:110px; padding-inline:15px; } }
@media(max-width:900px) { .sidebar { position:relative; inset:auto; width:100%; height:58px; flex-direction:row; transform:none; background:white; box-shadow:none; }.brand { border:0; }.main-nav { display:flex; padding:6px 0; overflow:visible; }.nav-item { margin:0; width:auto; color:var(--ink); font-size:11px; }.nav-item.is-active,.nav-item:hover { color:var(--ink); background:#f3f4f6; box-shadow:none; }.nav-dropdown .nav-item { width:100%; }.app-area { min-height:0; }.sidebar-close,.menu-toggle { display:none!important; }.topbar { position:absolute; top:0; height:58px; }.topbar-actions { display:flex; }.inbox-layout { height:100%; grid-template-columns:310px minmax(0,1fr) 44px; }.inbox-layout.details-open { grid-template-columns:310px minmax(0,1fr) 44px; }.details-open .contact-panel { right:44px; }.utility-rail { padding-inline:4px; }.conversation-controls { padding:10px; }.conversation-controls .protocol { display:none; }.chat-header { padding-inline:14px; }.chat-actions [data-action=conversation-menu] { display:none; }.messages { padding:16px; }.message-bubble { max-width:90%; }.composer { padding:9px 12px; }.inbox-welcome strong { font-size:14px; max-width:250px; }.nav-item svg { width:17px; }.brand { width:90px; padding-inline:12px; }.brand-logo-wrap { width:66px; } }
@media(max-width:760px) { .sidebar { padding-right:92px; }.topbar { right:10px; width:72px; }.topbar-actions>[data-action=help] { display:none; }.nav-item { padding:0 7px; }.nav-item svg { display:none; }.inbox-layout,.inbox-layout.details-open { grid-template-columns:290px minmax(0,1fr) 42px; }.chat-person span { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.chat-header .status-pill { display:none; } }
@media(max-width:700px) {
 .sidebar { padding:0; height:56px; min-height:56px; }.brand { width:116px; padding:0 16px; }.brand-logo-wrap { width:85px; }.main-nav { display:none; position:fixed; top:56px; left:0; bottom:0; width:270px; padding:14px; background:white; box-shadow:8px 0 20px #10182820; flex-direction:column; z-index:60; }.sidebar.is-open .main-nav { display:flex; }.nav-item { min-height:44px; width:100%; gap:12px; font-size:14px; padding:0 12px; }.nav-item svg { display:block; }.nav-group { display:block; }.nav-dropdown { position:static; border:0; box-shadow:none; min-width:0; padding:0 0 0 12px; }.nav-dropdown .nav-item { font-size:12px; }.topbar { width:calc(100% - 132px); height:56px; right:12px; justify-content:space-between; }.menu-toggle { display:grid!important; order:2; width:38px; height:40px; }.topbar-actions { margin-left:auto; }.topbar-actions>.icon-button { display:grid; width:38px; height:40px; }.topbar-actions>[data-action=global-search],.topbar-actions>[data-action=help] { display:none; }
 .view { min-height:0; }.inbox-layout,.inbox-layout.details-open { display:block; height:100%; }.conversation-list { height:100%; }.utility-rail { display:none; }.chat-panel { position:absolute; inset:0; display:none; height:100%; z-index:20; }.inbox-layout.chat-open .chat-panel { display:flex; }.inbox-layout.chat-open .conversation-list { display:none; }.chat-header { height:61px; min-height:61px; gap:8px; padding:10px; }.chat-back { display:grid; }.chat-header .avatar { width:34px; height:34px; }.chat-header .icon-button { width:38px; height:38px; }.chat-person strong { font-size:14px; }.chat-person span { font-size:10px; }.chat-actions [data-action=conversation-menu] { display:none; }
 .queue-tabs { min-height:50px; }.queue-tab { padding:7px 13px; font-size:12px; }.list-toolbar { min-height:46px; }.list-toolbar .icon-button { width:34px; height:34px; }.filter-chip { font-size:12px; }.conversation-item { min-height:72px; padding:12px 16px; }.conversation-copy strong { font-size:14px; }.conversation-copy>span { font-size:12px; }.conversation-meta time { font-size:10px; }.conversation-meta .team-chip { font-size:10px; }.avatar { width:40px; height:40px; }.quick-start { padding-bottom:max(12px,env(safe-area-inset-bottom)); }.quick-start input { font-size:16px; height:44px; }.quick-start select { height:44px; }.quick-start .button { min-height:44px; }.inbox-search input,.chat-search input,.composer textarea { font-size:16px; }.chat-search { padding:8px; gap:6px; }.messages { padding:16px 12px; }.message-bubble { max-width:86%; font-size:14px; }.message-info { font-size:10px; }.conversation-controls { padding:8px 12px; }.conversation-controls .button { min-height:37px; }.composer { padding:8px 10px max(10px,env(safe-area-inset-bottom)); }.composer-tools .icon-button { height:40px; }.send-button { width:43px; height:43px; }.details-open .contact-panel { position:absolute; inset:0; width:100%; z-index:30; }.contact-profile .close-details { width:44px; height:44px; }.contact-notes,.detail-row strong { font-size:14px; }.detail-row span { font-size:12px; }.jump-latest { bottom:136px; right:14px; }.content-page { padding:20px 14px; }.modal-backdrop { padding:12px; }.modal { max-height:90dvh; }.field input,.field select,.field textarea { font-size:16px; }.toast-region { left:12px; right:12px; }.toast { min-width:0; max-width:none; }
}