/* Chats y tickets: customer profile that slides in and out, and the sidebar submenu. */
/* ---------- Customer profile: slide in and out ---------- */
@media(min-width:1181px){
  .crm-page .wa-inbox-layout,.crm-page .wa-inbox-layout.context-open{transition:grid-template-columns .46s cubic-bezier(.22,1,.36,1)}
  .crm-page .wa-inbox-layout{grid-template-columns:clamp(300px,24vw,340px) minmax(0,1fr) 0px}
  .crm-page .wa-inbox-layout.context-open{grid-template-columns:clamp(300px,24vw,340px) minmax(0,1fr) clamp(294px,22vw,326px)}
  .crm-page .wa-context.context-pane{overflow:hidden;border-left:1px solid transparent;transform:translateX(34px);opacity:0;visibility:hidden;
    transition:transform .46s cubic-bezier(.22,1,.36,1),opacity .24s ease,visibility 0s linear .46s,border-color .3s}
  .crm-page .wa-context.context-pane>*{min-width:clamp(294px,22vw,326px)}
  .crm-page .wa-inbox-layout.context-open .wa-context.context-pane{transform:none;opacity:1;visibility:visible;border-left-color:#dce5dd;
    transition:transform .46s cubic-bezier(.22,1,.36,1),opacity .34s ease .08s,visibility 0s,border-color .3s}
  .crm-page .wa-context .cp-scroll{overflow:auto}
}
@media(max-width:1180px){
  .crm-page .wa-context.context-pane{transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .2s,visibility 0s linear .38s}
  .crm-page .wa-inbox-layout.context-open .wa-context.context-pane{transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .2s,visibility 0s}
}
@media(prefers-reduced-motion:reduce){.crm-page .wa-inbox-layout,.crm-page .wa-context.context-pane,.cwh .chat-workspace-tabs button{transition:none!important}}

