/* ============================================================================
   SELLiora — WhatsApp-style chat inbox
   Visual language matched to WhatsApp Web: colours, bubble shapes + tails,
   ticks, date pills, composer. Structure/ids stay Selliora's own (app.js
   still drives #wa_list / #wa_thread / #wa_composer etc.) — this file only
   supplies the look.
   ============================================================================ */

:root{
  --wa-panel-header:#f0f2f5;
  --wa-sidebar-bg:#ffffff;
  --wa-chat-bg:#efeae2;
  --wa-out-bubble:#d9fdd3;
  --wa-in-bubble:#ffffff;
  --wa-teal-dark:#008069;
  --wa-teal-icon:#54656f;
  --wa-tick-blue:#53bdeb;
  --wa-text:#111b21;
  --wa-text-dim:#667781;
  --wa-border:#e9edef;
  --wa-unread:#25d366;
  --wa-hover:#f5f6f6;
  --wa-active:#f0f2f5;
}
[data-theme="dark"]{
  --wa-panel-header:#202c33;
  --wa-sidebar-bg:#111b21;
  --wa-chat-bg:#0b141a;
  --wa-out-bubble:#005c4b;
  --wa-in-bubble:#202c33;
  --wa-teal-dark:#202c33;
  --wa-teal-icon:#aebac1;
  --wa-tick-blue:#53bdeb;
  --wa-text:#e9edef;
  --wa-text-dim:#8696a0;
  --wa-border:#2a3942;
  --wa-unread:#25d366;
  --wa-hover:#202c33;
  --wa-active:#2a3942;
}

.wa-app{
  display:flex; height:100%; min-height:0; overflow:hidden;
  border-radius:8px; border:1px solid var(--wa-border);
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  box-shadow:0 1px 3px rgba(11,20,26,.08);
}

