:root{--primary:#0084ff;--bg:#f0f2f5;--panel:#fff;--panel2:#f7f8fa;--text:#050505;--muted:#65676b;--line:#e4e6eb;--bubble-in:#e4e6eb;--bubble-out:#0084ff;--bubble-out-text:#fff;--hover:#f2f3f5;--selected:#e7f3ff;--danger:#d92d20;--shadow:0 12px 40px rgba(0,0,0,.18);--app-height:100dvh;--app-top:0px;--details-width:340px;font-family:Arial,Helvetica,sans-serif;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1113;--panel:#18191a;--panel2:#242526;--text:#e4e6eb;--muted:#b0b3b8;--line:#3a3b3c;--bubble-in:#3a3b3c;--hover:#2d2f31;--selected:#263b55;--shadow:0 12px 40px rgba(0,0,0,.55);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0f1113;--panel:#18191a;--panel2:#242526;--text:#e4e6eb;--muted:#b0b3b8;--line:#3a3b3c;--bubble-in:#3a3b3c;--hover:#2d2f31;--selected:#263b55;--shadow:0 12px 40px rgba(0,0,0,.55);color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text)}button,input,textarea,select{font:inherit;color:inherit}button,select,input,textarea{border:1px solid var(--line);background:var(--panel);border-radius:10px}button{cursor:pointer;min-height:38px;padding:8px 12px}button:hover{background:var(--hover)}button:disabled{opacity:.48;cursor:not-allowed}.hidden{display:none!important}.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}.icon-button,.composer-button,.send-button{display:grid;place-items:center;padding:0;border-radius:50%;flex:none}.icon-button{width:40px;height:40px}.icon-button svg,.composer-button svg,.send-button svg,.search-wrap svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.fill{fill:currentColor;stroke:none}.primary-button,.send-button{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:700}.send-button{width:40px;height:40px}.tap-button.clicked{animation:tapPulse .2s ease}@keyframes tapPulse{50%{transform:scale(.86)}}.spinner{width:18px;height:18px;border:2px solid color-mix(in srgb,var(--primary),transparent 70%);border-top-color:var(--primary);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.login-screen{height:100%;display:grid;place-items:center;padding:24px}.login-card{width:min(420px,100%);display:grid;gap:12px;padding:26px;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.login-card h1{margin:0 0 8px}.login-card input{padding:13px}.error-text{color:var(--danger);min-height:1.2em;margin:0}
.staff-app{position:fixed;top:var(--app-top);left:0;width:100vw;height:var(--app-height);display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:var(--bg);overflow:hidden}.staff-app.details-open{grid-template-columns:300px minmax(0,1fr) var(--details-width)}
.sidebar,.conversation-pane,.details-panel,.empty-state{min-width:0;min-height:0;background:var(--panel)}.sidebar{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;border-right:1px solid var(--line);overflow:hidden}.sidebar-header,.conversation-header,.details-panel>header{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);min-height:62px}.sidebar-header>div,.header-copy{display:grid;min-width:0;flex:1}.sidebar-header small,.header-copy span{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar{display:grid;gap:8px;padding:10px;border-bottom:1px solid var(--line)}.search-wrap{position:relative}.search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);width:18px}.search-wrap input{width:100%;padding:11px 10px 11px 34px}.filter-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}.filter-row select,#labelFilter{min-width:0;padding:8px 5px;width:100%}.conversation-list{overflow:auto;overscroll-behavior:contain}.conversation-card{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:9px;padding:10px 10px;border-bottom:1px solid var(--line);cursor:pointer;min-height:70px;background:var(--panel)}.conversation-card:hover{background:var(--hover)}.conversation-card.active{background:var(--selected);color:var(--text)}.conversation-card.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary)}.avatar,.header-avatar{position:relative;border-radius:50%;display:grid;place-items:center;background:#dbeafe;color:#0759bd;font-weight:700;overflow:visible}.avatar{width:42px;height:42px}.header-avatar{width:42px;height:42px}.avatar img,.header-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.online-dot{position:absolute;right:-1px;bottom:1px;width:12px;height:12px;border:2px solid var(--panel);border-radius:50%;background:#31a24c}.conversation-copy{display:grid;align-content:center;gap:3px;min-width:0}.conversation-copy strong,.conversation-copy>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-copy>span{font-size:13px;color:var(--muted)}.typing-preview{color:var(--primary)!important;font-style:italic}.label-mini{display:flex;gap:3px;overflow:hidden}.label-mini i{font-style:normal;font-size:10px;padding:1px 5px;border-radius:999px;color:#fff;white-space:nowrap}.conversation-side{text-align:right;font-size:10px;color:var(--muted);white-space:nowrap}.unread{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-top:6px;border-radius:999px;background:var(--primary);color:#fff;font-size:11px;font-weight:700}.sidebar-footer{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border-top:1px solid var(--line)}
.empty-state{display:grid;place-items:center;color:var(--muted)}.conversation-pane{display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}.conversation-header{padding:8px 12px}.mobile-back{display:none}.header-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;align-items:center;gap:6px}.header-actions select{padding:8px;min-width:88px}.pane-tabs{display:flex;border-bottom:1px solid var(--line);padding:0 10px}.pane-tabs button{border:0;border-radius:0;background:transparent;padding:12px 18px;color:var(--muted);min-height:42px}.pane-tabs button.active{color:var(--primary);border-bottom:3px solid var(--primary);font-weight:700}.pane{display:none;min-height:0;overflow:hidden}.pane.active{display:flex;flex-direction:column}.message-list{flex:1;min-height:0;overflow:auto;padding:12px 14px 8px;overscroll-behavior:contain;scrollbar-gutter:stable}.message-row{position:relative;display:flex;flex-direction:column;width:100%;padding:3px 0;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;--swipe-x:0px}.message-row .bubble,.message-row .reply-preview,.message-row .reaction-bar,.message-row .message-meta,.message-row .delivery-status,.message-row .pin-mark{transform:translateX(var(--swipe-x));transition:transform .16s ease}.message-row.swiping .bubble,.message-row.swiping .reply-preview,.message-row.swiping .reaction-bar,.message-row.swiping .message-meta,.message-row.swiping .delivery-status,.message-row.swiping .pin-mark{transition:none}.message-row.employee,.message-row.system{align-items:flex-end}.message-row.customer{align-items:flex-start}.swipe-reply-cue{position:absolute;top:50%;left:8px;transform:translateY(-50%) scale(.5);opacity:0;color:var(--primary);font-size:22px;transition:.15s}.message-row.swiping .swipe-reply-cue{opacity:1;transform:translateY(-50%) scale(1)}.bubble{max-width:min(70%,720px);padding:9px 13px;border-radius:18px;line-height:1.35;overflow-wrap:anywhere;background:var(--bubble-in)}.employee .bubble,.system .bubble{background:var(--bubble-out);color:var(--bubble-out-text)}.message-row.deleted:not(.owner-visible) .bubble{font-style:italic;color:var(--muted)}.deleted-badge{font-size:10px;color:var(--danger);margin:2px 8px}.reply-preview{max-width:min(66%,680px);padding:5px 10px;margin-bottom:2px;border:0;border-left:3px solid var(--primary);background:color-mix(in srgb,var(--bubble-in),transparent 20%);color:var(--muted);font-size:12px;text-align:left}.message-meta{font-size:10px;color:var(--muted);margin:3px 8px}.reaction-bar{display:flex;gap:3px;margin:-5px 8px 0;z-index:1}.reaction-chip{min-height:24px;padding:2px 7px;border-radius:999px;background:var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.18);font-size:13px}.pin-mark{font-size:10px;color:var(--muted);margin:2px 8px}.delivery-status{height:19px;display:flex;align-items:center;justify-content:flex-end;margin:0 7px}.delivery-status svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.7}.delivery-status .delivered-circle .status-fill{fill:var(--muted);stroke:var(--muted)}.receipt-avatar{width:17px;height:17px;border-radius:50%;object-fit:cover;border:1px solid var(--panel)}.receipt-avatar.generic{display:grid;place-items:center;background:#dbeafe;color:#0759bd;font-size:9px;font-weight:bold}.attachment-media{display:block;max-width:min(360px,58vw);max-height:360px;border-radius:13px;object-fit:cover}.attachment-link{border:0;background:transparent;padding:0;min-height:0}.attachments{display:grid;gap:5px}.attachment{color:inherit;display:block;padding:5px 0;max-width:360px;overflow-wrap:anywhere}.highlight{animation:messageFlash 1.8s ease}@keyframes messageFlash{0%,100%{filter:none;transform:scale(1)}35%{filter:brightness(1.35);transform:scale(1.025);box-shadow:0 0 0 8px color-mix(in srgb,var(--primary),transparent 70%)}}
.edge-loader{display:flex;justify-content:center;align-items:center;gap:8px;padding:7px;color:var(--primary);font-size:13px}.edge-loader button{border:0;background:transparent;color:var(--primary);min-height:0;padding:4px}.bottom-refresh{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);z-index:10}.typing-indicator{display:flex;align-items:center;gap:8px;padding:5px 14px 7px;color:var(--muted);font-size:12px}.typing-dots{display:flex;gap:3px;padding:7px 10px;background:var(--bubble-in);border-radius:999px}.typing-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typingBounce 1.1s infinite}.typing-dots i:nth-child(2){animation-delay:.16s}.typing-dots i:nth-child(3){animation-delay:.32s}@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}.reply-bar{display:flex;align-items:center;gap:8px;padding:7px 12px;border-top:1px solid var(--line);background:var(--panel2);font-size:12px}.reply-bar span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-bar button{min-height:28px;padding:2px 8px;border:0;background:transparent}.composer{display:flex;align-items:flex-end;gap:5px;padding:8px 9px max(8px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--panel);z-index:20}.composer-button{width:38px;height:38px;border:0;color:var(--primary);background:color-mix(in srgb,var(--primary),transparent 91%)}.composer textarea{flex:1;min-width:0;max-height:118px;resize:none;padding:10px 13px;border-radius:22px;background:var(--panel2);line-height:20px}.emoji-picker{position:absolute;right:55px;bottom:62px;z-index:50;width:min(360px,calc(100% - 20px));max-height:270px;overflow:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.emoji-picker button{font-size:22px;border:0;background:transparent;padding:5px;min-height:36px}.upload-queue{display:grid;gap:5px;padding:6px 10px;border-top:1px solid var(--line);max-height:190px;overflow:auto}.upload-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px;background:var(--panel2);border-radius:10px}.upload-preview{width:44px;height:44px;object-fit:cover;border-radius:8px;background:var(--line);display:grid;place-items:center}.upload-copy{display:grid;gap:3px}.progress{height:5px;border-radius:999px;background:var(--line);overflow:hidden}.progress i{display:block;height:100%;background:var(--primary);width:0}.recording-panel{display:flex;align-items:center;gap:8px;padding:8px;border-top:1px solid var(--line);background:var(--panel)}.recording-panel canvas{flex:1;min-width:0;height:42px}.record-cancel{color:var(--danger)}.record-send{background:var(--primary);color:#fff}
.details-panel{border-left:1px solid var(--line);overflow:auto;display:block}.details-panel>header{position:sticky;top:0;background:var(--panel);z-index:2}.details-panel section,.details-panel>#detailsBody{padding:12px;border-bottom:1px solid var(--line)}.details-panel h3{margin:0 0 10px;font-size:14px}.details-panel p{margin:6px 0;font-size:13px;overflow-wrap:anywhere}.details-panel section>button,.details-panel section>input{width:100%;margin:4px 0}.assigned-label{display:flex;align-items:center;gap:5px;margin:4px 0;padding:4px 6px;border-radius:8px;background:var(--panel2)}.assigned-label span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.assigned-label button{width:22px;height:22px;min-height:22px;padding:0;border:0;border-radius:50%;font-size:13px}.label-combobox{position:relative}.label-combobox input{width:100%;padding:10px}.suggestion-list{position:absolute;left:0;right:0;top:calc(100% + 3px);max-height:220px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:20}.suggestion-list button{width:100%;border:0;border-radius:0;text-align:left}.note-form{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:10px;border-bottom:1px solid var(--line)}.note-form textarea{min-height:68px;padding:10px;resize:vertical}.note-heading{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}.note-list{overflow:auto;padding:0 10px 10px}.note-card{padding:10px;margin:7px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}.note-card header{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.media-filter{display:flex;gap:5px;padding:8px;border-bottom:1px solid var(--line)}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:10px;overflow:auto}.media-card{min-width:0;border:1px solid var(--line);border-radius:12px;padding:7px;background:var(--panel2)}.media-card img,.media-card video{width:100%;height:130px;object-fit:cover;border-radius:8px}
.sidebar-footer button,.details-panel button,.dialog-actions button{background:var(--panel)}
dialog{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:0;width:min(520px,calc(100vw - 24px));max-height:min(88dvh,840px)}dialog::backdrop{background:rgba(0,0,0,.5)}dialog>header{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--line)}dialog>header button{border:0;background:transparent;font-size:22px;padding:2px 7px;min-height:30px}dialog form,.dialog-actions{display:grid;gap:10px;padding:14px}dialog input,dialog textarea,dialog select{width:100%;padding:11px}dialog textarea{min-height:110px;resize:vertical}.wide-dialog{width:min(860px,calc(100vw - 24px))}.action-sheet{width:min(460px,calc(100vw - 18px));padding:10px;position:fixed;inset:auto 0 max(8px,env(safe-area-inset-bottom)) 0;margin:auto}.action-sheet>button{display:block;width:100%;border:0;text-align:left;background:transparent}.quick-reactions{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:4px}.quick-reactions button{font-size:24px;border-radius:50%;padding:5px}.selectable-message{padding:16px;white-space:pre-wrap;user-select:text;-webkit-user-select:text}.dialog-wide-button{width:calc(100% - 28px);margin:0 14px 14px}.search-results{padding:10px;overflow:auto;max-height:70dvh}.search-result{display:block;width:100%;text-align:left;padding:10px;margin:5px 0;background:var(--panel2);border:1px solid var(--line);border-radius:10px}.info-list{padding:14px}.info-list p{margin:8px 0}.employee-create-form{grid-template-columns:1fr 1.3fr 1.3fr .8fr auto;align-items:end}.employee-list{padding:10px;overflow:auto}.employee-card{display:grid;grid-template-columns:1fr 1.3fr .7fr 1fr;gap:7px;padding:8px;border-bottom:1px solid var(--line)}.employee-actions{display:flex;gap:4px;grid-column:1/-1}.image-viewer{width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;background:rgba(0,0,0,.96);color:#fff}.viewer-stage{position:absolute;inset:50px 60px 58px;display:grid;place-items:center;overflow:auto}.viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center}.viewer-close,.viewer-arrow{position:absolute;z-index:2;background:rgba(255,255,255,.15);color:#fff;border:0}.viewer-close{right:14px;top:12px;width:40px;height:40px}.viewer-arrow{top:50%;font-size:38px;width:45px;height:60px}.viewer-prev{left:9px}.viewer-next{right:9px}.viewer-toolbar{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:12px}.viewer-toolbar a,.viewer-toolbar button{color:#fff;background:rgba(255,255,255,.15);border:0;padding:8px 13px;border-radius:9px}.viewer-copied{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:#fff;color:#111;padding:7px 12px;border-radius:999px}.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:999;background:#111;color:#fff;padding:9px 14px;border-radius:999px;box-shadow:var(--shadow);max-width:min(90vw,600px);text-align:center}
@media(max-width:1180px){.staff-app.details-open{grid-template-columns:290px minmax(0,1fr)}.details-panel{position:fixed;right:0;top:var(--app-top);height:var(--app-height);width:min(var(--details-width),92vw);z-index:70;box-shadow:var(--shadow)}}
@media(max-width:760px){.staff-app,.staff-app.details-open{grid-template-columns:1fr}.sidebar{grid-column:1}.conversation-pane,.empty-state{grid-column:1;position:absolute;inset:0;z-index:20}.conversation-pane.hidden,.empty-state.hidden{display:none}.mobile-back{display:grid}.header-actions #claimButton,.header-actions select{display:none}.conversation-header{padding:6px}.pane-tabs button{flex:1;padding:10px 4px}.composer{gap:3px}.composer-button{width:34px;height:34px}.send-button{width:36px;height:36px}.bubble{max-width:82%}.employee-create-form,.employee-card{grid-template-columns:1fr}.filter-row{grid-template-columns:1fr 1fr}.filter-row select:last-child{grid-column:1/-1}.note-form{grid-template-columns:1fr}.viewer-stage{inset:50px 8px 58px}.viewer-arrow{display:none}}

.message-row .bubble,.reaction-chip,.quick-reactions{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
.selectable-message,.selectable-message *{-webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important}

/* 20260726c stability and desktop/mobile interaction fixes */
.older-arrows{font-size:23px;line-height:1;color:var(--primary);animation:olderNudge 1.2s ease-in-out infinite}
@keyframes olderNudge{0%,100%{transform:translateY(2px);opacity:.55}50%{transform:translateY(-2px);opacity:1}}
.hover-reply-button{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:30px;height:30px;min-height:30px;padding:0;border:0;border-radius:50%;background:var(--panel2);color:var(--primary);box-shadow:0 1px 4px rgba(0,0,0,.16)}
.message-row .bubble{position:relative}
.message-row.employee .hover-reply-button,.message-row.system .hover-reply-button{right:100%;left:auto;margin-right:8px}
.message-row.customer .hover-reply-button{left:100%;right:auto;margin-left:8px}
@media(hover:hover) and (pointer:fine){
  .message-row:hover .hover-reply-button{display:grid;place-items:center}
  .swipe-reply-cue{display:none!important}
  .message-row .bubble,.message-row .reply-preview,.message-row .reaction-bar,.message-row .message-meta,.message-row .delivery-status,.message-row .pin-mark{transform:none!important}
}
.message-list{overflow-x:hidden!important;scrollbar-gutter:auto}
.message-row{overflow:visible;contain:layout style}
.highlight{animation:messageFlash 5.4s ease!important}
.urgent-button{color:#fff!important;background:#d92d20!important;border-color:#d92d20!important;font-weight:700}
.profile-preview{width:76px;height:76px;border-radius:50%;object-fit:cover;border:2px solid var(--line)}
.profile-preview.placeholder{display:grid;place-items:center;background:var(--panel2);color:var(--muted);font-size:12px}
.image-viewer[open]{display:block}.viewer-stage img{will-change:transform;image-rendering:auto}
@media(max-width:760px){
  .staff-app,.staff-app.details-open{display:block;position:fixed;inset:var(--app-top) 0 auto;height:var(--app-height)}
  .sidebar{position:absolute;inset:0;display:grid;z-index:10}
  .conversation-pane{position:absolute;inset:0;z-index:20}
  .details-panel{position:absolute;inset:0;width:100%;height:100%;z-index:40;border:0}
  .empty-state{display:none!important}
  .staff-app:not(.conversation-mobile-open) .conversation-pane{display:none!important}
  .staff-app.conversation-mobile-open .sidebar{display:none!important}
  .details-panel.hidden{display:none!important}
  .mobile-back{display:grid!important}
  .conversation-header{min-height:58px}
  .header-copy span{max-width:48vw}
}

/* Chat fits phones narrower than ~410px. .conversation-pane is a grid that only
   declared its ROWS, so its single implicit column sized to content max-content
   (~410px); on a sub-410px phone that column overflowed the pane and, with the
   pane's overflow:hidden + no page scroll, the right side of the whole chat was
   clipped and unreachable. Pin the column to the pane width so children fit, and
   let the tab row scroll instead of clipping the status control off the edge. */
.conversation-pane{grid-template-columns:minmax(0,1fr)}
.pane-tabs{overflow-x:auto;scrollbar-width:none}
.pane-tabs::-webkit-scrollbar{display:none}
/* On phones, slim the emoji tab buttons (their 18px side-padding was the fat) so
   the whole row — including the status dropdown at the end — fits ~360px+ without
   a sideways scroll. Match button[data-pane] to beat the base padding rule. */
@media(max-width:760px){.conversation-pane .pane-tabs button[data-pane]{padding-left:8px;padding-right:8px}}

/* 20260726g stability and data-correctness fixes */
.message-row .bubble{user-select:text!important;-webkit-user-select:text!important;-webkit-touch-callout:default!important}
.message-row.deleted-employee .bubble{opacity:.72;border:1px dashed var(--muted)}
/* Optimistic send: the bubble shows instantly at reduced opacity, then solidifies
   the moment the server row reconciles it — so sending feels immediate on a slow link. */
.message-row{transition:opacity .18s ease}
.message-row.pending{opacity:.5}
.message-row.deleted-employee::after{content:"Deleted";font-size:10px;color:var(--muted);margin:1px 9px}
.conversation-card.unread-card{background:color-mix(in srgb,var(--primary) 13%,var(--panel));border-left:4px solid var(--primary)}
.conversation-card.unread-card.active{background:color-mix(in srgb,var(--primary) 24%,var(--panel))}
.bottom-refresh{min-width:38px;min-height:38px;padding:10px;border-radius:50%}
.viewer-stage{overflow:hidden}.viewer-stage img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;transform:scale(1);transition:transform .12s ease;will-change:auto}
.viewer-toolbar{flex-wrap:wrap}.viewer-toolbar button,.viewer-toolbar a{min-width:38px}
.employee-login-link{width:100%;min-height:70px;resize:vertical}

.clickable-avatar{cursor:zoom-in}

/* 20260726h layout, themes, unread, media fit, and management controls */
:root{--sidebar-width:300px;--details-width:340px;--unread-bg:rgba(220,38,38,.085);--unread-border:#dc2626}
.staff-app{grid-template-columns:var(--sidebar-width) minmax(0,1fr)!important;position:fixed}.staff-app.details-open{grid-template-columns:var(--sidebar-width) minmax(0,1fr) var(--details-width)!important}
.column-resizer{position:fixed;top:var(--app-top);height:var(--app-height);width:8px;z-index:80;cursor:col-resize;background:transparent;touch-action:none}.column-resizer:hover,.column-resizer.dragging{background:color-mix(in srgb,var(--primary) 30%,transparent)}.left-resizer{left:calc(var(--sidebar-width) - 4px)}.right-resizer{right:calc(var(--details-width) - 4px)}.staff-app:not(.details-open) .right-resizer{display:none}
.conversation-card.unread-card{background:var(--unread-bg)!important;border-left:4px solid var(--unread-border)!important}.conversation-card.unread-card.active{background:var(--selected)!important;border-left-color:var(--primary)!important}.conversation-card.active:not(.unread-card){background:var(--selected)!important}
.scroll-latest{position:absolute;right:18px;bottom:72px;z-index:20;width:42px;height:42px;border:0;border-radius:50%;background:var(--primary);color:#fff;font-size:25px;box-shadow:0 6px 18px rgba(0,0,0,.25);display:grid;place-items:center}
.danger-button{background:var(--danger)!important;color:#fff!important;border-color:var(--danger)!important;font-weight:700}.owner-selection-toggle{position:absolute;left:5px;top:5px;z-index:7;width:19px;height:19px;accent-color:var(--danger)}.message-row.selected-for-delete{outline:2px solid var(--danger);outline-offset:2px;border-radius:12px}.deleted-badge{cursor:pointer;text-decoration:underline;text-decoration-style:dotted}
.viewer-stage{overflow:auto!important;display:flex!important;align-items:center!important;justify-content:center!important}.viewer-stage img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;transform-origin:center center!important}.image-viewer[open]{display:block!important}
.media-card{cursor:pointer}.media-card .jump-media{width:100%;margin-top:6px;min-height:30px;padding:4px 7px}
.announcement-card.expired{border-color:#ef4444;background:color-mix(in srgb,#ef4444 8%,var(--panel))}.announcement-card.expired strong::after{content:"Expired";display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;background:#dc2626;color:#fff;font-size:10px}.typing-live-draft{display:block;max-width:520px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--primary);font-weight:600}
.referral-summary{padding:8px;border-radius:10px;background:var(--panel2);margin-top:6px}.referral-summary button{width:100%;margin-top:5px}.installed-yes{color:#15803d}.installed-no{color:var(--muted)}

:root[data-style-theme="messenger"]{--primary:#0084ff;--bg:#f0f2f5;--panel:#fff;--panel2:#f7f8fa;--text:#050505;--muted:#65676b;--line:#e4e6eb;--bubble-in:#e4e6eb;--bubble-out:#0084ff;--bubble-out-text:#fff;--hover:#f2f3f5;--selected:#dcecff;color-scheme:light}
:root[data-style-theme="business"]{--primary:#155e75;--bg:#e9f0f2;--panel:#fff;--panel2:#f1f6f7;--text:#102a33;--muted:#60757d;--line:#cbd9dd;--bubble-in:#e3edf0;--bubble-out:#155e75;--bubble-out-text:#fff;--hover:#e7f0f2;--selected:#d6eef3;color-scheme:light}
:root[data-style-theme="midnight"]{--primary:#6ea8ff;--bg:#090d16;--panel:#101827;--panel2:#182236;--text:#eff6ff;--muted:#a6b4c7;--line:#263349;--bubble-in:#243044;--bubble-out:#245fc7;--bubble-out-text:#fff;--hover:#1c2940;--selected:#243e63;color-scheme:dark}
:root[data-style-theme="cute"]{--primary:#e8579a;--bg:#fff1f8;--panel:#fffafd;--panel2:#fff0f7;--text:#51233a;--muted:#91677c;--line:#f3cfe1;--bubble-in:#fde8f2;--bubble-out:#e8579a;--bubble-out-text:#fff;--hover:#fdeaf3;--selected:#ffdced;color-scheme:light}
:root[data-style-theme="warm"]{--primary:#d97706;--bg:#fff5e8;--panel:#fffdf8;--panel2:#fff5e6;--text:#442914;--muted:#8a6a50;--line:#ecd8bf;--bubble-in:#f5e6d2;--bubble-out:#d97706;--bubble-out-text:#fff;--hover:#faecd9;--selected:#ffe3bd;color-scheme:light}
@media(max-width:1180px){.staff-app.details-open{grid-template-columns:var(--sidebar-width) minmax(0,1fr)!important}.column-resizer.right-resizer{display:none}}
@media(max-width:760px){.column-resizer{display:none!important}.staff-app,.staff-app.details-open{display:block!important}.scroll-latest{right:13px;bottom:70px}}

/* 20260726h-final: deterministic image fit and selectable desktop text */
.viewer-stage{position:absolute!important;inset:50px 60px 64px!important;overflow:hidden!important;display:block!important;padding:0!important}
.viewer-stage img{position:absolute!important;inset:0!important;margin:auto!important;display:block!important;width:auto!important;height:auto!important;max-width:calc(100% - 16px)!important;max-height:calc(100% - 16px)!important;object-fit:contain!important;transform-origin:center center!important}
.message-row .bubble{user-select:text!important;-webkit-user-select:text!important;-webkit-touch-callout:default!important}
@media(max-width:760px){.viewer-stage{inset:50px 8px 64px!important}}

/* 20260727b selection, composer attachments, and full theme geometry */
:root{
  --bubble-radius-in:18px 18px 18px 6px;
  --bubble-radius-out:18px 18px 6px 18px;
  --composer-radius:22px;
  --control-radius:10px;
  --message-gap:3px;
  --theme-font:Arial,Helvetica,sans-serif;
}
body{font-family:var(--theme-font)}
.message-row{padding-top:var(--message-gap);padding-bottom:var(--message-gap)}
.message-row.customer .bubble{border-radius:var(--bubble-radius-in)}
.message-row.employee .bubble,.message-row.system .bubble{border-radius:var(--bubble-radius-out)}
.composer textarea{border-radius:var(--composer-radius)}
button,input,textarea,select,dialog{border-radius:var(--control-radius)}
.message-list.selection-mode .message-row{padding-left:34px}
.owner-selection-toggle{position:absolute!important;left:7px!important;top:50%!important;transform:translateY(-50%)!important;width:19px!important;height:19px!important;margin:0!important;z-index:8!important;accent-color:var(--danger)}
.composer.drag-active{outline:2px dashed var(--primary);outline-offset:-4px;background:color-mix(in srgb,var(--primary) 8%,var(--panel))}
.emoji-picker{position:fixed!important;right:10px!important;bottom:auto!important;z-index:300!important}

:root[data-style-theme="messenger"]{--bubble-radius-in:18px 18px 18px 5px;--bubble-radius-out:18px 18px 5px 18px;--composer-radius:22px;--control-radius:10px;--message-gap:3px;--theme-font:Arial,Helvetica,sans-serif}
:root[data-style-theme="business"]{--bubble-radius-in:8px;--bubble-radius-out:8px;--composer-radius:7px;--control-radius:6px;--message-gap:5px;--theme-font:Inter,Arial,Helvetica,sans-serif}
:root[data-style-theme="midnight"]{--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:14px;--control-radius:12px;--message-gap:4px;--theme-font:system-ui,-apple-system,"Segoe UI",sans-serif}
:root[data-style-theme="cute"]{--bubble-radius-in:25px 25px 25px 8px;--bubble-radius-out:25px 25px 8px 25px;--composer-radius:28px;--control-radius:18px;--message-gap:7px;--theme-font:"Trebuchet MS",Arial,sans-serif}
:root[data-style-theme="warm"]{--bubble-radius-in:14px 14px 14px 2px;--bubble-radius-out:14px 14px 2px 14px;--composer-radius:10px;--control-radius:8px;--message-gap:6px;--theme-font:Georgia,"Times New Roman",serif}

:root[data-style-theme="messenger"][data-color-mode="light"]{--bg:#f0f2f5;--panel:#fff;--panel2:#f7f8fa;--text:#050505;--muted:#65676b;--line:#e4e6eb;--bubble-in:#e4e6eb;--hover:#f2f3f5;--selected:#dcecff;color-scheme:light}
:root[data-style-theme="messenger"][data-color-mode="dark"]{--bg:#0f1113;--panel:#18191a;--panel2:#242526;--text:#e4e6eb;--muted:#b0b3b8;--line:#3a3b3c;--bubble-in:#3a3b3c;--hover:#2d2f31;--selected:#263b55;color-scheme:dark}
@media(prefers-color-scheme:dark){:root[data-style-theme="messenger"][data-color-mode="system"]{--bg:#0f1113;--panel:#18191a;--panel2:#242526;--text:#e4e6eb;--muted:#b0b3b8;--line:#3a3b3c;--bubble-in:#3a3b3c;--hover:#2d2f31;--selected:#263b55;color-scheme:dark}}


/* 20260727e pannable image viewer and expanded staff themes */
.viewer-stage{position:absolute!important;inset:50px 60px 64px!important;overflow:hidden!important;display:block!important;touch-action:none!important;cursor:zoom-in;user-select:none;-webkit-user-select:none}
.viewer-stage.zoomed{cursor:grab}.viewer-stage.zoomed:active{cursor:grabbing}
.viewer-stage img{position:absolute!important;inset:0!important;margin:auto!important;display:block!important;width:auto!important;height:auto!important;max-width:calc(100% - 16px)!important;max-height:calc(100% - 16px)!important;object-fit:contain!important;transform-origin:center center!important;will-change:transform;user-select:none;-webkit-user-drag:none}
@media(max-width:760px){.viewer-stage{inset:50px 8px 64px!important}}

:root[data-style-theme="ocean"]{--primary:#087ea4;--bg:#e8f8fc;--panel:#f8fdff;--panel2:#eaf8fb;--text:#073b4c;--muted:#4e7480;--line:#bde8f2;--bubble-in:#d6f2f8;--bubble-out:#087ea4;--bubble-out-text:#fff;--hover:#dff4f8;--selected:#c8edf7;--bubble-radius-in:20px 20px 20px 2px;--bubble-radius-out:20px 20px 2px 20px;--composer-radius:24px;--control-radius:16px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="forest"]{--primary:#2f7d4a;--bg:#edf6ec;--panel:#fbfdf9;--panel2:#eef6ec;--text:#173b25;--muted:#64806c;--line:#cfe1cf;--bubble-in:#e0eee0;--bubble-out:#2f7d4a;--bubble-out-text:#fff;--hover:#e3efe2;--selected:#d3ead4;--bubble-radius-in:5px 18px 18px 18px;--bubble-radius-out:18px 5px 18px 18px;--composer-radius:8px;--control-radius:10px;--message-gap:6px;--theme-font:Verdana,Arial,sans-serif;color-scheme:light}
:root[data-style-theme="royal"]{--primary:#6d28d9;--bg:#f4effd;--panel:#fcfaff;--panel2:#f2eafd;--text:#30145e;--muted:#78649d;--line:#ddd0f5;--bubble-in:#ebe1fb;--bubble-out:#6d28d9;--bubble-out-text:#fff;--hover:#eee5fb;--selected:#e2d3fa;--bubble-radius-in:16px 4px 16px 4px;--bubble-radius-out:4px 16px 4px 16px;--composer-radius:16px;--control-radius:4px;--message-gap:6px;--theme-font:Georgia,"Times New Roman",serif;color-scheme:light}
:root[data-style-theme="neon"]{--primary:#00d084;--bg:#06110d;--panel:#0a1a14;--panel2:#10271e;--text:#e8fff5;--muted:#86bca5;--line:#174f39;--bubble-in:#123426;--bubble-out:#00a86b;--bubble-out-text:#001b10;--hover:#123326;--selected:#164b37;--bubble-radius-in:2px 16px 2px 16px;--bubble-radius-out:16px 2px 16px 2px;--composer-radius:2px;--control-radius:2px;--message-gap:7px;--theme-font:"Trebuchet MS",Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="minimal"]{--primary:#111827;--bg:#f5f5f5;--panel:#fff;--panel2:#fafafa;--text:#111827;--muted:#6b7280;--line:#d1d5db;--bubble-in:#fff;--bubble-out:#111827;--bubble-out-text:#fff;--hover:#f3f4f6;--selected:#e5e7eb;--bubble-radius-in:0;--bubble-radius-out:0;--composer-radius:0;--control-radius:0;--message-gap:9px;--theme-font:Arial,Helvetica,sans-serif;color-scheme:light}
:root[data-style-theme="minimal"] .bubble{border:1px solid var(--line);box-shadow:none}
:root[data-style-theme="neon"] .bubble{box-shadow:0 0 10px color-mix(in srgb,var(--primary) 28%,transparent)}

/* 20260727h saved replies, broadcast messages, and filtered-unread notice */
.remove-filters{width:100%;background:#fff1f2!important;border-color:#fda4af!important;color:#b91c1c!important;font-weight:700}
.filtered-unread-notice{position:sticky;top:0;z-index:15;display:grid;grid-template-columns:46px minmax(0,1fr);gap:9px;align-items:center;min-height:70px;padding:10px;background:rgba(239,68,68,.16);border-bottom:1px solid rgba(220,38,38,.35);color:#991b1b;cursor:pointer;animation:noticePulse .35s ease}
.filtered-unread-notice .notice-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#dc2626;color:#fff;font-weight:800}
.filtered-unread-notice strong{display:block}.filtered-unread-notice small{display:block;margin-top:3px;color:inherit;opacity:.8}
@keyframes noticePulse{50%{transform:scale(.985);filter:brightness(1.07)}}
.composer-input-wrap{position:relative;flex:1;min-width:0}.composer-input-wrap textarea{width:100%;display:block}
.quick-reply-suggestions{position:absolute;left:0;right:0;bottom:calc(100% + 7px);z-index:180;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.quick-reply-option{display:block;width:100%;padding:9px 11px;border:0;border-bottom:1px solid var(--line);border-radius:0;text-align:left;background:var(--panel)}
.quick-reply-option:last-child{border-bottom:0}.quick-reply-option.active{background:var(--selected)}.quick-reply-option strong{display:block}.quick-reply-option span{display:block;margin-top:2px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saved-reply-form label{display:grid;gap:5px}.saved-reply-list{padding:10px;max-height:52dvh;overflow:auto}.saved-reply-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px;border-bottom:1px solid var(--line)}.saved-reply-card strong,.saved-reply-card p{grid-column:1}.saved-reply-card p{margin:0;color:var(--muted);white-space:pre-wrap}.saved-reply-card .reply-actions{grid-column:2;grid-row:1/3;display:grid;gap:5px;align-content:start}
.hot-games-list{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:6px 2px;max-height:64dvh;overflow:auto}
.hot-window{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.hot-window-head{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap}
.hot-window-head strong{font-size:15px;white-space:nowrap}
.hot-window-mode{padding:5px 8px;border-radius:8px;width:auto;max-width:min(60%,220px)}
.hot-window-hint{margin:6px 0 0}
.hot-game-picker{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px 12px}
.hot-game-opt{display:flex;align-items:center;gap:8px;font-size:14px;padding:3px 2px;cursor:pointer;min-width:0}
.hot-game-opt input{flex:0 0 auto}
.hot-game-opt span{min-width:0;overflow-wrap:anywhere}
.announcement-upload-list{display:grid;gap:6px}.announcement-upload-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px}.announcement-card .attachment-summary{display:block;margin-top:5px;color:var(--muted)}
.announcement-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.announcement-mode{flex:none;padding:3px 8px;border-radius:999px;background:var(--selected);color:var(--primary);font-size:11px;font-weight:700}.announcement-attachment-summary{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0}.announcement-attachment-summary a{max-width:100%;padding:4px 8px;border:1px solid var(--line);border-radius:999px;color:var(--primary);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.announcement-upload-item.pending{display:block;color:var(--muted);font-style:italic}


/* 20260727j: stable media, rich replies, owner audit details and link previews */
.reaction-arming .quick-reactions button{pointer-events:none!important}
.reply-preview{display:flex;align-items:center;gap:8px;min-height:42px;white-space:normal;border-radius:9px}
.reply-preview-thumb{width:42px;height:42px;flex:0 0 42px;object-fit:cover;border-radius:8px;background:#111}
.reply-preview-copy{display:flex;min-width:0;flex-direction:column;gap:2px;overflow:hidden}
.reply-preview-copy strong,.reply-preview-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-preview-copy strong{color:var(--text);font-size:12px}
.link-preview-host:empty{display:none}
.link-preview-card{display:flex;overflow:hidden;margin-top:8px;max-width:min(420px,58vw);border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);text-decoration:none}
.link-preview-card>img{width:108px;min-height:82px;object-fit:cover;background:var(--panel)}
.link-preview-copy{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:center;gap:3px;padding:9px}
.link-preview-copy strong,.link-preview-copy span,.link-preview-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-preview-description{color:var(--muted);font-size:12px}
.link-preview-copy small{color:var(--muted);font-size:11px}
.message-audio{display:block;min-width:min(330px,58vw);min-height:40px}
.detail-history-section{margin:12px 0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.detail-history-section h3{margin:0 0 8px;font-size:14px}
.detail-history-section article{display:flex;flex-direction:column;gap:3px;padding:7px 0;border-top:1px solid var(--line)}
.detail-history-section article:first-of-type{border-top:0}
.detail-history-section small{color:var(--muted)}
.detail-link-button{display:block;width:100%;margin:4px 0;padding:7px 9px;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--primary)}
.contacts-empty{margin:0;font-size:13px;color:var(--muted)}
.contact-shared{margin:5px 0 0;font-size:13px}
.may-know-person{display:flex;flex-direction:column;gap:2px}
.may-know-person small{color:var(--muted)}
.may-know-person:disabled{opacity:.55;cursor:default}


/* 20260727k: stable media rows, multiline messages and direct double-tap reaction */
.bottom-refresh{display:none!important}
.message-row .bubble,.message-text{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.video-attachment{display:grid;gap:5px;max-width:min(360px,58vw)}
.attachment-video{display:block;width:min(360px,58vw);max-width:100%;height:auto;min-height:190px;aspect-ratio:16/9;object-fit:contain;background:#111;border-radius:13px}
.attachment-video.metadata-ready{min-height:0}
.media-open-link{justify-self:end;color:inherit;font-size:11px;text-decoration:underline;padding:2px 3px}
.message-row.double-tap-reacted .bubble{animation:quickReactionPulse .34s ease}
@keyframes quickReactionPulse{0%,100%{transform:translateX(var(--swipe-x)) scale(1)}45%{transform:translateX(var(--swipe-x)) scale(1.045);filter:brightness(1.12)}}

/* 20260727n: staff realtime notification banner */
@keyframes staffNoticeIn{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}

.typing-indicator.draft-only .typing-dots{display:none}

.alerts-button{font-size:18px;line-height:1}

.label-chip{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;cursor:pointer;white-space:nowrap;border:1px solid rgba(0,0,0,.08);line-height:1.5}
.assigned-label .label-chip{border-left:none;padding-left:10px}
.label-color-row{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
.label-color-row label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);border:none;background:none;padding:0;min-height:0}
.label-color-row input[type=color]{width:36px;height:30px;padding:2px;border-radius:8px;cursor:pointer}
.color-dialog{border:none;border-radius:16px;padding:0;background:var(--panel);color:var(--text);box-shadow:var(--shadow);width:min(320px,92vw)}
.color-dialog header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.color-dialog header button{border:none;background:none;font-size:20px;min-height:0;padding:0 4px}
.color-dialog .color-body{padding:14px;display:grid;gap:12px}
.color-dialog input[type=color]{width:100%;height:46px;padding:3px;border-radius:10px;cursor:pointer}
.color-dialog .swatches{display:flex;flex-wrap:wrap;gap:8px}
.color-dialog .swatches button{width:30px;height:30px;border-radius:50%;padding:0;border:1px solid var(--line)}
.color-dialog .dialog-actions{padding:12px 14px;border-top:1px solid var(--line)}
.color-dialog::backdrop{background:rgba(0,0,0,.45)}

/* 20260729h staff visual refresh: softer depth, focus rings, refined avatars/badges/composer */
.conversation-card{border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);transition:background .12s ease}
.conversation-copy strong{font-size:14.5px;letter-spacing:.1px}
.conversation-copy>span{font-size:12.5px}
/* Why a card matched, when the reason is not the name on it — a game username.
   Coloured rather than muted so the eye lands on the line that explains the
   result, not on the message preview above it. */
.conversation-copy>span.match-why{font-size:11.5px;font-weight:600;color:var(--primary)}
.avatar,.header-avatar,.receipt-avatar.generic{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 24%,var(--panel)),color-mix(in srgb,var(--primary) 9%,var(--panel)));color:color-mix(in srgb,var(--primary) 72%,var(--text))}
.avatar,.header-avatar{box-shadow:0 1px 3px rgba(0,0,0,.14)}
.online-dot{box-shadow:0 0 0 2px var(--panel),0 0 6px color-mix(in srgb,#31a24c 65%,transparent)}
.unread{box-shadow:0 2px 6px color-mix(in srgb,var(--primary) 42%,transparent)}
.label-mini i{box-shadow:0 1px 2px rgba(0,0,0,.14)}
.bubble{box-shadow:0 1px 1.5px rgba(0,0,0,.07)}
:root[data-style-theme="minimal"] .bubble{box-shadow:none}
.reaction-chip{border:1px solid var(--line)}
.pane-tabs button.active{border-bottom-width:3px}
.composer{box-shadow:0 -1px 0 var(--line),0 -7px 18px rgba(0,0,0,.035)}
.composer textarea{border:1px solid var(--line);transition:border-color .12s ease,box-shadow .12s ease}
.composer textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
.search-wrap input:focus,.filter-row select:focus,.toolbar input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.primary-button,.send-button{box-shadow:0 2px 9px color-mix(in srgb,var(--primary) 38%,transparent)}
.primary-button:hover,.send-button:hover{filter:brightness(1.06);background:var(--primary)}
.composer-button:hover{background:color-mix(in srgb,var(--primary) 16%,var(--panel))}

/* 20260729h new themes */
:root[data-style-theme="slate"]{--primary:#4f6b8f;--bg:#eef1f5;--panel:#fff;--panel2:#f4f6f9;--text:#1e293b;--muted:#64748b;--line:#d8dee7;--bubble-in:#e7ecf2;--bubble-out:#4f6b8f;--bubble-out-text:#fff;--hover:#eaeef4;--selected:#dbe4ef;--bubble-radius-in:13px 13px 13px 4px;--bubble-radius-out:13px 13px 4px 13px;--composer-radius:14px;--control-radius:9px;--message-gap:4px;--theme-font:"Segoe UI",Inter,Arial,sans-serif;color-scheme:light}
:root[data-style-theme="sunset"]{--primary:#f2542d;--bg:#fff3ee;--panel:#fffaf8;--panel2:#fff1ea;--text:#4a2213;--muted:#9c6650;--line:#f6d5c6;--bubble-in:#ffe1d4;--bubble-out:#f2542d;--bubble-out-text:#fff;--hover:#ffeae1;--selected:#ffd9c9;--bubble-radius-in:20px 20px 20px 5px;--bubble-radius-out:20px 20px 5px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="graphite"]{--primary:#8ea2c4;--bg:#121417;--panel:#1b1e24;--panel2:#232730;--text:#e8ebf0;--muted:#9aa3b2;--line:#333a46;--bubble-in:#2a2f3a;--bubble-out:#3c4a63;--bubble-out-text:#fff;--hover:#232833;--selected:#2b3648;--bubble-radius-in:13px 13px 13px 4px;--bubble-radius-out:13px 13px 4px 13px;--composer-radius:14px;--control-radius:9px;--message-gap:4px;--theme-font:system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
.accent-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.accent-controls{display:flex;align-items:center;gap:8px}
.accent-controls input[type=color]{width:44px;height:32px;padding:2px;border-radius:8px;cursor:pointer}
.accent-controls button{min-height:32px;padding:5px 12px}

/* 20260729k circular profile-picture avatars. height:100% never resolves against the
   grid/flex parent, so a portrait img kept its aspect (42x84) and border-radius made an
   oval. Absolutely filling the square box + object-fit:cover center-crops into a circle. */
.avatar,.header-avatar,.receipt-avatar,.receipt-avatar.generic,.profile-preview{flex:0 0 auto}
.avatar>img,.header-avatar>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.receipt-avatar,.profile-preview{object-fit:cover}

/* 20260729k menu redesign (sections), per-event sound rows, viewer HD button */
.menu-body{gap:0!important;padding:0!important;max-height:min(74dvh,680px);overflow:auto}
.menu-section{padding:13px 16px;border-bottom:1px solid var(--line);display:grid;gap:11px}
.menu-section:last-child{border-bottom:0}
.menu-section>h4{margin:0;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.menu-section>label{display:grid;gap:5px;font-size:13px}
.menu-section .toggle-row,.menu-section .sound-row,.menu-section .accent-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.menu-section .sound-row select{width:auto;min-width:134px;flex:0 0 auto;padding:7px 8px}
.menu-section>button{width:100%}
.menu-hint{color:var(--muted);font-size:12px;line-height:1.4}
.viewer-hd.active{background:var(--primary)!important;color:#fff!important;font-weight:700}

/* 20260729m staged attachments (no auto-send) tray + one-click image copy button */
.pending-tray{display:flex;flex-wrap:wrap;gap:9px;padding:9px 10px;border-top:1px solid var(--line);background:var(--panel2)}
.pending-chip{position:relative;width:60px;height:60px;flex:0 0 auto}
.pending-thumb{width:60px;height:60px;border-radius:10px;object-fit:cover;cursor:pointer;border:1px solid var(--line);display:grid;place-items:center;background:var(--panel);overflow:hidden}
.pending-thumb.pending-icon{font-size:26px}
.pending-remove{position:absolute;top:-6px;right:-6px;width:20px;height:20px;min-height:20px;padding:0;border-radius:50%;border:0;background:var(--danger);color:#fff;font-size:13px;line-height:1;display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.image-attachment{position:relative;display:inline-block;max-width:100%}
.image-copy-button{position:absolute;top:6px;right:6px;width:30px;height:30px;min-height:30px;padding:0;display:grid;place-items:center;border-radius:8px;border:0;background:rgba(0,0,0,.5);color:#fff;opacity:0;transition:opacity .12s ease}
.image-attachment:hover .image-copy-button,.image-copy-button:focus-visible{opacity:1}
.image-copy-button.copied{background:var(--primary);opacity:1}
@media(hover:none){.image-copy-button{opacity:.82}}


/* 20260729p generated theme library (staff) */
:root[data-style-theme="sky"]{--primary:#0ea5e9;--bg:#ecf8fd;--panel:#ffffff;--panel2:#f4fbfe;--text:#0b273c;--muted:#3484ae;--line:#cfedfb;--bubble-in:#def3fc;--bubble-out:#0ea5e9;--bubble-out-text:#ffffff;--hover:#e7f6fd;--selected:#cfedfb;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="teal"]{--primary:#0d9488;--bg:#ecf6f5;--panel:#ffffff;--panel2:#f4fafa;--text:#0b242f;--muted:#347c7d;--line:#cfeae7;--bubble-in:#def1ef;--bubble-out:#0d9488;--bubble-out-text:#ffffff;--hover:#e7f4f3;--selected:#cfeae7;--bubble-radius-in:22px;--bubble-radius-out:22px;--composer-radius:26px;--control-radius:20px;--message-gap:6px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="emerald"]{--primary:#059669;--bg:#ebf7f3;--panel:#ffffff;--panel2:#f4faf8;--text:#0a242a;--muted:#307d6e;--line:#cdeae1;--bubble-in:#ddf1eb;--bubble-out:#059669;--bubble-out-text:#ffffff;--hover:#e6f4f0;--selected:#cdeae1;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="lime"]{--primary:#65a30d;--bg:#f3f8ec;--panel:#ffffff;--panel2:#f8fbf4;--text:#18261d;--muted:#608440;--line:#e0edcf;--bubble-in:#eaf3de;--bubble-out:#65a30d;--bubble-out-text:#ffffff;--hover:#f0f6e7;--selected:#e0edcf;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="amber"]{--primary:#d97706;--bg:#fcf4eb;--panel:#ffffff;--panel2:#fdf9f4;--text:#28201c;--muted:#9a6e3c;--line:#f7e4cd;--bubble-in:#faeddd;--bubble-out:#d97706;--bubble-out-text:#ffffff;--hover:#fbf1e6;--selected:#f7e4cd;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:Georgia,"Times New Roman",serif;color-scheme:light}
:root[data-style-theme="coral"]{--primary:#fb6f51;--bg:#fff3f1;--panel:#ffffff;--panel2:#fff9f7;--text:#2d1f27;--muted:#ab6a62;--line:#fee2dc;--bubble-in:#feece8;--bubble-out:#fb6f51;--bubble-out-text:#ffffff;--hover:#fff1ee;--selected:#fee2dc;--bubble-radius-in:22px;--bubble-radius-out:22px;--composer-radius:26px;--control-radius:20px;--message-gap:6px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="rose"]{--primary:#e11d48;--bg:#fdedf0;--panel:#ffffff;--panel2:#fef5f7;--text:#291426;--muted:#9e405d;--line:#f9d2da;--bubble-in:#fbe0e6;--bubble-out:#e11d48;--bubble-out-text:#ffffff;--hover:#fce8ed;--selected:#f9d2da;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="bubblegum"]{--primary:#ec4899;--bg:#fdf0f7;--panel:#ffffff;--panel2:#fef7fa;--text:#2a1a31;--muted:#a45686;--line:#fbdaeb;--bubble-in:#fce6f1;--bubble-out:#ec4899;--bubble-out-text:#ffffff;--hover:#fdedf5;--selected:#fbdaeb;--bubble-radius-in:22px;--bubble-radius-out:22px;--composer-radius:26px;--control-radius:20px;--message-gap:6px;--theme-font:"Trebuchet MS",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="lavender"]{--primary:#8b5cf6;--bg:#f6f2fe;--panel:#ffffff;--panel2:#faf8ff;--text:#1d1c3e;--muted:#7360b4;--line:#e8defd;--bubble-in:#efe9fe;--bubble-out:#8b5cf6;--bubble-out-text:#ffffff;--hover:#f3effe;--selected:#e8defd;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="indigo"]{--primary:#4f46e5;--bg:#f1f0fd;--panel:#ffffff;--panel2:#f7f7fe;--text:#15193c;--muted:#5555ac;--line:#dcdafa;--bubble-in:#e7e6fb;--bubble-out:#4f46e5;--bubble-out-text:#ffffff;--hover:#edecfc;--selected:#dcdafa;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:Inter,system-ui,Arial,sans-serif;color-scheme:light}
:root[data-style-theme="sand"]{--primary:#b45309;--bg:#f9f1eb;--panel:#ffffff;--panel2:#fcf7f4;--text:#231b1d;--muted:#885c3e;--line:#f0ddce;--bubble-in:#f5e8de;--bubble-out:#b45309;--bubble-out-text:#ffffff;--hover:#f8eee6;--selected:#f0ddce;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:Georgia,"Times New Roman",serif;color-scheme:light}
:root[data-style-theme="mint"]{--primary:#10b981;--bg:#ecf9f5;--panel:#ffffff;--panel2:#f4fcf9;--text:#0c292e;--muted:#368e7a;--line:#cff1e6;--bubble-in:#dff6ee;--bubble-out:#10b981;--bubble-out-text:#ffffff;--hover:#e7f8f2;--selected:#cff1e6;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="cocoa"]{--primary:#7c5e48;--bg:#f5f2f0;--panel:#ffffff;--panel2:#f9f8f7;--text:#1b1d26;--muted:#6c615d;--line:#e5dfda;--bubble-in:#ede9e6;--bubble-out:#7c5e48;--bubble-out-text:#ffffff;--hover:#f2efed;--selected:#e5dfda;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:Georgia,"Times New Roman",serif;color-scheme:light}
:root[data-style-theme="cherry"]{--primary:#dc2626;--bg:#fceeee;--panel:#ffffff;--panel2:#fdf5f5;--text:#281521;--muted:#9c454c;--line:#f8d4d4;--bubble-in:#fae2e2;--bubble-out:#dc2626;--bubble-out-text:#ffffff;--hover:#fce9e9;--selected:#f8d4d4;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="grape"]{--primary:#9333ea;--bg:#f6effd;--panel:#ffffff;--panel2:#faf6fe;--text:#1e173c;--muted:#774cae;--line:#e9d6fb;--bubble-in:#f0e3fc;--bubble-out:#9333ea;--bubble-out-text:#ffffff;--hover:#f4ebfd;--selected:#e9d6fb;--bubble-radius-in:22px;--bubble-radius-out:22px;--composer-radius:26px;--control-radius:20px;--message-gap:6px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="aqua"]{--primary:#06b6d4;--bg:#ebf9fc;--panel:#ffffff;--panel2:#f4fcfd;--text:#0a2939;--muted:#308da3;--line:#cdf0f6;--bubble-in:#ddf5f9;--bubble-out:#06b6d4;--bubble-out-text:#ffffff;--hover:#e6f8fb;--selected:#cdf0f6;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="honey"]{--primary:#eab308;--bg:#fdf9eb;--panel:#ffffff;--panel2:#fefcf4;--text:#2a291d;--muted:#a28c3d;--line:#fbf0ce;--bubble-in:#fcf5de;--bubble-out:#eab308;--bubble-out-text:#111827;--hover:#fdf7e6;--selected:#fbf0ce;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:"Trebuchet MS",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="flamingo"]{--primary:#f472b6;--bg:#fef4f9;--panel:#ffffff;--panel2:#fff9fc;--text:#2c1f35;--muted:#a86b94;--line:#fde3f0;--bubble-in:#feecf5;--bubble-out:#f472b6;--bubble-out-text:#111827;--hover:#fef1f8;--selected:#fde3f0;--bubble-radius-in:22px;--bubble-radius-out:22px;--composer-radius:26px;--control-radius:20px;--message-gap:6px;--theme-font:"Trebuchet MS",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="steelblue"]{--primary:#3b6ea5;--bg:#eff3f8;--panel:#ffffff;--panel2:#f6f8fb;--text:#121f33;--muted:#4b698c;--line:#d8e2ed;--bubble-in:#e5ebf3;--bubble-out:#3b6ea5;--bubble-out-text:#ffffff;--hover:#ebf0f6;--selected:#d8e2ed;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:Inter,system-ui,Arial,sans-serif;color-scheme:light}
:root[data-style-theme="sage"]{--primary:#6b8e6b;--bg:#f3f6f3;--panel:#ffffff;--panel2:#f8faf8;--text:#18232a;--muted:#63796e;--line:#e1e8e1;--bubble-in:#ebf0eb;--bubble-out:#6b8e6b;--bubble-out-text:#ffffff;--hover:#f0f4f0;--selected:#e1e8e1;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:Verdana,Geneva,sans-serif;color-scheme:light}
:root[data-style-theme="plum"]{--primary:#a21caf;--bg:#f8edf9;--panel:#ffffff;--panel2:#fbf5fb;--text:#201334;--muted:#7e4090;--line:#ecd2ef;--bubble-in:#f2e0f4;--bubble-out:#a21caf;--bubble-out-text:#ffffff;--hover:#f6e8f7;--selected:#ecd2ef;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:light}
:root[data-style-theme="midnightblue"]{--primary:#6ea8ff;--bg:#151c2a;--panel:#222e42;--panel2:#2a374e;--text:#e9ebf0;--muted:#8ea4c8;--line:#455c7e;--bubble-in:#34445d;--bubble-out:#6ea8ff;--bubble-out-text:#111827;--hover:#2f3d54;--selected:#425c8c;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="graphitedark"]{--primary:#8ea2c4;--bg:#181c24;--panel:#272d3a;--panel2:#2f3644;--text:#e9ebf0;--muted:#97a3b7;--line:#4f5a6c;--bubble-in:#3b4352;--bubble-out:#8ea2c4;--bubble-out-text:#111827;--hover:#353c4a;--selected:#4d5a77;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="neondark"]{--primary:#00e58a;--bg:#0a231e;--panel:#133631;--panel2:#18413b;--text:#e9ebf0;--muted:#6fb5a7;--line:#246e5b;--bubble-in:#1e5046;--bubble-out:#00e58a;--bubble-out-text:#111827;--hover:#1b483f;--selected:#1c7164;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:"Trebuchet MS",Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="cyber"]{--primary:#f000b8;--bg:#220c23;--panel:#351638;--panel2:#3f1d42;--text:#e9ebf0;--muted:#b275b4;--line:#6c2969;--bubble-in:#4e224f;--bubble-out:#f000b8;--bubble-out-text:#ffffff;--hover:#461e48;--selected:#6e2373;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:"Courier New",monospace;color-scheme:dark}
:root[data-style-theme="dracula"]{--primary:#bd93f9;--bg:#1d1a29;--panel:#2d2b41;--panel2:#37344d;--text:#e9ebf0;--muted:#a49fc6;--line:#5d557c;--bubble-in:#44405c;--bubble-out:#bd93f9;--bubble-out-text:#111827;--hover:#3d3953;--selected:#5d5589;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Courier New",monospace;color-scheme:dark}
:root[data-style-theme="nord"]{--primary:#88c0d0;--bg:#181f25;--panel:#26313b;--panel2:#2e3b46;--text:#e9ebf0;--muted:#95abba;--line:#4d6370;--bubble-in:#3a4954;--bubble-out:#88c0d0;--bubble-out-text:#111827;--hover:#34414c;--selected:#4b647c;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:Inter,system-ui,Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="carbon"]{--primary:#94a3b8;--bg:#191c23;--panel:#282d38;--panel2:#303742;--text:#e9ebf0;--muted:#98a3b4;--line:#515a69;--bubble-in:#3c434f;--bubble-out:#94a3b8;--bubble-out-text:#111827;--hover:#363c48;--selected:#4f5a73;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:Inter,system-ui,Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="ember"]{--primary:#fb923c;--bg:#231a16;--panel:#362b26;--panel2:#41342f;--text:#e9ebf0;--muted:#b59e91;--line:#705544;--bubble-in:#514036;--bubble-out:#fb923c;--bubble-out-text:#111827;--hover:#483931;--selected:#725549;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="emeralddark"]{--primary:#34d399;--bg:#0f2120;--panel:#1a3434;--panel2:#213e3d;--text:#e9ebf0;--muted:#7db0ab;--line:#346960;--bubble-in:#294d49;--bubble-out:#34d399;--bubble-out-text:#111827;--hover:#244442;--selected:#2e6b69;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="golddark"]{--primary:#fbbf24;--bg:#231f14;--panel:#363123;--panel2:#413b2b;--text:#e9ebf0;--muted:#b5ab8a;--line:#70633c;--bubble-in:#514932;--bubble-out:#fbbf24;--bubble-out-text:#111827;--hover:#48412d;--selected:#726441;--bubble-radius-in:14px 14px 14px 3px;--bubble-radius-out:14px 14px 3px 14px;--composer-radius:12px;--control-radius:10px;--message-gap:4px;--theme-font:Georgia,"Times New Roman",serif;color-scheme:dark}
:root[data-style-theme="oceandark"]{--primary:#22d3ee;--bg:#0d2128;--panel:#18343f;--panel2:#1e3e4b;--text:#e9ebf0;--muted:#78b0c3;--line:#2f6979;--bubble-in:#254d5a;--bubble-out:#22d3ee;--bubble-out-text:#111827;--hover:#214451;--selected:#286b86;--bubble-radius-in:20px 20px 20px 4px;--bubble-radius-out:20px 20px 4px 20px;--composer-radius:24px;--control-radius:14px;--message-gap:5px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="violetdark"]{--primary:#a78bfa;--bg:#1b1a29;--panel:#2a2a41;--panel2:#33334d;--text:#e9ebf0;--muted:#9e9cc6;--line:#56537d;--bubble-in:#403e5c;--bubble-out:#a78bfa;--bubble-out-text:#111827;--hover:#393754;--selected:#55528a;--bubble-radius-in:22px;--bubble-radius-out:22px;--composer-radius:26px;--control-radius:20px;--message-gap:6px;--theme-font:"Segoe UI",Arial,sans-serif;color-scheme:dark}
:root[data-style-theme="matrix"]{--primary:#22c55e;--bg:#0d1f1a;--panel:#18322b;--panel2:#1e3c34;--text:#e9ebf0;--muted:#78ad9a;--line:#2f644e;--bubble-in:#254a3d;--bubble-out:#22c55e;--bubble-out-text:#ffffff;--hover:#214237;--selected:#286655;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:"Courier New",monospace;color-scheme:dark}
:root[data-style-theme="crimsondark"]{--primary:#fb7185;--bg:#23171e;--panel:#362631;--panel2:#412f3a;--text:#e9ebf0;--muted:#b595a5;--line:#704b5a;--bubble-in:#513945;--bubble-out:#fb7185;--bubble-out-text:#111827;--hover:#48333e;--selected:#724962;--bubble-radius-in:7px;--bubble-radius-out:7px;--composer-radius:8px;--control-radius:6px;--message-gap:5px;--theme-font:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:dark}

/* 20260729p theme picker grid */
.theme-open-button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:auto;min-width:150px;padding:8px 12px}
.theme-open-caret{color:var(--muted)}
.theme-picker-dialog{width:min(560px,calc(100vw - 24px))}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:14px;max-height:70dvh;overflow:auto}
.theme-card{display:grid;gap:6px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;min-height:0}
.theme-card.active{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 45%,transparent)}
.theme-swatch{position:relative;display:block;height:56px;border-radius:9px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.theme-swatch .tb-in{position:absolute;left:8px;top:11px;width:46%;height:13px;border-radius:8px}
.theme-swatch .tb-out{position:absolute;right:8px;top:30px;width:52%;height:13px;border-radius:8px}
.theme-swatch .tb-dot{position:absolute;right:7px;bottom:6px;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.theme-card-name{font-size:11px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}

/* 20260729s staff collaboration: viewer chips, collab bar, typing lock, shake */
.staff-collab-bar{display:flex;flex-direction:column;gap:4px;padding:7px 12px;border-top:1px solid var(--line);background:var(--panel2);font-size:12.5px}
.collab-line{display:flex;gap:6px;align-items:baseline;min-width:0}
.collab-line strong{flex:none;font-weight:700;font-size:12px}
.collab-line.typing strong{color:var(--primary)}
.collab-line.draft strong{color:var(--muted)}
.collab-line span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic}
.viewer-chips{display:flex;align-items:center;flex:none;padding-left:4px}
.viewer-chip{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;font-size:10px;font-weight:700;border:2px solid var(--panel);margin-left:-6px;box-shadow:0 1px 3px rgba(0,0,0,.22)}
.viewer-chip:first-child{margin-left:0}
.composer.typing-locked textarea{opacity:.68;cursor:not-allowed}
.composer.shake{animation:composerShake .4s ease}
@keyframes composerShake{0%,100%{transform:translateX(0)}15%,55%{transform:translateX(-7px)}35%,75%{transform:translateX(7px)}90%{transform:translateX(-3px)}}

/* 20260729u verified / locked contact-channel buttons (email + phone verification) */
.channel-verified{background:color-mix(in srgb,#22c55e 16%,var(--panel))!important;border-color:color-mix(in srgb,#22c55e 52%,var(--line))!important;color:var(--text)!important;font-weight:700;opacity:1!important}
.channel-locked{opacity:.58}

/* 20260729w Messenger-style scroll-to-latest: centered pill-circle with a chevron */
.scroll-latest{left:50%;right:auto!important;transform:translateX(-50%);width:40px;height:40px;background:var(--panel);color:var(--primary);border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.20);font-size:0}
.scroll-latest::after{content:"";width:10px;height:10px;border-right:2.4px solid currentColor;border-bottom:2.4px solid currentColor;transform:rotate(45deg);margin-top:-3px}

/* 20260729y manual referrer picker */
.referrer-picker{display:grid;gap:10px;padding:14px}
.referrer-picker input{width:100%;padding:11px 12px}
.referrer-picker .search-results{max-height:56dvh;overflow:auto;padding:0}

/* 20260729aa collapsible filters inside search field */
.search-wrap input{padding-right:42px}
.filter-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:8px;padding:0}
.filter-toggle svg{width:18px;height:18px}
.filter-toggle:hover{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}
.filter-toggle.active{background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
.filter-active-dot{position:absolute;top:2px;right:2px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:var(--primary);color:#fff;font-size:9px;font-weight:800;line-height:15px;text-align:center;box-shadow:0 0 0 2px var(--bg,#fff)}
.filter-panel{display:grid;gap:8px}

/* 20260729af new-message counter on the scroll-to-latest button */
.scroll-latest-count{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#fa3e3e;color:#fff;font-size:11px;font-weight:800;line-height:20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.35);pointer-events:none}

/* 20260729ak header cleanup: Claim/Unclaim removed from UI (JS + backend kept),
   Find button + status dropdown relocated into the Chat/Notes/Media tab row. */
#claimButton,#unclaimButton{display:none!important}
.pane-tabs{align-items:center}
.pane-tabs button[data-pane]{flex:0 0 auto}
.pane-tabs .pane-tab-action{flex:0 0 auto;align-self:center}
.pane-tabs .pane-tab-action::after{display:none!important}
.pane-tabs #conversationSearchButton{margin-left:auto;width:36px;height:36px;min-height:36px;padding:0;border-radius:9px;display:grid;place-items:center;background:var(--panel2);color:var(--primary)}
.pane-tabs #conversationSearchButton svg{width:18px;height:18px}
#statusSelect.pane-tab-action{height:34px;min-height:34px;padding:4px 10px;border-radius:9px;font-size:13px;margin-left:8px;background:var(--panel2)}

/* 20260729am tab buttons show colorful emoji (Chat / Private notes / Media) */
.pane-tabs button[data-pane]{display:grid;place-items:center;padding:6px 18px;font-size:20px;line-height:1}

/* 20260729ao footer buttons show colorful emoji (customer link / announcements) */
#sidebar .sidebar-footer button{display:grid;place-items:center;font-size:20px;line-height:1}

/* 20260729ar internal Team chat */
.team-member-row{display:flex;align-items:center;gap:9px;margin:7px 0}
.team-member-row small{color:var(--muted);display:block;font-size:11.5px}
.team-member-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);opacity:.45;flex:none}
.team-member-dot.online{background:#31a24c;opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,#31a24c 25%,transparent)}

/* Being taken over. Deliberately obvious: an input that quietly stops working
   reads as the app breaking, and the person needs to know it was a decision. */
.composer.input-held textarea{opacity:.55;cursor:not-allowed}
.hold-banner{
  flex:1 0 100%;margin:0 0 6px;padding:7px 10px;border-radius:9px;
  background:#fff4e5;color:#8a4b00;font-size:13px;font-weight:600;
  border:1px solid #ffd8a8;
}
@media(prefers-color-scheme:dark){
  .hold-banner{background:#3a2a12;color:#ffca7a;border-color:#5c421c}
}
/* The button that does it. Quiet until wanted — it sits beside a colleague's
   name, and it should not look like the obvious thing to press. */
.collab-take{
  margin-left:auto;flex:0 0 auto;padding:4px 10px;border-radius:8px;
  border:1px solid currentColor;background:transparent;color:inherit;
  font-size:12px;font-weight:600;cursor:pointer;opacity:.75;
}
.collab-take:hover{opacity:1}
.collab-take:disabled{opacity:.4;cursor:default}