/**
 * Support Chat Widget — WhatsApp 2026 Dark Mode Design
 * Colors and structure taken from actual WhatsApp 2026 reference
 */

/* ============================================
   CSS VARIABLES — WhatsApp 2026 Dark Palette
   ============================================ */

.support-chat-widget {
    --wa-bg: #0b1014;
    --wa-header-bg: #171717;
    --wa-header-text: #FFFFFF;
    --wa-outgoing: #005C4B;
    --wa-incoming: #1F2C34;
    --wa-text: #E9EDEF;
    --wa-text-secondary: #8696A0;
    --wa-timestamp: rgba(255, 255, 255, 0.6);
    --wa-timestamp-outgoing: rgba(255, 255, 255, 0.55);
    --wa-input-bar-bg: #171717;
    --wa-input-field-bg: #2c2c2c;
    --wa-placeholder: #8696A0;
    --wa-read-receipt: #53BDEB;
    --wa-bubble-radius: 10px;
    --wa-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

/* ============================================
   CHAT WIDGET CONTAINER
   ============================================ */

.support-chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 400px;
    height: 640px;
    max-height: calc(100vh - 48px);
    background: var(--wa-bg);
    border-radius: 16px;
    box-shadow:
        0 12px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    font-family: var(--wa-font);
}

.support-chat-widget-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ============================================
   HEADER — WhatsApp 2026 Dark
   ============================================ */

.support-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 8px;
    background: var(--wa-header-bg);
    color: var(--wa-header-text);
    flex-shrink: 0;
    height: 56px;
}

.support-chat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.support-chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.support-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.support-chat-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.support-chat-title {
    font-family: var(--wa-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--wa-header-text);
}

.support-chat-status {
    font-size: 13px;
    color: var(--wa-text-secondary);
    display: flex;
    align-items: center;
    line-height: 1.3;
}

.support-chat-close {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #d1d7db;
    transition: background 0.15s ease, color 0.15s ease;
}

.support-chat-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* ============================================
   MESSAGES AREA — Dark with Doodle Pattern
   ============================================ */

.support-chat-messages-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: var(--wa-bg);
}