/* ---------- Sidebar (conversation list) ---------- */
.wa-sidebar{
  flex:0 0 380px; display:flex; flex-direction:column; min-width:320px;
  background:var(--wa-sidebar-bg); border-right:1px solid var(--wa-border);
}
.wa-sidebar-head{
  background:var(--wa-panel-header); padding:10px 16px;
  display:flex; align-items:center; gap:12px; height:59px; flex:none;
}
.wa-sidebar-head .wa-avatar-sm{width:36px;height:36px;font-size:14px}
.wa-sidebar-head .wa-avatar-sm svg{width:19px;height:19px}
.wa-sidebar-head .wa-title{font-size:15px;font-weight:600;color:var(--wa-text);flex:1}
.wa-icon-btn{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--wa-teal-icon);cursor:pointer;background:transparent;border:none;flex:none;
}
.wa-icon-btn:hover{background:var(--wa-hover)}
.wa-search-wrap{padding:8px 12px;flex:none}
.wa-search-row{display:flex;align-items:center;gap:8px}
.wa-search-box{
  display:flex;align-items:center;gap:14px;background:var(--wa-panel-header);
  border-radius:8px;padding:0 12px;height:36px;flex:1;min-width:0;
}
.wa-search-box svg{flex:none;color:var(--wa-text-dim)}
.wa-search-box input{
  border:none;background:transparent;outline:none;font-size:14px;width:100%;
  color:var(--wa-text);height:100%;
}
.wa-search-box input:focus{border-color:transparent;box-shadow:none}
/* filter icon button next to search, and the professional dropdown it opens */
.wa-filter-btn{position:relative;flex:none}
.wa-filter-badge{
  position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;
  background:#e0483a;border:2px solid var(--wa-sidebar-bg);
}
.wa-filters-panel{min-width:270px;max-width:300px;padding:10px 0;max-height:400px;overflow-y:auto}
.wa-filters-head{
  display:flex;align-items:center;justify-content:space-between;padding:2px 14px 10px;
  font-size:13px;font-weight:700;color:var(--wa-text);border-bottom:1px solid var(--wa-border);margin-bottom:8px;
}
.wa-filters-clear{border:none;background:transparent;color:var(--wa-teal-dark);font-size:11.5px;font-weight:600;cursor:pointer;padding:0}
.wa-filters-clear:hover{text-decoration:underline}
.wa-filters-section{padding:0 14px 12px}
.wa-filters-label{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--wa-text-dim);margin-bottom:7px}
.wa-filters-chips{display:flex;flex-wrap:wrap;gap:6px}
.wa-filters-chip{
  display:inline-flex;align-items:center;gap:5px;border:1px solid var(--wa-border);background:transparent;
  color:var(--wa-text-dim);font-size:12px;font-weight:600;padding:5px 10px;border-radius:14px;cursor:pointer;white-space:nowrap;
}
.wa-filters-chip:hover{background:var(--wa-hover)}
.wa-filters-chip.on{background:var(--fbg,#d9fdd3);color:var(--fc,#008069);border-color:transparent}
.wa-tabs-row{
  display:flex;flex-wrap:nowrap;gap:5px;padding:2px 12px 12px;flex:none;
  border-bottom:1px solid var(--wa-border);overflow-x:auto;scrollbar-width:none;
}
.wa-tabs-row::-webkit-scrollbar{display:none}
.wa-subfilter-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px 4px;
  border-bottom:1px solid var(--wa-border);
}
.wa-window-filter-btn{display:inline-flex;align-items:center;gap:5px}
.wa-window-filter-btn b{font-weight:700}
.wa-window-filter-btn.on{background:#fdece8;color:#c0392b;border-color:transparent}
[data-theme="dark"] .wa-window-filter-btn.on{background:#3a2420;color:#ff8a75}
.wa-number-switch-btn{
  display:inline-flex;align-items:center;gap:4px;background:#e7defc;color:#5b34a8;
  border:none;border-radius:12px;font-size:11px;font-weight:700;padding:4px 9px;cursor:pointer;white-space:nowrap;
}
[data-theme="dark"] .wa-number-switch-btn{background:#3a2d52;color:#c7a9f0}
.wa-number-pill-static{
  font-size:11px;font-weight:600;color:var(--wa-text-dim);background:var(--wa-panel-header);
  border:1px solid var(--wa-border);border-radius:12px;padding:3px 9px;white-space:nowrap;
}
.wa-tab-chip{
  border:1px solid var(--wa-border);background:transparent;color:var(--wa-text-dim);
  font-size:10.5px;font-weight:600;padding:4px 8px;border-radius:16px;cursor:pointer;
  white-space:nowrap;flex:none;
}
.wa-tab-chip.on{background:#d9fdd3;color:#008069;border-color:transparent}
[data-theme="dark"] .wa-tab-chip.on{background:#005c4b;color:#e9edef}
.wa-tab-chip.urgent{background:#fdece8;color:#c0392b;border-color:transparent}
.wa-tab-chip.urgent.on{background:#f5b8ab;color:#7a1f10}
[data-theme="dark"] .wa-tab-chip.urgent{background:#3a2420;color:#ff8a75}
[data-theme="dark"] .wa-tab-chip.urgent.on{background:#5a2e26;color:#ffb3a3}

.wa-list{flex:1;overflow-y:auto}
.wa-chat-item{
  display:flex;gap:12px;align-items:center;padding:10px 12px 10px 16px;cursor:pointer;
  border-bottom:1px solid var(--wa-border);
}
.wa-chat-item:hover{background:var(--wa-hover)}
.wa-chat-item.on{background:var(--wa-active)}
.wa-avatar-sm{
  width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--acc);color:#fff;font-weight:700;font-size:16px;line-height:1;overflow:hidden;
}
.wa-chat-item-body{flex:1;min-width:0;border-bottom:0}
.wa-row1{display:flex;align-items:center;gap:6px}
.wa-chat-name{font-size:14.5px;font-weight:500;color:var(--wa-text);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-chat-time{font-size:11.5px;color:var(--wa-text-dim);flex:none}
/* session-window colour band on the list timestamp — same green/amber/red
   as the thread header pill, so urgency reads at a glance without opening the chat */
.wa-chat-time.wa-win-pa{color:#c98a1f;font-weight:600}
.wa-chat-time.wa-win-pr{color:#d84c4c;font-weight:700}
[data-theme="dark"] .wa-chat-time.wa-win-pa{color:#e0b04a}
[data-theme="dark"] .wa-chat-time.wa-win-pr{color:#ff8a75}
.wa-row2{display:flex;align-items:center;gap:6px;margin-top:2px}
.wa-chat-preview{font-size:13px;color:var(--wa-text-dim);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-badge{
  background:var(--wa-unread);color:#fff;font-size:11px;font-weight:700;border-radius:999px;
  min-width:19px;height:19px;display:flex;align-items:center;justify-content:center;padding:0 5px;flex:none;
}
.wa-lock-chip{color:#b8860b;flex:none;display:flex;opacity:.85}
[data-theme="dark"] .wa-lock-chip{color:#e0b04a}
.wa-chat-preview i{font-style:normal;color:var(--wa-text-dim);opacity:.75}
.wa-lead-chip{font-size:10.5px;margin-top:1px;color:var(--wa-text-dim);opacity:.7}
.wa-empty-list{padding:30px 20px;text-align:center;color:var(--wa-text-dim);font-size:13px}
.wa-group-head{
  padding:8px 16px 4px;font-size:11px;font-weight:700;letter-spacing:.03em;
  color:var(--wa-text-dim);text-transform:uppercase;background:var(--wa-sidebar-bg);
  position:sticky;top:0;z-index:1;
}
.wa-group-head .n{font-weight:600;opacity:.7;text-transform:none;letter-spacing:0}
.wa-group-head.wa-group-urgent{color:#c0392b}
[data-theme="dark"] .wa-group-head.wa-group-urgent{color:#ff8a75}
.wa-group-head.wa-group-urgent .n{opacity:.85}

/* ---------- Chat panel ---------- */
.wa-panel{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--wa-chat-bg)}
.wa-panel-placeholder{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--wa-text-dim);text-align:center;gap:10px;background:var(--wa-panel-header);
}
.wa-panel-placeholder .wa-ph-icon{
  width:72px;height:72px;border-radius:50%;background:#dcf8c6;color:#00a884;
  display:flex;align-items:center;justify-content:center;margin-bottom:6px;
}
[data-theme="dark"] .wa-panel-placeholder .wa-ph-icon{background:#005c4b;color:#25d366}

.wa-thread-head{
  background:var(--wa-panel-header);height:59px;flex:none;
  display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--wa-border);
}
.wa-thread-head .wa-avatar-sm{width:40px;height:40px;font-size:14px;cursor:pointer}
.wa-thread-id{flex:1;min-width:0;cursor:pointer}
.wa-thread-name{font-size:15px;font-weight:500;color:var(--wa-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-thread-sub{font-size:12px;color:var(--wa-text-dim);display:flex;align-items:center;gap:5px}
.wa-thread-sub-dot{font-size:8px;line-height:1}
.wa-thread-sub.is-open .wa-thread-sub-dot{color:#25d366}
.wa-thread-sub.is-closed .wa-thread-sub-dot{color:#f0ad4e}
.wa-thread-sub.is-closed{color:#b8860b}
[data-theme="dark"] .wa-thread-sub.is-closed{color:#e0b04a}
.wa-thread-actions{display:flex;align-items:center;gap:6px;flex:none}
.wa-hdr-btn{
  border:1px solid var(--wa-border);background:transparent;color:var(--wa-teal-icon);
  font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:16px;cursor:pointer;white-space:nowrap;
}
.wa-hdr-btn:hover{background:var(--wa-hover)}
.wa-hdr-btn.pri{background:var(--wa-teal-dark);color:#fff;border-color:transparent}
.wa-hdr-btn.pri:hover{filter:brightness(1.08)}

/* chat-type / status pills in the thread header (like WATI's tag + SUBMIT AS) */
.wa-cat-pill,.wa-status-pill{
  border:none;border-radius:14px;font-size:11.5px;font-weight:700;padding:5px 10px;
  display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;flex:none;
}
.wa-cat-pill:hover,.wa-status-pill:hover{filter:brightness(.96)}
.wa-cat-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.wa-thread-head{flex-wrap:wrap;height:auto;min-height:59px;row-gap:6px;padding:10px 16px}
.wa-thread-actions{flex-wrap:wrap;margin-left:auto}

/* message area */
.wa-messages{
  flex:1;overflow-y:auto;padding:14px 6% 10px;
  background-color:var(--wa-chat-bg);
  background-image:
    radial-gradient(circle at 8% 12%, rgba(0,0,0,.02) 1px, transparent 1px),
    radial-gradient(circle at 32% 68%, rgba(0,0,0,.02) 1px, transparent 1px),
    radial-gradient(circle at 62% 22%, rgba(0,0,0,.02) 1px, transparent 1px),
    radial-gradient(circle at 84% 78%, rgba(0,0,0,.02) 1px, transparent 1px);
  background-size:120px 120px;
}
.wa-thread-search-bar{
  position:sticky;top:-14px;margin:-14px -6% 12px;z-index:5;
  display:flex;align-items:center;gap:8px;padding:10px 6%;
  background:var(--wa-panel-header);border-bottom:1px solid var(--wa-border);
}
.wa-thread-search-bar input{
  flex:1;border:none;background:var(--wa-sidebar-bg);border-radius:8px;
  padding:7px 10px;font-size:13.5px;color:var(--wa-text);outline:none;
}
.wa-date-sep{display:flex;justify-content:center;margin:14px 0}
.wa-date-pill{
  background:#e1f2fb;color:#54656f;font-size:12px;font-weight:600;padding:5px 12px;
  border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.08);
}
[data-theme="dark"] .wa-date-pill{background:#182229;color:#8696a0}

.wa-msg-row{display:flex;margin-bottom:3px}
.wa-msg-row.out{justify-content:flex-end}
.wa-msg-row.in{justify-content:flex-start}
.wa-bubble{
  position:relative;max-width:65%;min-width:64px;padding:6px 9px 8px;
  border-radius:7.5px;font-size:14.2px;line-height:19px;color:var(--wa-text);
  box-shadow:0 1px .5px rgba(11,20,26,.13);
}
.wa-bubble.out{background:var(--wa-out-bubble);border-top-right-radius:0}
.wa-bubble.in{background:var(--wa-in-bubble);border-top-left-radius:0}
.wa-bubble.out::after{
  content:"";position:absolute;top:0;right:-8px;width:8px;height:13px;
  background:var(--wa-out-bubble);
  clip-path:polygon(0 0, 0% 100%, 100% 0);
}
.wa-bubble.in::after{
  content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;
  background:var(--wa-in-bubble);
  clip-path:polygon(100% 0, 0% 0, 100% 100%);
}
.wa-bubble-tpl{
  font-size:11px;font-weight:700;color:#008069;margin-bottom:3px;
  display:flex;align-items:center;gap:4px;
}
[data-theme="dark"] .wa-bubble-tpl{color:#00a884}
.wa-bubble-text{white-space:pre-wrap;word-break:break-word;padding-right:2px}
.wa-bubble-meta{
  display:flex;justify-content:flex-end;align-items:center;gap:3px;
  font-size:11px;color:var(--wa-text-dim);margin-top:2px;
  float:right;margin-left:8px;
}
.wa-tick{display:inline-flex;line-height:0}
.wa-tick svg{display:block}
.wa-tick.read svg{color:var(--wa-tick-blue)}
.wa-tick.sent svg,.wa-tick.delivered svg{color:var(--wa-text-dim)}
.wa-bubble-err{
  font-size:11.5px;line-height:1.45;color:#b23b3b;
  margin-top:6px;padding:6px 8px;border-radius:6px;
  background:rgba(216,76,76,.10);
  display:flex;gap:6px;align-items:flex-start;
}
.wa-bubble-err::before{content:"\26A0";flex:none;opacity:.8}
.wa-bubble.has-media{min-width:260px}
.wa-media-loading{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--wa-text-dim);
  background:rgba(0,0,0,.04);border-radius:6px;padding:8px 10px;
}
[data-theme="dark"] .wa-media-loading{background:rgba(255,255,255,.06)}
.wa-skel-pulse{
  width:16px;height:16px;border-radius:50%;flex:none;
  background:var(--wa-teal-dark);opacity:.4;animation:waSkelPulse 1.1s ease-in-out infinite;
}
@keyframes waSkelPulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:.6;transform:scale(1)}}
.wa-reaction-badge{
  position:absolute;bottom:-10px;right:6px;background:var(--wa-panel-header);
  border:1px solid var(--wa-border);border-radius:999px;font-size:13px;
  padding:1px 5px;box-shadow:0 1px 2px rgba(0,0,0,.15);line-height:1.4;
}
.wa-empty-thread{
  text-align:center;color:var(--wa-text-dim);font-size:13px;padding:40px 20px;
}

/* composer */
.wa-composer{
  background:var(--wa-panel-header); flex:none; padding:8px 16px;
  display:flex; align-items:flex-end; gap:8px; border-top:1px solid var(--wa-border);
}
.wa-composer-input-wrap{
  flex:1;background:var(--wa-in-bubble);border-radius:8px;
  display:flex;align-items:center;padding:0 8px 0 12px;min-height:42px;
}
.wa-composer textarea{
  flex:1;border:none;background:transparent;outline:none;resize:none;
  font-size:14.5px;line-height:20px;padding:10px 0;max-height:100px;
  color:var(--wa-text);font-family:inherit;
}
/* app-wide inputs get a focus glow (:where(input,select,textarea):focus in
   index.html) — WhatsApp's own composer never shows one, so this switches
   it off just here without touching that global default anywhere else. */
.wa-composer textarea:focus{border-color:transparent;box-shadow:none}
.wa-send-btn{
  width:42px;height:42px;border-radius:50%;background:transparent;border:none;
  display:flex;align-items:center;justify-content:center;color:var(--wa-teal-icon);
  cursor:pointer;flex:none;
}
.wa-send-btn.active{background:var(--wa-teal-dark);color:#fff}
.wa-send-btn:hover.active{filter:brightness(1.08)}

/* locked / window-closed composer */
.wa-locked-bar{
  flex:1;display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:#fef6e0;border-radius:8px;cursor:pointer;
}
[data-theme="dark"] .wa-locked-bar{background:#2a2415}
.wa-locked-icon{color:#b8860b;flex:none;display:flex}
[data-theme="dark"] .wa-locked-icon{color:#e0b04a}
.wa-locked-bar .txt{font-size:12.5px;color:var(--wa-text);flex:1}
.wa-locked-btn{
  background:var(--wa-teal-dark);color:#fff;border:none;border-radius:6px;
  padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;flex:none;
}

/* template picker sheet */
.wa-tpl-sheet{
  background:var(--wa-sidebar-bg);border:1px solid var(--wa-border);border-radius:10px;
  box-shadow:0 4px 18px rgba(11,20,26,.18);max-height:280px;display:flex;flex-direction:column;
  overflow:hidden;
}
.wa-tpl-head{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--wa-border);
  font-size:12.5px;font-weight:700;color:var(--wa-text);flex:none;
}
.wa-tpl-list{overflow-y:auto;flex:1}
.wa-tpl-item{padding:9px 12px;border-bottom:1px solid var(--wa-border);cursor:pointer}
.wa-tpl-item:hover{background:var(--wa-hover)}
.wa-tpl-item-top{display:flex;gap:6px;align-items:center}
.wa-tpl-name{font-size:12.5px;font-weight:700;flex:1;color:var(--wa-text)}
.wa-tpl-body{font-size:11.5px;color:var(--wa-text-dim);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-tpl-empty{padding:16px;font-size:12px;color:var(--wa-text-dim);text-align:center}

/* base chrome for every row-action-menu dropdown (elsewhere in the app this
   comes from inline styles set at creation time; our WA dropdowns rely on
   this class rule instead, so a plain <div class="row-action-menu"> like
   #wa_filters_panel gets the same solid background/border/shadow for free) */
.row-action-menu{
  background:var(--s);border:1px solid var(--bd2);border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.22);z-index:9998;
}

.wa-list::-webkit-scrollbar,.wa-messages::-webkit-scrollbar,.wa-tpl-list::-webkit-scrollbar{width:6px}
.wa-list::-webkit-scrollbar-thumb,.wa-messages::-webkit-scrollbar-thumb,.wa-tpl-list::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.18);border-radius:3px;
}
.wa-list::-webkit-scrollbar-track,.wa-messages::-webkit-scrollbar-track,.wa-tpl-list::-webkit-scrollbar-track{background:transparent}
.wa-list,.wa-messages,.wa-tpl-list{scrollbar-width:thin}

.wa-status-dot{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:5px}
.wa-status-dot.on{background:#dcf8c6;color:#008069}
.wa-status-dot.off{background:#f0f2f5;color:var(--wa-text-dim)}
[data-theme="dark"] .wa-status-dot.on{background:#0b3d33;color:#25d366}
[data-theme="dark"] .wa-status-dot.off{background:#202c33;color:#8696a0}

@keyframes waPulse{0%,100%{opacity:1}50%{opacity:.3}}

@media (max-width: 860px){
  .wa-sidebar{flex:0 0 100%;display:var(--wa-sidebar-display,flex)}
  .wa-panel{display:var(--wa-panel-display,none)}
}

/* ============================================================================
   v2 — real-WhatsApp surface: doodle wallpaper, voice notes, document cards,
   media bubbles. Appended, so nothing above needs to change.
   ============================================================================ */

:root{
  --wa-seek-rest:rgba(11,20,26,.20);
  --wa-seek-thumb:#8696a0;
  --wa-doc-bg:rgba(11,20,26,.045);
  --wa-doc-line:rgba(11,20,26,.09);
  --wa-doc-act:#027eb5;
}
[data-theme="dark"]{
  --wa-seek-rest:rgba(233,237,239,.26);
  --wa-seek-thumb:#8696a0;
  --wa-doc-bg:rgba(233,237,239,.06);
  --wa-doc-line:rgba(233,237,239,.12);
  --wa-doc-act:#53bdeb;
}

/* ---------- wallpaper: sits behind the scroller and stays put, like WhatsApp ---------- */
.wa-panel{
  background-color:var(--wa-chat-bg);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%20viewBox%3D%270%200%20300%20300%27%20fill%3D%27none%27%20stroke%3D%27%23000000%27%20stroke-opacity%3D%270.06%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%2030h34a5%205%200%200%201%205%205v18a5%205%200%200%201-5%205H32l-9%208v-8h-5a5%205%200%200%201-5-5V35a5%205%200%200%201%205-5z%27%2F%3E%3Cpath%20d%3D%27M105%2028c4-8%2016-6%2016%203%200%207-10%2013-16%2018-6-5-16-11-16-18%200-9%2012-11%2016-3z%27%2F%3E%3Cpath%20d%3D%27M180%2022l4.6%209.6%2010.4%201.5-7.5%207.4%201.8%2010.5-9.3-5-9.3%205%201.8-10.5-7.5-7.4%2010.4-1.5z%27%2F%3E%3Ccircle%20cx%3D%27258%27%20cy%3D%2740%27%20r%3D%2715%27%2F%3E%3Cpath%20d%3D%27M252%2036h.01M264%2036h.01M251%2046c4%204%2010%204%2014%200%27%2F%3E%3Cpath%20d%3D%27M40%20100V78l16-4v22%27%2F%3E%3Ccircle%20cx%3D%2736%27%20cy%3D%27101%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2752%27%20cy%3D%2797%27%20r%3D%275%27%2F%3E%3Crect%20x%3D%2796%27%20y%3D%2784%27%20width%3D%2738%27%20height%3D%2726%27%20rx%3D%274%27%2F%3E%3Ccircle%20cx%3D%27115%27%20cy%3D%2797%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27M106%2084l3-5h12l3%205%27%2F%3E%3Cpath%20d%3D%27M170%2084h30l-4%2026h-22z%27%2F%3E%3Cpath%20d%3D%27M200%2090h7a4%204%200%200%201%200%2010h-6%27%2F%3E%3Cpath%20d%3D%27M244%20110c0-10%206-16%206-26%200-6-5-9-9-6%27%2F%3E%3Cpath%20d%3D%27M232%20110h36%27%2F%3E%3Ccircle%20cx%3D%27250%27%20cy%3D%2784%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M22%20168c8-14%2026-14%2034%200%27%2F%3E%3Cpath%20d%3D%27M39%20168v14a6%206%200%200%201-12%200%27%2F%3E%3Ccircle%20cx%3D%27112%27%20cy%3D%27168%27%20r%3D%2717%27%2F%3E%3Cpath%20d%3D%27M112%20158v10l7%205%27%2F%3E%3Cpath%20d%3D%27M176%20152l30%2012-30%2012%205-12z%27%2F%3E%3Crect%20x%3D%27240%27%20y%3D%27152%27%20width%3D%2730%27%20height%3D%2724%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M240%20160h30M255%20152v24%27%2F%3E%3Cpath%20d%3D%27M30%20240c10-16%2026-16%2034-4%27%2F%3E%3Cpath%20d%3D%27M30%20240l-6%2012%2014-4z%27%2F%3E%3Ccircle%20cx%3D%27118%27%20cy%3D%27242%27%20r%3D%2716%27%2F%3E%3Cpath%20d%3D%27M118%20226v32M102%20242h32%27%2F%3E%3Cpath%20d%3D%27M172%20228h26v30l-13-8-13%208z%27%2F%3E%3Cpath%20d%3D%27M244%20232c8%200%2012%206%2012%2012s-6%2014-14%2014-12-6-12-12%27%2F%3E%3Ccircle%20cx%3D%27256%27%20cy%3D%27250%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E");
  background-size:250px 250px;
}
[data-theme="dark"] .wa-panel{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%20viewBox%3D%270%200%20300%20300%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.07%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%2030h34a5%205%200%200%201%205%205v18a5%205%200%200%201-5%205H32l-9%208v-8h-5a5%205%200%200%201-5-5V35a5%205%200%200%201%205-5z%27%2F%3E%3Cpath%20d%3D%27M105%2028c4-8%2016-6%2016%203%200%207-10%2013-16%2018-6-5-16-11-16-18%200-9%2012-11%2016-3z%27%2F%3E%3Cpath%20d%3D%27M180%2022l4.6%209.6%2010.4%201.5-7.5%207.4%201.8%2010.5-9.3-5-9.3%205%201.8-10.5-7.5-7.4%2010.4-1.5z%27%2F%3E%3Ccircle%20cx%3D%27258%27%20cy%3D%2740%27%20r%3D%2715%27%2F%3E%3Cpath%20d%3D%27M252%2036h.01M264%2036h.01M251%2046c4%204%2010%204%2014%200%27%2F%3E%3Cpath%20d%3D%27M40%20100V78l16-4v22%27%2F%3E%3Ccircle%20cx%3D%2736%27%20cy%3D%27101%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2752%27%20cy%3D%2797%27%20r%3D%275%27%2F%3E%3Crect%20x%3D%2796%27%20y%3D%2784%27%20width%3D%2738%27%20height%3D%2726%27%20rx%3D%274%27%2F%3E%3Ccircle%20cx%3D%27115%27%20cy%3D%2797%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27M106%2084l3-5h12l3%205%27%2F%3E%3Cpath%20d%3D%27M170%2084h30l-4%2026h-22z%27%2F%3E%3Cpath%20d%3D%27M200%2090h7a4%204%200%200%201%200%2010h-6%27%2F%3E%3Cpath%20d%3D%27M244%20110c0-10%206-16%206-26%200-6-5-9-9-6%27%2F%3E%3Cpath%20d%3D%27M232%20110h36%27%2F%3E%3Ccircle%20cx%3D%27250%27%20cy%3D%2784%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M22%20168c8-14%2026-14%2034%200%27%2F%3E%3Cpath%20d%3D%27M39%20168v14a6%206%200%200%201-12%200%27%2F%3E%3Ccircle%20cx%3D%27112%27%20cy%3D%27168%27%20r%3D%2717%27%2F%3E%3Cpath%20d%3D%27M112%20158v10l7%205%27%2F%3E%3Cpath%20d%3D%27M176%20152l30%2012-30%2012%205-12z%27%2F%3E%3Crect%20x%3D%27240%27%20y%3D%27152%27%20width%3D%2730%27%20height%3D%2724%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M240%20160h30M255%20152v24%27%2F%3E%3Cpath%20d%3D%27M30%20240c10-16%2026-16%2034-4%27%2F%3E%3Cpath%20d%3D%27M30%20240l-6%2012%2014-4z%27%2F%3E%3Ccircle%20cx%3D%27118%27%20cy%3D%27242%27%20r%3D%2716%27%2F%3E%3Cpath%20d%3D%27M118%20226v32M102%20242h32%27%2F%3E%3Cpath%20d%3D%27M172%20228h26v30l-13-8-13%208z%27%2F%3E%3Cpath%20d%3D%27M244%20232c8%200%2012%206%2012%2012s-6%2014-14%2014-12-6-12-12%27%2F%3E%3Ccircle%20cx%3D%27256%27%20cy%3D%27250%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E");}
.wa-messages{background:transparent;background-image:none;padding:12px 5% 8px}

/* ---------- bubbles ---------- */
.wa-bubble{max-width:min(65%,520px)}
[data-theme="dark"] .wa-bubble{box-shadow:0 1px .5px rgba(0,0,0,.35)}
.wa-msg-row+.wa-msg-row{margin-top:2px}
.wa-bubble-text:empty{display:none}
.wa-bubble.media-only{padding:4px 4px 6px}
.wa-bubble.media-only .wa-bubble-meta{margin-right:4px}

/* ---------- voice note ---------- */
.wa-voice{display:flex;align-items:center;gap:9px;min-width:250px;max-width:320px;padding:3px 2px 1px}
.wa-voice-play{
  width:34px;height:34px;flex:none;border:none;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--wa-text-dim);
  display:flex;align-items:center;justify-content:center;
}
.wa-voice-play:hover{color:var(--wa-text)}
.wa-voice-play svg{display:block}
.wa-voice-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wa-voice-seek{
  -webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;
  cursor:pointer;margin:0;display:block;
}
.wa-voice-seek::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(to right,var(--wa-tick-blue) 0%,var(--wa-tick-blue) var(--pct,0%),
             var(--wa-seek-rest) var(--pct,0%),var(--wa-seek-rest) 100%);
}
.wa-voice-seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--wa-seek-thumb);border:none;margin-top:-4.5px;
}
.wa-voice-seek::-moz-range-track{height:3px;border-radius:2px;background:var(--wa-seek-rest)}
.wa-voice-seek::-moz-range-progress{height:3px;border-radius:2px;background:var(--wa-tick-blue)}
.wa-voice-seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--wa-seek-thumb);border:none}
.wa-voice-times{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:var(--wa-text-dim);line-height:1}
.wa-voice-times .wa-bubble-meta{float:none;margin:0;font-size:11px}
.wa-bubble.voice-only{padding:5px 7px 6px}
.wa-bubble.voice-only>.wa-bubble-meta{display:none}
.wa-voice-av{
  width:38px;height:38px;flex:none;border-radius:50%;position:relative;
  background:#f5a623;color:#fff;display:flex;align-items:center;justify-content:center;
}
.wa-voice-av.played{background:#8696a0}
.wa-voice-av svg{display:block}
.wa-voice-av .mic-dot{
  position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  background:#25d366;border:2px solid var(--wa-in-bubble);
}
.wa-bubble.out .wa-voice-av .mic-dot{border-color:var(--wa-out-bubble)}

/* ---------- document card ---------- */
.wa-doc{min-width:260px;max-width:330px;border-radius:6px;overflow:hidden;background:var(--wa-doc-bg);margin:1px 0 2px}
.wa-doc-row{display:flex;align-items:center;gap:10px;padding:11px 12px}
.wa-doc-icon{
  width:30px;height:36px;flex:none;border-radius:3px;position:relative;
  display:flex;align-items:flex-end;justify-content:center;
  background:#8696a0;color:#fff;font-size:8px;font-weight:800;letter-spacing:.02em;padding-bottom:4px;
}
.wa-doc-icon.pdf{background:#f15c5c}
.wa-doc-icon.doc{background:#4a7dd6}
.wa-doc-icon.xls{background:#3f9c53}
.wa-doc-icon.ppt{background:#e07a3c}
.wa-doc-icon.zip{background:#b0883f}
.wa-doc-icon::before{
  content:"";position:absolute;top:0;right:0;border-width:0 9px 9px 0;border-style:solid;
  border-color:transparent rgba(0,0,0,.22) transparent transparent;
}
.wa-doc-meta{flex:1;min-width:0}
.wa-doc-name{font-size:13.5px;color:var(--wa-text);line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-doc-sub{font-size:11.5px;color:var(--wa-text-dim);margin-top:2px}
.wa-doc-acts{display:flex;border-top:1px solid var(--wa-doc-line)}
.wa-doc-acts a{
  flex:1;text-align:center;padding:9px 6px;font-size:13px;font-weight:500;
  color:var(--wa-doc-act);text-decoration:none;cursor:pointer;
}
.wa-doc-acts a:hover{background:rgba(127,127,127,.09)}
.wa-doc-acts a+a{border-left:1px solid var(--wa-doc-line)}

/* ---------- image / video ---------- */
.wa-media-img,.wa-media-vid{display:block;max-width:100%;width:330px;border-radius:6px;background:rgba(127,127,127,.12)}
.wa-media-img{cursor:pointer}
.wa-media-cap{margin-top:5px;padding:0 4px}

/* ---------- list + chrome polish ---------- */
.wa-composer{padding:8px 16px 10px}
.wa-date-pill{text-transform:none;font-weight:500;font-size:12.5px}
/* Previously WhatsApp had its own green gradient here, so even when Branding
   changed the color, these avatars stayed green. Nowahi --acc lagta hai jo
   the topbar profile avatar and nav use it  all three change together
   hain. */
.wa-avatar-sm{background:var(--acc)}
[data-theme="dark"] .wa-avatar-sm{background:var(--acc);color:#fff}
.wa-chat-item{border-bottom-color:transparent;position:relative}
.wa-chat-item::after{content:"";position:absolute;left:72px;right:0;bottom:0;height:1px;background:var(--wa-border)}
.wa-chat-item:last-child::after{display:none}

/* ---------- lead quick-actions drawer (slides in from the right) ---------- */
.wa-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9990}
.wa-lead-drawer{
  position:fixed;top:0;right:0;height:100vh;width:340px;max-width:88vw;
  background:var(--s);border-left:1px solid var(--bd2);box-shadow:-10px 0 32px rgba(0,0,0,.28);
  z-index:9991;transform:translateX(100%);transition:transform .22s ease;
  display:flex;flex-direction:column;
}
.wa-lead-drawer.open{transform:translateX(0)}
.wa-drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 10px 16px 18px;border-bottom:1px solid var(--bd2);flex:none;
}
.wa-drawer-title{font-size:15.5px;font-weight:700;color:var(--t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-drawer-body{flex:1;overflow-y:auto;padding:8px 0}
.wa-drawer-item{
  display:flex;align-items:center;gap:13px;padding:12px 18px;font-size:13.5px;
  font-weight:500;color:var(--t);cursor:pointer;
}
.wa-drawer-item:hover{background:var(--s2)}
.wa-drawer-item .ic{width:20px;text-align:center;flex:none;font-size:16px;line-height:1}
.wa-drawer-item.danger{color:var(--r)}
.wa-drawer-sep{height:1px;background:var(--bd2);margin:6px 0}

/* ── Mark a chat as important ─────────────────────────────────────
   A marker separate from state (queued/picked/resolved) — resolved chat bhi
   important ho sakti hai. Isliye alag button, status pill me ek aur
   the status pill.

   The star is small and thin. On a chat without a star it is almost
   invisible  it stands out only when filled. Next to the
   name, a dark star on every chat would draw the eye there. */
.wa-star{
  border:0;background:transparent;cursor:pointer;flex:none;
  padding:0 2px;margin-left:5px;line-height:0;
  color:var(--wa-text-dim);opacity:.45;vertical-align:-2px;
  transition:opacity .12s,color .12s;
}
.wa-star svg{width:15px;height:15px}
.wa-star:hover{opacity:1;color:var(--a,#f0a63a)}
.wa-star.on{opacity:1;color:var(--a,#f0a63a)}

/* List row marker  display only, not clickable */
.wa-star-dot{flex:none;line-height:0;color:var(--a,#f0a63a)}
.wa-star-dot svg{width:12px;height:12px}