/* ============================================================
   GLEAP DESIGN SYSTEM
   Crisp canvas, magenta highlight — applied on top of styles.css
   See: .claude/DESIGN.md
   ============================================================ */

:root {
    /* ── Brand colors ─────────────────────────────────────── */
    --color-cloud-canvas: #f5f2f0;
    --color-porcelain-surface: #ffffff;
    --color-graphite-text: #333333;
    --color-ink-text: #000000;
    --color-platinum-border: #d6d6d6;
    --color-silver-detail: #bcbcbc;
    --color-deep-plum: #7b7b7b;
    --color-amethyst-strong: #000000;
    --color-amethyst-soft: #ffffff;
    --color-sky-blue-highlight: #91e0ff;
    --color-sky-blue-soft: rgba(145, 224, 255, 0.25);

    /* ── Channel brand icon colors ──────────────────────────
       Real social-platform colors. Used ONLY on the brand
       icon glyphs (.ti-brand-*) — NOT on backgrounds, badges,
       buttons, or surfaces. Surfaces stay Gleap palette. */
    --brand-whatsapp:   #25D366;
    --brand-instagram:  #E1306C;
    --brand-facebook:   #1877F2;
    --brand-messenger:  #0084FF;
    --brand-telegram:   #229ED9;
    --brand-linkedin:   #0A66C2;
    --brand-tiktok:     var(--color-ink-text);
    --brand-twitter:    #1DA1F2;
    --brand-youtube:    #FF0000;
    --brand-livechat:   #31a793;

    /* ── Status: Online (agent / visitor presence) ──────────
       The single signal where green is reserved as a meaning.
       Used for agent online dots, visitor presence dots, and
       the agents-page stat-icon.online container. */
    --color-online:      #22C55E;
    --color-online-soft: rgba(34, 197, 94, 0.20);

    /* ── Semantic status tokens (success / warning / error) ──
       The legacy --green-*/--amber-*/--red-* tokens are aliased
       to amethyst by the migration above, so use these for any
       UI that needs distinct meaning-colors (paid/pending/failed,
       success/warning/error toasts, etc). */
    --color-success:      #16A34A;
    --color-success-soft: rgba(22, 163, 74, 0.14);
    --color-warning:      #D97706;
    --color-warning-soft: rgba(217, 119, 6, 0.14);
    --color-error:        #DC2626;
    --color-error-soft:   rgba(220, 38, 38, 0.14);

    /* Soft brand-tint backgrounds — used behind the icon glyph
       so the icon container reads as a hint of the channel
       identity without overwhelming the Gleap canvas.
       Tuned for LIGHT mode (canvas = #f5f2f0). */
    --brand-whatsapp-bg:  rgba(37, 211, 102, 0.14);
    --brand-instagram-bg: rgba(225, 48, 108, 0.14);
    --brand-facebook-bg:  rgba(24, 119, 242, 0.14);
    --brand-messenger-bg: rgba(0, 132, 255, 0.14);
    --brand-telegram-bg:  rgba(34, 158, 217, 0.16);
    --brand-linkedin-bg:  rgba(10, 102, 194, 0.14);
    --brand-tiktok-bg:    rgba(0, 0, 0, 0.06);
    --brand-twitter-bg:   rgba(29, 161, 242, 0.14);
    --brand-youtube-bg:   rgba(255, 0, 0, 0.10);
    --brand-livechat-bg:  rgba(49, 167, 147, 0.16);

    /* ── Typography ───────────────────────────────────────── */
    --font-display: 'Playfair Display', 'PP Editorial New', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --text-caption: 13px;
    --text-body: 16px;
    --text-subheading: 20px;
    --text-heading: 32px;
    --text-heading-lg: 48px;
    --text-display-size: 62px;

    --leading-caption: 1.4;
    --leading-body: 1.4;
    --leading-subheading: 1.2;
    --leading-heading: 1.44;
    --leading-heading-lg: 1.25;
    --leading-display: 1.3;

    --tracking-body: -0.16px;
    --tracking-subheading: -0.4px;
    --tracking-heading: -0.8px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* ── Spacing scale ────────────────────────────────────── */
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-56: 56px;
    --spacing-60: 60px;
    --spacing-80: 80px;
    --spacing-88: 88px;
    --spacing-116: 116px;
    --spacing-160: 160px;

    /* ── Layout ───────────────────────────────────────────── */
    --page-max-width: 1200px;
    --section-gap: 30px;
    --card-padding: 40px;
    --element-gap: 16px;

    /* ── Border radii ─────────────────────────────────────── */
    --radius-card: 24px;
    --radius-badge: 10px;
    --radius-button: 10px;
    --radius-large: 42px;
    --radius-icon: 16px;

    /* ── Shadows ──────────────────────────────────────────── */
    --shadow-md: rgba(0, 0, 0, 0.04) 0px 8px 16px 0px;
    --shadow-subtle: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;

    /* ── Re-map the existing semantic tokens to the Gleap palette.
       This rewires the entire app without touching every selector
       in styles.css — anywhere `var(--secondary-color)`, `var(--border-color)`, etc.
       are referenced, they now resolve to Gleap colors. ── */
    --secondary-color:        var(--color-cloud-canvas);
    --border-color:           var(--color-platinum-border);
    --border-light:           var(--color-platinum-border);
    --text-secondary:         var(--color-deep-plum);
    --text-primary:           var(--color-ink-text);
    --text-muted:             var(--color-silver-detail);
    --bg-secondary:           var(--color-cloud-canvas);

    --form-border:            var(--color-platinum-border);
    --form-label:             var(--color-graphite-text);
    --form-bg:                var(--color-porcelain-surface);
    --form-bg-light:          var(--color-cloud-canvas);
    --form-placeholder:       var(--color-silver-detail);
    --form-focus:             var(--color-ink-text);
    --form-focus-shadow:      var(--color-amethyst-soft);

    --skeleton-base:          var(--color-cloud-canvas);
    --skeleton-shine:         var(--color-platinum-border);

    --shadow-light:           rgba(0, 0, 0, 0.04);
    --shadow-medium:          rgba(0, 0, 0, 0.06);
    --shadow-heavy:           rgba(0, 0, 0, 0.08);
    --shadow-dark:            rgba(0, 0, 0, 0.12);

    /* Page-level decorative gradients → flat surface (DESIGN.md "no strong gradients") */
    --page-bg-gradient:       var(--color-cloud-canvas);
    --card-bg-gradient:       var(--color-porcelain-surface);

    /* Slate scale → mapped to Gleap neutrals */
    --slate-50:               var(--color-cloud-canvas);
    --slate-100:              var(--color-cloud-canvas);
    --slate-200:              var(--color-platinum-border);
    --slate-300:              var(--color-platinum-border);
    --slate-400:              var(--color-silver-detail);
    --slate-500:              var(--color-deep-plum);
    --slate-600:              var(--color-deep-plum);
    --slate-700:              var(--color-graphite-text);
    --slate-800:              var(--color-ink-text);
    --slate-900:              var(--color-ink-text);

    /* Gray scale → Gleap neutrals */
    --gray-50:                var(--color-cloud-canvas);
    --gray-100:               var(--color-cloud-canvas);
    --gray-200:               var(--color-platinum-border);
    --gray-300:               var(--color-platinum-border);
    --gray-400:               var(--color-silver-detail);
    --gray-500:               var(--color-deep-plum);
    --gray-600:               var(--color-deep-plum);
    --gray-700:               var(--color-graphite-text);
    --gray-800:               var(--color-ink-text);
    --gray-900:               var(--color-ink-text);

    /* SoftTable accent → amethyst */
    --st-accent:              var(--color-amethyst-strong);
    --st-accent-soft:         var(--color-amethyst-soft);

    /* ── Layout dimensions (moved from styles.css :root) ── */
    --sidebar-width:           60px;
    --inbox-width:             200px;
    --chat-list-width:         300px;
    --customer-sidebar-width:  340px;
    --header-height:           60px;

    /* ── Legacy color tokens — single source of truth.
       Project rule: ALL colors come from gleap.css. Channel brand
       accents, status scales, and indigo/purple primary scales are
       all unified to the Gleap palette below. ──────────────── */

    /* Base/legacy aliases */
    --primary-color:           var(--color-ink-text);
    --white:                   var(--color-porcelain-surface);
    --black:                   var(--color-ink-text);
    --chat-incoming-bg:        var(--color-porcelain-surface);

    /* Channel brand colors → Amethyst */
    --whatsapp-green:          var(--color-amethyst-strong);
    --whatsapp-dark:           var(--color-amethyst-strong);
    --whatsapp-gradient:       var(--color-amethyst-strong);
    --whatsapp-shadow:         rgba(0, 0, 0, 0.08);
    --whatsapp-focus-shadow:   var(--color-amethyst-soft);

    --instagram-pink:          var(--color-amethyst-strong);
    --instagram-purple:        var(--color-amethyst-strong);
    --instagram-orange:        var(--color-amethyst-accent);
    --instagram-gradient:      var(--color-amethyst-strong);

    --facebook-blue:           var(--color-amethyst-strong);
    --facebook-dark:           var(--color-amethyst-strong);
    --facebook-gradient:       var(--color-amethyst-strong);

    --telegram-blue:           var(--color-amethyst-strong);
    --telegram-dark:           var(--color-amethyst-strong);
    --telegram-gradient:       var(--color-amethyst-strong);

    --livechat-teal:           var(--color-amethyst-strong);
    --livechat-dark:           var(--color-amethyst-strong);
    --livechat-gradient:       var(--color-amethyst-strong);
    --livechat-color:          var(--color-amethyst-strong);

    /* Indigo scale → Amethyst */
    --indigo-50:               var(--color-amethyst-soft);
    --indigo-100:              var(--color-amethyst-soft);
    --indigo-200:              var(--color-amethyst-soft);
    --indigo-400:              var(--color-amethyst-accent);
    --indigo-500:              var(--color-amethyst-strong);
    --indigo-600:              var(--color-amethyst-strong);
    --indigo-700:              var(--color-amethyst-strong);
    --indigo-gradient:         var(--color-amethyst-strong);
    --indigo-shadow:           rgba(0, 0, 0, 0.08);
    --indigo-bg-gradient:      var(--color-amethyst-soft);
    --indigo-light-gradient:   var(--color-amethyst-soft);

    /* Purple scale → Amethyst */
    --purple-50:               var(--color-amethyst-soft);
    --purple-100:              var(--color-amethyst-soft);
    --purple-200:              var(--color-amethyst-soft);
    --purple-400:              var(--color-amethyst-accent);
    --purple-500:              var(--color-amethyst-strong);
    --purple-600:              var(--color-amethyst-strong);
    --purple-700:              var(--color-amethyst-strong);
    --purple-800:              var(--color-amethyst-strong);
    --purple-gradient:         var(--color-amethyst-strong);
    --purple-shadow:           rgba(0, 0, 0, 0.08);
    --purple-light-gradient:   var(--color-amethyst-soft);

    /* Blue scale → Amethyst */
    --blue-50:                 var(--color-amethyst-soft);
    --blue-100:                var(--color-amethyst-soft);
    --blue-200:                var(--color-amethyst-soft);
    --blue-400:                var(--color-amethyst-accent);
    --blue-500:                var(--color-amethyst-strong);
    --blue-600:                var(--color-amethyst-strong);
    --blue-700:                var(--color-amethyst-strong);
    --blue-gradient:           var(--color-amethyst-strong);
    --blue-light-gradient:     var(--color-amethyst-soft);

    /* Cyan / Sky → Amethyst */
    --cyan-100:                var(--color-amethyst-soft);
    --cyan-400:                var(--color-amethyst-accent);
    --cyan-500:                var(--color-amethyst-strong);
    --cyan-600:                var(--color-amethyst-strong);
    --cyan-gradient:           var(--color-amethyst-strong);
    --sky-100:                 var(--color-amethyst-soft);
    --sky-600:                 var(--color-amethyst-strong);
    --sky-700:                 var(--color-amethyst-strong);
    --sky-800:                 var(--color-amethyst-strong);
    --sky-gradient:            var(--color-amethyst-strong);

    /* Status: Green / Emerald / Teal → Amethyst */
    --green-50:                var(--color-amethyst-soft);
    --green-100:               var(--color-amethyst-soft);
    --green-200:               var(--color-amethyst-soft);
    --green-300:               var(--color-amethyst-accent);
    --green-400:               var(--color-amethyst-accent);
    --green-500:               var(--color-amethyst-strong);
    --green-600:               var(--color-amethyst-strong);
    --green-700:               var(--color-amethyst-strong);
    --success-gradient:        var(--color-amethyst-soft);

    --emerald-50:              var(--color-amethyst-soft);
    --emerald-100:             var(--color-amethyst-soft);
    --emerald-200:             var(--color-amethyst-soft);
    --emerald-500:             var(--color-amethyst-strong);
    --emerald-600:             var(--color-amethyst-strong);
    --emerald-gradient:        var(--color-amethyst-strong);
    --emerald-light-gradient:  var(--color-amethyst-soft);

    --teal-50:                 var(--color-amethyst-soft);
    --teal-100:                var(--color-amethyst-soft);
    --teal-500:                var(--color-amethyst-strong);
    --teal-600:                var(--color-amethyst-strong);

    /* Status: Yellow / Orange / Amber → Amethyst */
    --yellow-50:               var(--color-amethyst-soft);
    --yellow-100:              var(--color-amethyst-soft);
    --yellow-200:              var(--color-amethyst-soft);
    --yellow-400:              var(--color-amethyst-accent);
    --yellow-500:              var(--color-amethyst-strong);
    --warning-gradient:        var(--color-amethyst-soft);

    --orange-50:               var(--color-amethyst-soft);
    --orange-100:              var(--color-amethyst-soft);
    --orange-400:              var(--color-amethyst-accent);
    --orange-500:              var(--color-amethyst-strong);
    --orange-600:              var(--color-amethyst-strong);
    --orange-700:              var(--color-amethyst-strong);
    --orange-gradient:         var(--color-amethyst-strong);

    --amber-50:                var(--color-amethyst-soft);
    --amber-100:               var(--color-amethyst-soft);
    --amber-400:               var(--color-amethyst-accent);
    --amber-500:               var(--color-amethyst-strong);
    --amber-600:               var(--color-amethyst-strong);
    --amber-gradient:          var(--color-amethyst-strong);

    /* Status: Red / Pink → Amethyst */
    --red-50:                  var(--color-amethyst-soft);
    --red-100:                 var(--color-amethyst-soft);
    --red-200:                 var(--color-amethyst-soft);
    --red-400:                 var(--color-amethyst-accent);
    --red-500:                 var(--color-amethyst-strong);
    --red-600:                 var(--color-amethyst-strong);
    --red-700:                 var(--color-amethyst-strong);
    --error-gradient:          var(--color-amethyst-soft);

    --pink-400:                var(--color-amethyst-accent);
    --pink-500:                var(--color-amethyst-strong);
    --pink-600:                var(--color-amethyst-strong);
    --pink-700:                var(--color-amethyst-strong);
    --pink-gradient:           var(--color-amethyst-strong);

    /* Dark legacy aliases — auto-invert via --color-ink-text */
    --dark-primary:            var(--color-ink-text);
    --dark-secondary:          var(--color-graphite-text);
    --dark-gradient:           var(--color-ink-text);
    --slate-dark-gradient:     var(--color-ink-text);

    /* Spam button */
    --spam-btn-bg:             var(--color-cloud-canvas);
    --spam-btn-hover-bg:       var(--color-amethyst-soft);
    --spam-btn-icon:           var(--color-amethyst-strong);
    --spam-btn-shadow:         0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── Dark mode ─────────────────────────────────────────────
   Coherent dark variant. DESIGN.md is light-themed; we derive
   dark surfaces with a faint plum tint so the amethyst accent
   still reads as the brand color.
*/
[data-theme="dark"] {
    --color-cloud-canvas:        #0e0c10;
    --color-porcelain-surface:   #1a1620;
    --color-graphite-text:       #e9e7eb;
    --color-ink-text:            #ffffff;
    --color-platinum-border:     #2a2330;
    --color-silver-detail:       #6b6470;
    --color-deep-plum:           #9a929e;
    --color-amethyst-strong:     #d4a3f3;
    --color-amethyst-strong:     #b87de2;
    --color-amethyst-soft:       rgba(212, 163, 243, 0.20);
    --color-sky-blue-highlight:  #5fb8e0;
    --color-sky-blue-soft:       rgba(95, 184, 224, 0.18);

    --secondary-color:           var(--color-cloud-canvas);
    --border-color:              var(--color-platinum-border);
    --border-light:              var(--color-platinum-border);
    --text-secondary:            var(--color-deep-plum);
    --text-primary:              var(--color-ink-text);
    --text-muted:                var(--color-silver-detail);
    --bg-secondary:              var(--color-cloud-canvas);

    --form-border:               var(--color-platinum-border);
    --form-bg:                   var(--color-porcelain-surface);
    --form-bg-light:             var(--color-cloud-canvas);
    --form-focus:                var(--color-amethyst-strong);
    --form-focus-shadow:         var(--color-amethyst-soft);

    --skeleton-base:             #1f1a26;
    --skeleton-shine:            var(--color-platinum-border);

    --page-bg-gradient:          var(--color-cloud-canvas);
    --card-bg-gradient:          var(--color-porcelain-surface);

    /* Dark slate/gray scales — derived to be readable on a dark canvas */
    --slate-50:                  #1f1a26;
    --slate-100:                 var(--color-porcelain-surface);
    --slate-200:                 var(--color-platinum-border);
    --slate-300:                 var(--color-platinum-border);
    --slate-400:                 var(--color-silver-detail);
    --slate-500:                 var(--color-deep-plum);
    --slate-600:                 #b8b0bc;
    --slate-700:                 var(--color-graphite-text);
    --slate-800:                 var(--color-ink-text);
    --slate-900:                 var(--color-ink-text);

    --gray-50:                   #1f1a26;
    --gray-100:                  var(--color-porcelain-surface);
    --gray-200:                  var(--color-platinum-border);
    --gray-300:                  var(--color-platinum-border);
    --gray-400:                  var(--color-silver-detail);
    --gray-500:                  var(--color-deep-plum);
    --gray-600:                  #b8b0bc;
    --gray-700:                  var(--color-graphite-text);
    --gray-800:                  var(--color-ink-text);
    --gray-900:                  var(--color-ink-text);

    --st-accent:                 var(--color-amethyst-strong);
    --st-accent-soft:            var(--color-amethyst-soft);

    /* Brand-tint backgrounds for dark canvas — boosted opacity
       so the tint registers against #0e0c10 (cloud-canvas dark). */
    --brand-whatsapp-bg:  rgba(37, 211, 102, 0.22);
    --brand-instagram-bg: rgba(225, 48, 108, 0.22);
    --brand-facebook-bg:  rgba(24, 119, 242, 0.22);
    --brand-messenger-bg: rgba(0, 132, 255, 0.22);
    --brand-telegram-bg:  rgba(34, 158, 217, 0.24);
    --brand-linkedin-bg:  rgba(10, 102, 194, 0.22);
    --brand-tiktok-bg:    rgba(255, 255, 255, 0.10);
    --brand-twitter-bg:   rgba(29, 161, 242, 0.22);
    --brand-youtube-bg:   rgba(255, 0, 0, 0.18);
    --brand-livechat-bg:  rgba(49, 167, 147, 0.24);

    /* Online status — same hue, slightly bumped saturation for
       contrast against #0e0c10 dark canvas. */
    --color-online:      #34D17A;
    --color-online-soft: rgba(52, 209, 122, 0.28);

    /* Semantic status tokens — bumped for dark canvas contrast. */
    --color-success:      #34D17A;
    --color-success-soft: rgba(52, 209, 122, 0.22);
    --color-warning:      #F59E0B;
    --color-warning-soft: rgba(245, 158, 11, 0.22);
    --color-error:        #EF4444;
    --color-error-soft:   rgba(239, 68, 68, 0.22);

    /* Heavier shadows on dark canvas — light tokens use thin
       low-alpha black, which is invisible against #0e0c10. We
       lift opacity to 0.40 and 0.55 so cards/popups still cast
       a perceptible drop. */
    --shadow-subtle: rgba(0, 0, 0, 0.40) 0px 1px 2px 0px;
    --shadow-md:     rgba(0, 0, 0, 0.55) 0px 8px 24px 0px;
}

/* ── Responsive layout dimension overrides ─────────────────
   Tighter inbox/chat columns on tablets, larger header on
   mobile to clear the iOS notch + give more touch area. */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --inbox-width:        280px;
        --chat-list-width:    320px;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: calc(60px + env(safe-area-inset-top));
    }
}

