@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&display=swap');
/* ============================================================
   NEXUM Design System v3 (01/09/2026) — one single root token block.
   Reference: financy.open-finance.ai. WARM STONE neutrals only
   (zero cold rgba(28,25,23) / #1C1917 / #79716B anywhere in this file).
   Real 2-layer depth, a type scale with actual hierarchy, motion tokens.
   Brand base (--brand-*) is overridden per-instance by an inline
   <style> after this file, so keep it here as the default.
   ============================================================ */
:root {
    /* brand base (config-injected per instance; these are the defaults) */
    --brand-primary: #6366F1;
    --brand-dark: #4F46E5;
    --brand-accent: #25D366;
    /* legacy aliases (kept — many rules reference them) */
    --brand-teal: var(--brand-primary);
    --brand-teal-dark: color-mix(in srgb, var(--brand-primary) 78%, black);
    --brand-teal-light: color-mix(in srgb, var(--brand-primary) 10%, white);
    --accent-orange: var(--brand-accent);
    --brand-turquoise: var(--brand-dark);
    --accent-orange-dark: color-mix(in srgb, var(--brand-accent) 80%, black);
    --accent-orange-light: color-mix(in srgb, var(--brand-accent) 14%, white);
    --brand-grad: linear-gradient(135deg, var(--brand-primary) 0%, color-mix(in srgb, var(--brand-primary) 50%, var(--brand-accent)) 48%, var(--brand-accent) 100%);

    --wa-green: #25D366;
    --wa-green-soft: #E7F9EE;

    /* warm stone surfaces */
    --bg-app: #FAFAF9;
    --bg-card: #FFFFFF;
    --bg-hover: #F5F5F4;
    --bg-active: color-mix(in srgb, var(--brand-primary) 7%, #FAFAF9);
    --bg-active-strong: color-mix(in srgb, var(--brand-primary) 15%, #FAFAF9);
    --stage-bg: radial-gradient(1000px 480px at 50% -140px, color-mix(in srgb, var(--brand-primary) 9%, transparent), transparent 62%), var(--bg-app);

    /* warm ink (was cold #1C1917/#79716B) */
    --text-primary: #1C1917;
    --text-secondary: #57534E;
    --text-muted: #79716B;
    --text-on-dark: #ffffff;

    --border: rgba(28,25,23,.12);
    --border-strong: rgba(28,25,23,.20);

    /* semantic — ONE action language: indigo=primary · green=WhatsApp-send only · red=danger */
    --primary: var(--brand-primary);
    --cta: var(--brand-accent);
    --success: #1FAF63;
    --success-light: #E8F8EF;
    --warning: #B45309;
    --warning-light: #FEF3C7;
    --danger: #DC2626;
    --danger-light: #FEE2E2;
    --info: var(--brand-primary);
    --info-light: color-mix(in srgb, var(--brand-primary) 9%, white);
    --purple: #8b5cf6;

    /* real 2-layer depth: tight near shadow + soft far shadow (warm) */
    --shadow-sm: 0 1px 2px rgba(28,25,23,.06);
    --shadow: 0 1px 3px rgba(28,25,23,.08), 0 12px 32px rgba(28,25,23,.10);
    --shadow-md: 0 1px 3px rgba(28,25,23,.08), 0 18px 44px rgba(28,25,23,.12);
    --shadow-lg: 0 2px 6px rgba(28,25,23,.08), 0 28px 60px rgba(28,25,23,.16);
    --shadow-card: var(--shadow);

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --radius-bubble: 14px 14px 4px 14px;

    /* readout font — numbers feel engineered */
    --font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* motion */
    --ease: cubic-bezier(.2,.8,.2,1);
    --dur-fast: 120ms;
    --dur: 200ms;

    /* spacing (4px base) */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px;

    /* type scale — real hierarchy (~1.25 ratio, KPI jump 24→32→40) */
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 19px;
    --fs-xl: 24px;
    --fs-2xl: 32px;
    --fs-3xl: 40px;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --topbar-h: 64px;
    --mainnav-h: 64px;
    --sidebar-w: 256px;
    --conv-list-w: 360px;
    --banner-h: 0px;
}


* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    /* emoji fallback fonts so message-content emojis render as glyphs, not tofu squares */
    font-family: 'Heebo', system-ui, -apple-system, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
    background: var(--bg-app);
    color: var(--text-primary);
    direction: rtl;
    height: 100%;
    overflow: hidden;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    font-optical-sizing: auto;
}

/* premium stage background on every app page (glow at top, calm below) */
body.has-mainnav { background: var(--stage-bg); background-attachment: fixed; }

/* engineered numbers — Financy signature: every metric/phone/time in mono */
.big-stat-num, .pipe-count, .msg-time-inline, .msg-meta, .pc-phone,
.conv-time, .stat-num, .fltCount, td[dir="ltr"], .usermenu-role {
    font-variant-numeric: tabular-nums;
}
.big-stat-num { font-family: var(--font-num); letter-spacing: -0.03em; }

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input, textarea, select {
    font-family: inherit;
    color: inherit;
}

/* ============================================
   TOPBAR
   ============================================ */
.app-topbar {
    height: var(--topbar-h);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr auto;
    align-items: center;
    padding: 0 1.25rem;
    gap: 1.5rem;
    box-shadow: var(--shadow-sm);
    z-index: 10;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.topbar-logo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: contain;
}

.topbar-logo-fallback {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand-teal);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
}

.topbar-title-main {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--brand-teal);
    line-height: 1.1;
}

.topbar-title-sub {
    font-size: .7rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 1px;
}

.topbar-search {
    position: relative;
    max-width: 480px;
    min-width: 0;            /* #16: let the search track shrink so the action buttons never clip */
    display: flex;
    align-items: center;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 .75rem;
    transition: all .15s;
}

.topbar-search:focus-within {
    background: var(--bg-card);
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(29,72,85,.08);
}

.topbar-search svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.topbar-search input {
    flex: 1;
    border: none;
    background: transparent;
    padding: .65rem .5rem;
    font-size: .9rem;
    outline: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;         /* #16: keep the action buttons at their intrinsic width (never squeezed/clipped) */
}

/* ============================================================
   NEXUM buttons — EXACTLY three levels, everywhere:
   • primary   = solid indigo, white text (ONE per screen)
   • secondary = white, border, dark text
   • ghost     = text only
   green (.btn-wa) is reserved for WhatsApp-SENDING actions only.
   ============================================================ */
.btn-primary-lg {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--brand-primary); color: #fff;
    padding: 0 1.15rem; height: 40px; border: 1px solid transparent;
    border-radius: var(--radius-sm); font-weight: 700; font-size: .9rem;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    box-shadow: 0 1px 2px rgba(28,25,23,.12);
}
.btn-primary-lg:hover { background: color-mix(in srgb, var(--brand-primary) 88%, black); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary-lg:active { transform: scale(.98); }
.btn-primary-lg:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* WhatsApp-only action button — the ONLY place green leads */
.btn-wa {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--wa-green); color: #fff;
    padding: 0 1.15rem; height: 40px; border: 1px solid transparent;
    border-radius: var(--radius-sm); font-weight: 700; font-size: .9rem;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    box-shadow: 0 1px 2px rgba(28,25,23,.12);
}
.btn-wa:hover { background: color-mix(in srgb, var(--wa-green) 88%, black); transform: translateY(-1px); }
.btn-wa:active { transform: scale(.98); }

.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    height: 40px; padding: 0 1.15rem;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    font-weight: 600; font-size: .9rem;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn-secondary:active { transform: scale(.98); }

/* ghost — text-only tertiary action */
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    height: 40px; padding: 0 .8rem; border: 1px solid transparent; background: none;
    color: var(--text-secondary); font-family: inherit; font-weight: 600; font-size: .9rem;
    border-radius: var(--radius-sm); cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-ghost:active { transform: scale(.98); }

/* ============================================================
   NEXUM form fields — ONE class for input / select / textarea / date.
   Kills native OS controls (the biggest "not a product" tell).
   ============================================================ */
.field-label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); margin-bottom: .35rem; }
.field,
.nx-field {
    width: 100%; height: 40px; box-sizing: border-box;
    padding: 0 .75rem; font-family: inherit; font-size: var(--fs-base);
    color: var(--text-primary); background: var(--bg-card);
    border: 1px solid rgba(28,25,23,.14); border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    appearance: none; -webkit-appearance: none;
}
textarea.field, textarea.nx-field { height: auto; min-height: 92px; padding: .6rem .75rem; line-height: 1.5; resize: vertical; }
.field:focus, .nx-field:focus {
    outline: none; border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}
.field::placeholder, .nx-field::placeholder { color: var(--text-muted); }
/* custom select chevron (no native OS arrow) */
select.field, select.nx-field {
    padding-inline-start: 2rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2379716B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left .7rem center; cursor: pointer;
}
/* native date control — strip the native look, keep the picker */
input[type=date].field, input[type=date].nx-field { position: relative; }
input[type=date].field::-webkit-calendar-picker-indicator,
input[type=date].nx-field::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }

.topbar-user {
    position: relative;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .65rem .35rem .85rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.user-chip:hover {
    background: var(--bg-hover);
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    flex-shrink: 0;
}

.user-info {
    line-height: 1.15;
}

.user-name {
    font-weight: 700;
    font-size: .85rem;
    color: var(--text-primary);
}

.user-role {
    font-size: .7rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.user-chev {
    font-size: .55rem;
    color: var(--text-muted);
    margin-right: .35rem;
}

.user-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 50;
}

.user-menu.show {
    display: block;
}

.user-menu-item {
    display: block;
    padding: .65rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    transition: background .12s;
}

.user-menu-item:hover {
    background: var(--bg-hover);
}

/* ============================================
   LAYOUT
   ============================================ */
.app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) var(--conv-list-w) 1fr;
    height: calc(100vh - var(--topbar-h) - var(--banner-h));   /* #16: subtract the trial banner so the compose bar never clips */
    overflow: hidden;
}

/* 4.2: מזעור פאנלים (אדמין) — רשימת השיחות האמצעית + פאנל פרטי הלקוח, כל אחד בנפרד */
body.collapsed-convlist .app-layout { grid-template-columns: var(--sidebar-w) 0 1fr; }
body.collapsed-convlist .app-conv-list { display: none; }
body.collapsed-custpanel .conv-view-body { grid-template-columns: 1fr 0 !important; }
body.collapsed-custpanel .customer-panel { display: none; }
.panel-toggle-btn { padding: .5rem .7rem; border-radius: 8px; background: var(--bg-app); color: var(--text-secondary); font-size: 1rem; transition: all .15s; }
.panel-toggle-btn:hover { background: var(--border); color: var(--text-primary); }
.panel-toggle-btn.active { background: var(--brand-teal-light); color: var(--brand-teal); }

/* ============================================
   SIDEBAR
   ============================================ */
.app-sidebar {
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    padding: 1rem .75rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-section {
    margin-bottom: 1.5rem;
}

.sidebar-section-title {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 0 .75rem;
    margin-bottom: .5rem;
}

.sidebar-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    padding: .55rem .75rem;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s, color .12s;
    border-radius: 6px;
}

.sidebar-section-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.section-chev {
    font-size: .65rem;
    color: var(--text-muted);
    transition: transform .18s ease;
}

.sidebar-section.collapsed .section-chev {
    transform: rotate(-90deg);
}

.sidebar-section.collapsed .sidebar-section-body {
    display: none;
}

.sidebar-section-body {
    animation: sectionExpand .2s ease-out;
}

@keyframes sectionExpand {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.sidebar-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border-radius: 8px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all .12s;
    margin-bottom: 2px;
    text-decoration: none;
    text-align: right;
}

.sidebar-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar-item.active {
    background: var(--bg-active);
    color: var(--brand-teal);
    font-weight: 600;
}

.sidebar-item.active .sidebar-icon {
    transform: scale(1.05);
}

.sidebar-icon {
    font-size: 1.1rem;
    line-height: 1;
    transition: transform .12s;
    flex-shrink: 0;
}

.sidebar-label {
    flex: 1;
    font-size: .9rem;
}

.sidebar-count {
    background: var(--border);
    color: var(--text-secondary);
    padding: .1rem .5rem;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}

.sidebar-item.active .sidebar-count {
    background: var(--brand-teal);
    color: white;
}

.badge-warning {
    background: var(--warning) !important;
    color: white !important;
}

.dept-item, .agent-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .75rem;
    border-radius: 8px;
    transition: all .12s;
    cursor: pointer;
    text-align: right;
}

.dept-item:hover, .agent-item:hover {
    background: var(--bg-hover);
}

.dept-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dept-name, .agent-name {
    flex: 1;
    font-size: .85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.dept-count, .agent-count {
    font-size: .7rem;
    color: var(--text-muted);
    font-weight: 600;
}

.agent-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-teal);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.sidebar-link {
    display: block;
    padding: .5rem .75rem;
    color: var(--text-muted);
    font-size: .8rem;
    text-decoration: none;
    border-radius: 6px;
    transition: all .12s;
}

.sidebar-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.admin-shortcut {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem .85rem;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-size: .9rem;
    transition: all .15s;
    box-shadow: 0 2px 6px rgba(29,72,85,.25);
}

.admin-shortcut:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(29,72,85,.35);
}

.admin-shortcut-arrow { margin-right: auto; font-weight: 700; }

/* ============================================
   CONVERSATIONS LIST
   ============================================ */
.app-conv-list {
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.conv-list-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.conv-list-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.conv-count-badge {
    background: var(--bg-app);
    color: var(--text-secondary);
    padding: .15rem .6rem;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 700;
}

.conv-list-body {
    flex: 1;
    overflow-y: auto;
}

.conv-card {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .75rem 1.25rem;
    min-height: 74px;            /* fixed-height rows — never jumps with chip count */
    box-sizing: border-box;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .1s;
    position: relative;
}
/* row2 = one line, at most 2 chips + "+N"; overflow clipped so height is stable */
.conv-row2 { flex-wrap: nowrap; overflow: hidden; }
.conv-row2 > * { flex: 0 0 auto; }
.conv-tag-more { background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border);
    font-weight: 600; font-family: var(--font-num); }
/* user icon (phone-as-name) sits centered in the avatar */
.conv-avatar svg { width: 22px; height: 22px; }

.conv-card:hover {
    background: var(--bg-hover);
}

.conv-card.selected {
    background: var(--bg-active);
}

.conv-card.selected::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-teal);
}

.conv-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-primary) 13%, white);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .95rem;
    flex-shrink: 0;
    position: relative;
}
/* Nexum minimal: unify the 3 random avatar colors into one calm brand tint */
.conv-avatar.avatar-orange,
.conv-avatar.avatar-purple {
    background: color-mix(in srgb, var(--brand-primary) 13%, white);
    color: var(--brand-primary);
}

.conv-status-dot {
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
}

.status-bot { background: var(--info); }
.status-queue { background: var(--warning); animation: pulse 1.8s infinite; }
.status-human { background: var(--success); }

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: .7; }
}

.conv-content {
    flex: 1;
    min-width: 0;
}

.conv-row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}

.conv-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-time {
    font-size: .7rem;
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
}

.conv-row2 {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .25rem;
    font-size: .8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

/* חלק 3: chip אחיד לכל התגיות והשמות בשורת השיחה — גודל זהה, שורה אחת */
.conv-row2 > span {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    white-space: nowrap;
    font-size: .72rem;
    line-height: 1.5;
    border-radius: 10px;
    padding: 1px 8px;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-phone {
    font-family: 'Heebo', monospace;
    direction: ltr;
    background: var(--bg-app);
    color: #1a1a1a;
    font-weight: 600;
}

.conv-dept-tag {
    background: var(--bg-app) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border);
    font-weight: 600;
}

.conv-agent-tag {
    background: var(--bg-app) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border);
    font-weight: 500;
}

.conv-stage-tag {
    font-weight: 600;
    border: none;
}

.conv-preview {
    margin-top: .3rem;
    font-size: .82rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.preview-sender {
    color: var(--text-muted);
    font-weight: 600;
    font-size: .75rem;
}

.unread-badge {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent-orange);
    color: white;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: .68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   CONVERSATION VIEW (right pane)
   ============================================ */
.app-conv-view {
    display: flex;
    flex-direction: column;
    background: var(--bg-app);
    overflow: hidden;
    min-height: 0;   /* #6: let the inner scroll area shrink so the composer is never pushed off-screen */
}

.conv-view-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.conv-view-header .conv-avatar {
    width: 40px;
    height: 40px;
    font-size: .85rem;
}

.conv-view-info {
    flex: 1;
    min-width: 0;
}

.conv-view-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.conv-view-meta {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.conv-view-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all .15s;
    background: transparent;
}

.btn-icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-icon.btn-icon-primary {
    background: var(--brand-teal);
    color: white;
}

.btn-icon.btn-icon-primary:hover {
    background: var(--brand-teal-dark);
}

.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .8rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: .82rem;
    transition: all .15s;
}

.btn-pill-take {
    background: var(--brand-teal);
    color: white;
}

.btn-pill-take:hover {
    background: var(--brand-teal-dark);
}

.btn-pill-release {
    background: var(--bg-app);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-pill-release:hover {
    background: var(--border);
}

/* #7: סגירת/פתיחת שיחה (סיום טיפול) */
.btn-pill-close {
    background: #16a34a;
    color: #fff;
}
.btn-pill-close:hover {
    background: #15803d;
}
.btn-pill-reopen {
    background: var(--bg-app);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-pill-reopen:hover {
    background: var(--border);
}

.conv-view-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 280px;
    overflow: hidden;
    min-height: 0;   /* #6 */
}

.chat-area {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-app);
    min-height: 0;   /* #6: the composer (.chat-input-area, flex-shrink:0) always stays visible */
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    background: #efeae2;   /* WhatsApp-style chat background (white customer bubbles stand out) */
}

