/* ══════════════════════════════════════════════════════════════
   WaTell - Light Luxury Theme
   Messenger Integration Platform for Bitrix24
   ══════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
    /* ── Backgrounds ── */
    --bg-primary: #F0F2F5;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #E4E8EC;
    --bg-hover: #E8EBEF;
    --bg-active: #D8DDE3;

    /* ── Sidebar ── */
    --sidebar-bg: #1A2332;
    --sidebar-bg-hover: #243044;
    --sidebar-bg-active: #2D3B50;
    --sidebar-text: #8899AA;
    --sidebar-text-active: #FFFFFF;
    --sidebar-border: #243044;
    --sidebar-accent: #00B8A9;

    /* ── Text ── */
    --text-primary: #1A2332;
    --text-secondary: #546478;
    --text-muted: #8899AA;
    --text-white: #FFFFFF;

    /* ── Accent (teal brand) ── */
    --accent-blue: #00B8A9;
    --accent-blue-hover: #009E92;
    --accent-blue-light: #E6F7F6;
    --accent-blue-soft: #CCF0EE;
    --accent-green: #00C48C;
    --accent-green-hover: #00A878;
    --accent-green-light: #E6FAF3;
    --accent-green-soft: #CCF5E7;

    /* ── Status ── */
    --success: #00C48C;
    --error: #FF6B6B;
    --warning: #FFB946;
    --info: #00B8A9;

    /* ── Borders ── */
    --border: #D0D6DD;
    --border-light: #E4E8EC;
    --border-focus: #00B8A9;

    /* ── Shadows (deeper, warmer) ── */
    --shadow-xs: 0 1px 2px rgba(26, 35, 50, 0.04);
    --shadow-sm: 0 2px 4px rgba(26, 35, 50, 0.06), 0 1px 2px rgba(26, 35, 50, 0.04);
    --shadow-md: 0 4px 16px rgba(26, 35, 50, 0.08);
    --shadow-lg: 0 8px 32px rgba(26, 35, 50, 0.10);
    --shadow-xl: 0 16px 48px rgba(26, 35, 50, 0.14);

    /* ── Radius (softer) ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ── Typography ── */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ── Layout ── */
    --sidebar-width: 260px;
    --sidebar-collapsed: 72px;

    /* ── Transitions ── */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* ════════════════════════════════════════════════════════════
       Design tokens (2026-05-12 visual refresh)

       Additive on top of the legacy --accent-* / --bg-* / --text-*
       above; existing components keep working. New work and refactors
       MUST source from this block - audit found 11 unique font sizes
       and 13+ ad-hoc spacing values, the new tokens are the cure.
       ════════════════════════════════════════════════════════════ */

    /* Spacing rhythm. 4px base, doubling. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Radius rhythm. Complements the legacy radius-sm/md/lg/xl. */
    --radius-xs: 4px;
    --radius-pill: 999px;
    --radius-bubble: 14px;
    --radius-avatar: 50%;

    /* Type scale - 5 steps, paired with line-height and weight. The
       legacy code base used 11 different font-sizes (10/10.5/11/
       11.5/12/12.5/13/13.5/14/15/16) - this scale replaces them.
       Use the matching ``--leading-*`` and ``--weight-*`` so
       refactors don't drop the visual rhythm. */
    --text-micro: 10.5px;   /* badges, ticks, time */
    --text-meta:  12px;     /* preview, filter pill */
    --text-body:  13.5px;   /* message text, inputs */
    --text-row:   14px;     /* chat row name */
    --text-h:     15.5px;   /* page heading */

    --leading-tight: 1.2;
    --leading-snug:  1.3;
    --leading-norm:  1.4;
    --leading-relax: 1.5;

    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;

    /* State semantics - operator triage at-a-glance.
       *-soft variants are the "tint" for row backgrounds, badges and
       chip fills; the bare colour is for borders, text and the 3px
       chat-row left rail. Reserve --state-urgent for SLA breach;
       don't decorate with it. */
    --state-mine:        #047857;
    --state-mine-soft:   #E6F4EE;
    --state-unassigned:  #B45309;
    --state-unassigned-soft: #FEF6E7;
    --state-others:      #6B5BD2;
    --state-others-soft: #EEEBFA;
    --state-urgent:      #DC2626;
    --state-urgent-soft: #FEE2E2;

    /* Platform brand colours. ONLY for the platform-badge dot on
       avatars; never as a section background or accent. */
    --brand-whatsapp:  #25D366;
    --brand-telegram:  #229ED9;
    --brand-viber:     #7360F2;
    --brand-instagram: #E1306C;
    --brand-facebook:  #1877F2;
    --brand-widget:    #00B8A9;  /* aliases --accent-blue for in-house web widget */
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
}

a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--accent-blue-hover);
}

/* ── Layout ────────────────────────────────────────────────── */
.app-layout {
    display: flex;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 32px;
    min-height: 100vh;
    /* 2026-05-27 overflow fix: without min-width:0 a flex child
       inherits min-width:auto = intrinsic content width. The chat
       UI's intrinsic width (chat-list 340 + chat-conversation
       intrinsic ~1100+) was propagating UP through the layout and
       inflating .app-layout past the viewport on 1366px laptops.
       Result: horizontal page scroll, content cut off until the
       operator zoomed out to 90%. min-width:0 lets this flex slot
       respect the viewport; max-width clamps it explicitly as
       belt-and-suspenders so any future deeply-nested wide element
       can't break the page. */
    min-width: 0;
    max-width: calc(100vw - var(--sidebar-width));
    overflow-x: hidden;
    transition: var(--transition);
    background: var(--bg-primary);
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #1A2332 0%, #151D2A 100%);
    border-right: none;
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: var(--transition);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2);
}

.sidebar-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-logo {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #00B8A9, #00C48C);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.5px;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0, 184, 169, 0.3);
}

.sidebar-logo,
.sidebar-header img {
    box-shadow: 0 2px 12px rgba(0, 184, 169, 0.3);
}

.sidebar-brand {
    font-size: 18px;
    font-weight: 700;
    color: #E8EDF3;
    letter-spacing: -0.5px;
}

.sidebar-brand span {
    color: #00B8A9;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    overflow-y: auto;
}

.nav-section {
    margin-bottom: 8px;
}

.nav-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #546478;
    padding: 8px 12px 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--sidebar-text);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
    position: relative;
}

.nav-item:hover {
    background: rgba(0, 184, 169, 0.08);
    color: #D0D6DD;
}

.nav-item.active {
    background: rgba(0, 184, 169, 0.12);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #00B8A9;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.nav-item .nav-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}
.nav-icon-img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(0.8);
    transition: filter 0.15s;
}
.nav-item:hover .nav-icon-img,
.nav-item.active .nav-icon-img {
    filter: brightness(0) invert(1);
}

.nav-item .nav-badge,
.nav-badge {
    margin-left: auto;
    background: #00B8A9;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    min-width: 20px;
    text-align: center;
    box-shadow: 0 0 8px rgba(0, 184, 169, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 8px rgba(0, 184, 169, 0.4); }
    50% { box-shadow: 0 0 14px rgba(0, 184, 169, 0.6); }
}

.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

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

.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #00B8A9, #00C48C);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 184, 169, 0.3);
}

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

.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #F1F5F9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-plan {
    font-size: 11px;
    font-weight: 600;
    color: #00B8A9;
}

/* ── Page Header ───────────────────────────────────────────── */
.page-header {
    margin-bottom: 24px;
}

.page-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.page-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 4px;
    letter-spacing: 0.1px;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.card-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ── Stats Cards ───────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--accent-blue);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    transition: box-shadow 0.2s ease;
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
}

.stat-card:nth-child(1) { border-left-color: #00B8A9; }
.stat-card:nth-child(2) { border-left-color: #00C48C; }
.stat-card:nth-child(3) { border-left-color: #FFB946; }
.stat-card:nth-child(4) { border-left-color: #7C5CFC; }

.stat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 12px;
}

.stat-card-icon.blue {
    background: rgba(0, 184, 169, 0.1);
    color: var(--accent-blue);
}

.stat-card-icon.green {
    background: rgba(0, 196, 140, 0.1);
    color: var(--accent-green);
}

.stat-card-icon.amber {
    background: rgba(255, 185, 70, 0.1);
    color: #D97706;
}

.stat-card-icon.purple {
    background: rgba(124, 58, 237, 0.1);
    color: #7C3AED;
}

.stat-card-icon.red {
    background: rgba(220, 38, 38, 0.1);
    color: #DC2626;
}

/* ── Shared icon utility ─────────────────────────────────── */
.icon-svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.icon-btn .icon-svg {
    width: 16px;
    height: 16px;
}

/* ── Unified choice-card (used by routing modes, claim modes, etc.) ── */
.choice-card {
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 20px 16px;
    background: var(--bg-secondary);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.choice-card:hover {
    border-color: #00B8A9;
}
.choice-card.active {
    border-color: #00B8A9;
    box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.1);
}
.choice-card input[type=radio] { display: none; }
.choice-card-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: var(--radius-md);
    background: rgba(0, 184, 169, 0.08);
    color: #00B8A9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.choice-card.active .choice-card-icon {
    background: #00B8A9;
    color: white;
}
.choice-card-icon .icon-svg { width: 22px; height: 22px; }
.choice-card-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--text-primary);
}
.choice-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.stat-card-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -1px;
    line-height: 1.2;
}

.stat-card-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}

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

.btn-primary {
    background: #00B8A9;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: background 0.2s ease;
}

.btn-primary:hover:not(:disabled) {
    background: #009E92;
}

.btn-primary:active:not(:disabled) {
    background: #008A7E;
}

.btn-success {
    background: var(--accent-green);
    color: white;
}

.btn-success:hover:not(:disabled) {
    background: var(--accent-green-hover);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-tertiary);
    border-color: #00B8A9;
    color: #00B8A9;
}

.btn-danger {
    background: #FF6B6B;
    color: white;
    border: none;
}

.btn-danger:hover:not(:disabled) {
    background: #EE5A5A;
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-md);
    padding: 8px 12px;
    transition: var(--transition-fast);
}

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

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
    border-radius: var(--radius-lg);
}

.btn-block {
    width: 100%;
}

/* ── Form Elements ─────────────────────────────────────────── */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

.form-label .required {
    color: var(--error);
    margin-left: 2px;
}

.form-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.form-input,
.form-select,
.form-textarea,
select.form-input,
textarea.form-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    outline: none;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: var(--text-muted);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: #00B8A9;
    box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.12);
    outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
}

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

.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-error {
    font-size: 12px;
    color: var(--error);
    margin-top: 4px;
}

/* ── Integration Cards ─────────────────────────────────────── */
.integration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.integration-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: box-shadow 0.2s ease;
}

.integration-card:hover {
    box-shadow: var(--shadow-md);
}

.integration-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.integration-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    overflow: hidden;
}