/* ============================================================
   Base typography
   ============================================================ */

body {
    font-family: var(--font-sans) !important;
    background-color: var(--color-cloud-canvas) !important;
    color: var(--color-graphite-text);
    letter-spacing: var(--tracking-body);
}

h1, h2 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-regular);
    color: var(--color-ink-text);
    letter-spacing: -0.5px;
}

h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-text);
}

.page-title h1 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.6px;
}

/* ============================================================
   Buttons — Gleap brand
   ============================================================ */

.btn {
    border-radius: var(--radius-button) !important;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
    box-shadow: none;
}

.btn:hover {
    transform: none;
}

/* Primary action — filled amethyst.
   `!important` is used here intentionally: DESIGN.md mandates Amethyst as the
   SINGULAR brand color for primary actions, so per-page overrides (e.g.
   `.surveys-page .btn-primary { background: blue }`) must lose to keep the
   identity consistent across the whole app. */
.btn-primary {
    background: var(--white) !important;
    color: var(--color-ink-text) !important;
    box-shadow: none !important;
    border: 1px solid var(--color-amethyst-strong) !important;
    background-image: none !important;
}
.btn-primary:hover {
    background: var(--color-amethyst-strong) !important;
    border-color: var(--color-amethyst-strong) !important;
    box-shadow: var(--shadow-subtle) !important;
    transform: none;
    color: var(--color-porcelain-surface) !important;
}
.btn-primary:active { transform: scale(0.98); }