.msg-row {
    display: flex;
    margin-bottom: 1rem;
    gap: .65rem;
}

.msg-row.msg-out {
    flex-direction: row-reverse;
}

.msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    margin-top: 18px;
}

.msg-avatar-bot { background: var(--info); }
.msg-avatar-customer { background: var(--brand-teal); }
.msg-avatar-agent { background: var(--accent-orange); }

.msg-content-wrap {
    max-width: 65%;
    display: flex;
    flex-direction: column;
}

.msg-out .msg-content-wrap {
    align-items: flex-end;
}

.msg-meta {
    font-size: .7rem;
    color: var(--text-muted);
    margin-bottom: .2rem;
    padding: 0 .25rem;
    font-weight: 500;
}

.msg-bubble {
    background: var(--bg-card);
    padding: .65rem .85rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: .92rem;
    line-height: 1.45;
}

.msg-row.msg-sender-customer .msg-bubble {
    background: var(--bg-card);
    border-radius: 12px 12px 12px 4px;
}

.msg-row.msg-sender-bot .msg-bubble {
    background: var(--brand-teal-light);
    border-color: #c8d9de;
    border-radius: 4px 12px 12px 12px;
}

/* WhatsApp-style: our (outgoing) messages = WhatsApp green with dark text; customer = white */
.msg-row.msg-out:not(.msg-sender-bot) .msg-bubble {
    background: #d9fdd3;
    color: #111b21;
    border-color: #c5efbb;
    border-radius: 4px 12px 12px 12px;
}

.msg-time-inline {
    font-size: .68rem;
    color: var(--text-muted);
    margin-top: .2rem;
    padding: 0 .25rem;
}

.chat-input-area {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: .75rem 1rem;
    flex-shrink: 0;
    position: relative;
}

.quick-replies-bar {
    display: flex;
    align-items: center;
    margin-bottom: .5rem;
    position: relative;
}

.qr-toggle {
    background: var(--brand-teal-light);
    color: var(--brand-teal);
    padding: .35rem .75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: .8rem;
    transition: all .15s;
    border: 1px solid transparent;
    display: inline-flex;           /* one design language: consistent alignment across the group */
    align-items: center;
    gap: .3rem;
    line-height: 1;
}

.qr-toggle:hover {
    background: var(--brand-teal);
    color: white;
}

/* the icon-only composer buttons (attach / voice) — crisper, larger glyph + a proper click area (#5) */
.qr-attach { font-size: 1.1rem; padding: .3rem .6rem; }
.qr-attach:hover { background: var(--brand-teal); color: #fff; }

.qr-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-height: 320px;
    overflow-y: auto;
    z-index: 30;
}

.qr-menu.show {
    display: block;
}

.qr-item {
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .12s;
}

.qr-item:last-child { border-bottom: none; }
.qr-item:hover { background: var(--bg-hover); }

.qr-item-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .15rem;
}

.qr-shortcut {
    background: var(--accent-orange);
    color: white;
    padding: .1rem .45rem;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 700;
    font-family: monospace;
}

.qr-title {
    font-weight: 700;
    font-size: .85rem;
    color: var(--text-primary);
    flex: 1;
}

.qr-cat {
    font-size: .7rem;
    color: var(--text-muted);
    background: var(--bg-app);
    padding: .1rem .5rem;
    border-radius: 4px;
}

.qr-preview {
    font-size: .78rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-right: 0;
}

/* Emoji Picker */
.emoji-picker {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 30;
}

.emoji-picker.show { display: block; }

.emoji-tabs {
    display: flex;
    gap: 2px;
    padding: .35rem;
    background: var(--bg-app);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.emoji-tab {
    background: transparent;
    border: none;
    padding: .35rem .65rem;
    border-radius: 6px;
    font-size: .8rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all .12s;
}

.emoji-tab:hover { background: var(--bg-hover); }
.emoji-tab.active { background: var(--brand-teal); color: white; }

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: .5rem;
    max-height: 240px;
    overflow-y: auto;
}

.emoji-btn {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    padding: .4rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all .1s;
    line-height: 1;
}

.emoji-btn:hover {
    background: var(--brand-teal-light);
    transform: scale(1.15);
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
    position: fixed;
    top: 3.4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    z-index: 3000;
    pointer-events: none;
}

.toast {
    background: var(--bg-card);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,.28), 0 0 0 2px var(--accent-orange);
    padding: 1rem 1.15rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: 420px;
    max-width: 92vw;
    pointer-events: auto;
    cursor: pointer;
    transition: all .2s;
    border-right: 5px solid var(--accent-orange);
}

.toast:hover {
    transform: translateX(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,.22);
}

.toast-in {
    animation: toastSlideIn .35s cubic-bezier(.34,1.56,.64,1);
}

.toast-out {
    animation: toastSlideOut .3s ease-in forwards;
}

@keyframes toastSlideIn {
    from { transform: translateX(-120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
    to { transform: translateX(-120%); opacity: 0; }
}

.toast-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-teal);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}

.toast-avatar.avatar-orange { background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-dark)); }
.toast-avatar.avatar-purple { background: linear-gradient(135deg, var(--purple), #6d28d9); }

.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 700; font-size: .9rem; color: var(--text-primary); }
.toast-meta { font-size: .72rem; color: var(--text-muted); margin: 1px 0 .3rem; direction: ltr; text-align: right; }
.toast-preview { font-size: .85rem; color: var(--text-secondary); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.toast-close {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    transition: all .15s;
}

.toast-close:hover { background: var(--bg-app); color: var(--text-primary); }

/* #25: ריאקציות להודעה */
.msg-react-btn {
    cursor: pointer;
    opacity: .55;
    margin-right: .3rem;
    font-size: .85rem;
    transition: opacity .15s;
}
.msg-react-btn:hover { opacity: 1; }
.msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .35rem;
}
.msg-reaction-pill {
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: .05rem .4rem;
    font-size: .9rem;
    line-height: 1.3;
}
.react-picker {
    position: fixed;
    z-index: 100000;
    background: var(--bg-card);
    border-radius: 22px;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    padding: .3rem .4rem;
    display: flex;
    gap: .15rem;
}
.react-picker button {
    border: none;
    background: transparent;
    font-size: 1.35rem;
    cursor: pointer;
    border-radius: 50%;
    width: 2.1rem;
    height: 2.1rem;
    transition: transform .1s, background .1s;
}
.react-picker button:hover { transform: scale(1.25); background: var(--bg-app); }
.react-picker .react-remove { font-size: 1rem; color: var(--text-muted); }

/* ============================================
   LEGAL CASE - Red border + popup
   ============================================ */
.conv-view-legal .conv-view-header {
    background: linear-gradient(90deg, #fef2f2 0%, white 60%);
    border-bottom: 2px solid var(--danger);
}

.conv-view-legal .chat-area {
    border: 3px solid var(--danger);
    border-top: none;
}

.legal-banner-mini {
    display: inline-block;
    background: #fee2e2;
    color: #991b1b;
    padding: .25rem .65rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: .75rem;
    margin-right: .5rem;
}

.legal-popup {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.6);
    backdrop-filter: blur(4px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: legalPopupIn .2s ease-out;
}

@keyframes legalPopupIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.legal-popup-content {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 2rem;
    max-width: 440px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(220,38,38,.3);
    border: 3px solid var(--danger);
    animation: legalPopupZoom .3s cubic-bezier(.34,1.56,.64,1);
}

@keyframes legalPopupZoom {
    from { transform: scale(.85); }
    to { transform: scale(1); }
}

.legal-popup-icon {
    font-size: 3.5rem;
    margin-bottom: .75rem;
    animation: legalShake .5s ease-out;
}

@keyframes legalShake {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.legal-popup-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--danger);
    margin-bottom: .75rem;
}

.legal-popup-text {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* ============================================
   Slash dropdown for quick replies
   ============================================ */
.slash-dropdown {
    display: none;
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-height: 320px;
    overflow-y: auto;
    z-index: 1500;
}

.slash-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    cursor: pointer;
    transition: background .12s;
    border-bottom: 1px solid var(--border);
}

.slash-item:last-child { border-bottom: none; }

.slash-item:hover, .slash-item.active {
    background: var(--brand-teal-light);
}

.slash-item-info { flex: 1; min-width: 0; }

.slash-item-title {
    font-weight: 700;
    font-size: .82rem;
    color: var(--text-primary);
}

.slash-item-preview {
    font-size: .72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* Templates button - distinguished from shortcuts */
.qr-toggle-template {
    background: var(--accent-orange-light) !important;
    color: var(--accent-orange-dark) !important;
}

.qr-toggle-template:hover {
    background: var(--accent-orange) !important;
    color: white !important;
}

/* ============================================
   Team Chat (internal team chats per dept/role)
   ============================================ */
.team-chat-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: right;
    transition: all .12s;
    margin-bottom: 2px;
    position: relative;
}

.team-chat-item:hover {
    background: var(--bg-hover);
}

.team-chat-item.active {
    background: var(--bg-active);
    color: var(--brand-teal);
    font-weight: 700;
}

.team-chat-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.team-chat-name {
    flex: 1;
    font-size: .88rem;
    color: var(--text-primary);
}

.team-chat-unread {
    background: var(--accent-orange);
    color: white;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: .68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Team chat view */
.team-chat-header {
    background: linear-gradient(90deg, var(--brand-teal-light), white 70%) !important;
}

.team-chat-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: var(--shadow-sm);
}

.team-chat-messages {
    background: #f5f7fa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='%23e0e5ed'/%3E%3C/svg%3E");
}

.team-msg {
    display: flex;
    gap: .65rem;
    margin-bottom: 1rem;
}

.team-msg-me {
    flex-direction: row-reverse;
}

.team-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-teal);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    flex-shrink: 0;
}

.team-msg-body {
    max-width: 65%;
    background: var(--bg-card);
    border-radius: 12px;
    padding: .6rem .85rem;
    box-shadow: var(--shadow-sm);
}

.team-msg-me .team-msg-body {
    background: var(--brand-teal);
    color: white;
    border-radius: 12px 12px 4px 12px;
}

.team-msg-me .team-msg-name {
    color: rgba(255,255,255,.8) !important;
}

.team-msg-me .team-msg-time {
    color: rgba(255,255,255,.7) !important;
}

.team-msg-head {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .15rem;
}

.team-msg-name {
    font-weight: 700;
    font-size: .8rem;
    color: var(--text-primary);
}

.team-msg-time {
    font-size: .7rem;
    color: var(--text-muted);
}

.team-msg-content {
    font-size: .92rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chat-input-row {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .65rem .85rem;
    font-size: .92rem;
    resize: none;
    min-height: 42px;
    max-height: 150px;
    outline: none;
    transition: border-color .15s;
    line-height: 1.4;
}

.chat-input:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(29,72,85,.08);
}

.btn-send {
    background: var(--accent-orange);
    color: white;
    padding: 0 1.25rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: .92rem;
    height: 42px;
    transition: all .15s;
}

.btn-send:hover {
    background: var(--accent-orange-dark);
}

.btn-send:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.bot-mode-banner {
    background: var(--brand-teal-light);
    color: var(--brand-teal);
    padding: .5rem .85rem;
    border-radius: 8px;
    font-size: .82rem;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
}

/* ============================================
   CUSTOMER INFO PANEL (right of chat)
   ============================================ */
.customer-panel {
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 1.25rem;
}

.panel-section {
    margin-bottom: 1.5rem;
}

.panel-section:last-child {
    margin-bottom: 0;
}

.panel-title {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .6rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--border);
}

.panel-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .35rem 0;
    font-size: .85rem;
    gap: .5rem;
}

.panel-row dt {
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
}

.panel-row dd {
    color: var(--text-primary);
    font-weight: 600;
    text-align: left;
    word-break: break-word;
}
/* #12: a core row with no value shows a muted 'לא הוגדר' placeholder (keeps the skeleton uniform) */
.panel-row-empty dd { color: var(--text-muted); font-weight: 500; opacity: .7; }

/* קיבוץ שדות בכרטיס לקוח — היררכיה ברורה בין קבוצות */
.panel-group {   /* #2b: borderless — groups flow into ONE connected box (below) */
    padding: .35rem .2rem;
    margin-top: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}
.panel-group + .panel-group { border-top: 1px solid var(--border); margin-top: .45rem; padding-top: .5rem; }
/* #2b: single unified box around the details/status/custom groups */
#customerPanel > dl { background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius, 10px); padding: .35rem .55rem; margin: 0; }
.panel-group:first-child { margin-top: 0; }
.panel-group-label {
    font-size: .66rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .1rem;
    opacity: .9;
}
.panel-group .panel-row { padding: .28rem 0; }
.panel-group .panel-row:not(:last-child) { border-bottom: 1px dashed var(--border); }

.panel-row.panel-row-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
}

.panel-row-stacked dd {
    text-align: right;
}

.zebra-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--accent-orange);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    margin-top: .5rem;
}

.zebra-link:hover {
    color: var(--accent-orange-dark);
}

.zebra-card-badge {
    background: var(--accent-orange-light);
    color: var(--accent-orange-dark);
    padding: .15rem .55rem;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 700;
    display: inline-block;
}

.collected-tag {
    display: inline-block;
    background: var(--brand-teal-light);
    color: var(--brand-teal);
    padding: .2rem .55rem;
    border-radius: 6px;
    font-size: .72rem;
    margin: .15rem .15rem 0 0;
    font-weight: 600;
}

.btn-export-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    background: var(--text-primary);
    color: white;
    padding: .55rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: .82rem;
    margin-top: .5rem;
    text-decoration: none;
    transition: background .15s;
}

.btn-export-panel:hover {
    background: black;
}

.assignees-list { display: flex; flex-direction: column; gap: .5rem; }

.assignee-chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .65rem;
    background: var(--bg-app);
    border-radius: 8px;
    border-right: 3px solid var(--brand-teal);
    transition: all .15s;
}

.assignee-chip:hover { background: var(--bg-hover); }

.assignee-info { flex: 1; min-width: 0; }

.assignee-name {
    font-weight: 700;
    font-size: .85rem;
    color: var(--text-primary);
}

.assignee-source {
    font-size: .7rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.assignee-remove {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid transparent;
}

.assignee-remove:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

/* ============================================
   CONTEXT MENU (right-click)
   ============================================ */
.context-menu {
    display: none;
    position: fixed;
    background: var(--bg-card);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
    min-width: 220px;
    z-index: 1000;
    overflow: hidden;
    animation: cmFadeIn .12s ease-out;
}

@keyframes cmFadeIn {
    from { opacity: 0; transform: scale(.97); }
    to { opacity: 1; transform: scale(1); }
}

.cm-header {
    padding: .65rem .9rem;
    background: var(--bg-app);
    font-size: .85rem;
}

.cm-divider {
    height: 1px;
    background: var(--border);
    margin: .25rem 0;
}

.cm-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .9rem;
    cursor: pointer;
    font-size: .88rem;
    color: var(--text-primary);
    transition: background .1s;
}

.cm-item:hover { background: var(--bg-hover); }

.cm-icon {
    font-size: 1rem;
    width: 22px;
    text-align: center;
}

.cm-danger { color: var(--danger); }
.cm-danger:hover { background: #fef2f2; }

/* ============================================
   ASSIGN AGENT MODAL
   ============================================ */
.assign-search {
    margin-bottom: 1rem;
}

.assign-search input {
    width: 100%;
    padding: .7rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: .95rem;
    font-family: inherit;
    outline: none;
    transition: all .15s;
}

.assign-search input:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(29,72,85,.08);
}

.assign-by-dept {
    max-height: 60vh;
    overflow-y: auto;
}

.assign-dept-group {
    margin-bottom: 1.25rem;
}

.assign-dept-group:last-child {
    margin-bottom: 0;
}

.assign-dept-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .88rem;
    color: var(--text-secondary);
    padding: 0 .25rem .5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.assign-dept-count {
    margin-right: auto;
    background: var(--bg-app);
    color: var(--text-muted);
    padding: .1rem .5rem;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 700;
}

.assign-agents-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.assign-agent-card {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .75rem;
    background: var(--bg-app);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s;
    text-align: right;
    font-family: inherit;
}

.assign-agent-card:hover {
    background: var(--brand-teal-light);
    border-color: var(--brand-teal);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.assign-agent-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-teal);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    flex-shrink: 0;
}

.assign-agent-info {
    flex: 1;
    min-width: 0;
}

.assign-agent-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assign-agent-meta {
    font-size: .73rem;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Conversation flags */
.conv-card-urgent { background: linear-gradient(90deg, rgba(239,68,68,.04), transparent); border-right: 3px solid var(--danger); }
.conv-card-pinned { background: linear-gradient(90deg, rgba(232,122,61,.06), transparent); }
.conv-card-pinned::after {
    content: '📌';
    position: absolute;
    top: .5rem;
    left: .5rem;
    font-size: .8rem;
    opacity: .7;
}

.conv-urgent, .conv-pin {
    display: inline-block;
    margin-left: .3rem;
}

/* clean minimal chip — one consistent look regardless of who added it */
.conv-tag {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
/* user-added label — same clean pill + a small dot in the label's own colour */
.conv-label { --lc: var(--text-muted); }
.conv-label::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--lc); flex: 0 0 auto;
}

/* ============================================
   EMPTY STATES
   ============================================ */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
}

.empty-state-large {
    padding: 5rem 2rem;
    margin: auto;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: .5;
}

.empty-state-large .empty-icon {
    font-size: 4.5rem;
}

.empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: .35rem;
}

.empty-sub {
    font-size: .9rem;
    color: var(--text-muted);
}

/* ============================================
   MODAL
   ============================================ */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    z-index: 2000; /* מעל mainnav(1000)+subnav(900) — המודל חייב לכסות את הניווט */
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-backdrop.show {
    display: flex;
}

