/* Messenger layout: shared header, two-pane desktop and full-screen mobile chat. */
:root{--bg:#0b141a;--panel:#111b21;--panel-2:#202c33;--panel-3:#2a3942;--line:#26343d;--text:#e9edef;--muted:#8696a0;--soft:#aebac1;--accent:#00a884;--accent-2:#53bdeb;--bubble-in:#202c33;--bubble-out:#005c4b;--rail:66px;--list:360px;--app-header:56px;--chat-canvas:#0b141a}
html[data-theme="light"]{--bg:#f0f2f5;--panel:#fff;--panel-2:#f0f2f5;--panel-3:#e9edef;--line:#e9edef;--text:#111b21;--muted:#667781;--soft:#54656f;--accent:#008069;--accent-2:#027eb5;--bubble-in:#fff;--bubble-out:#d9fdd3;--chat-canvas:#efeae2}
body{font-family:"Segoe UI",Helvetica,Arial,sans-serif}.brand-mark,.brand-mark.small{background:var(--accent);color:#fff;box-shadow:none;border-radius:50%}.app-shell{height:100dvh;padding-top:var(--app-header);grid-template-columns:var(--rail) var(--list) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.app-header{position:fixed;inset:0 0 auto;z-index:150;height:var(--app-header);display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--line);background:var(--panel);gap:14px}.app-heading,.app-header-actions{display:flex;align-items:center;gap:12px;min-width:0}.app-heading strong{font-size:19px;letter-spacing:-.5px}.app-heading .brand-mark{width:30px;height:30px;font-size:17px}.operation-name{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}.app-header-actions{flex-shrink:0;gap:6px}.app-header .icon-btn{border:0;background:transparent;border-radius:50%;height:40px;width:40px}.app-header .icon-btn:hover{background:var(--panel-2)}
.rail{background:var(--panel-2);padding:16px 7px}.rail>.brand-button{display:none}.rail-btn{border-radius:24px;min-height:50px}.rail-btn.active,.rail-btn:hover{background:var(--panel-3);color:var(--text)}.rail-btn small{font-size:9px;font-weight:500;letter-spacing:0}.avatar-button{border-radius:50%}.presence-button{font-size:9px;padding:5px 0}.rail-bottom{gap:20px}
.conversations-pane{min-height:0}.pane-header{height:72px;min-height:72px;padding:18px 24px 12px}.pane-header h2{font-size:25px;font-weight:650;letter-spacing:-.6px}.search-wrap{margin:0 16px 12px;border:0;border-radius:24px;padding:0 18px;gap:17px;min-height:43px}.search-wrap input{font-size:14px;min-width:0;padding:12px 0}.filters{gap:8px;padding:0 16px 14px;flex-shrink:0}.filters button{font-size:13px;font-weight:500;padding:7px 12px;background:var(--panel-2);border:0;min-height:34px}.filters button.active{background:color-mix(in srgb,var(--accent) 20%,var(--panel));color:var(--accent)}
.connection-status{order:4;flex-shrink:0;margin:0;padding:12px 20px;background:var(--panel);border:0;border-top:1px solid var(--line);border-radius:0;font-size:11px}.conversation-list{padding:0;flex:1}.conversation-item{border:0;border-radius:0;padding:12px 20px;grid-template-columns:49px minmax(0,1fr) auto;gap:13px;min-height:78px}.conversation-item.active{border:0;background:var(--panel-3)}.conversation-body{padding:4px 0 12px;border-bottom:1px solid var(--line)}.conversation-avatar,.customer-avatar{border:0;border-radius:50%;background:var(--panel-3);color:var(--soft);font-weight:500}.conversation-avatar{width:49px;height:49px;font-size:17px}.conversation-top strong{font-size:16px;font-weight:500}.conversation-top time{font-size:11px}.conversation-preview{font-size:13px}.empty-list{flex:1;justify-content:center;gap:10px;padding:36px 24px}.empty-list span{font-size:13px;line-height:1.6}.conversation-list:empty{flex:0}.empty-list .empty-icon{font-size:42px;font-weight:300}
.chat-pane,html[data-theme="light"] .chat-pane{background:var(--chat-canvas);min-height:0}.chat-empty{background:var(--bg);border-bottom:5px solid var(--accent)}.chat-empty .brand-mark{width:76px;height:76px;font-size:34px;background:var(--panel-3);color:var(--muted)}.chat-empty h2{font-size:29px;font-weight:300;margin-top:28px}.chat-empty p{font-size:14px}.chat-empty .secondary{border-radius:24px;margin-top:24px;padding:11px 23px;font-size:13px}
.chat-header,html[data-theme="light"] .chat-header{height:64px;min-height:64px;padding:10px 20px;background:var(--panel-2);backdrop-filter:none;flex-shrink:0;border-bottom:0;gap:13px}.customer-avatar{width:42px;height:42px;flex-shrink:0}.chat-title strong{font-size:16px;font-weight:500}.chat-title span{font-size:12px}.chat-header .icon-btn{border:0;background:transparent;border-radius:50%}.assignment-pill{background:transparent;border:0;font-size:11px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.messages{padding:18px clamp(18px,5vw,76px);background-image:radial-gradient(color-mix(in srgb,var(--muted) 7%,transparent) 1px,transparent 1px);background-size:22px 22px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--panel-3) transparent}.message-row{margin:3px 0}.message-bubble{position:relative;max-width:min(76%,640px);border:0;border-radius:0 8px 8px 8px;padding:8px 10px 5px;box-shadow:0 1px 1px #0002}.message-row.out .message-bubble{border-radius:8px 0 8px 8px}.message-text{font-size:14px;line-height:1.5}.message-meta{font-size:10px;margin-top:3px;gap:6px}.message-sender{font-size:11px;color:var(--accent-2)}.date-separator{margin:14px 0}.date-separator span{border:0;border-radius:7px;font-size:11px;padding:6px 12px;color:var(--soft)}.media-card{border-radius:6px;min-width:min(180px,100%)}.media-card img,.media-card video{border-radius:6px;object-fit:contain}.session-notice{font-size:11px;padding:10px 18px;background:var(--panel-2);flex-shrink:0}
.composer,html[data-theme="light"] .composer{background:var(--panel-2);backdrop-filter:none;border:0;padding:10px 16px;flex-shrink:0}.composer-row{align-items:center;gap:5px}.composer-btn,.send-btn{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--soft);flex-shrink:0}.composer-btn:hover{background:var(--panel-3)}.send-btn{background:var(--accent);color:#fff;margin-left:4px}.composer textarea{min-width:0;border:0;background:var(--panel);border-radius:24px;font-size:15px;line-height:1.4;padding:12px 18px}.composer-hint{font-size:9px;margin:6px 0 0 94px}.composer-btn[data-recording="true"]{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}.composer-btn[data-recording="true"] [data-icon]{display:none}.composer-btn[data-recording="true"]:after{content:'';width:14px;height:14px;border-radius:3px;background:var(--danger)}
.attachment-menu{position:absolute;bottom:calc(100% + 8px);left:16px;z-index:25;min-width:215px;max-width:calc(100vw - 32px);padding:8px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px}.attachment-menu button{width:100%;display:flex;align-items:center;gap:16px;text-align:left;border:0;background:transparent;color:var(--text);padding:12px 14px;border-radius:8px;font-size:14px}.attachment-menu button:hover,.attachment-menu button:focus-visible{background:var(--panel-2)}.attachment-menu [data-icon]{color:var(--accent)}
.context-pane{display:none;position:fixed;inset:var(--app-header) 0 0 auto;width:min(350px,100vw);z-index:120;box-shadow:var(--shadow)}.context-pane.open{display:block}.context-pane>header{height:72px}.settings-view{inset:var(--app-header) 0 0 var(--rail)}.settings-header{min-height:72px;flex-shrink:0}.settings-layout{overscroll-behavior:contain}.primary{background:var(--accent);color:#fff;font-weight:600}.secondary{font-weight:500}.toast-stack{top:calc(var(--app-header) + 12px)}
.message-row.in .message-bubble:before{content:'';position:absolute;left:-7px;top:0;border-top:8px solid var(--bubble-in);border-left:8px solid transparent}.message-row.out .message-bubble:before{content:'';position:absolute;right:-7px;top:0;border-top:8px solid var(--bubble-out);border-right:8px solid transparent}
html:not([data-theme="light"]) .primary,html:not([data-theme="light"]) .send-btn{color:#062b23}
@media(max-width:820px){.app-shell.chat-open:has(.settings-view:not(.hidden)) .rail{display:flex}}
@media(min-width:821px) and (max-width:1100px){:root{--list:310px}}
@media(max-width:820px){:root{--app-header:56px}.app-shell{display:block;padding-top:0}.app-header{padding:0 16px}.app-heading{gap:8px}.app-heading strong{font-size:22px;color:var(--accent)}.app-heading .brand-mark{display:none}.operation-name{display:none}.app-header-actions{gap:4px}.pane-header{height:60px;min-height:60px;padding:12px 20px}.pane-header h2{font-size:23px}.conversations-pane,.chat-pane{top:var(--app-header);bottom:calc(64px + env(safe-area-inset-bottom))}.search-wrap{min-height:46px;margin:0 16px 12px}.search-wrap input{font-size:16px}.filters{padding-bottom:12px}.conversation-item{padding:10px 16px;min-height:80px}.rail{height:calc(64px + env(safe-area-inset-bottom));padding:5px 12px calc(5px + env(safe-area-inset-bottom));background:var(--panel)}.rail-nav{gap:4px}.rail-btn{min-width:66px;min-height:48px;padding:5px 16px;gap:3px}.rail-btn small{font-size:11px}.rail-btn.active{background:color-mix(in srgb,var(--accent) 18%,var(--panel));color:var(--accent)}.rail-bottom{margin-left:8px}.app-shell.chat-open .rail{display:none}.app-shell.chat-open .chat-pane{bottom:0}.chat-header,html[data-theme="light"] .chat-header{height:62px;min-height:62px;padding:8px 10px;gap:9px;background:var(--panel)}.chat-title{flex:1}.chat-title strong{font-size:16px}.chat-header-actions{gap:0}.chat-header-actions .assignment-pill{display:none}#mobileBack{font-size:32px;width:28px;padding:0}.messages{padding:12px 14px}.message-bubble{max-width:86%;padding:8px 9px 4px}.message-text{font-size:15px}.composer,html[data-theme="light"] .composer{padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:var(--chat-canvas)}.composer-row{gap:1px}.composer textarea{font-size:16px;padding:11px 12px}.composer-btn,.send-btn{width:36px;height:40px}.send-btn{width:42px;height:42px}.composer-hint{display:none}.settings-view{inset:var(--app-header) 0 calc(64px + env(safe-area-inset-bottom))}.context-pane{top:var(--app-header);bottom:0;max-width:100%}.attachment-menu{left:10px}.queue-action{flex-shrink:0}.toast-stack{left:10px;right:10px}}
.message-delivery{display:inline-flex;align-items:center;min-width:18px}.message-status{display:inline-flex;width:18px;height:14px;color:var(--muted)}.message-status svg{display:block;width:18px;height:14px;overflow:visible}.message-status path,.message-status circle{fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.message-status.status-read{color:#53bdeb}.message-status.status-failed{color:var(--danger)}.message-status.status-waiting,.message-status.status-uncertain{opacity:.9}
.composer-hint{margin:6px 50px 0 94px;line-height:1.45;text-align:left}.emoji-panel{left:16px;bottom:calc(100% + 8px);z-index:26;display:flex;flex-direction:column;width:min(320px,calc(100vw - 32px));max-height:min(360px,58dvh);padding:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 16px 48px #0008}.emoji-panel-header{display:flex;flex-direction:column;gap:2px;padding:13px 14px 10px;border-bottom:1px solid var(--line)}.emoji-panel-header strong{font-size:13px;color:var(--text)}.emoji-panel-header span{font-size:10px;color:var(--muted)}.emoji-panel-content{overflow:auto;padding:7px 9px 10px;scrollbar-width:thin}.emoji-group{margin:0;padding:0}.emoji-group+.emoji-group{margin-top:8px}.emoji-group-title{display:block;padding:5px 4px 6px;color:var(--muted);font-size:9px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.emoji-panel .emoji-grid button{display:grid;place-items:center;min-width:0;height:34px;padding:0;border:0;border-radius:8px;background:transparent;font-size:20px;line-height:1}.emoji-panel .emoji-grid button:hover,.emoji-panel .emoji-grid button:focus-visible{background:var(--panel-2);outline:0}

/* Brand identity, availability and settings controls. These rules intentionally
   stay outside the chat canvas so message sizing and composer controls remain unchanged. */
.operation-identity{display:flex;align-items:center;gap:9px;min-width:0;max-width:42vw;padding:4px 10px 4px 5px;border:1px solid var(--line);border-radius:15px;background:var(--panel-2)}
.operation-logo,.brand-preview{display:grid;place-items:center;flex:0 0 auto;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:50%;background:var(--panel-3);color:var(--accent);font-weight:700;letter-spacing:-.4px}
.operation-logo{width:34px;height:34px;font-size:11px}.operation-logo img,.brand-preview img,.profile-logo img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:auto}.operation-identity-copy{display:flex;align-items:center;gap:8px;min-width:0}.operation-identity-copy>strong{max-width:19vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text)}
.operation-identity .presence-button{display:inline-flex;align-items:center;gap:4px;padding:3px 0;border:0;background:transparent;color:var(--muted);font-size:10px;white-space:nowrap}.operation-identity .presence-button i{width:6px;height:6px;border-radius:50%;background:var(--accent)}.operation-identity .presence-button.off i{background:var(--muted)}.operation-identity .presence-button:hover{color:var(--text)}
.avatar-button{display:grid;place-items:center;padding:0;overflow:hidden}.profile-logo{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:inherit;background:var(--panel-3);color:var(--accent);font-size:10px;font-weight:700}
.settings-layout{grid-template-columns:minmax(190px,220px) minmax(0,860px);justify-content:start;width:100%;max-width:1160px;gap:22px;align-items:start;padding:24px 32px 56px 18px}.settings-tabs{top:18px;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--panel-2);box-shadow:0 10px 30px #0002}.settings-nav-label{display:block;padding:12px 12px 5px;color:var(--muted);font-size:9px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.settings-nav-label:first-child{padding-top:5px}.settings-tabs button{min-height:40px;padding:9px 13px;border:1px solid transparent;border-radius:10px;font-size:13px;font-weight:650;transition:background .18s,border-color .18s,color .18s}.settings-tabs button.active{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--text)}.settings-tabs button:hover{background:var(--panel-3)}.settings-content{width:100%;max-width:860px}.settings-section h3{font-size:20px}.settings-section>p{font-size:13px;line-height:1.75}.setting-row strong{font-size:14px}.setting-row span{font-size:12px}.organization-branding .section-heading{align-items:center}.brand-preview{width:58px;height:58px;font-size:16px}.branding-actions{justify-content:flex-start}.branding-actions button{min-height:42px}.logo-editor{margin-top:18px;padding:16px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:16px;background:var(--panel-2)}.logo-editor-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}.logo-editor-heading>div{display:flex;flex-direction:column;gap:4px}.logo-editor-heading strong{font-size:14px}.logo-editor-heading span{font-size:12px;color:var(--muted)}.logo-editor-heading>#logoZoomValue{color:var(--accent);font-weight:700}.logo-crop-stage{position:relative;width:min(100%,300px);aspect-ratio:1;margin:0 auto;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:repeating-conic-gradient(color-mix(in srgb,var(--panel-3) 60%,transparent) 0 25%,transparent 0 50%) 50%/20px 20px;touch-action:none;cursor:grab}.logo-crop-stage:after{content:'';position:absolute;inset:0;border:2px solid color-mix(in srgb,#fff 80%,var(--accent));border-radius:16px;box-shadow:0 0 0 999px #0004;pointer-events:none}.logo-crop-stage:active{cursor:grabbing}.logo-crop-image{position:absolute;left:50%;top:50%;max-width:none;user-select:none;pointer-events:none;transform-origin:center center}.logo-zoom{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:12px;color:var(--muted)}.logo-zoom input{flex:1;min-width:0}.member-schedule-box{padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}.schedule-heading{margin-bottom:12px}.schedule-heading div{display:flex;flex-direction:column;gap:4px}.schedule-heading strong{font-size:14px}.schedule-heading span{font-size:12px;color:var(--muted);line-height:1.6}.schedule-fields{display:grid;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.schedule-times{margin-top:0}.weekday-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}.day-choice{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.day-choice input{position:absolute;opacity:0;pointer-events:none}.day-choice span{min-width:37px;padding:8px 7px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);font-size:11px;text-align:center}.day-choice input:checked+span{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 16%,var(--panel));color:var(--text)}.schedule-chip{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}.team-row{grid-template-columns:minmax(170px,1.4fr) 100px minmax(135px,1.1fr) 94px 105px;gap:12px}.team-row .schedule-chip{line-height:1.4}.team-row .compact{font-size:11px;padding:8px 10px;min-height:36px}
@media(max-width:1100px){.operation-identity{max-width:48vw}.operation-identity-copy>strong{max-width:16vw}.team-row{grid-template-columns:minmax(150px,1.3fr) 90px minmax(120px,1fr) 84px}.team-row>:last-child{grid-column:4}.settings-layout{grid-template-columns:190px minmax(0,1fr)}}
@media(max-width:820px){.app-header{padding:0 10px;gap:6px}.app-heading{gap:7px}.app-heading strong{font-size:20px}.app-header-actions{gap:3px}.operation-identity{max-width:calc(100vw - 126px);padding:3px 7px 3px 4px;gap:6px}.operation-logo{width:30px;height:30px}.operation-identity-copy{gap:5px}.operation-identity-copy>strong{max-width:28vw;font-size:11px}.operation-identity .presence-button{font-size:9px}.settings-layout{display:block;max-width:none;padding:16px}.settings-tabs{position:static;display:flex;gap:4px;overflow-x:auto;margin-bottom:16px;padding:6px}.settings-nav-label{display:none!important}.settings-tabs button{min-height:40px;white-space:nowrap;font-size:12px}.settings-content{max-width:none}.settings-section h3{font-size:19px}.team-row{grid-template-columns:minmax(0,1fr) auto;gap:9px}.team-row .team-person{grid-row:1/4}.team-row .schedule-chip{grid-column:2;grid-row:2;max-width:48vw}.team-row .status-chip{grid-column:2;grid-row:3}.team-row>:last-child{grid-column:2;grid-row:4;justify-self:end}.branding-actions{justify-content:stretch}.branding-actions button{flex:1}.brand-preview{width:52px;height:52px}.logo-crop-stage{width:min(100%,280px)}.emoji-panel{left:8px;width:min(320px,calc(100vw - 16px));max-height:48dvh}}
@media(max-width:420px){.operation-identity-copy>strong{max-width:25vw}.operation-identity .presence-button span{display:none}.settings-layout{padding:12px}.settings-section{padding:17px}.branding-actions{display:grid;grid-template-columns:1fr 1fr}.branding-actions #saveCompany{grid-column:1/-1}.member-schedule-box{padding:12px}.day-choice span{min-width:34px;padding:7px 5px}}