/* Fusion Live Chat presentation only. Keep its own state, menu and layout logic. */
#flc-root {
    --fnb-chat-ink: #171717;
    --fnb-chat-muted: #646461;
    --fnb-chat-rule: #dcdcd8;
    --fnb-chat-surface: #f4f4f3;
    font-family: Barlow, Arial, sans-serif;
    color: var(--fnb-chat-ink);
}
#flc-root :is(button, input, textarea, select) { font-family: inherit; }
#flc-root #flc-launch {
    background: #111;
    color: #fff;
    border-color: #111;
    box-shadow: 0 6px 22px #0002;
}
#flc-root #flc-launch b { font-weight: 600; letter-spacing: 0; }
#flc-root .flc-icon { border-color: #777; background: #111; }
#flc-root #flc-panel {
    background: #fff;
    color: var(--fnb-chat-ink);
    border: 1px solid var(--fnb-chat-rule);
    border-radius: 0;
    box-shadow: 0 14px 42px #0003;
}
#flc-root #flc-panel header {
    background: #111;
    border-bottom: 1px solid #111;
    color: #fff;
}
#flc-root #flc-panel header b { color: #fff; font-weight: 600; letter-spacing: -.01em; }
#flc-root #flc-panel header small { color: #dededb; }
#flc-root #flc-panel #flc-close { color: #fff; background: transparent; border-radius: 0; }
#flc-root #flc-panel #flc-close:hover { background: #ffffff14; }
#flc-root #flc-panel .flc-product-context {
    background: var(--fnb-chat-surface);
    border-bottom-color: var(--fnb-chat-rule);
}
#flc-root #flc-panel .flc-product-context img { border-radius: 0; background: #fff; }
#flc-root #flc-panel .flc-product-context small { color: var(--fnb-chat-muted); }
#flc-root #flc-panel .flc-product-context strong { color: var(--fnb-chat-ink); }
#flc-root #flc-panel .flc-welcome,
#flc-root #flc-panel .flc-proactive-welcome,
#flc-root #flc-panel .flc-msg.operator {
    background: var(--fnb-chat-surface);
    color: var(--fnb-chat-ink);
    border-radius: 4px;
}
#flc-root #flc-panel .flc-msg { border-radius: 4px; }
#flc-root #flc-panel .flc-msg.customer { background: #202020; color: #fff; }
#flc-root #flc-panel .flc-msg small { font-weight: 600; }
#flc-root #flc-panel .flc-message-link { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#flc-root #flc-panel .flc-quick-replies button {
    background: #fff;
    color: var(--fnb-chat-ink);
    border-color: #c9c9c5;
    border-radius: 2px;
    font-weight: 500;
}
#flc-root #flc-panel .flc-quick-replies button:hover { background: var(--fnb-chat-surface); border-color: #777; }
#flc-root #flc-panel .flc-contact-details summary,
#flc-root #flc-panel .flc-contact-required p { color: var(--fnb-chat-muted); }
#flc-root #flc-panel .flc-contact-required label { color: var(--fnb-chat-ink); }
#flc-root #flc-panel .flc-fields input,
#flc-root #flc-panel .flc-compose textarea {
    background: #fff;
    color: var(--fnb-chat-ink);
    border-color: #c9c9c5;
    border-radius: 2px;
    box-shadow: none;
}
#flc-root #flc-panel .flc-fields input::placeholder,
#flc-root #flc-panel .flc-compose textarea::placeholder { color: #6f6f6b; opacity: 1; }
#flc-root #flc-panel .flc-fields input[aria-invalid="true"] { border-color: #b42318; }
#flc-root #flc-panel .flc-compose button { background: #111; color: #fff; border-radius: 2px; font-weight: 600; }
#flc-root #flc-panel .flc-compose button:hover:not(:disabled) { background: #333; }
#flc-root #flc-panel #flc-status { color: var(--fnb-chat-muted); }
/* WhatsApp and real availability retain their meaningful green accents. */
#flc-root #flc-panel .flc-whatsapp { border-radius: 2px; border-color: #159447; color: #087d36; background: #fff; }
#flc-root #flc-panel .flc-whatsapp:hover { background: #f3faf5; }
#flc-root.flc-whatsapp-only #flc-launch { background: #09873c; border-color: #09873c; }
#flc-root :is(button, a, summary, input, textarea, select):focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
}
#flc-root #flc-launch:focus-visible,
#flc-root #flc-panel header button:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px #111; }
/* Existing help dialogs inherit the same palette without changing visibility. */
#flc-root :is(.flc-retention-card, .flc-payment-recovery-card, .flc-gift-card) {
    background: #fff;
    color: var(--fnb-chat-ink);
    border-color: var(--fnb-chat-rule);
    border-radius: 4px;
    box-shadow: 0 14px 42px #0003;
}
#flc-root #flc-gift-popup .flc-gift-card { border-top-color: #111; }
#flc-root :is(.flc-retention-icon, .flc-payment-recovery-icon) { background: var(--fnb-chat-surface); color: var(--fnb-chat-ink); border-color: var(--fnb-chat-rule); }
#flc-root #flc-gift-popup .flc-gift-eyebrow { color: var(--fnb-chat-muted); }
#flc-root :is(.flc-gift-description, .flc-gift-note, .flc-payment-recovery-note) { color: var(--fnb-chat-muted); }
#flc-root :is(.flc-retention-actions, .flc-payment-recovery-actions) button,
#flc-root #flc-gift-submit,
#flc-root #flc-lead-submit { border-radius: 2px; background: #111; color: #fff; border-color: #111; }
#flc-root #flc-retention-continue,
#flc-root #flc-retention-continue-offline,
#flc-root #flc-payment-retry,
#flc-root #flc-gift-later { background: #fff; color: var(--fnb-chat-ink); border-color: var(--fnb-chat-rule); }
#flc-root #flc-gift-popup .flc-gift-fields input,
#flc-root .flc-retention-offline-form :is(input, textarea, select) {
    background: #fff;
    color: var(--fnb-chat-ink);
    border-color: #c9c9c5;
    border-radius: 2px;
    font-family: inherit;
}
#flc-root #flc-gift-popup .flc-gift-fields input:focus {
    border-color: #777;
    outline-color: #777;
}