/* ---------- Sidebar submenu under Chats y tickets ---------- */
#sidebar .nav-chev{margin-left:auto;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;color:var(--ns-text,#5d6e63);cursor:pointer;transition:background .16s,transform .3s cubic-bezier(.22,1,.36,1)}
#sidebar .nav-chev:hover{background:#e3ecdf;color:#14221a}
#sidebar .nav-chev svg{width:14px;height:14px}
#sidebar [data-view=chats] em{margin-left:6px}
#sidebar [data-view=chats]:not(.has-open) .nav-chev{transform:rotate(-90deg)}
#sidebar [data-view=chats] em + .nav-chev,#sidebar [data-view=chats] span + .nav-chev{margin-left:auto}
#sidebar [data-view=chats] span{flex:1 1 auto}
.nav-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s cubic-bezier(.22,1,.36,1);margin-bottom:2px}
.nav-sub.open{grid-template-rows:1fr}
.nav-sub-clip{overflow:hidden;min-height:0}
.nav-sub-list{position:relative;display:flex;flex-direction:column;gap:2px;margin:2px 0 4px 19px;padding-left:12px;border-left:1.5px solid #dfe8da}
.nav-sub-item{display:flex;align-items:center;gap:9px;min-height:34px;padding:7px 10px;border:0;border-radius:9px;background:transparent;color:#5d6e63;font:550 12.5px 'DM Sans',sans-serif;text-align:left;cursor:pointer;opacity:0;transform:translateX(-6px);transition:background .16s,color .16s,opacity .28s,transform .34s cubic-bezier(.22,1,.36,1)}
.nav-sub.open .nav-sub-item{opacity:1;transform:none}
.nav-sub.open .nav-sub-item:nth-child(2){transition-delay:0s,0s,.04s,.04s}.nav-sub.open .nav-sub-item:nth-child(3){transition-delay:0s,0s,.08s,.08s}.nav-sub.open .nav-sub-item:nth-child(4){transition-delay:0s,0s,.12s,.12s}
.nav-sub-item .icon{width:16px;height:16px;flex:none;opacity:.8}
.nav-sub-item:hover:not(.active){background:#e9f1e5;color:#1f4331}
.nav-sub-item.active{background:#fff;color:#14221a;font-weight:650;box-shadow:0 1px 2px #1c362814,0 0 0 1px #e1e8dc}
.nav-sub-item.active .icon{opacity:1;color:#2f7d4b}
.nav-sub-item.active::before{content:'';position:absolute;left:-13.5px;width:2px;height:20px;border-radius:2px;background:#2f7d4b}
.nav-collapsed .nav-sub,.nav-collapsed .nav-chev{display:none}
@media(prefers-reduced-motion:reduce){.nav-sub,.nav-sub-item,#sidebar .nav-chev{transition:none!important}}
#sidebar [data-view=chats]{gap:8px}
#sidebar [data-view=chats] span{min-width:0;overflow:visible;text-overflow:clip}
#sidebar [data-view=chats] em{margin-left:2px;flex:none}
#sidebar .nav-chev{width:20px;height:20px;flex:none;margin-right:-4px}
/* Folded sidebar: Chats y tickets looks like every other icon (no arrow, no submenu, badge in the corner) */
.layout.nav-collapsed #sidebar .nav-chev,.layout.nav-collapsed #sidebar .nav-sub{display:none!important}
.layout.nav-collapsed #sidebar [data-view=chats]{gap:0}
.layout.nav-collapsed #sidebar [data-view=chats] em{margin:0}

/* Queues (Pendientes, Míos, Todos, Finalizados) live under the list title, smaller */
.crm-page .crm-list-header .crm-queue-tabs{width:100%;justify-content:space-between;gap:2px;margin:-4px 0 12px;padding:2px;border-radius:10px;background:#fff}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]{flex:1 1 0;justify-content:center;height:26px;padding:0 6px;gap:5px;border-radius:8px;font-size:11px}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon] .icon{width:14px;height:14px}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]>span{min-width:16px;height:16px;line-height:16px;padding:0 4px;font-size:9.5px}
.crm-page .crm-list-header .crm-queue-tabs button[data-tip]::after{top:calc(100% + 6px)}
.crm-page .crm-main-toolbar{justify-content:flex-end;min-height:48px;padding-top:6px;padding-bottom:6px}

/* ---- second pass: labeled queues, and the strip above the chat is gone ---- */
.crm-page .crm-main-toolbar{display:none}
.crm-page .crm-list-header .crm-queue-tabs{margin:-6px 0 12px;padding:3px;border-radius:11px;background:#eef3ea;border:0;gap:2px}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]{height:28px;padding:0 4px;gap:6px;border-radius:8px;font:650 11.5px 'DM Sans',sans-serif;color:#5d6e63}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon] .icon{display:none}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]::before{content:attr(data-short)}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]>span{min-width:17px;height:17px;line-height:17px;padding:0 5px;background:#dfe8da;color:#4a5f50}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon].active{background:#fff;color:#14221a;box-shadow:0 1px 2px #1c36281f}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon].active>span{background:#2f7d4b;color:#fff}
/* list title row: gear, filter, new */
.crm-page .crm-list-title{gap:6px}
.crm-page .crm-list-title .cpro-manage{margin-left:auto}
.crm-page .crm-list-title .cpro-manage-button{width:35px;height:35px;padding:0;justify-content:center;border:0;background:#f0f5f1;border-radius:11px;color:#547561}
.crm-page .crm-list-title .cpro-manage-button:hover{background:#dfefe5}
.crm-page .crm-list-title .cpro-manage-button>span,.crm-page .crm-list-title .cpro-manage-button>.icon:last-child{display:none}
.crm-page .crm-list-title .cpro-manage-button>.icon:first-child{width:18px;height:18px}
.crm-page .crm-list-title .crm-filter-anchor{margin-left:0}
.crm-page .crm-list-title .crm-toolbar-new{display:grid;place-items:center;width:35px;height:35px;padding:0;margin:0;border:0;border-radius:11px;background:#1b7655;color:#fff;font-size:0;gap:0;transition:background .16s,transform .16s,box-shadow .16s}
.crm-page .crm-list-title .crm-toolbar-new:hover{background:#125c41;transform:translateY(-1px);box-shadow:0 8px 16px -8px #125c41}
.crm-page .crm-list-title .crm-toolbar-new .icon{width:18px;height:18px}
.crm-page .crm-list-title .cpro-manage-menu{right:-44px}
.crm-page .crm-list-header .crm-queue-tabs{overflow:hidden;justify-content:stretch}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]{min-width:0;gap:4px;padding:0 3px;font-size:11px}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]>span{min-width:15px;height:15px;line-height:15px;padding:0 4px;font-size:9px}

/* third pass: four equal columns, nothing overlaps or gets cut */
.crm-page .crm-list-header .crm-queue-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;overflow:visible;width:100%;box-sizing:border-box}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-width:0;padding:0 2px;white-space:nowrap;overflow:hidden;font-size:11px;letter-spacing:-.1px}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]::before{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]>span{position:static;flex:none;margin:0;min-width:15px;height:15px;line-height:15px;padding:0 4px;font-size:9px}
@media(max-width:1380px){.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]{font-size:10.5px;gap:3px}.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]>span{min-width:14px;padding:0 3px}}
.crm-page .crm-list-header .crm-queue-tabs{grid-column:1/-1}

/* final: icon + number, in four equal columns */
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]::before{content:none}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon] .icon{display:block;width:16px;height:16px;flex:none}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]{height:30px;gap:6px;padding:0 4px}
.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]>span{min-width:18px;height:18px;line-height:18px;padding:0 5px;font-size:10px}

/* breathing room between title, queues, quick filters and search */
.crm-page .crm-list-header{row-gap:14px}
.crm-page .crm-list-header>.crm-list-title,.crm-page .crm-list-header>.crm-queue-tabs,.crm-page .crm-list-header>.wa-search,.crm-page .crm-list-header>.crm-list-controls,.crm-page .crm-list-header>.crm-quick-filters{margin-top:0;margin-bottom:0}
.crm-page .crm-list-header>.crm-quick-filters{padding:2px 0}
.crm-page .crm-list-header>.crm-list-controls{padding:0 2px}

/* ---------- Official app logos on every channel marker ---------- */
.brand-ico{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.ex-channel,.ex-channel.instagram{background:#fff!important;color:inherit!important;padding:2px;box-shadow:0 0 0 2px #fff,0 1px 4px #1c362840!important;overflow:hidden}
.ex-channel .brand-ico{border-radius:50%}
.crm-channel-avatar,.crm-channel-avatar.is-instagram{background:#fff!important;padding:7px;box-sizing:border-box;box-shadow:inset 0 0 0 1px #dfe8da!important}
.cc-channel{width:26px;height:26px}.cc-channel .brand-ico{width:20px;height:20px}
.cc-filter [class*="platform"] .brand-ico,.crm-filter-popover .brand-ico{width:20px;height:20px;flex:none}
/* logo size: fill the badge it sits in, otherwise a small inline logo */
.brand-ico{width:18px;height:18px}
.ex-channel .brand-ico,.crm-channel-avatar .brand-ico{width:100%;height:100%}
.cc-template-channel{display:inline-flex;align-items:center;gap:7px}.cc-template-channel .brand-ico{width:18px;height:18px}
.cc-template-button.is-off,.cc-template-button:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(1)}

/* tooltips of the queues: the name shows on hover (nothing may clip it) */
.crm-page .crm-list-header .crm-queue-tabs,.crm-page .crm-list-header .crm-queue-tabs button[data-cpro-icon]{overflow:visible}
.crm-page .crm-list-header{position:relative;z-index:8;overflow:visible}
.crm-page .crm-list-header .crm-queue-tabs button[data-tip]::after{opacity:0;visibility:hidden;pointer-events:none;white-space:nowrap;top:calc(100% + 8px);transition:opacity .15s,transform .15s,visibility 0s .15s}
.crm-page .crm-list-header .crm-queue-tabs button[data-tip]:is(:hover,:focus-visible)::after{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:.2s,.2s,.2s}
.crm-page .crm-list-header .crm-queue-tabs button:first-child[data-tip]::after{left:0;transform:translate(0,-3px)}
.crm-page .crm-list-header .crm-queue-tabs button:first-child[data-tip]:is(:hover,:focus-visible)::after{transform:none}
.crm-page .crm-list-header .crm-queue-tabs button:last-child[data-tip]::after{left:auto;right:0;transform:translate(0,-3px)}
.crm-page .crm-list-header .crm-queue-tabs button:last-child[data-tip]:is(:hover,:focus-visible)::after{transform:none}