/* Affirmative dark — inverted button (save/confirm) */
.btn-dark,
.btn-affirmative {
    background: var(--color-ink-text);
    color: var(--color-porcelain-surface);
    border: 1px solid var(--color-ink-text);
    box-shadow: none;
}
.btn-dark:hover,
.btn-affirmative:hover {
    background: var(--color-graphite-text);
    border-color: var(--color-graphite-text);
    box-shadow: var(--shadow-subtle);
    color: var(--color-porcelain-surface);
    transform: none;
}

/* Secondary / Outline — outlined ink */
.btn-secondary,
.btn-outline {
    background: transparent;
    color: var(--color-ink-text);
    border: 1px solid var(--color-platinum-border);
    box-shadow: none;
}
.btn-secondary:hover,
.btn-outline:hover {
    background: var(--color-cloud-canvas);
    border-color: var(--color-ink-text);
    color: var(--color-ink-text);
    box-shadow: none;
    transform: none;
}

/* Ghost — minimal */
.btn-ghost {
    background: transparent;
    color: var(--color-deep-plum);
    border: none;
    box-shadow: none;
}
.btn-ghost:hover {
    background: var(--color-cloud-canvas);
    color: var(--color-ink-text);
}

/* Success / Danger / Warning — flatten gradients per DESIGN.md
   ("Refrain from using strong, colorful gradients"). Keep semantic
   colors solid. */
