:root{color-scheme:light;--ink:#253047;--muted:#7a8495;--line:#e9ebf0;--surface:#f7f8fa;--accent:#34736a;--accent-soft:#eaf3f0;--rail:52px;--sidebar:175px;--list:255px;--details:248px;font-family:'Segoe UI',Tahoma,Arial,sans-serif;font-size:14px;color:var(--ink);background:#fff}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #538cff;outline-offset:2px}input,textarea,select{border:1px solid #dde1e8;border-radius:5px;background:#fff;padding:9px 11px;max-width:100%;outline:none}input:focus,textarea:focus,select:focus{border-color:#7aa99e;box-shadow:0 0 0 2px #e8f3ef}input::placeholder,textarea::placeholder{color:#939ba8}textarea{resize:vertical;line-height:1.8;width:100%}select{cursor:pointer}a{color:inherit;text-decoration:none}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4,b,strong{font-weight:600}svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;fill:none;vertical-align:middle}[data-icon]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}[hidden]{display:none!important}small{font-size:12px;color:var(--muted);line-height:1.7}label{display:block}code{font-family:monospace;font-size:12px;background:#f0f3f7;padding:2px 5px;border-radius:4px}button svg{pointer-events:none}.icon-button{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;color:#6d7788;border-radius:5px;flex-shrink:0}.icon-button:hover{background:#f0f2f6;color:#273449}.icon-button svg{width:17px;height:17px}.primary-button,.outline-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border:1px solid transparent;border-radius:5px;font-weight:600;font-size:13px;line-height:1.5;white-space:nowrap}.primary-button{background:var(--accent);color:#fff;border-color:var(--accent)}.primary-button:hover:not(:disabled){background:#285e57}.outline-button{background:#fff;border-color:#dce1e8;color:#4c586d}.outline-button:hover:not(:disabled){background:#f7f8fa;border-color:#bcc5d1}.primary-button svg,.outline-button svg{width:16px;height:16px}.full{width:100%}.text-button{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#617285;padding:3px 0}.text-button:hover{color:#256558}.danger{color:#bb4f55!important}.pill{font-size:11px;display:inline-flex;align-items:center;padding:3px 8px;border-radius:4px;background:#f5efd9;color:#8a722b;white-space:nowrap;border:1px solid #ece2bd}.pill.subtle{background:#f3f5f8;border-color:#e6e9ee;color:#748095}.pill.live{background:#edf6ef;border-color:#d4e7d8;color:#548267}.avatar{display:inline-flex;align-items:center;justify-content:center;width:33px;height:33px;border-radius:50%;flex-shrink:0;font-size:12px;font-weight:600;background:#e7eef6;color:#5e7491;letter-spacing:-1px}.tone-1{background:#eae8f8;color:#8176a0}.tone-2{background:#f6e6e5;color:#b48680}.tone-3{background:#e3efee;color:#65938b}.tone-4{background:#f4eadb;color:#a8906b}.tone-5{background:#e7eaf2;color:#7b8ca7}.user-avatar{background:#e2ebe7;color:#527469}.online-dot{width:6px;height:6px;border-radius:50%;background:#62ae82;display:inline-block;flex-shrink:0}.eyebrow{font-size:12px;color:#8993a3;display:block;margin-bottom:8px}.empty-state{min-height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:25px;color:#8a94a4;font-size:13px;text-align:center;line-height:1.8}.empty-state svg{width:29px;height:29px;color:#b0bac8}.empty-state h3{font-size:14px;color:#677589}.empty-state h2{font-size:20px;color:#5b697e;font-weight:500}.empty-state.small{font-size:12px;padding:35px 20px}.empty-state p{max-width:300px}
/* Keep the same left-to-right placement as the reference; Arabic stays inside each panel. */
.app-shell{height:100dvh;display:flex;direction:ltr;overflow:hidden}.navigation{width:var(--rail);flex:0 0 var(--rail);background:#f5f6f9;border-right:1px solid var(--line);display:flex;align-items:center;flex-direction:column;padding:15px 5px 10px;z-index:25}.brand{display:flex;margin-bottom:24px}.brand img{width:31px;height:31px}.navigation nav{width:100%;display:flex;flex-direction:column;gap:9px}.nav-item{width:39px;height:39px;display:flex;justify-content:center;align-items:center;position:relative;border-radius:6px;color:#8a93a4}.nav-item svg{width:20px;height:20px}.nav-item:hover{background:#e8edf2;color:#516274}.nav-item.active{background:#e1e7ef;color:#40546f}.nav-item b{position:absolute;right:0;top:0;background:#748eb0;color:white;min-width:14px;line-height:14px;font-size:9px;border-radius:8px;padding-inline:3px}.nav-divider{height:1px;background:#e3e7ec;margin:6px 7px}.rail-bottom{margin-top:auto;padding-top:15px}.rail-bottom .avatar{width:31px;height:31px;font-size:11px}.main-shell{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.topbar{height:43px;flex:0 0 43px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 14px;gap:13px;direction:ltr;z-index:22}.workspace-switch-wrap{position:relative}.workspace-switch{display:flex;align-items:center;gap:7px;font-size:12px;padding:4px 0;max-width:240px}.workspace-switch b{max-width:185px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-switch svg{width:12px;height:12px;color:#8a94a5}.workspace-icon{width:23px;height:23px;display:grid;place-items:center;border-radius:5px;background:#eef1f6;color:#75859b;font-size:12px}.topbar-path{display:flex;align-items:center;gap:13px;font-size:12px;color:#788497}.topbar-path>span{color:#c2c8d0}.topbar-path b{font-weight:500}.topbar-end{margin-left:auto;display:flex;gap:9px;align-items:center;font-size:11px;color:#738095;direction:rtl}.workspace-menu{position:absolute;left:0;top:37px;width:280px;background:#fff;border:1px solid #e1e6ed;border-radius:8px;box-shadow:0 12px 40px #1e314426;padding:8px;direction:rtl;max-height:80dvh;overflow:auto}.menu-user{padding:10px;border-bottom:1px solid var(--line)}.menu-user b,.menu-user span,.menu-user small{display:block;overflow-wrap:anywhere}.menu-user b{font-size:14px}.menu-user span{font-size:12px;color:#8390a3;direction:ltr;text-align:right;margin-top:3px}.menu-user small{margin-top:3px}.menu-label{font-size:10px;color:#9da6b5;padding:14px 10px 6px}.menu-action,.tenant-option,.demo-switch-option{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;text-align:right;border-radius:4px;font-size:12px;line-height:1.5}.menu-action:hover,.tenant-option:hover,.demo-switch-option:hover{background:#f3f5f8}.tenant-option.active{background:#eaf2ee;color:#3a6c5b}.tenant-option>span{flex:1}.tenant-option small{font-size:10px}.demo-switch-option b{display:block;font-size:12px}.demo-switch-option small{font-size:10px}.menu-action svg{width:15px;height:15px}.error-banner{background:#fff3f1;color:#aa594a;font-size:12px;padding:7px 15px;text-align:right;direction:rtl;border-bottom:1px solid #f0d7d2}
.inbox-layout{flex:1;min-height:0;display:flex;position:relative;direction:ltr;overflow:hidden;background:#fff}.inbox-sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);background:#f7f8fb;border-right:1px solid var(--line);padding:20px 10px 10px;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin}.sidebar-heading{display:flex;align-items:center;gap:7px;margin-bottom:23px;padding:0 8px}.sidebar-heading h1{font-size:17px;color:#3e4c64;flex:1}.subtle-icon{color:#8491a7}.subtle-icon svg{width:17px;height:17px}.inbox-filter-nav{display:flex;flex-direction:column;gap:4px}.inbox-filter,.tag-filter{display:flex;align-items:center;gap:8px;width:100%;padding:9px 9px;font-size:12px;color:#7a879b;border-radius:5px;text-align:right;min-width:0}.inbox-filter>span:nth-child(2),.tag-filter>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inbox-filter svg{width:15px;height:15px;color:#94a0b2}.inbox-filter b,.tag-filter b{margin-right:auto;font-size:10px;font-weight:400;color:#94a0b2;line-height:16px}.inbox-filter:hover,.tag-filter:hover{background:#eef1f6}.inbox-filter.active,.tag-filter.active{background:#e8edf5;color:#445e80}.inbox-filter.active svg{color:#6b87ad}.inbox-filter.active b{color:#6b87ad}.sidebar-section-title{font-size:10px;font-weight:600;color:#939caf;margin:26px 9px 9px}.sidebar-empty{font-size:11px;color:#a0a8b6;padding:7px 9px;line-height:1.9}.sidebar-bottom{margin-top:auto;display:flex;gap:7px;padding:30px 8px 3px;font-size:10px;color:#9ba4b3;align-items:center}.sidebar-bottom svg{width:13px;height:13px}.stage-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#adb8c8;flex-shrink:0}.stage-in_progress{background:#8badd4}.stage-awaiting_payment{background:#d4b279}.stage-ready_to_ship{background:#ae9dce}.stage-shipped{background:#87b79e}.conversation-list-panel{width:var(--list);flex:0 0 var(--list);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:#fff}.list-heading{display:flex;align-items:center;gap:6px;padding:17px 14px 13px;min-height:58px}.list-heading h2{font-size:15px;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.search-field{display:flex;align-items:center;gap:7px;background:#fafbfc;border:1px solid #e8ebf0;border-radius:5px;padding:0 9px;margin:0 14px 12px;color:#a0a9b7}.search-field svg{width:15px;height:15px}.search-field input{border:0;box-shadow:none!important;background:none;width:100%;min-width:0;padding:8px 0;font-size:11px;color:#56647a}.search-field:focus-within{border-color:#9db8ac}.list-controls{display:flex;gap:4px;padding:0 14px 9px}.list-controls select{border:0;background:#f5f6f9;padding:5px 7px;font-size:11px;min-width:0;color:#8490a3}.list-controls select:first-child{flex:1}.list-tools{display:flex;justify-content:space-between;align-items:center;padding:4px 15px 11px;border-bottom:1px solid #f2f3f6;color:#9aa4b4;font-size:10px}.small-check{display:flex;align-items:center;gap:5px;font-size:11px;color:#7e8da3;cursor:pointer}.small-check input{width:12px;height:12px;accent-color:#6c8ab0;margin:0}.active-filters{background:#f1f5f8;display:flex;gap:5px;align-items:center;padding:6px 12px;font-size:10px;color:#778ea1}.active-filters>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.active-filters button{font-size:10px}.conversation-list{flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;padding:4px 0}.conversation-row{display:flex;width:100%;align-items:flex-start;gap:9px;text-align:right;padding:14px 12px;border-bottom:1px solid #f5f6f8;transition:background .1s;position:relative;min-height:88px}.conversation-row:hover{background:#f7f9fc}.conversation-row.selected{background:#edf1f7}.conversation-row.selected:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:#7b95b9}.conversation-row .avatar{width:32px;height:32px;font-size:11px;margin-top:2px}.row-content{min-width:0;flex:1}.row-top{display:flex;gap:5px;justify-content:space-between;align-items:center;margin-bottom:5px;direction:rtl}.row-top b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#46536b}.row-top time{font-size:9px;color:#9da6b5;white-space:nowrap;flex-shrink:0}.row-bottom{display:flex;gap:6px;align-items:center}.row-bottom p{font-size:11px;color:#8a95a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;line-height:1.7}.unread-count{font-size:9px;color:#fff;background:#7d97b7;min-width:14px;line-height:14px;padding:0 3px;border-radius:8px;text-align:center}.row-labels{display:flex;gap:5px;align-items:center;margin-top:7px;min-height:13px;color:#a1abba;font-size:9px;overflow:hidden;white-space:nowrap}.row-labels .row-owner{overflow:hidden;text-overflow:ellipsis;max-width:95px}.row-labels svg{width:11px;height:11px}.row-tag{background:#f1f1f8;color:#9291a8;padding:0 5px;border-radius:3px;max-width:65px;overflow:hidden;text-overflow:ellipsis;line-height:16px}.row-star{color:#baa274}.row-star svg{fill:#d4c19044}.needs-reply-dot{width:5px;height:5px;border-radius:50%;background:#c9a976;display:inline-block}.list-footer{display:flex;align-items:center;gap:7px;min-height:37px;padding:4px 15px;border-top:1px solid var(--line);font-size:10px;color:#8e9aab}.list-footer .online-dot{width:5px;height:5px;background:#9dbca9}.list-footer>button{margin-right:auto;width:24px;height:24px}.list-footer>button svg{width:14px;height:14px}
.chat-panel{flex:1;min-width:0;min-height:0;background:#fff}.chat-empty{height:100%;background:#fafbfd;gap:12px}.empty-chat-art{width:83px;height:83px;border-radius:26px;background:#eef2f6;border:1px solid #e7ecf3;display:grid;place-items:center;margin-bottom:10px;box-shadow:0 0 0 12px #f5f7fa}.empty-chat-art svg{width:36px;height:36px;color:#a6b6c8}.chat-content{height:100%;display:flex;flex-direction:column;min-height:0}.chat-header{display:flex;align-items:center;gap:9px;padding:12px 17px;border-bottom:1px solid #f1f2f5;min-height:68px}.chat-person{flex:1;min-width:90px}.chat-person h2{font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:3px}.chat-person>span{display:flex;align-items:center;gap:5px;font-size:10px;color:#94a0b1}.chat-person bdi{font-size:10px;font-weight:400;letter-spacing:.2px}.whatsapp-dot{width:6px;height:6px;background:#84b79d;border-radius:50%;display:inline-block;flex-shrink:0}.chat-header-actions{display:flex;align-items:center;gap:3px;flex-shrink:0}.chat-header .outline-button{font-size:11px;padding:6px 9px;color:#7a899e;gap:5px}.chat-header .outline-button svg{width:14px;height:14px}.is-starred{color:#b99a55!important;background:#f9f5e9}.is-starred svg{fill:#d7bd6944}.assignment-strip{display:flex;align-items:center;gap:8px;padding:7px 18px;min-height:38px;border-bottom:1px solid #f0f2f5;background:#fff}.assignment-button{display:flex;align-items:center;gap:6px;font-size:11px;color:#7185a1;padding:3px 0}.assignment-button svg{width:13px;height:13px}.assignment-button svg:last-child{width:10px;height:10px}.assignment-button b{font-size:11px;font-weight:400;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-badge{font-size:10px;padding:2px 7px;color:#8696ae;background:#f2f5f9;border-radius:4px;white-space:nowrap}.state-label{font-size:10px;color:#9ba6b6;margin-right:auto}.message-search-bar{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#f9fafc;border-bottom:1px solid var(--line)}.message-search-bar .search-field{flex:1;margin:0;background:white}.message-search-bar .search-field input{font-size:12px}.message-search-bar>span{font-size:10px;white-space:nowrap;color:#8f9bab}.messages{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:22px;padding:23px 24px;background:#fff;overscroll-behavior:contain;scrollbar-width:thin}.load-older{align-self:center;font-size:11px;border:1px solid #e7ebf1;color:#8798ad;padding:5px 13px;border-radius:5px;background:#fff}.date-divider{align-self:center;font-size:10px;color:#aeb6c3;padding:2px 9px;border-radius:3px;background:#f7f8fa;margin:0 0 1px}.message-line{max-width:85%;align-self:flex-start;display:flex;align-items:flex-end;gap:8px;direction:ltr}.message-line.out{align-self:flex-end;direction:rtl}.message-line>.avatar{width:25px;height:25px;font-size:9px;margin-bottom:21px}.message-group{min-width:0;max-width:100%}.bubble{background:#f2f5fa;border:1px solid #e8edf5;border-radius:9px 9px 9px 2px;padding:11px 14px;font-size:14px;color:#56667f;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;min-width:45px}.out .bubble{background:#eaf2fb;border-color:#e0eaf8;border-radius:9px 9px 2px 9px;color:#59799f}.message-meta{display:flex;align-items:center;gap:5px;margin-top:5px;color:#a2adbd;font-size:9px;direction:rtl;line-height:1.5;flex-wrap:wrap}.message-meta svg{width:12px;height:12px;color:#83a1c3}.message-author{font-size:9px;color:#99a7b9;margin-bottom:4px}.message-meta.failed,.message-error{color:#b26b67;font-size:10px;direction:rtl}.message-error{max-width:260px;margin-top:5px;line-height:1.7}.automation-label{font-size:10px;color:#94a7bd;display:flex;gap:4px;align-items:center;margin-bottom:5px}.automation-label svg{width:11px;height:11px}.attachment-link{display:flex;gap:5px;margin-top:6px;font-size:12px;color:#6588af;text-decoration:underline;text-underline-offset:3px}.attachment-link svg{width:14px;height:14px}.permission-notice{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 18px;background:#f2f5f9;border-top:1px solid #e9edf3;color:#8b9bb2;font-size:11px;line-height:1.8}.permission-notice .outline-button{font-size:11px;padding:5px 10px;flex-shrink:0;color:#7992b2}.composer-area{position:relative;padding:12px 19px 11px;background:#fff;border-top:1px solid #f0f2f6}.composer{border:1px solid #e3e8f0;border-radius:6px;background:#fff;overflow:hidden}.composer:focus-within{border-color:#aabbd2;box-shadow:0 0 0 2px #f2f5fa}.composer-heading{display:flex;justify-content:space-between;align-items:center;padding:10px 13px 0;font-size:11px;color:#92a0b2}.composer-heading b{font-weight:400;display:flex;gap:6px;align-items:center;color:#7487a0}.composer-heading>span{font-size:10px}.composer textarea{border:0;box-shadow:none;padding:9px 13px;min-height:84px;max-height:180px;background:transparent;resize:none;display:block;font-size:14px;color:#5e6f88}.composer textarea:disabled{background:#fcfdfe}.composer textarea::placeholder{color:#a2adbd}.composer-actions{display:flex;align-items:center;gap:10px;padding:7px 11px 10px}.composer-actions .text-button{font-size:11px;color:#8698b0}.composer-actions .text-button svg{width:14px;height:14px}.composer-actions>span{font-size:9px;color:#b1b9c6;margin-right:auto}.composer-actions .primary-button{background:#7397c3;border-color:#7397c3;font-size:11px;padding:6px 12px;min-width:76px}.composer-actions .primary-button:hover:not(:disabled){background:#6286b3}.composer-hint{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;color:#a0abba;margin-top:7px}.composer-hint span:last-child{direction:ltr;white-space:nowrap}.composer-hint .expired{color:#bb986c}.quick-menu{position:absolute;right:19px;left:19px;bottom:69px;max-height:280px;overflow:auto;background:white;border:1px solid #dfe6ed;border-radius:6px;box-shadow:0 -10px 40px #25426617;padding:6px;z-index:6}.quick-menu-heading{display:flex;gap:8px;justify-content:space-between;padding:8px 9px 12px;border-bottom:1px solid var(--line);font-size:12px;color:#7287a2}.quick-menu-heading small{font-size:10px}.quick-option{display:flex;align-items:center;gap:10px;width:100%;text-align:right;padding:10px;border-radius:4px;font-size:12px;color:#7e90a9;line-height:1.8}.quick-option .quick-label{flex:1}.quick-option svg{width:14px;height:14px}.quick-option.active,.quick-option:hover{background:#edf2f8;color:#4d6e94}
.customer-details{width:var(--details);flex:0 0 var(--details);background:#fafbfd;border-left:1px solid var(--line);overflow:auto;min-height:0;scrollbar-width:thin}.customer-details>header{padding:17px 15px 10px;display:flex;justify-content:space-between;align-items:center}.customer-details>header h3{font-size:12px;color:#7d8da4}.customer-details>header .icon-button{width:25px;height:25px}.customer-details>header .icon-button svg{width:14px;height:14px}.customer-identity{display:flex;align-items:center;gap:9px;padding:8px 15px 20px}.customer-identity .big{width:43px;height:43px;font-size:16px;border:4px solid #fff;box-sizing:content-box}.customer-identity>div{min-width:0;flex:1}.customer-identity h3{font-size:13px;color:#61748d;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.customer-identity bdi{font-size:10px;color:#99a6b8}.customer-identity .icon-button{width:23px;height:23px}.customer-identity .icon-button svg{width:13px;height:13px}.workflow-card{margin:0 15px 17px;padding:13px;background:#fff;border:1px solid #e8ecf2;border-radius:6px}.section-label{display:flex;align-items:center;gap:6px;font-size:11px;color:#7f91aa;margin-bottom:12px}.section-label svg{width:14px;height:14px}.workflow-card>label{font-size:10px;color:#98a6b9;margin-bottom:6px}.workflow-card select{width:100%;font-size:11px;color:#778da9;border-color:#e3e8f0;padding:7px;background:#fbfcfe}.workflow-card p{font-size:10px;color:#a3afbf;margin-top:8px;line-height:1.9}.handoff-button{display:flex;gap:6px;align-items:center;justify-content:center;width:100%;font-size:11px;border:1px solid #dfe8f2;background:#f3f7fc;color:#7391b6;padding:8px;margin-top:10px;border-radius:4px}.handoff-button svg{width:15px;height:15px}.details-tabs{display:flex;padding:0 12px;border-bottom:1px solid #e9edf4;gap:4px}.details-tabs button{flex:1;font-size:11px;color:#9aa8bd;padding:9px 2px;border-bottom:2px solid transparent;white-space:nowrap}.details-tabs button.active{color:#6c89ae;border-bottom-color:#809bbc}.details-tabs b{font-size:9px;font-weight:400}.detail-tab-content{min-height:0}.details-block{margin:0 16px;padding:19px 0;border-bottom:1px solid #e9edf3}.details-block h4{display:flex;align-items:center;gap:7px;font-size:11px;color:#8b9bb2;margin-bottom:14px}.details-block h4 svg{width:14px;height:14px}.customer-tags{display:flex;flex-wrap:wrap;gap:5px}.tag-chip{display:inline-flex;gap:4px;align-items:center;font-size:10px;color:#8b94b0;background:#efeff8;border:1px solid #e6e7f0;padding:2px 6px;border-radius:3px;max-width:100%;overflow-wrap:anywhere}.tag-chip button{display:flex;align-items:center;padding:0;color:#a2a8bc}.tag-chip svg{width:10px;height:10px}.no-tags{font-size:10px;color:#b0b9c7}.tag-form{display:flex;gap:5px;margin-top:10px}.tag-form input{min-width:0;width:100%;font-size:11px;padding:7px 8px;border-color:#e4eaf2;background:#fff}.tag-form button{border:1px solid #e4eaf2;background:#fff;width:29px;height:30px;color:#96a8bf}.tag-form button svg{width:14px;height:14px}.details-block dl{margin:0;display:grid;grid-template-columns:1fr;gap:5px}.details-block dt{font-size:10px;color:#a3afc0;margin-top:8px}.details-block dd{margin:0;color:#7e92ad;font-size:11px;overflow-wrap:anywhere;line-height:1.7}.details-block p{font-size:11px;line-height:1.8;white-space:pre-wrap;color:#8c9db4}.note-form{padding:16px;border-bottom:1px solid #e8edf4}.note-form label{font-size:11px;color:#8c9eb7;margin-bottom:8px}.note-form textarea{font-size:12px;border-color:#e1e8f1;background:#fff;min-height:85px}.note-form small{font-size:10px;display:block;margin:5px 0 10px;color:#a8b5c7}.note-form .outline-button{font-size:11px;padding:6px;color:#8499b6;border-color:#dfe8f3}.note-entry{margin:13px 15px;background:#fffcf5;border:1px solid #f1eade;border-radius:5px;padding:11px}.note-entry>header{display:flex;gap:6px;justify-content:space-between;align-items:center}.note-entry b{font-size:10px;color:#9a927f}.note-entry time{font-size:9px;color:#b8b0a1}.note-entry p{font-size:12px;color:#938a78;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85;margin-top:6px}.activity-list{padding:18px 16px}.activity-entry{position:relative;padding:0 19px 22px 0;border-right:1px solid #e4eaf2;margin-right:4px}.activity-entry:before{content:'';position:absolute;right:-4px;top:4px;width:7px;height:7px;border-radius:50%;background:#bac8d9;box-shadow:0 0 0 3px #fafbfd}.activity-entry p{font-size:11px;color:#8c9fb9;line-height:1.8;overflow-wrap:anywhere;white-space:pre-wrap}.activity-entry small{font-size:9px;color:#aebacd;display:block;margin-top:5px}.panel-backdrop{display:none}.mobile-only,.mobile-filter{display:none}
.page-view{flex:1;min-height:0;overflow:auto;background:#fafbfc;padding:35px 38px;direction:rtl}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:27px}.page-heading h1{font-size:26px;line-height:1.5;color:#3c4e68}.page-heading p{font-size:13px;color:#8999af;margin-top:6px;line-height:1.8}.page-heading .eyebrow{margin-bottom:3px}.wide{max-width:380px;margin:0 0 20px;background:white}.wide input{font-size:13px;padding:11px 0}.table-wrap{border:1px solid #e5eaf1;border-radius:7px;overflow:auto;background:white}table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:right;font-size:12px}th{font-size:11px;font-weight:500;color:#91a0b7;background:#f8fafc;padding:14px 20px}td{border-top:1px solid #eef1f6;padding:15px 20px;color:#778da9;font-size:12px}.contact-cell{display:flex;gap:10px;align-items:center}.contact-cell b{font-size:12px;color:#5e7695}.contact-cell small{font-size:10px;display:block;color:#a1aec1;margin-top:4px}.contact-cell .avatar{width:30px;height:30px;font-size:10px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:23px}.settings-card{padding:24px;background:white;border:1px solid #e4eaf1;border-radius:7px;min-width:0}.settings-card h2{font-size:17px;color:#5d7494;margin-bottom:14px}.settings-card p{font-size:12px;color:#8d9db4;line-height:1.9;margin:6px 0 18px}.settings-card label{font-size:12px;color:#7d91ad;margin:16px 0 7px}.settings-card input,.settings-card select,.settings-card textarea{display:block;width:100%;margin-top:8px;font-size:13px;border-color:#dfe7f1}.settings-card small{font-size:11px;color:#9babbe}.card-heading{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:8px}.card-heading h2{margin:0}.settings-card form>.primary-button{margin-top:16px}.team-stats{display:flex;gap:15px;margin-bottom:24px}.team-stat{flex:1;padding:16px 22px;background:white;border:1px solid #e6ebf2;border-radius:6px;display:flex;gap:15px;align-items:center}.team-stat b{font-size:25px;color:#6e8bad;font-weight:500}.team-stat span{font-size:12px;color:#8d9fb7}.team-chip{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid #edf1f6;font-size:13px;color:#879bb7}.team-chip:last-child{border:0}.team-chip small{font-size:11px}.switch{display:inline-block;position:relative;width:35px;height:19px;flex-shrink:0;margin:0!important}.switch input{position:absolute;opacity:0;width:1px;margin:0}.switch>span{position:absolute;inset:0;background:#d9e1e9;border-radius:20px;cursor:pointer}.switch>span:after{content:'';width:13px;height:13px;position:absolute;top:3px;left:3px;background:white;border-radius:50%;transition:transform .15s}.switch input:checked+span{background:#8cafa1}.switch input:checked+span:after{transform:translateX(16px)}.switch input:focus-visible+span{outline:2px solid #8bafe0;outline-offset:3px}.message-preview{background:#f0f5f7;border:1px solid #e5edf3;padding:17px;border-radius:8px;margin-top:20px;font-size:13px;color:#7a95aa;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;min-height:85px}.info-note{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.9;background:#eef3f8;color:#829bb6;padding:16px 20px;border-radius:6px;margin-top:25px}.info-note svg{width:17px;height:17px;margin-top:2px;flex-shrink:0}.replies-card{max-width:850px}.reply-editor-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:13px}.reply-editor-row textarea{margin:0}.reply-number{font-size:11px;color:#a7b3c6;padding-top:14px}.reply-editor-row .icon-button{margin-top:9px}.field-hint{font-size:11px;color:#95a6bd;line-height:1.9;margin-top:14px}.connection-checklist{margin:15px 0 20px}.connection-checklist>div{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #edf1f6;font-size:12px;color:#7e94b1}.connection-checklist span{font-size:11px;color:#baad8b}.connection-checklist .ready{color:#8aa798}.code-box{font:12px/1.8 monospace;background:#f5f8fc;padding:12px;border:1px solid #e5ebf3;border-radius:5px;color:#8199b8;overflow-wrap:anywhere}
dialog{max-width:460px;width:calc(100% - 32px);border:1px solid #dbe4ed;padding:24px;border-radius:9px;box-shadow:0 20px 85px #182d4433;color:#627a98;max-height:90dvh;overflow:auto}dialog::backdrop{background:#1a2c4540;backdrop-filter:blur(2px)}.dialog-heading{display:flex;gap:15px;align-items:center;justify-content:space-between}.dialog-heading h2{font-size:20px;color:#536c8a}.dialog-heading .icon-button{width:26px;height:26px}dialog p{font-size:12px;color:#8d9fb5;line-height:1.9;margin:10px 0 17px}dialog label{font-size:12px;color:#788faa;margin:14px 0}dialog input,dialog select,dialog textarea{display:block;width:100%;margin-top:7px;font-size:13px;border-color:#dce6f0}dialog input[type=checkbox]{display:inline-block;width:auto;margin:0;accent-color:#769591}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}.checkbox-label{display:flex;gap:7px;align-items:center}.form-error{background:#fff3f1;color:#b4615b!important;border:1px solid #f1dbd5;border-radius:5px;padding:10px 12px;font-size:12px}.assignment-search{margin:14px 0 8px;width:100%}.assignment-options{max-height:260px;overflow:auto;border:1px solid #e4ebf2;border-radius:5px;padding:6px}.assignment-group-label{padding:10px 8px 5px;font-size:10px;color:#a2b0c3}.assignment-option{display:flex;gap:10px;align-items:center;width:100%;text-align:right;padding:9px;border-radius:4px;color:#6d85a3}.assignment-option:hover,.assignment-option.active{background:#edf3f8}.assignment-option .avatar{width:29px;height:29px;font-size:10px}.assignment-option>div{min-width:0;flex:1}.assignment-option b{font-size:12px;display:block}.assignment-option small{font-size:10px;display:block;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:right}.assignment-option .check-icon{color:#72a393}.dialog-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 13px}.dialog-form-grid label.full-row{grid-column:1/-1}.toast{position:fixed;bottom:22px;left:25px;z-index:150;background:#374d65;border:1px solid #536f89;color:white;border-radius:6px;padding:12px 18px;font-size:12px;max-width:calc(100% - 40px);box-shadow:0 7px 25px #24384a26;direction:rtl;line-height:1.8}.toast.error{background:#975d56;border-color:#b37b73}
.auth-screen{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr;direction:ltr}.auth-intro{background:#eff4f3;padding:50px 60px;display:flex;flex-direction:column;justify-content:space-between;direction:rtl;border-right:1px solid #e5eeea}.auth-brand{display:flex;gap:13px;align-items:center}.auth-brand img{width:45px;height:45px}.auth-brand b{font-size:31px;color:#3f645c}.auth-brand b span{display:block;letter-spacing:4px;font-size:10px;font-weight:400;line-height:1.3;margin-top:1px}.auth-intro h1{font-size:46px;line-height:1.55;color:#45675f;font-weight:500;letter-spacing:-1px;margin:15px 0 20px}.auth-intro>div>p{font-size:16px;color:#839b92;line-height:2}.auth-intro>.auth-brand+div{margin:70px 0}.auth-intro .eyebrow{color:#94a9a0}.auth-intro>small{font-size:11px;color:#a1b2a9}.auth-steps{display:flex;gap:12px;align-items:center;font-size:11px;color:#89a296;margin-top:40px;flex-wrap:wrap}.auth-steps span{padding:8px 11px;border:1px solid #d7e4dc;border-radius:5px;background:#f5f9f7}.auth-steps i{font-style:normal;color:#b3c7bc}.auth-side{display:flex;align-items:center;justify-content:center;padding:45px 35px;direction:rtl;background:white}.auth-card{width:365px;max-width:100%}.auth-card h2{font-size:26px;color:#3e566e;font-weight:500}.auth-card>p{font-size:13px;color:#8b9caf;margin:10px 0 25px;line-height:1.9}.auth-tabs{display:flex;background:#f4f6f9;border:1px solid #edf0f4;padding:4px;border-radius:6px;margin-bottom:22px}.auth-tabs button{flex:1;padding:8px;font-size:12px;color:#97a3b3;border-radius:4px}.auth-tabs button.active{background:white;color:#637b92;box-shadow:0 1px 4px #24374b0d}.auth-card label{font-size:12px;color:#7b8ea4;margin-bottom:16px}.auth-card label>small{font-size:9px;font-weight:400}.auth-card input{display:block;width:100%;margin-top:8px;padding:10px 12px;font-size:13px;border-color:#dfe7ed;border-radius:5px}.auth-card .primary-button{margin-top:6px;padding:11px}.demo-accounts{margin-top:27px}.divider-label{display:flex;align-items:center;gap:9px;font-size:10px;color:#a5afbf;margin-bottom:13px;white-space:nowrap}.divider-label:before,.divider-label:after{content:'';height:1px;flex:1;background:#e8edf3}.demo-accounts>small{display:block;font-size:10px;line-height:1.9;margin-top:11px;color:#a0acbd}.demo-account{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid #e7ecf1;border-radius:5px;text-align:right;margin-bottom:7px}.demo-account:hover{background:#f5f8fa}.demo-account .avatar{width:30px;height:30px;font-size:10px}.demo-account>span:last-child{flex:1;min-width:0}.demo-account b{font-size:12px;display:block;color:#70879e}.demo-account small{font-size:10px;display:block;margin-top:2px;color:#9cabbc}
@media(min-width:1600px){:root{--sidebar:190px;--list:295px;--details:280px}.messages{padding-inline:35px}.inbox-filter,.tag-filter{font-size:13px}.row-top b{font-size:13px}.row-bottom p{font-size:12px}.conversation-row{padding-block:17px}.chat-header{padding-inline:25px}.composer-area{padding-inline:25px}.details-block{margin-inline:20px}.customer-details>header,.customer-identity{padding-inline:20px}}
@media(max-width:1190px){:root{--sidebar:160px;--list:250px}.customer-details{position:absolute;right:0;top:0;bottom:0;width:275px;z-index:12;box-shadow:-12px 0 35px #263b5c14;background:#fafbfd}.inbox-layout.details-open #detail-backdrop{display:block;position:absolute;inset:0;background:#263b5c1c;width:100%;z-index:11}.chat-header{padding-inline:14px}.page-view{padding:28px}}
@media(max-width:940px){.inbox-sidebar{position:absolute;left:0;top:0;bottom:0;width:210px;z-index:15;transform:translateX(-100%);visibility:hidden;transition:transform .15s,visibility .15s}.inbox-layout.filters-open .inbox-sidebar{visibility:visible;transform:none}.inbox-layout.filters-open #filter-backdrop{display:block;position:absolute;inset:0;background:#263b5c20;width:100%;z-index:14}.mobile-filter{display:inline-flex}.sidebar-heading>.subtle-icon{display:none}.settings-grid{grid-template-columns:1fr}.page-view{padding:25px}.team-stat{padding:13px;gap:10px}.team-stat b{font-size:21px}.team-stat span{font-size:11px}.auth-intro{padding:40px}.auth-intro h1{font-size:36px}}
@media(max-width:720px){:root{--rail:46px;--list:100%}.navigation{padding:13px 3px 9px}.nav-item{width:38px;height:38px}.brand img{width:29px;height:29px}.topbar{height:44px;flex-basis:44px;padding-inline:10px;gap:8px}.workspace-switch{max-width:180px;font-size:11px}.workspace-switch b{max-width:140px}.topbar-path{display:none}.topbar-end #user-label{display:none}.topbar-end .pill{font-size:9px;padding:2px 5px}.workspace-menu{left:0;width:min(280px,calc(100vw - 68px))}.conversation-list-panel{width:100%;flex:1;border-right:0}.list-heading{padding:18px 15px 13px}.list-heading h2{font-size:17px}.search-field input{font-size:13px;padding:10px 0}.list-controls select{font-size:12px;padding:7px 8px}.list-tools{font-size:11px;padding-top:3px;padding-bottom:12px}.small-check{font-size:12px}.conversation-row{min-height:100px;padding:17px 14px;gap:11px}.conversation-row .avatar{width:37px;height:37px;font-size:12px}.row-top b{font-size:14px}.row-top time{font-size:10px}.row-bottom p{font-size:12px}.row-labels{font-size:10px}.row-labels .row-owner{max-width:125px}.row-tag{max-width:85px}.list-footer{font-size:11px}.chat-panel{display:none}.inbox-layout.show-chat .conversation-list-panel{display:none}.inbox-layout.show-chat .chat-panel{display:block;width:100%}.mobile-only{display:inline-flex}.chat-header{padding:10px 11px;gap:7px;flex-wrap:wrap}.chat-person{min-width:90px}.chat-person h2{font-size:14px}.chat-header .avatar{width:31px;height:31px;font-size:11px}.chat-header .icon-button{width:26px;height:27px}.chat-header .outline-button{font-size:10px;padding:5px 8px}.chat-header-actions{width:100%;border-top:1px solid #f1f3f6;padding-top:6px;gap:6px}.chat-header-actions #close-conversation{margin-right:auto}.assignment-strip{padding:7px 12px;gap:6px}.assignment-button b{max-width:120px}.stage-badge{font-size:9px;padding:2px 6px}.state-label{font-size:9px}.messages{padding:20px 13px;gap:18px}.message-line{max-width:94%}.message-line>.avatar{display:none}.bubble{font-size:14px;padding:10px 12px}.message-meta{font-size:10px}.composer-area{padding:10px 11px}.composer textarea{font-size:14px;min-height:78px}.composer-hint{font-size:8px;gap:5px}.composer-actions{gap:7px}.composer-actions>span{font-size:8px}.composer-actions .primary-button{font-size:11px;padding:6px 10px;min-width:65px}.composer-actions .text-button{font-size:10px}.permission-notice{padding:8px 12px;font-size:10px;gap:6px}.permission-notice .outline-button{font-size:10px;padding:5px 7px}.message-search-bar{padding:8px 11px}.message-search-bar input{font-size:11px!important}.message-search-bar>span{font-size:9px}.customer-details{width:min(285px,94%)}.quick-menu{right:11px;left:11px;bottom:64px}.quick-menu-heading{display:block}.quick-menu-heading small{display:block;margin-top:4px}.page-view{padding:22px 17px}.page-heading{align-items:flex-start;flex-direction:column;gap:15px}.page-heading h1{font-size:23px}.page-heading p{font-size:12px}.page-heading .primary-button{font-size:12px}.settings-card{padding:19px}.team-stats{gap:8px}.team-stat{display:block;padding:10px;text-align:center}.team-stat b{display:block;font-size:23px}.team-stat span{font-size:10px}.settings-card h2{font-size:16px}.card-heading{flex-wrap:wrap}.table-wrap th,.table-wrap td{padding:14px}.toast{left:58px;bottom:16px;max-width:calc(100% - 73px);font-size:12px}.auth-screen{display:block}.auth-intro{display:none}.auth-side{min-height:100dvh;padding:40px 25px}.auth-card h2:before{content:'وصل';display:block;font-size:20px;color:#588674;margin-bottom:25px}.dialog-form-grid{grid-template-columns:1fr}.dialog-form-grid label.full-row{grid-column:auto}}
.transfer-button{color:#6788ae!important;background:#f5f8fc!important;border-color:#dce7f4!important}.contact-filters{display:flex;gap:10px;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap}.contact-filters .search-field{margin:0;flex:1;min-width:210px;max-width:360px}.contact-filters>select{font-size:12px;padding:10px 12px;border-color:#e1e8f1;color:#8196b1}.table-subline{display:block;font-size:10px;color:#a2b1c4;margin-top:4px}.workflow-card{padding:11px}.workflow-card .section-label{margin-bottom:9px}.customer-details .workflow-card>label{display:none}
.switching-account{pointer-events:none;opacity:.68;cursor:progress}.row-bottom p{color:#738198}.inbox-filter,.tag-filter{color:#6f7e94}.details-block h4,.details-tabs button,.workflow-card select{color:#73869f}.details-block dd{color:#667e9c}.details-block dt{color:#8999ae}.bubble{color:#4e6079}.out .bubble{color:#55769b}.note-entry p{color:#827861}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.mobile-nav,.mobile-more-menu,.mobile-more-backdrop{display:none}
.meta-activation-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:22px}.meta-activation-grid>form{min-width:0;padding:20px;border:1px solid #e6edf1;border-radius:7px;background:#fcfdfd}.meta-activation-grid h3{font-size:15px;color:#607b8f;margin-bottom:10px}.meta-activation-grid .activation-target{font:11px/1.8 monospace;color:#8a9caa;padding:8px 11px;border:1px solid #e6edf1;background:white;border-radius:4px;overflow-wrap:anywhere;direction:ltr;text-align:left}.meta-activation-grid label small{display:block;margin-top:7px;font-size:11px;line-height:1.8}.meta-activation-grid .primary-button{white-space:normal;width:100%;min-height:39px}.meta-activation-grid #meta-register-pin{letter-spacing:5px;max-width:230px}.meta-activation-grid>form>p{margin-bottom:14px}
@media(max-width:720px){.meta-activation-grid{grid-template-columns:1fr;gap:16px}.meta-activation-grid>form{padding:17px}.meta-activation-grid h3{font-size:16px}.meta-activation-grid .primary-button{min-height:48px}.meta-activation-grid label small{font-size:12px}}
.channel-setup-card{margin-top:24px;max-width:1050px}.channel-fields{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}.channel-fields .channel-wide{grid-column:1/-1}.channel-fields small{display:block;margin-top:7px;font-size:11px;line-height:1.8}.channel-setup-card .card-heading{margin-bottom:12px}.channel-setup-card .card-heading .pill{font-size:10px}.channel-save-hint{display:block;margin-top:12px}.channel-setup-result{color:#55836b!important;background:#eff7f1;border:1px solid #dfede2;padding:11px 14px;border-radius:5px}.settings-card #copy-webhook{margin-top:9px;font-size:12px;min-height:34px}.settings-card #copy-webhook svg{width:14px;height:14px}
@media(max-width:720px){.channel-fields{grid-template-columns:1fr}.channel-fields .channel-wide{grid-column:auto}.channel-setup-card .card-heading{align-items:flex-start;flex-direction:column;gap:8px}.channel-setup-card #save-channel{width:100%;min-height:48px}.channel-fields label{margin-top:18px}.channel-fields small{font-size:12px}}
/* On phones, keep replying as direct as a familiar messaging app. */
@media(max-width:720px){
 :root{--rail:0px}.app-shell{flex-direction:column;height:100dvh;min-height:0;direction:rtl;background:#fff}.navigation{display:none}.main-shell{width:100%;min-height:0;flex:1}.topbar{height:55px;flex-basis:55px;padding:0 17px;direction:rtl;border-color:#edf0ee;gap:10px}.workspace-switch{font-size:14px;max-width:245px;gap:8px}.workspace-switch b{max-width:185px}.workspace-icon{width:29px;height:29px;color:#4d8271;background:#edf5ef}.topbar-end{margin-left:0;margin-right:auto}.topbar-end .pill{font-size:10px;padding:4px 7px}.topbar-end .online-dot{display:none}.workspace-menu{left:auto;right:0;top:41px;width:min(310px,calc(100vw - 30px));max-height:calc(100dvh - 115px);font-size:14px}.tenant-option,.demo-switch-option,.menu-action{min-height:44px;font-size:14px}.menu-label{font-size:11px}.menu-user b{font-size:16px}.menu-user span{font-size:13px}.workspace-menu .avatar{width:35px;height:35px}.inbox-layout{flex:1;min-height:0}.list-heading{padding:14px 16px 8px;min-height:56px;gap:9px}.list-heading h2{font-size:24px;font-weight:650;color:#254d40}.list-heading .icon-button{width:40px;height:40px;color:#567768}.list-heading .icon-button svg{width:21px;height:21px}.conversation-list-panel>.search-field{background:#f1f5f3;border:0;border-radius:12px;margin:4px 15px 11px;padding:0 13px}.conversation-list-panel>.search-field input{font-size:16px;padding:12px 0;color:#425c51}.conversation-list-panel>.search-field svg{width:19px;height:19px;color:#8b9f94}.list-controls{padding:0 16px 8px;gap:8px}.list-controls select{border-radius:16px;background:#eff4f1;color:#6f8278;font-size:12px;padding:7px 10px}.list-controls select:first-child{flex:none;min-width:110px;background:#e4f1e8;color:#49785f}.list-tools{border-bottom:1px solid #f0f3f1;padding:1px 19px 10px;font-size:11px;color:#90a298}.small-check{font-size:12px;color:#728b7c}.small-check input{width:14px;height:14px;accent-color:#3d9369}.conversation-list{padding:0;flex:1}.conversation-row{min-height:86px;padding:15px 16px;gap:12px;border-bottom:1px solid #f3f5f4;align-items:center}.conversation-row .avatar{width:45px;height:45px;font-size:15px;margin:0}.row-top{margin-bottom:5px}.row-top b{font-size:16px;font-weight:600;color:#304c40}.row-top time{font-size:11px;color:#8b9b92}.row-bottom p{font-size:13px;color:#7a8e81}.row-labels{font-size:10px;margin-top:5px;min-height:12px;color:#92a195}.row-labels .row-owner{max-width:140px}.row-tag{background:#edf3ef;color:#8a9f8f;font-size:10px}.conversation-row.selected{background:#f0f6f2}.conversation-row.selected:before{background:#69a482}.conversation-row:hover{background:#f4f8f5}.unread-count{background:#67a07b;font-size:10px;line-height:18px;min-width:18px}.list-footer{min-height:31px;font-size:10px;color:#9bac9e;background:#fbfdfb;padding-inline:19px}.list-footer .icon-button{width:32px;height:30px}.list-footer .icon-button svg{width:18px;height:18px}
 .mobile-nav{display:flex;direction:rtl;align-items:stretch;justify-content:space-around;border-top:1px solid #e8eeea;background:#fff;flex:0 0 auto;padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));z-index:21;min-height:65px}.mobile-nav>button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;font-size:11px;color:#8a9b90;min-width:80px;min-height:48px;border-radius:13px;padding:4px 15px}.mobile-nav>button svg{width:22px;height:22px}.mobile-nav>button.active{background:#e9f4ec;color:#3e825c}.mobile-nav>button.active span:last-child{font-weight:600}.mobile-more-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:40;background:#243f3340}.mobile-more-menu:not([hidden]){display:block;position:fixed;right:0;left:0;bottom:0;z-index:41;background:#fff;border-radius:21px 21px 0 0;padding:17px 20px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:0 -15px 50px #1f3f3026}.mobile-menu-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;font-size:17px;color:#355b48}.mobile-menu-heading .icon-button{width:40px;height:40px}.mobile-more-menu>button{display:flex;align-items:center;gap:14px;width:100%;text-align:right;font-size:15px;padding:14px 9px;color:#637e6b;border-radius:8px;min-height:49px}.mobile-more-menu>button:hover{background:#eff6f1}.mobile-more-menu>button svg{width:21px;height:21px}.mobile-chat .topbar,.mobile-chat .mobile-nav{display:none}.mobile-chat .inbox-layout{height:100%}.mobile-chat .chat-panel{height:100%}.chat-content{background:#f3f6f1;min-height:0}
 .chat-header{background:#fff;position:relative;z-index:8;flex-wrap:nowrap;gap:9px;padding:8px 10px;min-height:65px;border-bottom:1px solid #e9eeea}.chat-header .avatar{width:40px;height:40px;font-size:14px}.chat-person{min-width:0;flex:1}.chat-person h2{font-size:16px;color:#365346;margin-bottom:5px}.chat-person>span{font-size:11px;color:#8ea092;gap:6px}.chat-person bdi{font-size:11px}.chat-header .icon-button{height:43px;width:35px;color:#63806c}.chat-header .icon-button svg{width:23px;height:23px}.chat-header #back-to-list{width:27px;margin:0}.chat-header #back-to-list svg{width:24px;height:24px}.chat-header #chat-more{width:40px}.chat-header-actions{display:none;position:absolute;left:11px;top:59px;width:210px;padding:7px;border:1px solid #e0e9e2;box-shadow:0 10px 35px #224b3224;border-radius:10px;background:#fff;z-index:30;gap:0}.chat-header-actions.actions-open{display:flex;flex-direction:column;align-items:stretch}.chat-header-actions .icon-button,.chat-header-actions .outline-button{width:100%;min-height:46px;height:auto;justify-content:flex-start;gap:11px;border:0;border-radius:6px;background:#fff!important;color:#567761!important;font-size:14px;padding:10px 12px;margin:0!important}.chat-header-actions .icon-button:after{content:attr(data-mobile-label);font-size:14px;color:inherit}.chat-header-actions .icon-button:hover,.chat-header-actions .outline-button:hover{background:#eff6f1!important}.chat-header-actions svg{width:19px!important;height:19px!important}.assignment-strip{padding:6px 16px;min-height:36px;background:#fff;border-color:#edf1ed;gap:7px}.assignment-button{font-size:11px;color:#7b9282}.assignment-button b{font-size:11px;max-width:155px}.assignment-button svg{color:#90a797}.stage-badge{font-size:10px;color:#809781;background:#edf4ed;padding:3px 8px}.state-label{font-size:10px;color:#a0b19f}.messages{background:#f3f6f1;min-height:0;padding:20px 15px 16px;gap:17px;overscroll-behavior:contain;scroll-behavior:auto}.date-divider{background:#e9efea;border:1px solid #e1e8e0;color:#91a28f;font-size:10px;border-radius:6px;padding:3px 9px}.message-line{max-width:88%}.bubble{background:#fff;border:1px solid #e6ece3;color:#566e58;border-radius:12px 12px 12px 3px;font-size:16px;padding:9px 13px;line-height:1.7;box-shadow:0 1px 1px #335c2804}.out .bubble{background:#e0f0db;border:1px solid #d6e9d0;color:#53734c;border-radius:12px 12px 3px 12px}.message-meta{font-size:10px;color:#9ba993;gap:5px;margin-top:4px}.message-meta svg{color:#77a28d}.message-author{font-size:10px;color:#8ba180}.automation-label{color:#8ca783;font-size:10px}.load-older{background:#fbfdfa;border-color:#e1eadd;color:#91a087;font-size:12px;min-height:37px}.permission-notice{background:#edf3e9;border-color:#e0e9db;color:#7b9672;padding:10px 14px;font-size:12px;line-height:1.7}.permission-notice .outline-button{min-height:42px;font-size:12px;border-color:#d7e3d0;color:#79976d;background:#fafff7;padding:8px 12px}
 .composer-area{background:#f3f6f1;border-top:0;flex-shrink:0;padding:7px 10px calc(6px + env(safe-area-inset-bottom,0px));position:relative}.composer{display:flex;align-items:flex-end;gap:7px;background:transparent;border:0;border-radius:0;overflow:visible;position:relative;box-shadow:none!important}.composer-heading{display:none}.composer textarea{flex:1;min-width:0;min-height:48px;max-height:120px;resize:none;border:1px solid #e0e8dc;background:#fff;border-radius:24px;font-size:16px;color:#54704f;line-height:1.5;padding:12px 15px 12px 47px;box-shadow:0 1px 3px #314e2606!important}.composer textarea::placeholder{color:#a5b49d;font-size:15px}.composer textarea:disabled{background:#f8faf6}.composer-actions{display:contents}.composer-actions>span{display:none}.composer-actions .primary-button{width:48px;height:48px;min-width:48px;min-height:48px;border-radius:50%;background:#538c62;border-color:#538c62;color:white;padding:0;display:flex;align-items:center;justify-content:center;margin:0}.composer-actions .primary-button:hover:not(:disabled){background:#427b51}.composer-actions .primary-button>span:first-child{display:none}.composer-actions .primary-button svg{width:22px;height:22px;transform:rotate(-5deg)}.composer-actions .primary-button:disabled{opacity:.45}.composer-actions .text-button{position:absolute;left:65px;bottom:6px;width:35px;height:36px;border-radius:50%;font-size:0;justify-content:center;color:#9ab38d;padding:0;z-index:2}.composer-actions .text-button:hover{background:#f0f6ea}.composer-actions .text-button svg{width:20px;height:20px}.composer-hint{font-size:9px;color:#a3b299;padding:0 11px;margin-top:5px;min-height:12px}.composer-hint>span:last-child{display:none}.quick-menu{bottom:calc(79px + env(safe-area-inset-bottom,0px));right:11px;left:11px;border-radius:12px;border-color:#dce7d7;background:#fff;max-height:40dvh}.quick-menu-heading{color:#66845b;font-size:14px}.quick-menu-heading small{display:none}.quick-option{font-size:15px;min-height:50px;color:#7c9670;border-radius:8px}.quick-option.active,.quick-option:hover{background:#edf5e7;color:#5d804e}.message-search-bar{padding:9px 12px;background:#f4f8f0;border-color:#e2eadd}.message-search-bar .search-field{background:#fff;border-radius:12px;border-color:#dce8d6}.message-search-bar .search-field input{font-size:16px!important;padding:10px 0}.message-search-bar .icon-button{width:39px;height:42px}.message-search-bar>span{font-size:10px;color:#94aa86}
 .customer-details{position:fixed;right:0;left:0;bottom:0;top:auto;width:100%;max-width:none;max-height:88dvh;z-index:35;border:0;border-top:1px solid #e1e9df;border-radius:20px 20px 0 0;box-shadow:0 -14px 50px #31462b2b;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));background:#fff}.inbox-layout.details-open #detail-backdrop{position:fixed;inset:0;z-index:34;background:#253e293b}.customer-details>header{padding:16px 20px 4px}.customer-details>header h3{font-size:16px;color:#68825f}.customer-details>header .icon-button{width:43px;height:43px}.customer-details>header .icon-button svg{width:21px;height:21px}.customer-identity{padding:7px 22px 20px;gap:12px}.customer-identity h3{font-size:17px;color:#69855f}.customer-identity bdi{font-size:13px}.customer-identity .icon-button{width:42px;height:42px}.customer-identity .icon-button svg{width:20px;height:20px}.workflow-card{margin-inline:21px;padding:13px}.workflow-card select{font-size:16px;min-height:44px}.section-label{font-size:13px}.details-tabs{padding-inline:20px}.details-tabs button{font-size:14px;min-height:48px}.details-block{margin-inline:24px;padding-block:19px}.details-block h4{font-size:14px}.details-block dt{font-size:12px}.details-block dd{font-size:14px}.tag-form input{font-size:16px;padding:10px 12px}.tag-form button{height:44px;width:44px}.tag-chip{font-size:12px;padding:4px 8px}.tag-chip button{min-width:26px;min-height:26px}.tag-chip svg{width:13px;height:13px}.note-form{padding:20px}.note-form label{font-size:13px}.note-form textarea{font-size:16px}.note-form small{font-size:11px}.note-form .outline-button{min-height:44px;font-size:14px}.note-entry{margin-inline:20px;padding:15px}.note-entry b{font-size:12px}.note-entry time{font-size:10px}.note-entry p{font-size:15px}.activity-list{padding:22px}.activity-entry p{font-size:14px}.activity-entry small{font-size:11px}
 dialog{margin:auto 0 0;max-width:none;width:100%;border:0;border-radius:20px 20px 0 0;max-height:90dvh;padding:23px 22px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:0 -14px 60px #31482c33}.dialog-heading h2{font-size:21px}.dialog-heading .icon-button{width:42px;height:42px}.dialog-heading .icon-button svg{width:21px;height:21px}dialog p{font-size:13px}dialog label{font-size:14px}dialog input,dialog select,dialog textarea{font-size:16px;border-radius:8px;padding:11px 12px}dialog .dialog-actions{gap:10px;margin-top:22px}dialog .dialog-actions button{flex:1;min-height:48px;font-size:15px;border-radius:9px}.assignment-options{max-height:32dvh;border-radius:10px}.assignment-option{min-height:59px;padding:10px;border-radius:7px;gap:12px}.assignment-option .avatar{width:38px;height:38px;font-size:13px}.assignment-option b{font-size:15px}.assignment-option small{font-size:11px}.assignment-group-label{font-size:12px}.assignment-search{margin-top:16px!important;min-height:47px}#demo-form>.primary-button{min-height:47px;font-size:15px}.inbox-sidebar{position:fixed;left:0;top:0;bottom:0;width:265px;z-index:36;padding:23px 15px;background:#f7faf5}.inbox-layout.filters-open #filter-backdrop{position:fixed;z-index:35;background:#263e2b40}.inbox-filter,.tag-filter{min-height:44px;font-size:14px;padding:10px}.inbox-filter b,.tag-filter b{font-size:12px}.sidebar-heading h1{font-size:21px}.sidebar-heading .icon-button{width:40px;height:40px}.sidebar-section-title{font-size:12px}.page-view{padding:25px 18px}.page-view input,.page-view select,.page-view textarea{font-size:16px}.page-view .primary-button,.page-view .outline-button{min-height:44px;font-size:14px}.toast{left:15px;right:15px;bottom:calc(80px + env(safe-area-inset-bottom,0px));max-width:none;font-size:13px;border-radius:9px;background:#496b43;border-color:#6a8865}.mobile-chat~.toast{bottom:100px}.auth-card input{font-size:16px;min-height:47px}.auth-tabs button{min-height:44px}.auth-card .primary-button{min-height:47px}.demo-account{min-height:58px}
}
@media(max-width:720px){
 #action-dialog{padding:0;overflow:hidden;max-height:90dvh}
 #action-form{display:flex;flex-direction:column;min-height:0;max-height:90dvh;overflow:hidden}
 #action-form>.dialog-heading{flex-shrink:0;padding:13px 22px 0}
 #action-form>#dialog-description{flex-shrink:0;margin:3px 0 12px;padding:0 22px}
 #dialog-fields{min-height:0;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;padding:0 22px 9px}
 #dialog-fields .assignment-options{max-height:clamp(100px,24dvh,180px)}
 #dialog-fields #assign-note{height:80px;min-height:72px;max-height:120px}
 #action-form>#dialog-error{flex-shrink:0;margin:0 22px 10px}
 #action-form>.dialog-actions{position:relative;flex:0 0 auto;margin:0;padding:12px 22px calc(15px + env(safe-area-inset-bottom,0px));border-top:1px solid #e7ede4;background:#fff;box-shadow:0 -5px 18px #33512c06}
 #message-input{scrollbar-width:none}
 #message-input::-webkit-scrollbar{display:none}
}

/* Message media keep their elements while delivery receipts update. */
.delivery-status{display:inline-flex;align-items:center;gap:4px;color:#84919b;cursor:help}
.delivery-status svg{width:18px;height:18px;color:inherit!important;flex:none;stroke-width:1.8}
.delivery-status.status-read{color:#168cda}.delivery-status.status-failed,.delivery-status.status-unknown{color:#b95851}
.message-meta .delivery-status>span{font-size:10px}.message-body-text{white-space:pre-wrap;overflow-wrap:anywhere}
.voice-card{display:flex;align-items:center;gap:9px;width:290px;max-width:100%;direction:rtl;white-space:normal}
.voice-symbol{display:flex;align-items:center;justify-content:center;background:#e7eee9;color:#6b8876;border-radius:50%;width:37px;height:37px;flex:none}
.voice-symbol svg{width:20px;height:20px}.voice-content{min-width:0;flex:1}.voice-label{display:block;font-size:11px;color:#829487;margin:0 6px 4px}
.voice-card audio{display:block;width:100%;height:40px;max-width:260px;direction:ltr}.media-error{display:block;font-size:12px;line-height:1.7;color:#aa625a;white-space:normal}
.image-media{display:flex;align-items:center;justify-content:center;position:relative;min-width:130px;min-height:110px;max-width:300px;border-radius:9px;overflow:hidden;text-decoration:none;background:#edf0ed}
.image-media img{display:block;max-width:100%;max-height:320px;object-fit:contain;border-radius:8px}.image-media:not(.media-ready) img{min-height:80px}
.media-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#899588;background:#eef2ec}
.image-media .media-error{padding:18px;text-align:center}.image-media+.message-body-text{padding-top:7px}
.bubble.sticker-bubble,.out .bubble.sticker-bubble{background:transparent!important;border:0!important;box-shadow:none!important;padding:0}
.sticker-media{min-width:100px;min-height:100px;width:160px;max-width:160px;background:transparent}.sticker-media img{width:160px;max-height:170px;object-fit:contain}.sticker-media .media-loading{background:transparent}
.composer-actions .attach-image,.composer-actions .record-audio{width:35px;height:35px;color:#738b7b;flex:none}.composer-actions .record-audio{border:1px solid #e1e8e3;border-radius:50%;background:#f4f8f5}
.composer-area.has-attachment>.composer,.composer-area.has-attachment>.composer-hint{display:none}
.attachment-preview{background:#fff;border:1px solid #dfe8e1;border-radius:13px;padding:13px 15px;max-width:640px;margin:0 auto}
.attachment-preview>header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:11px}.attachment-preview>header b{font-size:14px;color:#435b4c}.attachment-preview>header span{display:block;font-size:11px;color:#839387;margin-top:4px}
.attachment-preview>header .icon-button{min-width:40px;min-height:40px}.attachment-preview>audio{display:block;width:100%;height:44px;direction:ltr;margin:12px 0}
.attachment-preview>footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}.attachment-preview>footer small{color:#819188;font-size:11px;line-height:1.6}.attachment-preview>footer button{flex:none;min-height:44px}
.recording-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;color:#596d5e;font-size:13px}.recording-dot{width:9px;height:9px;border-radius:50%;background:#d96363;animation:record-pulse 1s infinite}.recording-status time{font:14px monospace;color:#6d7f70;margin-inline-start:auto}.recording-status button{min-height:42px;font-size:12px}
@keyframes record-pulse{50%{opacity:.3}}@media(prefers-reduced-motion:reduce){.recording-dot{animation:none}}
.attachment-image-wrap{display:flex;justify-content:center;background:#f3f6f3;border-radius:8px;max-height:220px;overflow:hidden}.attachment-image-wrap img{max-width:100%;max-height:220px;object-fit:contain}
.image-caption-label{display:block;font-size:11px;color:#819188;margin-top:11px}.image-caption-label textarea{display:block;width:100%;margin-top:5px;font-size:14px;min-height:62px;max-height:110px;padding:9px 11px;resize:vertical;line-height:1.6;border-color:#e0e7e1}.attachment-preview .form-error{font-size:12px;line-height:1.7;margin:10px 0}
.sidebar-toggle{display:inline-flex!important}.details-toggle{white-space:nowrap;font-size:11px;gap:6px}.sidebar-heading>.subtle-icon{display:none}.sidebar-heading #hide-filters{display:inline-flex;flex:none}
.voice-card{width:292px;display:block}.audio-source{display:none!important}.audio-player{width:100%;min-width:0;direction:ltr;color:#53755f}.audio-player-controls{display:flex;align-items:center;gap:10px;min-width:0}
.audio-play{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;min-width:42px;border:0;border-radius:50%;background:#e4eee5;color:#49825d;cursor:pointer;transition:background .15s}
.audio-play:hover{background:#d7e8da}.audio-play svg{width:20px;height:20px;stroke-width:2.5}.audio-play[data-icon="play"] svg{fill:currentColor;stroke-width:1;transform:translateX(1px)}.audio-play[data-icon="pause"] svg{stroke-width:4}
.audio-track{min-width:0;flex:1}.audio-seek-wrap{height:35px;position:relative;border-radius:5px}.audio-wave{position:absolute;inset:0;color:#c5d6c9}.audio-wave>svg,.audio-wave-progress>svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round}.audio-wave-progress{position:absolute;inset:0;color:#4a9464;clip-path:inset(0 100% 0 0)}
.audio-seek{position:absolute;inset:0;width:100%;height:100%;margin:0!important;padding:0!important;opacity:0;cursor:pointer;direction:ltr}.audio-seek:disabled{cursor:default}.audio-seek-wrap:focus-within{outline:2px solid #78a788;outline-offset:3px}
.audio-time{display:flex;justify-content:space-between;align-items:center;gap:5px;min-height:17px;font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#8c9e91;letter-spacing:.15px}.audio-player-state{font-family:inherit;font-size:9px;letter-spacing:0;white-space:nowrap}
.audio-speed{min-width:35px;height:28px;border:1px solid #dce7de;border-radius:15px;background:#f5f8f4;color:#76947d;font:600 11px/1 ui-sans-serif,system-ui;cursor:pointer;padding:0 7px}.audio-speed:hover{background:#e5eee3}.audio-player-error{font-size:11px;line-height:1.7;color:#b26358;margin-top:9px}
.audio-player.is-loading .audio-play:after{content:'';position:absolute;inset:-3px;border:2px solid #b8d0bf;border-top-color:#4c8d63;border-radius:50%;animation:audio-spin 1s linear infinite}@keyframes audio-spin{to{transform:rotate(360deg)}}
.out .audio-play{background:#cde4c7;color:#438056}.out .audio-wave{color:#b8d0b2}.out .audio-wave-progress{color:#4c965e}.out .audio-speed{background:#d5e8cc;border-color:#c5dabc;color:#5f855b}
.attachment-audio-player{background:#eff6ed;border:1px solid #e0ebdc;border-radius:15px;padding:15px 13px;margin:10px 0}.attachment-audio-player .audio-play{background:#5f956b;color:white}.attachment-audio-player .audio-wave{color:#c5d9c1}.attachment-audio-player .audio-wave-progress{color:#669d6c}
.recording-status{background:#f7faf5;border:1px solid #e7eee3;border-radius:15px;padding:15px 13px;margin:10px 0;gap:10px}.recording-status #recording-label{font-size:12px;color:#72836d}.recording-status .recording-dot{flex:none}.recording-wave{flex:1;min-width:45px;height:30px;color:#aac39f;opacity:.8}.recording-wave svg{display:block;width:100%;height:100%;stroke:currentColor;stroke-width:3;stroke-linecap:round;fill:none}.recording-status time{color:#60825b;font-size:14px;margin:0;white-space:nowrap}.recording-status #stop-recording{border-color:#d9e5d3;background:#fff;color:#5c7e54;border-radius:12px;font-size:11px;gap:6px}.recording-status #stop-recording svg{width:14px;height:14px;fill:currentColor;stroke-width:0}
@media(prefers-reduced-motion:reduce){.audio-player.is-loading .audio-play:after{animation:none}}
@media(min-width:941px){.inbox-layout.sidebar-collapsed>.inbox-sidebar{display:none}}
@media(max-width:720px){
 .message-meta .delivery-status>span{font-size:10px}.delivery-status svg{width:19px;height:19px}.voice-card{width:260px}.voice-symbol{width:30px;height:30px}.voice-card audio{max-width:225px;height:40px}.voice-label{font-size:11px}
 .image-media{max-width:250px}.image-media img{max-height:300px}.sticker-media{max-width:150px;width:150px}.sticker-media img{width:150px;max-height:160px}
 .composer textarea{padding-left:83px}.composer-actions .attach-image{position:absolute;left:102px;bottom:7px;width:34px;height:34px;color:#89a080;z-index:2}.composer-actions .attach-image svg{width:20px;height:20px}
 .composer-actions .record-audio{width:48px;height:48px;min-width:48px;min-height:48px;border-radius:50%;background:#538c62;color:#fff;border:0;display:flex;align-items:center;justify-content:center}.composer-actions .record-audio svg{width:23px;height:23px}.composer-actions .record-audio:disabled{opacity:.45}
 .composer:not(.has-text) #send-message{display:none}.composer.has-text #record-audio{display:none}.composer-actions #quick-toggle{left:65px}
 .attachment-preview{padding:10px 12px;border-radius:15px;max-height:min(60dvh,470px);overflow:auto;overscroll-behavior:contain}.attachment-preview>header b{font-size:15px}.attachment-preview>header span{font-size:12px}.attachment-preview>footer{position:sticky;bottom:-10px;background:#fff;padding:10px 0 3px;margin-top:5px}.attachment-preview>footer button{min-height:46px;font-size:14px;border-radius:9px}.attachment-preview>footer small{font-size:10px;max-width:55%}.attachment-image-wrap,.attachment-image-wrap img{max-height:24dvh}.image-caption-label textarea{font-size:16px;min-height:56px;max-height:95px}.recording-status{gap:8px;font-size:12px;padding:8px 0}.recording-status button{font-size:12px}.recording-status time{font-size:13px}
 .chat-header-actions .details-toggle{font-size:14px}.sidebar-heading #hide-filters{min-width:40px;min-height:40px}
 .voice-card{width:265px}.audio-player-controls{gap:8px}.audio-play{width:40px;height:40px;min-width:40px}.audio-speed{min-width:32px;height:27px;font-size:10px;padding:0 5px}.audio-time{font-size:10px}.audio-player-state{font-size:8px}.audio-seek-wrap{height:32px}.attachment-audio-player{padding:14px 10px;border-radius:16px}.attachment-audio-player .audio-play{width:43px;height:43px;min-width:43px}.recording-status{padding:12px 10px}.recording-status #recording-label{font-size:11px}.recording-status #recording-time{font-size:13px}.recording-wave{min-width:45px}.recording-status #stop-recording{width:100%;justify-content:center;min-height:40px;margin-top:3px}.attachment-preview>header{margin-bottom:7px}.attachment-preview>footer #send-attachment{background:#538c62;border-color:#538c62;color:#fff}
}

/* Team workload and transfer report. */
.sidebar-toggle{min-width:76px;min-height:31px;width:auto;height:auto;padding:5px 7px;font-size:11px;gap:5px;flex:none}.sidebar-toggle svg{width:15px;height:15px}.sidebar-toggle[aria-expanded="true"]{background:#eff4f2;border-color:#dce5e1;color:#607b6c}.list-heading{gap:7px}.list-heading h2{min-width:0;flex:1}.reports-view{background:#f8faf9}.reports-view .page-heading{margin-bottom:23px}.reports-view .page-heading h1{color:#3e554a}.reports-view .page-heading p{color:#829186}
.report-period-form{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid #e2e8e3;border-radius:10px;padding:17px 20px}.report-period-form>label,.report-custom-dates label,.report-route-filters label{font-size:11px;color:#809083}.report-period-form select,.report-period-form input,.report-route-filters select{display:block;margin-top:7px;min-height:39px;border-color:#dfe7e0;color:#52675a;font-size:12px;background:#fff}.report-period-form>label select{min-width:155px}.report-custom-dates{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.report-custom-dates input{min-width:155px;direction:ltr}.report-custom-dates button{min-height:39px}.report-period-caption{margin-inline-start:auto;display:flex;flex-direction:column;gap:5px;padding-bottom:3px;min-width:150px;font-size:12px;color:#667e6c}.report-period-caption small{font-size:10px;color:#98a598}.report-error{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid #ecd2cc;border-radius:8px;background:#fff7f4;color:#ad6553;font-size:13px;padding:14px 18px;margin-top:18px;line-height:1.7}.report-error button{flex:none}.report-loading{display:flex;gap:8px;align-items:center;font-size:12px;color:#889b8b;margin:18px 4px}.report-loading svg{width:15px;height:15px}.reports-view>#report-date-error{margin-top:10px}
.report-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:22px 0 29px}.report-summary-card{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid #e1e9e2;border-radius:11px;padding:19px 17px}.report-card-icon{display:flex;justify-content:center;align-items:center;width:35px;height:35px;border-radius:10px;background:#eef5ee;color:#85a086;flex:none}.report-card-icon svg{width:18px;height:18px}.report-summary-card>div{min-width:0}.report-summary-card>div>span{font-size:11px;color:#819585;display:block;line-height:1.7}.report-summary-card strong{font-size:30px;color:#526f57;font-weight:600;display:block;line-height:1.4;margin:5px 0}.report-summary-card small{font-size:10px;color:#97a695;display:block;line-height:1.7}.report-section{margin:25px 0 31px}.report-section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 1px 17px}.report-section-heading h2{font-size:17px;color:#526b5a}.report-section-heading p{font-size:12px;color:#94a092;line-height:1.8;margin-top:6px}.report-footnote{font-size:11px;line-height:1.8;color:#9aa798;margin:12px 3px 0}.report-staff-wrap{border-color:#e1e8e2;border-radius:9px}.report-staff-table th{background:#f3f7f2;color:#849780;font-size:11px;padding:14px 16px}.report-staff-table td{padding:17px 16px;border-color:#edf1eb;color:#82957f}.report-staff-table td>strong{display:block;font-weight:500;font-size:16px;color:#6d8669}.report-staff-table td>.report-open-count{color:#498163}.report-staff-table td>small{font-size:10px;display:block;margin-top:4px;color:#a0ac98}.report-staff-table .contact-cell b{color:#637d65;font-size:12px}.report-staff-table .contact-cell small{color:#9eac96;font-size:10px}.report-staff-table .contact-cell .avatar{background:#eaf1e6;color:#8b9f80;width:34px;height:34px;letter-spacing:0}.report-mobile-label{display:none}.report-member-action .text-button{font-size:11px;color:#89a078;white-space:nowrap}.report-member-action svg{width:13px;height:13px}.report-route-filters{display:flex;align-items:flex-end;gap:16px;margin:0 0 17px}.report-route-filters label{min-width:180px}.report-route-filters select{width:100%}.report-route-arrow{font-size:20px;color:#a0b096;padding-bottom:10px}.report-route-filters>.text-button{margin-bottom:11px;color:#8da27c;font-size:11px}.report-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.report-route{display:flex;align-items:center;gap:15px;border:1px solid #e0e9db;background:#fff;border-radius:10px;padding:16px 18px}.report-route-person{min-width:0;flex:1}.report-route-person span{font-size:10px;color:#a0af93;display:block;margin-bottom:5px}.report-route-person b{font-size:13px;color:#758e63;display:block;overflow-wrap:anywhere}.report-route-direction{color:#b0bea4;font-size:18px;flex:none}.report-route-total{min-width:70px;border-right:1px solid #e7eedf;padding-right:15px;flex:none;text-align:center}.report-route-total strong{font-size:22px;color:#789765;font-weight:500}.report-route-total>span{font-size:10px;color:#91a47f;margin-right:4px}.report-route-total small{display:block;font-size:9px;margin-top:4px;color:#a9b69a}.report-empty{grid-column:1/-1;background:#fff;border:1px dashed #e0e8d8;border-radius:10px;min-height:180px;color:#97aa87}.report-empty h3{color:#81966f}.report-empty svg{color:#b0c39d}
@media(max-width:1150px){.report-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.report-routes{grid-template-columns:1fr}.report-period-caption{margin-inline-start:0}.report-staff-table td,.report-staff-table th{padding:14px 12px}}
@media(max-width:720px){
 .sidebar-toggle{min-height:39px;min-width:87px;font-size:12px;padding:7px 9px}.sidebar-toggle svg{width:18px;height:18px}.list-heading h2{font-size:16px}.reports-view{padding:24px 16px}.reports-view .page-heading{gap:13px;margin-bottom:20px}.reports-view .page-heading h1{font-size:25px}.reports-view .page-heading p{font-size:12px}.reports-view #refresh-reports{min-height:40px;font-size:12px}
 .report-period-form{padding:15px;gap:15px;border-radius:13px;align-items:stretch}.report-period-form>label{width:100%;font-size:12px}.report-period-form select,.report-period-form input,.report-route-filters select{font-size:16px;min-height:43px;border-radius:8px}.report-period-form>label select{width:100%;min-width:0}.report-custom-dates{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:12px}.report-custom-dates label{min-width:0;font-size:11px}.report-custom-dates input{min-width:0;width:100%;font-size:14px;padding:10px 5px}.report-custom-dates button{grid-column:1/-1;min-height:44px;font-size:14px}.report-period-caption{width:100%;font-size:11px;line-height:1.8}.report-period-caption small{font-size:10px}.report-error{align-items:flex-start;flex-direction:column;font-size:12px;padding:14px}.report-error button{min-height:40px;font-size:12px}
 .report-summary{gap:10px;margin-top:18px;margin-bottom:26px}.report-summary-card{display:block;padding:14px 12px;border-radius:12px}.report-card-icon{width:30px;height:30px;border-radius:8px;margin-bottom:9px}.report-card-icon svg{width:16px;height:16px}.report-summary-card strong{font-size:29px;margin:4px 0}.report-summary-card>div>span{font-size:11px}.report-summary-card small{font-size:9px}.report-section-heading{align-items:flex-start;gap:10px}.report-section-heading h2{font-size:17px}.report-section-heading p{font-size:11px}.report-section-heading .pill{font-size:10px;flex:none;margin-top:3px}.report-staff-wrap{border:0;overflow:visible;background:transparent}.report-staff-table,.report-staff-table tbody{display:block;width:100%}.report-staff-table thead{display:none}.report-staff-table tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:#fff;border:1px solid #e1e8dc;border-radius:12px;overflow:hidden;margin-bottom:13px}.report-staff-table td{grid-column:span 2;display:block;padding:12px 13px;white-space:normal;border:0;min-width:0;background:#fff}.report-staff-table .report-member-cell{grid-column:1/-1;border-bottom:1px solid #eef2e9;padding:15px}.report-staff-table td:nth-child(5),.report-staff-table td:nth-child(6){grid-column:span 3;border-top:1px solid #f0f3ec}.report-staff-table .report-member-action{grid-column:1/-1;padding:0 13px 12px}.report-staff-table td[colspan]{grid-column:1/-1}.report-staff-table .contact-cell b{font-size:14px}.report-staff-table .contact-cell small{font-size:11px}.report-staff-table .contact-cell .avatar{width:37px;height:37px;font-size:12px}.report-mobile-label{display:block;font-size:10px;color:#a0af94;margin-bottom:7px}.report-staff-table td>strong{font-size:20px}.report-staff-table td>small{font-size:10px}.report-member-action .text-button{font-size:12px;min-height:38px}.report-footnote{font-size:10px;margin-top:10px;line-height:1.9}
 .report-route-filters{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}.report-route-filters label{min-width:0;font-size:11px}.report-route-arrow{display:none}.report-route-filters>.text-button{grid-column:1/-1;margin:0;min-height:30px;font-size:12px}.report-route{gap:9px;padding:14px 12px}.report-route-person b{font-size:12px}.report-route-person span{font-size:10px}.report-route-total{min-width:66px;padding-right:10px}.report-route-total strong{font-size:23px}.report-route-total small{font-size:9px}.report-route-direction{font-size:16px}.report-empty{min-height:165px}.report-empty p{font-size:11px}
}
/* Independent desktop columns; their saved widths never affect phone drawers. */
.column-resizer{display:none}
@media(min-width:941px){
 .inbox-sidebar{width:var(--sidebar-width,var(--sidebar));flex-basis:var(--sidebar-width,var(--sidebar))}.conversation-list-panel{width:var(--list-width,var(--list));flex-basis:var(--list-width,var(--list))}
 .column-resizer{display:block;flex:0 0 8px;width:8px;margin:0 -4px;position:relative;align-self:stretch;z-index:10;cursor:col-resize;touch-action:none;outline:none}
 .column-resizer:before{content:'';position:absolute;inset:0 3px;background:transparent;transition:background .12s}.column-resizer:after{content:'';position:absolute;top:45%;left:2px;width:4px;height:32px;border-radius:4px;background:#bac9c2;opacity:.65}
 .column-resizer:hover:before,.column-resizer:focus-visible:before,.column-resizer.is-resizing:before{background:#80a895}.column-resizer:hover:after,.column-resizer:focus-visible:after,.column-resizer.is-resizing:after{background:#558775;opacity:1}.column-resizer:focus-visible{outline:2px solid #79a494;outline-offset:-2px}
 .inbox-layout.sidebar-collapsed>#resize-sidebar{display:none}.resizing-columns,.resizing-columns *{cursor:col-resize!important;user-select:none!important}
}

/* BEGIN WASL VISUAL UPDATE 0.3.6 */
/* Wasl 0.3.6: header, theme control and account popover.
   Append after the current stylesheet, before the dark palette overrides.
   Menu coordinates are deliberately supplied by its anchoring JavaScript. */

.topbar {
  height: 52px;
  flex-basis: 52px;
  padding-inline: 14px;
  gap: 12px;
  direction: ltr;
  background: var(--theme-panel, #fff);
  border-color: var(--theme-border, #e1e9e4);
}
.topbar .workspace-switch-wrap { min-width: 0; direction: rtl; }
.topbar .workspace-switch { min-height: 36px; border-radius: 10px; }
.topbar .workspace-switch:hover { background: var(--theme-hover, #f0f5f2); }
.topbar .workspace-switch b { overflow: hidden; text-overflow: ellipsis; }
.topbar .topbar-path { gap: 10px; min-width: 0; }
.topbar .topbar-path b { color: var(--ink); white-space: nowrap; }
.topbar .topbar-end { margin-left: auto; margin-right: 0; gap: 10px; }
.topbar #user-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: none;
  width: auto;
  min-width: 76px;
  height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--theme-border, #dce7e1);
  border-radius: 20px;
  background: var(--theme-raised, #f4f7f5);
  color: var(--ink);
  box-shadow: 0 1px 2px #15382a05;
  direction: rtl;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
#theme-toggle:hover { background: var(--theme-hover, #eaf2ed); border-color: var(--accent); }
#theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#theme-toggle .theme-toggle-icon { display: inline-flex; align-items: center; justify-content: center; }
#theme-toggle svg { width: 17px; height: 17px; stroke-width: 1.8; }
#theme-toggle .theme-toggle-label { font-size: 11px; font-weight: 600; line-height: 1; }
.rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.rail-bottom > #theme-toggle {
  width: 39px;
  min-width: 39px;
  height: 39px;
  padding: 0;
  border-radius: 13px;
  background: var(--theme-panel, #fff);
}
.rail-bottom > #theme-toggle .theme-toggle-label { display: none; }
.rail-bottom > #theme-toggle svg { width: 18px; height: 18px; }
.rail-bottom > #theme-toggle:hover { background: var(--theme-hover, #eaf2ed); }

#profile-button {
  width: 39px;
  height: 39px;
  border: 1px solid var(--theme-border, #cbded3);
  border-radius: 13px;
  background: var(--accent-soft, #eaf3f0);
  color: var(--accent);
  font-weight: 650;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
#profile-button:hover, #profile-button[aria-expanded="true"] {
  box-shadow: 0 0 0 3px var(--accent-soft, #eaf3f0);
  border-color: var(--accent);
}
#workspace-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: default;
}
#workspace-menu {
  position: fixed;
  z-index: 51;
  width: min(316px, calc(100vw - 24px));
  padding: 9px;
  border: 1px solid var(--theme-border, #dce7e0);
  border-radius: 17px;
  background: var(--theme-panel, #fff);
  color: var(--ink);
  box-shadow: 0 18px 52px #15372a26, 0 3px 10px #15372a0d;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  direction: rtl;
}
#workspace-menu:not([hidden]) { animation: wasl-popover-in 130ms ease-out; }
#workspace-menu .workspace-menu-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 6px 9px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}
#close-workspace-menu {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  color: var(--muted);
}
#close-workspace-menu:hover { background: var(--theme-hover, #edf4ef); color: var(--ink); }
#workspace-menu .menu-user {
  padding: 13px;
  border: 1px solid var(--theme-border, #e5ece7);
  border-radius: 12px;
  background: var(--theme-raised, #f6f9f7);
}
#workspace-menu .menu-user b { font-size: 15px; line-height: 1.55; color: var(--ink); }
#workspace-menu .menu-user span { margin-top: 5px; font-size: 12px; line-height: 1.6; }
#workspace-menu .menu-user span,
#workspace-menu .menu-user small,
#workspace-menu .menu-label,
#workspace-menu .tenant-option small,
#workspace-menu .demo-switch-option small {
  color: var(--muted);
  color: color-mix(in srgb, var(--ink) 72%, var(--theme-panel, #fff));
}
#workspace-menu .menu-user small { margin-top: 7px; font-size: 11px; }
#workspace-menu .menu-label { padding: 15px 10px 7px; font-size: 10px; font-weight: 650; }
#workspace-menu .menu-action,
#workspace-menu .tenant-option,
#workspace-menu .demo-switch-option {
  min-height: 42px;
  padding: 10px;
  gap: 10px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.55;
}
#workspace-menu .tenant-option > span { min-width: 0; overflow-wrap: anywhere; }
#workspace-menu .demo-switch-option > div { min-width: 0; overflow-wrap: anywhere; }
#workspace-menu .menu-action:hover,
#workspace-menu .tenant-option:hover,
#workspace-menu .demo-switch-option:hover { background: var(--theme-hover, #eff5f1); }
#workspace-menu .tenant-option.active { background: var(--accent-soft); color: var(--accent); }
#workspace-menu .tenant-option.active > svg { flex: none; width: 16px; height: 16px; }
#workspace-menu .menu-action svg { width: 17px; height: 17px; flex: none; }
#workspace-menu #logout { margin-top: 8px; border-top: 1px solid var(--theme-border, #e5ece7); border-radius: 0 0 10px 10px; color: var(--theme-error, #a84435); }
#workspace-menu #logout:hover { background: var(--theme-error-bg, #fff0ed); }

.chat-header {
  background: var(--theme-panel, #fff);
  border-color: var(--theme-border, #e1e9e4);
}
.chat-header #chat-avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--theme-border, #dce7df);
  font-size: 14px;
  font-weight: 650;
}
.chat-header .chat-person { min-width: 0; }
.chat-header .chat-person h2 { margin-bottom: 5px; color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.4; }
.chat-header .chat-person > span { min-width: 0; gap: 6px; font-size: 10px; line-height: 1.45; color: color-mix(in srgb, var(--ink) 72%, var(--theme-panel, #fff)); }
.chat-header .chat-person bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; letter-spacing: .15px; }
.chat-header .chat-person .whatsapp-dot { flex: none; width: 6px; height: 6px; }
.chat-header-actions .icon-button,
.chat-header-actions .outline-button {
  border-radius: 9px;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.chat-header-actions #transfer-conversation {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--theme-bg, #fff) !important;
  font-weight: 600;
}
.chat-header-actions #transfer-conversation:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 90%, var(--ink)) !important;
  border-color: color-mix(in srgb, var(--accent) 90%, var(--ink)) !important;
}
.chat-header-actions #star-conversation.is-starred { color: var(--accent); background: var(--accent-soft); }
.chat-header-actions #star-conversation.is-starred svg { fill: currentColor; }
.assignment-strip {
  min-height: 40px;
  padding: 5px 16px;
  gap: 8px;
  background: var(--theme-panel, #fff);
  border-color: var(--theme-border, #e8eee9);
}
.assignment-strip .assignment-button {
  min-width: 0;
  min-height: 28px;
  padding: 4px 8px;
  gap: 6px;
  border: 1px solid var(--theme-border, #e0e9e2);
  border-radius: 8px;
  color: color-mix(in srgb, var(--ink) 78%, var(--theme-panel, #fff));
  background: var(--theme-raised, #f7faf8);
}
.assignment-strip .assignment-button b { max-width: 140px; font-size: 11px; font-weight: 500; }
.assignment-strip .stage-badge { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-strip .state-label { flex: none; font-size: 10px; color: var(--muted); }

@media (min-width: 721px) {
  .chat-panel { container-type: inline-size; container-name: wasl-chat; }
  .chat-header { min-height: 68px; padding: 13px 16px 11px; gap: 10px 12px; flex-wrap: wrap; }
  .chat-header .chat-person { flex: 1 1 160px; }
  .chat-header-actions {
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .chat-header-actions .icon-button { flex: none; width: 34px; height: 34px; color: var(--muted); }
  .chat-header-actions .outline-button { flex: none; min-height: 34px; padding: 6px 9px; gap: 5px; font-size: 11px; color: var(--ink); border-color: var(--theme-border, #dce6df); background: var(--theme-panel, #fff); }
  .chat-header-actions .icon-button svg,
  .chat-header-actions .outline-button svg { width: 16px; height: 16px; }
  .chat-header-actions .icon-button:hover:not(:disabled),
  .chat-header-actions .outline-button:hover:not(:disabled) { background: var(--theme-hover, #f0f5f2); border-color: var(--accent); color: var(--ink); }
  .chat-header-actions #show-details { width: 34px; padding-inline: 8px; }
  .chat-header-actions #details-toggle-label { display: none; }
  .chat-header-actions #close-conversation { margin: 0; }
  @container wasl-chat (min-width: 520px) {
    .chat-header-actions #show-details { width: auto; padding-inline: 9px; }
    .chat-header-actions #details-toggle-label { display: inline; }
  }
  @container wasl-chat (min-width: 680px) {
    .chat-header { flex-wrap: nowrap; }
    .chat-header .chat-person { flex: 1 1 140px; }
    .chat-header-actions { flex: 0 0 auto; width: auto; }
  }
}

@media (max-width: 720px) {
  .topbar { min-height: 56px; height: 56px; flex-basis: 56px; padding-inline: 12px; gap: 9px; direction: ltr; }
  .topbar .workspace-switch-wrap { flex: 1; min-width: 0; }
  .topbar .workspace-switch { width: 100%; max-width: none; gap: 6px; }
  .topbar .workspace-switch b { max-width: none; min-width: 0; font-size: 13px; }
  .topbar .topbar-end { flex: none; margin: 0; }
  .topbar .topbar-end .pill { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
  #theme-toggle { min-width: 44px; width: 44px; height: 44px; padding: 0; border-radius: 14px; }
  #theme-toggle .theme-toggle-label { display: none; }
  #theme-toggle svg { width: 19px; height: 19px; }
  #workspace-menu-backdrop { background: #112b244d; }
  #workspace-menu { border-radius: 20px; padding: 10px; box-shadow: 0 20px 70px #132f2938; }
  #workspace-menu .workspace-menu-heading { font-size: 15px; padding: 0 3px 9px; }
  #close-workspace-menu { width: 44px; height: 44px; border-radius: 12px; }
  #workspace-menu .menu-action,
  #workspace-menu .tenant-option,
  #workspace-menu .demo-switch-option { min-height: 46px; font-size: 14px; }
  #workspace-menu .menu-label { font-size: 11px; }
  .chat-header { min-height: 68px; padding: 8px 10px; gap: 6px; flex-wrap: nowrap; }
  .chat-header #chat-avatar { width: 38px; height: 38px; border-radius: 13px; font-size: 13px; }
  .chat-header .chat-person { flex: 1; min-width: 0; }
  .chat-header .chat-person h2 { font-size: 15px; margin-bottom: 4px; }
  .chat-header .chat-person > span { gap: 4px; font-size: 10px; }
  .chat-header .chat-person bdi { font-size: 10px; }
  .chat-header #back-to-list,
  .chat-header #chat-more,
  .chat-header > #theme-toggle { flex: none; min-width: 44px; width: 44px; height: 44px; min-height: 44px; margin: 0; border-radius: 12px; }
  .chat-header #back-to-list,
  .chat-header #chat-more { color: var(--ink); }
  .chat-header #back-to-list:hover,
  .chat-header #chat-more:hover { background: var(--theme-hover, #eef5f0); }
  .chat-header #back-to-list svg { width: 22px; height: 22px; }
  .chat-header #chat-more svg { width: 21px; height: 21px; }
  .chat-header-actions {
    display: none;
    position: absolute;
    left: 10px;
    right: auto;
    top: calc(100% - 2px);
    width: min(248px, calc(100vw - 24px));
    max-height: min(440px, calc(100dvh - 160px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 7px;
    gap: 4px;
    border: 1px solid var(--theme-border, #dce7df);
    border-radius: 14px;
    background: var(--theme-panel, #fff);
    box-shadow: 0 12px 36px #183f3026;
  }
  .chat-header-actions.actions-open { display: flex; flex-direction: column; align-items: stretch; }
  .chat-header-actions .icon-button,
  .chat-header-actions .outline-button { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 9px; font-size: 13px; }
  .chat-header-actions #details-toggle-label { display: inline; }
  .assignment-strip { min-height: 48px; padding: 2px 12px; gap: 6px; }
  .assignment-strip .assignment-button { min-height: 44px; padding: 5px 7px; }
  .assignment-strip .assignment-button b { max-width: 120px; }
  .assignment-strip .stage-badge { max-width: 110px; font-size: 9px; }
}

@keyframes wasl-popover-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #workspace-menu:not([hidden]) { animation: none; }
  #theme-toggle, #profile-button,
  .chat-header-actions .icon-button,
  .chat-header-actions .outline-button { transition: none; }
}

/* Wasl 0.3.6 — append after the layout/polish overrides. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #0b141a;
  --theme-panel: #111d26;
  --theme-raised: #1b2a35;
  --theme-hover: #223540;
  --theme-border: #2a3b47;
  --theme-input: #0f1c25;
  --theme-chat: #0c171e;
  --theme-incoming: #1d2e39;
  --theme-outgoing: #16483f;
  --theme-subtle: #829aa9;
  --theme-error: #ffaaa0;
  --theme-error-bg: #3a2428;
  --theme-success: #81ddb4;
  --theme-warning: #ebc180;
  --theme-read: #69c6ff;
  --ink: #e7eef3;
  --muted: #a2b3bf;
  --line: var(--theme-border);
  --surface: var(--theme-raised);
  --accent: #4fd1b1;
  --accent-soft: #173e3b;
  color: var(--ink);
  background: var(--theme-bg);
  scrollbar-color: #405562 var(--theme-panel);
}
html[data-theme="dark"] ::selection { color: #f2fffa; background: #2d7165; }
html[data-theme="dark"] :is(body,.app-shell,.main-shell,.inbox-layout,.page-view,.reports-view,.auth-screen) { background: var(--theme-bg); color: var(--ink); }
html[data-theme="dark"] :is(.topbar,.conversation-list-panel,.chat-panel,.chat-header,.assignment-strip,.auth-side) { background: var(--theme-panel); border-color: var(--line); }
html[data-theme="dark"] :is(.navigation,.inbox-sidebar,.customer-details) { background: #13212b; border-color: var(--line); }
html[data-theme="dark"] :is(.workspace-menu,.quick-menu,.mobile-more-menu,dialog,.chat-header-actions.actions-open) { color: var(--ink); background: var(--theme-raised); border-color: #344954; box-shadow: 0 14px 45px #0006; }
html[data-theme="dark"] :is(.table-wrap,.settings-card,.team-stat,.workflow-card,.report-period-form,.report-summary-card,.report-route,.report-empty) { color: var(--ink); background: var(--theme-panel); border-color: var(--line); }
html[data-theme="dark"] :is(.page-heading h1,.reports-view .page-heading h1,.sidebar-heading h1,.list-heading h2,.chat-person h2,.customer-identity h3,.customer-details>header h3,.settings-card h2,.dialog-heading h2,.auth-card h2,.report-section-heading h2,.report-route-person b,.contact-cell b,.report-staff-table .contact-cell b,.attachment-preview>header b) { color: var(--ink); }
html[data-theme="dark"] :is(.page-heading p,.reports-view .page-heading p,.settings-card p,.settings-card small,.settings-card label,.report-section-heading p,.report-footnote,.report-summary-card>div>span,.report-summary-card small,.report-staff-table .contact-cell small,.report-staff-table td>small,.report-route-person span,.report-route-total>span,.report-route-total small,.report-mobile-label,.report-period-caption,.report-period-caption small,.report-period-form>label,.report-custom-dates label,.report-route-filters label,.report-loading,.field-hint,.table-subline,.contact-cell small) { color: var(--muted); }

/* Inputs and controls use real surfaces; native controls follow color-scheme. */
html[data-theme="dark"] :is(input,textarea,select) { color: var(--ink); background-color: var(--theme-input); border-color: #3a4d59; caret-color: var(--accent); }
html[data-theme="dark"] :is(input,textarea)::placeholder { color: #91a7b6; opacity: 1; }
html[data-theme="dark"] :is(input,textarea,select):focus { border-color: var(--accent); box-shadow: 0 0 0 3px #4fd1b11a; }
html[data-theme="dark"] :is(input,textarea,select):disabled { background-color: #15222b; color: #91a4b0; }
html[data-theme="dark"] input:is([type="checkbox"],[type="radio"]) { accent-color: #40bc9e; }
html[data-theme="dark"] input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--theme-input) inset; caret-color: var(--accent); }
html[data-theme="dark"] :is(button,a,summary):focus-visible { outline-color: var(--theme-read); }
html[data-theme="dark"] :is(.search-field,.message-search-bar .search-field,.conversation-list-panel>.search-field,.wide) { color: var(--muted); background: var(--theme-input); border-color: var(--line); }
html[data-theme="dark"] :is(.search-field input,.message-search-bar .search-field input,.conversation-list-panel>.search-field input) { color: var(--ink); background: transparent; border-color: transparent; }
html[data-theme="dark"] .search-field:focus-within { border-color: var(--accent); }
html[data-theme="dark"] :is(.search-field svg,.conversation-list-panel>.search-field svg) { color: var(--muted); }
html[data-theme="dark"] :is(.list-controls select,.list-controls select:first-child,.contact-filters>select,.report-period-form select,.report-period-form input,.report-route-filters select,.workflow-card select) { color: var(--ink); background: var(--theme-input); border-color: #3a4d59; }
html[data-theme="dark"] :is(.icon-button,.list-heading .icon-button,.chat-header .icon-button,.text-button,.assignment-button,.handoff-button,.composer-actions .text-button,.note-form .outline-button) { color: #bdd0da; }
html[data-theme="dark"] :is(.icon-button:hover,.menu-action:hover,.tenant-option:hover,.demo-switch-option:hover,.demo-account:hover,.assignment-option:hover,.nav-item:hover,.inbox-filter:hover,.tag-filter:hover) { background: var(--theme-hover); color: var(--ink); }
html[data-theme="dark"] .primary-button { color: #07231d; background: var(--accent); border-color: var(--accent); }
html[data-theme="dark"] .primary-button:hover:not(:disabled) { color: #052019; background: #74dfc2; border-color: #74dfc2; }
html[data-theme="dark"] .outline-button { color: #c4d5df; background: var(--theme-raised); border-color: #3b515f; }
html[data-theme="dark"] .outline-button:hover:not(:disabled) { color: var(--ink); background: #273d49; border-color: #62808c; }
html[data-theme="dark"] .text-button:hover { color: var(--accent); }
html[data-theme="dark"] :is(.sidebar-toggle[aria-expanded="true"],.tenant-option.active,.assignment-option.active,.quick-option.active,.quick-option:hover) { color: #9debd4; background: var(--accent-soft); border-color: #335b55; }
html[data-theme="dark"] #theme-toggle { color: #c4d8e3; background: #1a2e3a; border-color: #3b5261; }
html[data-theme="dark"] #theme-toggle:hover { color: #fff0c7; background: #273b46; border-color: #6c8794; }
html[data-theme="dark"] #theme-toggle[aria-pressed="true"] { color: #f4d38d; background: #263642; border-color: #4d6571; }
html[data-theme="dark"] .navigation #theme-toggle { color: #c6d9e4; background: #20323f; border-color: #3c5360; }
html[data-theme="dark"] .navigation #theme-toggle:hover { color: #f4d38d; background: #2b404c; }
html[data-theme="dark"] #workspace-menu-backdrop { background: #02090d80; }
html[data-theme="dark"] .workspace-menu-heading { color: #d9e7ef; border-color: var(--line); }

/* Navigation and conversation list. */
html[data-theme="dark"] :is(.nav-item,.inbox-filter,.tag-filter,.topbar-path,.topbar-end,.workspace-switch svg,.sidebar-bottom,.sidebar-empty,.sidebar-section-title,.menu-label,.menu-user span,.menu-user small,.list-tools,.small-check,.list-footer) { color: var(--muted); }
html[data-theme="dark"] .nav-item.active { color: #8be3cb; background: #21423f; }
html[data-theme="dark"] :is(.nav-item b,.unread-count) { color: #092a22; background: #5dd1b0; }
html[data-theme="dark"] :is(.workspace-icon,.empty-chat-art) { color: #8fe1ce; background: #1b3737; border-color: #31534f; }
html[data-theme="dark"] :is(.nav-divider,.divider-label:before,.divider-label:after) { background: var(--line); }
html[data-theme="dark"] :is(.inbox-filter svg,.inbox-filter b,.tag-filter b,.subtle-icon) { color: var(--theme-subtle); }
html[data-theme="dark"] :is(.inbox-filter.active,.tag-filter.active) { background: #1c3a3a; color: #adf0df; }
html[data-theme="dark"] :is(.inbox-filter.active svg,.inbox-filter.active b,.tag-filter.active b) { color: #7fd6c1; }
html[data-theme="dark"] .conversation-row { border-color: #20313c; }
html[data-theme="dark"] .conversation-row:hover { background: #192b36; }
html[data-theme="dark"] .conversation-row.selected { background: #20383f; }
html[data-theme="dark"] .conversation-row.selected:before { background: var(--accent); }
html[data-theme="dark"] .row-top b { color: #e4eef4; }
html[data-theme="dark"] :is(.row-top time,.row-bottom p,.row-labels,.active-filters) { color: var(--muted); }
html[data-theme="dark"] .active-filters { background: #1c303b; }
html[data-theme="dark"] :is(.row-tag,.tag-chip) { color: #c0bee7; background: #2a2f49; border-color: #40445e; }
html[data-theme="dark"] .tag-chip button { color: #c4c5e0; }
html[data-theme="dark"] :is(.row-star,.needs-reply-dot) { color: var(--theme-warning); }
html[data-theme="dark"] .needs-reply-dot { background: var(--theme-warning); }
html[data-theme="dark"] :is(.list-tools,.list-footer,.menu-user) { border-color: var(--line); }
html[data-theme="dark"] :is(.online-dot,.whatsapp-dot) { background: #60cf9e; }

/* Keep avatars distinguishable instead of flattening every person to one color. */
html[data-theme="dark"] :is(.avatar,.report-staff-table .contact-cell .avatar) { color: #bcd9ef; background: #294458; }
html[data-theme="dark"] :is(.avatar.tone-1,.report-staff-table .contact-cell .avatar.tone-1) { color: #d4c4f4; background: #40375d; }
html[data-theme="dark"] :is(.avatar.tone-2,.report-staff-table .contact-cell .avatar.tone-2) { color: #f1c0b7; background: #573b3e; }
html[data-theme="dark"] :is(.avatar.tone-3,.report-staff-table .contact-cell .avatar.tone-3) { color: #b3e5da; background: #28504c; }
html[data-theme="dark"] :is(.avatar.tone-4,.report-staff-table .contact-cell .avatar.tone-4) { color: #ead2a9; background: #524832; }
html[data-theme="dark"] :is(.avatar.tone-5,.report-staff-table .contact-cell .avatar.tone-5) { color: #c4d2ef; background: #34455e; }
html[data-theme="dark"] .user-avatar { color: #b0e9cf; background: #2c5145; }

/* Conversation surfaces and delivery semantics. */
html[data-theme="dark"] :is(.messages,.chat-empty) { background: var(--theme-chat); }
html[data-theme="dark"] .empty-chat-art { box-shadow: 0 0 0 12px #13242d; }
html[data-theme="dark"] :is(.empty-state,.empty-state h2,.empty-state h3,.empty-state svg) { color: var(--muted); }
html[data-theme="dark"] :is(.chat-person>span,.chat-person bdi,.assignment-button svg,.state-label,.message-search-bar>span) { color: var(--muted); }
html[data-theme="dark"] .message-search-bar { background: var(--theme-panel); border-color: var(--line); }
html[data-theme="dark"] .bubble { color: #e2ecf2; background: var(--theme-incoming); border-color: #30424d; box-shadow: 0 1px 2px #0002; }
html[data-theme="dark"] .out .bubble { color: #e1f6ed; background: var(--theme-outgoing); border-color: #285c51; }
html[data-theme="dark"] :is(.date-divider,.load-older) { color: #b0c1cc; background: #1b2e37; border-color: #304651; }
html[data-theme="dark"] :is(.message-meta,.message-author,.automation-label) { color: #a0b4bf; }
html[data-theme="dark"] .message-meta svg { color: #a0b4bf; }
html[data-theme="dark"] .delivery-status { color: #aec0cb; }
html[data-theme="dark"] .delivery-status.status-read { color: var(--theme-read); }
html[data-theme="dark"] :is(.delivery-status.status-pending,.delivery-status.status-queued) { color: var(--theme-warning); }
html[data-theme="dark"] :is(.delivery-status.status-failed,.delivery-status.status-unknown,.message-meta.failed,.message-error,.media-error,.audio-player-error) { color: var(--theme-error); }
html[data-theme="dark"] .attachment-link { color: #8dcfff; }
html[data-theme="dark"] .stage-badge { color: #c0d5e7; background: #283e50; }
html[data-theme="dark"] .stage-dot { background: #93a8b8; }
html[data-theme="dark"] .stage-in_progress { background: #81bce8; }
html[data-theme="dark"] .stage-awaiting_payment { background: #deb473; }
html[data-theme="dark"] .stage-ready_to_ship { background: #b9a0e1; }
html[data-theme="dark"] .stage-shipped { background: #76c7a2; }
html[data-theme="dark"] .permission-notice { color: #bdcdda; background: #1a2d38; border-color: var(--line); }
html[data-theme="dark"] .permission-notice .outline-button { color: #afe3d4; background: #203e3b; border-color: #3d6059; }

/* These narrow !important rules replace existing important light-theme values. */
html[data-theme="dark"] .transfer-button { color: #08271f !important; background: var(--accent) !important; border-color: var(--accent) !important; }
html[data-theme="dark"] .is-starred { color: #efc76e !important; background: #3c3527; }
html[data-theme="dark"] .danger { color: var(--theme-error) !important; }
html[data-theme="dark"] .form-error { color: var(--theme-error) !important; background: var(--theme-error-bg); border-color: #694047; }
html[data-theme="dark"] .channel-setup-result { color: var(--theme-success) !important; background: #1b362d; border-color: #355b49; }

/* Reply composer, previews, attachments and voice widgets. */
html[data-theme="dark"] .composer-area { background: var(--theme-panel); border-color: var(--line); }
html[data-theme="dark"] .composer { background: #15252f; border-color: #3a515f; }
html[data-theme="dark"] .composer:focus-within { border-color: #58bfa8; box-shadow: 0 0 0 2px #4fd1b11a; }
html[data-theme="dark"] :is(.composer textarea,.image-caption-label textarea) { color: var(--ink); background: #15252f; border-color: #3a515f; }
html[data-theme="dark"] .composer textarea:disabled { color: #90a7b4; background: #16232b; }
html[data-theme="dark"] .composer textarea::placeholder { color: #91a7b6; }
html[data-theme="dark"] :is(.composer-heading,.composer-heading b,.composer-actions>span,.composer-hint,.image-caption-label,.attachment-preview>header span,.attachment-preview>footer small) { color: #a0b4bf; }
html[data-theme="dark"] .composer-hint .expired { color: var(--theme-warning); }
html[data-theme="dark"] :is(.composer-actions .primary-button,.attachment-preview>footer #send-attachment) { color: #08271f; background: #53d0b0; border-color: #53d0b0; }
html[data-theme="dark"] :is(.composer-actions .primary-button:hover:not(:disabled),.attachment-preview>footer #send-attachment:hover:not(:disabled)) { background: #75dec2; border-color: #75dec2; }
html[data-theme="dark"] :is(.composer-actions .attach-image,.composer-actions .record-audio,.composer-actions .text-button) { color: #b9cfd7; }
html[data-theme="dark"] .composer-actions .record-audio { color: #9ee5d0; background: #22443f; border-color: #3b665c; }
html[data-theme="dark"] .composer-actions .text-button:hover { background: var(--theme-hover); }
html[data-theme="dark"] :is(.quick-menu-heading,.quick-option) { color: #c6d7df; border-color: var(--line); }
html[data-theme="dark"] :is(.attachment-preview,.attachment-preview>footer) { background: var(--theme-raised); border-color: #38515d; }
html[data-theme="dark"] :is(.image-media,.attachment-image-wrap) { background: #0e1a22; }
html[data-theme="dark"] .media-loading { color: var(--muted); background: #1a2b35; }
html[data-theme="dark"] :is(.sticker-media,.sticker-media .media-loading) { background: transparent; }
html[data-theme="dark"] :is(.voice-label,.audio-time,.audio-player-state) { color: #a7c0c8; }
html[data-theme="dark"] :is(.voice-symbol,.audio-play,.out .audio-play) { color: #94e6d0; background: #2a504b; }
html[data-theme="dark"] :is(.audio-play:hover,.out .audio-play:hover) { color: #c5ffee; background: #38665e; }
html[data-theme="dark"] :is(.audio-wave,.out .audio-wave,.attachment-audio-player .audio-wave) { color: #56767d; }
html[data-theme="dark"] :is(.audio-wave-progress,.out .audio-wave-progress,.attachment-audio-player .audio-wave-progress) { color: #69d8bb; }
html[data-theme="dark"] :is(.audio-speed,.out .audio-speed) { color: #b1ded1; background: #244139; border-color: #466960; }
html[data-theme="dark"] .audio-speed:hover { color: #e2fff3; background: #33594d; }
html[data-theme="dark"] .audio-seek-wrap:focus-within { outline-color: var(--theme-read); }
html[data-theme="dark"] .audio-player.is-loading .audio-play:after { border-color: #44645e; border-top-color: #81e3ca; }
html[data-theme="dark"] .attachment-audio-player { color: var(--ink); background: #18332e; border-color: #31564b; }
html[data-theme="dark"] .attachment-audio-player .audio-play { color: #052820; background: #77d5b4; }
html[data-theme="dark"] .recording-status { color: #c2dad0; background: #20352f; border-color: #3b564a; }
html[data-theme="dark"] :is(.recording-status #recording-label,.recording-status time,.recording-status #recording-time) { color: #b6d7c5; }
html[data-theme="dark"] .recording-wave { color: #8bc2a5; }
html[data-theme="dark"] .recording-dot { background: #fb7d86; }
html[data-theme="dark"] .recording-status #stop-recording { color: #f4c4c6; background: #4a2e36; border-color: #80535e; }

/* Customer details, internal notes and audit timeline. */
html[data-theme="dark"] .customer-identity .big { border-color: var(--theme-raised); }
html[data-theme="dark"] :is(.customer-identity bdi,.section-label,.workflow-card>label,.workflow-card p,.details-tabs button,.details-block h4,.details-block dt,.no-tags,.note-form label,.note-form small,.activity-entry small) { color: var(--muted); }
html[data-theme="dark"] :is(.details-block dd,.details-block p,.activity-entry p) { color: #c3d2dc; }
html[data-theme="dark"] :is(.details-tabs,.details-block,.note-form,.activity-entry) { border-color: var(--line); }
html[data-theme="dark"] .details-tabs button.active { color: #8de3cf; border-bottom-color: var(--accent); }
html[data-theme="dark"] :is(.tag-form input,.note-form textarea) { color: var(--ink); background: var(--theme-input); border-color: #3a4d59; }
html[data-theme="dark"] :is(.tag-form button,.handoff-button) { color: #b9dcd3; background: #203a39; border-color: #3d5b58; }
html[data-theme="dark"] .note-entry { background: #332f25; border-color: #514938; }
html[data-theme="dark"] :is(.note-entry b,.note-entry p) { color: #e4d6b6; }
html[data-theme="dark"] .note-entry time { color: #bbae92; }
html[data-theme="dark"] .activity-entry:before { background: #7ca5b0; box-shadow: 0 0 0 3px #13212b; }

/* Contacts, team settings, reports and operational feedback. */
html[data-theme="dark"] :is(th,.report-staff-table th) { color: #aebfcc; background: #1b2d37; }
html[data-theme="dark"] :is(td,.report-staff-table td) { color: #bfced8; border-color: var(--line); }
html[data-theme="dark"] :is(.team-stat b,.report-summary-card strong,.report-route-total strong) { color: #97e2cc; }
html[data-theme="dark"] :is(.team-stat span,.team-chip,.reply-number) { color: var(--muted); }
html[data-theme="dark"] :is(.team-chip,.connection-checklist>div,.report-route-total) { border-color: var(--line); }
html[data-theme="dark"] .report-card-icon { color: #87dcc4; background: #203f3b; }
html[data-theme="dark"] .report-staff-table td>strong { color: #d4e4eb; }
html[data-theme="dark"] .report-staff-table td>.report-open-count { color: #8de0b7; }
html[data-theme="dark"] :is(.report-member-action .text-button,.report-route-filters>.text-button) { color: #8edcc5; }
html[data-theme="dark"] :is(.report-route-arrow,.report-route-direction) { color: #92afa8; }
html[data-theme="dark"] :is(.report-empty,.report-empty h3,.report-empty svg) { color: var(--muted); }
html[data-theme="dark"] :is(.report-error,.error-banner) { color: var(--theme-error); background: var(--theme-error-bg); border-color: #694047; }
html[data-theme="dark"] :is(.pill,.composer-hint .expired) { color: var(--theme-warning); }
html[data-theme="dark"] .pill { background: #3b3325; border-color: #5b4d32; }
html[data-theme="dark"] .pill.subtle { color: #b5c6d1; background: #21323e; border-color: #354956; }
html[data-theme="dark"] .pill.live { color: #92e3b9; background: #213c31; border-color: #3c5e4b; }
html[data-theme="dark"] :is(.connection-checklist>div,.connection-checklist b) { color: #c1d2de; }
html[data-theme="dark"] .connection-checklist span { color: var(--theme-warning); }
html[data-theme="dark"] .connection-checklist .ready { color: var(--theme-success); }
html[data-theme="dark"] :is(code,.code-box,.meta-activation-grid .activation-target) { color: #b7d5e7; background: #0d1b24; border-color: #334c5b; }
html[data-theme="dark"] :is(.message-preview,.info-note) { color: #bfd8e3; background: #1a303c; border-color: #36515f; }
html[data-theme="dark"] .switch>span { background: #465a68; }
html[data-theme="dark"] .switch input:checked+span { background: #3eb997; }
html[data-theme="dark"] .switch>span:after { background: #effbf6; }
html[data-theme="dark"] .meta-activation-grid>form { background: #172631; border-color: #304552; }
html[data-theme="dark"] .meta-activation-grid h3 { color: #d2e3ee; }

/* Dialogs, menus and authentication are themed as well as the inbox. */
html[data-theme="dark"] dialog::backdrop { background: #02080db3; }
html[data-theme="dark"] :is(dialog p,dialog label,.assignment-group-label,.assignment-option,.divider-label) { color: var(--muted); }
html[data-theme="dark"] :is(.assignment-options,.demo-account) { border-color: #354955; }
html[data-theme="dark"] .assignment-option .check-icon { color: #76d6b8; }
html[data-theme="dark"] #action-form>.dialog-actions { background: var(--theme-raised); border-color: var(--line); box-shadow: 0 -5px 18px #0002; }
html[data-theme="dark"] .toast { color: #e2fff1; background: #255446; border-color: #4c8470; box-shadow: 0 10px 30px #0005; }
html[data-theme="dark"] .toast.error { color: #ffe0dc; background: #66383e; border-color: #a46167; }
html[data-theme="dark"] .auth-intro { color: var(--ink); background: #122c2b; border-color: #2c4945; }
html[data-theme="dark"] :is(.auth-brand b,.auth-intro h1) { color: #b3f0dc; }
html[data-theme="dark"] :is(.auth-intro>div>p,.auth-intro .eyebrow,.auth-intro>small,.auth-steps,.auth-card>p,.auth-card label,.demo-accounts>small,.demo-account small) { color: #a6beb9; }
html[data-theme="dark"] .auth-steps span { color: #c4e6da; background: #1b3a35; border-color: #3a5a4e; }
html[data-theme="dark"] .auth-steps i { color: #789e91; }
html[data-theme="dark"] .auth-tabs { background: #13242f; border-color: var(--line); }
html[data-theme="dark"] .auth-tabs button { color: var(--muted); }
html[data-theme="dark"] .auth-tabs button.active { color: #9ae4ce; background: #24443e; box-shadow: 0 1px 4px #0002; }
html[data-theme="dark"] .demo-account b { color: #d6e5ec; }
html[data-theme="dark"] .auth-card h2:before { color: #88d8bc; }

/* Mobile-only surfaces keep the same palette without changing their geometry. */
html[data-theme="dark"] :is(.mobile-nav,.mobile-more-menu) { color: var(--muted); background: var(--theme-panel); border-color: var(--line); }
html[data-theme="dark"] :is(.mobile-nav button,.mobile-more-menu>button) { color: var(--muted); }
html[data-theme="dark"] :is(.mobile-nav button.active,.mobile-more-menu>button.active) { color: #92e5cb; }
html[data-theme="dark"] :is(.mobile-nav button:hover,.mobile-more-menu>button:hover) { color: #d8f5eb; background: #213b39; }
html[data-theme="dark"] .mobile-menu-heading { color: #d2e3ec; border-color: var(--line); }
html[data-theme="dark"] :is(.mobile-more-backdrop,.inbox-layout.details-open #detail-backdrop,.inbox-layout.filters-open #filter-backdrop) { background: #02090db3; }
html[data-theme="dark"] .column-resizer:after { background: #6f9292; }
html[data-theme="dark"] :is(.column-resizer:hover,.column-resizer:focus-visible,.column-resizer.is-resizing):before { background: #3b8074; }
html[data-theme="dark"] :is(.column-resizer:hover,.column-resizer:focus-visible,.column-resizer.is-resizing):after { background: #6bd4bb; }
@media (max-width: 720px) {
  html[data-theme="dark"] .composer-area { background: var(--theme-chat); }
  html[data-theme="dark"] .composer { background: transparent; }
  html[data-theme="dark"] .composer textarea { background: #1b2e37; border-color: #3d5560; }
  html[data-theme="dark"] .composer-actions .record-audio { color: #08271f; background: #5cd3b2; border-color: #5cd3b2; }
  html[data-theme="dark"] .chat-header-actions :is(.icon-button,.outline-button) { color: #c7dbe2 !important; background: var(--theme-raised) !important; }
  html[data-theme="dark"] .chat-header-actions :is(.icon-button:hover,.outline-button:hover) { background: var(--theme-hover) !important; }
  html[data-theme="dark"] .chat-header-actions .is-starred { color: #efc76e !important; }
  html[data-theme="dark"] :is(.report-staff-table tr,.report-staff-table td) { background: var(--theme-panel); border-color: var(--line); }
  html[data-theme="dark"] .report-staff-wrap { background: transparent; }
}

/* END WASL VISUAL UPDATE 0.3.6 */

/* Compact chat: one expanding input, with conversation context in the header. */
.messages { background-color:#f5f8f6; background-image:url('/chat-wallpaper.svg'); background-size:540px 380px; background-repeat:repeat; }
html[data-theme="dark"] .messages { background-color:#0b171e; background-image:url('/chat-wallpaper.svg'); }
.date-divider { border:1px solid var(--line); }
.conversation-row { direction:ltr; text-align:left; }
.conversation-row .row-content { text-align:left; }
.conversation-row .row-top,.conversation-row .row-bottom { direction:ltr; }
.conversation-row .row-top b,.conversation-row .row-bottom p { text-align:left; unicode-bidi:plaintext; }
.conversation-row .row-labels { direction:ltr; justify-content:flex-start; }
.conversation-row.has-unread .row-bottom p { color:#c43f4e; font-weight:600; }
.conversation-row.has-unread .row-top b { font-weight:700; }
.conversation-row.has-unread .unread-count { background:#d84655; color:#fff; }
html[data-theme="dark"] .conversation-row.has-unread .row-bottom p { color:#ff8190; }
html[data-theme="dark"] .conversation-row.has-unread .unread-count { background:#d84655; color:#fff; }
.chat-header { flex-shrink:0; }
.chat-header > .details-toggle { flex:none; width:34px; min-height:34px; padding:7px; border-radius:9px; background:var(--theme-panel,#fff); border-color:var(--line); }
.chat-header > .details-toggle #details-toggle-label { display:none; }
.chat-header-actions #close-conversation { margin-inline-start:auto; }
@media(min-width:721px) {
  @container wasl-chat (min-width:680px) {
    .chat-header > .details-toggle { width:auto; padding-inline:9px; font-size:11px; }
    .chat-header > .details-toggle #details-toggle-label { display:inline; }
  }
}
.chat-context { display:flex; flex-wrap:wrap; align-items:center; gap:5px 8px; margin-top:6px; min-width:0; color:var(--muted); font-size:10px; }
.chat-context .assignment-button { min-height:25px; min-width:0; max-width:170px; padding:2px 6px; gap:4px; border-radius:6px; color:var(--ink); background:var(--surface); }
.chat-context .assignment-button b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.chat-context .assignment-button svg { width:12px; height:12px; }
.chat-context .stage-badge { font-size:10px; padding:3px 6px; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-context .state-label { margin:0; font-size:10px; }
.header-reply-window { display:inline-flex; align-items:center; gap:4px; line-height:1.6; }
.header-reply-window svg { width:12px; height:12px; }
.header-reply-window .expired { color:var(--theme-warning,#a16b23); }
.composer-area { flex-shrink:0; padding:10px 14px max(10px,env(safe-area-inset-bottom)); background:var(--theme-panel,#f6f8f7); }
.composer { display:grid; grid-template-columns:34px minmax(0,1fr) 34px 44px; grid-template-areas:"quick input image action"; gap:6px; align-items:end; padding:5px; overflow:visible; border:1px solid var(--line); border-radius:28px; background:var(--theme-raised,#fff); box-shadow:none; }
.composer:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent); }
.composer #message-input { grid-area:input; min-width:0; min-height:44px; max-height:128px; padding:10px 3px; border:0; border-radius:0; color:var(--ink); background:transparent; box-shadow:none!important; font-size:14px; line-height:24px; resize:none; overflow-y:auto; }
.composer #message-input::placeholder { font-size:14px; color:var(--muted); }
.composer-actions { display:contents; }
.composer-actions #character-count { display:none; }
.composer-actions #quick-toggle,.composer-actions #attach-image { position:static; width:34px; height:44px; min-width:0; min-height:44px; margin:0; padding:0; border:0; border-radius:18px; font-size:0; color:var(--muted); background:transparent; display:flex; align-items:center; justify-content:center; }
.composer-actions #quick-toggle { grid-area:quick; }
.composer-actions #attach-image { grid-area:image; }
.composer-actions #quick-toggle svg,.composer-actions #attach-image svg { width:20px; height:20px; }
.composer-actions #record-audio,.composer-actions #send-message { position:static; grid-area:action; display:flex; align-items:center; justify-content:center; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; margin:0; border:0; border-radius:50%; background:var(--accent); color:#fff; }
.composer-actions #send-message>span:first-child { display:none; }
.composer-actions #record-audio svg,.composer-actions #send-message svg { width:21px; height:21px; }
.composer:not(.has-text) #send-message,.composer.has-text #record-audio { display:none; }
.quick-menu { bottom:calc(100% - 5px); right:14px; left:14px; border-radius:14px; }
.profile-photo-edit { display:flex; align-items:center; gap:10px; width:100%; padding:0 0 12px; margin-bottom:10px; color:var(--ink); text-align:start; border-bottom:1px solid var(--line); font-size:12px; }
.profile-photo-edit>svg { margin-inline-start:auto; width:17px; }
.profile-photo-edit .avatar { width:42px; height:42px; }
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
#profile-button { padding:0; overflow:hidden; }
.profile-photo-editor { display:flex; flex-direction:column; align-items:center; gap:18px; padding:16px 0; text-align:center; }
#profile-photo-preview { width:112px; height:112px; font-size:32px; }
.profile-photo-controls { display:flex; gap:18px; align-items:center; }
#profile-photo-status { min-height:20px; color:var(--muted); font-size:12px; }
.composer { grid-template-columns:34px minmax(0,1fr) 34px 34px 44px; grid-template-areas:"emoji input quick image action"; }
.composer-actions #emoji-toggle { grid-area:emoji; width:34px; height:44px; color:var(--muted); border-radius:18px; }
.composer-actions #emoji-toggle svg { width:22px; height:22px; }
.emoji-menu { position:absolute; bottom:calc(100% - 4px); right:14px; z-index:7; width:min(328px,calc(100% - 28px)); padding:10px; background:var(--theme-panel,#fff); color:var(--ink); border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 35px #0002; }
.emoji-menu>header { display:flex; align-items:center; justify-content:space-between; padding:0 5px 7px; font-size:12px; }
.emoji-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); max-height:240px; overflow:auto; gap:2px; }
.emoji-option { height:36px; padding:0; font-size:23px; border-radius:9px; }
.emoji-option:hover,.emoji-option:focus-visible { background:var(--accent-soft); }
html[data-theme="dark"] .composer { background:#1b2e37; border-color:#344b57; }
html[data-theme="dark"] .composer #message-input { background:transparent; }
html[data-theme="dark"] .chat-context .assignment-button { background:var(--theme-raised); color:var(--ink); }
html[data-theme="dark"] .composer-actions :is(#record-audio,#send-message) { color:#08271f; background:#53d0b0; }
@media(max-width:720px) {
  .chat-header { flex-wrap:wrap; padding:9px 8px; }
  .chat-header .chat-person { flex:1; }
  .chat-context { gap:4px 6px; margin-top:5px; }
  .chat-context .assignment-button { max-width:120px; min-height:28px; }
  .header-reply-window { font-size:9px; }
  .chat-header .chat-person h2 { font-size:14px; }
  .chat-header #chat-avatar { width:34px; height:34px; }
  .chat-header > #theme-toggle,.chat-header #chat-more,.chat-header #back-to-list { min-width:32px; width:32px; padding:0; }
  .composer-area { padding:7px 7px max(7px,env(safe-area-inset-bottom)); }
  .composer { gap:3px; grid-template-columns:30px minmax(0,1fr) 30px 30px 44px; border-radius:28px; }
  .composer #message-input,.composer #message-input::placeholder { font-size:16px; }
  .composer-actions #quick-toggle,.composer-actions #attach-image { width:32px; }
  .composer-actions #emoji-toggle { width:30px; }
  #mobile-more-menu #theme-toggle { display:flex; width:100%; height:48px; justify-content:flex-start; gap:14px; margin:0; }
  #mobile-more-menu #theme-toggle .theme-toggle-label { display:inline; }
}

/* Conversation list: clearer hierarchy and a quieter frame around the chat. */
:root { --list:300px; }
#conversation-list-panel {
  --list-hover:#f4f8f6; --list-selected:#e9f3ee; --list-selected-border:#cfe2d8;
  --list-control:#f5f8f7; --list-owner:#edf3f0; --list-name:#263e38; --list-preview:#72837e;
  background:var(--theme-panel,#fff);
}
html[data-theme="dark"] #conversation-list-panel {
  --list-hover:#162931; --list-selected:#1b3539; --list-selected-border:#315450;
  --list-control:#15272f; --list-owner:#213c3d; --list-name:#e3eeec; --list-preview:#a1b7b5;
}
#conversation-list-panel .list-heading { gap:9px; padding:19px 14px 14px; min-height:64px; }
#conversation-list-panel .list-heading h2 { font-size:16px; font-weight:700; letter-spacing:-.25px; }
#conversation-list-panel #refresh { width:30px; height:32px; border-radius:9px; color:var(--muted); }
#conversation-list-panel #refresh:hover { background:var(--list-hover); color:var(--accent); }
#conversation-list-panel #show-filters { min-height:32px; padding:5px 8px; font-size:10px; gap:5px; border-radius:9px; background:var(--list-control); border-color:var(--line); }
#conversation-list-panel #show-filters svg { width:15px; height:15px; }
#conversation-list-panel > .search-field { margin:0 14px 12px; min-height:42px; border-radius:12px; padding:0 11px; border:1px solid var(--line); background:var(--list-control); gap:8px; }
#conversation-list-panel > .search-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent); }
#conversation-list-panel .search-field input { padding:10px 0; font-size:12px; line-height:20px; color:var(--ink); background:transparent; }
#conversation-list-panel .search-field svg { width:17px; height:17px; color:var(--muted); }
#conversation-list-panel .list-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 14px 10px; }
#conversation-list-panel .list-controls select { width:100%; min-height:34px; padding:6px 8px; border:1px solid var(--line); border-radius:9px; background:var(--list-control); color:var(--ink); font-size:11px; }
#conversation-list-panel .list-tools { margin:0 14px; padding:0 0 11px; min-height:37px; color:var(--muted); font-size:11px; border-color:var(--line); gap:8px; }
#conversation-list-panel .small-check { display:inline-flex; align-items:center; gap:6px; padding:4px 6px; border-radius:7px; font-size:11px; white-space:nowrap; }
#conversation-list-panel .small-check:has(input:checked) { color:var(--accent); background:var(--accent-soft); }
#conversation-list-panel .small-check input { width:13px; height:13px; margin:0; accent-color:var(--accent); }
#conversation-list-panel #result-count { font-size:10px; white-space:nowrap; }
#conversation-list { padding:8px; scroll-padding-block:8px; }
#conversation-list .conversation-row { min-height:94px; padding:13px 11px; margin-bottom:5px; gap:11px; border:1px solid transparent; border-radius:12px; background:transparent; transition:background-color 140ms ease,border-color 140ms ease; }
#conversation-list .conversation-row:hover { background:var(--list-hover); }
#conversation-list .conversation-row.selected { background:var(--list-selected); border-color:var(--list-selected-border); }
#conversation-list .conversation-row.selected:before { top:15px; bottom:15px; left:0; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
#conversation-list .conversation-row .avatar { width:40px; height:40px; margin-top:1px; font-size:13px; border:1px solid color-mix(in srgb,currentColor 12%,transparent); }
#conversation-list .row-top { align-items:baseline; gap:8px; margin-bottom:5px; }
#conversation-list .row-top b { color:var(--list-name); font-size:14px; font-weight:650; line-height:1.5; }
#conversation-list .row-top time { color:var(--muted); font-size:9px; font-variant-numeric:tabular-nums; }
#conversation-list .row-bottom { min-height:21px; gap:7px; }
#conversation-list .row-bottom p { color:var(--list-preview); font-size:12px; line-height:21px; }
#conversation-list .has-unread .row-bottom p { color:#c43f4e; font-weight:600; }
html[data-theme="dark"] #conversation-list .has-unread .row-bottom p { color:#ff8190; }
#conversation-list .has-unread .row-top b { font-weight:700; }
#conversation-list .unread-count { min-width:19px; height:19px; padding:0 5px; line-height:19px; font-size:10px; border-radius:10px; background:#d84655; color:#fff; }
#conversation-list .row-labels { margin-top:7px; min-height:19px; gap:6px; font-size:10px; }
#conversation-list .row-owner { max-width:130px; padding:1px 6px; border-radius:5px; background:var(--list-owner); color:var(--list-preview); font-size:9px; line-height:17px; }
#conversation-list-panel .list-footer { min-height:42px; padding:8px 16px; gap:8px; background:var(--theme-panel,#fff); color:var(--muted); font-size:10px; border-color:var(--line); }
#conversation-list-panel .list-footer .online-dot { width:6px; height:6px; background:#49bb95; box-shadow:0 0 0 3px #49bb9514; }
@media(max-width:720px) {
  #conversation-list-panel .list-heading { min-height:68px; padding:17px 17px 13px; }
  #conversation-list-panel .list-heading h2 { font-size:20px; }
  #conversation-list-panel #refresh,#conversation-list-panel #show-filters { min-width:40px; min-height:40px; }
  #conversation-list-panel > .search-field { min-height:46px; }
  #conversation-list-panel .search-field input { font-size:16px; }
  #conversation-list-panel .list-controls select { min-height:40px; font-size:13px; }
  #conversation-list-panel .small-check { min-height:35px; font-size:12px; }
  #conversation-list .conversation-row { padding:14px 12px; min-height:103px; }
  #conversation-list .conversation-row .avatar { width:46px; height:46px; font-size:15px; }
  #conversation-list .row-top b { font-size:15px; }
  #conversation-list .row-top time { font-size:10px; }
  #conversation-list .row-bottom p { font-size:13px; }
  #conversation-list .row-owner { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { #conversation-list .conversation-row { transition:none; } }

.inbox-number-filter { display:flex; align-items:center; gap:8px; margin:0 14px 10px; font-size:10px; color:var(--muted); }
.inbox-number-filter>span { white-space:nowrap; }
.inbox-number-filter select { flex:1; min-width:0; padding:7px 8px; border:1px solid var(--line); background:var(--list-control); color:var(--ink); border-radius:9px; font:inherit; font-size:11px; }
#conversation-list .row-labels { flex-wrap:wrap; }
.row-channel,.channel-badge { display:inline-flex; align-items:center; gap:4px; color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 18%,transparent); border-radius:5px; padding:2px 5px; font-size:9px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-channel svg { width:12px; height:12px; flex:none; }
.channel-picker-card { margin-bottom:18px; }
.channel-picker-card select { width:100%; padding:12px; color:var(--ink); background:var(--theme-panel,#fff); border:1px solid var(--line); border-radius:9px; }
.channel-welcome-option { display:flex!important; flex-direction:row!important; align-items:center; gap:8px; font-size:12px; }
.channel-welcome-option input { width:16px!important; height:16px; padding:0; accent-color:var(--accent); }
@media(max-width:720px) { .inbox-number-filter { font-size:12px; } .inbox-number-filter select { min-height:40px; font-size:13px; } .channel-badge { font-size:9px; } }

/* Keep the phone's default view focused on conversations and messages. */
.chat-identity { display:flex; align-items:center; gap:9px; min-width:0; }
.chat-owner-group { display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-width:0; }
@media(min-width:721px) {
  .chat-header { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"identity timer actions"; align-items:center; gap:12px; min-height:76px; padding:10px 12px; }
  .chat-header .chat-identity { grid-area:identity; gap:7px; }
  .chat-header .chat-person { flex:0 1 150px; text-align:right; }
  .chat-header .chat-person>span { justify-content:flex-start; }
  .chat-header .chat-person h2 { margin-bottom:4px; font-size:14px; }
  .chat-header #chat-avatar { flex:none; width:38px; height:38px; }
  .chat-header #show-details { flex:none; width:32px; min-height:34px; padding:6px; border-radius:9px; }
  .chat-header #show-details #details-toggle-label { display:none; }
  .chat-header #chat-context { display:contents; }
  .chat-header .header-reply-window { grid-area:timer; justify-content:center; white-space:nowrap; font-size:10px; }
  .chat-header #chat-owner-group { flex:0 1 110px; flex-direction:column; align-items:flex-start; gap:4px; padding-inline-start:8px; border-inline-start:1px solid var(--line); }
  .chat-header #chat-owner-group .assignment-button { min-height:28px; max-width:110px; padding:3px 7px; gap:4px; border:1px solid var(--line); border-radius:7px; background:var(--surface); }
  .chat-header #chat-owner-group .assignment-button b { max-width:78px; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chat-header #chat-owner-group .assignment-button svg { width:12px; height:12px; }
  .chat-header #chat-owner-group .channel-badge { max-width:105px; font-size:8px; padding:1px 4px; }
  .chat-header #chat-owner-group :is(.stage-badge,.state-label) { display:none; }
  .chat-header #chat-actions { grid-area:actions; width:auto; min-width:0; justify-content:flex-end; gap:5px; }
  .chat-header #chat-actions #close-conversation { margin-inline-start:0; }
  @container wasl-chat (max-width:700px) {
    .chat-header { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"identity identity" "timer actions"; gap:7px; }
    .chat-header .header-reply-window { justify-content:flex-start; }
    .chat-header .chat-person { flex:0 1 180px; }
    .chat-header #chat-owner-group { margin-inline-start:12px; }
  }
}
@media(max-width:720px) {
  .chat-header .chat-identity { flex:1; min-width:0; gap:8px; }
  .chat-header .chat-person { flex:1; text-align:right; }
  .chat-header .chat-person>span { justify-content:flex-start; }
  .chat-header-actions #chat-owner-group { display:flex; flex-wrap:wrap; gap:7px; width:100%; }
}
#mobile-list-options { position:relative; }
.filter-indicator { position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
#conversation-list-panel:not(.options-open) #list-options { display:none; }
#mobile-list-options { display:flex; flex:none; width:32px; height:36px; color:var(--muted); border-radius:9px; }
#mobile-list-options[aria-expanded="true"],#mobile-list-options.has-filters { color:var(--accent); background:var(--accent-soft); }
@media(min-width:721px) {
  #conversation-list-panel .list-heading { min-height:50px; padding:6px 10px; gap:4px; }
  #conversation-list-panel .list-heading h2 { font-size:14px; }
  #conversation-list-panel #show-filters { padding:5px; font-size:9px; }
  #conversation-list-panel #refresh { width:26px; }
  #conversation-list-panel > .search-field { min-height:36px; margin:0 10px 8px; }
  #conversation-list-panel .search-field input { padding:7px 0; }
}
@media(max-width:720px) {
  #conversation-list-panel .list-heading { min-height:48px; padding:4px 10px; gap:5px; }
  #conversation-list-panel .list-heading h2 { font-size:18px; }
  #conversation-list-panel #refresh { display:none; }
  #conversation-list-panel #show-filters { width:40px; padding:0; border:0; background:transparent; }
  #conversation-list-panel #show-filters>span:not([data-icon]) { display:none; }
  #conversation-list-panel #show-filters svg { width:20px; height:20px; }
  #mobile-list-options { width:40px; height:40px; color:var(--muted); border-radius:10px; }
  #mobile-list-options[aria-expanded="true"],#mobile-list-options.has-filters { color:var(--accent); background:var(--accent-soft); }
  #conversation-list-panel > .search-field { min-height:38px; margin:0 10px 8px; border-radius:12px; }
  #conversation-list-panel .search-field input { padding:7px 0; font-size:15px; line-height:22px; }
  #conversation-list-panel:not(.options-open) #list-options { display:none; }
  #list-options { margin-bottom:6px; border-bottom:1px solid var(--line); }
  #conversation-list-panel .list-controls { padding:2px 10px 8px; }
  #conversation-list-panel .list-tools { margin:0 10px; padding-bottom:6px; border:0; }
  #conversation-list-panel .inbox-number-filter { margin:0 10px 6px; }
  #conversation-list { padding:2px 6px; }
  #conversation-list .conversation-row { min-height:82px; padding:10px 8px; margin-bottom:2px; gap:10px; }
  #conversation-list .conversation-row .avatar { width:42px; height:42px; }
  #conversation-list .row-labels { margin-top:3px; }
  #conversation-list-panel .list-footer { min-height:28px; padding:4px 12px; font-size:9px; }
  .chat-header { min-height:60px; padding:6px; gap:6px; flex-wrap:nowrap; }
  .chat-header #back-to-list,.chat-header #chat-more { width:40px; min-width:40px; height:44px; }
  .chat-header #chat-avatar { width:36px; height:36px; flex:none; border-radius:13px; }
  .chat-header .chat-person { min-width:0; }
  .chat-header .chat-person h2 { font-size:15px; margin-bottom:4px; line-height:20px; }
  .chat-header .chat-person>span { font-size:10px; }
  .chat-header-actions #chat-context { padding:8px; margin:0 0 5px; border-bottom:1px solid var(--line); gap:8px; }
  .chat-header-actions #chat-context .assignment-button { min-height:36px; max-width:100%; }
  .chat-header-actions #chat-context .assignment-button b,.chat-header-actions #chat-context .stage-badge { font-size:11px; }
  .chat-header-actions #chat-context .header-reply-window { width:100%; font-size:11px; }
  .chat-header-actions #show-details { display:flex; align-items:center; justify-content:flex-start; gap:8px; }
  .chat-header-actions #quick-toggle { display:flex; align-items:center; gap:8px; min-height:44px; padding:10px 12px; font-size:13px; color:var(--ink); }
  .chat-header-actions #quick-toggle svg { width:19px; height:19px; }
  .composer { grid-template-columns:30px minmax(0,1fr) 34px 44px; grid-template-areas:"emoji input image action"; }
  .messages { padding-inline:10px; }
}