.integration-icon.whatsapp { background: #DCF8C6; color: #25D366; }
.integration-icon.telegram { background: #E3F2FD; color: #0088CC; }
.integration-icon.messenger { background: #EDE7F6; color: #0084FF; }

/* ── Messenger Icon Images ────────────────────────────────── */
.messenger-icon {
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
    border-radius: 50%;
}

.integration-icon .messenger-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
}

.chat-avatar {
    position: relative;
    width: 49px;
    height: 49px;
    flex-shrink: 0;
}

.avatar-img {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.avatar-placeholder {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: var(--bg-tertiary, #3A3F55);
    color: var(--text-secondary, #8B92A5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
}

.avatar-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--bg-secondary, #fff);
    background: var(--bg-secondary, #fff);
    object-fit: contain;
}

.chat-avatar .messenger-icon,
.chat-item-avatar .messenger-icon {
    width: 24px;
    height: 24px;
}

.chat-item-platform .messenger-icon {
    width: 12px !important;
    height: 12px !important;
}

.integration-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.integration-type {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Status Badges ─────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
    letter-spacing: 0.2px;
}

.badge-success {
    background: var(--accent-green-light);
    color: var(--accent-green);
}

.badge-error {
    background: #FEF2F2;
    color: var(--error);
}

.badge-warning {
    background: #FFFBEB;
    color: var(--warning);
}

.badge-info {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

.badge-muted {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ── Chat UI ───────────────────────────────────────────────── */
.chat-layout {
    display: flex;
    /* Was 100px back when there was a 80px page-header above. The
       header is gone (2026-05-12 refresh), so we recover those rows
       and clamp width so the right pane can't push past the visible
       column. */
    height: calc(100vh - 64px);
    width: 100%;
    max-width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.chat-list {
    width: 340px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.chat-list-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}

.chat-list-search {
    width: 100%;
    padding: 9px 14px 9px 36px;
    font-size: 13px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    outline: none;
    transition: var(--transition-fast);
}

.chat-list-search:focus {
    background: var(--bg-secondary);
    border-color: #00B8A9;
    box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.1);
}

.chat-list-items {
    flex: 1;
    overflow-y: auto;
}

.chat-item {
    /* Card-style row imported 2026-05-08 from the reference design.
       Old layout used a flat list with a 1px bottom-border divider;
       the redesign uses inset cards with subtle margin so the active
       row can lift forward with shadow + white background instead of
       a tinted full-width band. */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 4px 6px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    border-bottom: none;
    background: transparent;
}

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

.chat-item.active {
    background: var(--bg-primary, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-light, #e2e8f0);
    /* Compensate for the 1px border so the row doesn't shift. */
    margin: 4px 5px;
}

.chat-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chat-header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.chat-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.chat-time {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

.chat-time.chat-time-unread {
    color: #25D366;
    font-weight: 600;
}

.chat-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 3px;
}

.chat-last-msg {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.chat-preview-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-item.unread .chat-last-msg {
    color: var(--text-secondary);
}

/* Assigned-operator chip inside a chat-list item. Shown only to roles
   that can see multiple operators' chats (supervisors / QC / owner). */
.chat-assignee-row {
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
}
.chat-assignee {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    padding: 1px var(--space-2);
    font-size: var(--text-micro);
    line-height: 1.4;
    border-radius: var(--radius-pill);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-assignee__icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
}
/* Three triage states. Soft fill + matching foreground - rail on the
   .chat-item parent already does the heavy semantic lifting; the chip
   here just labels the row for clarity. */
.chat-assignee--unassigned {
    color: var(--state-unassigned);
    background: var(--state-unassigned-soft);
}
.chat-assignee--others {
    color: var(--state-others);
    background: var(--state-others-soft);
}
/* Legacy class kept so older renderers (mobile, iframe) don't break;
   acts as an alias for the unassigned chip. */
.chat-assignee--unclaimed {
    color: var(--state-unassigned);
    background: var(--state-unassigned-soft);
}

/* ── Chat row triage rail (2026-05-12 redesign) ─────────────────
   Each .chat-item has a 3px coloured left strip telling the operator
   at a glance which triage bucket it's in. Lives on a ::before so we
   don't have to change the existing grid layout. Implementations:
     mine       -> emerald (--state-mine)
     unassigned -> amber  (--state-unassigned)
     others     -> violet (--state-others)
   "mine" intentionally renders SLIGHTLY softer (1.5px) so the
   operator's own load isn't visually loud - "needs me" wins for
   eyes. */
.chat-item { position: relative; }
.chat-item::before {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    background: transparent;
    transition: background 120ms ease-out;
}
.chat-item--mine::before {
    background: var(--state-mine);
    width: 2px;
    opacity: 0.55;
}
.chat-item--unassigned::before {
    background: var(--state-unassigned);
}
.chat-item--others::before {
    background: var(--state-others);
    opacity: 0.55;
}

/* Phase 6 motion: brief pulse on the chat row when a new message
   lands. chat.js adds .chat-item--pulse to the affected row for
   600ms; the keyframes flash the row background through
   --state-mine-soft and back. One animated element per user action
   per the motion budget - no scattered micro-interactions. */
@keyframes chat-row-pulse {
    0%   { background: var(--state-mine-soft); }
    100% { background: transparent; }
}
.chat-item--pulse {
    animation: chat-row-pulse 600ms ease-out;
}

/* Message status checkmarks */
.msg-status {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 1px;
}

/* Media type icon in preview */
.msg-media-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Unread badge — small colored circle */
.chat-unread-badge {
    background: #25D366;
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Legacy classes kept for compatibility */
.chat-item-avatar {
    width: 49px;
    height: 49px;
    border-radius: var(--radius-full);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    position: relative;
}

.chat-item-platform {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 1.5px solid var(--bg-secondary);
    box-shadow: var(--shadow-xs);
}

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

.chat-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-item-preview {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
}

.chat-item-meta {
    text-align: right;
    flex-shrink: 0;
}

.chat-item-time {
    font-size: 12px;
    color: var(--text-muted);
}

.chat-item-unread {
    background: #25D366;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    margin-top: 4px;
    display: inline-block;
}

/* Chat conversation area */
.chat-conversation {
    /* min-width:0 lets the flex item shrink below its intrinsic
       content width. Without this a long chat-conversation header
       (CRM dropdown, contact info button, more menu) forces the
       pane wider than its allocated space - which then pushes the
       empty state's centered "Выберите чат" content past the
       viewport's right edge. Reported 2026-05-12. */
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-conversation-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 2026-05-12 overflow fix: the header packs avatar + name +
       related-chats-bar + CRM dropdown + contact button + more menu.
       Without min-width:0 + gap + flex children that can shrink, the
       contents force the pane wider than its parent flex slot, which
       pushes the empty state's centered content off-screen on
       narrow viewports. */
    gap: var(--space-2);
    min-width: 0;
    overflow: hidden;
    flex-shrink: 0;
}

/* The left "avatar + contact name" cluster. Must shrink without
   refusing - long contact names get ellipsis instead of forcing the
   row to overflow. */
.chat-conversation-header > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}
.chat-header-main--clickable {
    cursor: pointer;
    border-radius: var(--radius-md);
}
.chat-header-main--clickable:hover {
    background: var(--bg-tertiary);
}
#chat-contact-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Related-chats bar (other-platform chats for the same contact).
   Pills clipped into the CRM button before because max-width:280px +
   overflow:hidden hard-cut the trailing pill mid-pixel. Now we use
   horizontal scroll inside the bar so every pill remains reachable
   (drag or shift-wheel), with a soft fade on the right edge as a
   visual hint. Wider cap on big screens, narrower on small ones,
   hidden entirely on very narrow viewports. */
#related-chats-bar {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 360px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Fade the right edge so the operator can SEE there's more to
       scroll towards, instead of guessing why a pill is half-cut. */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
}
#related-chats-bar::-webkit-scrollbar { display: none; }
#related-chats-bar > * { flex-shrink: 0; }
@media (min-width: 1400px) {
    #related-chats-bar { max-width: 480px; }
}
@media (max-width: 1100px) {
    #related-chats-bar { display: none !important; }
}

/* ── Chat Header Buttons ──────────────────────────────── */
/* The right "actions" cluster (CRM dropdown / Contact / More menu).
   flex-shrink:0 keeps it on screen even when the contact name is
   eating all leading space. */
.chat-header-actions {
    flex-shrink: 0;
    gap: var(--space-2);
}
.chat-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 36px;
    min-height: 36px;
    padding: 6px 10px;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}
.chat-header-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.chat-header-btn--close:hover {
    background: #FEE2E2;
    color: #DC2626;
}
.chat-header-btn--danger {
    color: var(--error);
}
.chat-header-btn--danger:hover {
    background: #FEE2E2;
    color: #DC2626;
}
.chat-header-btn .icon-svg {
    flex-shrink: 0;
}

/* CRM dropdown menu */
.crm-dropdown-menu {
    display: none;
    /* position: fixed (not absolute) so the menu escapes the
       chat-conversation-header's overflow:hidden clipping context.
       Without this the dropdown was rendered correctly but visually
       cut off at the header's bottom edge (it looked like it opened
       'under' #messages-container). JS sets top/right inline at open
       time via getBoundingClientRect on the anchor wrapper. */
    position: fixed;
    z-index: 9000;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    padding: 4px 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.crm-dropdown-menu.open {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* CRM dropdown menu items */
.crm-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-fast);
}
.crm-menu-item:hover {
    background: var(--bg-tertiary);
}
.crm-menu-icon {
    display: inline-flex;
    color: var(--text-muted);
}

/* "Open existing Bitrix entity" menu row - single clickable <a> with
   stacked label + short URL caption. Rendering as a link (rather than
   a button + sibling URL) keeps right-click / middle-click / "copy
   link address" working out of the box. */
.crm-menu-row-open {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
}
.crm-menu-row-open:hover {
    background: var(--bg-tertiary);
    text-decoration: none;
}
.crm-menu-row-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.crm-menu-row-label {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-primary);
}
/* Legacy ``.chat-list-channel-filter`` <select> removed 2026-05-12 -
   the channel selector is now the leading pill inside the folder
   rail (``cf-pill--channel``), opening a popover instead of a native
   <select>. Lets us use SVG icons + brand colour per row. */

/* Leading "Канал" pill inside the folder rail. Tighter than the
   system pills, with an extra chevron at the right edge to read as
   a dropdown trigger.

   ``position: sticky; left: 0`` pins it to the left edge of the
   horizontally-scrollable rail (2026-05-12 fix - reported "channel
   pill disappears when clicking Unread"). Clicking a later pill
   auto-scrolls the rail to bring that pill into view, pushing the
   first child out of sight; sticky keeps the channel context always
   reachable. A solid background + 1px hairline mask the pills
   scrolling beneath. */
.cf-pill--channel {
    position: sticky;
    left: 0;
    z-index: 2;
    padding: 4px 6px 4px 9px;
    gap: var(--space-1);
    background: var(--bg-secondary, #fff);
    border-color: var(--border-light, #e2e8f0);
    box-shadow: 2px 0 6px -4px rgba(15, 23, 42, 0.18);
}
.cf-pill--channel .cf-icon { line-height: 0; }
.cf-pill--channel .cf-chev {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted, #94a3b8);
}
.cf-pill--channel:hover { background: var(--bg-hover, #f1f5f9); }
.cf-pill--channel.cf-pill--active {
    /* Use the existing emerald token rather than the legacy hex.
       The "Канал" pill is only "active" when a specific channel is
       selected (i.e. not "All channels"), so the emerald reads as
       "scope is narrowed" - matching the .state-mine semantics. */
    background: var(--state-mine-soft);
    border-color: var(--state-mine);
    color: var(--state-mine);
}

/* Popover anchored under the channel pill. Position is set inline
   by chat.js#openChannelPicker via getBoundingClientRect, so this
   block only controls visuals + the column layout for rows. */
.chat-channel-picker {
    position: absolute;
    z-index: 1080;
    min-width: 220px;
    max-width: 320px;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
    padding: var(--space-1) 0;
}
.chat-channel-picker[hidden] { display: none; }
.chat-channel-picker .cp-section {
    font-size: var(--text-micro);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #94a3b8);
    padding: var(--space-2) var(--space-3) var(--space-1);
}
.chat-channel-picker .cp-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-meta);
    color: var(--text-primary);
}
.chat-channel-picker .cp-row:hover { background: var(--bg-hover, #f1f5f9); }
.chat-channel-picker .cp-row--active {
    background: var(--state-mine-soft);
    color: var(--state-mine);
}
.chat-channel-picker .cp-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px; height: 18px;
}
.chat-channel-picker .cp-row__label { flex: 1; min-width: 0; }
/* Two-line layout for rows that carry an owner name (personal /
   operator channels). Primary line = "First Last", secondary line =
   integration label in muted size. Falls back gracefully when the
   row only has a label (shared channels) - .cp-row__text contains
   just the primary span and looks identical to the single-line case. */
.chat-channel-picker .cp-row__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
.chat-channel-picker .cp-row__text .cp-row__label {
    flex: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-channel-picker .cp-row__sub {
    font-size: var(--text-micro);
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-channel-picker .cp-row__status {
    font-size: var(--text-micro);
    color: var(--state-urgent);
    text-transform: lowercase;
}
.chat-channel-picker .cp-divider {
    height: 1px;
    background: var(--border-light, #e2e8f0);
    margin: var(--space-1) var(--space-2);
    opacity: 0.6;
}

.crm-menu-row-sub {
    font-size: 10.5px;
    line-height: 1.2;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-menu-ext {
    color: var(--text-muted);
    display: inline-flex;
    flex-shrink: 0;
}
.crm-menu-sep {
    height: 1px;
    background: var(--border-light);
    margin: 4px 8px;
    opacity: 0.5;
}
.crm-dropdown-menu {
    /* Existing entities + create fallbacks can be tall; let the menu
       scroll instead of getting clipped on short viewports. */
    max-height: 70vh;
    overflow-y: auto;
}

/* ── Confirmation Modal ──────────────────────────────── */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: confirmFadeIn 0.15s ease;
}
@keyframes confirmFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.confirm-modal {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 420px;
    width: calc(100% - 32px);
    padding: 24px;
    animation: confirmSlideIn 0.15s ease;
}
@keyframes confirmSlideIn {
    from { transform: translateY(-8px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.confirm-icon-area {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.confirm-icon-area--danger {
    background: #FEE2E2;
    color: #DC2626;
}
.confirm-icon-area--default {
    background: var(--accent-blue-soft);
    color: var(--accent-blue);
}
.confirm-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.confirm-message {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
}
.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.confirm-actions .btn {
    min-width: 90px;
}
.confirm-modal .btn-danger {
    background: #FF6B6B;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}
.confirm-modal .btn-danger:hover {
    background: #EE5A5A;
}
.btn-cancel {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-cancel:hover {
    background: var(--bg-active);
    color: var(--text-primary);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-message {
    max-width: 70%;
    padding: 10px 16px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    line-height: 1.5;
    position: relative;
}

.chat-message.incoming {
    align-self: flex-start;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    border-radius: 16px 16px 16px 4px;
}

.chat-message.outgoing {
    align-self: flex-end;
    background: linear-gradient(135deg, #00B8A9, #009E92);
    color: white;
    border-radius: 16px 16px 4px 16px;
}

.chat-message-time {
    font-size: 11px;
    opacity: 0.6;
    margin-top: 4px;
}

.chat-input-area {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.chat-input {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    font-family: var(--font);
    background: var(--bg-tertiary);
    border: 1.5px solid transparent;
    border-radius: var(--radius-xl);
    outline: none;
    resize: none;
    max-height: 120px;
    min-height: 42px;
    transition: var(--transition-fast);
}

.chat-input:focus {
    background: var(--bg-secondary);
    border-color: #00B8A9;
}

.chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.chat-send-btn:hover {
    background: var(--accent-blue-hover);
    transform: scale(1.05);
}

.chat-send-btn svg {
    width: 18px;
    height: 18px;
}

/* ── Empty States ──────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state-text {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 400px;
    line-height: 1.5;
}

/* ── Auth Pages ────────────────────────────────────────────── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2332 0%, #151D2A 100%);
    padding: 20px;
}

.auth-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-light);
}

.auth-logo {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #00B8A9, #00C48C);
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.auth-logo-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.auth-logo-text span {
    color: var(--accent-blue);
}

.auth-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-footer a {
    color: var(--accent-blue);
    font-weight: 600;
}

.auth-error {
    background: #FEF2F2;
    color: var(--error);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    margin-bottom: 16px;
    display: none;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ── Tables ────────────────────────────────────────────────── */
.table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

th {
    background: var(--bg-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid var(--border-light);
}

td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    color: var(--text-primary);
}

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

tr:last-child td {
    border-bottom: none;
}

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success {
    background: var(--accent-green-light);
    color: #065F46;
    border: 1px solid var(--accent-green-soft);
}

.alert-error {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FEE2E2;
}

.alert-warning {
    background: #FFFBEB;
    color: #92400E;
    border: 1px solid #FEF3C7;
}

.alert-info {
    background: var(--accent-blue-light);
    color: #047A72;
    border: 1px solid var(--accent-blue-soft);
}

/* ── Spinner ───────────────────────────────────────────────── */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top: 4px solid var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 20px auto;
}

.spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── QR Code Display ──────────────────────────────────────── */
.qr-code-container {
    text-align: center;
    padding: 20px;
}

.qr-code-container img {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-width: 300px;
    width: 100%;
    height: auto;
}

.qr-instructions {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 12px;
    line-height: 1.5;
}

/* ── Verification Code Input ──────────────────────────────── */
.code-input {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 8px;
    font-family: var(--font-mono);
    padding: 12px 20px;
}

/* ── Alert Variants (used in modals) ──────────────────────── */
.alert-danger {
    background: #FEF2F2;
    color: #DC2626;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid #FEE2E2;
}

/* ── Badge secondary ──────────────────────────────────────── */
.badge-secondary {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.badge-danger {
    background: #FEF2F2;
    color: var(--error);
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-fadeIn {
    animation: fadeIn 0.4s ease-out;
}

.animate-slideIn {
    animation: slideIn 0.3s ease;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ── Sidebar Toggle Button (mobile hamburger) ────────────── */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.sidebar-toggle:hover {
    background: var(--bg-hover);
}

.sidebar-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 1px;
    transition: var(--transition-fast);
    position: relative;
}

.sidebar-toggle span::before,
.sidebar-toggle span::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 1px;
    position: absolute;
    left: 0;
    transition: var(--transition-fast);
}

.sidebar-toggle span::before {
    top: -6px;
}

.sidebar-toggle span::after {
    top: 6px;
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-open .sidebar-overlay {
    display: block;
    opacity: 1;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar-toggle {
        display: flex;
    }

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar-open .sidebar,
    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        padding: 16px;
        padding-top: 64px;
    }

    .page-header .page-title,
    .page-header h1 {
        font-size: 20px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .integration-grid {
        grid-template-columns: 1fr;
    }

    .chat-layout {
        flex-direction: column;
        height: calc(100vh - 80px);
    }

    .chat-list {
        width: 100%;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .chat-message {
        max-width: 85%;
    }

    /* Tables: horizontal scroll */
    .table-wrapper {
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }

    /* Modals: near full-width on mobile */
    .modal {
        width: 95%;
        max-width: 95%;
        margin: 10px;
    }

    .auth-card {
        padding: 24px;
        width: 95%;
    }

    .emoji-picker {
        width: 280px;
        right: 10px;
    }

    .card {
        padding: 16px;
    }

    .stat-card-value {
        font-size: 22px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .page-header .page-title,
    .page-header h1 {
        font-size: 18px;
    }

    .main-content {
        padding: 12px;
        padding-top: 60px;
    }

    .chat-message {
        max-width: 90%;
    }
}

/* ──────────────────────────────────────────────────────────
   Chat Folder Rail (Pin+Folders sprint, 2026-05-10)
   System pills (All / Unread / Pinned / Mine) + custom personal
   + shared folders + "+ New". Horizontally scrollable, scrollbar
   hidden, emerald active state to match the iframe sidebar tabs.
   ────────────────────────────────────────────────────────── */
.chat-folder-rail {
    /* Wrapped in a relative positioned shell so the right-edge fade
       pseudo-element can sit above the last pill and signal "there's
       more content - scroll right". Without the hint, users see
       "Закреплённые" half-cut and assume the rail is broken instead
       of swipe/scrolling it.  Sidebar is narrow (~290px) and 4 system
       pills + a "+ Новая папка" tag don't fit at once. */
    display: flex;
    gap: 4px;
    margin-top: 10px;
    margin-bottom: 4px;          /* breathing room above the chat list */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 2px 2px 0;      /* room for active-state border on top + bottom */
    align-items: center;
    min-height: 32px;            /* prevent height jitter while folders load */
    /* Soft fade on the right edge so the operator sees the pill list
       continues. mask-image is supported in every browser we target. */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.chat-folder-rail::-webkit-scrollbar { display: none; }
.cf-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Slightly tighter than the original 5px/10px so 4 system pills +
       "Новая папка" fit visibly more often without breaking the rail
       into wrap mode. */
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card, #fff);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 500;
    font-family: var(--font);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
}
/* Narrow-sidebar fix (2026-05-12). With channel pill + 4 system pills
   + "+ New", Russian labels "Непрочитанные"/"Закреплённые" alone push
   the rail to ~540px - far past the 340px chat-list width. Hide the
   label on INACTIVE system pills (icon-only with tooltip) and on the
   "+" button (the plus glyph is universal). The active pill keeps its
   label so the operator always sees the current scope. */
.cf-pill--system:not(.cf-pill--active) .cf-label { display: none; }
.cf-pill--system:not(.cf-pill--active) {
    padding: 4px 7px;
    gap: 0;
}
.cf-pill--new .cf-label { display: none; }
.cf-pill--new {
    padding: 4px 7px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}
.cf-pill:hover {
    background: var(--bg-hover, #f1f5f9);
    color: var(--text);
}
.cf-pill--active {
    background: rgba(4, 120, 87, 0.10);
    border-color: #047857;
    color: #047857;
}
.cf-pill .cf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.cf-pill .cf-count {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.10);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
.cf-pill--active .cf-count {
    background: #25D366;
    color: #fff;
}
.cf-pill--new {
    border-style: dashed;
    color: var(--text-secondary);
}
.cf-pill .cf-shared-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2AABEE;
    margin-right: 2px;
}
.cf-divider {
    flex-shrink: 0;
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: auto 2px;
}

/* Pin marker on chat-item time strip */
.chat-item.cf-pinned { background: rgba(4, 120, 87, 0.04); }
.cf-pin-marker { display: inline-flex; align-items: center; color: #047857; }

/* DnD visual states */
.chat-item.cf-dragging { opacity: 0.4; }
.chat-item.cf-drop-target { box-shadow: inset 0 2px 0 0 #047857; }

/* ── Folder modal ─────────────────────────────────────────── */
.cf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.cf-modal {
    background: var(--bg-card, #fff);
    color: var(--text);
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}
.cf-modal__title {
    font-size: 16px;
    font-weight: 700;
}
.cf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.cf-field--row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 13px;
}
.cf-field input[type="text"], .cf-field select {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg, #fff);
    color: var(--text);
    font: inherit;
}
.cf-modal__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cf-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.cf-btn--primary {
    background: #047857;
    color: #fff;
}
.cf-btn--primary:hover { background: #036046; }
.cf-btn--ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-secondary);
}
.cf-btn--ghost:hover { background: var(--bg-hover, #f1f5f9); }
.cf-btn--danger {
    background: transparent;
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}
.cf-btn--danger:hover { background: rgba(239, 68, 68, 0.08); }

/* ── Pop menus (folder right-click + chat right-click) ────── */
.cf-popmenu {
    position: fixed;
    z-index: 10000;
    min-width: 180px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 13px;
    color: var(--text);
}
.cf-popmenu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.cf-popmenu button:hover { background: var(--bg-hover, #f1f5f9); }
.cf-popmenu__danger { color: #ef4444 !important; }
.cf-popmenu__sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.cf-popmenu__sub {
    padding-left: 16px !important;
    font-size: 12.5px !important;
    color: var(--text-secondary) !important;
}
.cf-chatmenu { min-width: 220px; }


/* ── Legacy Chat Filters (kept for any leftover deep-link calls) ── */
.chat-filters {
    display: flex;
    gap: 4px;
    margin-top: 10px;
}

.chat-filter-btn {
    flex: 1;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.chat-filter-btn:hover {
    background: var(--bg-hover);
}

.chat-filter-btn.active {
    background: #00B8A9;
    color: white;
    border-color: #00B8A9;
}

/* ── Chat Attach & Emoji & Mic Buttons ────────────────────── */
.chat-attach-btn,
.chat-emoji-btn,
.chat-mic-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;  /* prevent scroll on press-and-hold for mobile */
}

.chat-attach-btn:hover,
.chat-emoji-btn:hover,
.chat-mic-btn:hover {
    background: var(--bg-tertiary);
    color: var(--accent-blue);
}

.chat-mic-btn[data-recording="1"] {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.12);
}

/* ── Voice record / preview bars (modern WA/Telegram-style) ─── */
.voice-record-bar,
.voice-preview-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
}
.voice-record-bar .voice-record-pulse {
    width: 10px; height: 10px; border-radius: 50%;
    background: #EF4444;
    animation: voicePulse 1s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes voicePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.8); }
}
.voice-record-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 48px;
}
.voice-record-hint {
    flex: 1;
    color: var(--text-muted);
    font-size: 13px;
}

/* Preview bar: rounded "pill" with play button + progress + duration.
   Replaces the stock <audio controls> chrome (which looks dated and
   inconsistent across browsers). The native <audio> element stays in
   the DOM as the audio source/state, but is hidden (.voice-preview-audio
   gets display:none); we render a custom UI driven by JS. */
.voice-preview-bar {
    gap: 12px;
}
.voice-preview-audio {
    display: none;
}
.voice-preview-pill {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(59,130,246,0.04));
    border: 1px solid rgba(59,130,246,0.15);
    min-height: 44px;
    user-select: none;
}
.voice-preview-play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--accent-blue, #3B82F6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.1s ease, background 0.15s ease;
}
.voice-preview-play:hover { transform: scale(1.04); }
.voice-preview-play:active { transform: scale(0.96); }
.voice-preview-play svg { display: block; }
.voice-preview-progress {
    flex: 1;
    height: 4px;
    background: rgba(59,130,246,0.18);
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.voice-preview-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-blue, #3B82F6);
    border-radius: 999px;
    transition: width 0.05s linear;
}
.voice-preview-time {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    min-width: 36px;
    text-align: right;
}

.voice-cancel-btn,
.voice-stop-btn,
.voice-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.1s ease, background 0.15s ease;
}
.voice-cancel-btn {
    background: transparent;
    color: var(--text-secondary);
}
.voice-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
    transform: scale(1.06);
}
.voice-stop-btn {
    background: #EF4444;
    color: #fff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}
.voice-stop-btn:hover { transform: scale(1.06); }
.voice-send-btn {
    background: var(--accent-blue, #3B82F6);
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}
.voice-send-btn:hover { transform: scale(1.06); }
.voice-send-btn:active { transform: scale(0.94); }

/* ── File Preview ─────────────────────────────────────────── */
.chat-file-preview {
    padding: 10px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-tertiary);
}

#file-preview-content {
    display: flex;
    align-items: center;
    min-width: 0;
}

.file-preview-thumb {
    position: relative;
    display: inline-flex;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}

.file-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-preview-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: min(420px, 100%);
    padding: 6px 34px 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.file-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.72);
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    padding: 0;
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease;
}

.file-preview-thumb:hover .file-preview-remove,
.file-preview-thumb:focus-within .file-preview-remove,
.file-preview-chip:hover .file-preview-remove,
.file-preview-chip:focus-within .file-preview-remove {
    opacity: 1;
}

.file-preview-remove:hover {
    background: var(--error);
    color: #fff;
}

/* ── Emoji Picker ─────────────────────────────────────────── */
.emoji-picker {
    position: absolute;
    bottom: 60px;
    right: 50px;
    width: 320px;
    max-height: 320px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    padding: 12px;
    z-index: 100;
}

.emoji-category-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0 4px;
    margin-top: 4px;
}

.emoji-category-label:first-child {
    margin-top: 0;
    padding-top: 0;
}

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

.emoji-grid button {
    font-size: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    line-height: 1;
}

.emoji-grid button:hover {
    background: var(--bg-tertiary);
    transform: scale(1.15);
}

/* ── Typing Indicator ─────────────────────────────────────── */
.typing-active {
    color: var(--accent-green) !important;
    animation: typingPulse 1.5s ease-in-out infinite;
}

@keyframes typingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Message styles (inline) ──────────────────────────────── */
.message {
    /* Was 70% - too tight, 2-3 word replies broke onto a new line
       on typical 1200px+ chat columns. 78% gives a comfortable
       reading line (~60-70 chars/line) without letting bubbles
       stretch all the way across like email. Phone breakpoints
       below further widen this to 85-90%. */
    max-width: 78%;
    /* Compact vertical padding so a single-line message stays short.
       Bubble auto-grows when content adds rows (e.g. reactions chip
       below the meta line). */
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    line-height: 1.4;
    position: relative;
    animation: fadeIn 0.2s ease;
}

.message-incoming {
    align-self: flex-start;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    border-radius: 16px 16px 16px 4px;
}

.message-outgoing {
    align-self: flex-end;
    /* Solid emerald-700 (#047857) - imported 2026-05-08 from the
       reference design the user wanted to mirror. Replaces the old
       teal gradient (#2DD4BF -> #14B8A6) for a more saturated,
       professional WaTell-green look that also unifies with the
       Bitrix iframe (which used a clashing blue) and the mobile
       bubble (which used WhatsApp cream). All three surfaces now
       speak the same emerald.
       Existing .message-outgoing .X rules use rgba(255,...) overlays
       on white text, which read just as well on dark green as on the
       previous mid-teal - no cascade fixes needed. */
    background: #047857;
    color: white;
    border-radius: 16px 16px 4px 16px;
}

.message-sender {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-blue);
    margin-bottom: 4px;
}

.message-outgoing .message-sender {
    color: rgba(255,255,255,0.8);
}

.message-text {
    word-wrap: break-word;
    white-space: pre-wrap;
}

.message-meta {
    /* WhatsApp-style: time + checkmark float bottom-right of the bubble
       so a single-word message stays one line tall. The trailing
       margin-left pulls the meta off the text without forcing a new
       line; the negative bottom/right offsets pin it tight to the
       corner so it doesn't add to the bubble's perceived padding. */
    font-size: 10px;
    opacity: 0.7;
    float: right;
    margin: 4px 0 -2px 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
    white-space: nowrap;
}
/* Reactions row (and any other block below content) must clear the
   floated meta so they don't overlap. */
.reactions-row {
    clear: both;
}

.message-media img,
.message-media video {
    display: block;
    margin-bottom: 4px;
}

.file-link {
    color: inherit;
    text-decoration: underline;
    font-weight: 500;
}

.message-outgoing .file-link {
    color: white;
}

/* ── Message Media Container ─────────────────────────────── */
.message-media {
    margin: 4px 0;
    max-width: 300px;
    border-radius: 12px;
    overflow: hidden;
}

.message-media img {
    display: block;
    max-width: 100%;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.message-media img:hover {
    opacity: 0.9;
}

.message-media video {
    display: block;
    max-width: 100%;
    border-radius: 8px;
}

.message-media audio {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 4px 0;
}

/* ── Message File ────────────────────────────────────────── */
.message-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    margin: 4px 0;
    max-width: 280px;
}

.message-file .file-icon {
    font-size: 24px;
    flex-shrink: 0;
}

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

.message-file .file-name {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-file .file-size {
    font-size: 11px;
    color: var(--text-muted);
}

.message-outgoing .message-file {
    background: rgba(255, 255, 255, 0.15);
}

.message-outgoing .message-file .file-name {
    color: white;
}

/* ── Image/Video Thumbnails ──────────────────────────── */
.msg-image-thumb {
    max-width: 280px;
    border-radius: 12px;
    cursor: pointer;
    transition: opacity 0.15s ease;
    display: block;
}
.msg-image-thumb:hover {
    opacity: 0.88;
}
.msg-video-thumb {
    max-width: 280px;
    border-radius: 12px;
    display: block;
}

/* ── Video card (regular video bubble) ─────────────────
   Rectangular thumbnail with a centered play button overlay.
   Click anywhere -> openVideoPopup for the full lightbox player.
   2026-05-21: replaces the plain <video controls> bubble. */
.msg-video-card {
    position: relative;
    max-width: 280px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #0a0a0a;
    line-height: 0;
    transition: transform 0.15s ease;
}
.msg-video-card:hover { transform: scale(1.01); }
.msg-video-card__poster,
.msg-video-card .msg-video-poster {
    width: 100%;
    max-width: 280px;
    max-height: 360px;
    display: block;
    object-fit: cover;
}
.msg-video-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg, rgba(0,0,0,0.25), rgba(0,0,0,0.1));
    pointer-events: none;
}
.msg-video-card__play {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px; /* visually centre the triangle */
    pointer-events: none;
    backdrop-filter: blur(4px);
}
.msg-video-card--err::before {
    content: "\1F3AC video unavailable";
    display: block;
    padding: 20px;
    color: #fff;
    font-size: 13px;
}

/* ── Video note bubble overrides ────────────────────────
   When a message contains a video note (PTV), drop the chat-bubble
   chrome around it - background, border, padding, max-width corner
   radius. The circle should "float" without a rectangular frame, the
   way WhatsApp shows it. Meta strip (timestamp + read checks) stays
   visible as plain text underneath. data-content-type is already
   emitted by chat.js renderMessage on every .message wrapper. */
.message[data-content-type="video_note"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: 200px;
    box-shadow: none !important;
}
.message[data-content-type="video_note"] .message-media {
    margin: 0;
}
/* Meta (timestamp / ack ticks / edited badge) needs to be readable
   on whatever the chat background is, since we no longer have the
   bubble's solid fill behind it. Small inline pill works on both
   light and dark themes. */
.message[data-content-type="video_note"] .message-meta {
    margin-top: 4px;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    display: inline-flex;
    font-size: 11px;
}
.message-outgoing[data-content-type="video_note"] .message-meta {
    background: rgba(0, 0, 0, 0.08);
    align-self: flex-end;
}
.message-outgoing[data-content-type="video_note"] {
    align-items: flex-end;
}

/* ── Video note (PTV circular bubble) ───────────────────
   WhatsApp's "кружочек" - sent via long-press on the camera icon.
   180x180 circular thumbnail with the play badge in the centre. */
.msg-video-note {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background: #0a0a0a;
    line-height: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.15s ease;
}
.msg-video-note:hover { transform: scale(1.02); }
.msg-video-note__poster,
.msg-video-note .msg-video-note__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.msg-video-note__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.18);
    pointer-events: none;
}
.msg-video-note__overlay svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    margin-left: 3px;
}
.msg-video-note--err::before {
    content: "video unavailable";
    color: #fff;
    font-size: 12px;
    display: block;
    text-align: center;
    padding-top: 80px;
}

/* ── Video popup (lightbox) ─────────────────────────────
   Shared by both regular video and circular video notes.
   .video-popup--circular adds the circular crop variant. */
.video-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    cursor: zoom-out;
}
.video-popup-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 1;
}
.video-popup-video {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 8px;
    display: block;
    background: #000;
}
.video-popup--circular .video-popup-video {
    width: min(70vh, 70vw);
    height: min(70vh, 70vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}

/* Circular-variant custom player: a wrapper sized to the video, an
   SVG ring overlaid around it for progress, and a center icon that
   shows when paused. Inspired by WhatsApp mobile's PTV player. */
.video-popup--circular .video-popup-player-wrap {
    position: relative;
    width: min(70vh, 70vw);
    height: min(70vh, 70vw);
    display: inline-block;
}
.video-popup--circular .video-popup-player-wrap .video-popup-video {
    width: 100%;
    height: 100%;
}
.video-popup-ring {
    position: absolute;
    /* Slightly outside the circle so the stroke doesn't clip on the
       video edge. The 6px expansion + 2-unit stroke (in viewBox) reads
       as a thin elegant ring on a 600px+ player. */
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    pointer-events: none;
    /* Rotate so the dash sweep starts at the 12 o'clock position. */
    transform: rotate(-90deg);
}
.video-popup-ring__bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 0.8;
}
.video-popup-ring__progress {
    fill: none;
    stroke: #25D366;
    stroke-width: 1.1;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.15s linear;
}
.video-popup-center-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.video-popup-actions {
    position: absolute;
    top: -48px;
    right: 0;
    display: flex;
    gap: 8px;
}
.video-popup-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
}
.video-popup-btn:hover { background: rgba(255, 255, 255, 0.28); }

/* ── File Card ───────────────────────────────────────── */
.message-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    max-width: 280px;
}
.message-outgoing .message-file-card {
    background: rgba(255, 255, 255, 0.15);
}
.message-file-icon {
    flex-shrink: 0;
    color: var(--accent-blue);
    display: flex;
}
.message-file-info {
    flex: 1;
    min-width: 0;
}
.message-file-name {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.message-outgoing .message-file-name {
    color: white;
}
.message-file-dl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--accent-blue);
    flex-shrink: 0;
    transition: var(--transition-fast);
}
.message-file-dl:hover {
    background: var(--accent-blue-soft);
}

/* ── Message Status Indicators ───────────────────────────── */
.message-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 0;
    line-height: 1;
}

/* Status checkmarks on the lighter outgoing bubble. */
.message-outgoing .msg-status:not(.read) svg path {
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 2;
}
/* Read state: the inline SVG hard-codes #53bdeb (sky), and the
   pre-2026-05-08 override used #1E3A8A (navy) tuned for the teal
   bubble. After switching to emerald-700 (#047857) navy is
   ~1.7:1 contrast - nearly invisible. Sky-300 reads as the
   familiar 'blue ticks' but stays bright enough on dark green
   (~5:1 contrast). */
.message-outgoing .msg-status.read svg path {
    stroke: #7DD3FC;
    stroke-width: 2.4;
}

.message-outgoing .message-time {
    color: rgba(255, 255, 255, 0.85);
    justify-content: flex-end;
}

.message-status-icon {
    font-size: 12px;
}

/* ── Location Card ───────────────────────────────────────── */
.message-location {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-hover);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
    max-width: 260px;
}

.message-location:hover {
    background: var(--bg-active);
}

/* ── Sticker ─────────────────────────────────────────────── */
.message-sticker img {
    max-width: 180px;
    max-height: 180px;
    background: transparent;
}

/* ── Contact Card ────────────────────────────────────────── */
.message-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-hover);
    border-radius: 12px;
    max-width: 260px;
}

/* ── Image Popup Overlay ─────────────────────────────────── */
.image-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: pointer;
    animation: fadeIn 0.2s ease;
}

.image-popup-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ── Voice Player (WhatsApp-style, compact) ───────────── */
.voice-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px;       /* was 8px/6px - too tall in messages */
    min-width: 240px;
    max-width: 340px;
}
.voice-player audio { display: none; }

.voice-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #25D366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 1px 3px rgba(37, 211, 102, 0.22);
}
.voice-play-btn svg { width: 16px; height: 16px; }
.voice-play-btn:hover { background: #1da851; }
.voice-play-btn:active { transform: scale(0.92); }
.message-outgoing .voice-play-btn { background: rgba(255,255,255,0.25); }
.message-outgoing .voice-play-btn:hover { background: rgba(255,255,255,0.35); }

.voice-speed-btn {
    flex-shrink: 0;
    min-width: 34px;
    height: 24px;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.voice-speed-btn:hover { background: rgba(15, 23, 42, 0.14); }
.message-outgoing .voice-speed-btn {
    background: rgba(255,255,255,0.20);
    color: rgba(255,255,255,0.92);
}
.message-outgoing .voice-speed-btn:hover { background: rgba(255,255,255,0.30); }

.voice-wave-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.voice-wave {
    position: relative;
    height: 24px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
}
.voice-wave-progress {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: rgba(37, 211, 102, 0.25);
    border-radius: 4px;
    transition: width 0.1s linear;
    z-index: 1;
}
.message-outgoing .voice-wave-progress {
    background: rgba(255,255,255,0.2);
}

.voice-wave-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 100%;
    position: relative;
    z-index: 2;
}
.voice-wave-bars span {
    flex: 1;
    min-width: 2px;
    max-width: 5px;
    background: #93c5a4;
    border-radius: 2px;
    transition: background 0.2s;
}
.voice-player.playing .voice-wave-bars span {
    background: #25D366;
}
.message-outgoing .voice-wave-bars span {
    background: rgba(255,255,255,0.4);
}
.message-outgoing .voice-player.playing .voice-wave-bars span {
    background: rgba(255,255,255,0.8);
}

.voice-time {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* ── Message wrap (bubble + outside-bubble reactions strip) ─── */
.message-wrap {
    display: flex;
    flex-direction: column;
    /* Kept in lock-step with .message max-width (78%). The wrap is
       the FLEX-side limiter so the bubble can grow naturally without
       being clipped by a tighter outer constraint. */
    max-width: 78%;
    gap: 0;
}
.message-wrap-incoming { align-self: flex-start; align-items: flex-start; }
.message-wrap-outgoing { align-self: flex-end;   align-items: flex-end; }
.message-wrap > .message { max-width: 100%; }

/* ── Reactions + delete on messages ────────────────────────── */
.message {
    position: relative;
}
/* Floating action toolbar in the bubble's top-right corner. Holds the
   reaction-trigger and (for outgoing messages) the delete-trigger. */
.msg-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    gap: 4px;
    z-index: 2;
}
.message:hover .msg-actions { display: flex; }
.msg-react-trigger,
.msg-delete-trigger {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s, color 0.15s;
    -webkit-user-select: none;
    user-select: none;
    padding: 0;
}
.msg-react-trigger:hover {
    background: rgba(0, 0, 0, 0.10);
    transform: scale(1.06);
}
.msg-delete-trigger:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    transform: scale(1.06);
}
.message-outgoing .msg-react-trigger,
.message-outgoing .msg-delete-trigger {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.message-outgoing .msg-react-trigger:hover {
    background: rgba(255, 255, 255, 0.30);
}
.message-outgoing .msg-delete-trigger:hover {
    background: rgba(255, 255, 255, 0.30);
    color: #fee2e2;
}

.reactions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    /* Tighter to the bubble - small negative margin pulls the row
       2px upward while staying just below the bubble bottom edge.
       (1px positive felt detached; -2px reads as "tucked under
       the bubble corner".) */
    margin-top: -2px;
    padding: 0 6px;
    position: relative;
    z-index: 1;
}
.message-wrap-incoming .reactions-row { justify-content: flex-start; }
.message-wrap-outgoing .reactions-row { justify-content: flex-end; }

.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    /* Thinner, more transparent border per user feedback - the chip
       reads as a soft pill rather than a hard-edged button. */
    border: 0.5px solid rgba(0, 0, 0, 0.05);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1e293b);
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s, background 0.15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.reaction-chip:hover { transform: scale(1.06); }
.reaction-chip.mine {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.45);
    color: var(--accent-blue, #3B82F6);
}
.reaction-chip .reaction-emoji { font-size: 13px; line-height: 1; }
.reaction-chip .reaction-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 11px;
}