.btn-success {
    background: #10b981;
    color: #ffffff;
    box-shadow: none;
    border: 1px solid #10b981;
}
.btn-success:hover {
    background: #059669;
    border-color: #059669;
    box-shadow: var(--shadow-subtle);
    transform: none;
}

.btn-danger {
    background: #ef4444;
    color: #ffffff;
    box-shadow: none;
    border: 1px solid #ef4444;
}
.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: var(--shadow-subtle);
    transform: none;
}

.btn-warning {
    background: #f59e0b;
    color: #ffffff;
    box-shadow: none;
    border: 1px solid #f59e0b;
}
.btn-warning:hover {
    background: #d97706;
    border-color: #d97706;
    box-shadow: var(--shadow-subtle);
    transform: none;
}

/* ============================================================
   Forms
   ============================================================ */

.form-control,
.form-input,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select {
    border-radius: var(--radius-button);
    border: 1px solid var(--color-platinum-border);
    background: var(--color-porcelain-surface);
    color: var(--color-ink-text);
    font-family: var(--font-sans);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-input:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-ink-text);
    box-shadow: 0 0 0 3px var(--color-amethyst-soft);
}

/* ============================================================
   Modals
   ============================================================ */

.modal-content,
.modal-container {
    border-radius: var(--radius-card) !important;
    background: var(--color-porcelain-surface) !important;
    box-shadow: var(--shadow-md) !important;
    background-image: none !important;
}

.modal-overlay {
    background: rgba(15, 23, 42, 0.5);
}

[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.6);
}

.modal-header {
    border-bottom: 1px solid var(--color-platinum-border);
}

.modal-header h3,
.modal-title {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-text);
}

