/* Chat inbox, pro layer. Shares the sidebar palette so the shell reads as one product. */
.chat-workspace{--cp-line:#e1e8dc;--cp-ink:#1c3628;--cp-text:#566b5a;--cp-muted:#8b9a8a;--cp-hover:#eef3ea;--cp-accent:#2f6b46;--cp-accent-soft:#dcebd6}
.cpro-hidden{display:none!important}

/* Workspace header: same rhythm and pieces as the global top bar. */
.chat-workspace .chat-workspace-top{min-height:68px;padding-top:10px}
.chat-workspace .chat-workspace-path{font-size:13px;gap:8px;color:var(--cp-muted)}
.chat-workspace .chat-workspace-path i{font-style:normal;color:#c9d3c6}
.chat-workspace .chat-workspace-path strong{color:var(--cp-ink);font-weight:650}
.chat-workspace .chat-workspace-demo{border:1px solid #d6e6cf;background:#eef6e9}
.chat-workspace .chat-workspace-user{width:38px;height:38px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--cp-line)}
.chat-workspace .chat-workspace-tabs button{font-weight:600}

/* One continuous canvas behind header, queues and panes: only the cards are white. */
.chat-workspace,.chat-workspace .chat-workspace-header,.chat-workspace .chat-workspace-content,.crm-page .crm-main-toolbar,.crm-page #inbox-layout{background:#f6f8f5!important}
.chat-workspace .chat-workspace-header{border-bottom-color:#e1e8dc}

/* Toolbar: queues on the left, one management menu + primary action on the right. */
.crm-page .crm-toolbar-actions{gap:8px;align-items:center;overflow:visible}
.crm-page .crm-toolbar-actions .cpro-manage-button{font-size:12px;padding:0 11px;border-radius:10px;border:1px solid var(--cp-line);background:#fff}
.crm-page .crm-toolbar-actions .cpro-manage :is(button)::after{content:none}
.crm-page .crm-toolbar-actions .cpro-manage-menu button{height:auto;font:500 12px 'DM Sans',sans-serif;color:var(--cp-text);padding:9px 11px;border-radius:8px}
.cpro-manage{position:relative}
.cpro-manage-button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;border:1px solid var(--cp-line);border-radius:10px;background:#fff;color:var(--cp-text);font:600 12px 'DM Sans',sans-serif;cursor:pointer}
.cpro-manage-button:hover{background:var(--cp-hover);color:var(--cp-ink)}.cpro-manage-button .icon{width:15px;height:15px}.cpro-manage-button .icon:last-child{width:11px;height:11px;opacity:.7}
.cpro-manage-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:210px;padding:5px;background:#fff;border:1px solid var(--cp-line);border-radius:12px;box-shadow:0 16px 40px #1c36281f}
.cpro-manage-menu[hidden]{display:none}
.cpro-manage-menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 11px;border-radius:8px;font:500 12px 'DM Sans',sans-serif;color:var(--cp-text);cursor:pointer}
.cpro-manage-menu button:hover{background:var(--cp-hover);color:var(--cp-ink)}

/* Queues: compact icon tabs with count and tooltip. */
.crm-page .crm-main-toolbar{position:relative;z-index:6}
.crm-page .crm-queue-tabs{overflow:visible;height:auto;min-height:0;gap:4px;padding:3px;border:1px solid var(--cp-line);border-radius:12px;background:#fff}
.crm-page .crm-queue-tabs button[data-cpro-icon]{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 9px 0 10px;border:0;border-radius:9px;background:none;color:var(--cp-text);font:600 12px 'DM Sans',sans-serif;cursor:pointer;transition:background .15s,color .15s}
.crm-page .crm-queue-tabs button[data-cpro-icon] .icon{width:17px;height:17px;flex:none;stroke-width:2.4}
.crm-page .crm-queue-tabs button[data-cpro-icon]>span{min-width:18px;height:18px;line-height:18px;padding:0 5px;border-radius:999px;background:#eef3ea;color:var(--cp-text);font-size:10px;font-weight:700;text-align:center}
.crm-page .crm-queue-tabs button[data-cpro-icon]:hover{background:var(--cp-hover);color:var(--cp-ink)}
.crm-page .crm-queue-tabs button[data-cpro-icon].active{background:var(--cp-accent-soft);color:var(--cp-accent)}
.crm-page .crm-queue-tabs button[data-cpro-icon].active>span{background:var(--cp-accent);color:#fff}
.crm-page .crm-queue-tabs button[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);z-index:50;transform:translate(-50%,-3px);padding:6px 9px;border-radius:7px;background:#1c3628;color:#f4f8ee;font:500 11px 'DM Sans',sans-serif;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s}
.crm-page .crm-queue-tabs button[data-tip]:is(:hover,:focus-visible)::after{opacity:1;transform:translate(-50%,0);transition-delay:.25s}

/* List header: title, search, then filters + sort on a single row. */
.crm-page .crm-list-header{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px;padding:16px 14px 10px}
.crm-page .crm-list-title{grid-column:1/-1;margin-bottom:12px}
.crm-page .crm-list-header .wa-search{grid-column:1/-1}
.crm-page .crm-list-header .crm-quick-filters{grid-column:1;grid-row:3;margin-top:10px;min-width:0}
.crm-page .crm-list-header .crm-list-controls{grid-column:2;grid-row:3;margin-top:10px}
.crm-page .crm-list-header .crm-list-controls>:not(.crm-sort){display:none}
.crm-page .crm-quick-filters button{height:28px;padding:0 10px;font-size:11px}

/* Rows: white selected card with accent bar, toned tags, waiting time. */
.crm-page .crm-chat-row{position:relative;border-radius:12px;transition:background .15s,box-shadow .15s}
.crm-page .crm-chat-row:hover:not(.active){background:var(--cp-hover)}
.crm-page .crm-chat-row.active{background:#fff!important;box-shadow:0 1px 2px #1c362814,0 0 0 1px var(--cp-line)}
.crm-page .crm-chat-row.active::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--cp-accent)}
.crm-page .crm-tag[data-tone]{border:0;font-weight:600}
.crm-page .crm-tag[data-tone=amber]{background:#fdf0dc!important;color:#9a5b12!important}
.crm-page .crm-tag[data-tone=blue]{background:#e6edfb!important;color:#3d5ba8!important}
.crm-page .crm-tag[data-tone=slate]{background:#edf0ef!important;color:#55666a!important}
.crm-page .crm-tag[data-tone=green]{background:#e2f0dc!important;color:#2f6b46!important}
.crm-page .crm-tag[data-tone=red]{background:#fae5e4!important;color:#a3423f!important}
.crm-page .crm-row-title time:has(+.cpro-wait){display:none}
.cpro-wait{display:inline-flex;align-items:center;gap:3px;flex:none;padding:2px 6px;border-radius:999px;font:600 10px 'DM Sans',sans-serif;white-space:nowrap}
.cpro-wait .icon{width:11px;height:11px}
.cpro-wait.ok{color:var(--cp-text);background:#eef3ea}.cpro-wait.warn{color:#9a5b12;background:#fdf0dc}.cpro-wait.late{color:#a3423f;background:#fae5e4}
.crm-page .crm-row-tags{display:flex;align-items:center;gap:5px;min-width:0}

/* Thread header */
.cpro-head-meta{display:flex;align-items:center;gap:6px;margin-left:10px;min-width:0}
.cpro-status{height:24px;display:inline-flex;align-items:center;gap:5px;padding:0 9px;border-radius:999px;font:600 11px 'DM Sans',sans-serif;white-space:nowrap}
.cpro-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.cpro-status.open{background:#fdf0dc;color:#9a5b12}.cpro-status.done{background:#e2f0dc;color:#2f6b46}
.cpro-owner{height:26px;display:inline-flex;align-items:center;gap:6px;padding:0 9px 0 3px;border:1px solid var(--cp-line);border-radius:999px;background:#fff;color:var(--cp-text);font:600 11px 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap}
.cpro-owner:hover{background:var(--cp-hover)}
.cpro-owner-dot{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#d8e7d0;color:var(--cp-accent);font-size:10px;font-weight:700}
.cpro-head-actions{display:flex;align-items:center;gap:6px}
.cpro-head-actions button{height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;border-radius:10px;font:600 12px 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap}
.cpro-head-actions .icon{width:15px;height:15px}
.cpro-profile-toggle{border:1px solid var(--cp-line);background:#fff;color:var(--cp-text)}.cpro-profile-toggle:hover,.cpro-profile-toggle.on{background:var(--cp-hover);color:var(--cp-ink)}
.cpro-resolve{border:1px solid var(--cp-accent);background:var(--cp-accent);color:#fff}.cpro-resolve:hover{background:#255a3a}
.cpro-resolve.done{background:#fff;color:var(--cp-accent)}
.crm-thread .wa-thread-header .ex-profile+.cc-channel{margin-left:2px}

/* Messages area: calm, flat canvas. */
.crm-page .wa-messages{background:#f5f7f3!important;background-image:radial-gradient(#1c36280d 1px,transparent 1px)!important;background-size:22px 22px!important}
.crm-page .wa-thread-signal{display:none}
.cpro-note{align-self:center;width:min(78%,520px);margin:10px auto;padding:10px 13px 8px;border-radius:12px;background:#fff8e1;border:1px dashed #e8cd7c;color:#5e4a12;font-size:13px}
.cpro-note-label{display:flex;align-items:center;gap:5px;font:700 10px 'DM Sans',sans-serif;letter-spacing:.3px;color:#9a7a1c;text-transform:uppercase}.cpro-note-label .icon{width:12px;height:12px}
.cpro-note p{margin:5px 0 2px;line-height:1.45}.cpro-note time{display:block;text-align:right;font-size:10px;color:#a8925a}

/* AI suggestions */
.cpro-suggest{display:flex;align-items:center;gap:6px;padding:10px 16px 0;overflow-x:auto;scrollbar-width:none;background:#f5f7f3}
.cpro-suggest-label{display:inline-flex;align-items:center;gap:5px;flex:none;font:700 10px 'DM Sans',sans-serif;letter-spacing:.4px;text-transform:uppercase;color:#6a55b5}
.cpro-suggest-label .icon{width:13px;height:13px}
.cpro-suggest button{flex:none;height:30px;padding:0 12px;border-radius:999px;border:1px solid #ddd5f3;background:#fff;color:#4d3b96;font:600 12px 'DM Sans',sans-serif;cursor:pointer;transition:background .15s,border-color .15s}
.cpro-suggest button:hover{background:#f3f0fc;border-color:#c7bbef}
.cpro-suggest button.ghost{border-style:dashed;color:var(--cp-text);border-color:var(--cp-line)}

/* Composer: reply / internal note */
.crm-page #composer-form{position:relative;flex-wrap:wrap}
.cpro-composer-tabs{display:flex;align-items:center;gap:2px;width:100%;padding:0 4px 8px}
.cpro-composer-tabs button{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:0;border-radius:8px;background:none;color:var(--cp-muted);font:600 12px 'DM Sans',sans-serif;cursor:pointer}
.cpro-composer-tabs button .icon{width:13px;height:13px}
.cpro-composer-tabs button:hover{color:var(--cp-ink)}
.cpro-composer-tabs button[aria-selected=true]{background:var(--cp-hover);color:var(--cp-ink)}
.cpro-composer-tabs [data-cpro-mode=note][aria-selected=true]{background:#fff3cc;color:#7a5e10}
.cpro-composer-hint{margin-left:auto;font-size:11px;color:var(--cp-muted)}
.cpro-composer-hint kbd{font:600 10px 'DM Sans',sans-serif;background:#f4f7f2;border:1px solid var(--cp-line);border-bottom-width:2px;border-radius:5px;padding:0 5px}
.cpro-note-mode .ex-composer-main{background:#fffaeb!important;border-color:#f0dc9c!important;box-shadow:0 0 0 3px #f7e7b04d}
.cpro-note-mode .wa-send{background:#c9971f!important}
.cpro-note-mode :is(.ex-emoji-anchor,.ex-tool:not(.cc-template-button),.ex-record){opacity:.35;pointer-events:none}

/* Slash quick replies */
.cpro-slash{position:absolute;left:12px;right:12px;bottom:calc(100% + 6px);z-index:30;padding:6px;background:#fff;border:1px solid var(--cp-line);border-radius:12px;box-shadow:0 16px 40px #1c36281f}
.cpro-slash-title{padding:6px 10px 4px;font:700 10px 'DM Sans',sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--cp-muted)}
.cpro-slash button{display:grid;grid-template-columns:auto 1fr;column-gap:10px;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif}
.cpro-slash button strong{font-size:12px;color:var(--cp-accent)}.cpro-slash button span{font-size:12px;font-weight:600;color:var(--cp-ink)}
.cpro-slash button small{grid-column:1/-1;font-size:11px;color:var(--cp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpro-slash button[aria-selected=true],.cpro-slash button:hover{background:var(--cp-hover)}

.crm-page .crm-thread{container-type:inline-size;container-name:cpthread}
.crm-thread .wa-thread-header>*{flex-shrink:0}.crm-thread .wa-thread-header .ex-profile{flex-shrink:1}
@container cpthread (max-width:760px){.cpro-head-actions button span{display:none}.cpro-head-actions button{padding:0 9px}.cpro-owner{font-size:0;gap:0;padding:0 3px}.cpro-owner-dot{font-size:10px}}
@container cpthread (max-width:600px){.cpro-status{font-size:0;padding:0 6px;gap:0}.crm-thread .cc-channel{display:none}}
.crm-thread .wa-thread-header .ex-profile{flex:none;min-width:0}
@media(max-width:900px){.cpro-head-meta .cpro-owner,.cpro-composer-hint{display:none}}

/* Profile panel motion */
.crm-page .crm-list-pane{view-transition-name:cpro-list}
.crm-page .crm-thread{view-transition-name:cpro-thread}
.crm-page .wa-inbox-layout.context-open #chat-context{view-transition-name:cpro-panel}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(cpro-thread),::view-transition-group(cpro-list),::view-transition-group(cpro-panel){animation-duration:.38s;animation-timing-function:cubic-bezier(.22,1,.36,1);overflow:clip;border-radius:16px}
::view-transition-old(cpro-thread),::view-transition-new(cpro-thread){height:100%;width:auto;object-fit:none;object-position:left top;animation:none}
::view-transition-old(cpro-thread){display:none}
::view-transition-new(cpro-panel):only-child{animation:cpro-panel-in .38s cubic-bezier(.22,1,.36,1) both}
::view-transition-old(cpro-panel):only-child{animation:cpro-panel-out .34s cubic-bezier(.55,0,.7,.2) both}
@keyframes cpro-panel-in{from{opacity:0;transform:translateX(40px)}}
@keyframes cpro-panel-out{70%{opacity:1}to{opacity:0;transform:translateX(100%)}}
/* Closing: the chat grows underneath while the panel slides away fully opaque, so contents never overlap. */
.cpro-vt-closing::view-transition-group(cpro-panel){z-index:3}
.cpro-vt-closing::view-transition-group(cpro-thread){animation-duration:.34s;animation-timing-function:cubic-bezier(.55,0,.25,1)}

#chat-context.cpro-enter :is(.cp-identity,.cp-tabs,.cp-scroll>*){animation:cpro-rise .42s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--cpro-i,0) * 45ms + 120ms)}
#chat-context.cpro-enter .cp-identity .ex-avatar{animation:cpro-pop .45s cubic-bezier(.34,1.56,.64,1) both;animation-delay:.12s}
#chat-context.cpro-swap :is(.cp-identity,.cp-scroll){animation:cpro-fade .28s ease-out both}
#chat-context.cpro-tab .cp-scroll{animation:cpro-slide .26s cubic-bezier(.22,1,.36,1) both}
@keyframes cpro-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes cpro-pop{from{opacity:0;transform:scale(.6)}}
@keyframes cpro-fade{from{opacity:0;transform:translateY(4px)}}
@keyframes cpro-slide{from{opacity:0;transform:translateX(12px)}}
#chat-context .cp-tabs button{transition:background .18s,color .18s,box-shadow .18s}
#chat-context :is(.cp-order,.cp-summary-card){transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s}
#chat-context .cp-order:hover{transform:translateY(-1px);box-shadow:0 6px 16px #1c362814}
@media(prefers-reduced-motion:reduce){#chat-context,#chat-context *{animation:none!important;transition:none!important}}

/* Inbox details: author chip, paused banner, 24 h window */
.cpro-by{display:flex;align-items:center;gap:4px;margin:-1px 0 4px;font:700 10px 'DM Sans',sans-serif;letter-spacing:.2px;text-transform:uppercase}
.cpro-by .icon{width:11px;height:11px;stroke-width:2.4}
.cpro-by.ai{color:#6a55b5}.cpro-by.auto{color:#3d5ba8}.cpro-by.human{color:#2f6b46}.cpro-by.template{color:#9a5b12}
.cpro-paused{display:flex;align-items:center;gap:12px;margin:10px 14px 0;padding:10px 12px;border-radius:12px;background:#fdf6ea;border:1px solid #f0d9b4;animation:mp-rise .35s cubic-bezier(.22,1,.36,1) both}
.cpro-paused-icon{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;background:#fdf0dc;color:#9a5b12}
.cpro-paused-icon .icon{width:15px;height:15px}
.cpro-paused strong{display:block;font-size:12.5px;color:#1c3628}.cpro-paused small{font-size:11.5px;color:#7a5a2a}
.cpro-paused .button{margin-left:auto;flex:none}
.cpro-window{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:3px 9px;border-radius:999px;font:600 11px 'DM Sans',sans-serif;white-space:nowrap}
.cpro-window .icon{width:12px;height:12px}
.cpro-window.open{background:#e2f0dc;color:#2f6b46}.cpro-window.soon{background:#fdf0dc;color:#9a5b12}.cpro-window.closed{background:#fae5e4;color:#a3423f}
.cpro-window+.cpro-composer-hint{margin-left:10px}
.cpro-reopen{margin:10px 16px 0;padding:12px;border-radius:12px;background:#fff;border:1px solid #f0cfcd;animation:mp-rise .35s cubic-bezier(.22,1,.36,1) both}
.cpro-reopen>div:first-child{display:flex;gap:10px;align-items:flex-start}
.cpro-reopen>div:first-child .icon{width:16px;height:16px;color:#a3423f;flex:none;margin-top:2px}
.cpro-reopen strong{display:block;font-size:12.5px;color:#1c3628}.cpro-reopen small{font-size:11.5px;color:#8b9a8a;line-height:1.4}
.cpro-reopen-row{display:flex;gap:8px;margin-top:10px}
.cpro-reopen-row select{flex:1;height:34px;padding:0 10px}
.cpro-closed .ex-composer-main{opacity:.55}
@container cpthread (max-width:760px){.cpro-composer-hint{display:none}.cpro-window{font-size:10.5px}}
.cpro-ai-draft{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:0;border-radius:99px;background:linear-gradient(135deg,#1c3628,#2f7d4b);color:#fff;font:650 12px 'DM Sans',sans-serif;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .2s}
.cpro-ai-draft:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 14px #1c362833}.cpro-ai-draft:disabled{opacity:.7;cursor:progress}
.cpro-ai-draft .icon{width:13px;height:13px}.cpro-ai-draft.busy .icon{animation:cpro-spin 1.2s linear infinite}
@keyframes cpro-spin{to{transform:rotate(360deg)}}