/* DMES Chat Lead Assistant widget — independent stylesheet (not merged
   into style.css per task instructions). RTL, mobile-first, DMES
   purple/orange identity. Deliberately anchored to the physical RIGHT
   edge (`right`, not `inset-inline-end`) so it never lands on the same
   side as the WhatsApp floating widget (public/style.css .dmes-wa-widget,
   fixed `left: 20px`) — this site is dir="rtl", where inset-inline-end
   actually resolves to the physical left, which is what put both
   widgets in the same corner in an earlier version of this file. The
   two widgets are meant to be able to coexist (chat right, WhatsApp
   left, see footer.blade.php), so both sides are now pinned in
   physical terms rather than logical/direction-relative ones. */

.dmes-chat {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    font-family: inherit;
    direction: rtl;
}

.dmes-chat__launcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #6b21a8, #f97316);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(107, 33, 168, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dmes-chat__launcher:hover,
.dmes-chat__launcher:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(107, 33, 168, 0.45);
}

.dmes-chat__launcher:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

.dmes-chat--open .dmes-chat__launcher {
    display: none;
}

.dmes-chat__panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: min(360px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 96px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

/* This class's own `display: flex` above otherwise beats the browser's
   native `[hidden] { display: none }` UA-stylesheet rule (an author
   class selector always wins over the UA stylesheet at equal
   specificity), so the panel — and everything in it, including the
   options/composer children whose own [hidden] rules further down this
   file only fixed the same problem for themselves — stayed visually
   `display: flex` and full-size at all times, `hidden` attribute or
   not. In practice this meant the collapsed panel sat on top of the
   launcher button and silently absorbed its clicks (confirmed via
   elementFromPoint() during live debugging), so the widget appeared to
   open with a permanently blank body: openPanel() removing `hidden`
   changed nothing visually, and the launcher click that was supposed to
   trigger it never actually reached the button. */
.dmes-chat__panel[hidden] {
    display: none;
}

.dmes-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, #6b21a8, #f97316);
    color: #fff;
    flex: 0 0 auto;
}

.dmes-chat__brand {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.dmes-chat__brand-name {
    font-weight: 700;
    font-size: 15px;
}

.dmes-chat__brand-sub {
    font-size: 12px;
    opacity: 0.9;
}

.dmes-chat__close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.dmes-chat__close:focus-visible,
.dmes-chat__option:focus-visible,
.dmes-chat__send:focus-visible,
.dmes-chat__input:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

.dmes-chat__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f9fafb;
    min-height: 160px;
}

.dmes-chat__msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.dmes-chat__msg--assistant {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #111827;
    border-start-start-radius: 4px;
}

.dmes-chat__msg--visitor {
    align-self: flex-end;
    background: #6b21a8;
    color: #fff;
    border-end-end-radius: 4px;
}

.dmes-chat__msg--system {
    align-self: center;
    background: transparent;
    color: #b91c1c;
    font-size: 12px;
}

.dmes-chat__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid #f1f1f1;
    flex: 0 0 auto;
}

.dmes-chat__options[hidden] {
    display: none;
}

.dmes-chat__option {
    border: 1px solid #6b21a8;
    color: #6b21a8;
    background: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dmes-chat__option:hover {
    background: #6b21a8;
    color: #fff;
}

.dmes-chat__composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #f1f1f1;
    flex: 0 0 auto;
}

.dmes-chat__composer[hidden] {
    display: none;
}

.dmes-chat__input {
    flex: 1 1 auto;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 14px;
    min-width: 0;
}

.dmes-chat__send {
    flex: 0 0 auto;
    background: #f97316;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 16px;
    cursor: pointer;
}

.dmes-chat__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 480px) {
    .dmes-chat {
        right: 12px;
        bottom: 12px;
    }

    .dmes-chat__panel {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
    }

    .dmes-chat__launcher-text {
        display: none;
    }

    .dmes-chat__launcher {
        padding: 14px;
        border-radius: 50%;
    }

    .dmes-chat__launcher::after {
        content: "\1F4AC";
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dmes-chat__launcher {
        transition: none;
    }
}