/* Reference refinements for overview, chats, and accounts. */
.donut { position: relative; }

/* Chats: contact intelligence remains a real grid column on desktop. */
.chats-view { grid-template-columns: 250px 340px minmax(0, 1fr) 340px; }
.chats-view.details-collapsed { grid-template-columns: 250px 340px minmax(0, 1fr); }
.chats-view.details-collapsed .details-panel { display: none; }
.chats-view .inbox-panel { display: flex; flex-direction: column; background: #17232d; }
.chats-view .chat-workspace { display: flex; flex-direction: column; min-width: 0; background: #0c1622; }
.chats-view .details-panel { position: static; inset: auto; z-index: auto; width: auto; display: flex; flex-direction: column; min-width: 0; transform: none; overflow: hidden; background: #17232d; border-left: 1px solid #29333d; box-shadow: none; transition: none; }
.chats-view .details-panel.mobile-open { transform: none; }
.inbox-header { height: 64px; padding: 0 16px; }
.inbox-header h1 { font-size: 17px; }
.chat-connection-summary { font-size: 7px; }
.chat-account-status { padding: 8px 12px; }
.chat-account-state strong { font-size: 8px; }
.chat-account-state small { font-size: 6.5px; }
.inbox-header .chat-list-refresh { margin-left: auto; }
.search-wrap { height: 39px; margin: 12px 12px 9px; border-radius: 20px; }
.chat-account-filters { padding: 0 12px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border-bottom: 1px solid #293846; }
.chat-account-filters label { min-width: 0; }
.chat-account-filters span { margin: 0 0 4px 4px; display: block; color: #6f8291; font-size: 6px; font-weight: 700; text-transform: uppercase; }
.chat-account-filters select { width: 100%; height: 31px; padding: 0 8px; overflow: hidden; color: #dce7ee; background: #1a2935; border: 1px solid #2a3d4c; border-radius: 8px; outline: 0; font-size: 7px; text-overflow: ellipsis; }
.chat-account-filters select:focus { border-color: #3b9fd2; }
.filter-tabs { height: 41px; align-items: center; gap: 22px; }
.filter-tabs button { height: 30px; display: flex; align-items: center; gap: 5px; }
.filter-tabs button.active { padding-inline: 12px; background: #23577a; border-radius: 16px; }
.filter-tabs button.active::after { display: none; }
.conversation-list:empty::after { content: "No chats yet."; padding: 70px 20px; display: block; color: #8ba0b1; font-size: 10px; text-align: center; }
.chat-header, .message-thread { background-color: #0c1622; }
.chat-header, .message-thread { min-width: 0; }
.chat-header { flex: 0 0 64px; }
.message-thread { flex: 1 1 auto; min-height: 0; }
.selected-person { overflow: hidden; }
.auto-delete-badge { margin-left: 7px; padding: 2px 5px; display: inline-flex; align-items: center; gap: 3px; color: #e9bd62; background: #3d321d; border: 1px solid #5b4928; border-radius: 8px; font-size: 6px; font-weight: 650; }
.auto-delete-badge[hidden] { display: none; }
.chat-search-bar { min-height: 43px; padding: 5px 10px; display: flex; flex: 0 0 auto; align-items: center; gap: 5px; background: #111d28; border-bottom: 1px solid #293846; }
.chat-search-bar[hidden] { display: none; }
.chat-search-bar label { height: 31px; padding: 0 9px; display: flex; flex: 1; align-items: center; gap: 7px; color: #6f8291; background: #1a2935; border: 1px solid #2a3d4c; border-radius: 8px; }
.chat-search-bar input { width: 100%; min-width: 0; color: #e6edf2; background: transparent; border: 0; outline: 0; font-size: 8px; }
.chat-search-bar > span { min-width: 70px; color: #8293a1; font-size: 7px; text-align: center; }
.message-selection-bar { min-height: 42px; padding: 5px 12px; display: flex; flex: 0 0 auto; align-items: center; gap: 8px; color: #dce7ee; background: #182733; border-bottom: 1px solid #2a3d4c; }
.message-selection-bar[hidden] { display: none; }
.message-selection-bar strong { margin-right: auto; font-size: 9px; }
.message-selection-bar button { height: 29px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; color: #dce7ee; background: #243542; border: 1px solid #344b5d; border-radius: 7px; cursor: pointer; font-size: 8px; }
.message-selection-bar #message-delete-selected { color: #ffb2bd; background: #44242c; border-color: #65313c; }
.message-selection-bar button:disabled { opacity: .45; cursor: default; }
.header-actions #message-select-toggle.active { color: #fff; background: #247eaa; }
.header-actions #chat-pin-toggle.active { color: #7fd1ff; background: #213d50; }
.header-actions #chat-pin-toggle:disabled { opacity: .35; cursor: default; }
.chat-workspace.selecting-messages .composer-shell { display: none; }
.chat-workspace.selecting-messages .message-stack { padding-inline: 42px; }
.panel-message-results { max-height: 42%; overflow-y: auto; background: #111d27; border-bottom: 1px solid #293846; scrollbar-width: thin; }
.panel-message-results[hidden] { display: none; }
.panel-message-results header { height: 30px; padding: 0 12px; display: flex; align-items: center; color: #8596a4; font-size: 7px; font-weight: 700; text-transform: uppercase; }
.panel-message-results header b { margin-left: auto; }
.panel-message-results button { position: relative; width: 100%; min-height: 58px; padding: 8px 40px 8px 12px; display: block; color: #dce6ed; background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.045); cursor: pointer; text-align: left; }
.panel-message-results button:hover { background: #1a2a36; }
.panel-message-results strong, .panel-message-results span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-message-results strong { font-size: 8px; }
.panel-message-results span { margin-top: 5px; color: #8999a6; font-size: 7px; }
.panel-message-results small { position: absolute; top: 10px; right: 10px; color: #60717f; font-size: 6px; }
.panel-result-status { padding: 18px 12px; color: #7e909e; font-size: 8px; text-align: center; }
.conversation-auto-delete { margin: 6px 0 0 6px; display: inline-flex; align-items: center; gap: 3px; color: #d9b45f; font-size: 6px; }
.conversation-meta { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.conversation-pin { display: inline-grid; place-items: center; color: #68bce8; }
.conversation.pinned { background: rgba(33, 61, 80, .28); }
.conversation.pinned.active { background: linear-gradient(90deg,#275875,#234863); }
.premium-star { margin-left: 4px; display: inline-block; color: #8dc8ff; font-size: .78em; line-height: 1; vertical-align: 1px; text-shadow: 0 0 8px rgba(80, 170, 255, .45); }
.pinned-banner { width: 100%; min-height: 42px; padding: 6px 13px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; align-items: center; gap: 7px; color: #76c5ec; background: #101d28; border: 0; border-bottom: 1px solid #263847; cursor: pointer; text-align: left; }
.pinned-banner[hidden] { display: none; }
.pinned-banner > span:nth-child(2) { min-width: 0; }
.pinned-banner strong, .pinned-banner small { display: block; }
.pinned-banner strong { color: #dce8ef; font-size: 8px; }
.pinned-banner small { margin-top: 3px; overflow: hidden; color: #8295a5; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.message-highlight { animation: message-highlight 1.2s ease; }
@keyframes message-highlight { 0%, 100% { filter: none; } 35% { filter: brightness(1.45); box-shadow: 0 0 0 2px rgba(78, 181, 235, .7), 0 8px 28px rgba(44, 164, 226, .28); } }
.empty-chat-state { background: transparent; border: 0; box-shadow: none; }
.empty-chat-icon { width: 78px; height: 78px; color: #71808c; background: #1d2936; }
.empty-chat-state h2 { margin-top: 18px; font-size: 15px; }
.empty-chat-state p { color: #7890a4; font-size: 10px; }
.details-header, .details-tabs { flex: 0 0 auto; }
.detail-content.active { min-height: 0; overflow-y: auto; }
.contact-card { grid-template-columns: 44px minmax(0, 1fr) 28px; }
.contact-card div { min-width: 0; }
.contact-card h3, .contact-card p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-card div > small { margin-top: 4px; display: block; color: #5f7280; font-size: 6.5px; }
.chat-profile-controls { padding: 16px 15px 18px; background: #17232d; border-top: 1px solid #293846; }
.chat-profile-controls .section-title { min-height: 0; margin: 0 0 13px; padding: 0; align-items: flex-start; gap: 10px; }
.chat-profile-controls .section-title span { color: #dce7ee; font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.chat-profile-controls .section-title small { max-width: 145px; color: #71b9df; overflow-wrap: anywhere; font-size: 7px; line-height: 1.35; text-align: right; }
.chat-profile-controls label { display: grid; gap: 5px; margin-top: 10px; color: #8193a1; font-size: 7px; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; }
.chat-profile-controls input { width: 100%; height: 32px; padding: 0 9px; color: #e1ebf1; background: #1a2935; border: 1px solid #2a3d4c; border-radius: 6px; outline: 0; font-size: 9px; }
.chat-profile-controls input::placeholder { color: #5f7180; }
.chat-profile-controls input:focus { border-color: #3b9fd2; box-shadow: 0 0 0 2px rgba(55,169,232,.12); }
.chat-profile-controls .location-help { display: block; min-height: 0; margin-top: 10px; color: #71b9df; font-size: 8px; line-height: 1.45; }
.chat-profile-controls .profile-actions { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 7px; margin-top: 13px; }
.chat-profile-controls .profile-actions button { min-width: 0; min-height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #b9c8d1; background: #1b2a34; border: 1px solid #304856; border-radius: 6px; cursor: pointer; font-size: 8px; }
.chat-profile-controls .profile-actions #save-contact-profile { color: #fff; background: #299ed6; border-color: #42b9ee; }
.chat-profile-controls .profile-actions button:disabled { opacity: .55; cursor: wait; }
.chat-profile-controls > small:last-child { display: block; margin-top: 9px; color: #6f8291; font-size: 8px; }

/* Composer and message actions. */
.chat-workspace { grid-template-rows: 48px minmax(0,1fr) auto; }
.composer-shell { padding: 7px 10px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.composer-row { display: flex; align-items: center; gap: 5px; }
.ai-draft-row { min-height: 44px; padding: 6px 8px; display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg,rgba(36,49,67,.95),rgba(25,36,49,.95)); border: 1px solid #304355; border-radius: 10px; box-shadow: inset 0 1px rgba(255,255,255,.025); }
.ai-provider-picker { min-width: 0; height: 32px; padding: 0 8px; display: flex; align-items: center; gap: 6px; color: #83c9ed; background: #152532; border: 1px solid #294153; border-radius: 8px; }
.ai-provider-picker select { width: min(190px,22vw); height: 30px; padding: 0 20px 0 0; color: #dbe8ef; background: transparent; border: 0; outline: 0; font-size: 7.5px; }
.ai-draft-row .ai-draft-button { height: 32px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; color: #f2eaff; background: linear-gradient(135deg,#6540a0,#45306d); border: 1px solid #7954b2; border-radius: 8px; box-shadow: 0 5px 14px rgba(66,37,105,.25); font-size: 7.5px; font-weight: 700; cursor: pointer; }
.ai-draft-row .ai-image-button { height: 32px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; color: #e5f7ff; background: linear-gradient(135deg,#247f9f,#205a7f); border: 1px solid #399bbd; border-radius: 8px; font-size: 7.5px; font-weight: 700; cursor: pointer; }
.ai-draft-row .ai-voice-button { height: 32px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; color: #f3ecff; background: linear-gradient(135deg,#6f4599,#4e3577); border: 1px solid #8b62b5; border-radius: 8px; font-size: 7.5px; font-weight: 700; cursor: pointer; }
.ai-draft-button:hover { filter: brightness(1.12); }
.ai-draft-row button:disabled,.ai-draft-row select:disabled { opacity: .45; cursor: default; }
.ai-auto-toggle { min-width: max-content; height: 34px; padding: 0 9px; display: inline-flex; align-items: center; gap: 8px; color: #c7d1d8; background: #15232e; border: 1px solid #314656; border-radius: 9px; cursor: pointer; transition: .18s ease; }
.ai-auto-toggle:has(input:checked) { background: rgba(34,115,79,.2); border-color: #347e5b; box-shadow: 0 0 0 1px rgba(55,180,120,.08); }
.ai-auto-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ai-toggle-track { position: relative; width: 32px; height: 18px; flex: 0 0 auto; background: #35434e; border-radius: 12px; box-shadow: inset 0 1px 3px rgba(0,0,0,.35); transition: .18s ease; }
.ai-toggle-track i { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: #aeb9c1; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.35); transition: .18s ease; }
.ai-auto-toggle input:checked + .ai-toggle-track { background: #2fb879; }
.ai-auto-toggle input:checked + .ai-toggle-track i { left: 17px; background: white; }
.ai-toggle-copy strong,.ai-toggle-copy small { display: block; line-height: 1.1; }
.ai-toggle-copy strong { font-size: 7.5px; }
.ai-toggle-copy small { margin-top: 3px; color: #71828e; font-size: 6px; }
.ai-auto-toggle input:checked ~ .ai-toggle-copy small { color: #65dda3; }
.ai-draft-row > span { min-width: 0; overflow: hidden; color: #657684; font-size: 6.5px; text-overflow: ellipsis; white-space: nowrap; }
.ai-operations-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; white-space: normal; }
.ai-operations-row .ai-draft-button { min-height: 32px; max-width: 100%; padding: 6px 11px; color: #f2eaff; background: #45306d; border: 1px solid #7954b2; border-radius: 8px; font-size: 12px; cursor: pointer; white-space: normal; }
.ai-operations-row button:disabled { opacity: .5; cursor: default; }
.ai-operations-row button:focus-visible { outline: 2px solid #72bde8; outline-offset: 2px; }
.ai-operations-status { flex: 1 1 100%; color: #8fa1ad; font-size: 12px; overflow-wrap: anywhere; }
.ai-usage-panel { min-width: 0; max-height: 180px; overflow: auto; padding: 10px; color: #dce9f1; background: #111f29; border: 1px solid #315064; border-radius: 8px; font-size: 12px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.ai-usage-panel[hidden] { display: none; }
.reply-preview { min-height: 42px; padding: 7px 8px 7px 10px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px; align-items: center; gap: 7px; color: #72bde8; background: #172634; border: 1px solid #294155; border-left: 3px solid #37a9e8; border-radius: 8px; }
.reply-preview[hidden] { display: none; }
.image-generation-preview { padding: 9px; display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 11px; color: #dce9f1; background: #111f29; border: 1px solid #315064; border-radius: 10px; }
.image-generation-preview[hidden] { display: none; }
.image-generation-preview > img { width: 145px; height: 145px; object-fit: cover; background: #0b141b; border-radius: 8px; }
.image-generation-preview > div { min-width: 0; display: grid; align-content: start; gap: 7px; }
.image-generation-preview strong,.image-generation-preview small { display: block; }.image-generation-preview small { max-height: 42px; overflow: hidden; color: #7f929f; font-size: 7px; line-height: 1.45; }
.image-generation-preview label { color: #8fa1ad; font-size: 8px; }.image-generation-preview input { width: 100%; height: 32px; margin-top: 5px; padding: 0 8px; color: #e6edf2; background: #0c171f; border: 1px solid #2d4657; border-radius: 7px; }
.image-generation-preview footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }.image-generation-preview button { height: 30px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; color: #b9c8d1; background: #1b2a34; border: 1px solid #304856; border-radius: 7px; cursor: pointer; font-size: 8px; }.image-generation-preview .image-preview-send { color: #fff; background: #299ed6; border-color: #42b9ee; }
.voice-generation-preview { padding: 10px; color: #dce9f1; background: #161b29; border: 1px solid #4c466d; border-radius: 10px; }
.voice-generation-preview[hidden] { display: none; }
.voice-generation-preview > div { display: grid; gap: 8px; }.voice-generation-preview strong { display: flex; align-items: center; gap: 6px; }.voice-generation-preview small { color: #8995a8; font-size: 7px; }.voice-generation-preview audio { width: 100%; height: 34px; }
.voice-generation-preview footer { display: flex; justify-content: flex-end; gap: 6px; }.voice-generation-preview button,.message-voice button { height: 30px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; color: #c7d1dc; background: #25283a; border: 1px solid #484c68; border-radius: 7px; cursor: pointer; font-size: 8px; }.voice-generation-preview .voice-preview-send { color: white; background: #7950a4; border-color: #9a6bc5; }
.message-voice .voice-transcript { grid-column: 1 / -1; margin: 4px 0 0; padding: 7px; color: #cdd8df; background: rgba(0,0,0,.16); border-radius: 6px; font-size: 8px; line-height: 1.45; }
.agent-voice-settings { display: grid; gap: 10px; padding: 11px; background: #111b23; border: 1px solid #293d49; border-radius: 8px; }.agent-voice-settings > small { color: #708491; font-size: 8px; }
.reply-preview strong, .reply-preview small { display: block; }
.reply-preview strong { color: #dce9f1; font-size: 8px; }
.reply-preview small { margin-top: 3px; overflow: hidden; color: #8696a4; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.message-bubble { position: relative; cursor: pointer; }
.message-bubble.selected { box-shadow: 0 0 0 2px #45aee4, 0 8px 24px rgba(31, 145, 204, .2); }
.message-selector { position: absolute; z-index: 3; top: 50%; left: -34px; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; color: white; background: #132633; border: 2px solid #6f91a7; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.32); cursor: pointer; transform: translateY(-50%); }
.message-bubble.outgoing .message-selector { right: -34px; left: auto; }
.message-bubble.selected .message-selector { background: #2d9ed8; border-color: #8bd7ff; }
.message-auto-delete { margin: 0 0 5px 8px; display: inline-flex; align-items: center; gap: 3px; color: #ddb661; font-size: 7px; }
.message-bubble.media-bubble { width: min(360px, 78%); padding: 6px; }
.message-media { margin: 0; overflow: hidden; border-radius: 8px; }
.message-photo img { width: 100%; max-height: 420px; display: block; object-fit: contain; background: #101923; border-radius: 8px; }
.message-photo figcaption { padding: 7px 5px 3px; color: #dfe7ed; font-size: 9px; line-height: 1.45; }
.message-photo figcaption:empty { display: none; }
.message-voice { min-width: 260px; padding: 7px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 7px; background: rgba(9, 20, 30, .22); }
.message-voice > span { width: 28px; height: 28px; display: grid; place-items: center; color: white; background: #2d9ed8; border-radius: 50%; }
.message-voice audio { width: 100%; min-width: 160px; height: 30px; }
.message-voice > small { color: #a4b5c1; font-size: 7px; }
.message-voice > p { grid-column: 1 / -1; margin: 3px 2px 0; color: #dfe7ed; font-size: 9px; line-height: 1.45; }
.service-message { position: relative; z-index: 1; margin: 5px auto; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #8fa1ad; text-align: center; }
.service-message span { padding: 5px 9px; display: inline-flex; align-items: center; gap: 5px; background: rgba(24, 41, 54, .88); border: 1px solid rgba(63, 88, 105, .7); border-radius: 12px; font-size: 7px; line-height: 1.35; }
.service-message time { color: #596b79; font-size: 6px; }
.message-bubble.search-match { animation: message-highlight 1.2s ease; box-shadow: 0 0 0 2px rgba(78, 181, 235, .7); }
.message-bubble:focus-visible { outline: 2px solid #52b8ec; outline-offset: 2px; }
.message-bubble.pinned { border-color: #bf983d; box-shadow: 0 5px 18px rgba(191, 152, 61, .12); }
.pinned-marker { margin-bottom: 5px; display: inline-flex; align-items: center; gap: 4px; color: #e0b859; font-size: 7px; font-weight: 700; text-transform: uppercase; }
.message-reactions { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px; }
.message-reactions span { min-height: 22px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 4px; background: #203442; border: 1px solid #315064; border-radius: 12px; font-size: 12px; }
.message-reactions span.chosen { background: #1d4f6d; border-color: #3d9ed1; }
.message-reactions b { font-size: 7px; }
.message-context-menu { position: fixed; z-index: 160; width: 250px; max-height: min(420px, calc(100vh - 16px)); padding: 6px; display: none; overflow: hidden; color: #dfe8ef; background: #18232d; border: 1px solid #344553; border-radius: 10px; box-shadow: 0 18px 55px rgba(0, 0, 0, .48); }
.message-context-menu.open { display: block; }
.message-context-menu > button { width: 100%; height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 9px; color: inherit; background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 10px; text-align: left; }
.message-context-menu > button:hover { background: #243441; }
.reaction-picker { max-height: 300px; margin-top: 4px; padding-top: 6px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; overflow-y: auto; border-top: 1px solid #30404d; scrollbar-width: thin; }
.reaction-picker button { width: 34px; height: 32px; padding: 0; display: grid; place-items: center; background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 17px; }
.reaction-picker button:hover { background: #243441; }
.reaction-picker button.chosen { background: #1d4f6d; box-shadow: inset 0 0 0 1px #3d9ed1; }
.reaction-loading { grid-column: 1 / -1; padding: 10px; color: #8192a0; font-size: 9px; text-align: center; }

/* Accounts. */
.accounts-view { grid-template-columns: 250px minmax(0, 1fr); }
.accounts-view .accounts-workspace { grid-column: 2; padding: 28px max(24px, calc((100% - 1435px) / 2)); background: #08090b; }
.accounts-toolbar, .account-metrics, .accounts-canvas, .ops-panel { background-color: #141416; border-color: #28292e; }
.accounts-toolbar { min-height: 65px; border-radius: 14px; }
.accounts-canvas { background-color: #090a0c; }
.account-actions .quick-add { background: #31a8e8; }
.accounts-canvas.selecting-accounts .account-node { cursor: pointer; }
.account-node.selected span { box-shadow: 0 0 0 3px #43b9f0, 0 0 28px rgba(67,185,240,.55) !important; }
.account-actions [data-account-action="Select"].active { color: #fff; background: #247eaa; border-color: #369bcc; }
.squad-manager-modal { position: fixed; inset: 0; z-index: 180; display: none; place-items: center; padding: 24px; background: rgba(2,5,8,.78); backdrop-filter: blur(9px); }
.squad-manager-modal.open { display: grid; }
.squad-manager-dialog { width: min(1060px,96vw); max-height: 92vh; overflow: hidden; color: #e7ebef; background: #111114; border: 1px solid #292a2f; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.58); }
.squad-manager-dialog > header { min-height: 78px; padding: 18px 22px; display: flex; align-items: center; border-bottom: 1px solid #26333d; }
.squad-manager-dialog > header h2 { margin: 2px 0; font-size: 20px; }
.squad-manager-dialog > header p { margin: 0; color: #7f929f; font-size: 10px; }
.squad-manager-dialog > header button { margin-left: auto; }
.squad-manager-grid { display: grid; grid-template-columns: 235px minmax(0,1fr); height: min(720px,calc(92vh - 78px)); }
.squad-manager-grid > aside { padding: 13px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; background: #0d0d10; border-right: 1px solid #24252a; }
.squad-create, .squad-selection-summary button, .squad-form-actions button { min-height: 36px; padding: 0 12px; color: #e6f3fa; background: #1c303e; border: 1px solid #315064; border-radius: 8px; cursor: pointer; }
#squad-manager-list { flex: 1; overflow-y: auto; }
#squad-manager-list button { width: 100%; padding: 11px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 8px; color: #9eb0bc; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer; }
#squad-manager-list button:hover, #squad-manager-list button.active { color: #eaf7ff; background: #172630; border-color: #29485b; }
#squad-manager-list button small { grid-column: 1 / -1; color: #6f8593; }
.squad-selection-summary { display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid #26333d; }
.squad-selection-summary select, .squad-manager-dialog input, .squad-manager-dialog select { min-width: 0; height: 36px; padding: 0 10px; color: #dce7ee; background: #0e171e; border: 1px solid #2c414f; border-radius: 7px; outline: 0; }
#squad-config-form { padding: 14px 16px 76px; overflow-y: auto; background: #0e0e11; }
#squad-editor { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-items: start; }
.squad-config-section { min-width: 0; padding: 15px; background: #151519; border: 1px solid #28292f; border-radius: 10px; box-shadow: inset 0 1px rgba(255,255,255,.015); }
.squad-config-section > header { margin: -2px 0 14px; display: flex; align-items: center; gap: 9px; }
.squad-config-section > header > span { width: 30px; height: 30px; display: grid; place-items: center; color: #63c4f2; background: #172936; border: 1px solid #29495d; border-radius: 8px; }
.squad-config-section > header > div { display: grid; gap: 2px; }
.squad-config-section > header strong { font-size: 11px; }
.squad-config-section > header small { color: #747983; font-size: 8px; }
.squad-identity-section { grid-row: span 2; }
.squad-execution-section { grid-column: 2; }
.squad-empty-editor { height: 100%; display: grid; place-items: center; color: #748995; }
.squad-name-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: end; }
.squad-name-row > button { height: 36px; color: #ffabb7; background: #3a2026; border: 1px solid #62303a; border-radius: 7px; }
.squad-manager-dialog label { display: grid; gap: 7px; color: #a8bac5; font-size: 11px; font-weight: 600; }
.squad-manager-dialog textarea { width: 100%; min-height: 92px; padding: 10px; resize: vertical; color: #dce7ee; background: #0e171e; border: 1px solid #2c414f; border-radius: 7px; outline: 0; font: inherit; font-size: 10px; line-height: 1.5; }
.squad-manager-dialog textarea:focus { border-color: #3b9fd2; box-shadow: 0 0 0 2px rgba(55,169,232,.12); }
.squad-conversation-section { grid-column: 2; }
.squad-agent-summary { grid-column: 1 / -1; padding: 9px 11px; color: #91a8b6; background: #0d171e; border: 1px solid #263c49; border-radius: 7px; font-size: 9px; line-height: 1.45; }
.squad-agent-summary strong { color: #d6e6ee; }
.squad-enable, .squad-check { grid-template-columns: auto 1fr !important; align-items: center; margin: 15px 0; color: #cbdbe4 !important; }
.squad-enable input, .squad-check input { width: 16px; height: 16px; padding: 0; }
.squad-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.squad-template-help { color: #6f8593; font-size: 9px; }
.squad-manager-dialog fieldset { margin: 0; padding: 0; border: 0; }
.squad-manager-dialog legend { display: none; }
.squad-danger { margin: 0 0 12px; padding: 11px; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; align-items: start; background: #25171a; border: 1px solid #4e292f; border-radius: 9px; }
.squad-danger p { color: #bd838b; font-size: 9px; }
.squad-danger-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #f18d9b; background: #3a2026; border-radius: 8px; }
.squad-danger .squad-check { margin: 1px 0 5px; }
.squad-danger p { margin: 0; }
.squad-form-actions { position: sticky; z-index: 3; bottom: -76px; grid-column: 1 / -1; margin: 0 -16px -76px; padding: 12px 16px; display: flex; justify-content: flex-end; gap: 9px; background: rgba(17,17,20,.96); border-top: 1px solid #292a2f; backdrop-filter: blur(10px); }
.squad-form-actions .squad-apply { background: #6b3da0; border-color: #8655bd; }
.squad-job-list { grid-column: 1 / -1; margin-top: 0; display: grid; gap: 7px; }
.squad-job { padding: 9px 11px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 10px; background: #0d151b; border: 1px solid #263844; border-radius: 8px; }
.squad-job small { grid-column: 1 / -1; color: #768b98; }
.squad-job.complete span { color: #6fe0ac; }.squad-job.partial span { color: #f2c56e; }.squad-job.error span { color: #ff8998; }.squad-job.pending span { color: #ecc775; }
.squad-photo-field { display: grid; gap: 8px; color: #a8bac5; font-size: 11px; font-weight: 600; }
.squad-photo-field > small { color: #71828d; font-size: 9px; font-weight: 400; }
.squad-photo-library { min-height: 72px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.squad-photo-library figure { position: relative; width: 64px; height: 64px; margin: 0; }
.squad-photo-library img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; border: 2px solid #354b5a; box-shadow: 0 6px 18px rgba(0,0,0,.34); }
.squad-photo-library figure:first-child img { border-color: #43b8ee; }
.squad-photo-library figure button { position: absolute; top: -4px; right: -4px; width: 21px; height: 21px; display: grid; place-items: center; color: #fff; background: #b84f60; border: 2px solid #11171c; border-radius: 50%; cursor: pointer; }
.squad-photo-empty { width: 100%; padding: 16px; color: #667985; text-align: center; background: #0c1217; border: 1px dashed #2c3a43; border-radius: 10px; font-size: 9px; }
.squad-photo-add { width: max-content; min-height: 34px; padding: 0 12px; display: inline-flex !important; grid-template-columns: auto auto !important; align-items: center; gap: 7px !important; color: #bdeaff !important; background: #173244; border: 1px solid #2e6380; border-radius: 8px; cursor: pointer; }
.squad-scope-card { margin: 12px 0 0; padding: 12px; background: #101216; border: 1px solid #252a30; border-radius: 9px; }
.squad-scope-card > header { display: flex; align-items: center; gap: 12px; }
.squad-scope-card > header div { display: grid; gap: 4px; }
.squad-scope-card > header strong { font-size: 12px; }
.squad-scope-card > header small { color: #71838f; font-size: 9px; }
.squad-scope-card > header > span { margin-left: auto; padding: 5px 8px; color: #83d1f4; background: #163142; border-radius: 999px; font-size: 9px; }
.squad-exclusion-list { max-height: 190px; margin-top: 13px; display: grid; gap: 5px; overflow-y: auto; }
.squad-exclusion-list label { min-height: 46px; padding: 6px 9px; grid-template-columns: auto minmax(0,1fr) auto !important; align-items: center; background: #121c23; border: 1px solid #22323c; border-radius: 9px; }
.squad-exclusion-list label > span { display: grid; gap: 2px; }
.squad-exclusion-list label small { color: #70828e; font-size: 8px; font-weight: 400; }
.squad-exclusion-list label em { color: #65dba8; font-size: 8px; font-style: normal; }
.squad-exclusion-list label:has(input:not(:checked)) { opacity: .65; }
.squad-exclusion-list label:has(input:not(:checked)) em { color: #e4a66e; }
.photo-crop-modal { position: fixed; inset: 0; z-index: 220; display: none; place-items: center; padding: 20px; background: rgba(2,5,8,.88); backdrop-filter: blur(12px); }
.photo-crop-modal.open { display: grid; }
.photo-crop-dialog { width: min(580px,96vw); padding: 20px; color: #eaf2f7; background: #12181e; border: 1px solid #34434e; border-radius: 22px; box-shadow: 0 35px 100px rgba(0,0,0,.7); }
.photo-crop-dialog > header { display: flex; align-items: center; }
.photo-crop-dialog > header h2 { margin: 3px 0; font-size: 20px; }
.photo-crop-dialog > header p { margin: 0; color: #81939f; font-size: 10px; }
.photo-crop-dialog > header button { margin-left: auto; }
.photo-crop-stage { position: relative; width: min(520px,calc(96vw - 80px)); aspect-ratio: 1; margin: 18px auto; overflow: hidden; background: #080c0f; border-radius: 14px; touch-action: none; cursor: grab; }
.photo-crop-stage canvas { width: 100%; height: 100%; display: block; }
.photo-crop-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 180px rgba(0,0,0,.64); outline: 2px solid rgba(255,255,255,.85); outline-offset: -2px; }
.photo-crop-zoom { grid-template-columns: auto 1fr auto !important; align-items: center; }
.photo-crop-zoom input { padding: 0; }
.photo-crop-dialog footer { margin-top: 18px; display: flex; justify-content: flex-end; gap: 9px; }
.photo-crop-dialog footer button { height: 36px; padding: 0 14px; color: #c7d5dd; background: #202a31; border: 1px solid #34434e; border-radius: 8px; cursor: pointer; }
.photo-crop-dialog footer .photo-crop-save { color: #fff; background: #299ed6; border-color: #3cb4eb; }

@media (max-width: 1180px) {
  .app-shell, .chats-view { grid-template-columns: 70px 300px minmax(400px, 1fr) 300px; }
  .chats-view.details-collapsed { grid-template-columns: 70px 300px minmax(400px, 1fr); }
  .dashboard-workspace { grid-column: 2 / -1; }
  .workspace-inner { width: min(100% - 34px, 1435px); }
  .analytics-metrics { grid-template-columns: repeat(3, 1fr); }
  .analytics-metrics div:nth-child(3) { border-right: 0; }
  .overview-footer-grid { grid-template-columns: 1fr 1fr; }
  .sender-stats span:nth-child(-n+2) { display: none; }
  .accounts-view { grid-template-columns: 70px minmax(0, 1fr); }
}

@media (max-width: 920px) {
  .chats-view { grid-template-columns: 290px minmax(0, 1fr); }
  .chats-view .details-panel { position: fixed; inset: 0 0 0 auto; z-index: 80; width: min(340px, 90vw); transform: translateX(100%); overflow-y: auto; box-shadow: -20px 0 50px rgba(0, 0, 0, .32); transition: transform .22s ease; }
  .chats-view .details-panel.mobile-open { transform: translateX(0); }
  .chats-view.details-collapsed .details-panel { display: flex; }
  .dashboard-workspace { grid-column: 1 / -1; }
  .overview-primary, .overview-secondary, .overview-tertiary, .overview-bottom { grid-template-columns: 1fr; }
  .sender-layout { grid-template-columns: 1fr; }
  .campaign-sidebar { min-height: auto; }
  .sender-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .sender-stats { width: 100%; margin-left: 0; overflow-x: auto; }
  .dashboard-menu { display: grid; }
  .accounts-view .accounts-workspace { grid-column: 1; }
  .resolver-view { display: block; }
  .resolver-workspace { height: 100vh; }
  .resolver-inner { width: calc(100% - 28px); padding-top: 18px; }
  .resolver-grid { grid-template-columns: 1fr; }
  .agents-view { display: block; }
  .agents-workspace { height: 100vh; }
  .agents-inner { width: calc(100% - 28px); padding-top: 18px; }
  .agents-layout { grid-template-columns: 1fr; }
  #squad-editor { grid-template-columns: 1fr; }
  .squad-identity-section,.squad-execution-section { grid-column: 1; grid-row: auto; }
}

@media (max-width: 650px) {
  .chats-view { display: block; }
  .chats-view .chat-workspace { height: 100vh; }
  .workspace-inner { width: calc(100% - 20px); padding-top: 14px; }
  .welcome-row { flex-wrap: wrap; }
  .live-pill { margin-left: 0; }
  .analytics-card { padding: 17px; }
  .analytics-card > header { display: block; }
  .card-controls { margin-top: 15px; overflow-x: auto; }
  .analytics-metrics { grid-template-columns: repeat(2, 1fr); }
  .analytics-metrics div:nth-child(2n) { border-right: 0; }
  .overview-footer-grid { grid-template-columns: 1fr; }
  .overview-primary { margin-top: 14px; }
  .line-card, .ai-card-chart { min-height: 310px; }
  .sender-inner { padding-top: 15px; }
  .sender-toolbar > div:first-child { display: block; }
  .sender-channel { margin-left: 0; }
  .sender-stats { gap: 8px; }
  .sender-layout { margin-top: 14px; }
  .message-thread { padding: 12px; }
  .message-bubble { max-width: 88%; }
  .message-bubble.media-bubble { width: min(330px, 88%); }
  .image-generation-preview { grid-template-columns: 1fr; }.image-generation-preview > img { width: 100%; height: auto; max-height: 300px; }
  .message-voice { min-width: 220px; }
  .ai-draft-row { flex-wrap: wrap; }
  .ai-provider-picker { flex: 1; }
  .ai-provider-picker select { width: 100%; }
  .ai-draft-row > span { width: 100%; }
  .header-actions .icon-button.details-toggle { display: grid; }
  .header-actions #message-select-toggle { display: grid; }
  .resolver-header { align-items: flex-start; flex-wrap: wrap; }
  .resolver-safety { margin-left: 0; }
  .resolver-inner { width: calc(100% - 20px); }
  .resolver-actions { flex-wrap: wrap; }
  .resolver-actions .resolver-primary { flex-basis: 100%; }
  .resolver-metrics { grid-template-columns: repeat(2,1fr); }
  .resolver-metrics span:nth-child(2) { border-right: 0; }
  .resolver-metrics span:nth-child(-n+2) { border-bottom: 1px solid #252b31; }
  .resolver-result { grid-template-columns: 26px minmax(0,1fr); }
  .resolver-result small { grid-column: 2; text-align: left; }
  .agents-header { align-items: flex-start; flex-wrap: wrap; }
  .agents-add { margin-left: 0; }
  .agents-inner { width: calc(100% - 20px); }
  .agent-provider-card { grid-template-columns: 38px minmax(0,1fr); }
  .agent-test-state,.agent-provider-actions { grid-column: 2; }
  .agent-playground > header { align-items: flex-start; flex-direction: column; }
  .agent-playground > header label,.agent-playground > header select { width: 100%; }
  .agent-chat-message { max-width: 92%; }
  .agent-chat-composer { grid-template-columns: 1fr 1fr; }
  .agent-chat-composer textarea { grid-column: 1 / -1; }
  .agent-chat-composer button { justify-content: center; }
  .squad-manager-modal { padding: 0; }
  .squad-manager-dialog { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .squad-manager-grid { grid-template-columns: 1fr; height: calc(100vh - 78px); overflow-y: auto; }
  .squad-manager-grid > aside { min-height: 250px; border-right: 0; border-bottom: 1px solid #26333d; overflow: visible; }
  #squad-manager-list { max-height: 210px; }
  #squad-config-form { overflow: visible; }
  .squad-form-grid { grid-template-columns: 1fr; }
}

/* User-selectable light appearance. Kept at the end so it overrides the reference dark palette. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fa; --sidebar: #ffffff; --panel: #ffffff; --panel-2: #f5f8fb; --canvas: #edf3f7;
  --line: #d8e1e8; --line-soft: rgba(20,45,65,.08); --text: #17232d; --muted: #657481;
}
html[data-theme="light"] body,
html[data-theme="light"] .app-shell,
html[data-theme="light"] .dashboard-workspace,
html[data-theme="light"] .overview-workspace,
html[data-theme="light"] .sender-workspace,
html[data-theme="light"] .resolver-workspace,
html[data-theme="light"] .agents-workspace,
html[data-theme="light"] .accounts-workspace { color: #17232d; background: #f4f7fa; }
html[data-theme="light"] .sidebar { color: #263642; background: #ffffff; border-color: #d8e1e8; }
html[data-theme="light"] .brand { color: #17232d; }
html[data-theme="light"] .channel-switch,
html[data-theme="light"] .timezone-row,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .profile { color: #586975; background: #f5f8fa; border-color: #d7e0e6; }
html[data-theme="light"] .timezone-row select option { color: #17232d; background: #ffffff; }
html[data-theme="light"] .nav section + section,
html[data-theme="light"] .sidebar-bottom,
html[data-theme="light"] .profile { border-color: #dce4e9; }
html[data-theme="light"] .nav-item { color: #566773; }
html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .channel-switch button.active { color: #162630; background: #e8f2f8; }
html[data-theme="light"] .profile strong { color: #263642; }
html[data-theme="light"] .inbox-panel,
html[data-theme="light"] .chats-view .inbox-panel,
html[data-theme="light"] .details-panel,
html[data-theme="light"] .chats-view .details-panel { color: #20313d; background: #ffffff; border-color: #d8e1e8; }
html[data-theme="light"] .chat-workspace,
html[data-theme="light"] .chats-view .chat-workspace,
html[data-theme="light"] .chat-header,
html[data-theme="light"] .message-thread { color: #20313d; background-color: #edf4f8; }
html[data-theme="light"] .inbox-header,
html[data-theme="light"] .filter-tabs,
html[data-theme="light"] .details-header,
html[data-theme="light"] .details-tabs,
html[data-theme="light"] .chat-account-filters { border-color: #d9e2e8; }
html[data-theme="light"] .search-wrap,
html[data-theme="light"] .chat-account-filters select,
html[data-theme="light"] .chat-search-bar label,
html[data-theme="light"] .composer-shell { color: #536673; background: #f2f6f9; border-color: #d3dfe7; }
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select { color: #17232d; }
html[data-theme="light"] .conversation:hover,
html[data-theme="light"] .conversation.active { background: #e9f3f9; }
html[data-theme="light"] .conversation-title strong,
html[data-theme="light"] .selected-person strong,
html[data-theme="light"] .contact-card h3,
html[data-theme="light"] .insight-value,
html[data-theme="light"] .ai-card h3,
html[data-theme="light"] .suggestion-card strong { color: #17232d; }
html[data-theme="light"] .message-bubble.incoming { color: #20313d; background: #ffffff; border-color: #d4e0e7; }
html[data-theme="light"] .message-bubble.outgoing { color: #ffffff; background: #299ed6; border-color: #208fc5; }
html[data-theme="light"] .service-message span { color: #526572; background: rgba(255,255,255,.9); border-color: #d2dee6; }
html[data-theme="light"] .contact-card,
html[data-theme="light"] .ai-card,
html[data-theme="light"] .suggestion-card { background: #f5f8fb; border-color: #d8e2e9; }
html[data-theme="light"] :is(.analytics-card,.dashboard-card,.sender-panel,.sender-toolbar,.resolver-panel,.agents-panel,.agent-provider-card,.account-metrics,.accounts-toolbar,.ops-panel,.fleet-metrics article,.fleet-toolbar,.fleet-policy,.proxy-card,.proxy-editor) { color: #223440; background: #ffffff; border-color: #d7e1e8; box-shadow: 0 8px 24px rgba(39,68,88,.08); }
html[data-theme="light"] :is(.analytics-card,.dashboard-card,.sender-panel,.resolver-panel,.agents-panel,.accounts-toolbar,.ops-panel,.fleet-metrics article,.proxy-card,.proxy-editor) :is(h1,h2,h3,strong) { color: #17232d; }
html[data-theme="light"] .accounts-canvas { background-color: #edf3f7; background-image: radial-gradient(circle,rgba(70,101,122,.2) 1px,transparent 1px); border-color: #d4dfe6; }
html[data-theme="light"] .account-cluster { border-color: rgba(48,78,98,.25); }
html[data-theme="light"] .cluster-heading strong,
html[data-theme="light"] .account-node b { color: #263844; }
html[data-theme="light"] .account-canvas-status,
html[data-theme="light"] .view-switch,
html[data-theme="light"] .status-switch,
html[data-theme="light"] .zoom-tools { color: #526572; background: rgba(255,255,255,.94); border-color: #d2dde5; }
html[data-theme="light"] .manager-drawer,
html[data-theme="light"] .squad-manager-dialog,
html[data-theme="light"] .account-dialog,
html[data-theme="light"] .photo-crop-dialog { color: #20313d; background: #ffffff; border-color: #d4dfe6; }
html[data-theme="light"] .manager-drawer > header,
html[data-theme="light"] .manager-tools,
html[data-theme="light"] .manager-card footer { border-color: #dce4e9; }
html[data-theme="light"] .manager-card,
html[data-theme="light"] .manager-kanban > section,
html[data-theme="light"] .manager-kanban article,
html[data-theme="light"] .manager-identity,
html[data-theme="light"] .manager-config-state { color: #263844; background: #f5f8fa; border-color: #d8e1e7; }
html[data-theme="light"] .manager-card-title strong,
html[data-theme="light"] .manager-identity strong,
html[data-theme="light"] .manager-summary-table strong { color: #20313d; }
html[data-theme="light"] .manager-tools label,
html[data-theme="light"] .account-dialog input,
html[data-theme="light"] .account-dialog select,
html[data-theme="light"] .squad-manager-dialog input,
html[data-theme="light"] .squad-manager-dialog select,
html[data-theme="light"] .squad-manager-dialog textarea,
html[data-theme="light"] .proxy-editor input,
html[data-theme="light"] .proxy-editor select { color: #17232d; background: #f4f7f9; border-color: #d2dde4; }
html[data-theme="light"] .auth-shell { background: radial-gradient(circle at 50% 0,rgba(45,151,205,.14),transparent 38%),#eef4f8; }
html[data-theme="light"] .auth-card { color: #263844; background: #ffffff; border-color: #d5e0e7; box-shadow: 0 28px 90px rgba(45,74,94,.18); }
html[data-theme="light"] .auth-card h1 { color: #17232d; }
html[data-theme="light"] .auth-card input { color: #17232d; background: #f3f7f9; border-color: #d1dde5; }