/* SELLIORA r426 · WhatsApp Chat — the layout of the design.
   The right column (Contact / Lead Details), the quick actions under the box,
   stage pills; colours from the brand and the WhatsApp palette. */
.wa-app{display:flex}
.wa-info{width:340px;flex:none;border-left:1px solid var(--wa-border,var(--bd));background:var(--s);overflow-y:auto;display:flex;flex-direction:column}
@media (max-width:1280px){
  .wa-info{position:absolute;right:0;top:0;bottom:0;z-index:30;box-shadow:-10px 0 30px rgba(15,23,42,.14)}
  .wa-app{position:relative}
}
.wi-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px}
.wi-top b{font-size:14px;color:var(--t)}
.wi-x{border:0;background:none;color:var(--t3);cursor:pointer;width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
.wi-x:hover{background:var(--s2);color:var(--t)}
.wi-id{display:flex;align-items:center;gap:12px;padding:8px 16px 14px;border-bottom:1px solid var(--bd)}
.wi-av{width:52px;height:52px;border-radius:50%;background:var(--acc,var(--p));color:var(--text-on-primary,#fff);display:grid;place-items:center;font-weight:700;font-size:17px;flex:none}
.wi-idt{min-width:0}
.wi-nm{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:700;color:var(--t)}
.wi-nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-ph{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--t2);margin-top:3px}
.wi-wa{color:#16A34A;display:grid}
.wi-ed{border:0;background:none;color:var(--t3);cursor:pointer;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none}
.wi-ed:hover{background:var(--s2);color:var(--p)}
.wi-fields{padding:10px 16px 4px;display:flex;flex-direction:column;gap:4px}
.wi-row{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px;min-height:36px}
.wi-l{font-size:12.5px;color:var(--t2)}
.wi-v{min-width:0;font-size:13px;color:var(--t)}
.wi-sel{display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 10px;border:1px solid var(--bd2);border-radius:8px;background:var(--s);font:inherit;font-size:13px;color:var(--t);cursor:pointer;text-align:left}
.wi-sel>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.wi-sel>i{width:8px;height:8px;border-radius:50%;flex:none}
.wi-sel:not(:disabled):hover{border-color:var(--t3)}
.wi-sel:disabled{cursor:default;background:var(--s2)}
.wi-oav{width:22px;height:22px;border-radius:50%;background:#3B4A63;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;flex:none!important}
.wi-iv{display:flex;align-items:center;gap:8px;min-width:0}
.wi-iv svg{flex:none;color:var(--t3)}
.wi-iv a{color:var(--t);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-iv a:hover{color:var(--p)}
.wi-iv b{font-weight:600}
.wi-fu b{flex:1;font-size:12.5px}
.wi-fuic{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;background:color-mix(in srgb,#DC2626 10%,var(--s));color:#DC2626!important;flex:none}
.wi-fuic svg{color:#DC2626}
.wi-link{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--p);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:0;margin-left:auto}
.wi-link:hover{text-decoration:underline}
.wi-iv .wi-link{margin-left:auto}
.wi-dim{color:var(--t3)}
.wi-tags{display:flex;flex-wrap:wrap;gap:6px}
.wi-tag{font-size:12px;font-weight:500;color:var(--p);background:var(--pl);border-radius:999px;padding:2px 10px}
.wi-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 16px 0}
.wi-btns .btn{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:9px;font-weight:600}
.wi-btns3{grid-template-columns:repeat(3,1fr);padding-bottom:14px;border-bottom:1px solid var(--bd)}
.wi-q{height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--bd2);border-radius:9px;background:var(--s);font:inherit;font-size:12.5px;font-weight:600;color:var(--t);cursor:pointer}
.wi-q.call,.wi-q.wa{background:color-mix(in srgb,#16A34A 9%,var(--s));border-color:transparent;color:#15803D}
.wi-q:disabled{opacity:.45;cursor:not-allowed}
.wi-q:not(:disabled):hover{filter:brightness(.96)}
.wi-acts{padding:12px 16px 18px}
.wi-ah{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wi-ah b{font-size:13.5px;color:var(--t)}
.wi-act{display:flex;gap:10px;padding:8px 0}
.wi-act+.wi-act{border-top:1px solid var(--bd)}
.wi-aic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none}
.wi-at{flex:1;min-width:0}
.wi-at>div{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.wi-at>div b{font-weight:600;color:var(--t)}
.wi-at>div span{color:var(--t3);white-space:nowrap;font-size:11.5px}
.wi-at p{margin:2px 0 0;font-size:12px;color:var(--t2);line-height:1.4}
.wi-empty{font-size:12.5px;padding:4px 0}
.wi-none{padding:16px;display:flex;flex-direction:column;gap:12px;font-size:13px;color:var(--t2)}
.wi-none p{margin:0}
.wi-none .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px}
.wi-x:focus-visible,.wi-ed:focus-visible,.wi-sel:focus-visible,.wi-link:focus-visible,.wi-q:focus-visible{outline:2px solid var(--p);outline-offset:2px}
#wa_info_btn.on{color:var(--p);background:var(--pl)}
/* quick actions under the message box */
.wa-quick{display:flex;align-items:center;gap:8px;padding:0 16px 12px;background:var(--wa-panel-header,var(--s));flex-wrap:wrap}
.wa-qb{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:1px solid var(--bd2);border-radius:9px;background:var(--s);font:inherit;font-size:12.5px;font-weight:600;color:var(--p);cursor:pointer;width:auto!important}
.wa-qb:hover{border-color:var(--p);background:var(--pl)}
.wa-qb:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.wa-qm{position:relative;display:inline-flex}
.wa-qm .row-action-menu{bottom:calc(100% + 6px);top:auto!important}
/* stage pills: list rows and chat header */
.wa-stage{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:var(--c)!important;background:color-mix(in srgb,var(--c) 12%,var(--s))!important;border-radius:6px;padding:1px 8px;line-height:18px;white-space:nowrap}
.wa-stage-h{margin-left:8px;font-size:11.5px;padding:2px 10px;border-radius:999px;vertical-align:middle}

/* r426 · header: the name + stage pill shrink instead of running under the 24-hour timer */
#wa_thread_head .wa-thread-id{min-width:0;flex:0 1 auto;overflow:hidden}
#wa_thread_head .wa-thread-name{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
#wa_thread_head .wa-thread-name>.wa-stage-h{flex:none;margin-left:2px}
.wa-qb.wa-qmore{padding:0 13px!important;font-size:12.5px!important;line-height:1!important;color:var(--t2)}
/* r426 · the 24-hour timer sits in line (it was centred on its own and ran over
   the name and the category when the header got narrower) */
#wa_thread_head .wa-timer{position:static!important;transform:none!important;margin:0 6px 0 auto!important;flex:none}
#wa_thread_head .wa-thread-name>span:first-child,#wa_thread_head .wa-thread-name{overflow:hidden;text-overflow:ellipsis}

/* r427 · a real photo fills the circle */
.wi-av-img{object-fit:cover;display:block}
/* r428 · the details panel buttons stay on one line */
.wi-btns .btn,.wi-q{white-space:nowrap;padding-left:8px!important;padding-right:8px!important;gap:5px;min-width:0}
.wi-btns .btn{font-size:12.5px}
.wi-q{font-size:12px}
.wi-btns .btn svg,.wi-q svg{flex:none}

/* ═══ r430 · chat list rows like WhatsApp: two lines, about 72px ═══ */
#wa_list .wa-chat-item{padding:9px 14px!important;min-height:0!important;align-items:center}
#wa_list .wa-av,#wa_list .wa-av-wrap img.wa-av{width:46px!important;height:46px!important;font-size:15px}
#wa_list .wa-chat-item-body{gap:3px!important;min-width:0}
#wa_list .wa-row1{display:flex;align-items:center;gap:6px;min-width:0}
#wa_list .wa-chat-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
#wa_list .wa-chat-time{margin-left:auto;flex:none}
#wa_list .wa-row2{min-height:0}
.wa-stage-row{flex:none;font-size:10.5px;line-height:16px;padding:0 7px}
/* the header button that shows / hides the details */
#wa_details_btn.on{color:var(--p);border-color:color-mix(in srgb,var(--p) 45%,var(--bd2));background:var(--pl)}
/* r430 · the chat header stays on one line (the name shortens instead) */
#wa_thread_head{flex-wrap:nowrap!important;gap:8px}
#wa_thread_head .wa-thread-actions{flex:none;flex-wrap:nowrap!important;display:flex;align-items:center;gap:4px}
#wa_thread_head .wa-thread-id{flex:1 1 auto}
#wa_thread_head .wa-timer{margin:0 2px 0 auto!important}
#wa_thread_head .wa-hdr-btn{white-space:nowrap}
/* r430 · only the name shortens; the stage pill, timer and buttons always show */
#wa_thread_head .wa-thread-id{flex:1 1 0!important;min-width:70px}
#wa_thread_head .wa-thread-name{overflow:visible!important;min-width:0}
#wa_thread_head .wa-tn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#wa_thread_head .wa-thread-name>*:not(.wa-tn){flex:none}
#wa_thread_head .wa-timer{padding:3px 9px!important;gap:5px!important}
#wa_thread_head .wa-hdr-btn{padding:0 10px;height:30px}
@media (max-width:1700px){#wa_thread_head .wa-timer .wa-timer-left,#wa_thread_head .wa-timer small{display:none}}

/* ═══ r431 · WhatsApp Chat colours of the design ═══ */
:root{--wa-panel-header:#ffffff;--wa-chat-bg:#F2F4F7;--wa-out-bubble:#E3F6E5;--wa-in-bubble:#ffffff;--wa-border:#E6EAF0}
[data-theme="dark"]{--wa-panel-header:var(--s);--wa-chat-bg:#0F172A;--wa-out-bubble:#14532D;--wa-in-bubble:#1E293B}
/* plain light chat background — no wallpaper */
#page-chat .wa-messages{background-color:var(--wa-chat-bg)!important;background-image:none!important}
#page-chat .wa-panel{background:var(--wa-chat-bg)}
/* white headers with a fine line */
#page-chat .wa-sidebar-head,#page-chat #wa_thread_head{background:var(--s)!important;border-bottom:1px solid var(--wa-border)}
#page-chat .wa-sidebar{background:var(--s)}
#page-chat .wa-search-wrap{background:var(--s)}
/* bubbles: white in, soft green out, round corners, light shadow */
#page-chat .wa-bubble{border-radius:10px!important;box-shadow:0 1px 2px rgba(15,23,42,.08)!important}
#page-chat .wa-bubble.out{background:var(--wa-out-bubble)!important}
#page-chat .wa-bubble.in{background:var(--wa-in-bubble)!important}
#page-chat .wa-bubble::after{display:none!important}
/* the list: selected row in a light tint, hover grey */
#wa_list .wa-chat-item{border-bottom:1px solid var(--wa-border)!important}
#wa_list .wa-chat-item:hover{background:var(--s2)!important}
#wa_list .wa-chat-item.on{background:var(--pl)!important}
#wa_list .wa-chat-name{font-weight:600}
#wa_list .wa-badge{background:var(--p)!important;color:var(--text-on-primary,#fff)!important}
/* pictures: each contact's own colour; the default person picture for numbers */
.wa-av,.wa-hav,.wi-av{color:#fff;font-weight:600;display:grid;place-items:center;border-radius:50%}
.wa-av-anon{background:#FDE7E7!important;color:#E26D6D!important}
.wa-av-wrap{position:relative}
.wa-badge-wa{position:absolute;right:-3px;bottom:-3px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--s);background:#25D366;color:#fff}
.wa-badge-wa svg{width:11px;height:11px}
.wa-badge-wa.closed{background:#9AA5B4}
#wa_list .wa-live{display:none}
#wa_thread_head .wa-avatar-sm{background:none!important;padding:0!important;overflow:hidden;cursor:pointer}
#wa_thread_head .wa-hav{width:100%;height:100%;font-size:14px}
img.wa-hav,img.wa-av,img.wi-av{object-fit:cover}
/* under the name: number | Lead */
#wa_thread_head .wa-sub2{display:flex!important;align-items:center;gap:6px;font-size:12px;color:var(--t2);margin-top:2px}
#wa_thread_head .wa-sub2 .wa-sub-sep{color:var(--t3)}
#wa_thread_head .wa-sub2 .wa-sub-closed{color:#B45309}
/* the send button in the brand colour */
#page-chat .wa-send-btn,#page-chat .wa-composer .wa-send{background:var(--p)!important;color:var(--text-on-primary,#fff)!important}
/* the filter chips: outlined, the active one tinted */
#wa_tabs button,#wa_tabs .wa-tab{border-radius:999px}
#wa_tabs .on,#wa_tabs .active{background:var(--pl)!important;color:var(--p)!important;border-color:color-mix(in srgb,var(--p) 50%,var(--bd2))!important}
/* tags in their own colours */
.wi-tag{color:var(--c,var(--p))!important;background:color-mix(in srgb,var(--c,var(--p)) 11%,var(--s))!important}

/* ═══ r432 · the chat fills the space: no gap or extra line above / below ═══ */
.page-chat-full.active{padding:0!important}
#page-chat .wa-app{border:0!important;border-radius:0!important;box-shadow:none!important}
#page-chat #wa_wrap{margin:0!important;padding:0!important}
/* the 24-hour timer in the centre of the header */
#wa_thread_head.wa-cx{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:12px}
#wa_thread_head .wa-hl{display:flex;align-items:center;gap:10px;min-width:0}
#wa_thread_head .wa-hr{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
#wa_thread_head.wa-cx .wa-timer{margin:0!important;justify-self:center}
#wa_thread_head .wa-hl .wa-thread-id{flex:1 1 auto!important;min-width:0}
/* r433: not enough room on the right to centre → the timer sits in line (set by fitHead) */
#wa_thread_head.wa-cx.wa-tight{grid-template-columns:minmax(0,1fr) auto auto}
#wa_thread_head{overflow:hidden}   /* never spills over the details panel */
#wa_thread_head .wa-hr{overflow:hidden}
#wa_thread_head.wa-tight .wa-hr{overflow:visible}
/* ═══ the template picker ═══ */
#page-chat .wa-tpl-sheet.tp{background:var(--s);border:1px solid var(--wa-border);border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.08);overflow:hidden;display:flex;flex-direction:column;max-height:46vh;margin:2px 0}
.tp-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--wa-border)}
.tp-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,#16A34A 12%,var(--s));color:#15803D;flex:none}
.tp-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.tp-t b{font-size:14px;color:var(--t)}
.tp-sub{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t2)}
.tp-sub i{width:7px;height:7px;border-radius:50%;background:#16A34A}
.tp-sub.closed i{background:#D97706}
.tp-q{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px;border:1px solid var(--bd2);border-radius:8px;color:var(--t3);width:240px}
.tp-q input{border:0!important;outline:0;background:transparent!important;box-shadow:none!important;padding:0!important;font:inherit;font-size:12.5px;color:var(--t);width:100%;height:30px}
.tp-q:focus-within{border-color:var(--p);box-shadow:0 0 0 3px var(--pl)}
.tp-x{width:32px;height:32px;border:0;border-radius:8px;background:none;color:var(--t3);cursor:pointer;display:grid;place-items:center;flex:none}
.tp-x:hover{background:var(--s2);color:var(--t)}
.tp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;padding:12px 14px;overflow-y:auto}
.tp-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:11px 12px;border:1px solid var(--bd2);border-radius:10px;background:var(--s);font:inherit;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.tp-card:hover{border-color:color-mix(in srgb,var(--p) 50%,var(--bd2));box-shadow:0 2px 10px rgba(15,23,42,.07)}
.tp-card-h{display:flex;align-items:center;gap:6px;min-width:0}
.tp-card-h b{font-size:13px;color:var(--t);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-cat{font-size:10.5px;font-weight:600;color:var(--t2);background:var(--s2);border-radius:6px;padding:1px 7px;text-transform:capitalize}
.tp-st{font-size:10.5px;font-weight:600;border-radius:6px;padding:1px 7px}
.tp-st.ok{background:color-mix(in srgb,#16A34A 12%,var(--s));color:#15803D}
.tp-st.wait{background:color-mix(in srgb,#D97706 12%,var(--s));color:#B45309}
.tp-st.bad{background:color-mix(in srgb,#DC2626 10%,var(--s));color:#DC2626}
.tp-st.draft{background:var(--s2);color:var(--t2);text-transform:capitalize}
.tp-body{font-size:12.5px;color:var(--t2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
.tp-go{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--p);margin-top:2px}
.tp-none{padding:14px;text-align:center;font-size:12.5px;color:var(--t3)}
.tp-empty{display:flex;align-items:center;gap:14px;padding:18px 16px}
.tp-eic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--s2);color:var(--t3);flex:none}
.tp-eic svg{width:22px;height:22px}
.tp-empty>div{flex:1;min-width:0}
.tp-empty b{font-size:13.5px;color:var(--t)}
.tp-empty p{margin:3px 0 0;font-size:12.5px;color:var(--t2);line-height:1.45}
.tp-card:focus-visible,.tp-x:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.tp-empty,.tp-empty>div{text-align:left!important}

/* r433 · the profile stays at the top of Contact / Lead Details; only the content scrolls */
#page-chat .wa-info{overflow:hidden!important;display:flex;flex-direction:column;min-height:0}
#page-chat .wa-info .wi-fixed{flex:none;background:var(--s);border-bottom:1px solid var(--bd)}
#page-chat .wa-info .wi-fixed .wi-id{border-bottom:0}
#page-chat .wa-info .wi-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}

/* ═══ r434 · the WhatsApp pop-up (lead table › WhatsApp) — the same look ═══ */
.wa-pop-host .wapop-body,.wapop .wapop-body{background-color:var(--wa-chat-bg)!important;background-image:none!important}
.wapop .wa-bubble{border-radius:10px!important;box-shadow:0 1px 2px rgba(15,23,42,.08)!important}
.wapop .wa-bubble.out{background:var(--wa-out-bubble)!important}
.wapop .wa-bubble.in{background:var(--wa-in-bubble)!important}
.wapop .wa-bubble::after{display:none!important}
/* its template picker: the same panel, one card per row */
.wapop-tpl.tp{display:flex;flex-direction:column;border-radius:0;border:0;box-shadow:none;padding:0;overflow:hidden}
.wapop-tpl.tp .tp-head{padding:10px 12px}
.wapop-tpl.tp .tp-ic{width:30px;height:30px}
.wapop-tpl.tp .tp-t b{font-size:13.5px}
.wapop-tpl.tp .tp-sub{font-size:11.5px}
.wapop-tpl.tp .tp-q{width:auto;margin:10px 12px 0}
.wapop-tpl.tp .tp-list{grid-template-columns:1fr;padding:10px 12px 12px;flex:1;min-height:0}
.wapop-tpl.tp .tp-empty{flex-direction:column;text-align:center!important;padding:22px 16px}
.wapop-tpl.tp .tp-empty>div{text-align:center!important}

/* ═══ r435 · the pop-up looks like the WhatsApp Chat page: white header ═══ */
.wa-pop-host .wapop .wapop-head{background:var(--s)!important;border-bottom:1px solid var(--wa-border)!important;padding:9px 10px!important}
.wa-pop-host .wapop .wapop-who b{color:var(--t)!important}
.wa-pop-host .wapop .wapop-who i{color:var(--t2)!important}
.wa-pop-host .wapop .wapop-av{box-shadow:none!important;color:#fff;font-weight:600;display:grid;place-items:center;border-radius:50%}
.wa-pop-host .wapop .wapop-av.wa-av-anon{background:#FDE7E7!important;color:#E26D6D!important}
.wa-pop-host .wapop .wapop-acts button{color:var(--t2)!important}
.wa-pop-host .wapop .wapop-acts button:hover{background:var(--s2)!important;color:var(--t)!important}
.wa-pop-host .wapop .wapop-acts button.on,.wa-pop-host .wapop .wapop-acts button.on svg{color:#F59E0B!important}
.wa-pop-host .wapop .wapop-bar{background:var(--s)!important;border-bottom:1px solid var(--wa-border)!important}
.wa-pop-host .wapop .wapop-bar select{background:var(--s)!important;border-color:var(--bd2)!important;color:var(--t)!important;border-radius:8px}
[data-theme="dark"] .wa-pop-host .wapop .wapop-head{background:var(--s)!important}

/* ═══ r435 · the template panel at normal chat size (page and pop-up) ═══ */
.tp-head{gap:10px!important;padding:9px 12px!important}
.tp-ic{width:28px!important;height:28px!important;border-radius:8px!important}
.tp-ic svg{width:15px;height:15px}
.tp-t b{font-size:13px!important}
.tp-sub{font-size:11.5px!important}
.tp-sub i{width:6px!important;height:6px!important}
.tp-q{height:30px!important;font-size:12px}
.tp-q input{font-size:12px!important;height:26px!important}
.tp-x{width:28px!important;height:28px!important}
.tp-list{gap:8px!important;padding:10px 12px!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.tp-card{padding:9px 10px!important;gap:4px!important;border-radius:9px!important}
.tp-card-h b{font-size:12.5px!important}
.tp-cat,.tp-st{font-size:10px!important;padding:0 6px!important;line-height:16px}
.tp-body{font-size:12px!important;line-height:1.4!important}
.tp-go{font-size:11.5px!important}
.tp-go svg{width:13px;height:13px}
.tp-empty{gap:10px!important;padding:12px 14px!important}
.tp-eic{width:32px!important;height:32px!important;border-radius:9px!important}
.tp-eic svg{width:16px!important;height:16px!important}
.tp-empty b{font-size:12.5px!important}
.tp-empty p{font-size:12px!important;margin-top:2px!important}
.tp-empty .btn{font-size:12px;height:30px;padding:0 12px;white-space:nowrap}
#page-chat .wa-tpl-sheet.tp{max-height:40vh!important;border-radius:10px!important}
.wapop-tpl.tp .tp-head{padding:8px 10px!important}
.wapop-tpl.tp .tp-q{margin:8px 10px 0!important}
.wapop-tpl.tp .tp-list{padding:8px 10px 10px!important}

/* r436 · a closed window looks like an open one: the pill stays in the middle */
#wa_thread_head.wa-closed .wa-timer{display:inline-flex!important}
#wa_thread_head .wa-timer.closed{background:color-mix(in srgb,#D97706 10%,var(--s))!important;border-color:color-mix(in srgb,#D97706 35%,var(--bd))!important}
#wa_thread_head .wa-timer.closed .wa-timer-ic,#wa_thread_head .wa-timer.closed .wa-timer-val{color:#B45309!important;background:transparent!important}
#wa_thread_head .wa-timer.closed .wa-timer-val{font:600 12.5px/1.2 inherit!important;font-family:inherit!important;letter-spacing:0!important}
#wa_thread_head .wa-timer.closed .wa-timer-lbl:empty{display:none}

/* ── r512: Contact / Lead Details, the new layout ───────────────────────── */
#page-chat .wa-info .wq-id{position:relative;padding-right:44px}
.wq-kebab{position:absolute;right:10px;top:10px;width:30px;height:30px;border:0;background:none;border-radius:8px;color:var(--t2);cursor:pointer;display:grid;place-items:center}
.wq-kebab:hover{background:var(--s2);color:var(--t)}
.wq-so{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:14px 16px 4px}
.wq-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.wq-f>span{font-size:12px;color:var(--t2)}
.wq-f .wi-sel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wq-acts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:12px 16px;border:1px solid var(--bd);border-radius:12px;overflow:hidden;background:var(--s)}
.wq-a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 0 9px;border:0;background:none;font:inherit;font-size:11px;font-weight:500;color:var(--t);cursor:pointer;min-width:0}
.wq-a+.wq-a{border-left:1px solid var(--bd)}
.wq-a svg{color:var(--c)}
.wq-a:hover{background:color-mix(in srgb,var(--c) 8%,var(--s))}
.wq-a:disabled{opacity:.45;cursor:not-allowed}
.wq-a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wq-card{margin:0 16px 12px;border:1px solid var(--bd);border-radius:12px;background:var(--s)}
.wq-h{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--bd)}
.wq-h b{font-size:13.5px;color:var(--t)}
.wq-n{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;color:#2563EB;background:color-mix(in srgb,#2563EB 12%,var(--s))}
.wq-n.late{color:#DC2626;background:color-mix(in srgb,#DC2626 12%,var(--s))}
.wq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px;padding:12px 14px 14px}
.wq-i{display:flex;flex-direction:column;gap:3px;min-width:0}
.wq-i.wide{grid-column:1/-1}
.wq-i>span{font-size:11.5px;color:var(--t2)}
.wq-i>div{font-size:13px;font-weight:500;color:var(--t);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wq-i>div a{color:var(--t)}
.wq-i .wi-link{padding:0}
.wq-src{display:inline-block;font-size:12px;font-weight:600;color:#7C3AED;background:color-mix(in srgb,#7C3AED 12%,var(--s));padding:2px 8px;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.wq-late{color:#DC2626!important}
.wq-t{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.wq-t+.wq-t{border-top:1px solid var(--bd)}
.wq-t:hover{background:var(--s2)}
.wq-tic{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;color:#2563EB;background:color-mix(in srgb,#2563EB 12%,var(--s))}
.wq-t.late .wq-tic{color:#DC2626;background:color-mix(in srgb,#DC2626 12%,var(--s))}
.wq-tt{display:flex;flex-direction:column;min-width:0}
.wq-tt b{font-size:13px;color:var(--t)}
.wq-tt small{font-size:11.5px;color:var(--t2)}
.wq-t.late .wq-tt small{color:#DC2626;font-weight:600}
.wq-none{padding:12px 14px;font-size:12.5px}
.wq-all{margin:4px 14px 10px}

/* ── r543: WhatsApp setup › phone numbers — added and edited inside the panel ── */
.wan{margin-top:16px;border-top:1px solid var(--bd);padding-top:14px}
.wan-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.wan-h b{display:block;font-size:13px;color:var(--t)}
.wan-h span{display:block;font-size:11.5px;color:var(--t3);margin-top:2px}
.wan-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--bd);border-radius:10px;margin-bottom:8px;background:var(--s)}
.wan-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#16A34A;background:color-mix(in srgb,#16A34A 12%,var(--s));flex:none}
.wan-t{flex:1;min-width:0}
.wan-t b{display:block;font-size:12.5px;color:var(--t)}
.wan-t span{display:block;font-size:11.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wan-q{font-size:12px;font-weight:600;color:var(--r)}
.wan-empty{font-size:12px;color:var(--t3);margin-bottom:8px}
.wan-add{margin-top:2px}
.wan-form{border:1px solid color-mix(in srgb,#16A34A 35%,var(--bd));background:color-mix(in srgb,#16A34A 4%,var(--s));border-radius:12px;padding:14px;margin:4px 0 10px}
.wan-fh b{display:block;font-size:13px;color:var(--t)}
.wan-fh span{display:block;font-size:11.5px;color:var(--t3);margin:2px 0 12px}
.wan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wan-form .ff{margin-bottom:10px}
.wan-form .ff input{width:100%}
.wan-err{font-size:12px;color:var(--r);background:color-mix(in srgb,#DC2626 8%,var(--s));border-radius:8px;padding:7px 10px;margin-bottom:10px}
.wan-acts{display:flex;gap:8px}
@media(max-width:700px){.wan-grid{grid-template-columns:1fr}}