.support-chat-messages-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/static/whatsapp-bg-dark.png');
    background-repeat: repeat;
    background-size: 330px auto;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.support-chat-messages {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.support-chat-messages::before {
    content: '';
    flex: 1 1 auto;
}

.support-chat-welcome {
    background: #d9fdd3;
    border-radius: 12px;
    padding: 14px 18px;
    text-align: center;
    color: #111b21;
    font-family: var(--wa-font);
    font-size: 13.5px;
    line-height: 1.55;
    align-self: center;
    max-width: 90%;
    margin: 8px 12px;
    position: relative;
    z-index: 1;
}

[dir="rtl"] .support-chat-welcome,
.support-chat-welcome[dir="rtl"],
.support-chat-welcome:lang(he) {
    font-family: 'Noto Serif Hebrew', var(--wa-font);
    font-size: 14.5px;
}

.support-chat-welcome p {
    margin: 0;
}

.support-chat-welcome em {
    font-style: italic;
    color: #1f2c34;
    opacity: 0.92;
}

/* ============================================
   MESSAGE BUBBLES — WhatsApp 2026 Style
   ============================================ */

.support-chat-message {
    display: flex;
    max-width: 85%;
    padding: 3px 12px;
    animation: messageSlideIn 0.15s ease;
    position: relative;
    z-index: 1;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.support-chat-message-user {
    align-self: flex-end;
}

.support-chat-message-assistant {
    align-self: flex-start;
}

.support-chat-message-content {
    padding: 6px 7px 5px 9px;
    font-size: 14.2px;
    line-height: 19px;
    word-wrap: break-word;
    word-break: break-word;
    position: relative;
    color: var(--wa-text);
    border-radius: var(--wa-bubble-radius);
    min-width: 70px;
}

/* Outgoing (user) bubble — dark green */
.support-chat-message-user .support-chat-message-content {
    background: var(--wa-outgoing);
}

/* Incoming (assistant) bubble — dark gray */
.support-chat-message-assistant .support-chat-message-content {
    background: var(--wa-incoming);
}

/* SVG tail element (injected by JS as child of .support-chat-message-content) */
.support-chat-tail {
    position: absolute;
    bottom: 0;
    z-index: 10;
    display: block;
}

.support-chat-message-user .support-chat-tail {
    right: -6px;
}

.support-chat-message-assistant .support-chat-tail {
    left: -6px;
    transform: scaleX(-1);
}

/* Photo-only bubble: photo fills the bubble, timestamp overlays the photo's
   bottom-right with a translucent pill, the tail-side corner is squared.
   The `has-media-only` class is set in JS (createMessageElement) when there
   are attachments but no text — avoids any reliance on :has(). */
.support-chat-message-content.has-media-only {
    padding: 3px;
}
.support-chat-message-content.has-media-only .support-chat-msg-photos {
    margin-bottom: 0;
}
.support-chat-message-content.has-media-only .support-chat-message-meta {
    position: absolute;
    right: 8px;
    bottom: 7px;
    margin-top: 0;
    padding: 1px 6px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.4);
}
.support-chat-message-content.has-media-only .support-chat-message-time,
.support-chat-message-user .support-chat-message-content.has-media-only .support-chat-message-time {
    color: rgba(255, 255, 255, 0.95);
}
.support-chat-message-user .support-chat-message-content.has-media-only {
    border-bottom-right-radius: 0;
}
.support-chat-message-assistant .support-chat-message-content.has-media-only {
    border-bottom-left-radius: 0;
}
.support-chat-message-content.has-media-only .support-chat-tail {
    bottom: -3px;
}

/* Message text wrapper */
.support-chat-message-text {
    display: block;
}

/* Timestamp row — flows at bottom-right of bubble content */
.support-chat-message-meta {
    display: flex;
    justify-content: flex-end;
    direction: ltr;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    white-space: nowrap;
}

.support-chat-message-time {
    font-size: 11px;
    color: var(--wa-timestamp);
    line-height: 1;
}

.support-chat-message-user .support-chat-message-time {
    color: var(--wa-timestamp-outgoing);
}

/* Double check mark for user messages */
.support-chat-message-check {
    display: inline-flex;
    align-items: center;
}

.support-chat-message-check svg {
    width: 16px;
    height: 11px;
}

/* Lists inside bubbles */
.support-chat-message-content ul {
    margin: 4px 0 2px;
    padding-inline-start: 18px;
    list-style: none;
}

.support-chat-message-content ul li {
    position: relative;
    padding-inline-start: 6px;
    margin-bottom: 2px;
}

.support-chat-message-content ul li::before {
    content: '\2022';
    position: absolute;
    inset-inline-start: -14px;
    color: var(--wa-text);
    font-weight: 700;
}

.support-chat-message-content,
.support-chat-message-text,
.support-chat-message-text * {
    color: var(--wa-text);
}

.support-chat-message-content strong {
    font-weight: 600;
}

.support-chat-message-content a {
    color: #53BDEB;
    text-decoration: none;
}

.support-chat-message-content a:hover {
    text-decoration: underline;
}

/* ============================================
   TYPING INDICATOR
   ============================================ */

.support-chat-typing {
    z-index: 1;
}

.support-chat-typing .support-chat-message-content {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 13px 10px;
    min-width: unset;
    background: var(--wa-incoming);
}

.support-chat-typing-dot {
    width: 6px;
    height: 6px;
    background: var(--wa-text-secondary);
    border-radius: 50%;
    animation: typingBounce 1.2s infinite ease-in-out;
}

.support-chat-typing-dot:nth-child(3) {
    animation-delay: 0.2s;
}

.support-chat-typing-dot:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* ============================================
   ACTION INDICATOR — WhatsApp System Message
   ============================================ */

.support-chat-action-indicator {
    text-align: center;
    padding: 5px 12px;
    margin: 4px auto;
    font-size: 12px;
    color: var(--wa-text-secondary);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    display: inline-block;
    width: auto;
    align-self: center;
    position: relative;
    z-index: 1;
}

/* ============================================
   SUBSCRIPTION RECOMMENDATION CARD — in-chat
   Minimal "see pricing" card. No prices, no
   checkout in-chat — the pricing page is the
   single source of truth (linked via ?plan=<key>).
   ============================================ */

.sc-widget {
    align-self: stretch;
    max-width: 100%;
    width: 100%;
    padding: 8px 4px 4px;
    animation: scWidgetAppear 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    position: relative;
    z-index: 1;
}

@keyframes scWidgetAppear {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sc-widget-inner {
    background: #ffffff;
    border-radius: 22px;
    padding: 22px 22px 20px;
    position: relative;
    min-width: 0;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 14px 36px -10px rgba(15, 23, 42, 0.20);
}

/* Drop the WhatsApp tail — the card is a product card, not a chat bubble. */
.sc-widget-inner > .support-chat-tail {
    display: none;
}

.sc-eyebrow {
    font-family: var(--wa-font);
    font-size: 11px;
    font-weight: 600;
    color: #71717A;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.sc-plan-name {
    font-family: var(--wa-font);
    font-size: 26px;
    font-weight: 700;
    color: #09090B;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 8px;
}

.sc-plan-desc {
    font-family: var(--wa-font);
    font-size: 14px;
    font-weight: 400;
    color: #52525B;
    line-height: 1.45;
    margin: 0 0 18px;
}

.sc-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px;
    background: #C04A2D;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-family: var(--wa-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: -0.005em;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.sc-cta-btn:hover {
    background: #A53E26;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(192, 74, 45, 0.28);
}

.sc-cta-btn:active { transform: translateY(0); }

.sc-cta-arrow {
    transition: transform 0.15s ease;
}

.sc-cta-btn:hover .sc-cta-arrow {
    transform: translateX(2px);
}

/* ── RTL — flip the chevron so it points "forward" in Hebrew/Arabic ── */
[dir="rtl"] .sc-widget {
    align-self: stretch;
}

[dir="rtl"] .sc-cta-arrow {
    transform: scaleX(-1);
}

[dir="rtl"] .sc-cta-btn:hover .sc-cta-arrow {
    transform: scaleX(-1) translateX(2px);
}

/* ============================================
   INPUT AREA — WhatsApp 2026 Dark Input Bar
   ============================================ */

.support-chat-input-container {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 4px 9px 4px 5px;
    background: var(--wa-input-bar-bg);
    flex-shrink: 0;
    min-height: 50px;
}

.support-chat-input {
    flex: 1;
    border: none;
    border-radius: 18px;
    padding: 6px 12px;
    font-size: 15px;
    font-family: var(--wa-font);
    resize: none;
    outline: none;
    min-height: 34px;
    max-height: 120px;
    line-height: 1.35;
    background: var(--wa-input-field-bg);
    color: var(--wa-text);
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
}

@supports (-webkit-touch-callout: none) {
    .support-chat-input {
        font-size: max(16px, 1rem);
    }
}

.support-chat-input:focus {
    outline: none;
}

.support-chat-input::placeholder {
    color: var(--wa-placeholder);
}

.support-chat-send {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #00A884;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}

.support-chat-send:hover:not(:disabled) {
    background: #06CF9C;
}

.support-chat-send:active:not(:disabled) {
    transform: scale(0.95);
}

.support-chat-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.support-chat-send svg {
    width: 20px;
    height: 20px;
}

/* ============================================
   MOBILE STYLES — FULL SCREEN
   ============================================ */

@media (max-width: 768px) {
    /* Full-screen takeover applies only to the FLOATING widget. The docked
       /app chat lives inside its own panel and must not hide the page. */
    body:has(.support-chat-widget-open:not(.support-chat-docked)) > *:not(.support-chat-widget) {
        display: none;
    }

    .support-chat-widget:not(.support-chat-docked) {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        transform: translateY(100%);
    }

    .support-chat-widget-open:not(.support-chat-docked) {
        transform: translateY(0);
    }

    .support-chat-header {
        padding-top: max(10px, env(safe-area-inset-top));
    }

    .support-chat-input-container {
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }

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

/* ============================================
   SCROLLBAR — Hidden
   ============================================ */

.support-chat-messages::-webkit-scrollbar {
    display: none;
}

/* ============================================
   RTL SUPPORT
   ============================================ */

.support-chat-message-content {
    text-align: start;
    unicode-bidi: plaintext;
}

[dir="rtl"] .support-chat-message-user {
    align-self: flex-start;
}

[dir="rtl"] .support-chat-message-assistant {
    align-self: flex-end;
}


[dir="rtl"] .support-chat-input-container {
    flex-direction: row-reverse;
}

[dir="rtl"] .support-chat-header-info {
    flex-direction: row-reverse;
}


/* ============================================
   LIVE ACTIVITY — Dynamic Island Generation Status
   Floating-mode: mobile only (created by JS on ≤768px).
   Docked-mode (/app variant=chat): always shown, even on desktop —
   the chat panel is the primary surface.
   Floats above the messages area.
   ============================================ */

.sc-live-activity {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    z-index: 2;
    background: #000;
    border-radius: 24px;
    overflow: hidden;
    opacity: 0;
    transform: scaleX(0.5) scaleY(0.7);
    transform-origin: top center;
    transition:
        opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.5),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.06);
    -webkit-tap-highlight-color: transparent;
}

.sc-live-activity.sc-la-show {
    opacity: 1;
    transform: scale(1);
}

.sc-live-activity.sc-la-exit {
    opacity: 0;
    transform: scaleX(0.6) scaleY(0.8);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.sc-live-activity.sc-la-done {
    cursor: pointer;
}

/* Content row: icon | phase text | progress ring */
.sc-la-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 4px 14px;
}

.sc-la-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.65);
}

