/* Fonts and Font Awesome are loaded via <link> in index.html — putting
   them here as @import made them race with the page paint and the icons
   showed up as empty boxes. Keep this file purely about styling. */

.cx-dev, .cx-dev * { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.cx-dev { --cxd-bg:#06060e; --cxd-sidebar:#0f0f18; --cxd-chat:#090910;
          --cxd-msg-in:#1e1e2d; --cxd-msg-in-text:#e2e8f0;
          --cxd-msg-out:#7c6cf0; --cxd-msg-out-text:#ffffff;
          --cxd-primary:#7c6cf0; --cxd-primary-soft:rgba(124,108,240,.12);
          --cxd-success:#34d399; --cxd-warning:#fb923c; --cxd-danger:#f87171;
          --cxd-text:#e2e8f0; --cxd-muted:#94a3b8; --cxd-faint:#64748b;
          --cxd-border:rgba(255,255,255,.06); }

/* Contact card */
.cxd-card{display:flex !important;align-items:center;gap:10px;padding:10px 12px;
    border-radius:10px;border:1px solid transparent;background:transparent;
    transition:background .15s ease,border-color .15s ease;cursor:pointer;
    margin:2px 0;position:relative}
.cxd-card:hover{background:rgba(124,108,240,.08);border-color:rgba(124,108,240,.18)}
.cxd-card.active{background:rgba(124,108,240,.14);border-color:rgba(124,108,240,.35)}
.cxd-av{width:42px;height:42px;border-radius:50%;
    background:linear-gradient(135deg,#7c6cf0,#5b4dd4);color:#fff;
    display:flex !important;align-items:center;justify-content:center;
    font-weight:700;font-size:14px;flex-shrink:0;letter-spacing:.5px}
.cxd-card-body{flex:1;min-width:0;display:flex !important;flex-direction:column;gap:2px}
.cxd-card-row{display:flex !important;align-items:center;gap:6px}
.cxd-card-name{font-size:13px;font-weight:600;color:#e2e8f0;
    flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cxd-card-time{font-size:10px;color:#64748b;font-weight:500;flex-shrink:0}
.cxd-card-preview{font-size:11px;color:#94a3b8;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.cxd-card-preview .fa-check, .cxd-card-preview .fa-check-double{
    margin-right:4px;font-size:9px;color:#64748b}
.cxd-card-foot{display:flex !important;align-items:center;gap:6px;margin-top:2px}
.cxd-badge{display:inline-flex !important;align-items:center;font-size:9px;
    font-weight:700;padding:2px 7px;border-radius:8px;letter-spacing:.5px;line-height:1.2}
.cxd-badge-new{background:rgba(248,113,113,.18);color:#f87171;
    border:1px solid rgba(248,113,113,.35)}
.cxd-badge-read{background:rgba(52,211,153,.14);color:#34d399;
    border:1px solid rgba(52,211,153,.3)}
.cxd-chip{font-size:9px;color:#64748b;background:rgba(255,255,255,.04);
    padding:2px 6px;border-radius:6px;border:1px solid rgba(255,255,255,.06)}
.cxd-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
    background:#34d399;flex-shrink:0;box-shadow:0 0 0 2px rgba(52,211,153,.18)}

/* Message bubbles */
.cxd-chat-wrap{padding:6px 14px 8px 14px;background:#090910;
    display:flex !important;flex-direction:column;gap:5px}
.cxd-msg-row{display:flex !important;margin-bottom:2px}
.cxd-msg-row.in{justify-content:flex-start}
.cxd-msg-row.out{justify-content:flex-end}
.cxd-bubble{max-width:72%;padding:9px 13px;font-size:13px;line-height:1.45;
    border-radius:12px;word-wrap:break-word;overflow-wrap:break-word}
.cxd-msg-row.in  .cxd-bubble{background:#1e1e2d;color:#e2e8f0;
    border-bottom-left-radius:4px}
.cxd-msg-row.out .cxd-bubble{background:#7c6cf0;color:#ffffff;
    border-bottom-right-radius:4px}
.cxd-bubble-time{font-size:10px;margin-top:4px;opacity:.85;
    display:flex !important;align-items:center;gap:4px;justify-content:flex-end}
.cxd-msg-row.in .cxd-bubble-time{color:#64748b;justify-content:flex-start}
.cxd-msg-row.out .cxd-bubble-time{color:rgba(255,255,255,.78)}
.cxd-bubble-tx{font-size:10px;color:#93c5fd;margin-top:4px;font-style:italic;
    padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}
.cxd-msg-row.out .cxd-bubble-tx{color:rgba(255,255,255,.85);
    border-top-color:rgba(255,255,255,.18)}
.cxd-date-sep{display:flex !important;justify-content:center;margin:14px 0 6px}
.cxd-date-sep span{background:rgba(255,255,255,.05);color:#94a3b8;
    font-size:10px;font-weight:600;padding:4px 12px;border-radius:12px;letter-spacing:.5px}

/* Compact audio player inside message bubbles — the browser default
   is huge, this rule keeps it small enough that voice notes don't
   blow up the message height. */
.cxd-bubble audio{height:30px !important;width:200px !important;
    max-width:100% !important;border-radius:8px;background:rgba(255,255,255,.08)}
.cxd-bubble audio::-webkit-media-controls-panel{background:rgba(255,255,255,.08) !important}

/* Make the whole tab consume viewport height so the chat starts at top */
.cx-fullscreen{height:calc(100vh - 80px) !important;display:flex !important;
    flex-direction:column !important;min-height:0 !important;overflow:hidden !important;
    gap:0 !important;padding:0 !important}
/* Top-align every nested Bokeh/Panel layout container inside the Connexe tab —
   default Bokeh Column behaviour can center children when sizing_mode is
   stretch_both, which is what was pushing the chat panel content down. */
.cx-fullscreen [class*="bk-Column"],
.cx-fullscreen [class*="bk-Row"],
.cx-fullscreen [class*="layout-Column"],
.cx-fullscreen [class*="layout-Row"]{
    justify-content:flex-start !important;align-content:flex-start !important}
.cx-fullscreen .convo-section{flex:1 1 0 !important;min-height:0 !important}
/* main_chat: kill any default top-shifting, force its first child to the top */
.cx-mainchat,
.cx-mainchat > [class*="bk-Column"],
.cx-mainchat > [class*="layout-Column"]{
    flex:1 1 0 !important;min-height:0 !important;display:flex !important;
    flex-direction:column !important;justify-content:flex-start !important;
    align-items:stretch !important;align-content:flex-start !important;
    gap:2px !important;padding:0 !important;margin:0 !important}
.cx-mainchat > *:first-child{margin-top:0 !important}
/* Make the chat content area actually grow to fill remaining space */
.cx-mainchat .bk-panel-models-pane-HTML:has(.cxd-chat-wrap),
.cx-mainchat [class*="HTML"]:has(.cxd-chat-wrap){
    flex:1 1 0 !important;min-height:0 !important;height:auto !important}

/* Chat header */
.cxd-chat-top{display:flex !important;align-items:center;gap:12px;padding:12px 16px;
    background:#0f0f18;border:1px solid rgba(255,255,255,.06);
    border-radius:12px;margin-bottom:8px;min-height:64px;box-sizing:border-box}
.cxd-chat-top .cxd-av{width:40px;height:40px;font-size:13px}
.cxd-chat-name{font-weight:600;color:#e2e8f0;font-size:11px;line-height:1.15}
.cxd-chat-sub{font-size:11px;color:#94a3b8;display:flex !important;align-items:center;gap:6px;margin-top:2px}
.cxd-mute-tog{background:rgba(52,211,153,.1);color:#34d399;
    border:1px solid rgba(52,211,153,.35);border-radius:8px;padding:7px 12px;
    font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;
    display:inline-flex !important;align-items:center;gap:6px;transition:all .15s ease}
.cxd-mute-tog:hover{background:rgba(52,211,153,.18)}
.cxd-mute-tog.muted{background:rgba(248,113,113,.1);color:#f87171;
    border-color:rgba(248,113,113,.4)}
.cxd-mute-tog.muted:hover{background:rgba(248,113,113,.18)}

/* ─────────────────────────────────────────────────────────────
   v2 layout additions — grid, login, composer, toast.
   The dev's CSS above defines the visual theme (colors, bubbles,
   cards). Everything below is structural layout that wasn't part
   of the embedded Panel version.
   ───────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--cxd-bg, #06060e); }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #e2e8f0; }

/* ── Login screen ── */
.login-wrap {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #15152a 0%, #06060e 60%);
}
.login-card {
  background: rgba(15,15,24,.92); border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:36px 32px; width: 360px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.login-card h1 { margin: 0 0 4px 0; font-size: 20px; font-weight: 700; }
.login-card .sub { color:#94a3b8; font-size: 12px; margin-bottom: 24px; }
.login-card label { display:block; font-size:11px; color:#94a3b8; margin: 12px 0 6px; text-transform:uppercase; letter-spacing:.5px; }
.login-card input {
  width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:10px 12px; color:#e2e8f0; font-size:13px; outline:none;
}
.login-card input:focus { border-color:#7c6cf0; }
.login-card button {
  width:100%; margin-top:18px; background:#7c6cf0; color:#fff; border:0;
  border-radius:10px; padding:10px 12px; font-size:13px; font-weight:600;
  cursor:pointer; transition: background .15s;
}
.login-card button:hover { background:#8e7ff5; }
.login-card .err { color:#f87171; font-size:12px; margin-top:8px; min-height: 16px; }

/* ── App shell ── */
.app { display: none; height: 100vh; grid-template-columns: 220px 1fr; }
.app.active { display: grid; }
.nav { background: var(--cxd-sidebar); border-right: 1px solid var(--cxd-border); padding: 16px 8px; }
.nav .brand { font-weight: 700; font-size: 14px; padding: 8px 12px 16px; color:#e2e8f0; letter-spacing:.4px; }
.nav .nav-item {
  display:flex; align-items:center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; color:#94a3b8;
  font-size: 13px; font-weight: 500; cursor: pointer; user-select: none;
  margin-bottom: 2px;
}
.nav .nav-item:hover { background: rgba(255,255,255,.03); color:#e2e8f0; }
.nav .nav-item.active { background: rgba(124,108,240,.14); color: #a78bfa; }
.nav .nav-item i { width: 16px; text-align:center; }
.nav .nav-foot { position:absolute; bottom: 16px; font-size:11px; color:#64748b; padding: 0 20px; }

.main { display:flex; flex-direction:column; overflow: hidden; }

/* ── Connexe top bar ── */
.cx-topbar {
  display: flex; align-items:center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--cxd-border);
  background: var(--cxd-chat);
}
.cx-topbar .seg { display:flex; gap:0; background:rgba(255,255,255,.03); border-radius:8px; padding:3px; }
.cx-topbar .seg button {
  background: transparent; border:0; color:#94a3b8;
  padding: 6px 14px; border-radius: 6px; cursor:pointer; font-size:12px; font-weight:600;
}
.cx-topbar .seg button.active { background:#7c6cf0; color:#fff; }
.cx-topbar .spacer { flex: 1; }
.cx-topbar .toggle {
  background: rgba(255,255,255,.03); border:1px solid var(--cxd-border);
  color:#94a3b8; padding:7px 12px; border-radius:8px;
  font-size:11px; font-weight:700; cursor:pointer;
}
.cx-topbar .toggle.on { background: rgba(52,211,153,.14); color:#34d399; border-color: rgba(52,211,153,.4); }
.cx-topbar .status { color:#64748b; font-size:11px; min-width:80px; text-align:right; }

/* ── Connexe split (sidebar + chat) ── */
.cx-split { flex: 1; display: grid; grid-template-columns: 320px 1fr; min-height: 0; }
.cx-sidebar {
  border-right: 1px solid var(--cxd-border); background: var(--cxd-sidebar);
  display: flex; flex-direction: column; overflow: hidden;
}
.cx-sidebar-tabs { display:flex; gap:4px; padding: 10px; }
.cx-sidebar-tabs button {
  flex: 1; background: transparent; color:#64748b; border:1px solid var(--cxd-border);
  border-radius: 8px; padding: 7px; font-size: 12px; font-weight:600; cursor:pointer;
}
.cx-sidebar-tabs button.active {
  background: rgba(124,108,240,.18); color:#a78bfa; border-color: rgba(124,108,240,.4);
}
.cx-search { padding: 0 10px 10px; }
.cx-search input {
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--cxd-border);
  border-radius:8px; padding:8px 12px; color:#e2e8f0; font-size:12px; outline:none;
}
.cx-search input:focus { border-color:#7c6cf0; }
.cx-mute-tabs, .cx-read-tabs { display:flex; gap:4px; padding: 0 10px 8px; }
.cx-mute-tabs button, .cx-read-tabs button {
  flex:1; background: transparent; color:#64748b; border:1px solid var(--cxd-border);
  border-radius:8px; padding:6px; font-size:11px; font-weight:600; cursor:pointer;
}
.cx-mute-tabs button.active.bot-on { background:rgba(52,211,153,.14); color:#34d399; border-color:rgba(52,211,153,.4); }
.cx-mute-tabs button.active.bot-off { background:rgba(248,113,113,.14); color:#f87171; border-color:rgba(248,113,113,.4); }
.cx-mute-tabs button.active.blocked { background:rgba(251,146,60,.18); color:#fb923c; border-color:rgba(251,146,60,.45); }
.cx-mute-tabs button.active.escalated { background:rgba(244,114,182,.18); color:#f472b6; border-color:rgba(244,114,182,.45); }
.cx-mute-tabs button.escalated.has-pending { animation: pulse-pink 2s infinite; }
@keyframes pulse-pink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,114,182,0); }
  50%      { box-shadow: 0 0 0 4px rgba(244,114,182,.25); }
}

.cx-card.escalated::before {
  content: "🙋"; position: absolute; left: 6px; top: 6px;
  font-size: 12px;
}
.cx-card { position: relative; }
.cx-read-tabs button.active { background:#7c6cf0; color:#fff; border-color:#7c6cf0; }

.cx-convo-list { flex:1; min-height:0; overflow-y: auto; padding: 4px 6px 10px; }
.cx-convo-list .empty, .cx-convo-list .loading {
  color:#64748b; font-size:12px; text-align:center; padding: 30px 10px;
}
.cx-card {
  display:flex; gap:10px; align-items:center; padding:10px 12px; cursor:pointer;
  border-radius:8px; margin: 2px 0;
}
.cx-card:hover { background: rgba(255,255,255,.03); }
.cx-card.active { background: rgba(124,108,240,.14); }
.cx-card .av {
  width:36px; height:36px; border-radius:50%; background: linear-gradient(135deg,#7c6cf0,#3b3b8f);
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px; flex-shrink:0;
}
.cx-card .meta { flex:1; min-width:0; }
.cx-card .name { font-size:13px; font-weight:600; color:#e2e8f0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-card .preview { font-size:11px; color:#94a3b8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-card .badge { background:#7c6cf0; color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:10px; }

/* ── Chat panel ──
   `min-height:0` on .cx-chat is required because it's a grid child;
   without it the column can grow past its grid track and push the
   composer off-screen. Same trick on .cx-msgs lets it scroll instead
   of expanding to fit all messages. */
.cx-chat { display:flex; flex-direction:column; min-width:0; min-height:0; background: var(--cxd-chat); }
.cx-chat-empty { display:grid; place-items:center; flex:1; color:#64748b; font-size:13px; }
.cx-chat-header {
  display:flex; align-items:center; gap:12px; padding: 12px 16px;
  border-bottom: 1px solid var(--cxd-border);
}
.cx-chat-header .av { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#7c6cf0,#3b3b8f); display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px; }
.cx-chat-header .name { font-size:14px; font-weight:600; color:#e2e8f0; }
.cx-chat-header .phone { font-size:11px; color:#94a3b8; }
.cx-chat-header .spacer { flex:1; }
.cx-chat-header button {
  background: rgba(255,255,255,.04); border:1px solid var(--cxd-border); color:#94a3b8;
  padding: 7px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; cursor:pointer;
  transition: all .15s ease;
}
.cx-chat-header button:hover { background: rgba(255,255,255,.08); color:#e2e8f0; }
.cx-chat-header button.bot-on  { background: rgba(52,211,153,.14);  color:#34d399; border-color: rgba(52,211,153,.4); }
.cx-chat-header button.bot-off { background: rgba(248,113,113,.14); color:#f87171; border-color: rgba(248,113,113,.4); }
.cx-chat-header button.block      { /* default neutral look */ }
.cx-chat-header button.blocked-on { background: rgba(251,146,60,.18); color:#fb923c; border-color: rgba(251,146,60,.45); }
.cx-chat-header button.danger { background: rgba(248,113,113,.14); color:#f87171; border-color: rgba(248,113,113,.4); }

.cx-session-banner {
  background: rgba(251,191,36,.12); color:#fbbf24;
  border:1px solid rgba(251,191,36,.3); border-radius:8px;
  padding:8px 14px; font-size:11px; margin: 8px 16px 0;
  display: flex; align-items: center; gap: 6px;
}
.cx-session-banner em { color:#fcd34d; font-style: normal; font-weight: 600; }

.cx-msgs { flex:1; min-height:0; overflow-y:auto; padding: 16px; display:flex; flex-direction:column; gap: 6px; }
.cx-bubble { max-width: 70%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; word-wrap: break-word; }
.cx-bubble.in  { align-self: flex-start; background: var(--cxd-msg-in); color: var(--cxd-msg-in-text); border-bottom-left-radius: 4px; }
.cx-bubble.out { align-self: flex-end;   background: var(--cxd-msg-out); color: var(--cxd-msg-out-text); border-bottom-right-radius: 4px; }
.cx-bubble .ts { font-size: 10px; opacity: .6; margin-top: 4px; }
.cx-bubble-tx {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,.12);
  font-size: 12px; font-style: italic; opacity: .82;
}
.cx-date-sep { align-self:center; color:#64748b; font-size:11px; margin: 8px 0; padding: 2px 10px; background: rgba(255,255,255,.03); border-radius: 10px; }

.cx-composer { border-top: 1px solid var(--cxd-border); padding: 10px 12px; display:flex; gap: 8px; align-items:flex-end; position: relative; }
.cx-composer textarea {
  flex:1; resize:none; background: rgba(255,255,255,.04); border:1px solid var(--cxd-border);
  border-radius: 10px; padding: 10px 12px; color:#e2e8f0; font-size:13px; outline:none;
  min-height: 38px; max-height: 120px; font-family: inherit;
}
.cx-composer textarea:focus { border-color:#7c6cf0; }
.cx-composer button.send {
  background: #7c6cf0; color:#fff; border:0; border-radius:10px;
  padding: 10px 14px; font-size: 13px; font-weight:700; cursor:pointer;
}
.cx-composer button.send:disabled { opacity:.5; cursor:not-allowed; }
.cx-composer .icon-btn {
  width:44px; height:40px; padding:0;
  background: rgba(255,255,255,.05); border:1px solid var(--cxd-border);
  border-radius:10px; color:#94a3b8; cursor:pointer; font-size:16px;
  display:inline-flex; align-items:center; justify-content:center; transition: all .15s ease;
}
.cx-composer .icon-btn:hover { background: rgba(124,108,240,.18); color:#a78bfa; border-color: rgba(124,108,240,.4); }
.cx-composer .icon-btn.recording { background: rgba(248,113,113,.18); color:#f87171; border-color: rgba(248,113,113,.45); }
.cx-composer .icon-btn.promo {
  background: rgba(251,191,36,.12); color: #fbbf24; border-color: rgba(251,191,36,.4);
}
.cx-composer .icon-btn.promo:hover {
  background: rgba(251,191,36,.22); color: #fcd34d; border-color: rgba(251,191,36,.6);
}
.cx-composer .icon-btn:disabled { opacity:.5; cursor:not-allowed; }
.cx-composer .rec-time { font-size:10px; color:#64748b; align-self:center; min-width:30px; text-align:center; }
.cx-composer .upload-status {
  position:absolute; left:12px; bottom:54px;
  font-size:10px; color:#a78bfa; pointer-events:none;
}
.cx-composer .upload-status.error { color:#f87171; }
.cx-composer .upload-status.ok { color:#34d399; }

/* Link popover */
.link-pop {
  position: absolute; bottom: 56px; right: 12px;
  background:#1e1e2d; border:1px solid var(--cxd-border); border-radius:10px;
  padding: 10px; width: 280px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  display: none; z-index: 10;
}
.link-pop.open { display:block; }
.link-pop label { font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; }
.link-pop input {
  width:100%; background: rgba(255,255,255,.04); border:1px solid var(--cxd-border);
  border-radius:8px; padding:8px 10px; color:#e2e8f0; font-size:12px;
  margin: 4px 0 8px; outline:none;
}
.link-pop input:focus { border-color:#7c6cf0; }
.link-pop .row { display:flex; gap:6px; }
.link-pop .row button {
  flex:1; background:#7c6cf0; color:#fff; border:0; border-radius:8px;
  padding:7px; font-size:12px; font-weight:600; cursor:pointer;
}
.link-pop .row button.ghost {
  background: transparent; border:1px solid var(--cxd-border); color:#94a3b8;
}
.link-pop.promo { width: 320px; border-color: rgba(251,191,36,.3); }
.link-pop.promo select {
  width:100%; background: rgba(255,255,255,.04); border:1px solid var(--cxd-border);
  border-radius:8px; padding:8px 10px; color:#e2e8f0; font-size:12px;
  margin: 4px 0 8px; outline:none; cursor: pointer;
}
.link-pop.promo select:focus { border-color:#fbbf24; }
.link-pop.promo .row button:not(.ghost) {
  background: #fbbf24; color: #1e1e2d;
}
.link-pop.promo .row button:not(.ghost):hover { background: #fcd34d; }

/* ── Templates view ── */
.cx-templates {
  flex:1; min-height:0; overflow-y:auto;
  padding: 20px 28px; max-width: 900px; align-self:center; width:100%;
  display:flex; flex-direction:column; gap: 18px;
}
.cx-templates .tpl-toolbar {
  display:flex; align-items:flex-end; gap: 12px; flex-wrap: wrap;
}
.cx-templates .muted { color:#94a3b8; font-size: 11px; }
.cx-templates label {
  display:flex; flex-direction:column; gap: 4px;
  font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px;
  font-weight: 600;
}
.cx-templates input, .cx-templates select, .cx-templates textarea {
  background: rgba(255,255,255,.04); border:1px solid var(--cxd-border);
  color:#e2e8f0; padding:8px 10px; border-radius:8px;
  font-size: 13px; font-family: inherit; outline: none;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.cx-templates input:focus, .cx-templates select:focus, .cx-templates textarea:focus {
  border-color:#7c6cf0;
}
.cx-templates textarea { resize: vertical; min-height: 80px; }
.cx-templates select { cursor: pointer; min-width: 200px; }
.cx-templates button.primary {
  background:#7c6cf0; color:#fff; border:0; padding: 9px 16px;
  border-radius:8px; font-size: 12px; font-weight: 700; cursor:pointer;
}
.cx-templates button.primary:hover { background:#8e7ff5; }
.cx-templates button.primary:disabled { opacity:.5; cursor:not-allowed; }

.cx-templates .tpl-table-wrap {
  border:1px solid var(--cxd-border); border-radius: 10px;
  background: rgba(255,255,255,.02); overflow: auto; max-height: 280px;
}
.cx-templates .tpl-table { width:100%; border-collapse: collapse; font-size: 12px; }
.cx-templates .tpl-table th, .cx-templates .tpl-table td {
  text-align:left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.cx-templates .tpl-table th {
  position: sticky; top: 0; background: #11111c;
  font-size: 10px; color:#94a3b8; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.cx-templates .tpl-table td.name { color:#a78bfa; font-weight: 600; }
.cx-templates .tpl-table td.status.approved { color:#34d399; }
.cx-templates .tpl-table td.status.pending  { color:#fbbf24; }
.cx-templates .tpl-table td.status.rejected { color:#f87171; }
.cx-templates .tpl-table td.content { color:#94a3b8; }

.cx-templates .tpl-form {
  display:flex; flex-direction:column; gap: 12px;
  padding: 16px; background: rgba(255,255,255,.02);
  border:1px solid var(--cxd-border); border-radius: 10px;
}
.cx-templates .tpl-vars { display:flex; gap: 12px; }
.cx-templates .tpl-vars label { flex: 1; }
.cx-templates .tpl-actions { display:flex; gap: 12px; align-items: center; }
.cx-templates .tpl-actions #tplSendStatus { font-size: 12px; }
.cx-templates .tpl-actions .ok { color:#34d399; font-weight: 700; }
.cx-templates .tpl-actions .err { color:#f87171; }
.cx-templates .tpl-actions .progress { color:#a78bfa; }

/* Amber emphasis on the Media URL box when the selected template is a
   media template — it can't send without a URL. */
.cx-templates #tplMediaUrl.needs-media {
  border-color: #f59e0b;
  background: rgba(245,158,11,.08);
}

/* ── Tab view shell ── */
.tab-view {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}

/* Sales tab is one long page (toolbar → leaderboards → charts → log
   tables → targets), so it needs vertical scroll. Connexe/Inbox have
   their own internal scroll areas and DO want overflow: hidden. */
#tabSales { overflow-y: auto; }

/* Leads can get tall too once Mass Message is open — let it scroll. */
#tabLeads { overflow-y: auto; }
.nav .nav-item.disabled { opacity: .4; cursor: not-allowed; }
.nav .nav-item.disabled:hover { background: transparent; color:#94a3b8; }

/* ── Leads tab ── */
.leads-toolbar, .leads-subfilter {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--cxd-border);
}
.leads-toolbar label, .leads-subfilter label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.leads-toolbar input, .leads-toolbar select,
.leads-subfilter input[type="text"] {
  background: rgba(255,255,255,.04); border: 1px solid var(--cxd-border);
  color: #e2e8f0; padding: 7px 10px; border-radius: 8px; font-size: 12px; outline: none;
  text-transform: none; letter-spacing: 0; font-weight: 400; font-family: inherit;
}
.leads-toolbar input:focus, .leads-toolbar select:focus,
.leads-subfilter input:focus { border-color: #7c6cf0; }

/* Native date-picker icon is dark-on-dark by default, making it
   invisible. Invert + brighten so the calendar icon is visible in
   the dark theme, and force a pointer cursor so it's obviously
   clickable. */
.leads-toolbar input[type="date"] {
  color-scheme: dark;
  cursor: pointer;
  min-width: 130px;
}
.leads-toolbar input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.8) brightness(1.4);
  cursor: pointer;
  opacity: .8;
}
.leads-toolbar input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
.leads-toolbar button.primary {
  background: #7c6cf0; color: #fff; border: 0; padding: 8px 16px;
  border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.leads-toolbar button.primary:hover { background: #8e7ff5; }
.leads-toolbar button.primary:disabled { opacity: .5; cursor: not-allowed; }
.leads-toolbar .muted, .leads-subfilter .muted { font-size: 11px; color: #94a3b8; }
.leads-toolbar .ok, .leads-subfilter .ok { color: #34d399; font-weight: 700; }
.leads-toolbar .err, .leads-subfilter .err { color: #f87171; }

.leads-subfilter { padding: 8px 16px; border-bottom: 1px solid var(--cxd-border); align-items: center; }
.leads-subfilter input[type="text"] { width: 280px; padding: 7px 12px; }
.leads-subfilter label.check {
  flex-direction: row; align-items: center; gap: 6px;
  font-size: 11px; text-transform: none; letter-spacing: 0;
  color: #e2e8f0; cursor: pointer; user-select: none;
}
.leads-subfilter label.check input { width: auto; }

.leads-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 360px; }
.leads-table-wrap { min-height: 0; overflow: auto; }
.leads-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.leads-table thead th {
  position: sticky; top: 0; background: #11111c;
  text-align: left; padding: 9px 12px;
  font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--cxd-border); cursor: pointer; user-select: none;
}
.leads-table thead th.num { text-align: right; }
.leads-table thead th:hover { color: #e2e8f0; }
.leads-table thead th.sort-asc::after  { content: " ▲"; opacity: .6; }
.leads-table thead th.sort-desc::after { content: " ▼"; opacity: .6; }
.leads-table tbody td {
  padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.04);
  color: #e2e8f0;
}
.leads-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.leads-table tbody td.muted { color: #64748b; }
.leads-table tbody tr { cursor: pointer; }
.leads-table tbody tr:hover { background: rgba(255,255,255,.03); }
.leads-table tbody tr.active { background: rgba(124,108,240,.14); }
.leads-table tbody tr.active td { color: #e2e8f0; }

.leads-detail {
  border-left: 1px solid var(--cxd-border);
  background: var(--cxd-sidebar);
  overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column;
}
.leads-detail-empty {
  flex: 1; display: grid; place-items: center;
  color: #64748b; font-size: 12px; padding: 30px;
}
.leads-detail .ldh { padding: 14px 16px; border-bottom: 1px solid var(--cxd-border); }
.leads-detail .ldh .uid { font-size: 14px; font-weight: 700; color: #e2e8f0; }
.leads-detail .ldh .sub { font-size: 11px; color: #94a3b8; margin-top: 4px; }
.leads-detail .info-grid {
  display: grid; grid-template-columns: auto 1fr;
  gap: 6px 12px; padding: 12px 16px; font-size: 12px;
  border-bottom: 1px solid var(--cxd-border);
}
.leads-detail .info-grid .lbl { color: #94a3b8; }
.leads-detail .info-grid .val { color: #e2e8f0; word-break: break-word; }
.leads-detail .info-grid .val.green { color: #34d399; }
.leads-detail .info-grid .val.red   { color: #f87171; }
.leads-detail .info-grid .val.bold  { font-weight: 700; }

.leads-detail .msgs-title {
  padding: 12px 16px 4px; font-size: 10px; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.leads-detail .msgs {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 12px; display: flex; flex-direction: column; gap: 6px;
}
.leads-detail .msg {
  max-width: 90%; padding: 7px 10px; border-radius: 12px;
  font-size: 12px; line-height: 1.4; word-wrap: break-word;
}
.leads-detail .msg.in  { align-self: flex-start; background: var(--cxd-msg-in);  color: var(--cxd-msg-in-text);  border-bottom-left-radius: 4px; }
.leads-detail .msg.out { align-self: flex-end;   background: var(--cxd-msg-out); color: var(--cxd-msg-out-text); border-bottom-right-radius: 4px; }
.leads-detail .msg .ts { font-size: 9px; opacity: .6; margin-top: 3px; }
.leads-detail .reply-row {
  padding: 10px 12px; display: flex; gap: 8px; border-top: 1px solid var(--cxd-border);
}
.leads-detail .reply-row textarea {
  flex: 1; resize: none; background: rgba(255,255,255,.04);
  border: 1px solid var(--cxd-border); border-radius: 8px;
  padding: 8px 10px; color: #e2e8f0; font-size: 12px; outline: none;
  min-height: 36px; max-height: 90px; font-family: inherit;
}
.leads-detail .reply-row textarea:focus { border-color: #7c6cf0; }
.leads-detail .reply-row button {
  background: #7c6cf0; color: #fff; border: 0; border-radius: 8px;
  padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.leads-detail .reply-row button:disabled { opacity: .5; cursor: not-allowed; }

/* ── Leads-table checkbox column ── */
.leads-table th.check, .leads-table td.check { width: 32px; padding: 6px 10px; }
.leads-table tbody tr.sent-already td.userid::after {
  content: " ✓"; color: #34d399; font-size: 11px; opacity: .8;
}

/* ── Mass Message section ── */
.mass-msg {
  border-top: 1px solid var(--cxd-border);
  background: rgba(255,255,255,.015);
  padding: 14px 16px 18px;
  max-height: 50vh; overflow-y: auto;
}
.mass-msg-header { display:flex; align-items:baseline; gap:14px; margin-bottom: 12px; }
.mass-msg-header h3 { margin: 0; font-size: 14px; font-weight: 700; color: #e2e8f0; }
.mass-msg-header .muted { color: #94a3b8; font-size: 12px; }

.mass-msg-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mass-col { display:flex; flex-direction:column; gap: 10px; }
.mass-col label {
  display:flex; flex-direction:column; gap: 4px;
  font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px;
  font-weight: 600;
}
.mass-col label.check, .mass-col label.tier-toggle {
  flex-direction: row; align-items: center; gap: 8px;
  text-transform: none; letter-spacing: 0; color:#e2e8f0; font-size: 12px;
  cursor: pointer; user-select: none; font-weight: 500;
}
.mass-col textarea, .mass-col input[type="text"], .mass-col input[type="file"], .mass-col select, .mass-col input[type="number"] {
  background: rgba(255,255,255,.04); border: 1px solid var(--cxd-border);
  color: #e2e8f0; padding: 8px 10px; border-radius: 8px; font-size: 12px; outline: none;
  text-transform: none; letter-spacing: 0; font-weight: 400; font-family: inherit;
}
.mass-col textarea { resize: vertical; min-height: 80px; }
.mass-col textarea:focus, .mass-col input:focus, .mass-col select:focus { border-color: #7c6cf0; }
.mass-col .hint { font-size: 10px; color: #64748b; font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 4px; }
.mass-col .mass-row { display: flex; align-items: center; gap: 14px; }
.mass-col .mass-actions { display:flex; align-items:center; gap: 12px; margin-top: 4px; }
.mass-col .mass-actions button.primary {
  background: #7c6cf0; color: #fff; border: 0; padding: 9px 16px;
  border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.mass-col .mass-actions button.primary:hover { background: #8e7ff5; }
.mass-col .mass-actions button.primary:disabled { opacity: .5; cursor: not-allowed; }
.mass-col .mass-actions #leadsMassStatus { font-size: 12px; }
.mass-col .mass-actions #leadsMassStatus.ok  { color: #34d399; font-weight: 700; }
.mass-col .mass-actions #leadsMassStatus.err { color: #f87171; }
.mass-col .mass-actions #leadsMassStatus.progress { color: #a78bfa; }

.mass-subhead {
  margin: 6px 0 4px; font-size: 11px; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}

/* ── Manual recipient input + chips ── */
.manual-input { display:flex; gap: 6px; }
.manual-input input { flex:1; }
.manual-input button.ghost {
  background: transparent; color: #a78bfa; border: 1px dashed rgba(124,108,240,.5);
  border-radius: 8px; padding: 7px 12px; font-size: 11px; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 600;
}
.manual-input button.ghost:hover { background: rgba(124,108,240,.1); color: #c7bdf8; }
.chips { display:flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; min-height: 4px; }
.chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(124,108,240,.16); color: #c7bdf8;
  border: 1px solid rgba(124,108,240,.4); border-radius: 12px;
  padding: 3px 4px 3px 10px; font-size: 11px; font-family: inherit;
}
.chip button {
  background: transparent; border: 0; color: #c7bdf8;
  cursor: pointer; padding: 0 6px; font-size: 13px; line-height: 1;
  opacity: .7; border-radius: 50%;
}
.chip button:hover { opacity: 1; background: rgba(255,255,255,.08); }

/* ── Tier rows ── */
.tier-block { padding: 10px; border: 1px solid var(--cxd-border); border-radius: 10px; background: rgba(255,255,255,.02); }
.tier-row { display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 8px; align-items: center; margin-top: 8px; }
.tier-row input, .tier-row select {
  background: rgba(255,255,255,.04); border: 1px solid var(--cxd-border);
  color: #e2e8f0; padding: 7px 9px; border-radius: 8px; font-size: 12px; outline: none;
  width: 100%; font-family: inherit;
}
.tier-row input:focus, .tier-row select:focus { border-color: #7c6cf0; }
.tier-row button.remove {
  background: rgba(248,113,113,.14); color: #f87171; border: 1px solid rgba(248,113,113,.4);
  border-radius: 6px; padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.tier-block button.ghost {
  margin-top: 10px;
  background: transparent; color: #94a3b8; border: 1px dashed var(--cxd-border);
  border-radius: 8px; padding: 7px 14px; font-size: 11px; cursor: pointer;
}
.tier-block button.ghost:hover { color: #a78bfa; border-color: rgba(124,108,240,.5); }

/* ── Sent log ── */
.sent-log {
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--cxd-border); border-radius: 8px;
  background: rgba(255,255,255,.02); padding: 4px;
}
.sent-log .entry {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.04);
  align-items: center; font-size: 11px;
}
.sent-log .entry:last-child { border-bottom: 0; }
.sent-log .entry .time { color: #64748b; }
.sent-log .entry .preview { color: #e2e8f0; }
.sent-log .entry .counts .ok  { color: #34d399; font-weight: 700; }
.sent-log .entry .counts .fail { color: #f87171; }

/* ── Sales tab ── */
.sales-toolbar {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--cxd-border);
}
.sales-toolbar label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.sales-toolbar input[type="date"], .sales-toolbar input[type="number"] {
  background: rgba(255,255,255,.04); border: 1px solid var(--cxd-border);
  color: #e2e8f0; padding: 7px 10px; border-radius: 8px; font-size: 12px; outline: none;
  color-scheme: dark; min-width: 130px; font-family: inherit;
}
.sales-toolbar input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8) brightness(1.4); cursor: pointer; }
.sales-toolbar .primary {
  background: #7c6cf0; color: #fff; border: 0; padding: 8px 14px;
  border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.sales-toolbar .primary:hover { background: #8e7ff5; }
.sales-toolbar .ghost {
  background: transparent; border: 1px solid var(--cxd-border); color: #94a3b8;
  padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.sales-toolbar .ghost:hover { color: #a78bfa; border-color: rgba(124,108,240,.5); }
.sales-toolbar .ghost:disabled, .sales-toolbar .primary:disabled { opacity: .5; cursor: not-allowed; }
.sales-toolbar .spacer { flex: 1; }
.sales-toolbar .muted { font-size: 11px; color: #94a3b8; align-self: center; }

.sales-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding: 14px 16px;
}
.sales-region {
  border: 1px solid var(--cxd-border); border-radius: 12px;
  background: rgba(255,255,255,.02); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.sales-region.us { border-color: rgba(124,108,240,.3); }
.sales-region.arabic { border-color: rgba(251,191,36,.3); }
.sales-region-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sales-region-header h3 { margin: 0; font-size: 14px; font-weight: 700; color: #e2e8f0; }
.sales-region-header .kpi { text-align: right; }
.sales-region-header .kpi-val { font-size: 22px; font-weight: 700; color: #e2e8f0; line-height: 1.2; }
.sales-region-header .kpi-sub { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; }
.sales-bar-wrap { background: rgba(255,255,255,.04); border-radius: 8px; height: 10px; overflow: hidden; }
.sales-bar { height: 100%; width: 0; background: #7c6cf0; border-radius: 8px; transition: width .25s; }
.sales-bar.arabic { background: #fbbf24; }
.sales-bar.green   { background: #34d399; }
.sales-bar.amber   { background: #fbbf24; }
.sales-bar.red     { background: #f87171; }

.sales-leaderboard { width: 100%; border-collapse: collapse; font-size: 12px; }
.sales-leaderboard th, .sales-leaderboard td {
  padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.sales-leaderboard th { text-align: left; color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.sales-leaderboard th.num, .sales-leaderboard td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sales-leaderboard td.rank { color: #64748b; width: 30px; }
.sales-leaderboard td.medal { font-size: 14px; }
.sales-leaderboard td.member { color: #e2e8f0; font-weight: 600; }
.sales-leaderboard td.revenue { color: #34d399; font-weight: 700; }

/* ── Per-region sparkline (small 12-month bar chart above leaderboard) ── */
.sparkline {
  display: flex; align-items: flex-end; gap: 3px;
  height: 32px; margin: 2px 0 6px;
}
.sparkline .sp {
  flex: 1; min-height: 2px;
  background: rgba(124,108,240,.55); border-radius: 2px;
}
.sparkline.arabic .sp { background: rgba(251,191,36,.55); }
.sparkline .sp.current { background: #34d399; }

/* ── Month-over-month banner ── */
.mom {
  font-size: 11px; color: #94a3b8;
  padding: 6px 0;
  display: flex; align-items: center; gap: 8px;
}
.mom .delta { font-weight: 700; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.mom .delta.up   { background: rgba(52,211,153,.15);  color: #34d399; }
.mom .delta.down { background: rgba(248,113,113,.15); color: #f87171; }
.mom .delta.flat { background: rgba(255,255,255,.06);  color: #94a3b8; }

/* ── Sales log tables ── */
.sales-logs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding: 0 16px 14px;
}
.sales-log-card {
  border: 1px solid var(--cxd-border); border-radius: 12px;
  background: rgba(255,255,255,.02); padding: 12px 14px;
}
.sales-log-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.sales-log-header h4 {
  margin: 0; font-size: 12px; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
  flex: 1; min-width: 0;
}
.sales-log-header select, .sales-log-header input[type="text"] {
  background: rgba(255,255,255,.04); border: 1px solid var(--cxd-border);
  color: #e2e8f0; padding: 5px 8px; border-radius: 6px; font-size: 11px;
  outline: none; font-family: inherit;
}
.sales-log-header select:focus, .sales-log-header input:focus { border-color: #7c6cf0; }
.sales-log-header input[type="text"] { width: 140px; }
.sales-log-header .muted { font-size: 10px; color: #64748b; }

.sales-log-wrap { max-height: 300px; overflow-y: auto; }
.sales-log { width: 100%; border-collapse: collapse; font-size: 11px; }
.sales-log th, .sales-log td {
  padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.sales-log th {
  position: sticky; top: 0; background: #11111c; text-align: left;
  color: #94a3b8; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.sales-log th.num, .sales-log td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sales-log td.date { color: #94a3b8; }
.sales-log td.uid { color: #e2e8f0; font-family: 'SF Mono', Menlo, monospace; font-size: 11px; }
.sales-log td.person { color: #a78bfa; font-weight: 600; }
.sales-log td.country { color: #64748b; }
.sales-log td.amount { color: #34d399; font-weight: 700; }

.sales-charts {
  display: grid; grid-template-columns: 2fr 1fr; gap: 14px;
  padding: 0 16px 14px;
}
.chart-card {
  border: 1px solid var(--cxd-border); border-radius: 12px;
  background: rgba(255,255,255,.02); padding: 14px 16px;
}
.chart-card h4 { margin: 0 0 12px; font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
/* align-items: stretch is the default but I'm calling it out — each .bar
   needs to take the row's full 120px height so the inner .b's
   `height: X%` has a real reference. With flex-end the bars collapsed
   to their content height and X% of that was effectively zero. */
.bars-row { display: flex; align-items: stretch; gap: 6px; height: 120px; }
.bars-row .bar {
  flex: 1; display: flex; flex-direction: column;
  justify-content: flex-end;  /* bars grow from the bottom of the column */
  align-items: center; gap: 4px;
  position: relative; height: 100%;
}
.bars-row .bar .b {
  width: 100%; max-width: 32px; background: #7c6cf0; border-radius: 4px 4px 0 0;
  min-height: 2px;
}
.bars-row .bar .b.current { background: #34d399; }
.bars-row .bar .lbl { font-size: 10px; color: #64748b; text-align: center; line-height: 1.2; }
.bars-row .bar .val { font-size: 9px; color: #94a3b8; opacity: 0; transition: opacity .15s; position: absolute; top: -16px; }
.bars-row .bar:hover .val { opacity: 1; }
.bars-row.weekday .bar .b { background: #fbbf24; }
.bars-row.weekday .bar.weekend .b { background: #f87171; }

.sales-targets {
  display: flex; gap: 12px; align-items: flex-end;
  padding: 12px 16px; border-top: 1px solid var(--cxd-border);
}
.sales-targets label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.sales-targets .ghost {
  background: transparent; border: 1px solid var(--cxd-border); color: #94a3b8;
  padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.sales-targets .ghost:hover { color: #a78bfa; border-color: rgba(124,108,240,.5); }
.sales-targets .muted, .sales-targets .ok, .sales-targets .err {
  font-size: 11px; align-self: center;
}
.sales-targets .ok  { color: #34d399; font-weight: 700; }
.sales-targets .err { color: #f87171; }

/* ── Links + Hunting tabs (scroll vertically) ── */
#tabLinks, #tabHunting { overflow-y: auto; }

/* Links toolbar */
.links-toolbar, .hunting-toolbar {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--cxd-border);
}
.links-toolbar input[type="text"] {
  background: rgba(255,255,255,.04); border: 1px solid var(--cxd-border);
  color: #e2e8f0; padding: 7px 12px; border-radius: 8px; font-size: 12px;
  outline: none; width: 280px; font-family: inherit;
}
.links-toolbar input[type="text"]:focus { border-color:#7c6cf0; }
.links-toolbar .spacer { flex: 1; }
.links-toolbar .primary, .hunting-toolbar .primary {
  background: #7c6cf0; color: #fff; border: 0; padding: 8px 14px;
  border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.links-toolbar .primary:hover, .hunting-toolbar .primary:hover { background: #8e7ff5; }
.links-toolbar .primary:disabled, .hunting-toolbar .primary:disabled { opacity: .5; cursor: not-allowed; }
.links-toolbar .muted, .hunting-toolbar .muted { font-size: 11px; color: #94a3b8; align-self: center; }
.hunting-toolbar label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.hunting-toolbar input[type="date"] {
  background: rgba(255,255,255,.04); border: 1px solid var(--cxd-border);
  color: #e2e8f0; padding: 7px 10px; border-radius: 8px; font-size: 12px; outline: none;
  color-scheme: dark; min-width: 130px; font-family: inherit;
}
.hunting-toolbar input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8) brightness(1.4); cursor: pointer; }

/* Links KPI cards */
.links-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 14px 16px;
}
.kpi-card {
  border: 1px solid var(--cxd-border); border-radius: 12px;
  background: rgba(255,255,255,.02); padding: 14px 18px;
}
.kpi-card.revenue    { border-color: rgba(52,211,153,.35);  }
.kpi-card.purchased  { border-color: rgba(124,108,240,.35); }
.kpi-card.pending    { border-color: rgba(251,191,36,.35);  }
.kpi-card.conversion { border-color: rgba(244,114,182,.35); }
.kpi-card .kpi-val  { font-size: 22px; font-weight: 700; color: #e2e8f0; line-height: 1.2; }
.kpi-card.revenue   .kpi-val { color: #34d399; }
.kpi-card.purchased .kpi-val { color: #a78bfa; }
.kpi-card.pending   .kpi-val { color: #fbbf24; }
.kpi-card.conversion.kpi-val { color: #f472b6; }
.kpi-card .kpi-lbl  { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }

/* Sender breakdown */
.links-by-sender { padding: 0 16px 14px; }
.links-by-sender h4 { margin: 0 0 8px; font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.links-sender-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  border: 1px solid var(--cxd-border); border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.02);
}
.links-sender-table th, .links-sender-table td {
  padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.links-sender-table th { background: #11111c; color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; text-align: left; }
.links-sender-table th.num, .links-sender-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.links-sender-table td.name { color: #a78bfa; font-weight: 600; }
.links-sender-table td.revenue { color: #34d399; font-weight: 700; }

/* Links table */
.links-table-wrap { padding: 0 16px 18px; max-height: 60vh; overflow-y: auto; }
.links-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.links-table th, .links-table td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.04); }
.links-table th { position: sticky; top: 0; background: #11111c; text-align: left; color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.links-table th.num, .links-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.links-table td.created { color: #94a3b8; }
.links-table td.uid { color: #e2e8f0; font-family: 'SF Mono', Menlo, monospace; }
.links-table td.sender { color: #a78bfa; font-weight: 600; }
.links-table td.url a { color: #7c6cf0; text-decoration: none; }
.links-table td.url a:hover { text-decoration: underline; }
.links-table .badge {
  font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 700;
  display: inline-block;
}
.links-table .badge.purchased { background: rgba(52,211,153,.18);  color: #34d399; }
.links-table .badge.pending   { background: rgba(124,108,240,.18); color: #a78bfa; }

/* Hunting layout */
.hunting-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding: 14px 16px;
}
.hunting-region {
  border: 1px solid var(--cxd-border); border-radius: 12px;
  background: rgba(255,255,255,.02); padding: 14px 16px;
}
.hunting-region.us { border-color: rgba(124,108,240,.3); }
.hunting-region.arabic { border-color: rgba(251,191,36,.3); }
.hunting-region-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hunting-region-header h3 { margin: 0; font-size: 14px; font-weight: 700; color: #e2e8f0; }
.hunting-region-header .kpi-val { font-size: 18px; font-weight: 700; color: #34d399; }
.hunting-leaderboard { width: 100%; border-collapse: collapse; font-size: 12px; }
.hunting-leaderboard th, .hunting-leaderboard td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.04); }
.hunting-leaderboard th { text-align: left; color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.hunting-leaderboard th.num, .hunting-leaderboard td.num { text-align: right; font-variant-numeric: tabular-nums; }
.hunting-leaderboard td.rank { color: #64748b; width: 30px; }
.hunting-leaderboard td.medal { font-size: 14px; }
.hunting-leaderboard td.member { color: #e2e8f0; font-weight: 600; }
.hunting-leaderboard td.revenue { color: #34d399; font-weight: 700; }

/* Package analysis bars */
.hunting-pkg-card, .hunting-detail-card {
  margin: 0 16px 14px; border: 1px solid var(--cxd-border);
  border-radius: 12px; background: rgba(255,255,255,.02); padding: 12px 14px;
}
.hunting-pkg-card h4, .hunting-detail-card h4 {
  margin: 0 0 10px; font-size: 11px; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.pkg-bars { display: flex; flex-direction: column; gap: 6px; }
.pkg-bar-row { display: grid; grid-template-columns: 120px 1fr 70px 60px; gap: 10px; align-items: center; font-size: 11px; }
.pkg-bar-row .label { color: #e2e8f0; font-variant-numeric: tabular-nums; }
.pkg-bar-row .barwrap { background: rgba(255,255,255,.04); border-radius: 4px; height: 8px; overflow: hidden; }
.pkg-bar-row .bar { background: #7c6cf0; height: 100%; border-radius: 4px; }
.pkg-bar-row .pct { color: #94a3b8; text-align: right; }
.pkg-bar-row .count { color: #34d399; text-align: right; font-weight: 600; }

/* Hunting detail table */
.hunting-detail-wrap { max-height: 400px; overflow-y: auto; }
.hunting-detail { width: 100%; border-collapse: collapse; font-size: 11px; }
.hunting-detail th, .hunting-detail td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.04); }
.hunting-detail th { position: sticky; top: 0; background: #11111c; color: #94a3b8; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; text-align: left; }
.hunting-detail th.num, .hunting-detail td.num { text-align: right; font-variant-numeric: tabular-nums; }
.hunting-detail td.agent { color: #a78bfa; font-weight: 600; }
.hunting-detail td.country { color: #64748b; }
.hunting-detail td.uid { color: #94a3b8; font-family: 'SF Mono', Menlo, monospace; }

/* ── Bot Rules tab ── */
#tabBotrules { overflow-y: auto; padding: 14px 16px; gap: 14px; }
.botrules-header { padding: 0 0 6px; }
.botrules-header h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #e2e8f0; }
.botrules-header .muted { color: #94a3b8; font-size: 12px; line-height: 1.5; max-width: 900px; }
.botrules-header strong { color: #f472b6; font-weight: 600; }

.botrules-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .botrules-grid { grid-template-columns: 1fr; } }
/* min-width: 0 on grid children breaks the default "shrink no smaller
   than content" behavior, so a long URL inside a child input can't
   push the whole column past its 1fr track. */
.botrules-main, .botrules-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.botrules-card { min-width: 0; }
.botrules-card input[type="text"], .botrules-card textarea, .botrules-card select, .botrules-card input[type="file"] {
  width: 100%; min-width: 0; box-sizing: border-box;
}

.botrules-card {
  border: 1px solid var(--cxd-border); border-radius: 12px;
  background: rgba(255,255,255,.02); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.botrules-card h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: #e2e8f0; }
.botrules-card label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.botrules-card label.check {
  flex-direction: row; align-items: center; gap: 8px;
  text-transform: none; letter-spacing: 0; color: #e2e8f0;
  font-size: 12px; font-weight: 500; cursor: pointer; user-select: none;
}
.botrules-card label.check input { width: auto; }
.botrules-card input[type="text"], .botrules-card textarea, .botrules-card select, .botrules-card input[type="file"] {
  background: rgba(255,255,255,.04); border: 1px solid var(--cxd-border);
  color: #e2e8f0; padding: 8px 10px; border-radius: 8px; font-size: 12px;
  outline: none; font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.botrules-card input:focus, .botrules-card textarea:focus, .botrules-card select:focus { border-color: #7c6cf0; }
.botrules-card textarea { resize: vertical; min-height: 60px; }
.botrules-card .hint { font-size: 10px; color: #64748b; line-height: 1.4; }
.botrules-card .hint code { background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 4px; font-family: 'SF Mono', Menlo, monospace; font-size: 10px; color: #a78bfa; }
.botrules-card .row { display: flex; align-items: center; gap: 8px; }
.botrules-card button.primary {
  background: #7c6cf0; color: #fff; border: 0; padding: 8px 14px;
  border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.botrules-card button.primary:hover { background: #8e7ff5; }
.botrules-card button.primary:disabled { opacity: .5; cursor: not-allowed; }
.botrules-card button.ghost {
  background: transparent; border: 1px solid var(--cxd-border); color: #94a3b8;
  padding: 7px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.botrules-card button.ghost:hover { color: #a78bfa; border-color: rgba(124,108,240,.5); }
.botrules-card .ok  { color: #34d399; font-weight: 700; font-size: 11px; }
.botrules-card .err { color: #f87171; font-size: 11px; }
.botrules-card .muted { color: #94a3b8; font-size: 11px; }

.botrules-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.botrules-row > label { flex: 1; min-width: 140px; }
.botrules-checkrow { display: flex; gap: 14px; padding-top: 4px; }

.botrules-list-wrap { max-height: 500px; overflow-y: auto; overflow-x: auto; }
.botrules-list { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.botrules-list col.col-on       { width: 36px; }
.botrules-list col.col-channels { width: 70px; }
.botrules-list col.col-mode     { width: 52px; }
.botrules-list col.col-action   { width: 64px; }
.botrules-list col.col-actions  { width: 140px; }
.botrules-list th, .botrules-list td {
  padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.04); text-align: left;
}
.botrules-list th {
  position: sticky; top: 0; background: #11111c;
  color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.botrules-list td.pattern {
  color: #e2e8f0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.botrules-list td.pattern .regex-tag {
  display: inline-block; background: rgba(244,114,182,.16); color: #f472b6;
  font-size: 9px; padding: 1px 5px; border-radius: 8px; margin-right: 6px; font-weight: 700;
}
.botrules-list td.reply { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.botrules-list td.channels .pill {
  display: inline-block; padding: 2px 6px; border-radius: 10px;
  font-size: 9px; font-weight: 700; margin-right: 3px;
  background: rgba(124,108,240,.16); color: #a78bfa;
}
.botrules-list td.channels .pill.off { opacity: .25; }
.botrules-list td.mode { font-size: 11px; color: #fbbf24; }
.botrules-list td.action .badge {
  display: inline-block; padding: 2px 7px; border-radius: 10px;
  font-size: 9px; font-weight: 700;
}
.botrules-list td.action .badge.text     { background: rgba(124,108,240,.16); color: #a78bfa; }
.botrules-list td.action .badge.image    { background: rgba(52,211,153,.16);  color: #34d399; }
.botrules-list td.action .badge.handoff  { background: rgba(244,114,182,.18); color: #f472b6; }
.botrules-list td.actions { text-align: right; white-space: nowrap; }
.botrules-list td.actions button {
  background: rgba(255,255,255,.05); color: #94a3b8;
  border: 1px solid var(--cxd-border); border-radius: 6px;
  padding: 4px 9px; font-size: 10px; font-weight: 600; cursor: pointer;
  margin-left: 4px;
}
.botrules-list td.actions button.danger { background: rgba(248,113,113,.14); color: #f87171; border-color: rgba(248,113,113,.4); }
.botrules-list td.actions button:hover { color: #e2e8f0; border-color: rgba(124,108,240,.4); }
.botrules-list td.on input { cursor: pointer; }

/* Offer image previews */
.offer-img-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1300px) { .offer-img-row { grid-template-columns: 1fr; } }
.offer-img-col { display: flex; flex-direction: column; gap: 6px; }
.offer-img-label { font-size: 11px; font-weight: 600; color: #94a3b8; }
.offer-img-preview {
  background: rgba(255,255,255,.03); border: 1px dashed var(--cxd-border);
  border-radius: 8px; min-height: 120px; max-height: 180px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.offer-img-preview img { max-width: 100%; max-height: 180px; object-fit: contain; }
.offer-img-preview .empty { color: #64748b; font-size: 11px; }

/* ── Bot Rules → Package picker (Normal vs Sale) ── */
.pkgmap-card { margin-top: 14px; }
.pkgmap-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pkgmap-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: #e2e8f0; }
.pkgmap-actions { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; flex-wrap: wrap; }
.pkgmap-actions #pkgmapStatus { margin-left: 4px; font-size: 11px; }
.pkgmap-actions #pkgmapStatus.ok  { color: #34d399; font-weight: 700; }
.pkgmap-actions #pkgmapStatus.err { color: #f87171; }
.pkgmap-table-wrap { max-height: 360px; overflow-y: auto; overflow-x: auto; }
.pkgmap-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pkgmap-table col.col-price { width: 90px; }
.pkgmap-table col.col-rm    { width: 40px; }
.pkgmap-table th, .pkgmap-table td {
  padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.04); text-align: left; vertical-align: middle;
}
.pkgmap-table th {
  position: sticky; top: 0; background: #11111c;
  color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.pkgmap-table input.pkgmap-price,
.pkgmap-table select {
  width: 100%;
  background: rgba(255,255,255,.04); border: 1px solid var(--cxd-border);
  color: #e2e8f0; padding: 6px 8px; border-radius: 6px; font-size: 12px;
  outline: none; font-family: inherit; font-weight: 400;
}
.pkgmap-table input.pkgmap-price:focus,
.pkgmap-table select:focus { border-color: #7c6cf0; }
.pkgmap-table td.rm { text-align: center; }
.pkgmap-table button.pkgmap-rm {
  background: rgba(248,113,113,.10); color: #f87171;
  border: 1px solid rgba(248,113,113,.30); border-radius: 6px;
  padding: 3px 8px; font-size: 11px; font-weight: 700; cursor: pointer;
}
.pkgmap-table button.pkgmap-rm:hover { background: rgba(248,113,113,.22); }

/* ── Admin tab ── */
#tabAdmin { overflow-y: auto; padding: 14px 16px; gap: 14px; }
.admin-card {
  border: 1px solid var(--cxd-border); border-radius: 12px;
  background: rgba(255,255,255,.02); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.admin-card h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: #e2e8f0; }
.admin-card h3 .muted { font-weight: 500; font-size: 11px; color: #64748b; margin-left: 6px; }
.admin-card label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.admin-card input, .admin-card select {
  background: rgba(255,255,255,.04); border: 1px solid var(--cxd-border);
  color: #e2e8f0; padding: 7px 10px; border-radius: 8px; font-size: 12px;
  outline: none; font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.admin-card input:focus, .admin-card select:focus { border-color: #7c6cf0; }
.admin-card .row { display: flex; align-items: center; gap: 10px; }
.admin-card .hint { font-size: 10px; color: #64748b; }
.admin-card .hint code {
  background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace; font-size: 10px; color: #a78bfa;
}
.admin-card button.primary {
  background: #7c6cf0; color: #fff; border: 0; padding: 8px 14px;
  border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.admin-card button.primary:hover { background: #8e7ff5; }
.admin-card button.primary:disabled { opacity: .5; cursor: not-allowed; }
.admin-card button.danger {
  background: rgba(248,113,113,.16); color: #f87171;
  border: 1px solid rgba(248,113,113,.4);
  padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.admin-card button.danger:hover { background: rgba(248,113,113,.25); }
.admin-card button.ghost {
  background: transparent; border: 1px solid var(--cxd-border); color: #94a3b8;
  padding: 7px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.admin-card button.ghost:hover { color: #a78bfa; border-color: rgba(124,108,240,.5); }
.admin-card .ok  { color: #34d399; font-weight: 700; font-size: 11px; }
.admin-card .err { color: #f87171; font-size: 11px; }
.admin-card .muted { color: #94a3b8; font-size: 11px; }

.admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.admin-table-wrap { max-height: 320px; overflow-y: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-table th, .admin-table td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.04); text-align: left; }
.admin-table th { position: sticky; top: 0; background: #11111c; color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.admin-table td.user { color: #e2e8f0; font-weight: 600; }
.admin-table td.role .badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700;
}
.admin-table td.role .badge.admin  { background: rgba(124,108,240,.18); color: #a78bfa; }
.admin-table td.role .badge.member { background: rgba(255,255,255,.06); color: #94a3b8; }
.admin-table td.time, .admin-table td.detail { color: #94a3b8; font-size: 11px; }
.admin-table td.action { color: #a78bfa; font-weight: 600; }

.perm-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px;
  padding: 10px 12px; border: 1px solid var(--cxd-border); border-radius: 10px;
  background: rgba(255,255,255,.02);
}
.perm-grid label {
  flex-direction: row; align-items: center; gap: 8px;
  text-transform: none; letter-spacing: 0; color: #e2e8f0;
  font-size: 12px; font-weight: 500; cursor: pointer; user-select: none;
}
.perm-grid label input { width: auto; }

.colleague-form {
  border-top: 1px solid var(--cxd-border); margin-top: 12px; padding-top: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.colleague-form h4 { margin: 0; font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }

.admin-table td.token { font-family: 'SF Mono', Menlo, monospace; color: #94a3b8; font-size: 11px; }
.admin-table td.actions { width: 180px; text-align: right; }
.admin-table td.actions button {
  background: rgba(255,255,255,.05); color: #94a3b8;
  border: 1px solid var(--cxd-border); border-radius: 6px;
  padding: 4px 8px; font-size: 10px; font-weight: 600; cursor: pointer;
  margin-left: 4px;
}
.admin-table td.actions button.danger {
  background: rgba(248,113,113,.14); color: #f87171; border-color: rgba(248,113,113,.4);
}
.admin-table td.actions button:hover { color: #e2e8f0; border-color: rgba(124,108,240,.4); }
.admin-table td.actions button.danger:hover { background: rgba(248,113,113,.22); }
.admin-table td.token.empty { color: #f87171; font-family: inherit; }

/* ── Inbox tab ── */
.inbox-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--cxd-border);
}
.inbox-toolbar .seg { display:flex; gap:0; background:rgba(255,255,255,.03); border-radius:8px; padding:3px; }
.inbox-toolbar .seg button {
  background: transparent; border:0; color:#94a3b8;
  padding: 6px 14px; border-radius: 6px; cursor:pointer; font-size:12px; font-weight:600;
}
.inbox-toolbar .seg button.active { background:#7c6cf0; color:#fff; }
.inbox-toolbar .primary {
  background: #7c6cf0; color: #fff; border: 0; padding: 7px 14px;
  border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.inbox-toolbar .primary:hover { background: #8e7ff5; }
.inbox-toolbar .primary:disabled { opacity:.5; cursor:not-allowed; }
.inbox-toolbar .muted { color:#94a3b8; font-size: 11px; }
.inbox-toolbar .ok    { color:#34d399; font-size: 11px; font-weight: 700; }
.inbox-toolbar .err   { color:#f87171; font-size: 11px; }
.inbox-toolbar .spacer { flex: 1; }
.inbox-toolbar input[type="text"] {
  background: rgba(255,255,255,.04); border: 1px solid var(--cxd-border);
  color: #e2e8f0; padding: 7px 12px; border-radius: 8px; font-size: 12px;
  outline: none; width: 240px; font-family: inherit;
}
.inbox-toolbar input[type="text"]:focus { border-color:#7c6cf0; }
.inbox-toolbar select {
  background: rgba(255,255,255,.04); border: 1px solid var(--cxd-border);
  color: #e2e8f0; padding: 7px 10px; border-radius: 8px; font-size: 12px;
  outline: none; cursor: pointer; font-family: inherit;
}
.inbox-toolbar select:focus { border-color:#7c6cf0; }

.inbox-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; }
.inbox-sidebar { border-right: 1px solid var(--cxd-border); background: var(--cxd-sidebar); display:flex; flex-direction:column; overflow:hidden; }

/* Override badge to display reply text instead of dot */
.cx-card .badge.reply { background: #34d399; }
.cx-card .meta .when { font-size: 10px; color: #64748b; }
.cx-card .meta .row1 { display:flex; align-items:baseline; justify-content:space-between; gap: 6px; }
.cx-card .badges { display:flex; gap: 4px; align-items:center; }
.cx-card .badges .vip { background: rgba(251,191,36,.18); color: #fbbf24; border:1px solid rgba(251,191,36,.4); border-radius: 10px; padding: 1px 5px; font-size: 9px; font-weight: 700; }
.cx-card .badges .app { background: rgba(124,108,240,.12); color: #a78bfa; border:1px solid rgba(124,108,240,.3); border-radius: 10px; padding: 1px 5px; font-size: 9px; font-weight: 600; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 20px; right: 20px;
  background: #1e1e2d; border: 1px solid var(--cxd-border);
  color: #e2e8f0; padding: 10px 14px; border-radius: 10px;
  font-size: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(8px); transition: opacity .15s, transform .15s;
  pointer-events: none; z-index: 1000;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(248,113,113,.4); color: #fca5a5; }