/* Per-chip reactor stack - one tiny disc per reactor (avatar pic or
   first-letter fallback), with a "+N" condense disc when more than
   3 reactors. Imported 2026-05-08 from the reference design.
   .mine = emerald (the current user), .other = neutral gray
   (someone else), .count = "+N" overflow disc. Avatar variant
   shows the picture in a 14x14 circle. */
.reaction-chip .reaction-stack {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 2px;
}
.reaction-chip .reaction-by {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.reaction-chip .reaction-by.initial.mine {
    background: #047857;  /* emerald-700 - matches outgoing bubble */
    color: #fff;
}
.reaction-chip .reaction-by.initial.other {
    background: #64748b;  /* slate-500 - neutral for non-me reactors */
    color: #fff;
}
.reaction-chip .reaction-by.count {
    min-width: 18px;
    width: auto;
    padding: 0 4px;
    background: rgba(0, 0, 0, 0.10);
    color: var(--text-secondary, #475569);
}
.reaction-chip .reaction-by.avatar {
    padding: 0;
    background: transparent;
}
.reaction-chip .reaction-by.avatar img {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
}
/* Subtle ring around my own avatar so the operator knows which one
   is theirs in a crowded stack. */
.reaction-chip .reaction-by.avatar.mine {
    box-shadow: 0 0 0 1.5px #047857;
}

/* Reaction picker — floating panel pinned to a message bubble. */
.reaction-picker {
    position: absolute;
    z-index: 1000;
    background: var(--bg-primary, #fff);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 8px;
    width: 280px;
    max-width: calc(100vw - 16px);
}
.reaction-picker-quick {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
}
.reaction-picker-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 6px 2px;
}
.reaction-picker-scroll {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    max-height: 140px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.reaction-pick {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.1s, transform 0.08s;
    padding: 0;
}
.reaction-pick:hover {
    background: rgba(0, 0, 0, 0.06);
    transform: scale(1.15);
}
.reaction-pick:active { transform: scale(0.95); }
.message-outgoing .voice-time {
    color: rgba(255,255,255,0.6);
}

.chat-unread {
    background: #25D366;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.chat-type {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 1px 6px;
    border-radius: var(--radius-full);
}

/* ── Utility Classes ───────────────────────────────────────── */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--accent-green); }
.text-error { color: var(--error); }
.text-blue { color: var(--accent-blue); }
.font-mono { font-family: var(--font-mono); }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.hidden { display: none; }

/* ── Modal ────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: modalFadeIn 0.2s ease;
}
.modal {
    background: var(--bg-secondary);
    border-radius: 16px;
    width: 90%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    animation: modalSlideIn 0.2s ease;
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border, #E2E8F0);
}
.modal-header h2 {
    margin: 0;
    font-size: 18px;
}
.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary, #64748B);
    padding: 4px;
}
.modal-body {
    padding: 24px;
}
.group-participants-modal {
    max-width: 420px;
    width: min(420px, calc(100vw - 32px));
}
.group-participants-count {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}
.group-participants-list {
    max-height: min(520px, 70vh);
    overflow-y: auto;
    padding: 8px 12px 12px;
}
.group-participant-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--border-light);
}
.group-participant-row:last-child {
    border-bottom: 0;
}
.group-participant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.group-participant-main {
    min-width: 0;
    flex: 1;
}
.group-participant-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.group-participant-sub {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.group-participant-badge {
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
}
.group-participants-empty {
    padding: 24px 8px;
    color: var(--text-muted);
    text-align: center;
    font-size: 14px;
}
.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 13px;
}
.settings-label {
    color: var(--text-secondary);
    font-weight: 500;
}
.settings-value {
    color: var(--text-primary);
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 12px;
}
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}
.alert-info {
    background: #E6F7F6;
    color: #047A72;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}
.alert-danger {
    background: #FEF2F2;
    color: #DC2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}
.alert-warning {
    background: #FFFBEB;
    color: #D97706;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}
.form-hint {
    display: block;
    font-size: 12px;
    color: var(--text-secondary, #64748B);
    margin-top: 6px;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Image Popup ─────────────────────────────────── */
#image-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.2s ease;
}