.sc-la-icon svg.pa {
    height: 18px;
    width: auto;
}

.sc-la-info {
    flex: 1;
    min-width: 0;
}

.sc-la-phase {
    font-family: var(--wa-font);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.15s ease;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* Circular progress ring */
.sc-la-ring {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.sc-la-ring svg {
    width: 32px;
    height: 32px;
    transform: rotate(-90deg);
}

.sc-la-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 3;
}

.sc-la-ring-value {
    fill: none;
    stroke: #C04A2D;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 97.389;
    stroke-dashoffset: 97.389;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sc-la-done .sc-la-ring-value {
    stroke: #34C759;
    transition:
        stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        stroke 0.3s ease;
}

.sc-la-pct {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--wa-font);
    font-size: 8.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Thin progress bar along bottom edge */
.sc-la-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.04);
    margin: 4px 3px 3px;
    border-radius: 2px;
    overflow: hidden;
    direction: ltr;
}

.sc-la-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #C04A2D, #E8845A);
    width: 0%;
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 6px rgba(192, 74, 45, 0.35);
}

.sc-la-done .sc-la-bar-fill {
    background: linear-gradient(90deg, #30D158, #34C759);
    box-shadow: 0 0 6px rgba(52, 199, 89, 0.35);
}

/* Padding on messages to avoid overlap with live activity */
.support-chat-messages {
    transition: padding-top 0.35s ease;
}

.support-chat-messages.sc-la-padded {
    padding-top: 72px;
}

/* ============================================
   ANIMATIONS / ACCESSIBILITY
   ============================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .support-chat-widget,
    .support-chat-message,
    .support-chat-typing-dot {
        animation: none;
        transition: none;
    }
}

/* ============================================
   COMPOSER — chips + attachments + photo upload
   (part of the chat widget; used in both floating and docked modes)
   ============================================ */
.support-chat-composer {
    flex-shrink: 0;
    background: var(--wa-input-bar-bg, #171717);
}

.support-chat-chips {
    display: flex;
    flex-wrap: wrap;     /* 4th chip drops to a new line when it doesn't fit */
    gap: 8px;
    padding: 10px 10px 2px;
}
.support-chat-chips.support-chat-chips-hidden { display: none; }

.support-chat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 13px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: var(--wa-text, #E9EDEF);
    font-family: var(--wa-font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
}
.support-chat-chip:hover {
    background: rgba(255, 255, 255, 0.12);
}
.support-chat-chip:active {
    transform: scale(0.96);
}
.support-chat-chip svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* "Remove a photo" chip: photo + red delete badge — keep both at full
   opacity so the red badge actually reads as red, and let the icon be a
   touch wider than the others (it's two glyphs composed). */
.support-chat-chip-remove-photo .support-chat-chip-remove-photo-icon {
    opacity: 1;
}

/* Disabled while a generation is running — chip still receives clicks so we
   can show an inline error, but it reads as inert. */
.support-chat-chip.support-chat-chip-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto;
}
.support-chat-chip.support-chat-chip-disabled:hover {
    background: rgba(255, 255, 255, 0.06);
}
.support-chat-chip.support-chat-chip-disabled:active {
    transform: none;
}

/* Inline "already generating" error shown when a disabled chip is clicked. */
.support-chat-chip-error {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0 12px;
    color: rgba(255, 180, 180, 0.95);
    font-family: var(--wa-font);
    font-size: 12px;
    transition: max-height 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
    padding: 0 10px;
}
.support-chat-chip-error.support-chat-chip-error-show {
    max-height: 48px;
    opacity: 1;
    padding: 6px 10px;
}

/* Attachment tray (staged photos before sending) */
.support-chat-attachments {
    display: none;
    gap: 8px;
    padding: 8px 10px 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.support-chat-attachments::-webkit-scrollbar { display: none; }
.support-chat-attachments.has-items {
    display: flex;
}

.support-chat-attachment {
    position: relative;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}
.support-chat-attachment img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.support-chat-attachment.uploading img {
    opacity: 0.4;
}
.support-chat-attachment.error {
    outline: 2px solid #e5484d;
}
.support-chat-attachment-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: scAttSpin 0.7s linear infinite;
}
@keyframes scAttSpin { to { transform: rotate(360deg); } }

.support-chat-attachment-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Attach (paperclip) button */
.support-chat-attach {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--wa-placeholder, #8696A0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.support-chat-attach:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--wa-text, #E9EDEF);
}

/* Photos rendered inside a sent message bubble */
.support-chat-msg-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 4px;
    margin-bottom: 6px;
    max-width: 240px;
}
.support-chat-msg-photos img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.support-chat-msg-photos video {
    grid-column: 1 / -1;
    width: 100%;
    max-height: 360px;
    border-radius: 8px;
    display: block;
    background: #000;
}
.support-chat-message-user .support-chat-msg-photos {
    margin-left: auto;
}

[dir="rtl"] .support-chat-message-user .support-chat-msg-photos {
    margin-left: 0;
    margin-right: auto;
}

/* ============================================
   DOCKED PANEL — the /app chat dock
   --------------------------------------------
   The widget runs "docked" inside an .app-chat-panel on /app. Styling lives
   here (with the widget) so both /app variants share it:
   - chat variant: a permanent docked panel.
   - classic variant on mobile: a CLOSABLE bottom sheet — opened from the
     floating button, fully minimized back to that button (.app-chat-closable).
   On desktop the classic variant uses the floating widget instead, so these
   panel rules only take effect there for the chat variant.
   ============================================ */

/* Neutralise the floating-widget styles when docked. */
.support-chat-widget.support-chat-docked {
    position: static;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

/* Desktop docked: no close button (the panel is permanent). */
@media (min-width: 769px) {
    .support-chat-docked .support-chat-close { display: none; }
}

/* Locked open: with no posts yet, the chat is the only surface — hide the
   close (X) and neutralise the tap-out backdrop so the user can't minimize
   into nothing. (chat variant only; the closable classic dock never locks.) */
.app-chat-panel.app-chat-locked .support-chat-close {
    display: none;
}
.app-chat-panel.app-chat-locked ~ .app-chat-backdrop {
    display: none !important;
    pointer-events: none !important;
}

/* Collapsed mobile dock: trim the chrome down to a peek + composer. The
   quick-action chips stay visible so the user can fire "Create a video" /
   "Create images" from the peek bar — the click handler expands the dock
   before submitting. */
.app-chat-collapsed .support-chat-docked .support-chat-header {
    display: none;
}
.app-chat-collapsed .support-chat-docked .support-chat-messages-area {
    cursor: pointer;
}
.app-chat-collapsed .support-chat-docked .support-chat-messages {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
            mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
    /* Collapsed peek bar: lock scrolling so the messages can't be dragged
       around — a tap just expands the dock (handled on .messages-area). */
    overflow-y: hidden;
    touch-action: none;
}

@media (max-width: 768px) {
    /* Bottom dock — collapses to a peek bar, expands to a near-full sheet. */
    .app-chat-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        transition: height 0.34s cubic-bezier(0.32, 0.72, 0, 1),
                    transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* Expanded: a sheet that covers most of the screen but leaves a strip at
       the top, so it reads as dismissable and the page shows behind it. */
    .app-chat-panel:not(.app-chat-collapsed):not(.app-chat-half) {
        height: calc(100dvh - 72px);
        border-radius: 22px 22px 0 0;
        overflow: hidden;
        box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.22);
    }

    /* Half-height: the chat shares the screen with the posts grid above it,
       so the user can read Clara's message and see their content at once.
       Full chat chrome stays visible (it is just a shorter sheet). */
    .app-chat-panel.app-chat-half {
        height: 54dvh;
        border-radius: 22px 22px 0 0;
        overflow: hidden;
        box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.18);
    }

    .app-chat-panel.app-chat-collapsed {
        height: 150px;
        border-radius: 22px 22px 0 0;
        overflow: hidden;
        box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.18);
    }

    /* Classic variant: the dock is closable. Fully minimized it slides out of
       view and the floating button takes over; opening slides it back in.
       (The chat variant omits .app-chat-closable and stays permanently docked.) */
    .app-chat-panel.app-chat-closable {
        transform: translateY(100%);
        pointer-events: none;
    }
    .app-chat-panel.app-chat-closable.app-chat-open {
        transform: translateY(0);
        pointer-events: auto;
    }

    /* app_gradient.css pins every `body > *` at z-index:1, which would trap
       the backdrop below the fixed page header. While the chat-variant sheet
       is fully expanded, lift the shell so the backdrop can dim + catch taps. */
    .app-shell:has(.app-chat-panel:not(.app-chat-collapsed):not(.app-chat-half)) {
        z-index: 1300;
    }

    /* Tap-out backdrop. For a fully expanded sheet it dims the page and
       catches taps. At half-height it stays transparent (the posts grid
       peeks through) but still catches taps — clicking above the chat
       minimizes it; tapping the chat itself expands it to the full sheet. */
    .app-chat-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1190;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .app-chat-panel:not(.app-chat-closable):not(.app-chat-collapsed):not(.app-chat-half) ~ .app-chat-backdrop,
    .app-chat-panel.app-chat-closable.app-chat-open:not(.app-chat-half) ~ .app-chat-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    .app-chat-panel.app-chat-half:not(.app-chat-closable) ~ .app-chat-backdrop,
    .app-chat-panel.app-chat-half.app-chat-closable.app-chat-open ~ .app-chat-backdrop {
        opacity: 0;
        pointer-events: auto;
    }
}

@media (min-width: 769px) {
    .app-chat-backdrop { display: none; }
}