.modal {
    background: var(--bg-card);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    /* #16 (round 3): header stays fixed, the body scrolls, the actions stick to the bottom — so a tall form
       (e.g. new Meta template) never clips its last field or its save button. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalIn .2s ease-out;
}
.modal > .modal-header { flex: 0 0 auto; }
.modal > .modal-body { flex: 1 1 auto; overflow-y: auto; }

@keyframes modalIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-app);
    color: var(--text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    transition: all .15s;
}

.modal-close:hover {
    background: var(--border);
    color: var(--text-primary);
}

.modal-body {
    padding: 1.25rem 1.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: .35rem;
    font-size: .88rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .6rem .8rem;
    font-size: .92rem;
    outline: none;
    transition: border-color .15s;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(29,72,85,.08);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-hint {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: .25rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-start;
    gap: .5rem;
    margin-top: 1.25rem;
    flex-direction: row-reverse;
}
/* #16: when the actions row sits INSIDE the scrolling modal-body (e.g. the new-template form), make it a sticky
   footer so the save button is always reachable and the last field never looks "cut off". */
.modal-body .modal-actions {
    position: sticky;
    bottom: 0;
    margin: 1.25rem -1.5rem -1.25rem;
    padding: .85rem 1.5rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}

/* ============================================
   ADMIN DASHBOARD
   ============================================ */
.admin-topbar {
    grid-template-columns: 320px 1fr auto;
    background: linear-gradient(90deg, var(--brand-teal), var(--brand-teal-dark));
    height: 80px;
}

.admin-topbar .topbar-title-main { color: white; font-size: 1.4rem; }
.admin-topbar .topbar-title-sub { color: rgba(255,255,255,.7); }
.admin-topbar .topbar-logo { background: var(--bg-card); padding: 3px; width: 56px; height: 56px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }

.admin-badge {
    background: var(--accent-orange);
    color: white;
    padding: .2rem .55rem;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 700;
    margin-top: 2px;
    display: inline-block;
}

.admin-nav {
    display: flex;
    gap: .35rem;
    justify-self: start;
}

.admin-nav-item {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    padding: .55rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: .88rem;
    transition: all .15s;
}

.admin-nav-item:hover {
    background: rgba(255,255,255,.12);
    color: white;
}

.admin-nav-item.active {
    background: rgba(255,255,255,.18);
    color: white;
}

.admin-main {
    padding: 1.5rem 2rem;
    overflow-y: auto;
    height: calc(100vh - var(--topbar-h));
    background: var(--bg-app);
}

.admin-section {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

.admin-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* #2: robust balanced 2-col (minmax(0,..) prevents a wide child overflowing a track) */
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 860px) { .admin-section-grid { grid-template-columns: 1fr; } }   /* #2: stack only on narrow */

.admin-section-grid .admin-section {
    margin-bottom: 0;
}

.admin-h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--brand-teal-light);
}
/* #71/#72: centered dashboard card headings — icon stays inline next to the title, the line remains. */
.admin-h2.centered { text-align: center; }

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.big-stat {
    background: var(--bg-app);
    padding: 1.25rem;
    border-radius: 12px;
    text-align: center;
    border-top: 4px solid var(--brand-teal);
}

.big-stat-blue { border-top-color: var(--brand-primary); }
.big-stat-orange { border-top-color: var(--accent-orange); }
.big-stat-green { border-top-color: var(--success); }