.image-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.image-popup-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-popup-content img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.image-popup-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.image-popup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}

.image-popup-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ══════════════════════════════════════════════════════════
   ROUTING UI STYLES
   ══════════════════════════════════════════════════════════ */

/* ── Chat Info Bar ─────────────────────────────────────── */
#chat-info-bar {
    padding: 6px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    min-height: 32px;
}

.btn-tag-add {
    background: none;
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-tag-add:hover {
    border-color: #00B8A9;
    color: #00B8A9;
}

/* ── Canned Responses Bar ──────────────────────────────── */
#canned-bar {
    padding: 6px 12px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
}
#canned-bar .btn-ghost {
    transition: all 0.15s;
}
#canned-bar .btn-ghost:hover {
    background: var(--accent-blue-light);
    border-color: var(--accent-blue);
}

/* ── CSAT Stars ──────────────────────────────────────────
   Rated via SVG ``star`` icon (2026-05-12 emoji purge). Default
   stroke = muted; hover/active fill = amber. The .csat-star-row
   uses :hover sibling combinators in the row so hovering star 3
   fills stars 1-3 ahead of the click. */
.csat-star {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-muted, #94a3b8);
    transition: transform 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.csat-star svg { display: block; }
.csat-star:hover {
    transform: scale(1.18);
    color: #F59E0B;
}
.csat-star.csat-star--active,
.csat-star--filled {
    color: #F59E0B;
}
.csat-star.csat-star--active svg,
.csat-star--filled svg {
    fill: currentColor;
}

/* ── Operator Status Badges ────────────────────────────── */
.status-available { color: #10B981; }
.status-busy { color: #F59E0B; }
.status-away { color: #94A3B8; }
.status-dnd { color: #EF4444; }
.status-offline { color: #CBD5E1; }

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}
.status-dot.available { background: #10B981; }
.status-dot.busy { background: #F59E0B; }
.status-dot.away { background: #94A3B8; }
.status-dot.dnd { background: #EF4444; }
.status-dot.offline { background: #CBD5E1; }

/* ── SLA Badge Colors ──────────────────────────────────── */
.sla-ok { background: #D1FAE5; color: #065F46; }
.sla-at-risk { background: #FEF3C7; color: #92400E; }
.sla-breached { background: #FEE2E2; color: #991B1B; animation: slaPulse 2s ease-in-out infinite; }

@keyframes slaPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ── Tag Pills ─────────────────────────────────────────── */
.chat-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
}
.chat-tag:hover {
    background: #FEE2E2;
    color: #991B1B;
}

/* ── Assign Operator List ──────────────────────────────── */
#assign-operators-list > div {
    transition: background 0.15s;
}
#assign-operators-list > div:hover {
    background: var(--bg-hover);
}
#assign-operators-list > div:last-child {
    border-bottom: none;
}

/* ── Canned Response List Items ────────────────────────── */
#canned-list > div:last-child {
    border-bottom: none;
}

/* ── Mobile Responsive for Routing UI ──────────────────── */
@media (max-width: 768px) {
    #chat-info-bar {
        padding: 4px 10px;
        font-size: 11px;
    }
    #canned-bar {
        padding: 4px 8px;
    }
    #canned-bar .btn-ghost {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }
    .csat-star {
        font-size: 24px;
    }
}

/* ── Mobile chat list (<=768px) — vertical stack instead of side-by-side ── */
@media (max-width: 768px) {
    .chat-layout { flex-direction: column; }
    .chat-sidebar {
        width: 100%;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border-light, var(--border));
    }
    .chat-main { flex: 1; min-height: 60vh; }
    /* iOS Safari zooms inputs <16px — force 16px */
    input.form-input, textarea.form-input, select.form-input { font-size: 16px; }
    /* Hide elements flagged desktop-only */
    .hide-on-mobile { display: none !important; }
    /* Touch targets min 44px */
    .nav-item, .btn, .chat-item { min-height: 44px; }
}

@media (max-width: 480px) {
    .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
    .sidebar { width: 260px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .card { padding: 12px; }
    .save-bar { left: 0; }
}

/* ── Contacts: responsive table + checkboxes ───────────────── */
@media (max-width: 768px) {
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-wrapper table {
        min-width: 700px;
    }
    .save-bar { left: 0; }
}
.contacts-table input[type="checkbox"],
.table input[type="checkbox"],
table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #00B8A9;
}

/* ── Disabled / readonly form fields ───────────────────────── */
.form-input[disabled], .form-input[readonly] {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
    border-style: dashed;
}

/* ── Usage bars (settings subscription) ────────────────────── */
.usage-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    overflow: hidden;
}
.usage-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--accent-blue);
    transition: width 0.3s ease;
}
.usage-bar-fill.warning { background: #F59E0B; }
.usage-bar-fill.danger { background: #EF4444; }

/* ── Routing auto-save status indicator ──────────────────────
   Small chip near top-right of the routing page, fades in while
   saving / fades out after success. Replaces the legacy save-bar
   pattern: routing settings now persist on every change. */
.routing-save-status {
    position: fixed;
    top: 16px;
    right: 24px;
    z-index: 100;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    background: var(--bg-primary);
    color: var(--text-muted);
    border: 1px solid var(--border-light);
}
.routing-save-status[data-state]:not([data-state=""]) {
    opacity: 1;
}
.routing-save-status[data-state="saving"] {
    color: var(--text-muted);
}
.routing-save-status[data-state="saved"] {
    color: #10B981;
    border-color: #10B98133;
}
.routing-save-status[data-state="error"] {
    color: #EF4444;
    border-color: #EF444433;
}

/* ── Save bar (legacy - retained for any other page that may use it) ── */
.save-bar {
    position: fixed;
    bottom: 0;
    left: 260px;
    right: 0;
    padding: 12px 24px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    animation: slideUp 0.2s ease;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ── Focus states ──────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid #00B8A9;
    outline-offset: 2px;
}
.btn:focus-visible, .form-input:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.2);
}

/* ══════════════════════════════════════════════════════════════
   Dark Mode
   ══════════════════════════════════════════════════════════════ */

/* Shared dark-mode overrides — used by both @media and .dark-mode */

/* Auto dark mode via OS preference */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) {
        --bg-primary: #0D1117;
        --bg-secondary: #161B22;
        --bg-tertiary: #21262D;
        --bg-hover: #1C2128;
        --bg-active: #2D333B;
        --text-primary: #E6EDF3;
        --text-secondary: #8B949E;
        --text-muted: #6E7681;
        --border-light: #21262D;
        --border: #30363D;
        --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
        --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
        --shadow-xl: 0 16px 48px rgba(0,0,0,0.5);
        --accent-blue-light: rgba(0, 184, 169, 0.1);
        --accent-green-light: rgba(0, 196, 140, 0.1);
        --accent-blue-soft: rgba(0, 184, 169, 0.15);
        --accent-green-soft: rgba(0, 196, 140, 0.15);
    }
}