.modal-header h3 i {
    background: var(--color-amethyst-soft);
    color: var(--color-ink-text);
    border-radius: var(--radius-badge);
}

.modal-close {
    border-radius: var(--radius-badge);
    color: var(--color-deep-plum);
}
.modal-close:hover {
    background: var(--color-cloud-canvas);
    color: var(--color-ink-text);
}

/* ============================================================
   Cards & stats
   ============================================================ */

.stat-card,
.card {
    border-radius: var(--radius-card) !important;
    background: var(--color-porcelain-surface) !important;
    border: 1px solid var(--color-platinum-border) !important;
    box-shadow: var(--shadow-subtle) !important;
    background-image: none !important;
}

.stat-card .stat-value {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-text);
}

.stat-card .stat-label {
    color: var(--color-deep-plum);
}

/* ============================================================
   Badges
   ============================================================ */

.badge {
    border-radius: var(--radius-badge) !important;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-sans);
}

.badge-primary,
.badge-purple {
    background: var(--color-amethyst-strong);
    color: var(--color-ink-text);
}

.badge-info {
    background: var(--color-sky-blue-soft);
    color: #075985;
    border: 1px solid var(--color-sky-blue-highlight);
}

[data-theme="dark"] .badge-info {
    background: var(--color-sky-blue-soft);
    color: var(--color-sky-blue-highlight);
}

.badge-secondary {
    background: transparent;
    color: var(--color-graphite-text);
    border: 1px solid var(--color-platinum-border);
}

/* ============================================================
   Page layout containers
   ============================================================ */

.customers-wrapper,
.templates-wrapper,
.broadcasts-wrapper,
.surveys-wrapper,
.satisfaction-survey-wrapper,
.agents-wrapper,
.billing-wrapper,
.comment-automation-wrapper {
    background: var(--color-cloud-canvas);
}

.customers-page,
.templates-page,
.broadcasts-page,
.surveys-page,
.satisfaction-survey-page,
.agents-page,
.billing-page,
.comment-automation-page {
    background: var(--color-cloud-canvas);
}

.page-header {
    margin-bottom: var(--section-gap);
}

.page-title h1 {
    font-family: var(--font-display);
    color: var(--color-ink-text);
    font-weight: var(--font-weight-regular);
}

.page-subtitle {
    color: var(--color-deep-plum);
    font-family: var(--font-sans);
}

/* ============================================================
   SoftTable — Gleap accents
   ============================================================ */

.soft-table {
    --st-bg: var(--color-porcelain-surface);
    --st-bg-alt: var(--color-cloud-canvas);
    --st-border: var(--color-platinum-border);
    --st-text: var(--color-ink-text);
    --st-text-muted: var(--color-deep-plum);
    --st-accent: var(--color-amethyst-strong);
    --st-accent-soft: var(--color-amethyst-soft);
    --st-radius: var(--radius-card);
    --st-shadow: var(--shadow-subtle);
    --st-shadow-lg: var(--shadow-md);
    border-color: var(--color-platinum-border);
    border-radius: var(--radius-card);
}

.soft-table .st-page-btn.active {
    background: var(--color-amethyst-strong);
    border-color: var(--color-amethyst-strong);
    color: var(--white);
}

.soft-table .st-page-btn {
    border-radius: var(--radius-badge);
}

.soft-table .st-search,
.soft-table .st-filter select,
.soft-table .st-page-size-select {
    border-radius: var(--radius-button);
}

.soft-table .st-col-toggle-btn {
    border-radius: var(--radius-button);
}

.soft-table .st-col-toggle-dropdown {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
}

/* ============================================================
   Status / status badges (let semantic colors keep their hues
   but soften with Gleap shapes)
   ============================================================ */

.status-badge {
    border-radius: var(--radius-badge);
    font-weight: var(--font-weight-medium);
}

/* ============================================================
   Top header & sidebar — Gleap surface
   ============================================================ */

.top-header {
    background: var(--color-porcelain-surface);
    border-bottom: 1px solid var(--color-platinum-border);
    box-shadow: var(--shadow-subtle);
}

.sidebar-icons {
    background: var(--color-porcelain-surface);
    border-right: 1px solid var(--color-platinum-border);
}

.sidebar-icons .nav-item.active {
    background: var(--color-amethyst-soft);
    color: var(--color-ink-text);
}

.sidebar-icons .nav-item:hover {
    background: var(--color-cloud-canvas);
}

/* ============================================================
   Filter "old-style" filter-bar (kept on a few pages)
   ============================================================ */

.filters-bar {
    background: transparent;
    border: 0;
}

.filter-select,
.filter-input,
.search-box input {
    border-radius: var(--radius-button) !important;
    border: 1px solid var(--color-platinum-border) !important;
}

.search-box {
    background: var(--color-porcelain-surface);
    border-radius: var(--radius-button);
    border: 1px solid var(--color-platinum-border);
}

/* ============================================================
   Chat & message UIs — keep the platform brand cues but align
   chrome with Gleap (rounded corners + ink text + platinum borders).
   ============================================================ */

.chat-incoming-bg,
.chat-list,
.chat-list-wrapper {
    background: var(--color-porcelain-surface);
}

/* ============================================================
   MOBILE — table pages (≤ 768px)
   Applies to customers / templates / broadcasts / surveys /
   satisfaction-survey / comment-automation / agents / billing.
   The shared layout DNA across these pages:
     .{name}-page > .{name}-wrapper > [page-header, stats-row, #{tbl}]
   so we can target them together.
   ============================================================ */

