@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;
}

/* QA (simulator): the 1fr/380px grid overflowed phones — stack the columns and let the mockup fill the width */
@media (max-width: 800px) {
    .simulator-page { grid-template-columns: 1fr; padding: 1rem; gap: 1.25rem; }
    .phone-mockup { height: min(620px, 78vh); max-width: 100%; }
}

/* ============================================
   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; }
/* directional icons (e.g. logout arrow) point "outward" — mirror them when the page reads right-to-left */
[dir="rtl"] .ico-mirror-rtl{ transform:scaleX(-1); }
/* 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}
}

/* ============================================================
   Mobile polish (2026-09-21, #17): scroll affordance on wide,
   horizontally-scrollable regions so users know to swipe. The app
   is already fully responsive (nothing overflows the page body);
   this only adds a "there is more →" hint on the scroll CONTAINERS.
   ============================================================ */

/* .nx-hscroll = the /performance table card (its inline white bg was moved
   here so the scroll-shadow can layer on top). Base rule keeps the card
   white on every width; the shadow itself is mobile-only, below. */
.nx-hscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; background:#fff; }

@media (max-width:768px){
  /* Wide data-table wrappers: a soft shadow appears only on the edge that
     still hides columns (pure-CSS scroll shadow, background-attachment:local).
     In RTL the hidden columns are toward the left, so the left shadow shows
     until the user swipes there. Covers /performance (.nx-hscroll),
     /admin/templates (.tmpl-table wrap), /campaigns history (.cmp-tbl wrap),
     /admin/agents (.agent-perf-table) and the settings notifications matrix. */
  .nx-hscroll,
  div:has(> table.tmpl-table),
  div:has(> table.cmp-tbl),
  .agent-perf-table,
  .nt-matrix-wrap{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    background-color:#fff;
    background-image:
      linear-gradient(to right,#fff 32%,rgba(255,255,255,0)),
      linear-gradient(to left,#fff 32%,rgba(255,255,255,0)),
      radial-gradient(farthest-side at left center,rgba(28,38,78,.18),rgba(28,38,78,0)),
      radial-gradient(farthest-side at right center,rgba(28,38,78,.18),rgba(28,38,78,0));
    background-position:left center,right center,left center,right center;
    background-repeat:no-repeat;
    background-size:34px 100%,34px 100%,13px 100%,13px 100%;
    background-attachment:local,local,scroll,scroll;
  }

  /* Horizontally-scrolling tab / sub-nav strips: fade the leading (left, RTL)
     edge so the clipped last item reads as "scroll for more", not "cut off".
     Mask only dims pixels — it never touches layout or the pill background. */
  .set-tabs,
  body.nx-crystal-shell .nav-acc.open .nav-acc-body{
    -webkit-mask-image:linear-gradient(to left,#000 84%,transparent);
    mask-image:linear-gradient(to left,#000 84%,transparent);
  }
}


/* #17 mobile fix (2026-09-22): the /admin/templates table squeezed to fit its
   6 fixed columns (~857px) on narrow screens, starving the flexible "תבנית"
   column to ~0px so its text wrapped one character per line. Force the table to
   its real width on mobile so it SCROLLS inside its wrapper (like the agents
   table) and the content column keeps a readable width. */
@media (max-width:768px){
  .tmpl-table{ min-width:1080px; }
  .tmpl-table td, .tmpl-table th{ overflow-wrap:anywhere; }
}

/* mobile24: includes standalone login/recovery pages, not only the app shell.
   Keep pinch zoom available; use readable inputs instead of viewport locks. */
@media (pointer:coarse) {
  input:not([type=checkbox]):not([type=radio]), select, textarea {font-size:16px!important}
  button, a, input, select, textarea {touch-action:manipulation}
}