/* Manual dark mode class */
body.dark-mode {
    --bg-primary: #0D1117;
    --bg-secondary: #161B22;
    --bg-tertiary: #21262D;
    --bg-hover: #1C2128;
    --bg-active: #2D333B;
    --text-primary: #E6EDF3;
    --text-secondary: #8B949E;
    --text-muted: #6E7681;
    --border-light: #21262D;
    --border: #30363D;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.5);
    --accent-blue-light: rgba(0, 184, 169, 0.1);
    --accent-green-light: rgba(0, 196, 140, 0.1);
    --accent-blue-soft: rgba(0, 184, 169, 0.15);
    --accent-green-soft: rgba(0, 196, 140, 0.15);
}

/* Dark mode element overrides — apply to both auto and manual */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .card,
    :root:not(.light-mode) .stat-card {
        background: var(--bg-secondary);
        border-color: var(--border-light);
    }
    :root:not(.light-mode) .card:hover,
    :root:not(.light-mode) .stat-card:hover {
        box-shadow: var(--shadow-md);
    }
    :root:not(.light-mode) .integration-card {
        background: var(--bg-secondary);
        border-color: var(--border-light);
    }
    :root:not(.light-mode) .integration-card:hover {
        box-shadow: var(--shadow-md);
    }
    :root:not(.light-mode) .form-input,
    :root:not(.light-mode) .form-select,
    :root:not(.light-mode) select.form-input,
    :root:not(.light-mode) textarea.form-input,
    :root:not(.light-mode) .form-textarea {
        background: var(--bg-tertiary);
        border-color: var(--border);
        color: var(--text-primary);
    }
    :root:not(.light-mode) th {
        background: var(--bg-tertiary);
        color: var(--text-secondary);
    }
    :root:not(.light-mode) td {
        border-color: var(--border-light);
    }
    :root:not(.light-mode) tr:hover td {
        background: var(--bg-tertiary);
    }
    :root:not(.light-mode) .modal,
    :root:not(.light-mode) .confirm-modal {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }
    :root:not(.light-mode) .modal-overlay,
    :root:not(.light-mode) .confirm-overlay {
        background: rgba(0, 0, 0, 0.7);
    }
    :root:not(.light-mode) .chat-item:hover {
        background: var(--bg-tertiary);
    }
    :root:not(.light-mode) .chat-item.active {
        /* Match the new card pattern - white-ish lift on the dark canvas
           rather than tinted blue. Without these overrides the active
           card kept its light-mode shadow + border on dark, looking
           visually broken. */
        background: var(--bg-secondary);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
        border-color: rgba(255, 255, 255, 0.08);
    }
    :root:not(.light-mode) .message-incoming {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
    :root:not(.light-mode) .chat-message.incoming {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
    :root:not(.light-mode) .btn-secondary {
        background: var(--bg-tertiary);
        border-color: var(--border);
        color: var(--text-primary);
    }
    :root:not(.light-mode) .btn-ghost {
        color: var(--text-secondary);
    }
    :root:not(.light-mode) .btn-ghost:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
    :root:not(.light-mode) .btn-cancel {
        background: var(--bg-tertiary);
        color: var(--text-secondary);
    }
    :root:not(.light-mode) .btn-cancel:hover {
        background: var(--bg-active);
        color: var(--text-primary);
    }
    :root:not(.light-mode) .choice-card {
        background: var(--bg-secondary);
        border-color: var(--border-light);
    }
    :root:not(.light-mode) .choice-card:hover {
        background: var(--accent-blue-light);
    }
    :root:not(.light-mode) .rule-card {
        background: var(--bg-secondary);
        border-color: var(--border-light);
    }
    :root:not(.light-mode) .stat-card-icon.blue { background: rgba(0, 184, 169, 0.12); }
    :root:not(.light-mode) .stat-card-icon.green { background: rgba(16, 185, 129, 0.12); }
    :root:not(.light-mode) .stat-card-icon.amber { background: rgba(217, 119, 6, 0.12); color: #FBBF24; }
    :root:not(.light-mode) .stat-card-icon.purple { background: rgba(124, 58, 237, 0.12); }
    :root:not(.light-mode) .stat-card-icon.red { background: rgba(220, 38, 38, 0.12); }
    :root:not(.light-mode) .empty-state-icon { color: var(--text-muted); }
    :root:not(.light-mode) code,
    :root:not(.light-mode) pre {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
    :root:not(.light-mode) img { opacity: 0.95; }
    :root:not(.light-mode) .chat-input {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
    :root:not(.light-mode) .chat-list-search {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
    :root:not(.light-mode) .emoji-picker {
        background: var(--bg-secondary);
        border-color: var(--border);
    }
    :root:not(.light-mode) .alert-info { background: rgba(0, 184, 169, 0.12); color: #5EEAD4; border-color: rgba(0, 184, 169, 0.2); }
    :root:not(.light-mode) .alert-danger { background: rgba(220, 38, 38, 0.12); color: #FCA5A5; border-color: rgba(220, 38, 38, 0.2); }
    :root:not(.light-mode) .alert-warning { background: rgba(245, 158, 11, 0.12); color: #FCD34D; border-color: rgba(245, 158, 11, 0.2); }
    :root:not(.light-mode) .alert-success { background: rgba(16, 185, 129, 0.12); color: #6EE7B7; border-color: rgba(16, 185, 129, 0.2); }
    :root:not(.light-mode) .alert-error { background: rgba(220, 38, 38, 0.12); color: #FCA5A5; border-color: rgba(220, 38, 38, 0.2); }
    :root:not(.light-mode) .auth-error { background: rgba(220, 38, 38, 0.12); color: #FCA5A5; border-color: rgba(220, 38, 38, 0.2); }
    :root:not(.light-mode) .badge-secondary { background: var(--bg-tertiary); color: var(--text-muted); }
    :root:not(.light-mode) .badge-success { background: rgba(16, 185, 129, 0.15); }
    :root:not(.light-mode) .badge-error,
    :root:not(.light-mode) .badge-danger { background: rgba(239, 68, 68, 0.15); }
    :root:not(.light-mode) .badge-warning { background: rgba(245, 158, 11, 0.15); }
    :root:not(.light-mode) .badge-info { background: rgba(0, 184, 169, 0.15); }
    :root:not(.light-mode) .badge-muted { background: var(--bg-tertiary); }
    :root:not(.light-mode) .badge-success { color: #34D399; }
    :root:not(.light-mode) .badge-error,
    :root:not(.light-mode) .badge-danger { color: #F87171; }
    :root:not(.light-mode) .badge-warning { color: #FBBF24; }
    :root:not(.light-mode) .badge-info { color: #5EEAD4; }
    :root:not(.light-mode) .status-dot.offline { background: #64748B; }
    :root:not(.light-mode) .status-dot.away { background: #94A3B8; }
    :root:not(.light-mode) [style*="border-radius:999px"][style*="background:"] { filter: brightness(1.3); }
    :root:not(.light-mode) .message-file-card { background: var(--bg-tertiary); }
    :root:not(.light-mode) .message-file { background: rgba(255, 255, 255, 0.06); }
    :root:not(.light-mode) .crm-dropdown-menu { background: var(--bg-secondary); border-color: var(--border); }
    :root:not(.light-mode) .crm-menu-item:hover { background: var(--bg-tertiary); }
    :root:not(.light-mode) .settings-row { background: var(--bg-tertiary); }
    :root:not(.light-mode) .chat-filter-btn { border-color: var(--border); color: var(--text-secondary); }
    :root:not(.light-mode) .chat-filter-btn:hover { background: var(--bg-tertiary); }
    :root:not(.light-mode) .chat-tag { background: var(--bg-tertiary); }
    /* Scrollbars */
    :root:not(.light-mode) ::-webkit-scrollbar-track { background: var(--bg-primary); }
    :root:not(.light-mode) ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); }
    :root:not(.light-mode) ::-webkit-scrollbar-thumb:hover { background: #475569; }
}

/* Duplicate overrides for manual .dark-mode class */
body.dark-mode .card,
body.dark-mode .stat-card {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}
body.dark-mode .card:hover,
body.dark-mode .stat-card:hover {
    box-shadow: var(--shadow-md);
}
body.dark-mode .integration-card {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}
body.dark-mode .integration-card:hover {
    box-shadow: var(--shadow-md);
}
body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode select.form-input,
body.dark-mode textarea.form-input,
body.dark-mode .form-textarea { background: var(--bg-tertiary); border-color: var(--border); color: var(--text-primary); }
body.dark-mode th { background: var(--bg-tertiary); color: var(--text-secondary); }
body.dark-mode td { border-color: var(--border-light); }
body.dark-mode tr:hover td { background: var(--bg-tertiary); }
body.dark-mode .modal,
body.dark-mode .confirm-modal { background: var(--bg-secondary); color: var(--text-primary); }
body.dark-mode .modal-overlay,
body.dark-mode .confirm-overlay { background: rgba(0, 0, 0, 0.7); }
body.dark-mode .chat-item:hover { background: var(--bg-tertiary); }
body.dark-mode .chat-item.active {
    background: var(--bg-secondary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .message-incoming,
body.dark-mode .chat-message.incoming { background: var(--bg-tertiary); color: var(--text-primary); }
body.dark-mode .btn-secondary { background: var(--bg-tertiary); border-color: var(--border); color: var(--text-primary); }
body.dark-mode .btn-ghost { color: var(--text-secondary); }
body.dark-mode .btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }
body.dark-mode .btn-cancel { background: var(--bg-tertiary); color: var(--text-secondary); }
body.dark-mode .btn-cancel:hover { background: var(--bg-active); color: var(--text-primary); }
body.dark-mode .choice-card { background: var(--bg-secondary); border-color: var(--border-light); }
body.dark-mode .choice-card:hover { background: var(--accent-blue-light); }
body.dark-mode .rule-card {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}
body.dark-mode .stat-card-icon.blue { background: rgba(0, 184, 169, 0.12); }
body.dark-mode .stat-card-icon.green { background: rgba(16, 185, 129, 0.12); }
body.dark-mode .stat-card-icon.amber { background: rgba(217, 119, 6, 0.12); color: #FBBF24; }
body.dark-mode .stat-card-icon.purple { background: rgba(124, 58, 237, 0.12); }
body.dark-mode .stat-card-icon.red { background: rgba(220, 38, 38, 0.12); }
body.dark-mode .empty-state-icon { color: var(--text-muted); }
body.dark-mode code,
body.dark-mode pre { background: var(--bg-tertiary); color: var(--text-primary); }
body.dark-mode img { opacity: 0.95; }
body.dark-mode .chat-input { background: var(--bg-tertiary); color: var(--text-primary); }
body.dark-mode .chat-list-search { background: var(--bg-tertiary); color: var(--text-primary); }
body.dark-mode .emoji-picker { background: var(--bg-secondary); border-color: var(--border); }
body.dark-mode .alert-info { background: rgba(0, 184, 169, 0.12); color: #5EEAD4; border-color: rgba(0, 184, 169, 0.2); }
body.dark-mode .alert-danger { background: rgba(220, 38, 38, 0.12); color: #FCA5A5; border-color: rgba(220, 38, 38, 0.2); }
body.dark-mode .alert-warning { background: rgba(245, 158, 11, 0.12); color: #FCD34D; border-color: rgba(245, 158, 11, 0.2); }
body.dark-mode .alert-success { background: rgba(16, 185, 129, 0.12); color: #6EE7B7; border-color: rgba(16, 185, 129, 0.2); }
body.dark-mode .alert-error { background: rgba(220, 38, 38, 0.12); color: #FCA5A5; border-color: rgba(220, 38, 38, 0.2); }
body.dark-mode .auth-error { background: rgba(220, 38, 38, 0.12); color: #FCA5A5; border-color: rgba(220, 38, 38, 0.2); }
body.dark-mode .badge-secondary { background: var(--bg-tertiary); color: var(--text-muted); }
body.dark-mode .badge-success { background: rgba(16, 185, 129, 0.2); color: #34D399; }
body.dark-mode .badge-error,
body.dark-mode .badge-danger { background: rgba(239, 68, 68, 0.2); color: #F87171; }
body.dark-mode .badge-warning { background: rgba(245, 158, 11, 0.2); color: #FBBF24; }
body.dark-mode .badge-info { background: rgba(0, 184, 169, 0.2); color: #5EEAD4; }
body.dark-mode .badge-muted { background: var(--bg-tertiary); }

/* ── Dark mode: status dots (routing operators) ──────── */
body.dark-mode .status-dot.offline { background: #64748B; }
body.dark-mode .status-dot.away { background: #94A3B8; }

/* ── Dark mode: platform-add-btn (integrations) ──────── */
body.dark-mode .platform-add-btn,
:root:not(.light-mode) .platform-add-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text-primary);
}
body.dark-mode .platform-add-btn:hover:not(.is-disabled),
:root:not(.light-mode) .platform-add-btn:hover:not(.is-disabled) {
    background: var(--bg-tertiary) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ── Dark mode: operator status badges (inline-styled) ──── */
body.dark-mode [style*="border-radius:999px"][style*="background:"] {
    filter: brightness(1.3);
}
body.dark-mode .message-file-card { background: var(--bg-tertiary); }
body.dark-mode .message-file { background: rgba(255, 255, 255, 0.06); }
body.dark-mode .crm-dropdown-menu { background: var(--bg-secondary); border-color: var(--border); }
body.dark-mode .crm-menu-item:hover { background: var(--bg-tertiary); }
body.dark-mode .settings-row { background: var(--bg-tertiary); }
body.dark-mode .chat-filter-btn { border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .chat-filter-btn:hover { background: var(--bg-tertiary); }
body.dark-mode .chat-tag { background: var(--bg-tertiary); }
body.dark-mode ::-webkit-scrollbar-track { background: var(--bg-primary); }
body.dark-mode ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ── Theme Toggle Button ─────────────────────────────────────── */
.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    font-size: 16px;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: rgba(255,255,255,0.2);
}

/* ══════════════════════════════════════════════════════════════
   Micro-interactions & Polish
   ══════════════════════════════════════════════════════════════ */

/* ── Loading Skeleton ────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Button Loading State ────────────────────────────────────── */
.btn.loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}
.btn.loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 8px;
}

/* ── Rule Cards (Automation) ──────────────────────────────────── */
/* Per-integration tab strip above the rules list. 2026-05-18. */
.rules-integration-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--border-light);
    background: transparent;
}
.rt-tab {
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    line-height: 1.4;
}
.rt-tab:hover { background: var(--bg-tertiary, #F1F5F9); }
.rt-tab--active {
    background: #2563EB;
    border-color: #2563EB;
    color: #fff;
}
.rt-tab--active:hover { background: #1D4ED8; }

.rule-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-left: 3px solid #00B8A9;
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s ease;
}

.rule-card:hover {
    box-shadow: var(--shadow-md);
}

.rule-card.rule-inactive {
    opacity: 0.6;
    border-left-color: var(--border);
}

/* ════════════════════════════════════════════════════════════════
   Chat: reply, edit, context menu, message-in animation
   ════════════════════════════════════════════════════════════════ */

/* Subtle slide-in for new bubbles. Both surfaces (desktop + mobile)
   get the same animation; honour reduced-motion preference. */
.message-wrap {
    animation: msg-in 180ms ease-out both;
}
@keyframes msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .message-wrap { animation: none; }
}

/* Quoted-reply card prepended to a bubble. WhatsApp/Telegram style:
   coloured strip on the leading edge, author + 1-line preview next to it. */
.reply-quote {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 4px 8px 4px 0;
    margin: 0 0 4px 0;
    border: 0;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
    overflow: hidden;
    min-width: 0;
}
.reply-quote:hover { background: rgba(0, 0, 0, 0.07); }
.message-outgoing .reply-quote { background: rgba(0, 0, 0, 0.07); }
.message-outgoing .reply-quote:hover { background: rgba(0, 0, 0, 0.10); }
.reply-quote__strip {
    flex: 0 0 3px;
    background: var(--accent-blue, #3B82F6);
    border-radius: 0 2px 2px 0;
}
.reply-quote__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2px 4px;
    gap: 1px;
}
.reply-quote__author {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent-blue, #3B82F6);
    line-height: 1.2;
}
.reply-quote__text {
    font-size: 12.5px;
    color: var(--text-secondary, #475569);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.reply-quote__deleted { font-style: italic; opacity: 0.7; }
.reply-quote__label { font-style: italic; opacity: 0.85; }

/* "edited" badge inside .message-meta. Sits before the time, smaller
   and slightly muted. */
.msg-edited-badge {
    font-size: 10.5px;
    opacity: 0.65;
    margin-right: 4px;
    font-style: italic;
    user-select: none;
}

/* Compose context bar (above .chat-input-area). Visible while a reply
   target or edit target is staged. */
.compose-context-bar {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-secondary, #f8fafc);
    border-top: 1px solid var(--border, #e2e8f0);
    min-width: 0;
}
.compose-context-bar__strip {
    flex: 0 0 3px;
    background: var(--accent-blue, #3B82F6);
    border-radius: 2px;
}
.compose-context-bar__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0;
}
.compose-context-bar__title {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent-blue, #3B82F6);
    line-height: 1.2;
}
.compose-context-bar__preview {
    font-size: 12.5px;
    color: var(--text-secondary, #475569);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.compose-context-bar__close {
    flex: 0 0 24px;
    height: 24px;
    align-self: center;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.compose-context-bar__close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary, #1e293b);
}

/* Message actions menu (right-click on desktop, long-press on touch).
   Fixed-positioned so it works inside an iframe; the JS clamps it to
   the viewport before showing. */
.msg-actions-menu {
    position: fixed;
    z-index: 1100;
    min-width: 180px;
    background: var(--bg-primary, #fff);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    user-select: none;
}
.msg-actions-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--text-primary, #1e293b);
    font-size: 13.5px;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}
.msg-actions-menu__item:hover {
    background: var(--bg-secondary, #f1f5f9);
}
.msg-actions-menu__item--danger { color: #ef4444; }
.msg-actions-menu__item--danger:hover { background: rgba(239, 68, 68, 0.10); }
.msg-actions-menu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: currentColor;
}
.msg-actions-menu__label { flex: 1 1 auto; }

/* Quick reactions strip pinned to the top of the actions popup. The
   message-actions popup gained an emoji row in front of its items so
   long-pressing a bubble surfaces reactions AND actions in one tap
   (WhatsApp / Telegram pattern). The strip scrolls horizontally on
   narrow viewports so the "+" overflow button stays reachable. */
.msg-actions-menu__reactions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.msg-actions-menu__reactions::-webkit-scrollbar { display: none; }
.msg-actions-menu__react {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s ease, background 0.15s ease;
    font-family: inherit;
}
.msg-actions-menu__react:hover {
    background: var(--bg-secondary, #f1f5f9);
    transform: scale(1.18);
}
.msg-actions-menu__react:active { transform: scale(0.94); }
.msg-actions-menu__react--more {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}
.msg-actions-menu__divider {
    height: 1px;
    background: var(--border-light, #e2e8f0);
    margin: 0 6px 4px;
    opacity: 0.7;
}

/* Brief flash when jumping to a quoted message - helps the eye land. */
.msg-flash > .message {
    box-shadow: 0 0 0 2px var(--accent-blue, #3B82F6);
    transition: box-shadow 0.4s ease-out;
}

/* ═══════════════════════════════════════════════════════════════
 *  Rule form modal (Create/Edit automation rule)
 *  Refresh 2026-05-18 (3rd pass): refined minimalism in the spirit
 *  of Linear / Notion / Stripe Dashboard. Single-column form-stack,
 *  1px dividers between rows (not card backgrounds), uppercase
 *  tracked labels, single restrained accent (#2563EB), system font.
 *  Tokens scoped to .rule-form-modal so they don't pollute globals.
 * ═══════════════════════════════════════════════════════════════ */

.rule-form-modal {
    /* Scoped tokens - design system for THIS modal only */
    --rf-bg:          #FFFFFF;
    --rf-fg:          #0A0A0A;
    --rf-muted:       #6B6B6B;
    --rf-muted-soft:  #9CA3AF;
    --rf-border:      #E7E7E9;
    --rf-border-soft: #F1F1F3;
    --rf-bg-soft:     #FAFAFA;
    --rf-accent:      #2563EB;
    --rf-accent-soft: rgba(37,99,235,0.10);
    --rf-danger:      #DC2626;
    --rf-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --rf-mono:        ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
    --rf-radius:      8px;
    --rf-radius-lg:   12px;
    --rf-shadow:      0 1px 2px rgba(0,0,0,0.04), 0 24px 60px rgba(0,0,0,0.12);

    max-width: 600px !important;
    width: 100%;
    border-radius: var(--rf-radius-lg) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    background: var(--rf-bg);
    box-shadow: var(--rf-shadow) !important;
    border: 1px solid var(--rf-border);
    font-family: var(--rf-font);
    color: var(--rf-fg);
    line-height: 1.45;
}

.rule-form-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--rf-border-soft);
}
.rule-form-modal__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--rf-fg);
}
.rule-form-modal__close {
    background: transparent;
    border: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rf-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}
.rule-form-modal__close:hover {
    background: var(--rf-bg-soft);
    color: var(--rf-fg);
}
.rule-form-modal__close:focus-visible {
    outline: none;
    background: var(--rf-bg-soft);
    box-shadow: 0 0 0 2px var(--rf-accent-soft);
}

.rule-form-modal__body {
    padding: 4px 24px;
    overflow-y: auto;
    flex: 1;
}

.rule-form-modal__foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--rf-border-soft);
    background: var(--rf-bg);
}

/* Row = one form section. Separated by hairline dividers (not boxes),
   24px vertical breathing room. First/last row don't get a top border. */
.rf-row {
    padding: 20px 0;
    border-top: 1px solid var(--rf-border-soft);
}
.rf-row:first-child { border-top: 0; padding-top: 16px; }
.rf-row:last-child  { padding-bottom: 20px; }

.rf-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rf-muted);
}

/* Quiet help text under a control or section */
.rf-help {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--rf-muted);
    line-height: 1.5;
    font-weight: 400;
}

/* Inputs - flat, 1px border, focus = ring + accent border */
.rf-input {
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--rf-fg);
    background: var(--rf-bg);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
    box-sizing: border-box;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    appearance: none;
}
.rf-input::placeholder { color: var(--rf-muted-soft); }
.rf-input:hover { border-color: #D4D4D7; }
.rf-input:focus,
.rf-input:focus-visible {
    outline: none;
    border-color: var(--rf-accent);
    box-shadow: 0 0 0 3px var(--rf-accent-soft);
}
textarea.rf-input { min-height: 64px; resize: vertical; line-height: 1.5; }

.rf-select {
    cursor: pointer;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Trigger description - tiny quiet caption */
#rf-trigger-desc.rf-help {
    margin-top: 8px;
    font-size: 12.5px;
}

/* Conditions */
.rf-conditions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rf-field { display: flex; flex-direction: column; gap: 6px; }
.rf-field__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--rf-muted);
}
.rf-field__hint {
    font-size: 11.5px;
    color: var(--rf-muted-soft);
    margin-top: 2px;
}

/* Plain checkbox cluster - no chip pills */
.rf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}
.rf-chip,
.rf-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--rf-fg);
    cursor: pointer;
    user-select: none;
    line-height: 1;
}
.rf-chip input[type="checkbox"],
.rf-checkbox-row input[type="checkbox"] {
    margin: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--rf-accent);
    cursor: pointer;
}
.rf-checkbox-row { padding: 2px 0; }

.rf-empty {
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--rf-muted);
    background: var(--rf-bg-soft);
    border-radius: var(--rf-radius);
    line-height: 1.5;
}

/* Action cards - 1px outline, no fill, hairline separator from body */
.rf-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rf-action-card {
    padding: 12px;
    background: var(--rf-bg);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.rf-action-card:focus-within {
    border-color: var(--rf-accent);
    box-shadow: 0 0 0 3px var(--rf-accent-soft);
}
.rf-action-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rf-action-card__num { display: none; }
.rf-action-card__select { flex: 1; min-width: 0; }
.rf-action-card__remove {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--rf-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}
.rf-action-card__remove:hover {
    background: rgba(220,38,38,0.06);
    color: var(--rf-danger);
}
.rf-action-card__remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--rf-accent-soft);
}
.rf-action-card__body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--rf-border-soft);
}
.rf-action-card__body:empty {
    display: none;
}

/* Add-action - plain inline text button with leading + glyph.
   Restrained: no full-width dashed box, just a quiet action. */
.rf-add-action-btn {
    margin-top: 12px;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    color: var(--rf-accent);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    transition: background 0.12s ease;
}
.rf-add-action-btn:hover { background: var(--rf-accent-soft); }
.rf-add-action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--rf-accent-soft);
}
.rf-add-action-btn svg { display: block; }

/* Priority - slider + tabular number */
.rf-priority-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.rf-range {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--rf-border);
    outline: none;
    cursor: pointer;
}
.rf-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--rf-bg);
    border: 1.5px solid var(--rf-accent);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    transition: transform 0.08s ease, box-shadow 0.12s ease;
}
.rf-range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.rf-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--rf-accent-soft);
}
.rf-range::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--rf-bg); border: 1.5px solid var(--rf-accent);
    cursor: pointer;
}
.rf-priority-val {
    min-width: 36px;
    padding: 2px 8px;
    font-family: var(--rf-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--rf-fg);
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: var(--rf-bg-soft);
    border: 1px solid var(--rf-border-soft);
    border-radius: 6px;
}

/* Footer buttons - .rf-btn namespace, three explicit weights */
.rf-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    white-space: nowrap;
    user-select: none;
}
.rf-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rf-accent-soft); }
.rf-btn svg { display: block; flex-shrink: 0; }

.rf-btn--primary {
    background: var(--rf-accent);
    color: #fff;
    border-color: var(--rf-accent);
}
.rf-btn--primary:hover { background: #1D4FD0; border-color: #1D4FD0; }
.rf-btn--primary:active { background: #1A47C0; }

.rf-btn--secondary {
    background: var(--rf-bg);
    color: var(--rf-fg);
    border-color: var(--rf-border);
}
.rf-btn--secondary:hover {
    background: var(--rf-bg-soft);
    border-color: #D4D4D7;
}

.rf-btn--ghost {
    background: transparent;
    color: var(--rf-muted);
    border-color: transparent;
}
.rf-btn--ghost:hover {
    background: var(--rf-bg-soft);
    color: var(--rf-fg);
}

/* ── Custom field picker (Bitrix24 fields inside an action) ── */
.rf-cf {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--rf-border-soft);
}
.rf-cf__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.rf-cf__title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rf-muted);
}
.rf-cf__refresh {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--rf-muted);
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.12s ease, color 0.12s ease;
}
.rf-cf__refresh:hover {
    background: var(--rf-bg-soft);
    color: var(--rf-fg);
}
.rf-cf__refresh svg { display: block; }
.rf-cf__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rf-cf__row {
    display: grid;
    /* 3 columns: field <select> | value wrapper (input + var btn) | remove */
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) 28px;
    gap: 6px;
    align-items: center;
}
.rf-cf__field,
.rf-cf__value {
    font-size: 13px;
    padding: 6px 10px;
    min-width: 0;
}
.rf-cf__value-wrap .rf-cf__value { width: 100%; }
.rf-cf__remove {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--rf-muted);
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.12s ease, color 0.12s ease;
}
.rf-cf__remove:hover {
    background: rgba(220,38,38,0.06);
    color: var(--rf-danger);
}
.rf-cf__add {
    margin-top: 8px;
    padding: 5px 8px;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--rf-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    transition: background 0.12s ease;
}
.rf-cf__add:hover { background: var(--rf-accent-soft); }
.rf-cf__add svg { display: block; }