@media (max-width: 768px) {
    /* Outer page should always allow the page itself to scroll, never
       trap content in a fixed-height box that hides parts behind a
       hidden overflow on a phone. */
    .customers-page,
    .templates-page,
    .broadcasts-page,
    .surveys-page,
    .agents-page,
    .billing-page,
    .comment-automation-page,
    .satisfaction-survey-page {
        height: auto !important;
        min-height: calc(100vh - var(--header-height, 60px));
        overflow-y: auto;
        grid-column: 1 / -1 !important;
    }

    .customers-wrapper,
    .templates-wrapper,
    .broadcasts-wrapper,
    .surveys-wrapper,
    .agents-wrapper,
    .billing-wrapper,
    .comment-automation-wrapper,
    .satisfaction-survey-wrapper {
        padding: 16px !important;
        gap: 16px !important;
        height: auto !important;
        min-height: 100%;
    }

    /* Page header — stack title and right-side action buttons */
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .page-header-left,
    .page-header-right {
        width: 100%;
        flex-direction: column;
    }
    .page-header-right {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    .page-header-right .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        font-size: 13px;
        padding: 10px 12px;
    }
    .page-header-right .btn span,
    .page-header-right .btn i { white-space: nowrap; }

    /* Display headlines: scale down so they don't dominate */
    .page-title h1 {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }
    .page-subtitle {
        font-size: 13px !important;
    }
    .page-title > i {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
    }

    /* Stats row — 2-column grid */
    .stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .stat-card {
        padding: 14px !important;
        gap: 10px !important;
        flex-direction: row;
        align-items: center;
    }
    .stat-card .stat-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
    .stat-card .stat-value {
        font-size: 18px !important;
    }
    .stat-card .stat-label {
        font-size: 11px !important;
    }

    /* Section header inside satisfaction-survey */
    .satisfaction-survey-page .section-header h2 {
        font-size: 18px !important;
    }

    /* Filter rows that some pages still keep external — full width */
    .filters-bar {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .filters-bar > * { width: 100%; }
    .filter-select,
    .filter-input { width: 100%; height: 40px; }

    /* Modal content: full-width with safe insets */
    .modal-overlay { padding: 12px !important; }
    .modal-content,
    .modal-container {
        max-width: 100% !important;
        margin: auto !important;
        max-height: calc(100vh - 32px) !important;
        overflow-y: auto;
    }
    .modal-header { padding: 16px !important; }
    .modal-body { padding: 16px !important; }
    .modal-footer { padding: 12px 16px !important; flex-wrap: wrap; gap: 8px; }
    .modal-footer .btn { flex: 1 1 100%; }

    /* Form rows that often use side-by-side fields → stack */
    .form-row,
    .form-grid {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* Very small phones (≤ 480px) — single-column stats and slimmer cards */
@media (max-width: 480px) {
    .stats-row {
        grid-template-columns: 1fr !important;
    }
    .page-header-right .btn {
        flex: 1 1 100%;
    }
    .stat-card {
        padding: 12px !important;
    }
    .page-title h1 {
        font-size: 20px !important;
    }
}

/* Sidebar: hide on mobile so the table page can use the full width.
   The hamburger menu in the top-header opens the sidebar overlay
   on demand; that pattern is already wired in global.settings.js. */
@media (max-width: 768px) {
    #app {
        grid-template-columns: 1fr !important;
    }
    .sidebar-icons {
        position: fixed;
        top: var(--header-height, 60px);
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: var(--shadow-md);
    }
    .sidebar-icons.mobile-open,
    .sidebar-icons.open {
        transform: translateX(0);
    }
    .top-header { grid-column: 1 / -1; }
}

/* ============================================================
   TOP HEADER — Gleap aligned
   Persistent shell bar at the top of the app.
   DESIGN.md targets: flat Porcelain surface, Platinum borders,
   10px button / 24px card radii, Amethyst as the only brand color,
   no gradients, subtle shadows only.
   ============================================================ */

.top-header {
    background: var(--color-porcelain-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--color-platinum-border) !important;
    box-shadow: var(--shadow-subtle) !important;
    backdrop-filter: none !important;
    padding: 0 16px;
}

[data-theme="dark"] .top-header {
    background: var(--color-porcelain-surface) !important;
    border-bottom-color: var(--color-platinum-border) !important;
}

/* Logo */
.header-logo {
    border-radius: var(--radius-button);
    transition: opacity 0.18s ease;
}
.header-logo:hover {
    transform: none;
    opacity: 0.85;
}
.logo-icon {
    border-radius: var(--radius-badge);
}

/* Burger menu — ink bars, button radius */
.burger-menu {
    border-radius: var(--radius-button) !important;
}
.burger-menu:hover {
    background: var(--color-cloud-canvas) !important;
}
.burger-bar {
    background-color: var(--color-ink-text) !important;
}

/* ── Generic header icon button (wallet, notifications, theme-toggle) ── */
.wallet-btn,
.notification-btn,
.theme-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-button) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--color-deep-plum);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.wallet-btn:hover,
.notification-btn:hover,
.theme-toggle-btn:hover {
    background: var(--color-cloud-canvas) !important;
    border-color: var(--color-platinum-border) !important;
    color: var(--color-ink-text) !important;
}
.wallet-btn i,
.notification-btn i,
.theme-toggle-btn i {
    color: inherit !important;
    font-size: 18px;
}

/* Active (open) state for wallet / notification → Amethyst soft */
.wallet-wrapper.active .wallet-btn,
.notification-wrapper.active .notification-btn {
    background: var(--color-amethyst-soft) !important;
    border-color: var(--color-amethyst-strong) !important;
    color: var(--color-ink-text) !important;
}
.wallet-wrapper.active .wallet-btn i,
.notification-wrapper.active .notification-btn i {
    color: var(--color-ink-text) !important;
}

/* Notification badge — keep red (semantic warning), but tighter chrome */
.notification-badge {
    border: 2px solid var(--color-porcelain-surface) !important;
    background: #ef4444 !important;
    border-radius: 9999px !important;
}

/* ── Wallet popup ── */
.wallet-popup {
    background: var(--color-porcelain-surface) !important;
    border: 1px solid var(--color-platinum-border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 20px;
}
.wallet-popup-header {
    border-bottom-color: var(--color-platinum-border) !important;
}
.wallet-popup-header i {
    color: var(--color-amethyst-strong) !important;
}
.wallet-popup-header span {
    color: var(--color-deep-plum);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-medium);
}
.wallet-popup-balance .balance-amount {
    color: var(--color-ink-text) !important;
    font-family: var(--font-sans);
}
.wallet-popup-balance .balance-currency {
    color: var(--color-deep-plum) !important;
}

/* Wallet add-balance button → primary Amethyst (DESIGN.md mandates singular brand color).
   Text uses --color-porcelain-surface so it auto-inverts against the
   amethyst fill in BOTH modes:
     light:  fill=black     text=white          (porcelain-surface=#fff)
     dark:   fill=light-purple text=dark-canvas (porcelain-surface=#1a1620)
   The previous version used --color-amethyst-soft for the text, which in
   dark mode resolves to a translucent amethyst — almost invisible against
   the light-purple fill. */