.big-stat-num {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.big-stat-label {
    font-size: .85rem;
    color: var(--text-muted);
    margin-top: .35rem;
    font-weight: 600;
}

.admin-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.alert-card {
    padding: 1.25rem;
    border-radius: 12px;
    border-right: 4px solid;
    background: var(--bg-app);
}

.alert-card-red { border-right-color: var(--danger); background: #fef2f2; }
.alert-card-orange { border-right-color: var(--warning); background: #fffbeb; }
.alert-card-blue { border-right-color: var(--info); background: #eff6ff; }

.alert-num {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
}

.alert-card-red .alert-num { color: var(--danger); }
.alert-card-orange .alert-num { color: var(--warning); }
.alert-card-blue .alert-num { color: var(--info); }

.alert-label {
    font-weight: 700;
    margin: .35rem 0;
    color: var(--text-primary);
}

.alert-sub {
    font-size: .8rem;
    color: var(--text-secondary);
}

.alert-link {
    display: inline-block;
    margin-top: .65rem;
    color: var(--brand-teal);
    font-weight: 700;
    text-decoration: none;
    font-size: .85rem;
}

.alert-link:hover { color: var(--brand-teal-dark); }

.dept-bar {
    margin-bottom: 1rem;
}

.dept-bar-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.dept-name {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
    font-size: .9rem;
}

.dept-count-big {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.dept-bar-track {
    background: var(--bg-app);
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.dept-bar-fill {
    height: 100%;
    transition: width .4s ease;
    border-radius: 5px;
}

.template-summary { display: flex; flex-direction: column; gap: .5rem; }

.tmpl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .65rem .85rem;
    background: var(--bg-app);
    border-radius: 8px;
}

.tmpl-status {
    font-weight: 600;
    font-size: .9rem;
}

.tmpl-approved { color: var(--success); }
.tmpl-pending { color: var(--warning); }
.tmpl-draft { color: var(--text-muted); }
.tmpl-rejected { color: var(--danger); }

.tmpl-num { font-weight: 800; font-size: 1.2rem; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
}
/* #5: the agent-performance table grew to 10 columns — scroll it inside its card (never widen .admin-main),
   with the agent (first) column pinned so KPIs scroll under a visible name. RTL-safe. */
.agent-perf-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.agent-perf-table .admin-table { min-width: 900px; }
.agent-perf-table .admin-table th:first-child,
.agent-perf-table .admin-table td:first-child {
    position: sticky; inset-inline-start: 0; z-index: 1; background: var(--bg-card, #fff);
}
.agent-perf-table .admin-table th:first-child { background: var(--bg-app, #f4f5fb); }

.admin-table th {
    text-align: right;
    padding: .65rem .85rem;
    background: var(--bg-app);
    font-weight: 700;
    font-size: .85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

.admin-table td {
    padding: .75rem .85rem;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
}

.admin-table tr:hover td { background: var(--bg-hover); }

.agent-avatar-mini {
    display: inline-flex;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-teal);
    color: white;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .7rem;
    margin-left: .4rem;
    vertical-align: middle;
}

.badge-active, .badge-success {
    background: #d1fae5;
    color: #065f46;
    padding: .15rem .55rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 700;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
    padding: .15rem .55rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 700;
}

/* Templates page */
.meta-info-box {
    background: var(--brand-teal-light);
    border-right: 4px solid var(--brand-teal);
    padding: 1rem 1.25rem;
    border-radius: 8px;
}
.meta-info-box h3 { margin-bottom: .5rem; color: var(--brand-teal); }
.meta-info-box ol { margin-right: 1.5rem; margin-top: .5rem; }
.meta-info-box li { margin-bottom: .25rem; font-size: .9rem; }
.meta-info-box p { line-height: 1.6; }

.template-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: box-shadow .15s;
}
.template-card:hover { box-shadow: var(--shadow); }

.template-card-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}

.template-card h3 { font-size: 1.05rem; color: var(--text-primary); margin: .25rem 0; }
.template-meta { font-size: .8rem; color: var(--text-muted); text-align: left; }

.template-body {
    background: var(--bg-app);
    padding: .85rem 1rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    border-right: 3px solid var(--brand-teal);
}

.template-vars { margin-top: .75rem; font-size: .85rem; }

.var-chip {
    display: inline-block;
    background: var(--accent-orange-light);
    color: var(--accent-orange-dark);
    padding: .15rem .55rem;
    border-radius: 4px;
    margin: 0 .25rem;
    font-size: .8rem;
    font-weight: 600;
}

.template-actions { margin-top: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ============================================
   SIMULATOR (kept simple)
   ============================================ */
.simulator-page {
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.sim-info {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.phone-mockup {
    background: var(--brand-teal);
    border-radius: 28px;
    padding: 10px;
    box-shadow: var(--shadow-lg);
    height: 620px;
    display: flex;
    flex-direction: column;
}

.phone-header {
    background: var(--brand-teal);
    color: white;
    padding: .85rem 1rem;
    border-radius: 18px 18px 0 0;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.contact-avatar {
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.phone-chat {
    flex: 1;
    background: #ece5dd;
    padding: 1rem;
    overflow-y: auto;
}

.bubble {
    max-width: 80%;
    padding: .55rem .85rem;
    border-radius: 8px;
    margin-bottom: .5rem;
    font-size: .9rem;
    line-height: 1.4;
    box-shadow: var(--shadow-sm);
    white-space: pre-wrap;
}

.bubble-bot {
    background: var(--bg-card);
}

.bubble-customer {
    background: var(--accent-orange-light);
    border-right: 3px solid var(--accent-orange);
    margin-right: auto;
}

.phone-input {
    display: flex;
    gap: .5rem;
    padding: .75rem;
    background: #f0f2f5;
    border-radius: 0 0 18px 18px;
}

.phone-input input {
    flex: 1;
    padding: .6rem 1rem;
    border: none;
    border-radius: 22px;
    outline: none;
}

.phone-input button {
    width: 44px;
    height: 44px;
    background: var(--accent-orange);
    color: white;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    border: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .conv-view-body { grid-template-columns: 1fr; }
    .customer-panel { display: none; }
}

@media (max-width: 900px) {
    html { --sidebar-w: 200px; --conv-list-w: 280px; }
    .topbar-search { display: none; }
}

/* סבב 2: כפתור תפריט (עיצוב conv-agent-tag עבר לבלוק chip האחיד של חלק 3) */
.conv-menu-btn:hover { color:var(--brand-teal) !important; }

/* 5.1: וי/וי-וי — סימוני מסירה/קריאה */
.msg-tick { display: inline-flex; align-items: center; gap: 3px; direction: ltr; unicode-bidi: isolate; margin-right: .3rem; font-size: .85em; opacity: .85; vertical-align: middle; }
.msg-tick .tick-mark { letter-spacing: -3px; }
.msg-tick .tick-label { letter-spacing: normal; direction: rtl; unicode-bidi: isolate; }
.msg-tick-read { color: #34b7f1; opacity: 1; }

/* 5.2: באנר חלון 24 שעות */
.window-banner {
    margin: .4rem .6rem .55rem;
    padding: .55rem .8rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.4;
}
.window-warn {
    background: var(--accent-orange-light);
    color: var(--accent-orange-dark);
    border: 1px solid var(--accent-orange);
}
.window-closed {
    background: #fde8e8;
    color: #b91c1c;
    border: 1px solid #f5a9a9;
}

/* חלק 5: פאנל "פרטי הלקוח" מאוחד */
.cust-exist {
    display: inline-block;
    padding: .3rem .7rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    margin: .2rem 0 .6rem;
}
.cust-exist-yes { background: #dcfce7; color: #16a34a; }
.cust-exist-no { background: #fee2e2; color: #dc2626; }
.cust-exist-loading { background: var(--bg-app); color: var(--text-muted); }
.cust-src { font-size: .72rem; color: var(--text-muted); font-weight: 500; }
.cust-file {
    margin-top: .7rem;
    padding: .6rem .7rem;
    border-radius: 8px;
    background: var(--bg-app);
    border: 1px solid var(--border);
}
.cust-file-legal {
    background: #fde8e8;
    border: 1px solid #f5a9a9;
}
.cust-file-title {
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: .4rem;
    color: var(--text-primary);
}
.cust-file-row {
    display: flex;
    justify-content: space-between;
    padding: .2rem 0;
    font-size: .82rem;
}

/* עיגול "לא נקרא" על האווטר — מופיע רק בשיחה לא-נקראה, יורד אחרי קריאה */
.conv-unread-dot { background: var(--brand-accent) !important; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }

/* 0.3 team accordion */
.dept-group-head { width: 100%; }
.dept-group-chev { transition: transform .15s; display: inline-block; font-size: .7rem; color: var(--text-muted); }
.dept-group:not(.open) .dept-group-chev { transform: rotate(-90deg); }
.dept-group-body { margin: .1rem 0 .3rem; }
.agent-item-sub { padding-right: 1.5rem; font-size: .88rem; }
.agent-item-sub.active { background: var(--brand-teal-light, #e6f2f0); font-weight: 600; }

/* 0.3 inline dept accordion */
.team-chat-group { display:block; }
.team-dept-row { display:flex; align-items:center; gap:.4rem; cursor:pointer; width:100%; }
.team-chat-group:not(.open) .dept-group-chev { transform: rotate(-90deg); }
.dept-group-chev { font-size:.7rem; color:var(--text-muted); transition:transform .15s; }
.team-dept-openchat { margin-inline-start:auto; opacity:.55; cursor:pointer; font-size:.9rem; }
.team-dept-openchat:hover { opacity:1; }
.dept-agents-acc { margin:.1rem 0 .4rem; padding-inline-start:.6rem; }
.dept-agents-acc .agent-item-sub { padding-inline-start:1.2rem; font-size:.86rem; }
.dept-agents-acc .agent-item-sub.active { background:var(--brand-teal-light,#e6f2f0); font-weight:600; }

/* 2.1 inline group members bar */
.team-members-bar { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; padding:.5rem .8rem; background:var(--bg-app); border-bottom:1px solid var(--border); font-size:.82rem; }
.team-members-label { color:var(--text-muted); font-weight:600; margin-inline-end:.2rem; }
.team-member-chip { display:inline-flex; align-items:center; gap:.3rem; background:var(--bg-card); border:1px solid var(--border); border-radius:999px; padding:.15rem .5rem .15rem .25rem; }
.team-member-dot { width:20px; height:20px; border-radius:50%; color:#fff; font-size:.65rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.team-members-all { color:var(--text-secondary); font-style:italic; }

/* 3.1 my-agents list */
.my-agents-list { margin:.1rem 0 .3rem; padding-inline-start:1rem; }
.sidebar-subitem { display:flex; align-items:center; gap:.4rem; width:100%; background:none; border:none; cursor:pointer; padding:.3rem .6rem; border-radius:8px; font-size:.85rem; color:var(--text-secondary); }
.sidebar-subitem:hover { background:var(--bg-hover,#f0f0f0); }
.sidebar-subitem.active { background:var(--brand-teal-light,#e6f2f0); color:var(--brand-teal); font-weight:600; }
.sidebar-subitem .sidebar-label { flex:1; text-align:start; }
.sidebar-subitem .sidebar-count { color:var(--text-muted); font-size:.78rem; }

/* admin delete menu item */
.cm-item-danger { color: var(--danger, #e02424); }
.cm-item-danger:hover { background: #fde8e8; }

/* 0.1 stage chips */
.conv-stage-empty { background:transparent !important; color:var(--text-muted) !important; border:1px dashed var(--border); opacity:.7; }
.conv-stage-empty:hover { opacity:1; border-color:var(--brand-teal); color:var(--brand-teal) !important; }

/* 1.2 header assignees */
.conv-view-assignees { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.15rem; font-size:.78rem; }
.conv-head-dept { background:var(--bg-app); color:var(--text-secondary); border-radius:6px; padding:.05rem .4rem; }
.conv-head-agents { color:var(--brand-teal); font-weight:600; }

/* 2.4 batch select */
.conv-card.batch-selected { background: var(--brand-teal-light,#e6f2f0); box-shadow: inset 3px 0 0 var(--brand-teal,var(--brand-primary)); }
.batch-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3000; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18); display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem; }
.batch-bar .batch-count { font-weight: 700; margin-inline-end: .3rem; color: var(--brand-teal,var(--brand-primary)); }
.batch-bar button { border: none; background: var(--bg-app,#f0f0f0); border-radius: 8px; padding: .35rem .6rem; cursor: pointer; font-size: .85rem; }
.batch-bar button:hover { background: var(--border,#ddd); }
.batch-bar .batch-clear { color: var(--danger,#e02424); }

/* dm delete */
.dm-del{margin-inline-start:auto;color:var(--text-muted);opacity:.5;cursor:pointer;font-weight:700;padding:0 .3rem}
.dm-del:hover{opacity:1;color:var(--danger,#e02424)}
.team-chat-item:hover .dm-del{opacity:.8}


/* round6 fixes: nihul + members-inline + drag */
/* #7 enlarge ניהול block (first, top) */
.nihul-section { background: linear-gradient(180deg,#f7faf9,#fff); border:1px solid var(--border); border-radius:12px; padding:.6rem; margin-bottom:.6rem; }
.nihul-title { font-size:1.05rem !important; font-weight:800 !important; color:var(--brand-teal,var(--brand-primary)) !important; margin-bottom:.5rem !important; }
.nihul-link { font-size:1rem !important; padding:.5rem .6rem !important; border-radius:8px; display:block; }
.nihul-link:hover { background:var(--bg-app,#f0f0f0); }

/* #3 members inline in the group-chat header */
.team-members-inline { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.35rem; }
.team-members-inline .team-member-chip { display:inline-flex; align-items:center; gap:.3rem; background:var(--bg-card); border:1px solid var(--border); border-radius:999px; padding:.1rem .5rem .1rem .2rem; font-size:.8rem; cursor:pointer; }
.team-members-inline .team-member-chip:hover { border-color:var(--brand-teal,var(--brand-primary)); background:var(--brand-teal-light,#e6f2f0); }
.team-members-inline .team-member-dot { width:18px; height:18px; border-radius:50%; color:#fff; font-size:.6rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }

/* #6 accordion agent -> personal chat hint */
.dm-go { margin-inline-start:auto; opacity:.5; font-size:.85rem; }
.agent-item-sub:hover .dm-go { opacity:1; }

/* #8 drag reorder */
.sec-draggable { cursor:grab; }
.sec-dragging { opacity:.5; outline:2px dashed var(--brand-teal,var(--brand-primary)); }

/* drag handle */
.sec-drag-handle{cursor:grab;color:var(--text-muted);opacity:.35;margin-inline-end:.35rem;font-size:.9rem;user-select:none}
.sec-drag-handle:hover{opacity:.9}
.sec-drag-handle:active{cursor:grabbing}
.sidebar-section:hover .sec-drag-handle{opacity:.6}

/* reply feature */
.msg-reply-btn{cursor:pointer;opacity:0;margin-inline-start:.4rem;font-size:.85rem;color:var(--text-muted);transition:opacity .1s}
.msg-row:hover .msg-reply-btn{opacity:.6}
.msg-reply-btn:hover{opacity:1;color:var(--brand-teal,var(--brand-primary))}
/* כפתור העתקת הודעה (📋) — קבוע גלוי כמו הסמיילי (לא רק בריחוף) */
.msg-copy-btn{cursor:pointer;opacity:.55;margin-inline-start:.4rem;font-size:.82rem;color:var(--text-muted);transition:opacity .15s}
.msg-copy-btn:hover{opacity:1;color:var(--brand-teal,var(--brand-primary))}
.msg-row.msg-out:not(.msg-sender-bot) .msg-copy-btn{color:#54656f !important;opacity:.8}
.msg-row.msg-out:not(.msg-sender-bot) .msg-copy-btn:hover{color:#111b21 !important;opacity:1}
/* ציטוט תגובה לחיץ → קפיצה להודעה המקורית + הבהוב */
.msg-quote{cursor:pointer}
.msg-quote:hover{opacity:1}
@keyframes msgJumpFlash{0%{box-shadow:0 0 0 3px rgba(235,96,37,.75)}100%{box-shadow:0 0 0 0 rgba(235,96,37,0)}}
.msg-jump-flash .msg-bubble{animation:msgJumpFlash 1.6s ease-out}
.reply-banner{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:var(--bg-app,#f0f0f0);border-inline-start:3px solid var(--brand-teal,var(--brand-primary));border-radius:8px;padding:.4rem .6rem;margin-bottom:.4rem}
.reply-banner-body{display:flex;flex-direction:column;overflow:hidden}
.reply-banner-who{font-weight:700;font-size:.78rem;color:var(--brand-teal,var(--brand-primary))}
.reply-banner-snip{font-size:.8rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.reply-banner-x{cursor:pointer;color:var(--text-muted);font-weight:700;padding:0 .3rem}
.reply-banner-x:hover{color:var(--danger,#e02424)}
/* אזור גרירה-ושחרור לקובץ (drag & drop) — הדגשה + רמז "שחרר כאן" */
.dropzone{position:relative}
.dropzone-active{outline:2px dashed var(--brand-teal,var(--brand-dark));outline-offset:-4px;background:rgba(34,79,85,.06)}
.dropzone-active::after{content:attr(data-drophint);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:.9rem;color:var(--brand-teal,var(--brand-dark));background:rgba(255,255,255,.82);border-radius:10px;pointer-events:none;z-index:20}

/* day separator */
.day-sep{display:flex;align-items:center;justify-content:center;margin:.8rem 0}
.day-sep span{background:var(--bg-app,#eceff1);color:var(--text-secondary);font-size:.75rem;font-weight:600;padding:.2rem .8rem;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.06)}

.panel-toggle-btn.notif-off{opacity:.45;}
#notifBellBtn{font-size:1.05rem;}

.msg-del-btn{cursor:pointer;opacity:0;margin-inline-start:.35rem;font-size:.82rem;color:var(--text-muted);transition:opacity .1s}
.msg-row:hover .msg-del-btn{opacity:.55}
.msg-del-btn:hover{opacity:1;color:#E02424}

.team-msg .msg-del-btn{opacity:.3}
.team-msg:hover .msg-del-btn{opacity:.7}
.team-msg .msg-del-btn:hover{opacity:1;color:#E02424}

.msg-quote{display:block;border-inline-start:3px solid var(--brand-orange,var(--brand-accent));background:rgba(0,0,0,.05);border-radius:6px;padding:.3rem .5rem;margin-bottom:.35rem;font-size:.8rem;opacity:.85}
.msg-quote-who{display:block;font-weight:700;color:var(--brand-teal,var(--brand-primary));font-size:.72rem;margin-bottom:.1rem}
.msg-quote-out{border-inline-start-color:var(--brand-teal,var(--brand-primary))}
.msg-quote-text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.msg-tick-failed{color:#E02424;font-weight:600}
/* carryover: visible Hebrew failure reason under a failed outbound message */
.msg-fail-reason{color:#b91c1c;font-size:.72rem;margin-top:.15rem;text-align:end;opacity:.92;line-height:1.35}
/* carryover: internal agent typing indicator (never shown to the customer) */
.typing-indicator{font-size:.8rem;color:var(--brand-primary,#2563eb);padding:.15rem .6rem;font-style:italic;font-weight:600}
/* #45-51: inline customer edit-mode inputs */
.cust-edit-inp{width:100%;padding:.25rem .4rem;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:.85rem;box-sizing:border-box;background:var(--bg-card);color:var(--text-primary,#111)}
/* #9-11: AI-answer flag button + reason modal */
.msg-flag-btn{cursor:pointer;opacity:.5;font-size:.78rem;margin-inline-start:.2rem}
.msg-flag-btn:hover{opacity:1}
.aiflag-bg{position:fixed;inset:0;background:rgba(28,25,23,.45);display:flex;align-items:center;justify-content:center;z-index:5000;padding:1rem}
.aiflag-modal{background:var(--bg-card);border-radius:14px;max-width:420px;width:100%;padding:1.2rem;box-shadow:0 20px 60px rgba(0,0,0,.3)}

/* נעיצת הודעות (pin) */
.msg-pin-btn{cursor:pointer;opacity:0;margin-inline-start:.35rem;font-size:.8rem;filter:grayscale(1);transition:opacity .12s,filter .12s}
.msg-row:hover .msg-pin-btn{opacity:.5}
.msg-pin-btn:hover{opacity:1;filter:grayscale(0)}
.msg-pin-btn.is-pinned{opacity:1;filter:grayscale(0)}
.msg-pinned .msg-bubble{box-shadow:0 0 0 2px rgba(37,99,235,.25);}
.msg-pin-flag{font-size:.7rem;margin-inline-end:.25rem;vertical-align:middle;opacity:.85}
/* הבר של ההודעות הנעוצות בראש השיחה */
.pinned-bar{display:flex;flex-direction:column;gap:.25rem;padding:.4rem .7rem;background:var(--bg-card);border-bottom:1px solid var(--border,#e5e7eb)}
.pinned-item{display:flex;align-items:center;gap:.45rem;background:var(--bg-app,#f5f6f8);border-inline-start:3px solid var(--brand-primary,#2563eb);border-radius:8px;padding:.3rem .55rem;cursor:pointer;font-size:.82rem}
.pinned-item:hover{background:#eef2f7}
.pinned-ico{flex-shrink:0}
.pinned-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary,#4a5568)}
.pinned-unpin{flex-shrink:0;color:var(--text-muted,#94a3b8);font-weight:700;padding:0 .25rem;cursor:pointer}
.pinned-unpin:hover{color:var(--danger,#e02424)}

/* כפתורי השב/מחק על בועה ירוקה (יוצאת) — אפור כהה כמו וואטסאפ, כדי שלא ייבלעו */
.msg-row.msg-out:not(.msg-sender-bot) .msg-reply-btn,
.msg-row.msg-out:not(.msg-sender-bot) .msg-del-btn{color:#54656f !important}
.msg-row.msg-out:not(.msg-sender-bot):hover .msg-reply-btn,
.msg-row.msg-out:not(.msg-sender-bot):hover .msg-del-btn{opacity:.95}
.msg-row.msg-out:not(.msg-sender-bot) .msg-reply-btn:hover,
.msg-row.msg-out:not(.msg-sender-bot) .msg-del-btn:hover{color:#111b21 !important;opacity:1}

/* ===================================================================== */
/* Unified fixed top navigation (_topnav.html) — clean fintech style      */
/* (interim direction: Financy-inspired — light, rounded, pill nav)       */
/* ===================================================================== */
/* ===== Nexum fixed RIGHT sidebar (was a top nav) — premium minimal rail ===== */
/* (--mainnav-h / --sidebar-w now live in the single root block at the top) */
.mainnav{
  position:fixed; inset-block:0; inset-inline-end:0; z-index:1000;
  width:var(--sidebar-w); height:100vh; display:flex; flex-direction:column; align-items:stretch;
  gap:.5rem; padding:1.1rem .8rem; background:var(--bg-card); color:var(--text,#1f2430);
  border-inline-start:1px solid rgba(28,25,23,.06); box-shadow:-1px 0 3px rgba(28,25,23,.04);
  overflow-y:auto; overflow-x:hidden;
}
.mainnav-brand{ justify-self:auto; padding:.2rem .5rem .7rem; order:-2; }
.mainnav-end{ grid-column:auto; justify-self:auto; margin-top:0; order:-1; display:flex; flex-direction:column; align-items:stretch; gap:.5rem; padding-top:0; }   /* #8: no divider line above the user/bell group */
/* light app canvas — content clears the right sidebar (RTL logical: end = right) */
body.has-mainnav{ background:var(--bg-app,#f4f5fb); padding-inline-end:var(--sidebar-w); }
/* scroll pages: allow document scroll (override the global html,body overflow:hidden) */
html:has(body.nav-scroll), body.nav-scroll{ height:auto; overflow:auto; }
.mainnav-brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; flex:0 0 auto; }
.mainnav-logo{ width:34px; height:34px; border-radius:10px; object-fit:cover; }
.mainnav-logo-fallback{ width:34px; height:34px; border-radius:10px; background:var(--brand-primary,#2563eb); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; }
.mainnav-name{ font-weight:800; font-size:1.05rem; white-space:nowrap; color:var(--brand-dark,#1C1917); }
/* centered segmented pill group (grid col 2 = auto, centered by the two equal 1fr rails; no margin:auto needed) */
.mainnav-links{ display:flex; flex-direction:column; align-items:stretch; gap:.15rem; background:transparent; padding:.2rem 0; border-radius:0; }
/* #10/#17: collapsible accordion groups (CRM / WhatsApp). The PARENT is a real link to its main screen
   (WhatsApp->inbox, CRM->contacts); a side chevron button expands/collapses the sub-tools below it. */
.nav-acc{ display:flex; flex-direction:column; }
.nav-acc-head-row{ display:flex; align-items:stretch; gap:2px; }
.nav-acc-head-row .nav-acc-head{ flex:1 1 auto; min-width:0; }
.nav-acc-head .nav-acc-label{ flex:1 1 auto; }
.nav-acc-chev-btn{ flex:0 0 auto; width:30px; display:flex; align-items:center; justify-content:center; background:none;
  border:none; cursor:pointer; color:var(--text-muted,#5b6472); border-radius:10px; padding:0; font-family:inherit; }
.nav-acc-chev-btn:hover{ background:rgba(28,25,23,.06); color:var(--brand-dark,#1C1917); }
.nav-acc-chev{ font-size:.62rem; opacity:.6; transition:transform .22s cubic-bezier(.22,1,.36,1); display:inline-block; }
.nav-acc.open > .nav-acc-head-row .nav-acc-chev{ transform:rotate(180deg); }
/* an open (but not current-page) parent gets a subtle tint — the SOLID .active fill is reserved for the real current page */
.nav-acc.open > .nav-acc-head-row .nav-acc-head:not(.active){ color:var(--brand-dark,#1C1917); font-weight:700; }
.nav-acc-body{ display:none; flex-direction:column; gap:2px; margin:2px 0 .25rem; }
.nav-acc.open > .nav-acc-body{ display:flex; }
.mainnav-link.nav-sub{ font-size:.9rem; font-weight:600; padding-block:.42rem; padding-inline-start:1.5rem; color:var(--text-muted,#5b6472); position:relative; }
.mainnav-link.nav-sub::before{ content:''; position:absolute; inset-inline-start:.72rem; top:50%; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.38; transform:translateY(-50%); }
.mainnav-link.nav-sub:hover{ color:var(--brand-dark,#1C1917); }
.mainnav-link.nav-sub.active{ background:color-mix(in srgb,var(--brand-primary) 9%,white); color:var(--brand-dark); font-weight:800; }
.mainnav-link.nav-sub.active::before{ opacity:1; background:var(--brand-primary,#2563eb); }
/* overdue-reminders count mirrored onto the collapsed CRM parent so it's visible off the CRM pages (#2 verify) */
.nav-acc-pbadge{ display:none; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#e02424; color:#fff;
  font-size:.68rem; font-weight:800; line-height:17px; text-align:center; box-sizing:border-box; margin-inline-start:.35rem; }
.mainnav-link{
  display:flex; align-items:center; gap:.7rem; padding:.62rem .8rem; border-radius:12px;
  color:var(--text-secondary,#5b6472); text-decoration:none; font-weight:600; font-size:.95rem; white-space:nowrap;
  transition:all .15s;
}
.mainnav-link:hover{ color:var(--brand-dark,#1C1917); background:rgba(28,25,23,.05); }
.mainnav-link.active{ background:var(--brand-primary,#2563eb); color:#fff; box-shadow:0 6px 16px -4px color-mix(in srgb, var(--brand-primary) 55%, transparent); }
.mainnav .nav3d{ width:20px; height:20px; object-fit:contain; flex:0 0 auto; }
.mainnav-user{ flex:0 0 auto; }
/* #8: within the top end-group the username comes FIRST (under the logo), the bell sits BELOW it */
.mainnav-end .mainnav-user{ order:1; }
.mainnav-end .mainnav-actions{ order:2; }
/* native <details> dropdown — no JS */
.usermenu{ position:relative; }
.usermenu-chip{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem;
  padding:.3rem .5rem; border-radius:999px; transition:background .15s;
}
.usermenu-chip::-webkit-details-marker{ display:none; }
.usermenu-chip:hover{ background:rgba(28,25,23,.05); }
.mainnav-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--brand-primary,#2563eb); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; flex:0 0 auto;
}
.usermenu-meta{ display:flex; flex-direction:column; line-height:1.15; }
.usermenu-name{ font-weight:700; font-size:.88rem; color:var(--brand-dark,#1C1917); }
.usermenu-role{ font-size:.72rem; color:var(--text-muted,#8a94a6); }
.usermenu-chev{ opacity:.5; font-size:.7rem; }
.usermenu-drop{
  position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0; min-width:210px;
  background:var(--bg-card); color:var(--text,#1f2430); border:1px solid rgba(28,25,23,.08); border-radius:14px;
  box-shadow:0 12px 40px rgba(28,25,23,.14); padding:.4rem; z-index:1100;
}
.usermenu-item{ display:block; padding:.55rem .7rem; border-radius:10px; text-decoration:none; color:inherit; font-weight:600; font-size:.9rem; }
.usermenu-item:hover{ background:var(--bg-app,#f4f5fb); }
.usermenu-logout{ color:#e02424; }
@media (max-width:640px){
  .mainnav{ padding:0 .75rem; gap:.5rem; }
  .mainnav-name{ display:none; }
  .mainnav-link{ padding:.5rem .7rem; }
  .usermenu-meta{ display:none; }
}

/* #5: the inbox .app-topbar action row was removed — its buttons moved into the mainnav / user menu /
   conversation-list header. The layout now sits directly under the mainnav, reclaiming the old --topbar-h. */
body.has-mainnav .app-layout{ height: calc(100vh - var(--banner-h)); }

/* #6/#7: mainnav action group (alerts bell + broadcast), between the centered links and the user menu */
.mainnav-actions{ display:flex; align-items:center; gap:.4rem; flex:0 0 auto; }
.mainnav-iconbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  height:38px; min-width:38px; padding:0 .55rem; border:1px solid rgba(28,25,23,.10);
  border-radius:999px; background:var(--bg-card); color:var(--text-muted,#5b6472); cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.9rem; transition:all .15s;
}
.mainnav-iconbtn:hover{ color:var(--brand-dark,#1C1917); border-color:rgba(28,25,23,.18); background:rgba(28,25,23,.03); }
.mainnav-iconbtn .ico{ width:18px; height:18px; }
.mainnav-broadcast{ color:var(--brand-primary,#2563eb); border-color:rgba(37,99,235,.28); }
.mainnav-broadcast:hover{ background:rgba(37,99,235,.08); color:var(--brand-primary,#2563eb); border-color:rgba(37,99,235,.45); }
.mainnav-broadcast-label{ font-weight:700; }
@media (max-width:900px){ .mainnav-broadcast-label{ display:none; } }   /* collapse broadcast to an icon on tight widths */

/* #8: sound-preference row inside the user menu (a static label + the injected 🔊 control) */
.usermenu-sound{ cursor:default; }
.usermenu-sound:hover{ background:transparent; }
.usermenu-sound-label{ display:inline-flex; align-items:center; gap:.55rem; }

/* secondary sub-nav (admin/settings sections) — sticky under the mainnav */
.subnav{ position:sticky; inset-block-start:0; z-index:900; background:var(--bg-card);
  border-bottom:1px solid rgba(28,25,23,.06); padding:.55rem 1.25rem; }
.subnav-inner{ display:flex; gap:.15rem; align-items:center; background:var(--bg-app,#f1f2f8);
  padding:.25rem; border-radius:999px; width:max-content; max-width:100%; overflow-x:auto;
  margin-inline:auto; }   /* center the pill under the centered main nav (logical prop = RTL-safe) */
.subnav-link{ display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .85rem; border-radius:999px;
  color:var(--text-muted,#5b6472); text-decoration:none; font-weight:600; font-size:.88rem; white-space:nowrap; transition:all .15s; }
.subnav-link:hover{ color:var(--brand-dark,#1C1917); background:rgba(28,25,23,.05); }
.subnav-link.active{ background:var(--bg-card); color:var(--brand-primary,#2563eb); box-shadow:0 1px 4px rgba(28,25,23,.14); }
/* admin pages become normal scroll pages under the fixed nav (no 100vh math) */
body.has-mainnav .admin-main{ height:auto; overflow:visible; }
.page-actions{ display:flex; justify-content:flex-end; gap:.5rem; padding:1rem 2rem 0; }

/* ===== sidebar layout extras ===== */
.mainnav-user{ flex:0 0 auto; }
.mainnav-user .usermenu, .mainnav-user .usermenu-chip{ width:100%; }
.mainnav-user .usermenu-chip{ padding:.45rem .6rem; border-radius:12px; }
.mainnav-user .usermenu-drop{ inset-block-start:calc(100% + 8px); inset-block-end:auto; inset-inline-start:0; inset-inline-end:0; }   /* #11: user chip is at the TOP now → open the menu DOWNWARD so it isn't cut off */
.mainnav-actions{ justify-content:center; flex-wrap:wrap; }   /* #8 (round 3): bell centered under the user, not right */
/* mobile: collapse the right sidebar back to a top bar so nothing is cut off */
@media (max-width:768px){
  .mainnav{ position:sticky; inset:0 auto auto 0; width:auto; height:auto; flex-direction:row; align-items:center;
    gap:.5rem; padding:.5rem .8rem; border-inline-start:none; border-bottom:1px solid rgba(28,25,23,.06); overflow:visible; }
  .mainnav-links{ flex-direction:row; flex-wrap:wrap; padding:0; }
  .mainnav-link{ padding:.45rem .6rem; font-size:.85rem; }
  .mainnav-link span, .mainnav-name{ display:none; }
  .mainnav-brand{ padding:.2rem; }
  .mainnav-end{ margin-top:0; margin-inline-start:auto; flex-direction:row; border-top:none; padding-top:0; }
  body.has-mainnav{ padding-inline-end:0; }
}

/* unified inline-SVG icons (_icons.html) */
.ico{ width:18px; height:18px; flex:0 0 auto; vertical-align:-.2em; }
.mainnav-link .ico, .subnav-link .ico{ opacity:.9; }
.mainnav-link.active .ico{ opacity:1; }
.usermenu-item{ display:flex; align-items:center; gap:.55rem; }
.usermenu-item .ico{ width:16px; height:16px; opacity:.7; }
/* sidebar (inbox) icons */
.sidebar-icon{ display:inline-flex; align-items:center; justify-content:center; }
.sidebar-icon .ico{ width:18px; height:18px; }
.sidebar-link .ico, .nihul-title .ico{ width:17px; height:17px; vertical-align:-.22em; }
.admin-h2 .ico{ width:1.05em; height:1.05em; vertical-align:-.15em; opacity:.7; }

/* ---- premium depth + reusable page headers + width guard (--shadow-card in root) ---- */
.admin-section, .set-card{ box-shadow:var(--shadow-card); border:1px solid var(--border); border-radius:var(--radius-lg); }
.big-stat, .alert-card, .step{ box-shadow:var(--shadow-card); }
/* keep content readable — never stretched across the whole screen */
body.has-mainnav .admin-main{ max-width:1180px; margin-inline:auto; }
/* reusable premium page header */
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.3rem; }
.page-title{ font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.02em; color:var(--text-primary); margin:0; }
.page-sub{ color:var(--text-muted); font-size:var(--fs-sm); margin:.25rem 0 0; }


/* =========================================================================
   Design-system polish — consistent focus / inputs / buttons (tokens-based)
   Additive layer: applies the token system globally without redesigning.
   ========================================================================= */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible) { outline: none; }
button, .btn, .btn-primary-lg, .btn-secondary, .btn-pill, .qr-toggle { transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, opacity .12s ease, transform .04s ease; }
button:not(:disabled), .btn:not(:disabled) { cursor: pointer; }
button:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }
input, select, textarea { font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
/* thin, quiet scrollbars for a more polished feel */
* { scrollbar-width: thin; scrollbar-color: #cbd2da transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #cbd2da; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #aab3bd; }

/* Notifications-permission prompt — subtle dismissible card (bottom-start), not an error bar */
.notif-prompt{position:fixed;bottom:16px;inset-inline-start:16px;z-index:9000;display:flex;align-items:center;gap:.6rem;max-width:430px;background:var(--bg-card,#fff);color:var(--text-secondary);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:.55rem .75rem;font-size:.84rem;font-weight:var(--fw-semibold,600);animation:npIn .25s ease}
@keyframes npIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.notif-prompt .np-ico{font-size:1.05rem;flex-shrink:0}
.notif-prompt .np-text{flex:1;line-height:1.35}
.notif-prompt .np-cta{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:.35rem .85rem;font-weight:700;font-size:.82rem;cursor:pointer;flex-shrink:0}
.notif-prompt .np-cta:hover{filter:brightness(1.06)}
.notif-prompt .np-x{background:transparent;border:none;color:var(--text-muted);font-size:.95rem;line-height:1;cursor:pointer;padding:.15rem .35rem;flex-shrink:0;border-radius:6px}
.notif-prompt .np-x:hover{color:var(--text-primary);background:var(--bg-hover)}

/* ============================================================
   Reusable state components (loading / empty / error) — #10
   Used across Contacts and other data views for consistency.
   ============================================================ */
.c-spin{
    display:inline-block;width:14px;height:14px;
    border:2px solid var(--border);border-top-color:var(--primary);
    border-radius:50%;animation:c-spin .7s linear infinite;vertical-align:-2px;
}
@keyframes c-spin{to{transform:rotate(360deg)}}
.state-msg{
    text-align:center;color:var(--text-muted);
    padding:2.4rem 1rem;line-height:1.5;
}
.state-msg .state-ico{font-size:1.7rem;display:block;margin-bottom:.4rem;opacity:.85}
.state-msg .state-link{color:var(--primary);font-weight:700;cursor:pointer;text-decoration:none}
.state-msg .state-link:hover{text-decoration:underline}
.state-msg.state-error{color:var(--danger)}

/* ============================================================
   Broadcast flow clarity (#7) — numbered steps + note banner
   ============================================================ */
.bc-step{
    display:inline-flex;align-items:center;justify-content:center;
    width:19px;height:19px;border-radius:50%;
    background:var(--primary);color:#fff;font-size:.72rem;font-weight:700;
    margin-inline-end:.4rem;vertical-align:1px;
}
.bc-note{
    /* guidance, not a warning — a gentle info box in the brand palette (#8) */
    background:#f0f9f7;
    border:1px solid #cfe8e2;
    color:#20504a;border-radius:var(--radius,10px);
    padding:.6rem .8rem;font-size:.85rem;line-height:1.5;margin-bottom:.75rem;
}

/* #11/#12: campaign modal — two columns (steps | live WhatsApp phone preview) */
.bc-modal{ max-width:900px; width:min(900px,95vw); }
.bc-body{ display:flex; gap:1.5rem; align-items:flex-start; }
.bc-col-form{ flex:1 1 0; min-width:0; }
.bc-col-preview{ flex:0 0 288px; display:flex; flex-direction:column; align-items:center; gap:.55rem; }
.bc-preview-title{ font-size:.78rem; font-weight:700; color:var(--text-muted,#8a94a6); text-align:center; }
/* #14: reuse .phone-mockup but shrink to iPhone proportions and FIT inside the modal (never crop).
   overflow:hidden clips the beige chat to the rounded frame (kills the chopped-bottom look); the height
   cap + the chat's own overflow-y:auto scroll a long message instead of growing/cropping the frame. */
.bc-phone{ width:264px; height:min(540px, calc(90vh - 170px)); padding:8px; border-radius:30px; overflow:hidden; }
.bc-phone .phone-header{ padding:.6rem .75rem; }
.bc-phone .phone-chat{ padding:1rem .75rem; display:flex; flex-direction:column; overflow-y:auto; }
/* #6/#14/#35: the business SENDS the campaign → outgoing GREEN WhatsApp bubble, exactly like the customer
   receives it. Hugs its content (fit-content, small max-width), compact WhatsApp padding + soft shadow, and
   the time (✓✓ HH:MM) sits INLINE right after the text at the bottom-end — not on its own big line. */
.bc-bubble{ position:relative; background:#d9fdd3; color:#111b21; border:1px solid #c5efbb;
    border-radius:7px 7px 1px 7px; align-self:flex-end; max-width:80%; width:fit-content;
    padding:.32rem .5rem .3rem; box-shadow:0 1px .5px rgba(11,20,26,.13); font-size:.84rem; line-height:1.32; }
.bc-phone-text{ display:inline; white-space:pre-wrap; word-break:break-word; }
.bc-bubble-time{ display:inline; white-space:nowrap; font-size:.6rem; color:#667781; margin-inline-start:.45rem; vertical-align:bottom; }
.bc-phone-media{
    display:flex; align-items:center; gap:.4rem;
    background:rgba(0,0,0,.05); border-radius:6px; padding:.5rem .6rem; margin-bottom:.4rem;
    font-size:.82rem; color:#3a3a3a; font-weight:600;
}
.bc-phone-empty{ color:#5b6b62; font-size:.82rem; text-align:center; margin:auto 0; opacity:.85; }
/* #23: small amber 'test mode' badge in the header — display-only, no logic */
.bc-testbadge{
    display:inline-flex; align-items:center; gap:.3rem;
    background:#fff4e0; color:#9a5a00; border:1px solid #f4d59a;
    border-radius:999px; padding:.16rem .6rem; font-size:.74rem; font-weight:800;
    margin-inline-start:.6rem;
}
@media (max-width:760px){
    .bc-body{ flex-direction:column; }
    .bc-col-preview{ flex-basis:auto; align-self:center; }
}

/* ============================================================
   Notification-sound control — icon-only trigger + menu
   (separate from the alerts bell; 🔊 on / 🔇 off)
   ============================================================ */
#notifModeBtn{font-size:1.05rem;line-height:1;border:none;cursor:pointer}
#notifModeBtn.notif-off{opacity:.5}
.notif-menu{
    position:absolute;top:130%;inset-inline-end:0;min-width:200px;
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius,10px);
    box-shadow:var(--shadow-lg,0 12px 40px rgba(28,25,23,.18));
    z-index:3000;padding:.35rem;flex-direction:column;gap:.1rem;
}
.notif-menu-head{
    font-size:.7rem;font-weight:700;color:var(--text-muted);
    padding:.3rem .55rem .4rem;letter-spacing:.02em;
}
.notif-opt{
    font-family:inherit;font-size:.84rem;text-align:start;
    padding:.42rem .55rem;border:none;background:none;border-radius:8px;
    cursor:pointer;color:var(--text-primary);white-space:nowrap;
    display:flex;align-items:center;gap:.3rem;transition:background .12s;
}
.notif-opt:hover{background:var(--bg-app)}
.notif-opt.active{background:var(--info-light,#eff6ff);color:var(--primary);font-weight:700}
.notif-opt.active::after{content:'✓';margin-inline-start:auto;font-weight:700}

/* CRM Polish #3: @mentions — subtle (NOT glowing blue). Muted teal chip + quiet picker rows. */
.note-mention{color:var(--brand-teal,#0f766e);background:rgba(15,118,110,.08);border-radius:4px;padding:0 3px;font-weight:600}
.mention-opt:hover,.mention-opt.active{background:var(--bg-app,#f4f5fb)}

/* CRM Polish #4: customer business timeline — clean, no technical noise */
.customer-timeline{display:flex;flex-direction:column;gap:.1rem;max-height:280px;overflow-y:auto}
.tl-item{display:flex;gap:.55rem;align-items:flex-start;padding:.4rem 0;border-bottom:1px solid var(--border,#eef0f3)}
.tl-item:last-child{border-bottom:none}
.tl-icon{font-size:1rem;line-height:1.2;flex-shrink:0}
.tl-body{min-width:0;flex:1}
.tl-text{font-size:.85rem;color:var(--text-primary,#111)}
.tl-who{color:var(--text-muted);font-size:.8rem}
.tl-when{font-size:.72rem;color:var(--text-muted);margin-top:.1rem}

/* ============================================
   Direction A "Crisp Light" skin layer (27/08/2026)
   Overrides on top of the existing components — the chat-bubble squircle
   motif, indigo depth, WhatsApp-green actions, subtle grid backdrop.
   ============================================ */

body {
    background-image:
        linear-gradient(rgba(28,25,23,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28,25,23,.025) 1px, transparent 1px);
    background-size: 56px 56px;
}

/* --- top navigation: frosted, pill links, brand mark --- */
.mainnav {
    background: rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--brand-dark) 5%, transparent);
}
.mainnav::after {
    content: none;   /* 01/09 (Orel): the full-height gradient stripe is gone — clean hairline only */
    opacity: .9;
    pointer-events: none;
}
.mainnav { position: relative; }
.mainnav-logo, .mainnav-logo-fallback {
    border-radius: var(--radius-bubble) !important;
}
.mainnav-logo-fallback {
    background: var(--brand-grad);
    color: #fff;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--brand-primary) 35%, transparent);
}
.mainnav-name { font-weight: 900; letter-spacing: -.01em; }
.mainnav-link {
    border-radius: 999px;
    font-weight: 600;
    transition: background .2s, color .2s;
}
.mainnav-link.active {
    background: color-mix(in srgb, var(--brand-primary) 9%, white);
    color: var(--brand-dark);
    font-weight: 800;
}
.mainnav-avatar {
    border-radius: var(--radius-bubble) !important;
    background: var(--brand-grad);
    font-weight: 900;
}
.usermenu-chip { border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); }
.usermenu-drop { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }

/* --- avatars everywhere: the bubble-squircle motif --- */
.conv-avatar, .msg-avatar, .login-logo {
    border-radius: var(--radius-bubble) !important;
}

/* --- conversation list --- */
.conv-card { border-radius: var(--radius); transition: background .15s, transform .15s; }
.conv-card.selected { background: color-mix(in srgb, var(--brand-primary) 7%, white); }
.conv-card.selected::before {
    background: linear-gradient(180deg, var(--brand-dark), var(--brand-primary), var(--wa-green));
    width: 3px;
    border-radius: 3px;
}
.conv-count-badge {
    background: var(--wa-green);
    color: #fff;
    font-weight: 900;
    border-radius: 999px;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--wa-green) 35%, transparent);
}

/* --- buttons: canonical 3-level system lives near the top (line ~240). The old
   gradient !important override was removed 01/09 — primary is solid indigo now. --- */
.login-btn { background: var(--brand-primary); color: #fff; border-radius: var(--radius-sm); font-weight: 700; }
.login-btn:hover { background: color-mix(in srgb, var(--brand-primary) 88%, black); }

/* --- message bubbles --- */
.msg-bubble { border-radius: 14px; font-weight: 500; }
.msg-row.msg-sender-customer .msg-bubble {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-start-start-radius: 4px;
}
.msg-row.msg-out:not(.msg-sender-bot) .msg-bubble {
    background: var(--wa-green-soft);
    border: 1px solid color-mix(in srgb, var(--wa-green) 25%, white);
    border-start-end-radius: 4px;
}
.msg-row.msg-sender-bot .msg-bubble {
    border-inline-start: 2.5px solid color-mix(in srgb, var(--brand-primary) 55%, white);
    border-start-end-radius: 4px;
}
.msg-avatar-bot { background: var(--brand-grad); }
.msg-avatar-agent { background: linear-gradient(135deg, #F59E0B, #EF4444); }

/* --- inputs: indigo focus ring --- */
input:focus, textarea:focus, select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent) !important;
}

/* --- icons: consistent thin stroke --- */
.ico { stroke-width: 1.8; }

/* --- badges --- */
.badge-active, .badge-success { background: var(--wa-green-soft); color: #12805C; }

/* --- cards / drops get the soft indigo depth --- */
.conv-list-header h2 { font-weight: 900; letter-spacing: -.015em; }

/* --- scrollbars --- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================
   Sidenav layer (27/08/2026, Orel): the approved Direction A reference has a
   FIXED SIDE navigation (like the Hamovil club system) — this converts the
   mainnav into a fixed sidebar on desktop, with 3D nav icons, and adds the
   3D depth touches + designed modals. Uniform across every screen (single
   _topnav.html include).
   ============================================ */

.nav3d { width: 26px; height: 26px; object-fit: contain;
  filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--brand-dark) 28%, transparent)); }
.mainnav-link .ico { width: 18px; height: 18px; }

@media (min-width: 901px) {
  html { --sidenav-w: 232px; }

  .mainnav {
    position: fixed; inset-block: 0; inset-inline-start: 0;
    height: auto; width: var(--sidenav-w);
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    padding: 18px 14px;
    border-bottom: none;
    border-inline-end: 1px solid var(--border);
    box-shadow: 0 0 34px color-mix(in srgb, var(--brand-dark) 7%, transparent);
  }
  /* signature gradient strip moves to the content edge of the sidebar */
  .mainnav::after { content: none; }
  .mainnav-brand { justify-self: unset; display: flex; align-items: center; gap: 10px;
    padding: 2px 6px 12px; margin-bottom: 4px; }   /* #8: no divider line under the logo */
  .mainnav-logo, .mainnav-logo-fallback { width: 38px; height: 38px; }
  .mainnav-name { font-size: 1.02rem; font-weight: 900; white-space: normal; line-height: 1.15; }

  .mainnav-links { flex-direction: column; align-items: stretch; gap: 3px;
    background: none; padding: 0; border-radius: 0; }
  .mainnav-link { padding: 9px 12px; border-radius: 12px; font-size: .95rem; gap: .65rem;
    position: relative; }
  .mainnav-link.active {
    background: color-mix(in srgb, var(--brand-primary) 9%, white);
    color: var(--brand-dark); box-shadow: none; font-weight: 800;
  }
  .mainnav-link.active::before {
    content: ''; position: absolute; inset-inline-start: -14px; top: 22%; bottom: 22%;
    width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, var(--brand-dark), var(--brand-primary), var(--wa-green));
  }
  .mainnav-link.active .nav3d { filter: drop-shadow(0 4px 9px color-mix(in srgb, var(--brand-primary) 45%, transparent)); transform: scale(1.08); }
  .mainnav-link .nav3d { transition: transform .25s cubic-bezier(.22,1,.36,1), filter .25s; }
  .mainnav-link:hover .nav3d { transform: translateY(-1px) scale(1.06); }

  .mainnav-actions { flex-direction: row; justify-content: center; gap: .5rem;
    padding-top: 0; }   /* #8 (round 3): bell centered under the user; no divider line above it */
  /* #8: user + bell sit at the TOP under the logo (order:-1), user FIRST then bell below it */
  .mainnav-end { grid-column: unset; justify-self: unset; margin-top: 0;
    flex-direction: column; align-items: stretch; gap: .4rem; }
  .mainnav-end .mainnav-user { order: 1; }
  .mainnav-end .mainnav-actions { order: 2; }
  .usermenu-chip { border: 1px solid var(--border); background: var(--bg-card); padding: .4rem .6rem; }
  .usermenu-drop { inset-block-start: calc(100% + 8px); inset-block-end: auto; }   /* #11: open downward (chip is at the top) */

  body.has-mainnav { padding-inline-start: var(--sidenav-w); }
  body.has-mainnav .app-layout { height: calc(100vh - var(--banner-h, 0px)); }
  .subnav { inset-block-start: 0; }
}

/* --- 3D depth touches (uniform, token-driven) — conv-avatar excluded for the minimal flat look --- */
.mainnav-logo-fallback, .msg-avatar, .mainnav-avatar {
  background-image: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,0) 46%),
    var(--brand-grad);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 4px rgba(28,25,23,.18),
    0 5px 12px color-mix(in srgb, var(--brand-dark) 22%, transparent);
}
/* (01/09) old 3D gradient button override removed — primary is flat solid indigo now. */
.conv-count-badge {
  background-image: linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,0) 50%), linear-gradient(var(--wa-green), var(--wa-green));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 4px 10px color-mix(in srgb, var(--wa-green) 40%, transparent);
}

/* --- modals & popups: uniform designed windows --- */
.modal-backdrop {
  background: color-mix(in srgb, var(--brand-dark) 32%, rgba(28,25,23,.45)) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal, .legal-popup-content, .ov-modal-card {
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
  position: relative;
  animation: modalIn .35s cubic-bezier(.22,1,.36,1);
}
.modal::before, .legal-popup-content::before {
  content: ''; position: absolute; top: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand-primary) 55%, var(--wa-green));
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal-header h3 { font-weight: 900; letter-spacing: -.01em; }
.modal-close {
  border-radius: 10px; width: 32px; height: 32px;
  transition: background .2s, transform .2s;
}
.modal-close:hover { background: var(--danger-light); color: var(--danger); transform: rotate(90deg); }

/* 3D empty-state illustration */
.empty-icon-3d { width: 130px; height: 130px; object-fit: contain; margin-bottom: 6px;
  filter: drop-shadow(0 14px 24px color-mix(in srgb, var(--brand-dark) 20%, transparent));
  animation: emptyFloat 5s ease-in-out infinite alternate; }
@keyframes emptyFloat { to { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .empty-icon-3d { animation: none; } }

/* ============================================
   Inbox de-clutter (27/08/2026, Orel): the open-chat screen was sliced into
   5 columns and the chat was squeezed. The departments/labels panel becomes a
   slide-over (funnel button in the list header, hidden by default); the chat
   reclaims the width; the customer panel slims to 300px; the old beige
   WhatsApp backdrop is replaced with the Direction A canvas.
   ============================================ */
@media (min-width: 901px) {
  .app-layout { position: relative; grid-template-columns: var(--conv-list-w) 1fr; }
  body.collapsed-convlist .app-layout { grid-template-columns: 0 1fr; }
  .app-sidebar {
    position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 40;
    width: 292px; background: var(--bg-card);
    transform: translateX(100%); visibility: hidden;
    transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s;
    border-inline-end: 1px solid var(--border);
  }
  body.show-filters .app-sidebar {
    transform: none; visibility: visible;
    transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s;
    box-shadow: 0 0 60px color-mix(in srgb, var(--brand-dark) 18%, transparent);
  }
}
.conv-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; flex: none; border: 1px solid var(--border); border-radius: var(--radius-pill, 16px);
  background: var(--surface-muted, #f5f6f8); color: var(--text-secondary);
  cursor: pointer; transition: all .2s;
}
.conv-filter-btn:hover { border-color: var(--brand-primary); color: var(--brand-dark); }
body.show-filters .conv-filter-btn {
  background: color-mix(in srgb, var(--brand-primary) 10%, white);
  border-color: var(--brand-primary); color: var(--brand-dark);
}

/* chat takes the width; customer panel slim + card-like */
.conv-view-body { grid-template-columns: 1fr 300px; }
.customer-panel { background: var(--bg-card); }

/* Direction A canvas instead of the beige WhatsApp backdrop */
.chat-messages {
  background:
    radial-gradient(640px 320px at 82% 0%, color-mix(in srgb, var(--brand-primary) 5%, transparent), transparent 60%),
    var(--bg-app);
}
.phone-chat { background: var(--bg-app); }
/* customer (incoming) bubbles need contrast on the light canvas */
.msg-row.msg-sender-customer .msg-bubble { background: var(--bg-card); }

/* ============================================
   3-zone inbox (27/08/2026, Orel): default working view = nav | list | chat.
   The customer panel is an on-demand drawer that slides OVER the chat
   (WhatsApp-Web style), never squeezing it. Opened via the person button
   in the chat header; state persists per user (localStorage).
   ============================================ */
@media (min-width: 901px) {
  .conv-view-body { grid-template-columns: 1fr 0; position: relative; }
  body.collapsed-custpanel .conv-view-body { grid-template-columns: 1fr 0 !important; }
  .customer-panel {
    position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 30;
    width: 344px; display: block !important;
    border-inline-start: 1px solid var(--border);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s;
  }
  body:not(.collapsed-custpanel) .customer-panel {
    transform: none; visibility: visible;
    transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s;
    box-shadow: 0 0 60px color-mix(in srgb, var(--brand-dark) 18%, transparent);
  }
}

/* ===== Fix (Nexum, Claude): open customer-panel drawer PUSHES the chat instead of overlapping it =====
   Oral built the panel as an absolute slide-over; when open it covered the chat messily.
   Override the OPEN state to a clean in-flow column (chat shrinks, both fully visible). Closed state unchanged. */
@media (min-width: 901px) {
  body:not(.collapsed-custpanel) .conv-view-body { grid-template-columns: 1fr 344px; }
  body:not(.collapsed-custpanel) .customer-panel {
    position: static !important; transform: none !important; visibility: visible !important;
    width: auto !important; box-shadow: none !important;
    border-inline-start: 1px solid var(--border);
  }
}

/* Fix (Nexum, Claude): full-width content on has-mainnav pages. Root cause: body.has-mainnav had
   padding-inline-end:var(--sidebar-w) assuming inline-end==right, but in RTL inline-end==LEFT, so it
   wasted ~240px on the LEFT of every page. Right sidebar is cleared by padding-inline-start already. */
body.has-mainnav { padding-inline-end: 0 !important; }
/* Fix (Nexum, Claude): the admin dashboard main was capped at max-width:1180px + centered, leaving
   big side gaps on wide screens. Let it use the full content width like the other pages. */
body.has-mainnav .admin-main { max-width: none !important; margin-inline: 0 !important; }

/* ============================================================
   Nexum chat polish (29/08) — designer pass on the conversation
   window: calm canvas, squircle bubbles, uniform ghost icon
   buttons, compact banners, elevated composer. CSS-only overrides
   appended last so the cascade wins; no markup/IDs touched.
   ============================================================ */

/* 1. canvas — quiet cool paper with a faint dot grid (instead of WhatsApp beige) */
.chat-messages {
    background: var(--bg-app);
    background-image: radial-gradient(rgba(28,25,23,.045) 1px, transparent 0);
    background-size: 18px 18px;
}

/* 2. header — clean bar, uniform ghost icon buttons */
.conv-view-header { padding: .7rem 1.25rem; box-shadow: 0 1px 2px rgba(28,25,23,.03); }
.conv-view-header .btn-icon,
.conv-view-header .panel-toggle-btn {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card);
    color: var(--text-secondary); cursor: pointer; transition: all .14s; font-size: .95rem;
}
.conv-view-header .btn-icon:hover,
.conv-view-header .panel-toggle-btn:hover { color: var(--brand-primary); border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent); background: var(--bg-active); transform: translateY(-1px); }
.conv-view-header .btn-icon:active,
.conv-view-header .panel-toggle-btn:active { transform: scale(.94); }
.conv-view-header .btn-icon .ico,
.conv-view-header .panel-toggle-btn .ico { width: 17px; height: 17px; }
.btn-pill-take {
    background: var(--brand-primary); color: #fff; border: none;
    display: inline-flex; align-items: center; gap: .4rem; font-weight: 700;
    box-shadow: 0 1px 2px rgba(28,25,23,.12);
}
.btn-pill-take:active { transform: scale(.97); }
.btn-pill-take .ico, .btn-pill-release .ico { width: 15px; height: 15px; }

/* 3. bubbles — squircle motif, soft depth, calm hues */
.msg-bubble { border-radius: var(--radius-bubble); border: 1px solid rgba(28,25,23,.07);
    box-shadow: 0 1px 2px rgba(28,25,23,.05); max-width: 62ch; }
.msg-row.msg-sender-customer .msg-bubble {
    background: var(--bg-card); border-radius: 12px 12px 12px 3px;
}
.msg-row.msg-out .msg-bubble, .msg-row.msg-sender-agent .msg-bubble {
    background: var(--wa-green-soft); border-color: color-mix(in srgb, var(--wa-green) 26%, transparent);
    border-radius: 12px 12px 3px 12px;
}
.msg-row.msg-sender-bot .msg-bubble {
    background: color-mix(in srgb, var(--brand-primary) 6%, white);
    border-color: color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
.msg-meta { font-size: .72rem; opacity: .75; }

/* 4. banners — compact single-line pills */
.window-banner, .bot-mode-banner {
    padding: .42rem .75rem; border-radius: 999px; font-size: .8rem;
    width: max-content; max-width: 100%; margin-inline: auto;
}
.bot-mode-banner { background: color-mix(in srgb, var(--brand-primary) 8%, white);
    color: var(--brand-dark); border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, transparent); }

/* 5. composer — input + send are ONE joined unit (Orel 01/09) */
.chat-input-area { background: var(--bg-card); border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(28,25,23,.03); }
.chat-input-row { gap: 0; border: 1.5px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card); padding: .3rem; align-items: flex-end;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.chat-input-row:focus-within { border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 30%, transparent); }
.chat-input { border: none !important; border-radius: 0; background: none; box-shadow: none !important; padding: .5rem .6rem; }
.chat-input:focus { border: none !important; box-shadow: none !important; }
/* send = a WhatsApp-send action → the one legit green in chat */
.btn-send { background: var(--wa-green); color: #fff; border-radius: var(--radius-sm); font-weight: 700;
    align-self: stretch; padding: 0 1.25rem; box-shadow: none; }
.btn-send:hover { background: color-mix(in srgb, var(--wa-green) 88%, black); transform: none; }
.btn-send:active { transform: scale(.97); }

/* 6. compose toolbar — uniform ghost chips with line icons */
.quick-replies-bar .qr-toggle {
    display: inline-flex; align-items: center; gap: .38rem;
    height: 32px; padding: 0 .7rem; border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg-card); color: var(--text-secondary); font-weight: 600; font-size: .8rem;
    transition: all .14s;
}
.quick-replies-bar .qr-toggle:hover { color: var(--brand-primary);
    border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent);
    background: var(--bg-active); transform: translateY(-1px); }
.quick-replies-bar .qr-toggle:active { transform: scale(.95); }
.quick-replies-bar .qr-toggle .ico { width: 16px; height: 16px; }
/* icon-only toolbar buttons — uniform 34×34 square (Nexum AI keeps its label) */
.quick-replies-bar .qr-toggle.qr-icon { width: 34px; height: 34px; padding: 0; justify-content: center; gap: 0; }
.quick-replies-bar .qr-toggle.qr-icon .ico { width: 17px; height: 17px; }
/* the template quick-action keeps a subtle green tint (WhatsApp context) */
.quick-replies-bar .qr-toggle-template { color: #12805C;
    border-color: color-mix(in srgb, var(--wa-green) 40%, transparent);
    background: var(--wa-green-soft); }

/* ============================================================
   Nexum mobile polish (29/08) — 390px sanity:
   1) inbox becomes a single column; the departments/labels panel
      uses the SAME slide-over drawer as desktop (was falling back
      to an inline half-screen column below 901px).
   2) top nav collapses to an icon-only scrollable row (labels are
      raw text nodes, so we collapse via font-size).
   ============================================================ */
@media (max-width: 900px) {
  .app-layout { position: relative; grid-template-columns: 1fr !important; }
  .app-sidebar {
    position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 40;
    width: min(86vw, 320px); background: var(--bg-card);
    transform: translateX(100%); visibility: hidden;
    transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s;
    border-inline-end: 1px solid var(--border);
  }
  body.show-filters .app-sidebar {
    transform: none; visibility: visible;
    transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s;
    box-shadow: 0 0 60px rgba(28,25,23,.3);
  }
}
@media (max-width: 768px) {
  .mainnav-links { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: .15rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mainnav-links::-webkit-scrollbar { display: none; }
  .mainnav-link { font-size: 0; gap: 0; padding: .5rem .55rem; flex: 0 0 auto; }
  .mainnav-link .ico { width: 20px; height: 20px; }
}

/* mobile: WhatsApp pattern — list OR chat, never stacked. Chat opens full-screen
   with a back button; body.mobile-chat-open is toggled from app.js. */
@media (max-width: 900px) {
  .app-conv-view { display: none; }
  body.mobile-chat-open .app-conv-view { display: flex; }
  body.mobile-chat-open .app-conv-list { display: none; }
  .mobile-back { display: inline-flex !important; }
}
.mobile-back { display: none; }

/* ============================================================
   Stage 2.1 (01/09) — inbox list + chat window polish.
   Quiet chips, engineered selects, unified avatars, mobile header fix.
   ============================================================ */

/* -- conversation cards: calm hierarchy — ONE colored signal max -- */
.conv-card{ padding-block:.65rem; }
.conv-tag, .conv-agent-tag, .conv-stage-tag{
  font-size:10.5px; font-weight:600; padding:.1rem .5rem; border-radius:999px;
  background:var(--bg-hover); color:var(--text-secondary); border:1px solid var(--border);
}
.conv-agent-tag{ background:transparent; }
/* #7 (round 3): stage chips (ליד/מכירות/איסוף/טיפול/לקוח משלם) get a SOLID colour background inline — so their
   text must be WHITE (was inheriting grey --text-secondary → "ליד" was unreadable/vanished), with a subtle
   lift + border so the chip stays legible on ANY row background, including a selected (brand-tinted) row. */
.conv-card .conv-stage-tag{ color:#fff !important; border:1px solid rgba(255,255,255,.28); font-weight:700;
  box-shadow:0 1px 3px rgba(16,24,40,.22); }
.conv-time{ font-family:var(--font-num); font-size:10.5px; letter-spacing:-.02em; }

/* -- filter selects: engineered, not browser-default -- */
.conv-filter-select{
  appearance:none; -webkit-appearance:none; font-family:inherit; font-size:.8rem; font-weight:600;
  color:var(--text-secondary); background:var(--bg-card) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A8A29E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left .55rem center;
  border:1px solid var(--border); border-radius:999px; padding:.32rem .7rem .32rem 1.5rem;
  cursor:pointer; transition:border-color .14s;
}
.conv-filter-select:hover{ border-color:var(--border-strong); }
.conv-filter-chip{ font-weight:600; }

/* -- chat: unified avatar tint (was teal — now matches the list) -- */
.msg-avatar{
  background:color-mix(in srgb, var(--brand-primary) 12%, var(--bg-card)) !important;
  background-image:none !important; color:var(--brand-primary) !important;
  box-shadow:none !important; font-weight:800;
}
.msg-meta{ font-size:.7rem; }
.msg-row .sender-name, .msg-sender-label{ font-size:.68rem; letter-spacing:.02em; color:var(--text-muted); }

/* -- chat header: compact & scrollable on mobile (was a broken pile at 390) -- */
@media (max-width:900px){
  .conv-view-header{ flex-wrap:nowrap; gap:.5rem; padding:.5rem .7rem; overflow-x:auto; scrollbar-width:none; }
  .conv-view-header::-webkit-scrollbar{ display:none; }
  .conv-view-header .conv-view-info{ min-width:0; }
  .conv-view-header .conv-view-name{ font-size:.92rem; white-space:nowrap; }
  .conv-view-header .conv-view-meta{ white-space:nowrap; font-size:.72rem; }
  .conv-view-header .conv-head-dept,
  .conv-view-header .conv-head-agents,
  .conv-view-header .conv-view-assignees{ display:none; }   /* details live in the customer panel */
  .btn-pill-take, .btn-pill-release{ white-space:nowrap; font-size:.78rem; padding:.42rem .7rem; }
}

/* -- empty state: give it a real action -- */
.empty-state .empty-cta{ margin-top:1rem; }

/* ============================================================
   Stage 2.2 — quiet row-action pill (tables: agents, etc).
   One neutral style; color is TEXT-only for state, never a filled block.
   ============================================================ */
.btn-row{
  display:inline-flex; align-items:center; gap:.3rem;
  background:var(--bg-card); color:var(--text-secondary);
  border:1px solid var(--border); border-radius:8px;
  font-family:inherit; font-weight:600; font-size:.75rem; padding:.28rem .6rem;
  cursor:pointer; transition:border-color .14s, color .14s, background .14s, transform .04s;
}
.btn-row:hover{ border-color:var(--border-strong); color:var(--text-primary); background:var(--bg-hover); }
.btn-row:active{ transform:scale(.97); }
.btn-row-danger{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 28%, transparent); }
.btn-row-danger:hover{ background:var(--danger-light); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent); }
.btn-row-ok{ color:#12805C; border-color:color-mix(in srgb, var(--wa-green) 30%, transparent); }
.btn-row-ok:hover{ background:var(--wa-green-soft); color:#12805C; }

/* ============================================================
   Stage 3 — Nexum AI copilot panel (in-chat). Premium, brand-tinted,
   sits above the composer. Suggestion + intent + summary.
   ============================================================ */
.qr-copilot{
  background:color-mix(in srgb, var(--brand-primary) 10%, var(--bg-card)) !important;
  color:var(--brand-primary) !important; border:1px solid color-mix(in srgb, var(--brand-primary) 26%, transparent) !important;
  font-weight:700;
}
.qr-copilot:hover{ background:color-mix(in srgb, var(--brand-primary) 16%, var(--bg-card)) !important; }
.qr-copilot .ico{ color:var(--brand-primary); }

.copilot-panel{
  margin:0 0 .55rem; padding:.7rem .8rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 5%, var(--bg-card)), var(--bg-card));
  border:1px solid color-mix(in srgb, var(--brand-primary) 22%, transparent);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow); animation:copilotIn .22s var(--ease, cubic-bezier(.22,.61,.36,1));
}
@keyframes copilotIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.copilot-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.copilot-badge{
  display:inline-flex; align-items:center; gap:.32rem; font-weight:800; font-size:.82rem;
  color:var(--brand-primary); letter-spacing:-.01em;
}
.copilot-badge .ico{ color:var(--brand-primary); }
.copilot-intent{
  font-size:.72rem; font-weight:700; padding:.14rem .55rem; border-radius:999px;
  background:color-mix(in srgb, var(--brand-primary) 12%, var(--bg-card)); color:var(--brand-primary);
}
.copilot-x{
  margin-inline-start:auto; background:none; border:none; cursor:pointer; color:var(--text-muted);
  display:inline-flex; padding:.15rem; border-radius:8px; transition:color .14s,background .14s;
}
.copilot-x:hover{ color:var(--text-primary); background:var(--bg-hover); }
.copilot-loading{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text-secondary); }
.copilot-suggestion{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:.6rem .75rem; font-size:.92rem; line-height:1.55; color:var(--text-primary);
  white-space:pre-wrap; max-height:180px; overflow-y:auto;
}
.copilot-sumtitle{ font-weight:800; font-size:.78rem; color:var(--text-muted); margin-bottom:.25rem; }
.copilot-actions{ display:flex; gap:.45rem; margin-top:.55rem; flex-wrap:wrap; align-items:center; }
.copilot-actions .btn-primary-lg{ font-size:.82rem; padding:.45rem .9rem; }
.copilot-foot{ margin-top:.5rem; font-size:.72rem; color:var(--text-muted); }
@media (max-width:600px){ .copilot-actions{ gap:.35rem } .copilot-actions .btn-row{ font-size:.72rem } }

/* ============================================================
   Nexum unified notifications (01/09) — toast + overflow chip.
   Classic/quiet: white card, one 3px accent bar at inline-start,
   drains a 2px progress line, max 3 stacked. Tokens only.
   ============================================================ */
.nx-toast-wrap{
  /* bottom, logical-start side, but clear of the fixed right nav (sidebar-w) so it never
     sits under the rail. On pages without the rail it falls back to 16px. */
  position:fixed; inset-block-end:16px; inset-inline-start:calc(var(--sidebar-w, 0px) + 16px); z-index:4000;
  display:flex; flex-direction:column; gap:.55rem; width:380px; max-width:calc(100vw - 32px);
  pointer-events:none;
}
body:not(.has-mainnav) .nx-toast-wrap{ inset-inline-start:16px; }
.nx-toast{
  pointer-events:auto; position:relative; display:flex; gap:.7rem; align-items:flex-start;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:.8rem .9rem .8rem 1rem; overflow:hidden; cursor:pointer;
  opacity:0; transform:translateY(12px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nx-toast.nx-in{ opacity:1; transform:none; }
.nx-toast.nx-out{ opacity:0; transition:opacity 150ms var(--ease); }
/* the ONLY colour in the toast — a 3px bar at the start edge */
.nx-toast::before{ content:''; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--border-strong); }
.nx-toast.acc-indigo::before{ background:var(--brand-primary); }
.nx-toast.acc-amber::before{  background:var(--warning); }
.nx-toast.acc-red::before{    background:var(--danger); }
.nx-t-ico{ flex:0 0 auto; color:var(--text-secondary); margin-top:1px; display:inline-flex; }
.nx-toast.acc-indigo .nx-t-ico{ color:var(--brand-primary); }
.nx-toast.acc-amber .nx-t-ico{  color:var(--warning); }
.nx-toast.acc-red .nx-t-ico{    color:var(--danger); }
.nx-t-main{ flex:1; min-width:0; }
.nx-t-title{ font-size:var(--fs-md); font-weight:600; color:var(--text-primary); line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nx-t-body{ font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.45; margin-top:.1rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nx-t-time{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:.25rem; }
.nx-t-close{ flex:0 0 auto; background:none; border:none; cursor:pointer; color:var(--text-muted);
  padding:.15rem; border-radius:8px; display:inline-flex; transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.nx-t-close:hover{ color:var(--text-primary); background:var(--bg-hover); }
.nx-t-prog{ position:absolute; inset-block-end:0; inset-inline:0; height:2px; background:transparent; }
.nx-t-prog i{ display:block; height:100%; width:100%; background:color-mix(in srgb, var(--text-muted) 40%, transparent); }
.nx-toast.nx-noanim{ transition:opacity 120ms linear; transform:none; }
.nx-toast.nx-noanim.nx-in{ transform:none; }
.nx-toast.nx-noanim .nx-t-prog{ display:none; }
.nx-toast-more{
  pointer-events:auto; align-self:flex-start; background:var(--bg-card); border:1px solid var(--border);
  border-radius:999px; padding:.35rem .8rem; font-family:inherit; font-size:var(--fs-sm); font-weight:600;
  color:var(--text-secondary); cursor:pointer; box-shadow:var(--shadow); transition:border-color var(--dur-fast) var(--ease); }
.nx-toast-more:hover{ border-color:var(--border-strong); color:var(--text-primary); }
@media (max-width:600px){ .nx-toast-wrap{ inset-inline:16px; width:auto; } }
@media (prefers-reduced-motion: reduce){ .nx-toast{ transition:opacity 120ms linear; transform:none; } .nx-t-prog{ display:none; } }

/* ── notification settings pane (switches + event matrix) ── */
.nt-switches{ display:flex; flex-direction:column; gap:.5rem; margin:.9rem 0; }
.nt-switch{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:.7rem .85rem; cursor:pointer; }
.nt-switch small{ color:var(--text-muted); font-size:var(--fs-xs); font-weight:500; }
.nt-switch b{ font-size:var(--fs-base); font-weight:600; color:var(--text-primary); }
.nt-switch input[type=checkbox]{ width:18px; height:18px; accent-color:var(--brand-primary); flex:0 0 auto; }
.nt-matrix-title{ font-size:var(--fs-sm); font-weight:600; color:var(--text-secondary); margin:1.3rem 0 .5rem; }
.nt-matrix-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm); }
.nt-matrix{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.nt-matrix th{ background:var(--bg-hover); color:var(--text-secondary); font-weight:600; padding:.55rem .7rem; text-align:center; }
.nt-matrix th:first-child{ text-align:start; }
.nt-matrix td{ padding:.5rem .7rem; border-top:1px solid var(--border); text-align:center; color:var(--text-primary); }
.nt-matrix td:first-child{ text-align:start; font-weight:500; }
.nt-matrix input[type=checkbox]{ width:16px; height:16px; accent-color:var(--brand-primary); cursor:pointer; }
.nt-dnd{ margin-top:1.3rem; border-top:1px dashed var(--border); padding-top:1rem; }
.nt-dnd-hours{ display:flex; align-items:center; gap:.5rem; margin-top:.6rem; flex-wrap:wrap; }
.nt-dnd-hours .field-label{ margin:0; }
.nt-sounds{ margin-top:1.3rem; border-top:1px dashed var(--border); padding-top:1rem; }
.nt-sound-row{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* #9: voice-note RECORDING visualization — big live waveform bars in the Nexum brand gradient. */
.voice-recbar{ background:linear-gradient(90deg, color-mix(in srgb,var(--brand-primary) 8%,#fff), #fff) !important;
  border-color:color-mix(in srgb,var(--brand-primary) 30%,var(--border)) !important; box-shadow:0 2px 10px -4px color-mix(in srgb,var(--brand-primary) 40%,transparent) !important; }
.voice-wave{ display:inline-flex; align-items:center; gap:2.5px; height:30px; padding:0 .3rem; }
.voice-wave i{ display:block; width:3.5px; height:5px; border-radius:2px;
  background:linear-gradient(180deg, var(--brand-primary,#6366F1), var(--brand-dark,#1e293b));
  transition:height .07s linear; }
.voice-wave.voice-wave-pulse i{ animation:voiceWavePulse .9s ease-in-out infinite; }
.voice-wave.voice-wave-pulse i:nth-child(2n){ animation-delay:.12s; }
.voice-wave.voice-wave-pulse i:nth-child(3n){ animation-delay:.26s; }
.voice-wave.voice-wave-pulse i:nth-child(4n){ animation-delay:.4s; }
.voice-wave.voice-wave-pulse i:nth-child(5n){ animation-delay:.55s; }
@keyframes voiceWavePulse{ 0%,100%{ height:5px; } 50%{ height:24px; } }
.voice-rec-dot{ width:9px; height:9px; border-radius:50%; background:#E02424; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(224,36,36,.5); animation:voiceRecPulse 1.1s ease-out infinite; }
@keyframes voiceRecPulse{ 0%{ box-shadow:0 0 0 0 rgba(224,36,36,.45); } 70%{ box-shadow:0 0 0 6px rgba(224,36,36,0); } 100%{ box-shadow:0 0 0 0 rgba(224,36,36,0); } }
/* rec-layout: compact voice bar rendered INLINE in the composer icon row (.quick-replies-bar), pushed to the left */
.quick-replies-bar{ flex-wrap:wrap; row-gap:.4rem; }
.voice-inline{ display:inline-flex; align-items:center; gap:.4rem; margin-inline-start:auto; }
.voice-inline .voice-lbl{ color:#E02424; font-weight:800; font-size:.8rem; white-space:nowrap; }
.voice-inline .voice-timer{ font-variant-numeric:tabular-nums; color:var(--text-secondary); font-weight:700; font-size:.8rem; min-width:38px; }
.voice-inline .voice-wave{ height:24px; padding:0 .15rem; }
.voice-inline .voice-btn{ height:30px; padding:0 .7rem; font-size:.78rem; }
.voice-inline .voice-btn-send{ background:var(--brand-primary,#4f46e5); color:#fff; border-color:transparent; font-weight:700; }
.voice-inline .voice-btn-stop{ background:#111827; color:#fff; border-color:transparent; }
.voice-inline .voice-audio{ height:30px; max-width:132px; }

/* ── notification center (bell dropdown) ── */
/* #8 (round 3, CONFIRMED via live CDP): the bell now lives at the TOP of the sidebar and JS portals this panel
   to <body> as position:fixed and sets its own top/left. The old `inset: … !important` (a drop-UP anchored to
   the bell wrap) resolved `bottom:calc(100%+10px)` against the VIEWPORT once fixed → it flew ~479px ABOVE the
   screen ("clicking shows nothing"). Positioning is now OWNED BY THE JS — keep ONLY visual props here, no inset. */
#alertsDropdown{ padding:0 !important; border-radius:var(--radius-lg) !important; box-shadow:var(--shadow-lg) !important;
  border:1px solid var(--border) !important; width:360px !important; max-width:calc(100vw - 24px);
  max-height:min(72vh, 560px) !important; overflow-y:auto !important; }
.nx-center-head{ display:flex; align-items:center; justify-content:space-between; padding:.7rem .9rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg-card); z-index:1; }
.nx-center-title{ font-weight:700; font-size:var(--fs-md); color:var(--text-primary); }
.nx-center-clear{ height:auto; padding:.3rem .5rem; font-size:var(--fs-xs); color:var(--brand-primary); }
.nx-center-mute{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; padding:.55rem .9rem; border-bottom:1px solid var(--border); background:var(--bg-app); }
.nx-mute-label,.nx-muted-note{ font-size:var(--fs-xs); color:var(--text-muted); font-weight:600; }
.nx-muted-note{ color:var(--warning); }
.nx-center-mute .btn-row{ font-size:var(--fs-xs); padding:.2rem .55rem; }
.nx-center-item{ display:flex; gap:.55rem; align-items:flex-start; padding:.65rem .9rem; border-bottom:1px solid var(--border); transition:background var(--dur-fast) var(--ease); }
.nx-center-item:hover{ background:var(--bg-hover); }
.nx-center-dot{ width:7px; height:7px; border-radius:50%; background:var(--brand-primary); flex:0 0 auto; margin-top:.45rem; }
.nx-center-item-title{ font-weight:600; font-size:var(--fs-base); color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nx-center-item-body{ font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nx-center-item-time{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:.15rem; font-family:var(--font-num); }
.nx-center-empty{ padding:2.2rem 1.2rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.nx-center-empty .nx-empty-title{ font-weight:700; font-size:var(--fs-md); color:var(--text-primary); }
.nx-center-empty .nx-empty-sub{ font-size:var(--fs-sm); color:var(--text-muted); max-width:260px; line-height:1.5; }
.mainnav-iconbtn.bell-muted{ color:var(--warning); }

/* ── design-system confirm modal (replaces native confirm()) ── */
.nx-confirm-back{ position:fixed; inset:0; z-index:5000; display:grid; place-items:center;
  background:color-mix(in srgb, var(--text-primary) 32%, transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity var(--dur-fast) var(--ease); padding:16px; }
.nx-confirm-back.nx-in{ opacity:1; }
.nx-confirm{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:1.3rem 1.4rem; width:100%; max-width:400px;
  transform:translateY(8px); transition:transform var(--dur) var(--ease); }
.nx-confirm-back.nx-in .nx-confirm{ transform:none; }
.nx-confirm-title{ font-size:var(--fs-lg); font-weight:700; color:var(--text-primary); margin-bottom:.4rem; letter-spacing:-.01em; }
.nx-confirm-msg{ font-size:var(--fs-base); color:var(--text-secondary); line-height:1.55; }
.nx-confirm-actions{ display:flex; gap:.5rem; justify-content:flex-start; margin-top:1.3rem; }
.nx-confirm .nx-c-danger{ background:var(--danger); }
.nx-confirm .nx-c-danger:hover{ background:color-mix(in srgb, var(--danger) 88%, black); }
@media (prefers-reduced-motion: reduce){ .nx-confirm-back,.nx-confirm{ transition:opacity 120ms linear; transform:none; } }

/* ── mobile 390: when a conversation (with its composer) is open, toasts move to the TOP
   so they never cover the message input at the bottom ── */
@media (max-width:600px){
  body.mobile-chat-open .nx-toast-wrap{ inset-block-start:12px; inset-block-end:auto; }
}

/* ============================================================
   Crystal Flow — WhatsApp workspace visual layer (18/09/2026)
   CSS-only presentation pass. All existing controls, ids, click
   handlers and panel order stay intact; this block changes visuals.
   ============================================================ */
body.app-body.has-mainnav {
  --bg-app:#F5F8FF;
  --bg-card:rgba(255,255,255,.91);
  --bg-hover:#F0F5FF;
  --bg-active:color-mix(in srgb,var(--brand-primary) 8%,#fff);
  --bg-active-strong:color-mix(in srgb,var(--brand-primary) 14%,#fff);
  --text-primary:#101A31;
  --text-secondary:#52627D;
  --text-muted:#8090A9;
  --border:rgba(108,132,184,.18);
  --border-strong:rgba(82,110,174,.30);
  --shadow-sm:0 1px 2px rgba(43,66,118,.06),0 6px 18px -13px rgba(48,79,150,.24);
  --shadow:0 2px 5px rgba(63,87,141,.07),0 20px 48px -28px rgba(46,78,151,.36);
  --shadow-md:0 3px 8px rgba(63,87,141,.08),0 28px 58px -30px rgba(46,78,151,.40);
  --shadow-lg:0 8px 24px rgba(52,76,132,.14),0 34px 80px -34px rgba(43,72,144,.46);
  --radius:16px;
  --radius-lg:22px;
  --radius-bubble:18px 18px 6px 18px;
  --conv-list-w:380px;
  --sidenav-w:244px;
  background:
    radial-gradient(880px 580px at 100% 0%,rgba(101,170,255,.16),transparent 67%),
    radial-gradient(760px 540px at 5% 96%,rgba(37,211,102,.075),transparent 70%),
    linear-gradient(145deg,#F7FAFF 0%,#F2F7FF 58%,#F8FBFF 100%);
}

/* The unified navigation is shared by every product screen, so the new
   horizontal wordmark needs a safe size even outside the inbox page. */
.mainnav-wordmark {
  display:block;width:184px;height:auto;max-width:100%;object-fit:contain;direction:ltr;
  filter:drop-shadow(0 7px 13px rgba(60,92,175,.10));
}

body.app-body .mainnav {
  isolation:isolate;
  background:linear-gradient(165deg,rgba(255,255,255,.94),rgba(247,251,255,.84));
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  backdrop-filter:blur(24px) saturate(145%);
  border-inline-end:1px solid rgba(118,145,199,.18);
  box-shadow:-18px 0 54px -42px rgba(48,78,151,.48),inset -1px 0 0 rgba(255,255,255,.82);
}
body.app-body .mainnav::before {
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:-90px -100px auto;width:330px;height:310px;border-radius:50%;
  background:radial-gradient(circle,rgba(81,126,247,.16),rgba(50,204,170,.055) 48%,transparent 72%);
  filter:blur(10px);
}
body.app-body .mainnav > * {position:relative;z-index:1}
body.app-body .mainnav-brand {justify-content:center;padding:.1rem .15rem .85rem;margin:0}
body.app-body .mainnav-wordmark {
  display:block;width:188px;height:auto;max-width:100%;object-fit:contain;direction:ltr;
  filter:drop-shadow(0 7px 13px rgba(60,92,175,.10));
}
body.app-body .mainnav-link {
  border:1px solid transparent;border-radius:14px;padding:.62rem .75rem;
  color:#55657D;transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s;
}
body.app-body .mainnav-link:hover {
  color:#243458;background:rgba(255,255,255,.74);border-color:rgba(112,140,198,.16);
  box-shadow:0 8px 24px -19px rgba(53,84,159,.42);transform:translateY(-1px);
}
body.app-body .mainnav-link.active {
  color:#2449C7;background:linear-gradient(125deg,rgba(77,107,242,.13),rgba(53,183,236,.09) 56%,rgba(37,211,102,.10));
  border-color:rgba(83,112,239,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 12px 28px -21px rgba(60,92,215,.58);
}
body.app-body .mainnav-link.active::before {
  width:4px;inset-inline-start:-15px;background:linear-gradient(180deg,#566BF0,#35A9F0 56%,#25D366);
  box-shadow:0 0 13px rgba(64,122,244,.48);
}
body.app-body .nav-acc-body {gap:3px;margin-block:.2rem .35rem}
body.app-body .mainnav-link.nav-sub {border-radius:12px;color:#71819A}
body.app-body .mainnav-link.nav-sub.active {color:#3154CE;background:rgba(79,108,240,.09);box-shadow:none}
body.app-body .nav-acc-chev-btn:hover {background:rgba(79,108,240,.08);color:#3154CE}
body.app-body .usermenu-chip {
  background:rgba(255,255,255,.80);border:1px solid rgba(108,132,184,.20);border-radius:16px;
  box-shadow:0 10px 30px -24px rgba(46,78,151,.48),inset 0 1px 0 #fff;
}
body.app-body .mainnav-avatar {
  border-radius:12px !important;background:linear-gradient(145deg,#556BF0,#6648C7 58%,#25B974);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.38),0 8px 18px -9px rgba(69,70,197,.62);
}
body.app-body .mainnav-actions {padding-top:.15rem}
body.app-body .mainnav-iconbtn {
  width:42px;height:42px;padding:0;border-radius:14px;background:rgba(255,255,255,.78);
  border:1px solid rgba(108,132,184,.20);color:#52627D;
  box-shadow:0 10px 24px -20px rgba(46,78,151,.48),inset 0 1px 0 #fff;
}
body.app-body .mainnav-iconbtn:hover {
  color:#3154CE;border-color:rgba(79,108,240,.34);background:rgba(245,249,255,.96);transform:translateY(-1px);
}
body.app-body #alertsBellBtn {position:relative}
body.app-body #alertsBellBtn::after {
  content:"";position:absolute;inset-block-start:8px;inset-inline-start:9px;width:6px;height:6px;border-radius:50%;
  background:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.14);
}

@media (min-width:901px) {
  body.app-body .mainnav {padding:1rem .85rem;gap:.45rem}
  body.app-body .app-layout {padding:.8rem;gap:.8rem;background:transparent}
  body.app-body .app-conv-list,
  body.app-body .app-conv-view {
    min-width:0;border:1px solid rgba(108,132,184,.17);border-radius:22px;overflow:hidden;
    background:rgba(255,255,255,.78);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.92);
  }
  body.app-body .app-conv-list {-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  body.app-body:not(.collapsed-custpanel) .conv-view-body {grid-template-columns:1fr 350px}
  body.app-body:not(.collapsed-custpanel) .customer-panel {border-inline-start:1px solid rgba(108,132,184,.16)}
}

body.app-body .conv-list-head {
  padding:.7rem !important;gap:.5rem !important;background:rgba(255,255,255,.82) !important;
  border-bottom:1px solid rgba(108,132,184,.15) !important;
}
body.app-body .conv-list-search {
  min-height:44px !important;background:rgba(244,248,255,.82) !important;border:1px solid rgba(108,132,184,.20) !important;
  border-radius:14px !important;box-shadow:inset 0 1px 2px rgba(49,75,126,.035) !important;
}
body.app-body .conv-list-search:focus-within {
  background:#fff !important;border-color:rgba(79,108,240,.46) !important;
  box-shadow:0 0 0 3px rgba(79,108,240,.10),0 10px 24px -20px rgba(54,86,168,.50) !important;
}
body.app-body .conv-newbtn {
  width:44px !important;border-radius:14px !important;background:linear-gradient(145deg,#12213E,#080E1E) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 22px -14px rgba(10,20,45,.70) !important;
}
body.app-body .conv-filter-bar {
  gap:.3rem !important;padding:.5rem .55rem !important;background:rgba(255,255,255,.70) !important;
  border-bottom:1px solid rgba(108,132,184,.14) !important;
}
body.app-body .conv-filter-chip,
body.app-body .conv-filter-select,
body.app-body .na-reset-btn2 {
  min-height:30px;background:rgba(255,255,255,.76);border-color:rgba(108,132,184,.19);color:#64748A;
}
body.app-body .conv-filter-chip.active,
body.app-body .conv-state-select.active {
  background:#111B31;color:#fff;border-color:#111B31;box-shadow:0 7px 16px -12px rgba(17,27,49,.85);
}
body.app-body .conv-list-body {padding:.35rem;background:linear-gradient(180deg,rgba(247,250,255,.58),rgba(240,247,255,.40))}
body.app-body .conv-card {
  min-height:84px;margin:.35rem .25rem;padding:.72rem .75rem;border:1px solid rgba(108,132,184,.12);
  border-radius:16px;background:rgba(255,255,255,.64);box-shadow:0 8px 24px -23px rgba(47,79,151,.48);
  transition:background .16s,border-color .16s,box-shadow .16s,transform .16s;
}
body.app-body .conv-card:hover {
  background:rgba(255,255,255,.94);border-color:rgba(93,123,190,.24);
  box-shadow:0 16px 34px -25px rgba(47,79,151,.50);transform:translateY(-1px);
}
body.app-body .conv-card.selected {
  background:linear-gradient(120deg,rgba(245,248,255,.98),rgba(232,242,255,.94) 62%,rgba(229,251,242,.68));
  border-color:rgba(80,111,235,.28);box-shadow:0 14px 32px -22px rgba(60,96,210,.48),inset 0 1px 0 #fff;
}
body.app-body .conv-card.selected::before {
  inset-inline-start:-1px;width:4px;background:linear-gradient(180deg,#566BF0,#2D9FF3 55%,#25D366);
  border-radius:0 4px 4px 0;box-shadow:0 0 14px rgba(65,120,240,.36);
}
body.app-body .conv-avatar {
  width:46px;height:46px;border-radius:15px !important;color:#3154CE;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(222,234,255,.92));
  border:1px solid rgba(101,131,197,.17);box-shadow:inset 0 1px 0 #fff,0 9px 18px -14px rgba(49,79,150,.52);
}
body.app-body .conv-status-dot {border:2px solid #fff;box-shadow:0 2px 7px rgba(22,122,73,.28)}
body.app-body .conv-name {font-size:.96rem;color:#14203A}
body.app-body .conv-time {color:#8391A7}
body.app-body .conv-preview {color:#65748B}
body.app-body .conv-phone,
body.app-body .conv-tag,
body.app-body .conv-agent-tag {background:rgba(247,249,253,.88) !important;border-color:rgba(108,132,184,.16) !important}

body.app-body .conv-view-header {
  min-height:76px;padding:.75rem 1.05rem;background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(108,132,184,.15);box-shadow:0 10px 32px -28px rgba(48,78,151,.42);
}
body.app-body .conv-view-name {font-size:1.08rem;color:#101A31}
body.app-body .conv-view-meta {color:#708099}
body.app-body .conv-view-assignees {gap:.35rem}
body.app-body .conv-view-actions {gap:.42rem}
body.app-body .conv-view-header .btn-icon,
body.app-body .conv-view-header .panel-toggle-btn {
  width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.78);
  border-color:rgba(108,132,184,.20);box-shadow:0 8px 20px -18px rgba(44,74,144,.52),inset 0 1px 0 #fff;
}
body.app-body .conv-view-header .btn-icon:hover,
body.app-body .conv-view-header .panel-toggle-btn:hover,
body.app-body .conv-view-header .panel-toggle-btn.active {
  color:#3154CE;background:rgba(238,244,255,.94);border-color:rgba(79,108,240,.32);
  box-shadow:0 11px 24px -19px rgba(53,88,184,.56),inset 0 1px 0 #fff;
}
body.app-body .btn-pill-take,
body.app-body .btn-pill-release {
  min-height:38px;border-radius:12px;padding-inline:.9rem;
}
body.app-body .btn-pill-take {background:linear-gradient(135deg,#526AF0,#3B8DEB);box-shadow:0 12px 24px -16px rgba(65,95,215,.65)}

body.app-body .chat-messages {
  padding:1.55rem 1.7rem;background-color:#F7FAFF;
  background-image:
    radial-gradient(720px 360px at 92% -4%,rgba(84,142,255,.10),transparent 64%),
    radial-gradient(620px 330px at 4% 98%,rgba(37,211,102,.065),transparent 68%),
    radial-gradient(rgba(89,116,170,.065) .8px,transparent .9px);
  background-size:auto,auto,19px 19px;
}
body.app-body .msg-row {margin-bottom:1.1rem;gap:.72rem}
body.app-body .msg-avatar {
  width:30px;height:30px;margin-top:17px;border-radius:11px !important;color:#3554C8 !important;
  background:linear-gradient(145deg,#fff,#E6EEFF) !important;border:1px solid rgba(105,132,192,.16);
  box-shadow:inset 0 1px 0 #fff,0 9px 16px -14px rgba(48,76,142,.56) !important;
}
body.app-body .msg-content-wrap {max-width:min(70%,720px)}
body.app-body .msg-bubble {
  padding:.72rem .92rem;border-radius:18px;line-height:1.52;font-weight:500;
  border:1px solid rgba(108,132,184,.14);box-shadow:0 1px 2px rgba(48,74,128,.06),0 14px 28px -24px rgba(47,77,145,.38);
}
body.app-body .msg-row.msg-sender-customer .msg-bubble {
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(249,252,255,.96));
  border-radius:18px 18px 18px 6px;
}
body.app-body .msg-row.msg-out:not(.msg-sender-bot) .msg-bubble,
body.app-body .msg-row.msg-sender-agent .msg-bubble {
  background:linear-gradient(145deg,#ECFFF5,#DFF9EC);border-color:rgba(37,184,104,.20);
  border-radius:18px 18px 6px 18px;box-shadow:0 1px 2px rgba(24,125,75,.06),0 14px 28px -24px rgba(37,173,103,.38);
}
body.app-body .msg-row.msg-sender-bot .msg-bubble {
  background:linear-gradient(145deg,#F7F9FF,#EAF0FF);border-color:rgba(79,108,240,.18);
}
body.app-body .day-sep span {
  background:rgba(255,255,255,.76);border:1px solid rgba(108,132,184,.14);color:#6F7F97;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 18px -16px rgba(49,78,148,.48);
}
body.app-body .chat-messages > div[style*="text-align:center"] > span[style*="#fff7d1"] {
  background:linear-gradient(145deg,#FFF9DD,#FFF2B9) !important;border-color:#F0D675 !important;
  border-radius:14px !important;box-shadow:0 10px 24px -20px rgba(177,128,14,.40);
}

body.app-body .chat-input-area {
  margin:.72rem;padding:.68rem;background:rgba(255,255,255,.84);border:1px solid rgba(108,132,184,.18);
  border-radius:20px;box-shadow:0 18px 45px -30px rgba(42,73,145,.45),inset 0 1px 0 rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
body.app-body .quick-replies-bar {gap:.35rem;margin-bottom:.55rem}
body.app-body .quick-replies-bar .qr-toggle {
  height:34px;border-radius:12px;background:rgba(255,255,255,.78);border-color:rgba(108,132,184,.19);
  box-shadow:0 7px 18px -17px rgba(43,74,147,.52),inset 0 1px 0 #fff;
}
body.app-body .quick-replies-bar .qr-toggle.qr-icon {width:34px;border-radius:50%}
body.app-body .quick-replies-bar .qr-toggle:hover {
  color:#3154CE;background:#F2F6FF;border-color:rgba(79,108,240,.32);box-shadow:0 10px 22px -18px rgba(55,86,176,.58),inset 0 1px 0 #fff;
}
body.app-body .quick-replies-bar .qr-toggle-template {
  color:#12865B;background:linear-gradient(145deg,#F0FFF7,#E4FAEF);border-color:rgba(37,181,103,.24);
}
body.app-body .quick-replies-bar .qr-copilot {
  color:#4059D3 !important;background:linear-gradient(145deg,#F7F4FF,#EEF2FF) !important;
  border-color:rgba(91,83,220,.22) !important;
}
body.app-body .chat-input-row {
  min-height:54px;padding:.34rem;border-radius:16px;background:rgba(248,251,255,.76);
  border:1px solid rgba(108,132,184,.22);box-shadow:inset 0 1px 2px rgba(48,75,130,.035);
}
body.app-body .chat-input-row:focus-within {
  background:#fff;border-color:rgba(79,108,240,.48);box-shadow:0 0 0 3px rgba(79,108,240,.10);
}
body.app-body .btn-send {
  min-width:82px;border-radius:13px;background:linear-gradient(135deg,#22C86D 0%,#21C6A6 46%,#438BF3 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px -16px rgba(32,164,135,.72);
}
body.app-body .btn-send:hover {filter:brightness(1.035);background:linear-gradient(135deg,#22C86D 0%,#21C6A6 46%,#438BF3 100%)}

body.app-body .customer-panel {
  padding:.75rem;background:linear-gradient(180deg,rgba(248,251,255,.92),rgba(242,247,255,.88));
}
body.app-body .customer-panel > .panel-section {
  margin-bottom:.7rem;padding:.85rem;background:rgba(255,255,255,.82);border:1px solid rgba(108,132,184,.16);
  border-radius:16px;box-shadow:0 14px 32px -28px rgba(44,75,145,.50),inset 0 1px 0 #fff;
}
body.app-body .panel-title {
  margin-bottom:.65rem;padding-bottom:.5rem;color:#5D6E88;font-size:.78rem;font-weight:800;
  text-transform:none;letter-spacing:0;border-bottom:1px solid rgba(108,132,184,.14);
}
body.app-body #customerPanel > dl {
  background:rgba(247,250,255,.72);border-color:rgba(108,132,184,.16);border-radius:13px;padding:.42rem .6rem;
}
body.app-body .panel-group-label {color:#8492A8;letter-spacing:0;text-transform:none}
body.app-body .panel-row dd {text-align:start;color:#16223C}
body.app-body .assignee-chip {
  border-radius:13px;background:linear-gradient(145deg,#fff,#F6F9FF);border:1px solid rgba(108,132,184,.16);
  box-shadow:0 8px 20px -20px rgba(45,77,149,.48);
}
body.app-body .internal-note {
  background:linear-gradient(145deg,#FFFDF4,#FFF8DA) !important;border-color:rgba(221,176,59,.25) !important;
  border-radius:13px !important;box-shadow:0 8px 20px -20px rgba(168,120,22,.40);
}
body.app-body .internal-note-input {
  padding:.55rem .62rem !important;border-color:rgba(108,132,184,.20) !important;border-radius:12px !important;background:rgba(255,255,255,.86) !important;
}
body.app-body .customer-panel .btn-secondary,
body.app-body .btn-export-panel {
  border-radius:12px;border-color:rgba(108,132,184,.19);background:rgba(255,255,255,.84);
}
body.app-body .btn-export-panel {background:linear-gradient(145deg,#14213A,#0D1427);color:#fff;box-shadow:0 11px 25px -18px rgba(14,25,50,.62)}

body.app-body .modal,
body.app-body .context-menu,
body.app-body .qr-menu,
body.app-body .emoji-picker,
body.app-body #alertsDropdown {
  background:rgba(255,255,255,.94) !important;border-color:rgba(108,132,184,.20) !important;
  -webkit-backdrop-filter:blur(24px) saturate(145%);backdrop-filter:blur(24px) saturate(145%);
}

@media (max-width:900px) {
  .mainnav-wordmark {width:108px}
  body.app-body.has-mainnav {--conv-list-w:100%;background:#F5F8FF}
  body.app-body .mainnav-wordmark {width:118px}
  body.app-body .mainnav-brand {padding:.05rem .2rem}
  body.app-body .mainnav-iconbtn {width:38px;height:38px;border-radius:12px}
  body.app-body .app-layout {padding:0;gap:0}
  body.app-body .app-conv-list,
  body.app-body .app-conv-view {border-radius:0;border-inline:0;box-shadow:none}
  body.app-body .conv-card {margin:.3rem .4rem}
  body.app-body .chat-messages {padding:1rem .8rem}
  body.app-body .msg-content-wrap {max-width:84%}
  body.app-body .chat-input-area {margin:.45rem;border-radius:17px;padding:.5rem}
  body.app-body .customer-panel {padding:.6rem}
}

@media (prefers-reduced-motion:reduce) {
  body.app-body .mainnav-link,
  body.app-body .conv-card,
  body.app-body .conv-view-header .btn-icon,
  body.app-body .quick-replies-bar .qr-toggle {transition:none;transform:none !important}
}