@font-face{font-family:Inter;src:url('/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --ink:#16233b;--muted:#66748b;--faint:#97a2b3;--line:#e6ebf1;--surface:#fff;--soft:#f6f8fb;
  --green:#0b7a55;--green-dark:#07664a;--pale:#eaf7f0;--incoming:#f2f4f8;--outgoing:#e2f5e9;
  --orange:#f26632;--read:#2f8fe8;--danger:#b4412f;--radius:10px;
  font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--surface);
  font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
dialog:not([open]){display:none}
body{margin:0;min-width:320px;font-size:13px;line-height:1.4;background:var(--surface)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
code{font-size:12px;background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:0 4px}
.muted{color:var(--muted)}
.small{font-size:12px}
.soon{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;color:#9a5a17;background:#fff1dc;border-radius:10px;padding:2px 6px;margin-left:auto}
.whatsapp-icon{color:#18b35b}
.shopee-icon{color:var(--orange)}

/* Layout */
.app{height:100dvh;min-height:520px;display:grid;position:relative;--w-sidebar:208px;--w-list:316px;--reply-min:44px;--w-details:296px;grid-template-columns:208px 316px minmax(0,1fr) 296px}
.app>*{min-width:0;min-height:0}
.app.details-hidden,.app:has(.details[hidden]){grid-template-columns:208px 316px minmax(0,1fr)}
.app.details-hidden .details{display:none}

/* Buttons */
.icon-button{width:34px;height:34px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:16px;color:#3b4a63;text-decoration:none}
.icon-button:hover{background:var(--pale);color:var(--green);border-color:#cfe8da}
.icon-button.plain{border-color:transparent;background:transparent}
.icon-button.small{width:30px;height:30px;font-size:15px}
.icon-button[aria-pressed="true"]{background:var(--pale);color:var(--green)}

/* Sidebar */
.sidebar{border-right:1px solid var(--line);display:flex;flex-direction:column;padding:0 10px;overflow:auto}
.sidebar-header{display:flex;align-items:center;gap:2px;flex-shrink:0}
.sidebar-header .brand{flex:1;min-width:0;padding-left:2px;padding-right:0}
.sidebar-header .brand img{width:28px;height:28px;flex:none}
.sidebar-header .brand strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand{display:flex;gap:8px;align-items:center;padding:14px 6px 12px;text-decoration:none;color:var(--ink)}
.brand img{width:36px;height:36px;object-fit:contain}
.brand span{display:flex;flex-direction:column;min-width:0}
.brand strong{font-size:17px;letter-spacing:-.4px;line-height:1.15}
.brand small{font-size:11px;color:var(--muted)}
.nav-group{padding:6px 0;border-bottom:1px solid var(--line)}
.nav-group:last-of-type{border-bottom:0}
.nav-heading{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--faint);padding:8px 10px 4px}
.nav-row{position:relative;width:100%;height:34px;border:0;background:transparent;border-radius:8px;display:flex;align-items:center;gap:10px;text-align:left;padding:0 10px;color:#44536b;font-size:13px;text-decoration:none}
.nav-row>i:first-child{font-size:16px;width:18px;text-align:center}
.nav-row span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-row b{min-width:22px;height:19px;padding:0 6px;border-radius:10px;background:#eef1f5;color:#2d3850;display:grid;place-items:center;font-size:11px;font-weight:600}
.nav-row:hover{background:#f3f8f5}
.nav-row.active{color:var(--green-dark);background:var(--pale);font-weight:600}
.nav-row.active:before{content:"";position:absolute;left:-10px;top:5px;bottom:5px;width:3px;border-radius:0 3px 3px 0;background:var(--green)}
.nav-row.active b{color:#fff;background:var(--green)}
.muted-row{color:var(--muted)}
.status-dot{width:8px;height:8px;border-radius:50%;background:#cfd6df}
.status-dot.on{background:#18b35b}
.status-dot.warn{background:var(--orange)}
.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding:10px 2px;display:flex;align-items:center;gap:6px}
.local-profile{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.profile-avatar{position:relative;width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;background:#e2f6e9;color:#12392d;font-size:15px}
.online-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid #fff;background:#c0c8d2}
.online-dot.on{background:#0e9f60}
.local-profile>span:last-child{display:flex;flex-direction:column;min-width:0}
.local-profile strong{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.local-profile small{color:var(--muted);font-size:11px}

/* Conversation list */
.conversation-list{border-right:1px solid var(--line);display:flex;flex-direction:column}
.list-header{height:52px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 16px}
.list-header h1{font-size:19px;letter-spacing:-.4px;margin:0}
.header-actions{display:flex;align-items:center;gap:2px}
.mobile-tool{display:none}
.channel-tabs{height:38px;flex:none;display:flex;gap:4px;padding:0 8px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.channel-tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:5px;white-space:nowrap;padding:0 9px;border:0;border-bottom:2px solid transparent;background:none;color:#58667d;font-size:13px}
.tab span{color:var(--faint)}
.tab.selected{color:var(--green);border-color:var(--green);font-weight:600}
.tab.selected span{color:var(--green)}
.muted-tab .soon{margin-left:2px}
.list-toolbar{height:38px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.sort-label{display:flex;align-items:center;gap:5px}
.sort-label select{appearance:none;border:0;outline:0;background:transparent;font-size:12.5px;cursor:pointer}
.sort-label i{font-size:10px}
.conversation-search{margin:8px 10px 2px;border:1px solid var(--line);border-radius:8px;height:34px;flex:none;display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--muted)}
.conversation-search:focus-within{border-color:var(--green)}
.conversation-search input{border:0;outline:0;width:100%;min-width:0;background:transparent}
.connection-banner{padding:6px 14px;font-size:12px;color:#4d6f60;background:#eff8f3}
.connection-banner.connected{display:none}
.connection-banner.qr,.connection-banner.logged_out{background:#fff3df;color:#895b1c}
.storage-banner{padding:6px 14px;background:#fff1db;color:#895b1c;font-size:12px}
.bot-alert-banner{display:flex;flex-direction:column;gap:6px;padding:8px 14px;background:#fde2e2;color:#8a1c1c;font-size:12px;line-height:1.4;border-bottom:1px solid #f1b5b5}
.bot-alert-banner[hidden]{display:none}
.bot-alert{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bot-alert span{flex:1;min-width:180px}
.bot-alert button{border:1px solid #d98a8a;border-radius:6px;background:#fff;color:#8a1c1c;padding:3px 9px;font:inherit;font-weight:600;cursor:pointer}
.bot-alert button[data-alert-open]{background:#b42323;border-color:#b42323;color:#fff}
.reconnect-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;background:#fff1db;color:#7a4f12;font-size:12px;line-height:1.4;border-bottom:1px solid #f0d9a8}
.reconnect-banner[hidden]{display:none}
.reconnect-banner #reconnectText{flex:1;min-width:180px}
.reconnect-actions{display:flex;gap:6px;flex:none}
.reconnect-actions button{border:1px solid #d9b46a;border-radius:6px;background:#fff;color:#7a4f12;padding:4px 10px;font:inherit;font-weight:600;cursor:pointer}
.reconnect-actions #reconnectRelink{background:#b7791f;border-color:#b7791f;color:#fff}
.shopee-signed-out{background:#fdecea;color:#8a1c12;border-bottom-color:#f3c1bb}
.shopee-signed-out #shopeeSignedOutText{flex:1;min-width:180px}
.conversation-items{overflow:auto;flex:1}
.replied-section{border-bottom:1px solid var(--line);background:#fbfcfd}
.replied-toggle{width:100%;min-height:38px;display:flex;align-items:center;gap:8px;padding:0 14px;border:0;background:transparent;color:#44536b;text-align:left;font-size:12.5px;font-weight:600}
.replied-toggle:hover{background:#f3f8f5;color:var(--green-dark)}
.replied-toggle>span{flex:1}
.replied-toggle>b{min-width:20px;height:18px;padding:0 6px;display:grid;place-items:center;border-radius:10px;background:#eef1f5;color:#66748b;font-size:10.5px;font-weight:600}
.replied-chevron{font-size:10px;color:var(--muted);transition:transform .15s ease}
.replied-toggle[aria-expanded="true"] .replied-chevron{transform:rotate(90deg)}
.replied-items[hidden]{display:none}
.conversation{width:100%;display:flex;align-items:center;gap:11px;border:0;border-bottom:1px solid #eef2f6;background:var(--surface);text-align:left;padding:9px 12px 9px 14px}
.conversation:hover{background:#f8fbfa}
.conversation.selected{background:#eef8f3;box-shadow:inset 3px 0 var(--green)}
.conv-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.conv-top,.conv-bottom{display:flex;align-items:center;gap:6px}
.conv-top strong{flex:1;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-top .bi{font-size:12px}
.conv-top time{color:var(--faint);font-size:11px;flex:none}
.conv-preview{flex:1;min-width:0;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-preview .bi{margin-right:3px}
.conversation.unread .conv-top strong,.conversation.unread .conv-preview{color:var(--ink)}
.badge{flex:none;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;background:var(--orange);color:#fff;border-radius:9px;font-size:10.5px;font-weight:600}
.empty-list{padding:28px 20px;line-height:1.5;color:var(--muted);text-align:center}
.search-messages>h3{margin:0;padding:12px 14px 6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.search-snippet{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.search-snippet mark{background:var(--pale);color:var(--green);font-weight:600;border-radius:3px;padding:0 1px}
.search-snippet .search-you{color:var(--ink);font-weight:600}

/* Avatars */
.avatar{position:relative;flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#e8edfb;color:#40577b;font-size:14px;font-weight:600}
.avatar.large{width:56px;height:56px;font-size:18px}
.avatar .contact-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.group-avatar-icon{font-size:18px;color:var(--green)}
.avatar-channel{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:#18b35b;color:#fff;font-size:9px;z-index:1}

/* Thread */
.thread{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface)}
.thread-header{height:60px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 18px;border-bottom:1px solid var(--line);gap:10px}
.person-summary{display:flex;align-items:center;gap:11px;min-width:0}
.person-text{min-width:0}
.person-summary strong{font-size:15.5px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block}
.person-sub{display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;color:var(--muted);font-size:12px}
.thread-actions{display:flex;gap:6px}
.mobile-back{display:none}
.bulk-media-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 14px;border-bottom:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:12px}
.bulk-media-bar>div{display:flex;align-items:center;gap:7px}
.bulk-media-bar button:not(.primary-button){min-height:30px;padding:0 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink)}
.bulk-media-bar button:disabled{opacity:.55}
.message-stream{flex:1;overflow:auto;padding:16px 20px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:0;container-type:inline-size}
.day-sep{align-self:stretch;display:flex;justify-content:center;margin:10px 0 6px}
.day-sep span{font-size:11px;color:var(--muted);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:2px 10px}
.message{max-width:min(72%,460px);border-radius:14px 14px 14px 4px;background:var(--incoming);padding:7px 10px 5px;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.message.outgoing{align-self:flex-end;background:var(--outgoing);border-radius:14px 14px 4px 14px}
.message.note{align-self:flex-end;background:#fff7e6;border:1px solid #f0d9a8;border-radius:14px 14px 4px 14px}
.message-sender{margin:0 18px 3px 0;color:var(--green-dark);font-size:11px;font-weight:600}
.note-label{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:#b7791f;margin-bottom:3px}
.message.has-media{padding:4px 4px 5px}
.message:has(>.media-image){width:min-content}
.message.has-media .message-text{padding:4px 6px 0}
.message-text{white-space:pre-wrap}
.message{position:relative}
.bulk-file-select{position:absolute;z-index:2;top:7px;right:29px;width:25px;height:25px;display:grid;place-items:center;border:1px solid #d7e1e9;border-radius:7px;background:#ffffffed;box-shadow:0 1px 3px #10203022;cursor:pointer}
.bulk-file-select input{width:15px;height:15px;margin:0;accent-color:var(--green);cursor:pointer}
.msg-delete{position:absolute;top:2px;right:2px;width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:6px;background:#ffffffcc;color:var(--muted);font-size:13px;opacity:0;transition:opacity .12s}
.message:hover .msg-delete,.msg-delete:focus-visible{opacity:1}
.msg-delete:hover{background:#fff;color:var(--danger)}
.message.has-media .msg-delete{background:#00000055;color:#fff}
.msg-menu{position:fixed;z-index:40;min-width:212px;max-width:min(300px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;background:#202225;border:1px solid #36393e;border-radius:10px;box-shadow:0 12px 32px #0006;color:#f1f2f3;padding:5px;display:flex;flex-direction:column}
.msg-menu button{width:100%;min-height:34px;display:flex;align-items:center;gap:11px;border:0;background:none;text-align:left;padding:6px 10px;border-radius:6px;font-size:12.5px;color:#e8eaed}
.msg-menu button>i{width:16px;flex:none;text-align:center;font-size:14px;color:#bdc1c6}
.msg-menu button>span{min-width:0;flex:1}
.msg-menu button:hover:not(:disabled),.msg-menu button:focus-visible{background:#34373b;color:#fff}
.msg-menu button:focus-visible{outline:2px solid #19c37d;outline-offset:-2px}
.msg-menu button[aria-checked="true"]{color:#f1f2f3;font-weight:600}
.msg-menu button[aria-checked="true"]>i{color:#23c483}
.msg-menu button.danger{color:#ffb4b9}
.msg-menu button.danger>i{color:#ff9299}
.msg-menu button.danger:hover:not(:disabled),.msg-menu button.danger:focus-visible{background:#45262b;color:#ffdadd}
.msg-menu button:disabled{opacity:.45}
.msg-menu hr{width:calc(100% - 12px);flex:none;border:0;border-top:1px solid #3b3e43;margin:4px 6px}
.context-reactions{display:flex;align-items:center;justify-content:space-between;gap:2px;padding:1px 1px 6px}
.msg-menu .context-reactions button{width:30px;height:30px;min-height:30px;justify-content:center;padding:0;font-size:17px;border-radius:50%}
.msg-menu .context-reactions button:hover,.msg-menu .context-reactions button:focus-visible{background:#393c40}
.msg-menu .context-reactions button:focus-visible{outline-offset:1px}
.msg-menu .context-reactions button>i{display:none}
.message-text a{color:#0b6aa8}
.message-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;color:#7f8b9b;font-size:10.5px}
.message.has-media .message-meta{padding:0 6px}
.message-action-indicator{color:#d49a21;font-size:11px}
.ai-draft-actions{display:flex;align-items:center;gap:5px;margin-top:8px;padding-top:6px;border-top:1px solid #e9d7b6}
.ai-draft-actions button{display:inline-flex;align-items:center;gap:4px;min-height:27px;padding:3px 7px;border:1px solid #e2d2b2;border-radius:7px;background:#fffaf0;color:#78591e;font-size:11px;cursor:pointer}
.ai-draft-actions button:hover,.ai-draft-actions button[aria-pressed="true"]{border-color:#a87317;background:#f9e6bc;color:#704908}
.ai-draft-actions button:focus-visible{outline:2px solid #a87317;outline-offset:2px}
.ai-draft-actions .ai-draft-approve{border-color:#0b7a55;background:#0b7a55;color:#fff;font-weight:600}
.ai-draft-actions .ai-draft-approve:hover{border-color:#07664a;background:#07664a;color:#fff}
.ai-draft-actions .ai-draft-comment{margin-left:auto}
.tick{font-size:14px;line-height:1;color:#7f8b9b}
.tick.read{color:var(--read)}
.tick.failed{color:var(--danger)}
.older-button{align-self:center;padding:5px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--green);font-size:12px;margin-bottom:6px}
.media-image{display:block;width:fit-content;max-width:min(300px,100%);padding:0;border:0;background:#dfe5ec;border-radius:10px;overflow:hidden;cursor:zoom-in}
.media-image img{display:block;width:auto;max-width:min(300px,calc(72cqw - 8px));max-height:340px;object-fit:contain}
.media-image.sticker{background:transparent}
.media-image.sticker img{width:140px;max-height:140px;object-fit:contain}
.media-video{display:block;width:320px;max-width:100%;max-height:340px;object-fit:contain;border-radius:10px;background:#000}
.media-audio{display:flex;align-items:center;gap:6px;padding:4px 4px 0}
.media-audio>i{font-size:18px;color:var(--green);width:22px;text-align:center}
.media-audio audio{height:36px;width:260px;max-width:100%}
/* Transcript caption: a quiet inset under the voice player, sized to the player, four lines until opened. */
.voice-transcript{position:relative;display:block;width:auto;max-width:272px;margin:3px 2px 1px;padding:5px 9px 5px 24px;border:0;border-radius:9px;
  background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink);font:inherit;font-size:12.5px;line-height:1.4;text-align:left;
  white-space:pre-wrap;overflow-wrap:anywhere}
.voice-transcript>i{position:absolute;left:7px;top:5px;font-size:12px;color:var(--muted)}
.voice-transcript.pending{color:var(--muted);font-style:italic}
.voice-transcript.long{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;cursor:pointer}
.voice-transcript.long:not(.expanded)::after{content:"";position:absolute;inset:auto 0 0;height:1.4em;border-radius:0 0 9px 9px;
  background:linear-gradient(transparent,color-mix(in srgb,var(--incoming) 85%,transparent))}
.voice-transcript.long.expanded{display:block;-webkit-line-clamp:unset}
.voice-transcript.long:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.voice-transcript.long:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.voice-transcribe{display:inline-flex;align-items:center;gap:5px;margin:3px 4px 1px;font-size:12px}
.voice-transcribe:disabled{opacity:.5}
.file-card,.media-note{display:flex;align-items:center;gap:10px;min-width:220px;max-width:320px;padding:8px 10px;border-radius:10px;background:#ffffffb3;border:1px solid #0000000d;color:var(--ink);text-decoration:none}
.file-card:hover{background:#fff}
.file-card>i:first-child,.media-note>i{font-size:22px;color:var(--green)}
.file-card>span,.media-note>span{flex:1;min-width:0;display:flex;flex-direction:column}
.file-card strong,.media-note strong{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-card small,.media-note small{font-size:11px;color:var(--muted)}
.file-card>i:last-child{color:var(--muted);font-size:15px}
.preview-file{gap:2px;padding:4px;max-width:360px}
.file-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:4px 6px;color:inherit;text-decoration:none}
.file-main>i{font-size:22px;color:var(--green)}
.file-main>span{display:flex;flex-direction:column;min-width:0;flex:1}
.file-action{display:flex;align-items:center;justify-content:center;width:32px;min-height:36px;flex-shrink:0;color:var(--muted);border-radius:6px;text-decoration:none}
.file-action:hover,.file-main:hover{background:var(--soft);border-radius:6px}
@media(pointer:coarse){.file-action{width:44px;min-height:44px}.stl-tool{width:44px;height:44px}}
.link-button{border:0;background:none;color:var(--green);font-weight:600;padding:0;font-size:12px}

/* Composer */
.composer{flex:none;margin:0 14px 12px;border:1px solid #dfe6ed;border-radius:12px;background:var(--surface);box-shadow:0 1px 3px #15283a0a;overflow:hidden}
.composer:focus-within{border-color:#b9dcc9}
.composer-tabs{height:34px;display:flex;align-items:stretch;gap:2px;border-bottom:1px solid var(--line);padding:0 10px}
.reply-quote{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-left:3px solid var(--green);background:var(--pale);border-radius:6px;font-size:11.5px}
.reply-quote>img,.reply-quote>i{width:34px;height:34px;object-fit:cover;flex:none;border-radius:4px;color:var(--green-dark);display:grid;place-items:center}
.reply-quote [hidden]{display:none}
.message-quote{width:100%;max-width:100%;padding:6px 10px;margin:0 0 6px;border:0;border-left:4px solid var(--green);border-radius:6px;background:rgba(0,0,0,.06);display:flex;flex-direction:column;gap:1px;font-size:12px;overflow:hidden;text-align:left;cursor:pointer}
.message.quote-target{outline:2px solid var(--green);outline-offset:3px}
.message-quote strong{color:var(--green-dark);font-size:12px;font-weight:600}
.message-quote span{display:flex;align-items:center;gap:5px;min-width:0;color:var(--muted)}.message-quote span i{flex:none}.message-quote em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-quote>span{display:flex;flex:1;flex-direction:column;min-width:0;overflow:hidden}
.reply-quote strong{color:var(--green-dark);font-size:11px}
.reply-quote span span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.reply-quote button{width:28px;height:28px;flex:none;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.reply-quote button:hover{background:#fff;color:var(--ink)}
.mode{display:flex;align-items:center;gap:5px;border:0;border-bottom:2px solid transparent;padding:0 10px;background:none;color:var(--muted);font-weight:600;font-size:12.5px;cursor:pointer}
.mode:hover{color:var(--ink)}
.mode.selected{border-bottom-color:var(--green);color:var(--green)}
.mode[data-mode="note"].selected{border-bottom-color:#b7791f;color:#b7791f}
.composer-hint{align-self:center;margin-left:auto;font-size:11px;color:var(--faint)}
.composer.note-mode{border-color:#e7cf97;background:#fffaf0}
.composer.note-mode .send-button{background:#b7791f;border-color:#b7791f}
.composer.note-mode .composer-channel{color:#b7791f}
/* Draggable pane boundaries (desktop only). */
.resizer{z-index:15;touch-action:none}
.resizer::after{content:"";position:absolute;background:transparent;transition:background .12s}
.resizer:hover::after,.resizer.dragging::after{background:var(--green)}
.col-resizer{position:absolute;top:0;bottom:0;width:11px;margin-left:-6px;cursor:col-resize}
.col-resizer::after{top:0;bottom:0;left:4px;width:3px}
.resizer-sidebar{left:var(--w-sidebar)}
.resizer-list{left:calc(var(--w-sidebar) + var(--w-list))}
.reply-resizer{flex:none;position:relative;height:9px;margin:-4px 0;cursor:row-resize}
.reply-resizer::after{left:0;right:0;top:3px;height:3px}
.details-resizer{position:absolute;left:0;top:0;bottom:0;width:11px;margin-left:-6px;cursor:col-resize;z-index:13}
.details-resizer::after{top:0;bottom:0;left:4px;width:3px}
@media (max-width:1280px){.resizer{display:none}}
.composer textarea{display:block;width:100%;resize:none;border:0;background:transparent;outline:0;padding:10px 14px 4px;min-height:var(--reply-min,44px);max-height:max(var(--reply-min,44px),60vh);line-height:1.45}
.composer textarea::placeholder{color:var(--faint)}
.composer-actions{display:flex;align-items:center;gap:10px;padding:4px 8px 8px}
.composer-tools{display:flex;gap:2px;margin-right:auto}
.composer-channel{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12px}
.send-button{display:flex;align-items:center;gap:7px;background:var(--green);border:0;color:#fff;font-weight:600;padding:0 14px;height:34px;border-radius:8px;min-width:88px;justify-content:center}
.send-button:hover:not(:disabled){background:var(--green-dark)}
.send-button:disabled{opacity:.5}
.restart-button{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid #f3b8a6;border-radius:8px;background:#fff;color:#c2410c;font-weight:600;font-size:13px}
.restart-button[hidden]{display:none}
.restart-button:hover:not(:disabled){background:#fff4ef}
.restart-button:disabled{opacity:.5}
.assist-button{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-weight:600;font-size:13px;white-space:nowrap}
.assist-button:hover:not(:disabled){background:color-mix(in srgb,var(--green) 8%,var(--surface));border-color:var(--green)}
.assist-button:disabled{opacity:.5}
/* The composer can be narrow on a wide screen (chat list + details panel), so size by the composer, not the window. */
.composer{container-type:inline-size}
@container (max-width:560px){.assist-button span{display:none}.assist-button{padding:0 10px}}
.assist-dialog textarea{display:block;width:100%;box-sizing:border-box;resize:vertical}
.restart-button.busy i{animation:spin 1s linear infinite}
.send-notice{margin:4px 10px;padding:6px 10px;border-radius:6px;font-size:12px;color:#9f443b;background:#fff2ed}
.send-notice button{border:0;background:none;text-decoration:underline;color:inherit;padding:0}
.attachment-preview{display:flex;align-items:center;gap:10px;margin:8px 10px 0;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
.attachment-thumb{width:40px;height:40px;flex:none;border-radius:6px;display:grid;place-items:center;background:#e4eaf0;color:var(--green);font-size:18px;overflow:hidden}
.attachment-thumb img{width:100%;height:100%;object-fit:cover}
.attachment-info{flex:1;min-width:0;display:flex;flex-direction:column}
.attachment-info strong{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attachment-info small{font-size:11px;color:var(--muted)}
.attachment-option{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.progress{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:4px}
.progress i{display:block;height:100%;background:var(--green);width:0;transition:width .2s}
.drop-overlay{position:absolute;inset:8px;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--green);border-radius:14px;background:#f3fbf7e6;color:var(--green);font-weight:600;pointer-events:none}
.drop-overlay i{font-size:30px}

/* Panels in the thread column */
.panel{flex:1;overflow:auto;display:grid;place-items:center;padding:20px;background:#fbfdfc}
.panel-card{width:min(460px,100%);border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--surface)}
.panel-card.center{text-align:center;width:min(380px,100%)}
.panel-card h2{margin:4px 0 8px;font-size:18px;display:flex;align-items:center;gap:8px}
.panel-card.center h2{justify-content:center}
.panel-card h3{font-size:13px;margin:16px 0 6px}
.panel-logo{width:44px;height:44px;object-fit:contain}
.panel-back{display:none;align-items:center;gap:6px;background:none;border:0;color:var(--green);padding:0 0 10px}
.panel-card ol{text-align:left;line-height:1.8;padding-left:20px;margin:10px 0}
.qr-wrap{min-height:220px;border:1px dashed var(--line);border-radius:10px;display:grid;place-items:center;margin-top:8px}
.qr-wrap img{max-width:210px}
.linked-check{font-size:38px;color:var(--green)}
.facts{margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.facts div{border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.facts dt{font-size:11px;color:var(--muted)}
.facts dd{margin:2px 0 0;font-weight:600;overflow-wrap:anywhere}
.primary-button,.danger-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;border-radius:8px;font-weight:600;font-size:12.5px}
.primary-button{border:0;background:var(--green);color:#fff}
a.primary-button{text-decoration:none}
.primary-button:hover:not(:disabled){background:var(--green-dark)}
.danger-button{border:1px solid #efc9c1;background:#fff;color:var(--danger)}
.danger-button:hover:not(:disabled){background:#fff5f2}
.primary-button:disabled,.danger-button:disabled{opacity:.5}
.panel-card.center .primary-button{margin:12px 0 4px}
.shopee-settings-card{width:min(560px,100%)}
.shopee-connector-choice{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.shopee-connector-choice button[aria-pressed=true]{background:var(--orange);color:#fff;border-color:var(--orange)}
.shopee-settings-form{display:grid;gap:9px;margin:12px 0}
.shopee-settings-form>label{display:grid;gap:4px;font-size:12px;font-weight:600}
.shopee-settings-form input:not([type=checkbox]){width:100%;min-height:36px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
.shopee-settings-form .check-label{display:flex;align-items:center;gap:8px;font-weight:400}
.shopee-settings-form .check-label input{accent-color:var(--orange)}
.shopee-settings-card .profile-form-actions{justify-content:flex-start}
.shopee-auth-link{display:inline-block;margin:8px 0;color:var(--orange);font-weight:600}
.shopee-contract-notice{padding:10px 12px;border:1px solid #f1d19c;border-radius:8px;background:#fff8e9;color:#795415;font-size:12px}
.shopee-shop-list{list-style:none;padding:0;margin:8px 0 12px}
.shopee-shop-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.shopee-shop-row>span{display:grid;gap:3px;min-width:0}
.shopee-shop-row small{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.event-list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.event-list li{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.automation-card{width:min(700px,100%);align-self:start}
.automation-intro{margin:2px 0 12px}
.automation-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:6px;overflow-x:auto;scrollbar-width:none}
.automation-tabs button{display:inline-flex;align-items:center;gap:6px;flex:none;border:0;border-bottom:2px solid transparent;background:none;padding:8px 12px;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.automation-tabs button:hover{color:var(--ink)}
.automation-tabs button[aria-selected="true"]{border-bottom-color:var(--green);color:var(--green)}
.automation-tabs b{min-width:18px;padding:0 6px;border-radius:9px;background:#fff1db;color:#895b1c;font-size:11px;line-height:18px;text-align:center}
.automation-tabs b[hidden]{display:none}
.automation-pane[hidden]{display:none}
.learning-section.first{border-top:0;margin-top:4px}
.automation-feature{margin:10px 0 0}
.automation-details{margin:2px 0 8px}
.automation-details summary{cursor:pointer;color:var(--green);font-size:12px;font-weight:600;width:max-content}
.automation-details[open] summary{margin-bottom:6px}
.auto-reply-card{flex-wrap:wrap;align-items:center}
.auto-reply-head{flex:1;min-width:0}
.auto-reply-form{flex-basis:100%;min-width:0;display:grid;gap:20px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.auto-reply-form[hidden]{display:none}
.auto-tag-settings-list{display:grid;margin-top:12px}
.auto-tag-setting{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer}
.auto-tag-setting input{accent-color:var(--green);width:18px;height:18px;flex-shrink:0}
.auto-tag-setting .task-badge{max-width:calc(100% - 70px)}
.auto-tag-setting small{margin-left:auto;color:var(--muted)}
.auto-tag-instructions{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;border:1px solid var(--line);border-radius:8px;font-size:12px;line-height:1.6}
.auto-tag-rules{margin-top:14px}
.auto-tag-rules summary{width:auto}
.auto-reply-form fieldset{min-width:0;margin:0;padding:0;border:0;display:grid;gap:10px}
.auto-reply-form legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:600}
.auto-reply-form legend label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.auto-reply-form textarea,.auto-reply-form input[type="text"],.auto-reply-form input[type="number"]{width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font:inherit;font-size:13px;font-weight:400}
.auto-reply-form textarea{resize:vertical}
.ar-inline{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.ar-inline input[type="number"]{width:70px}
.ar-rule-list{display:grid;gap:12px}
.ar-rule{min-width:0;display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
.ar-rule-heading{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ar-rule-heading strong{flex:1;font-size:13px;white-space:nowrap}
.ar-rule-enabled{display:flex;align-items:center;gap:6px;min-height:44px;font-size:12px;cursor:pointer}
.ar-rule-field{min-width:0;display:grid;gap:6px;font-size:12px;font-weight:600}
.ar-channel{max-width:240px}
.ar-rule select{width:100%;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font:inherit;font-size:13px;font-weight:400}
.ar-rule-help{margin:0;line-height:1.6}
.ar-picture{min-width:0;display:grid;gap:6px;font-size:12px;font-weight:600}
.ar-picture input{min-width:0;max-width:100%;font-weight:400}
.ar-picture-preview{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ar-add-rule,.ar-rule .secondary-button{min-height:44px}
.ar-picture-preview img{width:80px;height:80px;object-fit:cover;border-radius:6px}
.ar-picture-preview img[hidden],.ar-picture-preview button[hidden]{display:none}
.auto-reply-form .tag-form-actions{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:700px){.auto-reply-form textarea,.auto-reply-form input[type="text"],.ar-rule select{font-size:16px}.auto-reply-form .tag-form-actions button{min-height:44px}.ar-rule{padding:12px}}
.auto-reply-label{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--green);margin-bottom:3px}
.learning-section{border-top:1px solid var(--line);margin-top:18px;padding-top:6px}
.learn-key-form{margin:14px 0}
.learn-key-form label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.learn-key-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.learn-key-controls input{flex:1 1 250px;min-width:0;height:36px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font:inherit}
.learn-key-controls button{height:36px}
.learn-key-controls .secondary-button{border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:0 14px;font:inherit;font-size:12.5px;font-weight:600}
.learn-key-controls .secondary-button:disabled{opacity:.5}
.learn-key-form p{margin:6px 0 0}
.learning-section #learnButton{margin:6px 0 2px}
.learn-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.learn-actions .secondary-button.small{height:34px;margin:6px 0 2px}
.learning-memory{margin-top:14px}
.learning-memory h4{margin:15px 0 5px;font-size:13px}
.learning-memory p,.learning-memory li{font-size:12.5px;line-height:1.55}
.learning-memory ul,.learning-memory ol{margin:5px 0 10px;padding-left:20px}
.learning-memory li{margin:4px 0}
.memory-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer}
.memory-card:hover{border-color:#cfe8da;background:var(--pale)}
.memory-card-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--pale);color:var(--green);font-size:17px}
.memory-card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.memory-card-text strong{font-size:14px}
.memory-card-view{flex:none;display:inline-flex;align-items:center;gap:5px;color:var(--green);font-size:12px;font-weight:600}
.memory-dialog[open]{display:flex;flex-direction:column}
.memory-dialog .learning-memory{overflow:auto;margin-top:4px}
.memory-dialog .learning-memory h4:first-child{margin-top:4px}
.auto-tag-row{display:flex;gap:12px;align-items:flex-start;margin:14px 0 4px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.auto-tag-row strong{font-size:13px}
.auto-tag-row p{margin:3px 0 0}
.switch{position:relative;flex:none;width:40px;height:22px;display:inline-block}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch input:disabled{cursor:not-allowed}
.switch-slider{position:absolute;inset:0;border-radius:22px;background:#c7d0dc;transition:background .15s}
.switch-slider:before{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px #0003}
.switch input:checked+.switch-slider{background:var(--green)}
.switch input:checked+.switch-slider:before{transform:translateX(18px)}
.switch input:disabled+.switch-slider{opacity:.5}
.switch input:focus-visible+.switch-slider{outline:2px solid var(--green);outline-offset:2px}
.tag-suggestions{margin-top:14px;border-top:1px solid var(--line);padding-top:8px}
.tag-suggestions h4{margin:6px 0 2px;font-size:13px}
.tag-suggestion{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.tag-suggestion .muted{flex:1;min-width:130px}
.secondary-button.small{border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:5px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.secondary-button.small:hover{border-color:var(--green);color:var(--green)}
.secondary-button.small:disabled{opacity:.5}
.priority{display:inline-block;margin-right:4px;padding:0 6px;border-radius:9px;font-size:10.5px;font-weight:600;line-height:17px;text-transform:uppercase;letter-spacing:.02em;background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.priority-high{background:var(--orange);color:#fff;border-color:var(--orange)}

/* Details */
.details{border-left:1px solid var(--line);overflow:auto;background:var(--surface)}
.details-header{height:52px;padding:0 12px 0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.details-header h2{font-size:15px;margin:0}
.details-close{display:none}
.details-content{padding:14px 16px}
.customer-identity{display:flex;gap:14px;align-items:flex-start;padding-bottom:14px}
.identity-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.identity-text strong{font-size:15px;overflow-wrap:anywhere}
.detail-line{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;min-width:0}
.detail-line span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{align-self:flex-start;border-radius:10px;background:var(--pale);color:#177456;font-size:11px;font-weight:600;padding:3px 9px;margin-top:2px}
.stats{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0}
.stats>div{flex:1;display:flex;flex-direction:column;gap:1px;padding-left:10px;border-left:1px solid var(--line);min-width:0}
.stats>div:first-child{padding-left:0;border:0}
.stats strong{font-size:14px}
.stats span{font-size:11px;color:var(--muted)}
.detail-section{padding:14px 0;border-bottom:1px solid var(--line)}
.detail-section h3{font-size:13px;margin:0 0 10px;display:flex;align-items:center;gap:6px}
.detail-section h3 .soon{margin-left:0}
.merge-notice{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:9px 10px;border-radius:8px;background:#fff8ec;color:#6f4a14;font-size:12px;line-height:1.45}
.merge-notice.merged{background:var(--pale);color:#1f5c45}
.merge-notice>i{font-size:15px;margin-top:1px}
.merge-notice span{flex:1}
.merge-notice .link-button{white-space:nowrap;flex:none}
.merge-notice a.link-button{text-decoration:underline}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-head h3{margin:0}
.profile-view{display:flex;flex-direction:column;gap:8px}
.profile-row{display:flex;gap:8px;font-size:12.5px}
.profile-row .bi{color:var(--faint);font-size:14px;width:16px;flex:none;text-align:center;margin-top:1px}
.profile-row span{min-width:0;overflow-wrap:anywhere}
.profile-row.notes span{white-space:pre-wrap;color:var(--muted)}
.profile-empty{color:var(--faint);font-size:12.5px}
.profile-tags{display:flex;flex-wrap:wrap;gap:5px}
.profile-tags .tag{background:#eef1f5;color:#3b4a63}
.profile-form{display:flex;flex-direction:column;gap:9px}
.profile-form label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;color:var(--muted)}
.profile-form input,.profile-form textarea{border:1px solid #cfd9df;border-radius:7px;padding:7px 9px;font-size:13px;font-weight:400;color:var(--ink);outline-color:var(--green);resize:vertical}
.profile-form small{font-weight:400;color:var(--faint);font-size:11px}
.start-chat{width:100%;display:flex;align-items:center;gap:11px;border:0;border-bottom:1px solid #eef2f6;background:#f3fbf7;text-align:left;padding:9px 12px 9px 14px;color:var(--ink)}
.start-chat:hover:not(:disabled){background:#e8f6ee}
.start-chat .avatar{background:var(--pale);color:var(--green);font-size:17px}
.start-chat strong{font-size:13.5px;font-weight:600;color:var(--green-dark)}
.start-chat.hint{background:#fff8ec;color:#895b1c;font-size:12.5px;gap:8px;padding:10px 14px}
.profile-form-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:2px}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.action-button{height:34px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:0 10px;font-size:12px;text-align:left;white-space:nowrap;overflow:hidden}
.action-button:hover{background:#f6faf8}
.action-button.danger{color:var(--danger)}
.shared-media{display:flex;flex-direction:column;gap:8px}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.media-grid button,.media-grid a{aspect-ratio:1;border:0;padding:0;border-radius:6px;overflow:hidden;background:#e4eaf0;display:grid;place-items:center;color:var(--green);font-size:20px;text-decoration:none}
.media-grid img{width:100%;height:100%;object-fit:cover}
.file-list{display:flex;flex-direction:column;gap:4px}
.file-list a{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:12px}
.file-list a:hover{background:var(--soft)}
.file-list a span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-list a small{color:var(--muted)}
.data-note{margin:12px 0 0;line-height:1.5}

/* Overlays */
.pdf-viewer{width:min(1200px,calc(100vw - 24px));height:calc(100dvh - 24px);max-width:none;max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);overflow:hidden}
.pdf-viewer[open]{display:flex;flex-direction:column}
.pdf-viewer::backdrop{background:#0d1520bd}
.pdf-viewer header{display:flex;align-items:center;gap:10px;padding:10px 12px;flex-shrink:0;border-bottom:1px solid var(--line)}
.pdf-viewer h2{flex:1;min-width:0;margin:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdf-viewer header>a{flex-shrink:0;text-decoration:none}
.pdf-viewer>p{margin:12px}
.pdf-viewer iframe{flex:1;min-height:0;width:100%;border:0;background:var(--canvas)}
.stl-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:var(--canvas)}
.stl-viewport{flex:1;min-height:0;overflow:hidden;touch-action:none}
.stl-viewport canvas{display:block;width:100%;height:100%}
.stl-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:13px;pointer-events:none}
.stl-spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:stl-spin .8s linear infinite}
@keyframes stl-spin{to{transform:rotate(360deg)}}
.stl-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);margin:0;padding:5px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:12px;white-space:nowrap;pointer-events:none;transition:opacity .4s}
.stl-hint.fade{opacity:0}
.stl-tools{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px}
.stl-tool{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:16px;display:grid;place-items:center}
.stl-tool:hover:not(:disabled){border-color:var(--green)}.stl-tool:disabled{opacity:.4}
.stl-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);font-size:18px;display:grid;place-items:center;opacity:.92;box-shadow:0 2px 8px #0003}
.stl-nav.prev{left:12px}.stl-nav.next{right:12px}.stl-nav:hover:not(:disabled){opacity:1;border-color:var(--green)}.stl-nav:disabled{opacity:.35}
.stl-nav:focus-visible,.stl-tool:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.stl-nav[hidden],.stl-position[hidden],.stl-hint[hidden],.stl-loading[hidden]{display:none}
.stl-position{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px;border:1px solid var(--line)}
.pdf-viewer>p.stl-status{margin:0;padding:9px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.stl-status:empty{display:none}
.slice-panel{flex-shrink:0;padding:10px 14px 12px;border-top:1px solid var(--line)}
.slice-panel[hidden]{display:none}
.slice-fields{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.slice-fields label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.slice-fields select,.slice-fields input{height:36px;min-width:150px;max-width:240px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:13px}
.slice-fields input{min-width:0;width:76px}
#sliceSupports{min-width:96px}
.slice-fields .primary-button{height:36px}
.slice-fields .send-quote{height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 12px}.slice-fields .send-quote:disabled{opacity:.5}
.quote-preview{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--ink)}.quote-preview:empty{display:none}
.slice-result{margin-top:10px;font-size:13px;color:var(--ink)}.slice-result:empty{display:none}
.slice-result.error{color:#c0392b}
.slice-stats{display:flex;flex-wrap:wrap;gap:8px}
.slice-stat{min-width:110px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.slice-stat span{display:block;font-size:12px;color:var(--muted)}
.slice-stat strong{display:block;font-size:20px;line-height:1.25;font-variant-numeric:tabular-nums}
.slice-settings{margin:8px 0 0;color:var(--muted);font-size:12px}
.slice-warning{margin:6px 0 0;color:#b26a00;font-size:12.5px}
:root[data-theme="dark"] .slice-warning{color:#f0b44c}
@media(max-width:680px){.slice-fields label{flex:1 1 40%}.slice-fields select{min-width:0;max-width:none;width:100%}.slice-fields button{flex:1 1 100%}.stl-hint{display:none}.slice-stat{flex:1 1 28%;min-width:0}}
@media (prefers-reduced-motion:reduce){.stl-spinner{animation:none}.stl-hint{transition:none}}
.lightbox{position:fixed;inset:0;z-index:20;background:#0d1520e6;display:grid;place-items:center;padding:48px 16px 16px}
/* The whole picture always fits the screen: a grid row grows to its content, so cap by the viewport, not 100%. */
.lightbox img{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 64px);object-fit:contain;border-radius:6px}
.lightbox-actions{position:absolute;top:10px;right:10px;display:flex;gap:6px}
.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:30;background:#1f3940;color:#fff;border-radius:8px;padding:9px 14px;box-shadow:0 10px 25px #0002;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Login */
.login-screen{min-height:100dvh;display:grid;place-items:center;background:#f7faf8;padding:20px}
.login-card{width:min(100%,360px);display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 15px 40px #213c2a12}
.login-card img{width:44px;height:44px;object-fit:contain;margin-bottom:12px}
.login-card h1{font-size:22px;margin:0 0 6px}
.login-card p{margin:0 0 20px;color:var(--muted)}
.login-card label{font-weight:600;margin-bottom:6px}
.login-card input{border:1px solid #cfd9df;border-radius:8px;padding:10px;margin-bottom:12px;outline-color:var(--green)}
.login-card button{background:var(--green);color:#fff;border:0;border-radius:8px;padding:10px;font-weight:600}
.login-card small{color:var(--danger);min-height:16px;margin-top:8px}

/* Task inbox: customer details open on demand, leaving room for the conversation. */
.app,.app.details-hidden,.app:has(.details[hidden]){grid-template-columns:var(--w-sidebar) var(--w-list) minmax(0,1fr)}
.details,.app.details-hidden .details{display:none}
.app.details-open .details{display:block;position:fixed;right:0;top:0;bottom:0;width:min(var(--w-details),92vw);z-index:12;box-shadow:-8px 0 28px #17233a22}
.details-close{display:grid}
.list-header{height:76px;padding-left:20px}
.list-header h1{font-size:23px}
.conversation-search{height:42px;margin:0 14px 12px;background:var(--soft);font-size:13px}
.conversation{padding:13px 14px;min-height:86px;align-items:flex-start}
.conversation.selected{box-shadow:inset 3px 0 var(--green)}
.conversation>.avatar{margin-top:2px}
.conv-top strong{font-size:14.5px}
.conversation-star,.conversation-pin{flex:none;font-size:12px;color:#d49a21}
.conversation-pin{color:var(--muted)}
.conv-preview{font-size:13.5px}
.conversation .avatar{width:44px;height:44px;font-size:16px}
.thread-header{height:82px;padding-left:22px}
.person-summary strong{font-size:19px}
.person-summary .avatar{width:46px;height:46px;font-size:17px}
.person-sub{font-size:13px}
.message{font-size:15px;padding:10px 14px;line-height:1.5}
.task-filter-bar{position:relative;padding:0 14px 12px;flex:none}
.task-filter-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:1px solid var(--line);border-radius:10px;background:var(--panel,#fff);color:var(--ink);padding:8px 12px;font-size:13px;line-height:1.3;cursor:pointer}
.task-filter-toggle:hover{border-color:var(--green)}
.task-filter-toggle .bi-chevron-down{font-size:11px;color:var(--muted);transition:transform .15s}
.task-filter-toggle[aria-expanded="true"] .bi-chevron-down{transform:rotate(180deg)}
.task-filter-current{display:inline-flex;align-items:center;gap:7px;min-width:0}
.task-filter-current #taskFilterLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-filter-current b{font-size:11px;font-weight:600;padding:1px 7px;background:var(--tag-bg,#eef0f4);border-radius:8px}
.task-filters{position:absolute;left:14px;right:14px;top:calc(100% - 4px);z-index:14;display:flex;flex-direction:column;gap:4px;padding:6px;max-height:280px;overflow:auto;background:var(--panel,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px #17233a1f}
.task-filters[hidden]{display:none}
.task-filter{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;border-radius:8px;background:none;color:var(--ink);padding:8px 10px;font-size:13px;line-height:1.3;cursor:pointer}
.task-filter:hover{background:var(--tag-bg,#f2f4f8)}
.task-filter i{font-size:8px;color:var(--tag-ink,inherit)}
.task-filter b{margin-left:auto;font-size:11px;padding:1px 7px;background:#00000010;border-radius:8px}
.task-filter.selected{background:var(--tag-bg);color:var(--tag-ink);font-weight:600}
.task-filter.selected b{background:#ffffff88}
.manage-tags-link{border:0;background:none;padding:9px 10px;margin-top:2px;border-top:1px solid var(--line);color:var(--green);font-size:12px;font-weight:600;text-align:left;cursor:pointer}
.tag-purple{--tag-bg:#f0e8ff;--tag-ink:#6432ac;--tag-border:#dbc9f5}
.tag-blue{--tag-bg:#e7efff;--tag-ink:#245ab5;--tag-border:#cbdbfb}
.tag-amber{--tag-bg:#fff3d9;--tag-ink:#8d5708;--tag-border:#efdaae}
.tag-green{--tag-bg:#e1f5eb;--tag-ink:#08774f;--tag-border:#bde6d2}
.tag-cyan{--tag-bg:#e1f5fa;--tag-ink:#096f89;--tag-border:#b9e5ee}
.tag-rose{--tag-bg:#fce8ed;--tag-ink:#a3375b;--tag-border:#f1c9d5}
.tag-slate{--tag-bg:#eff2f6;--tag-ink:#4c5d75;--tag-border:#dae0e8}
.customer-task-tags{display:flex;gap:5px;align-items:center;margin-top:7px;min-width:0;overflow:hidden}
.task-badge{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;border-radius:14px;padding:3px 8px;background:var(--tag-bg);color:var(--tag-ink);font-size:11px;line-height:1.5;white-space:nowrap}
.task-badge>span{overflow:hidden;text-overflow:ellipsis}
.task-badge>i{font-size:7px;flex:none}
.task-badge button{display:grid;place-items:center;border:0;background:none;padding:0;color:inherit;font-size:17px;width:20px;height:22px;flex:none;border-radius:4px}
.task-badge button:hover{background:#ffffff99}
.extra-tags{font-size:10px;color:var(--muted);flex:none}
.task-tag-strip{position:relative;display:flex;align-items:center;gap:10px;padding:12px 20px;min-height:64px;border-bottom:1px solid var(--line);flex:none;z-index:7;background:#fff}
.task-tag-strip>strong{font-size:13px;white-space:nowrap}
.active-task-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;max-height:96px;overflow:auto;padding:2px 0}
.active-task-tags .task-badge{font-size:12px}
.no-task-tags{color:var(--muted);font-size:12px}
.add-task-tag{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;flex:none;margin-left:auto;padding:7px 10px;border:1px solid #b5dccb;border-radius:7px;background:#fff;color:var(--green);font-size:12px;font-weight:600}
.task-tag-picker{position:absolute;top:calc(100% - 2px);right:20px;width:min(310px,calc(100% - 24px));border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 12px 32px #17233a20;padding:12px;max-height:calc(100dvh - 250px);overflow:auto}
.tag-search{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--soft);color:var(--muted)}
.tag-search input{border:0;outline:0;background:none;min-width:0;width:100%;font-size:13px}
.task-tag-choices{margin:8px 0;max-height:250px;overflow:auto}
.task-tag-choice{display:flex;gap:10px;align-items:center;padding:10px 6px;border-radius:6px;cursor:pointer;font-size:13px}
.task-tag-choice:hover{background:var(--soft)}
.task-tag-choice>span:last-child{overflow-wrap:anywhere}
.task-tag-choice input{width:17px;height:17px;accent-color:var(--green);flex:none;margin:0}
.tag-dot{color:var(--tag-ink);font-size:10px}
.tag-create-button{display:flex;gap:10px;align-items:center;padding:12px 6px 4px;border:0;border-top:1px solid var(--line);width:100%;background:#fff;color:var(--green);font-weight:600}
.tag-error{color:var(--danger);font-size:12px;margin:6px 0 0;overflow-wrap:anywhere}
.tag-error:empty{display:none}
.tag-manager{width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:22px;border:1px solid var(--line);border-radius:12px;color:var(--ink);box-shadow:0 20px 60px #17233a25}
.tag-manager::backdrop{background:#17233a55}
.forward-dialog[open]{display:flex;flex-direction:column;gap:8px}
.forward-dialog>label{font-size:12px;font-weight:600;color:var(--muted)}
.forward-dialog>select{padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.forward-dialog .tag-form-actions{margin-top:2px}
.tag-manager header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.tag-manager h2{font-size:19px;margin:0}
.tag-manager header p{color:var(--muted);font-size:12px;margin:5px 0 12px}
.managed-tag-list{max-height:280px;overflow:auto}
.managed-tag-row{display:flex;align-items:center;gap:5px;padding:9px 0;border-bottom:1px solid var(--line)}
.managed-tag-row>.task-badge{max-width:48%}
.managed-tag-row small{margin-left:auto;color:var(--muted);white-space:nowrap;font-size:10px}
.managed-tag-row .staff-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.tag-manager form{display:grid;gap:7px;margin-top:16px}
.tag-manager h3{font-size:14px;margin:0 0 3px}
.tag-manager form label{font-size:12px;font-weight:600}
.tag-manager form input,.tag-manager form select{min-width:0;padding:9px;border:1px solid var(--line);border-radius:7px;background:#fff}
.tag-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:7px}
.tag-manager form textarea{min-width:0;padding:9px;border:1px solid var(--line);border-radius:7px;background:#fff;resize:vertical;line-height:1.45}
#draftCorrectionFields{display:grid;gap:7px}
#draftCorrectionFields[hidden]{display:none}
.training-dialog{width:min(560px,calc(100vw - 24px));overflow:auto}
.training-dialog form{margin-top:10px}
.training-feedback-fields{display:grid;gap:7px}
.training-feedback-fields[hidden]{display:none}
.training-switch-row{display:flex;align-items:center;gap:10px;margin-top:4px}
.training-switch-row label:last-child{font-weight:400}
.training-keywords{display:block;margin:2px 0 0;color:var(--muted);font-size:11px;white-space:normal}
.training-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.training-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 8px}
.training-toolbar .secondary-button.small{height:34px;display:inline-flex;align-items:center;gap:6px}
.training-chips{display:flex;flex-wrap:wrap;gap:6px}
.training-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:14px;padding:2px 9px;font-size:11.5px;background:var(--soft)}
.training-chip b{font-weight:600;color:var(--muted)}
.training-chip.always{border-color:#cfe8da;background:var(--pale);color:var(--green-dark)}
.training-test{margin:16px 0 4px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.training-test h4,.training-list-head h4{margin:0 0 8px;font-size:13px}
.training-test form,#trainingFeedbackForm{display:grid;gap:6px}
.training-test label,#trainingFeedbackForm label{font-size:12px;font-weight:600}
.training-test textarea,.training-test select,.training-filters select{min-width:0;padding:8px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;resize:vertical;line-height:1.45}
.tuning-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.tuning-row label{display:block;margin-bottom:4px}
.tuning-row select,.tuning-row input{width:100%;min-width:0;padding:8px 9px;border:1px solid var(--line);border-radius:7px;background:#fff}
.tuning-row input:disabled{opacity:.5}
@media(max-width:560px){.tuning-row{grid-template-columns:1fr}}
.training-result{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;display:grid;gap:12px}
.training-answer{padding:10px 12px;border-left:3px solid var(--green);border-radius:6px;background:var(--surface)}
.training-answer p{margin:5px 0 6px;white-space:pre-wrap;overflow-wrap:anywhere}
.training-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:16px}
.training-list-head h4{margin:0}
.training-filters{display:flex;gap:6px;flex-wrap:wrap}
.training-filters select{padding:5px 8px;font-size:12px}
.training-entries{margin-top:6px}
.training-entry{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.training-entry .switch{margin-top:2px}
.training-entry.off .training-entry-text{opacity:.55}
.training-entry-text{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px}
.training-entry-text strong{font-size:13px;overflow-wrap:anywhere}
.training-entry-text p{flex-basis:100%;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
.training-kind{border-radius:9px;padding:0 6px;font-size:10.5px;font-weight:600;line-height:17px;text-transform:uppercase;letter-spacing:.02em;border:1px solid var(--line);background:var(--soft);color:var(--muted)}
.training-kind.feedback{border-color:#f0dcae;background:#fff8e8;color:#8a5a00}
.training-kind.task{border-color:#cfe8da;background:var(--pale);color:var(--green-dark)}
.training-thumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.training-thumb{position:relative;width:72px;height:72px;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:grid;place-items:center;background:var(--soft);color:var(--muted)}
.training-thumb img{width:100%;height:100%;object-fit:cover}
.training-thumb.pending{align-content:center;gap:2px;padding:4px;text-align:center}
.training-thumb.pending small{font-size:9.5px;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.training-thumb button{position:absolute;top:3px;right:3px;width:20px;height:20px;display:grid;place-items:center;border:0;border-radius:50%;background:#17233acc;color:#fff;font-size:14px;padding:0;cursor:pointer}

/* Responsive */
@media (max-width:1280px){
  .app,.app.details-hidden,.app:has(.details[hidden]){grid-template-columns:180px 320px minmax(0,1fr)}
  .details{display:none}
  .app.details-open .details{display:block;position:fixed;right:0;top:0;bottom:0;width:min(320px,88vw);z-index:6;box-shadow:-10px 0 30px #17233a22}
  .details-close{display:grid}
}
@media (max-width:960px){
  .app,.app.details-hidden,.app:has(.details[hidden]){grid-template-columns:60px 290px minmax(0,1fr)}
  .sidebar{padding:0 8px}
  .brand{justify-content:center;padding:14px 0 10px}
  .brand span,.nav-heading,.nav-row span,.nav-row b,.nav-row .soon,.local-profile>span:last-child{display:none}
  .nav-row{justify-content:center;padding:0}
  .nav-row .status-dot{position:absolute;top:6px;right:6px}
  .nav-row.active:before{left:-8px}
  .sidebar-bottom{flex-direction:column}
  .composer-hint{display:none}
}
@media (max-width:680px){
  .app,.app.details-hidden{display:block;min-height:0}
  .sidebar{display:none}
  .conversation-list{height:100dvh;border-right:0}
  .thread{display:none;height:100dvh}
  .app.mobile-open-chat .conversation-list{display:none}
  .app.mobile-open-chat .thread{display:flex}
  .mobile-back,.mobile-tool{display:grid}
  .panel-back{display:flex}
  .thread-header{padding:0 8px;gap:4px}
  .person-summary{gap:8px;flex:1}
  .thread-actions{gap:2px}
  #closeConversation span{display:none}
  .thread-actions .icon-button{border-color:transparent}
  .bulk-media-bar{align-items:flex-start;flex-direction:column;padding:7px 10px}
  .bulk-media-bar>div{width:100%;flex-wrap:wrap}
  .message-stream{padding:12px 10px}
  .message{max-width:86%}
  .composer{margin:0 6px 6px}
  .composer-channel{display:none}
  .restart-button span{display:none}
  .attachment-option{display:none}
  .facts{grid-template-columns:1fr}
  .task-tag-strip{padding:10px;gap:7px;flex-wrap:wrap}
  .task-tag-strip>strong{font-size:12px}
  .active-task-tags{max-width:calc(100% - 70px)}
  .add-task-tag{margin-left:auto}
  .task-tag-picker{right:10px;max-height:calc(100dvh - 220px)}
  .tag-manager{padding:16px}
}
@media (max-width:390px){
  .person-sub .sub-dot,.person-sub #threadPhone{display:none}
}
.message-provenance { margin-top: .4rem; color: #586778; font-size: .7rem; line-height: 1.35; }
.reply-queue-summary{padding:9px 14px;background:#fff5e6;color:#805500;font-size:12px;border-bottom:1px solid #f3d7a5}
.queue-filter-button{margin-left:auto;padding:5px 8px;border:1px solid #d8e0e8;border-radius:7px;background:#fff;color:#334b60;font-size:11px;font-weight:600;cursor:pointer}.queue-filter-button[aria-pressed="true"]{border-color:#e2a844;background:#fff2d6;color:#744d00}.queue-filter-button b{display:inline-block;margin-left:3px;padding:1px 5px;border-radius:9px;background:#d45d2a;color:#fff}
#needsReplyBadge{min-width:18px;text-align:center;border-radius:12px;background:#d45d2a;color:#fff;font-size:11px;padding:2px 5px}
.reply-work-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;background:#fff8e8;border-bottom:1px solid #e9d8a7;font-size:12px}
.reply-work-bar.overdue{background:#fff0e5}.reply-work-bar.critical{background:#ffe9e9;color:#a12828}
.reply-work-bar label{display:flex;align-items:center;gap:6px}.reply-work-bar select{max-width:150px;padding:5px;border:1px solid #cbd4de;border-radius:6px;background:#fff}
.job-dialog{width:min(850px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #d8e0e8;border-radius:12px;color:#182b40;box-shadow:0 20px 60px #17233a40}
.job-dialog::backdrop{background:#10223688}.job-dialog header{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 20px;background:#fff;border-bottom:1px solid #e1e7ed}
.job-dialog header h2{margin:0;font-size:19px}.job-dialog header p{margin:4px 0 0}.job-dialog-body{padding:16px 20px 24px;overflow:auto;max-height:calc(100dvh - 110px)}
.job-dialog section,.job-dialog form.job-form{border-top:1px solid #e4e8ed;padding-top:14px;margin-top:16px}.job-dialog h3{font-size:15px;margin:0 0 12px}.job-dialog h4{font-size:13px;margin:16px 0 8px}
.job-picker,.section-head{display:flex;align-items:center;gap:10px}.job-picker select{flex:1}.section-head{justify-content:space-between}
.job-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.job-fields label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600}.job-wide{grid-column:1/-1}
.job-dialog input,.job-dialog select,.job-dialog textarea{box-sizing:border-box;width:100%;padding:8px;border:1px solid #cbd4de;border-radius:7px;background:#fff;color:#17233a;font:inherit}.job-dialog textarea{resize:vertical}.job-dialog button{cursor:pointer}.job-dialog form>.primary-button,.job-dialog section>.primary-button{margin-top:10px}
.job-record-list{display:grid;gap:6px}.job-record{display:block;width:100%;padding:9px 10px;border:1px solid #e0e6ed;border-radius:7px;background:#f9fafc;text-align:left;font:inherit;font-size:12px}
.quote-line{display:grid;grid-template-columns:110px minmax(140px,2fr) minmax(90px,1fr) 80px 90px 90px 70px auto;gap:5px;align-items:center;margin:6px 0}.quote-line input,.quote-line select{min-width:0}.quote-line [hidden]{display:none}
#quotePreview{margin-top:16px;padding:12px;border:1px solid #afd7be;border-radius:8px;background:#f5fcf7}#quotePreviewText{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:13px;line-height:1.5}
.bot-quote-list{display:grid;gap:14px}.bot-quote{padding:12px;border:1px solid #e0e6ed;border-radius:8px;background:#f9fafc}.bot-quote h4{margin:0 0 10px}
.bot-quote-table-wrap{overflow-x:auto}.bot-quote-table{width:100%;border-collapse:collapse;font-size:12px}.bot-quote-table th,.bot-quote-table td{padding:6px 8px;border-bottom:1px solid #e0e6ed;text-align:left;white-space:nowrap}.bot-quote-table thead th{color:#5b6b7c;font-weight:600}
.bot-quote-orientation{margin:10px 0}.bot-quote-orientation img{display:block;max-width:min(100%,320px);border:1px solid #e0e6ed;border-radius:6px;background:#fff}.bot-quote-orientation figcaption{margin-top:4px;font-size:12px}
.bot-grade{display:grid;grid-template-columns:130px auto minmax(120px,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid #e9edf2;font-size:12px}.bot-grade-name{font-weight:600}.bot-grade-status{grid-column:1/-1}.bot-grade-status:empty{display:none}
.bot-grade-scores{display:flex;gap:4px}.bot-grade-scores button{min-width:30px;min-height:30px;border:1px solid #cbd4de;border-radius:6px;background:#fff;color:#17233a;font:inherit;font-weight:600}.bot-grade-scores button[aria-pressed="true"]{border-color:#a87317;background:#f9e6bc;color:#704908}
@media(max-width:680px){.bot-grade{grid-template-columns:1fr auto}.bot-grade textarea{grid-column:1/-1}}
[data-theme="dark"] .bot-quote,[data-theme="dark"] .bot-grade-scores button{background:var(--panel);color:var(--ink);border-color:var(--line)}[data-theme="dark"] .bot-grade-scores button[aria-pressed="true"]{background:#443824;color:#ffd291}
@media(max-width:680px){.reply-work-bar{padding:6px;gap:5px}.reply-work-bar .secondary-button{font-size:11px}.job-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}.job-dialog-body{padding:12px}.job-fields{grid-template-columns:1fr}.job-wide{grid-column:auto}.quote-line{grid-template-columns:repeat(2,minmax(0,1fr))}.quote-line input,.quote-line select{width:100%}}
/* Shopee's read-only order panel sits beside the selected customer's conversation. */
.shopee-orders{display:flex;flex-direction:column;overflow:hidden;border-left:1px solid var(--line);background:#fafafa}
.shopee-orders[hidden]{display:none}
.shopee-orders-header{display:flex;align-items:center;gap:6px;padding:14px 16px;background:#fff;border-bottom:1px solid var(--line)}
.shopee-orders-header h2{font-size:14px;color:var(--orange);margin:0 auto 0 0;border-bottom:2px solid var(--orange);padding-bottom:6px}
.shopee-order-filters{display:flex;overflow-x:auto;gap:16px;padding:10px 16px;background:#fff;flex-shrink:0}
.shopee-order-filters button{border:0;background:none;white-space:nowrap;font-size:11px;color:var(--muted);padding:0 0 4px}
.shopee-order-filters button[aria-pressed=true]{color:var(--orange);font-weight:600}
.shopee-order-status{margin:0;padding:8px 16px;font-size:11px;color:var(--muted)}
.shopee-order-cards{overflow:auto;flex:1;min-height:0}
.shopee-order-card{padding:16px;background:#fff;margin:0 0 12px}
.shopee-order-card>header{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}
.shopee-order-card>header i{color:#4d89ff}
.shopee-order-card>header button{border:0;background:none;color:#4084e6;padding:0;font-size:11px}
.shopee-order-number{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted);padding:5px 0 12px;border-bottom:1px solid #f0f2f5;flex-wrap:wrap;overflow-wrap:anywhere}
.shopee-order-products{padding:16px 0;border-bottom:1px dashed var(--line)}
.shopee-order-product{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;margin-bottom:18px;font-size:11px}
.shopee-order-product:last-child{margin-bottom:0}
.shopee-order-product img,.order-no-image{width:48px;height:48px;object-fit:contain;background:var(--soft)}
.order-no-image{display:grid;place-items:center;color:var(--muted)}
.shopee-order-product strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;font-weight:600}
.shopee-order-product small{display:block;color:var(--muted);margin-top:3px;font-size:10px}
.shopee-preorder{display:inline-block;background:#eafffa;color:#00a98f;padding:2px 5px;font-size:10px;margin-top:3px}
.shopee-item-price{text-align:right;white-space:nowrap}
.shopee-order-facts{padding-top:10px}
.shopee-order-detail{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:11px}
.shopee-order-detail>span{color:var(--muted);flex-shrink:0}
.shopee-order-detail i{margin-right:8px}
.shopee-order-detail strong{font-weight:400;text-align:right;overflow-wrap:anywhere}
.shopee-order-detail:first-child strong{font-weight:700;color:var(--orange)}
.shopee-orders footer{padding:12px 16px;border-top:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px}
.shopee-orders footer small{font-size:10px;color:var(--muted)}
.shopee-order-empty{padding:16px;color:var(--muted);font-size:12px}
@media(min-width:1180px){.app.shopee-orders-open,.app.shopee-orders-open:has(.details[hidden]){grid-template-columns:var(--w-sidebar) var(--w-list) minmax(300px,1fr) 380px}}
@media(min-width:1180px) and (max-width:1280px){.app.shopee-orders-open,.app.shopee-orders-open:has(.details[hidden]){grid-template-columns:180px 300px minmax(300px,1fr) 360px}}
@media(max-width:1179px){.shopee-orders{position:fixed;right:0;top:0;bottom:0;z-index:15;width:min(380px,100vw);box-shadow:-8px 0 28px #17233a22}}
@media(max-width:680px){.shopee-orders-header{padding:10px 12px}.shopee-orders footer{padding:10px 12px}}

/* The reference layout keeps customer details in the fourth pane on wide screens. */
@media (min-width:1281px){
  .app:not(.details-hidden):not(:has(.details[hidden])){grid-template-columns:var(--w-sidebar) var(--w-list) minmax(0,1fr) var(--w-details)}
  .app:not(.details-hidden) .details,.app.details-open:not(.details-hidden) .details{display:block;position:relative;inset:auto;width:auto;z-index:auto;box-shadow:none}
  .details-close{display:none}
}
.theme-toggle{flex:none}
@media(min-width:961px){
  .app.sidebar-collapsed{--w-sidebar:64px!important}
  .sidebar-collapsed .sidebar-header{flex-direction:column;padding-bottom:6px}
  .sidebar-collapsed .sidebar-header .brand{flex:none;padding:12px 0 2px}
  .sidebar-collapsed .brand span,.sidebar-collapsed .nav-heading,.sidebar-collapsed .nav-row b,.sidebar-collapsed .local-profile>span:last-child{display:none}
  .sidebar-collapsed .nav-row{justify-content:center;padding:0}
  .sidebar-collapsed .nav-row>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sidebar-collapsed .nav-row .status-dot{position:absolute;top:5px;right:4px}
  .sidebar-collapsed .sidebar-bottom{flex-direction:column}
  .sidebar-collapsed .local-profile{flex:none}
  .sidebar-collapsed #resizerSidebar{display:none}
}
@media(min-width:961px) and (max-width:1280px){
  .app.sidebar-collapsed,.app.sidebar-collapsed.details-hidden,.app.sidebar-collapsed:has(.details[hidden]){grid-template-columns:var(--w-sidebar) var(--w-list) minmax(0,1fr)}
}
@media(min-width:1180px) and (max-width:1280px){
  .app.sidebar-collapsed.shopee-orders-open{grid-template-columns:var(--w-sidebar) var(--w-list) minmax(300px,1fr) 380px}
}
@media(max-width:960px){
  .sidebar-header{flex-direction:column}
  #sidebarToggle{display:none}
}
.login-theme-toggle{align-self:flex-end;display:flex;align-items:center;gap:6px;margin:-4px 0 14px;padding:4px 7px!important;border:1px solid var(--line)!important;border-radius:7px;background:var(--surface)!important;color:var(--muted)!important;font-size:12px;font-weight:600}
.login-theme-toggle:hover{color:var(--green)!important}

/* POS graphite palette; the existing light palette remains available from the theme switch. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#f5f5f5;--muted:#b0b0b0;--faint:#969696;--line:#3b3b3b;--surface:#222222;--soft:#1b1b1b;
  --green:#00d15b;--green-dark:#00bd52;--pale:#163124;--incoming:#2a2a2a;--outgoing:#163124;
  --read:#69c2ff;--danger:#ff8a8e;--panel:#222222;--tag-bg:#2a2a2a;
  --canvas:#161616;--control:#2a2a2a;--secondary:#d0d0d0;--on-green:#052010;
}
[data-theme="dark"] .sidebar,[data-theme="dark"] .details{background:var(--panel)}
[data-theme="dark"] .conversation-list{background:var(--panel)}
[data-theme="dark"] .thread{background:var(--canvas)}
[data-theme="dark"] .message-stream{background:var(--canvas)}
[data-theme="dark"] .brand img,[data-theme="dark"] .panel-logo,[data-theme="dark"] .login-card img{filter:invert(1);mix-blend-mode:screen}
[data-theme="dark"] .nav-row,[data-theme="dark"] .tab,[data-theme="dark"] .replied-toggle{color:var(--secondary)}
[data-theme="dark"] .tab.selected{color:var(--green)}
[data-theme="dark"] .nav-row b,[data-theme="dark"] .replied-toggle>b{background:var(--control);color:var(--secondary)}
[data-theme="dark"] .nav-row:hover,[data-theme="dark"] .replied-toggle:hover,[data-theme="dark"] .action-button:hover{background:var(--control)}
[data-theme="dark"] .nav-row.active{background:var(--pale);color:var(--green)}
[data-theme="dark"] .nav-row.active b{background:var(--green);color:var(--on-green)}
[data-theme="dark"] .soon{background:#453528;color:#ffb776}
[data-theme="dark"] .queue-filter-button{background:var(--control);color:var(--secondary);border-color:var(--line)}
[data-theme="dark"] .queue-filter-button[aria-pressed="true"]{background:#493b23;color:#ffd291;border-color:#8f7038}
[data-theme="dark"] .profile-avatar,[data-theme="dark"] .avatar{background:var(--control);color:var(--secondary)}
[data-theme="dark"] .online-dot,[data-theme="dark"] .avatar-channel{border-color:var(--panel)}
[data-theme="dark"] .conversation-search{background:var(--control)}
[data-theme="dark"] .replied-section{background:var(--soft)}
[data-theme="dark"] .conversation{background:var(--panel);border-bottom-color:var(--line)}
[data-theme="dark"] .conversation:hover{background:var(--control)}
[data-theme="dark"] .conversation.selected{background:var(--pale)}
[data-theme="dark"] .conversation.selected .conv-preview{color:var(--secondary)}
[data-theme="dark"] .badge{background:var(--green);color:var(--on-green)}
[data-theme="dark"] .icon-button{color:var(--secondary)}
[data-theme="dark"] .icon-button:hover{border-color:var(--green);color:var(--green)}
[data-theme="dark"] .message{color:var(--ink)}
[data-theme="dark"] .message.outgoing{background:var(--outgoing)}
[data-theme="dark"] .message.note{background:#443824;border-color:#725a2f}
[data-theme="dark"] .note-label,[data-theme="dark"] .mode[data-mode="note"].selected,[data-theme="dark"] .composer.note-mode .composer-channel{color:#f2c36d}
[data-theme="dark"] .message-meta,[data-theme="dark"] .tick{color:var(--muted)}
[data-theme="dark"] .tick.read{color:var(--read)}
[data-theme="dark"] .tick.failed{color:var(--danger)}
[data-theme="dark"] .message-text a{color:#7ed9fb}
[data-theme="dark"] .message-quote{background:#1b1b1b88}
[data-theme="dark"] .file-card,[data-theme="dark"] .media-note{background:var(--control);border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .file-card:hover{background:var(--line)}
[data-theme="dark"] .media-image,[data-theme="dark"] .media-grid button,[data-theme="dark"] .media-grid a,[data-theme="dark"] .attachment-thumb{background:var(--control)}
[data-theme="dark"] .bulk-file-select,[data-theme="dark"] .msg-delete{background:var(--control);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .composer{background:var(--panel);border-color:var(--line);box-shadow:none}
[data-theme="dark"] .composer:focus-within{border-color:var(--green)}
[data-theme="dark"] .composer.note-mode{background:#2b291e;border-color:#665634}
[data-theme="dark"] .send-button,[data-theme="dark"] .primary-button,[data-theme="dark"] .login-card button{color:var(--on-green)}
[data-theme="dark"] .panel{background:var(--canvas)}
[data-theme="dark"] .panel-card,[data-theme="dark"] .login-card{background:var(--panel)}
[data-theme="dark"] .login-screen{background:var(--canvas)}
[data-theme="dark"] .login-card input,[data-theme="dark"] .profile-form input,[data-theme="dark"] .profile-form textarea,[data-theme="dark"] .shopee-settings-form input:not([type=checkbox]),[data-theme="dark"] .auto-reply-form textarea,[data-theme="dark"] .auto-reply-form input,[data-theme="dark"] .auto-reply-form select,[data-theme="dark"] .learn-key-controls input{background:var(--control);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .task-tag-strip,[data-theme="dark"] .task-tag-picker,[data-theme="dark"] .tag-create-button,[data-theme="dark"] .add-task-tag{background:var(--panel)}
[data-theme="dark"] .task-tag-picker{box-shadow:0 12px 32px #0008}
[data-theme="dark"] .tag-purple{--tag-bg:#392b55;--tag-ink:#d3afff;--tag-border:#5d4382}
[data-theme="dark"] .tag-blue{--tag-bg:#213c61;--tag-ink:#9cc5ff;--tag-border:#315681}
[data-theme="dark"] .tag-amber{--tag-bg:#483721;--tag-ink:#ffc476;--tag-border:#70532b}
[data-theme="dark"] .tag-green{--tag-bg:#174438;--tag-ink:#76e3b5;--tag-border:#2b6652}
[data-theme="dark"] .tag-cyan{--tag-bg:#1d4351;--tag-ink:#91e0f1;--tag-border:#326171}
[data-theme="dark"] .tag-rose{--tag-bg:#4e2d3b;--tag-ink:#f6aac6;--tag-border:#744257}
[data-theme="dark"] .tag-slate{--tag-bg:#30404e;--tag-ink:#c0d1e0;--tag-border:#465a68}
[data-theme="dark"] .profile-tags .tag{background:var(--control);color:var(--secondary)}
[data-theme="dark"] .tag-manager,[data-theme="dark"] .job-dialog{background:var(--panel);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .tag-manager::backdrop,[data-theme="dark"] .job-dialog::backdrop{background:#0008}
[data-theme="dark"] .tag-manager input,[data-theme="dark"] .tag-manager select,[data-theme="dark"] .tag-manager textarea,[data-theme="dark"] .training-test textarea,[data-theme="dark"] .training-test select,[data-theme="dark"] .training-test input,[data-theme="dark"] .training-filters select,[data-theme="dark"] .job-dialog input,[data-theme="dark"] .job-dialog select,[data-theme="dark"] .job-dialog textarea{background:var(--control);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .job-dialog header,[data-theme="dark"] .job-record,[data-theme="dark"] .shopee-orders-header,[data-theme="dark"] .shopee-order-filters,[data-theme="dark"] .shopee-order-card,[data-theme="dark"] .shopee-orders footer{background:var(--panel);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .shopee-orders{background:var(--canvas)}
[data-theme="dark"] .secondary-button.small,[data-theme="dark"] .learn-key-controls .secondary-button,[data-theme="dark"] .restart-button{background:var(--control);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .auto-reply-form .ar-rule{background:var(--soft)}
[data-theme="dark"] .merge-notice,[data-theme="dark"] .start-chat.hint,[data-theme="dark"] .reply-work-bar,[data-theme="dark"] .reply-queue-summary{background:#403321;color:#ffd291;border-color:#6c5432}
[data-theme="dark"] .merge-notice.merged,[data-theme="dark"] .start-chat{background:var(--pale);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .connection-banner{background:#1c3934;color:#abe3cf}
[data-theme="dark"] .bot-alert-banner{background:#4a2326;color:#ffb4b4;border-color:#7a3a3f}
[data-theme="dark"] .bot-alert button{background:var(--control);color:var(--ink);border-color:#7a3a3f}
[data-theme="dark"] .bot-alert button[data-alert-open]{background:#b42323;color:#fff}
[data-theme="dark"] .connection-banner.qr,[data-theme="dark"] .connection-banner.logged_out,[data-theme="dark"] .reconnect-banner,[data-theme="dark"] .storage-banner{background:#403321;color:#ffd291;border-color:#6c5432}
[data-theme="dark"] .reconnect-actions button{background:var(--control);color:var(--ink);border-color:#736247}
[data-theme="dark"] .shopee-contract-notice,[data-theme="dark"] .send-notice{background:#403321;color:#ffd291;border-color:#6c5432}
[data-theme="dark"] .training-kind.feedback,[data-theme="dark"] .shopee-preorder{background:#32453e;color:#a5e4bc}
[data-theme="dark"] #quotePreview{background:var(--pale);border-color:#257344}
[data-theme="dark"] .danger-button{background:var(--panel);border-color:#854154}
[data-theme="dark"] .danger-button:hover:not(:disabled){background:#3b202b}
[data-theme="dark"] .drop-overlay{background:#161616e6}
[data-theme="dark"] .lightbox{background:#161616e6}
[data-theme="dark"] .toast,[data-theme="dark"] .msg-menu{background:var(--panel);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .msg-menu button:hover:not(:disabled),[data-theme="dark"] .msg-menu button:focus-visible,[data-theme="dark"] .msg-menu .context-reactions button:hover{background:var(--control)}
[data-theme="dark"] .msg-menu button:focus-visible{outline-color:var(--green)}
[data-theme="dark"] .ai-draft-actions{border-color:#725a2f}
[data-theme="dark"] .ai-draft-actions button{background:#2b291e;border-color:#725a2f;color:#ffd291}
[data-theme="dark"] .ai-draft-actions button:hover,[data-theme="dark"] .ai-draft-actions button[aria-pressed="true"]{background:#443824;color:#ffd291}
[data-theme="dark"] .ai-draft-actions .ai-draft-approve{background:var(--green);border-color:var(--green);color:var(--on-green)}
[data-theme="dark"] .ai-draft-actions .ai-draft-approve:hover{background:var(--green-dark);border-color:var(--green-dark);color:var(--on-green)}
@media (max-width:960px){[data-theme="dark"] .sidebar-bottom .theme-toggle{display:grid}}

/* Platform identity stays separate from task-tag colours and private-note styling. */
[data-channel="whatsapp"]{--channel-accent:#0b7a55;--channel-hover:#07664a;--channel-sent:#e2f5e9;--channel-soft:#eef8f3}
[data-channel="shopee"]{--channel-accent:#c34b13;--channel-hover:#a53b0a;--channel-sent:#ffeadc;--channel-soft:#fff3ea}
[data-theme="dark"] [data-channel="whatsapp"]{--channel-accent:var(--green);--channel-hover:var(--green-dark);--channel-sent:var(--outgoing);--channel-soft:var(--pale)}
[data-theme="dark"] [data-channel="shopee"]{--channel-accent:#ff8a50;--channel-hover:#ffab7e;--channel-sent:#683018;--channel-soft:#352a25}
.conversation.selected[data-channel]{background:var(--channel-soft);box-shadow:inset 3px 0 var(--channel-accent)}
[data-theme="dark"] .conversation.selected[data-channel]{background:var(--channel-soft)}
.thread[data-channel] .thread-header{border-bottom:3px solid var(--channel-accent)}
.thread[data-channel] #threadChannel{color:var(--channel-accent);font-weight:600}
.thread[data-channel] .message.outgoing:not(.note){background:var(--channel-sent)}
.thread[data-channel] .composer:not(.note-mode){border-top:3px solid var(--channel-accent)}
.thread[data-channel] .composer:not(.note-mode) .mode.selected{color:var(--channel-accent);border-color:var(--channel-accent)}
.thread[data-channel] .composer:not(.note-mode) .composer-channel{color:var(--channel-accent);font-weight:600}
.thread[data-channel] .composer:not(.note-mode) .send-button{background:var(--channel-accent);color:#fff}
.thread[data-channel] .composer:not(.note-mode) .send-button:hover:not(:disabled){background:var(--channel-hover)}
[data-theme="dark"] .thread[data-channel] .composer:not(.note-mode) .send-button{color:var(--on-green)}
@media(max-width:680px){.composer-channel{display:flex;font-size:10px;max-width:45%;line-height:1.3}.composer-actions{gap:6px}}

/* Send later */
.scheduled-list{display:grid;gap:6px;margin:6px 10px 0}
.scheduled-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 10px;border-radius:6px;font-size:12px;background:var(--pale);color:var(--ink)}
.scheduled-item.problem{background:#fff2ed;color:#9f443b}
.scheduled-item .scheduled-text{flex:1 1 180px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.scheduled-item .scheduled-note{flex-basis:100%;font-weight:600}
.scheduled-item button{border:0;background:none;padding:0;text-decoration:underline;color:inherit;font-size:12px}
.schedule-popover{position:fixed;z-index:30;display:grid;gap:8px;width:240px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 6px 24px #15283a26}
.schedule-popover[hidden]{display:none}
.schedule-popover small{font-weight:400;color:var(--muted)}
.schedule-popover > button:not(.primary-button){height:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-weight:600;font-size:13px}
.schedule-popover > button:not(.primary-button):hover{background:var(--pale)}
.schedule-popover label{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.schedule-popover input{height:32px;border:1px solid var(--line);border-radius:8px;padding:0 8px;background:var(--surface);color:var(--ink)}
[data-theme="dark"] .scheduled-item.problem{background:#403321;color:#ffd291}
@container (max-width:560px){#scheduleButton span{display:none}}