.wallet-add-btn {
    background: var(--color-amethyst-strong) !important;
    background-image: none !important;
    color: var(--color-porcelain-surface) !important;
    border: 1px solid var(--color-amethyst-strong) !important;
    border-radius: var(--radius-button) !important;
    box-shadow: none !important;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
}
.wallet-add-btn i {
    color: inherit !important;
}
.wallet-add-btn:hover {
    background: var(--color-ink-text) !important;
    border-color: var(--color-ink-text) !important;
    color: var(--color-porcelain-surface) !important;
    box-shadow: var(--shadow-subtle) !important;
    transform: none !important;
}

/* ── Notification popup ── */
.notification-popup {
    background: var(--color-porcelain-surface) !important;
    border: 1px solid var(--color-platinum-border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-md) !important;
}
.notification-popup-header {
    border-bottom-color: var(--color-platinum-border) !important;
}
.notification-popup-header span {
    color: var(--color-ink-text);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
}
.notification-mark-all {
    color: var(--color-amethyst-strong) !important;
    background: transparent !important;
    border: none !important;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}
.notification-mark-all:hover {
    color: var(--color-ink-text) !important;
}
.notification-list .notification-empty {
    color: var(--color-deep-plum);
}
.notification-list .notification-empty i {
    color: var(--color-silver-detail);
}

/* ── User profile pill ── */
.user-profile {
    background: var(--color-porcelain-surface) !important;
    border: 1px solid var(--color-platinum-border) !important;
    border-radius: var(--radius-button) !important;
    box-shadow: none !important;
    padding: 6px 12px;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.user-profile:hover {
    background: var(--color-cloud-canvas) !important;
    border-color: var(--color-deep-plum) !important;
    box-shadow: none !important;
    transform: none !important;
}

.user-avatar {
    background: var(--color-ink-text) !important;
    background-image: none !important;
    color: var(--color-porcelain-surface) !important;
    box-shadow: none !important;
    border-radius: 9999px;
}

.user-name {
    color: var(--color-ink-text) !important;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
}
.user-email {
    color: var(--color-deep-plum) !important;
    font-family: var(--font-sans);
}
.profile-chevron {
    color: var(--color-deep-plum) !important;
}
.user-profile.active .profile-chevron {
    color: var(--color-ink-text) !important;
}

/* ── Profile dropdown ── */
.profile-dropdown {
    background: var(--color-porcelain-surface) !important;
    border: 1px solid var(--color-platinum-border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
}
.profile-dropdown .dropdown-item {
    color: var(--color-ink-text) !important;
    background: transparent !important;
    background-image: none !important;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-medium);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.profile-dropdown .dropdown-item:hover {
    background: var(--color-cloud-canvas) !important;
    background-image: none !important;
    color: var(--color-ink-text) !important;
}
.profile-dropdown .dropdown-item i {
    color: var(--color-deep-plum) !important;
    transition: color 0.15s ease;
}
.profile-dropdown .dropdown-item:hover i {
    color: var(--color-ink-text) !important;
}
.profile-dropdown .dropdown-divider {
    background: var(--color-platinum-border) !important;
}
.profile-dropdown .logout-item,
.profile-dropdown .logout-item i {
    color: #dc2626 !important;
}
.profile-dropdown .logout-item:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    background-image: none !important;
    color: #dc2626 !important;
}
.profile-dropdown .logout-item:hover i {
    color: #dc2626 !important;
}

/* ── Language select ── */
.language-selector-wrapper {
    /* Wrapper itself stays as-is */
}
.language-select {
    border: 1px solid var(--color-platinum-border) !important;
    border-radius: var(--radius-button) !important;
    background: var(--color-porcelain-surface) !important;
    box-shadow: none !important;
    color: var(--color-ink-text) !important;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-medium);
}
.language-select:hover {
    border-color: var(--color-deep-plum) !important;
    box-shadow: none !important;
}
.language-select:focus {
    border-color: var(--color-ink-text) !important;
    box-shadow: 0 0 0 3px var(--color-amethyst-soft) !important;
    outline: none;
}

/* Select2 internal — match Gleap chrome */
.select2-container--bootstrap-5 .select2-selection {
    border: 1px solid var(--color-platinum-border) !important;
    border-radius: var(--radius-button) !important;
    background: var(--color-porcelain-surface) !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--color-ink-text) !important;
    box-shadow: 0 0 0 3px var(--color-amethyst-soft) !important;
}
.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--color-platinum-border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-md) !important;
    background: var(--color-porcelain-surface) !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background: var(--color-amethyst-soft) !important;
    color: var(--color-ink-text) !important;
}
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background: var(--color-cloud-canvas) !important;
    color: var(--color-ink-text) !important;
}

/* ── Header right gap = element-gap from DESIGN.md (16px) ── */
.header-right {
    gap: var(--element-gap) !important;
}
.header-left {
    gap: 12px;
}

/* ── Mobile: header chrome adjustments ── */
@media (max-width: 768px) {
    .top-header {
        padding: 0 12px;
    }
    .header-right {
        gap: 8px !important;
    }
    /* Hide secondary text on small screens — only avatar shows */
    .user-profile .user-info,
    .user-profile .profile-chevron {
        display: none;
    }
    .user-profile {
        padding: 4px;
        border-radius: 9999px !important;
    }
    /* Burger menu becomes visible (handled in styles.css originally with display:none) */
    .burger-menu {
        display: flex !important;
    }
    /* Language select is wide on mobile — let it shrink */
    .language-select {
        min-width: 0;
        width: auto;
        padding: 6px 10px;
        font-size: 13px;
    }
    .language-selector-wrapper {
        max-width: 120px;
    }
    /* Wallet/notification/theme buttons stay 40x40 — already set */
    .wallet-popup,
    .notification-popup,
    .profile-dropdown {
        right: 8px !important;
        max-width: calc(100vw - 16px);
    }
}

@media (max-width: 480px) {
    /* Even tighter — drop wallet button entirely on tiny screens
       (admin-only, has wallet-popup with full balance UI; users can use the
       Billing page instead). */
    .wallet-wrapper { display: none; }
    .language-selector-wrapper { max-width: 90px; }
}

/* ============================================================
   Chat page — borderless inputs
   Remove static borders and focus/hover border highlights on
   inputs and textareas inside chat surfaces. Keeps the rounded
   pill shape but drops the platinum line and the colored
   focus ring so fields read as soft, flat surfaces.
   ============================================================ */