/* Value input with variable-picker button on the right edge */
.rf-cf__value-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.rf-cf__value-wrap .rf-cf__value { padding-right: 32px; }
.rf-cf__var {
    position: absolute;
    right: 4px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--rf-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s ease, color 0.12s ease;
}
.rf-cf__var:hover {
    background: var(--rf-accent-soft);
    color: var(--rf-accent);
}
.rf-cf__var svg { display: block; }

/* 2026-05-25 Type-aware value controls inside custom-field rows.
   The .rf-cf__value-wrap holds a heterogeneous mix: plain input,
   numeric input, datetime input, <select>, chip picker, or bool toggle. */
.rf-cf__value-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
}
.rf-cf__value-wrap select.rf-cf__value {
    flex: 1;
    min-width: 0;
}

/* Multi-select chip picker (multiple-enum fields) */
.rf-cf__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid #E7E7E9;
    border-radius: 8px;
    min-height: 34px;
    flex: 1;
}
.rf-cf__chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.rf-cf__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 8px;
    background: var(--rf-accent-soft, #eef2ff);
    color: var(--rf-accent, #4f46e5);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.6;
}
.rf-cf__chip-remove {
    background: none;
    border: 0;
    padding: 0 2px;
    color: currentColor;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
}
.rf-cf__chip-remove:hover { opacity: 1; }
.rf-cf__chip-add {
    flex: 1;
    min-width: 120px;
    border: 0;
    background: transparent;
    font-size: 12px;
    color: #6a6a6d;
    padding: 2px 4px;
}
.rf-cf__chip-add:focus { outline: none; }

/* Boolean Да/Нет segmented toggle */
.rf-cf__bool {
    display: inline-flex;
    border: 1px solid #E7E7E9;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.rf-cf__bool-btn {
    padding: 6px 14px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 13px;
    color: #6a6a6d;
    transition: background-color 0.12s, color 0.12s;
}
.rf-cf__bool-btn + .rf-cf__bool-btn {
    border-left: 1px solid #E7E7E9;
}
.rf-cf__bool-btn:hover {
    background: #f6f6f8;
}
.rf-cf__bool-btn.is-active {
    background: var(--rf-accent, #4f46e5);
    color: #fff;
}
.rf-cf__bool-btn.is-active:hover {
    background: var(--rf-accent, #4f46e5);
}

/* Variable picker popover - floats over the modal */
.rf-var-picker {
    width: 300px;
    max-height: 360px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #E7E7E9;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 30px rgba(0,0,0,0.15);
    z-index: 100000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.rf-var-picker__head {
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B6B6B;
    border-bottom: 1px solid #F1F1F3;
}
.rf-var-picker__list {
    display: flex;
    flex-direction: column;
    padding: 4px;
}
.rf-var-picker__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    transition: background 0.1s ease;
}
.rf-var-picker__item:hover { background: rgba(37,99,235,0.08); }
.rf-var-picker__token {
    font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 12px;
    color: #2563EB;
    font-weight: 500;
}
.rf-var-picker__label {
    font-size: 12px;
    color: #6B6B6B;
}

/* "Mark read" bar shown above composer for supervisors/QC. Hidden by
   default; chat.js flips it visible when there's unread + monitor role.
   NOTE: author CSS `display: flex` overrides the HTML `hidden`
   attribute's UA-default `display: none`, so an explicit
   `.mark-read-bar[hidden]` rule below is REQUIRED. Without it the bar
   stayed visible even with `hidden=""` set, which was the bug an
   operator hit on 2026-05-18. */
.mark-read-bar {
    padding: 6px 14px;
    background: #FFFBEB;
    border-top: 1px solid #FEF3C7;
    display: flex;
    justify-content: center;
}
.mark-read-bar[hidden] { display: none !important; }
.mark-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #10B981;
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.05s ease;
}
.mark-read-btn:hover { background: #059669; }
.mark-read-btn:active { transform: scale(0.97); }
.mark-read-btn svg { flex-shrink: 0; }
/* Count chip inside the button - shows how many incoming messages
   the click will actually mark as read. Telegram/WhatsApp Web pattern:
   the operator sees the impact before committing. */
.mark-read-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 2px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.mark-read-count[hidden] { display: none; }
/* Busy state while the WS round-trip is in flight (max 5s safety
   net in chat.js). Prevents the double-click race that would fire
   two mark_read events for the same chat. */
.mark-read-btn.is-busy {
    pointer-events: none;
    opacity: 0.65;
    cursor: wait;
}

/* ── Deal pipeline picker modal (Create deal -> select funnel) ── */
.deal-pipeline-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: deal-pipeline-fade 0.15s ease;
}
@keyframes deal-pipeline-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.deal-pipeline-modal {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.deal-pipeline-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #E5E7EB;
}
.deal-pipeline-modal__title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}
.deal-pipeline-modal__close {
    background: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
}
.deal-pipeline-modal__close:hover {
    background: #F3F4F6;
    color: #111827;
}
.deal-pipeline-modal__body {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
}
.deal-pipeline-modal__loading,
.deal-pipeline-modal__error {
    text-align: center;
    color: #6B7280;
    font-size: 13px;
    padding: 24px 0;
}
.deal-pipeline-modal__error { color: #DC2626; }
.deal-pipeline-modal__label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6B7280;
    font-weight: 600;
    margin-bottom: 8px;
}
.deal-pipeline-modal__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.deal-pipeline-modal__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.deal-pipeline-modal__item:hover {
    border-color: #10B981;
    background: #F9FAFB;
}
.deal-pipeline-modal__item--active {
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.06);
}
.deal-pipeline-modal__item input[type="radio"] {
    margin: 0;
    accent-color: #10B981;
}
.deal-pipeline-modal__item-name {
    flex: 1;
    font-size: 14px;
    color: #111827;
}
.deal-pipeline-modal__item-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: #D1FAE5;
    color: #065F46;
    border-radius: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.deal-pipeline-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #E5E7EB;
    background: #F9FAFB;
}
.deal-pipeline-modal__cancel,
.deal-pipeline-modal__confirm {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 0;
    transition: background 0.12s ease;
}
.deal-pipeline-modal__cancel {
    background: #F3F4F6;
    color: #374151;
}
.deal-pipeline-modal__cancel:hover { background: #E5E7EB; }
.deal-pipeline-modal__confirm {
    background: #10B981;
    color: #fff;
}
.deal-pipeline-modal__confirm:hover { background: #059669; }
.deal-pipeline-modal__confirm:disabled {
    background: #D1D5DB;
    color: #9CA3AF;
    cursor: not-allowed;
}