/* Chat list search (left panel) */
.chat-search-box,
.chat-search-box:focus-within,
.chat-search-box:hover {
    border: 0 !important;
    box-shadow: none !important;
    background: var(--color-cloud-canvas) !important;
}

.chat-search-box input,
.chat-search-box input:focus,
.chat-search-box input:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Template selection modal search */
.template-search input,
.template-search input:focus,
.template-search input:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: var(--color-cloud-canvas) !important;
}

/* Customer note textarea + mention input */
.customer-note-form textarea,
.customer-note-form textarea:focus,
.customer-note-form textarea:hover,
.customer-note-form input,
.customer-note-form input:focus,
.customer-note-form input:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: var(--color-cloud-canvas) !important;
}

/* New chat modal inputs (.form-control) */
.new-chat-modal-body .form-control,
.new-chat-modal-body .form-control:focus,
.new-chat-modal-body .form-control:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: var(--color-cloud-canvas) !important;
}

/* Quick reply modal — textarea + shortcut input */
.quick-reply-input-wrapper textarea,
.quick-reply-input-wrapper textarea:focus,
.quick-reply-input-wrapper textarea:hover,
.quick-reply-shortcut-input-wrap input,
.quick-reply-shortcut-input-wrap input:focus,
.quick-reply-shortcut-input-wrap input:hover,
.quick-reply-modal-body .form-control,
.quick-reply-modal-body .form-control:focus,
.quick-reply-modal-body .form-control:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: var(--color-cloud-canvas) !important;
}

.quick-reply-shortcut-input-wrap {
    border: 0 !important;
    box-shadow: none !important;
    background: var(--color-cloud-canvas) !important;
}

/* Location template modal inputs */
.location-modal-body input,
.location-modal-body input:focus,
.location-modal-body input:hover,
.location-modal-body .form-control,
.location-modal-body .form-control:focus,
.location-modal-body .form-control:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: var(--color-cloud-canvas) !important;
}

/* Folder modal name input */
.folder-modal-field input[type="text"],
.folder-modal-field input[type="text"]:focus,
.folder-modal-field input[type="text"]:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: var(--color-cloud-canvas) !important;
}

/* ============================================================
   GLOBAL — disable hover/focus border-color shifts on ALL inputs
   Static borders stay (so the field is still readable as input),
   but :hover, :focus, :focus-visible, :focus-within no longer
   change border color, outline, or box-shadow. Border color is
   locked to Platinum so any earlier rule that recolors it on
   focus/hover (whatsapp-green, primary-color, hardcoded blues)
   becomes a no-op.
   ============================================================ */

input:hover,
input:focus,
input:focus-visible,
input:active,
textarea:hover,
textarea:focus,
textarea:focus-visible,
textarea:active,
select:hover,
select:focus,
select:focus-visible,
select:active,
.form-control:hover,
.form-control:focus,
.form-control:focus-visible,
.form-control:active,
.form-select:hover,
.form-select:focus,
.form-select:focus-visible,
.form-select:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--color-platinum-border) !important;
}

/* Wrapper components that paint a focus ring via :focus-within
   (search boxes, input groups, custom comboboxes) — kill the
   color change but keep the static platinum edge. */
.search-box:focus-within,
.search-box:hover,
.chat-search-box:focus-within,
.chat-search-box:hover,
.input-group:focus-within,
.quick-reply-input-wrapper:focus-within,
.quick-reply-shortcut-input-wrap:focus-within,
.note-input-wrapper:focus-within,
.template-search:focus-within,
.header-file-dropzone:focus-within,
.template-modal-file-upload:focus-within {
    border-color: var(--color-platinum-border) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Main chat composer (#chatInput wrapper)
   Wrapper keeps its Platinum border + divider line above the
   toolbar (per spec). Only the inner textarea is borderless. */
.chat-input-wrapper,
.chat-input-wrapper:focus-within,
.chat-input-wrapper:hover {
    border: 1px solid var(--color-platinum-border) !important;
    outline: none !important;
    box-shadow: none !important;
    background: var(--color-porcelain-surface) !important;
}

.chat-input-wrapper .chat-input-toolbar {
    border-top: 1px solid var(--color-platinum-border) !important;
}

#chatInput,
#chatInput:focus,
#chatInput:hover,
.chat-input,
.chat-input:focus,
.chat-input:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Quick-reply popup search — padding inside the pill so the
   placeholder/text doesn't touch the border. */
.quick-reply-search input,
#quickReplySearch {
    padding: 8px 14px !important;
    border-radius: var(--radius-button) !important;
}

/* ============================================================
   Channel brand icon coloring
   Project rule: every social-platform icon shows its REAL brand
   color (no gradients). The Tabler-Icons brand glyphs are the
   single visual touchpoint where channel identity is preserved
   — surrounding badges/buttons stay on the Gleap palette.
   ============================================================ */

i.ti-brand-whatsapp,
.ti.ti-brand-whatsapp,
i.ti-brand-whatsapp-filled,
.ti.ti-brand-whatsapp-filled {
    color: var(--brand-whatsapp) !important;
}

i.ti-brand-instagram,
.ti.ti-brand-instagram,
i.ti-brand-instagram-filled,
.ti.ti-brand-instagram-filled {
    color: var(--brand-instagram) !important;
}

i.ti-brand-facebook,
.ti.ti-brand-facebook,
i.ti-brand-facebook-filled,
.ti.ti-brand-facebook-filled {
    color: var(--brand-facebook) !important;
}

i.ti-brand-messenger,
.ti.ti-brand-messenger {
    color: var(--brand-messenger) !important;
}

i.ti-brand-telegram,
.ti.ti-brand-telegram {
    color: var(--brand-telegram) !important;
}

i.ti-brand-linkedin,
.ti.ti-brand-linkedin {
    color: var(--brand-linkedin) !important;
}

i.ti-brand-tiktok,
.ti.ti-brand-tiktok {
    color: var(--brand-tiktok) !important;
}

i.ti-brand-twitter,
.ti.ti-brand-twitter,
i.ti-brand-x,
.ti.ti-brand-x {
    color: var(--brand-twitter) !important;
}

i.ti-brand-youtube,
.ti.ti-brand-youtube {
    color: var(--brand-youtube) !important;
}

/* When the icon sits on a colored background that already carries
   the brand identity (e.g. .stat-icon.whatsapp { background: ...; }
   with a white icon inside), keep the icon white — that pattern
   will be opted-out per page where it actually exists. */