/* ================================================================
   wwwroot/css/melikhaya.css  —  Melikhaya SA Property Assistant
   FULL REBUILD: titlebar, scroll controls, mic button, chips arrows,
   like button, yes/no inline buttons, minimised pill, a11y-safe.
================================================================ */

/* ─── PREMIUM LIQUID GLASS VARIABLES ─── */
/* Import editorial fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,600;0,6..96,700;1,6..96,300;1,6..96,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

:root {
    /* ── Brand palette from the robot ── */
    --mel-orange: #F58220;
    --mel-orange-vivid: #FF8C2A;
    --mel-orange-dark: #C96A0E;
    --mel-orange-glow: rgba(245,130,32,0.45);
    --mel-orange-bg: rgba(245,130,32,0.09);
    --mel-orange-glass: rgba(245,130,32,0.12);
    --mel-blue: #56C4F8;
    --mel-blue-dark: #2aa8e0;
    --mel-blue-glow: rgba(86,196,248,0.35);
    --mel-blue-glass: rgba(86,196,248,0.10);
    --mel-brand-black: #1A1D20;
    /* ── Dark glass surface tokens ── */
    --mel-surface-void: #09090B;
    --mel-surface-base: #0F1114;
    --mel-surface-raised: #161A1E;
    --mel-surface-float: #1C2126;
    --mel-surface-overlay: rgba(22,26,30,0.92);
    --mel-glass-light: rgba(255,255,255,0.06);
    --mel-glass-border: rgba(255,255,255,0.09);
    --mel-glass-border-strong: rgba(255,255,255,0.14);
    --mel-glass-shine: rgba(255,255,255,0.03);
    /* ── Text hierarchy ── */
    --mel-text-primary: #F2F0EC;
    --mel-text-secondary: rgba(242,240,236,0.65);
    --mel-text-tertiary: rgba(242,240,236,0.38);
    --mel-text-accent: #F58220;
    /* ── Semantic ── */
    --mel-green: #34D986;
    --mel-red: #FF5A5A;
    --mel-white: #FFFFFF;
    --mel-black: #09090B;
    /* ── Legacy greys (keep for JS compat) ── */
    --mel-grey-50: #161A1E;
    --mel-grey-100: #1C2126;
    --mel-grey-200: rgba(255,255,255,0.10);
    --mel-grey-300: rgba(255,255,255,0.16);
    --mel-grey-400: rgba(255,255,255,0.36);
    --mel-grey-600: rgba(255,255,255,0.55);
    --mel-grey-800: rgba(255,255,255,0.82);
    /* ── Typography ── */
    --mel-font: 'DM Sans', system-ui, sans-serif;
    --mel-font-display: 'Cormorant Garamond', 'Bodoni Moda', Georgia, serif;
    --mel-font-headline: 'Bodoni Moda', 'Cormorant Garamond', Georgia, serif;
    /* ── Liquid glass effects ── */
    --mel-blur-glass: blur(28px) saturate(180%) brightness(1.08);
    --mel-blur-heavy: blur(48px) saturate(200%);
    /* ── Shadows ── */
    --mel-shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
    --mel-shadow-md: 0 4px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.4);
    --mel-shadow-lg: 0 24px 80px rgba(0,0,0,0.7), 0 8px 32px rgba(0,0,0,0.5);
    --mel-shadow-orange: 0 0 40px rgba(245,130,32,0.22), 0 0 80px rgba(245,130,32,0.10);
    --mel-shadow-blue: 0 0 30px rgba(86,196,248,0.18);
    /* ── Layout ── */
    --mel-btn-right: 20px;
    --mel-btn-bottom: 32px;
    --mel-btn-size: 46px;
    --mel-window-w: 430px;
    --mel-window-h: 680px;
    --mel-radius: 22px;
    --mel-radius-sm: 12px;
    --mel-titlebar-h: 38px;
}

/* ═══════════════════════════════════════════════════════
   TRIGGER BUTTON — flat-bottom, aligns with other page FABs
   Robot overflows UPWARD from this fixed footprint.
═══════════════════════════════════════════════════════ */
.btn.btn-floating.mel-trigger-btn,
.mel-trigger-btn {
    position: fixed !important;
    bottom: var(--mel-btn-bottom) !important;
    right: var(--mel-btn-right) !important;
    width: var(--mel-btn-size) !important;
    height: var(--mel-btn-size) !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    overflow: visible !important;
    z-index: 10000;
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
    outline: none;
    padding: 0 !important;
    /*
     * BUG FIX — cursor rattle on robot hover:
     * The robot SVG is absolutely positioned and floats above the button's
     * layout box via the mel-float-body animation. As the robot bobs up/down
     * its visual body overlaps the button edge, causing rapid mouseenter/
     * mouseleave cycles. We fix this by extending the clickable/hover hit-area
     * upward using a transparent ::before pseudo-element that covers the full
     * height of the robot above the button, so the pointer never "escapes"
     * during the float cycle.
     */
}

/*
     * RATTLE & CLICKABILITY — FINAL FIX
     * All previous approaches (::before pseudo, getBoundingClientRect on SVG,
     * getBoundingClientRect on button + offsets) have been replaced.
     *
     * The single source of truth is .mel-robot-hit-overlay — a transparent
     * child span of the button, sized to exactly cover the full robot visual
     * from antenna tip to boot sole, including the overflow below the button.
     *
     * GEOMETRY (from SVG: viewBox 0 0 90 130, rendered 50×70px):
     *   SVG inline style: position:absolute; bottom:-20px
     *   → feet bottom = 20px below button bottom  → bottom: -20px
     *   → Robot rendered height = 70px
     *   → Robot top from button bottom = 20 + 70 = 90px  → top: -90px
     *     (add 10px float headroom → top: -100px)
     *   → Robot rendered width = 50px, centred on button (46px wide)
     *     → extends 2px each side → left: -4px; right: -4px
     *     (add 6px sway pad → left: -10px; right: -10px)
     *
     * Being a true DOM child of the button:
     *   • Clicks anywhere on it fire the button's click handler natively
     *   • pointer-events: auto means it captures hover/pointer events
     *   • JS pointermove now targets this element, not the button rect
     */
.mel-robot-hit-overlay {
    position: absolute;
    top: -100px; /* head + antenna + float headroom above button top */
    bottom: -20px; /* feet overflow below button bottom                */
    left: -10px; /* robot width + sway pad                           */
    right: -10px;
    background: transparent;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
}

/* Glow on the SVG leaf — will-change:filter keeps it in its own
       compositor layer so it never affects any ancestor's bounding rect */
.mel-trigger-btn.mel-robot-hovered .mel-robot-icon > svg {
    filter: drop-shadow(0 0 14px rgba(86,196,248,0.9)) drop-shadow(0 8px 20px rgba(245,130,32,0.5));
    will-change: filter;
}

/* ::before and ::after unused */
.mel-trigger-btn::before,
.mel-trigger-btn::after {
    display: none !important;
    content: none !important;
}

.mel-trigger-btn:hover::after {
    display: none !important;
}


.mel-trigger-btn.mel-is-open {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
    /* Note: The open-state X already uses ::after in JS —
   keep the .mel-is-open override to hide it: */
    .mel-trigger-btn.mel-is-open::before,
    .mel-trigger-btn.mel-is-open::after {
        display: none;
    }

.mel-trigger-btn:focus-visible {
    outline: 3px solid var(--mel-orange) !important;
    outline-offset: 3px;
}

.mel-trigger-btn i {
    font-size: 1.3rem !important;
    color: var(--mel-white) !important;
    pointer-events: none;
    line-height: 1;
}

/* Pulse ring hidden — clean standalone robot look */
.mel-pulse-ring {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════
   IDLE FLOAT — gentle physics-based hover animation
   Robot bobs up/down with a slight sway and head tilt
   to feel alive at rest. Three layered animations give
   an organic, non-mechanical feel.
═══════════════════════════════════════════════════════ */
@keyframes mel-float-body {
    0% {
        transform: translateX(-50%) translateY(0px) rotate(0deg);
    }

    20% {
        transform: translateX(-50%) translateY(-4px) rotate(0.4deg);
    }

    45% {
        transform: translateX(-50%) translateY(-7px) rotate(-0.3deg);
    }

    70% {
        transform: translateX(-50%) translateY(-3px) rotate(0.5deg);
    }

    100% {
        transform: translateX(-50%) translateY(0px) rotate(0deg);
    }
}

@keyframes mel-float-shadow {
    0% {
        transform: translateX(-50%) scaleX(1) scaleY(1);
        opacity: 0.55;
    }

    45% {
        transform: translateX(-50%) scaleX(0.78) scaleY(0.7);
        opacity: 0.3;
    }

    100% {
        transform: translateX(-50%) scaleX(1) scaleY(1);
        opacity: 0.55;
    }
}

/* Idle float applied to robot span */
.mel-robot-icon {
    animation: mel-float-body 3.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

    /* Shadow beneath robot that shrinks as it rises */
    .mel-robot-icon::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        width: 38px;
        height: 8px;
        background: radial-gradient(ellipse, rgba(245,130,32,0.45) 0%, transparent 70%);
        border-radius: 50%;
        transform: translateX(-50%);
        animation: mel-float-shadow 3.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
        pointer-events: none;
    }

/* ── WINK ANIMATION — realistic eyelid close, no blue overlay ── */
/*
   Strategy: the left eye group scales vertically from its own
   vertical centre. The white sclera + iris all compress together
   so it looks like a real eyelid closing — no coloured bar artifact.
   animation-fill-mode: none (not forwards) so it loops properly on
   repeated hovers without the "rattle" re-fire bug.
*/
@keyframes mel-wink {
    0% {
        transform: scaleY(1);
        opacity: 1;
    }

    18% {
        transform: scaleY(0.05);
        opacity: 1;
    }

    45% {
        transform: scaleY(0.05);
        opacity: 1;
    }

    70% {
        transform: scaleY(1);
        opacity: 1;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* Always hide the old blue lid overlay — we no longer need it */
#mel-wink-lid {
    display: none !important;
    opacity: 0 !important;
}

/* Wink class applied by JS (avoids CSS-hover re-fire rattle) */
#mel-robot-eye-left.mel-winking {
    animation: mel-wink 0.72s cubic-bezier(0.4, 0, 0.2, 1);
    transform-box: fill-box;
    transform-origin: center center;
}

.mel-trigger-btn.mel-is-open .mel-pulse-ring {
    display: none;
}

@keyframes mel-pulse {
    0% {
        transform: scale(1);
        opacity: .85;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

.mel-notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    background: var(--mel-red);
    border-radius: 50%;
    border: 2px solid var(--mel-white);
    font-size: 8px;
    font-weight: 800;
    color: var(--mel-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mel-font);
    pointer-events: none;
    line-height: 1;
    animation: mel-badge 1s ease infinite alternate;
}

@keyframes mel-badge {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.18);
    }
}

/* ═══════════════════════════════════════════════════════
   SPEECH BUBBLE — floats left of robot at mouth level

   GEOMETRY (precise):
   • SVG viewBox 0 0 90 130, rendered width=50 height=70, bottom:-6px
   • Scale factor y = 70/130 = 0.538, scale x = 50/90 = 0.556
   • Mouth SVG y≈76 → rendered from top = 76×0.538 = 40.9px
   • Mouth from page bottom = btn-bottom + (-6px offset) + (70-40.9)px
     = 20 + 0 + 29.1 - 6 = 23px  →  bottom: calc(btn-bottom + 23px)
   • Robot visual half-width = 50/2 = 25px, centred on button centre
     Button right edge = btn-right, button centre = btn-right + btn-size/2 = 43px
     Robot right edge ≈ btn-right + btn-size/2 + 25 = btn-right + 48px
   • Add 6px gap → right: calc(btn-right + 54px)
   • Tail at bottom:18px on bubble aligns with mouth level
   • Touch/coarse pointer: hidden via existing media query
═══════════════════════════════════════════════════════ */
.mel-hover-label {
    position: fixed;
    bottom: calc(var(--mel-btn-bottom) + 23px);
    right: calc(var(--mel-btn-right) + 54px);
    transform: translateX(6px) scale(0.9);
    transform-origin: right bottom;
    background: rgba(15,17,20,0.92);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    color: var(--mel-text-primary);
    border: 1px solid rgba(245,130,32,0.3);
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(245,130,32,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 10px 16px 10px 14px;
    font-family: var(--mel-font);
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
    white-space: nowrap;
    min-width: 160px;
    max-width: 210px;
}

    .mel-hover-label.mel-label-show {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    /* Speech bubble tail — points RIGHT toward robot mouth */
    .mel-hover-label::before {
        content: '';
        position: absolute;
        right: -10px;
        bottom: 14px;
        top: auto;
        transform: none;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left: 10px solid rgba(245,130,32,0.3);
        z-index: 1;
    }

    .mel-hover-label::after {
        content: '';
        position: absolute;
        right: -8px;
        bottom: 15px;
        top: auto;
        transform: none;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 9px solid rgba(15,17,20,0.95);
        z-index: 2;
    }

.mel-hover-name {
    font-weight: 400;
    font-size: 0.88rem;
    color: var(--mel-orange);
    font-family: var(--mel-font-display);
    font-style: italic;
    letter-spacing: 0.01em;
}

.mel-hover-sub {
    font-size: 0.62rem;
    color: var(--mel-text-tertiary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--mel-font);
    font-weight: 400;
}

/* Safe-area adjustment for the speech bubble */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mel-hover-label {
        bottom: calc(var(--mel-btn-bottom) + 23px + env(safe-area-inset-bottom, 0px));
        right: calc(var(--mel-btn-right) + 54px + env(safe-area-inset-right, 0px));
    }
}

/* ═══════════════════════════════════════════════════════
   BACKDROP
═══════════════════════════════════════════════════════ */
.mel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040; /* just below Bootstrap offcanvas (1045) so offcanvas stays interactive */
    background: transparent;
    pointer-events: none;
    opacity: 0;
}

    .mel-backdrop.mel-backdrop-show {
        pointer-events: all;
        opacity: 1;
    }

/* ═══════════════════════════════════════════════════════
   CHAT WINDOW — Obsidian Liquid Glass
═══════════════════════════════════════════════════════ */
.mel-window {
    position: fixed;
    bottom: calc(var(--mel-btn-bottom) + var(--mel-btn-size) + 14px);
    right: var(--mel-btn-right);
    width: var(--mel-window-w);
    height: var(--mel-window-h);
    max-height: calc(100dvh - var(--mel-btn-size) - var(--mel-btn-bottom) - 20px);
    max-width: calc(100vw - 16px);
    /* Liquid glass base */
    background: linear-gradient(158deg, rgba(22,26,30,0.97) 0%, rgba(15,17,20,0.98) 40%, rgba(18,22,26,0.97) 100% );
    backdrop-filter: var(--mel-blur-glass);
    -webkit-backdrop-filter: var(--mel-blur-glass);
    border-radius: var(--mel-radius);
    /* Chromatic edge glow */
    border: 1px solid var(--mel-glass-border-strong);
    outline: 1px solid rgba(245,130,32,0.18);
    outline-offset: -1px;
    box-shadow: var(--mel-shadow-lg), var(--mel-shadow-orange), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9998;
    font-family: var(--mel-font);
    color: var(--mel-text-primary);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92) translateY(20px);
    transform-origin: bottom right;
    transition: opacity 0.3s ease, transform 0.38s cubic-bezier(0.34,1.56,0.64,1);
    /* Subtle noise texture overlay */
    isolation: isolate;
}

    .mel-window::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
        opacity: 0.025;
        pointer-events: none;
        z-index: 0;
        mix-blend-mode: overlay;
    }

    .mel-window.mel-is-open {
        opacity: 1;
        pointer-events: all;
        transform: scale(1) translateY(0);
    }

    .mel-window.mel-maximised {
        bottom: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

/* ═══════════════════════════════════════════════════════
   TITLE BAR — Dark liquid glass with editorial label
═══════════════════════════════════════════════════════ */
.mel-titlebar {
    background: rgba(10,11,13,0.80);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    height: var(--mel-titlebar-h);
    min-height: var(--mel-titlebar-h);
    display: flex;
    align-items: center;
    padding: 0 12px 0 14px;
    border-bottom: 1px solid var(--mel-glass-border);
    flex-shrink: 0;
    gap: 10px;
    cursor: default;
    user-select: none;
    position: relative;
    z-index: 1;
}

.mel-traffic-lights {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-shrink: 0;
}

.mel-tl {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.45rem;
    color: transparent;
    transition: color 0.15s ease, filter 0.15s ease, transform 0.12s ease;
    outline: none;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 3px rgba(0,0,0,0.5);
}

    .mel-tl:focus-visible {
        outline: 2px solid var(--mel-orange);
        outline-offset: 1px;
    }

    .mel-tl:hover {
        color: rgba(0,0,0,0.6);
        filter: brightness(1.1);
        transform: scale(1.08);
    }

.mel-tl-close {
    background: #FF5F57;
}

.mel-tl-min {
    background: #FEBC2E;
}

.mel-tl-max {
    background: #28C840;
}

.mel-titlebar-label {
    flex: 1;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--mel-text-tertiary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: none;
    font-family: var(--mel-font);
}

.mel-titlebar-right {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.mel-tl-icon-btn {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mel-text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    outline: none;
}

    .mel-tl-icon-btn:hover {
        background: var(--mel-glass-light);
        border-color: var(--mel-glass-border);
        color: var(--mel-orange);
    }

    .mel-tl-icon-btn:focus-visible {
        outline: 2px solid var(--mel-orange);
    }

/* ═══════════════════════════════════════════════════════
   GLASS HEADER — Editorial magazine design
═══════════════════════════════════════════════════════ */
.mel-header {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    min-height: 0;
}

.mel-header-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #0A0C0E 0%, #0E1012 35%, #13100A 70%, #0C0D10 100% );
    z-index: 0;
    overflow: hidden;
}

/* Animated ambient orbs */
.mel-hbg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    animation: mel-orb-drift 8s ease-in-out infinite alternate;
}

@keyframes mel-orb-drift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(8px, -6px) scale(1.08);
    }
}

.mel-hbg-orb--orange {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(245,130,32,0.65) 0%, rgba(201,106,14,0.3) 50%, transparent 100%);
    top: -70px;
    right: -40px;
    opacity: 0.75;
    animation-duration: 7s;
}

.mel-hbg-orb--blue {
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(86,196,248,0.5) 0%, rgba(42,168,224,0.25) 55%, transparent 100%);
    bottom: -40px;
    left: 0px;
    opacity: 0.45;
    animation-duration: 9s;
    animation-direction: alternate-reverse;
}

.mel-hbg-orb--green {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(245,130,32,0.4) 0%, transparent 100%);
    top: 30px;
    left: 45%;
    opacity: 0.15;
    animation-duration: 11s;
}

.mel-header-glass {
    position: relative;
    z-index: 1;
    padding: 11px 16px 11px;
    background: rgba(255,255,255,0.04);
    backdrop-filter: var(--mel-blur-glass);
    -webkit-backdrop-filter: var(--mel-blur-glass);
    border-bottom: 1px solid var(--mel-glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.3);
}

@supports not (backdrop-filter: blur(1px)) {
    .mel-header-glass {
        background: rgba(9,9,11,0.98);
    }
}

.mel-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mel-identity {
    display: flex;
    align-items: center;
    gap: 13px;
}

/* Avatar — premium ring effect, compact */
.mel-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--mel-orange) 0%, var(--mel-orange-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 1.5px rgba(245,130,32,0.5), 0 0 0 4px rgba(245,130,32,0.12), 0 4px 16px rgba(245,130,32,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}

.mel-avatar-letter {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mel-white);
    font-family: var(--mel-font-display);
    line-height: 1;
    user-select: none;
    font-style: italic;
    letter-spacing: -0.02em;
}

.mel-avatar-online {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 12px;
    height: 12px;
    background: var(--mel-green);
    border-radius: 50%;
    border: 2px solid #0A0C0E;
    animation: mel-blink 2s ease infinite;
    box-shadow: 0 0 6px rgba(52,217,134,0.7);
}

@keyframes mel-blink {
    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.mel-agent-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Agent name — DM Sans bold, no italic, premium weight */
.mel-agent-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mel-text-primary);
    font-family: var(--mel-font);
    letter-spacing: -0.01em;
    line-height: 1.15;
    font-style: normal;
}

    .mel-agent-name::after {
        content: '.';
        color: var(--mel-orange);
        font-style: normal;
    }

.mel-agent-sub {
    font-size: 0.58rem;
    color: rgba(255,255,255,0.32);
    font-style: normal;
    margin-top: 2px;
    display: block;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--mel-font);
    font-weight: 400;
}

.mel-agent-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    color: var(--mel-green);
    font-weight: 500;
    margin-top: 5px;
    font-family: var(--mel-font);
    letter-spacing: 0.02em;
}

.mel-status-dot {
    width: 5px;
    height: 5px;
    background: var(--mel-green);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(52,217,134,0.8);
    animation: mel-blink 2s ease infinite;
}

/* ── Compact header caption — replaces the old tagline block ── */
.mel-header-caption {
    font-size: 0.6rem;
    font-family: var(--mel-font);
    font-weight: 400;
    color: rgba(255,255,255,0.32);
    letter-spacing: 0.04em;
    text-align: right;
    line-height: 1.55;
    flex-shrink: 0;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    border-left: 1px solid rgba(245,130,32,0.25);
    padding-left: 11px;
}

/* Tagline — hidden (replaced by .mel-header-caption) */
.mel-tagline {
    display: none !important;
}

/* Agent status row — hidden (removed from header redesign) */
.mel-agent-status {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════
   CHIPS BAR — Dark glass with premium pills
═══════════════════════════════════════════════════════ */
.mel-chips-container {
    display: flex;
    align-items: center;
    background: rgba(10,11,13,0.7);
    border-bottom: 1px solid var(--mel-glass-border);
    flex-shrink: 0;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mel-chip-arrow {
    width: 28px;
    min-width: 28px;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--mel-text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    z-index: 1;
    transition: color 0.15s ease;
    outline: none;
    flex-shrink: 0;
    padding: 8px 4px;
}

.mel-chip-arrow-left {
    background: linear-gradient(to right, rgba(10,11,13,0.9), transparent);
}

.mel-chip-arrow-right {
    background: linear-gradient(to left, rgba(10,11,13,0.9), transparent);
}

.mel-chip-arrow:hover {
    color: var(--mel-orange);
}

.mel-chip-arrow:focus-visible {
    outline: 2px solid var(--mel-orange);
}

.mel-chip-arrow.mel-arrow-hidden {
    opacity: 0;
    pointer-events: none;
}

.mel-chips-bar {
    flex: 1;
    padding: 9px 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

    .mel-chips-bar::-webkit-scrollbar {
        display: none;
    }

/* Premium pill chips */
.mel-chip {
    white-space: nowrap;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--mel-text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
    flex-shrink: 0;
    font-family: var(--mel-font);
    outline: none;
    line-height: 1.4;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

    .mel-chip:hover {
        border-color: rgba(245,130,32,0.5);
        color: var(--mel-orange);
        background: rgba(245,130,32,0.08);
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(245,130,32,0.18);
    }

    .mel-chip:focus-visible {
        outline: 2px solid var(--mel-orange);
    }

/* ═══════════════════════════════════════════════════════
   MESSAGES WRAPPER + SCROLL CONTROLS
═══════════════════════════════════════════════════════ */
.mel-messages-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    position: relative;
    overflow: hidden;
    background: var(--mel-surface-base);
}

    /* Subtle grain on messages area */
    .mel-messages-wrapper::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
        opacity: 0.018;
        pointer-events: none;
        z-index: 0;
    }

.mel-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 14px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: transparent;
    outline: none;
    scroll-padding-top: 16px;
    scrollbar-width: none;
    position: relative;
    z-index: 1;
}

    .mel-messages::-webkit-scrollbar {
        display: none;
    }

/* Scroll controls sidebar */
.mel-scroll-controls {
    width: 16px;
    background: rgba(10,11,13,0.6);
    border-left: 1px solid var(--mel-glass-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
    gap: 3px;
    flex-shrink: 0;
    z-index: 1;
}

.mel-scroll-btn {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--mel-text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    outline: none;
    flex-shrink: 0;
}

    .mel-scroll-btn:hover {
        background: var(--mel-glass-light);
        color: var(--mel-orange);
    }

    .mel-scroll-btn:focus-visible {
        outline: 2px solid var(--mel-orange);
    }

.mel-scroll-track {
    flex: 1;
    width: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    position: relative;
    margin: 2px 0;
    cursor: pointer;
}

.mel-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, var(--mel-orange), var(--mel-orange-dark));
    border-radius: 2px;
    min-height: 24px;
    cursor: grab;
    opacity: 0.6;
    transition: opacity 0.15s;
    box-shadow: 0 0 6px rgba(245,130,32,0.4);
}

    .mel-scroll-thumb:hover {
        opacity: 1;
    }

    .mel-scroll-thumb:active {
        cursor: grabbing;
        opacity: 1;
    }

/* ── MESSAGE ROWS ── */
.mel-msg {
    display: flex;
    gap: 9px;
    align-items: flex-end;
    max-width: 100%;
    animation: mel-msg-in 0.34s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes mel-msg-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mel-msg.mel-user {
    flex-direction: row-reverse;
}

.mel-msg-av {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--mel-orange), var(--mel-orange-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mel-white);
    font-family: var(--mel-font-display);
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(245,130,32,0.4), 0 3px 10px rgba(245,130,32,0.35);
    font-style: italic;
}

.mel-msg.mel-user .mel-msg-av {
    background: linear-gradient(145deg, var(--mel-blue), var(--mel-blue-dark));
    box-shadow: 0 0 0 1px rgba(86,196,248,0.4), 0 3px 10px rgba(86,196,248,0.28);
}

.mel-bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: calc(100% - 37px);
    min-width: 0;
}

.mel-msg.mel-user .mel-bubble-wrap {
    align-items: flex-end;
}

/* ── BUBBLES — liquid glass bot / vivid user ── */
.mel-bubble {
    padding: 11px 14px;
    border-radius: 16px 16px 16px 4px;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--mel-text-primary);
    /* Bot bubble: liquid glass */
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--mel-glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 12px rgba(0,0,0,0.4);
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    width: 100%;
    font-family: var(--mel-font);
    font-weight: 300;
    letter-spacing: 0.01em;
}

.mel-msg.mel-user .mel-bubble {
    background: linear-gradient(145deg, var(--mel-orange) 0%, var(--mel-orange-dark) 100%);
    color: var(--mel-white);
    border-radius: 16px 16px 4px 16px;
    border: none;
    box-shadow: 0 4px 20px rgba(245,130,32,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
    font-weight: 400;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Rich formatting in bot bubbles */
.mel-bubble h4 {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--mel-text-primary);
    margin: 0 0 6px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(245,130,32,0.4);
    display: block;
    font-family: var(--mel-font-display);
    font-style: italic;
    letter-spacing: 0.01em;
}

.mel-bubble ul {
    padding-left: 14px;
    margin: 5px 0;
}

    .mel-bubble ul li {
        margin-bottom: 4px;
        font-size: 0.80rem;
        line-height: 1.6;
        color: var(--mel-text-secondary);
    }

.mel-bubble p {
    margin: 0 0 6px 0;
}

    .mel-bubble p:last-child {
        margin-bottom: 0;
    }

.mel-bubble strong {
    font-weight: 600;
    color: var(--mel-text-primary);
}

.mel-bubble em {
    font-style: italic;
    color: var(--mel-orange);
    font-family: var(--mel-font-display);
    font-weight: 400;
}

/* Pills */
.mel-law-tag {
    display: inline-block;
    background: rgba(86,196,248,0.10);
    border: 1px solid rgba(86,196,248,0.25);
    color: var(--mel-blue);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.65rem;
    font-weight: 500;
    margin: 1px 2px;
    font-family: var(--mel-font);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.mel-num-pill {
    display: inline-block;
    background: rgba(245,130,32,0.10);
    border: 1px solid rgba(245,130,32,0.28);
    color: var(--mel-orange);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.65rem;
    font-weight: 500;
    margin: 1px 2px;
    font-family: var(--mel-font);
    white-space: nowrap;
}

/* ── YES/NO INLINE BUTTON ROW ── */
.mel-yn-row {
    display: flex;
    gap: 7px;
    margin-top: 9px;
    flex-wrap: wrap;
}

.mel-yn-btn {
    padding: 5px 16px;
    border-radius: 20px;
    border: 1px solid var(--mel-glass-border-strong);
    background: rgba(255,255,255,0.05);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--mel-font);
    transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
    outline: none;
    color: var(--mel-text-secondary);
    letter-spacing: 0.02em;
}

    .mel-yn-btn.mel-yn-yes {
        border-color: rgba(245,130,32,0.45);
        color: var(--mel-orange);
    }

    .mel-yn-btn.mel-yn-no {
        border-color: var(--mel-glass-border);
        color: var(--mel-text-tertiary);
    }

    .mel-yn-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        background: rgba(255,255,255,0.08);
    }

    .mel-yn-btn.mel-yn-yes:hover {
        background: rgba(245,130,32,0.10);
        border-color: var(--mel-orange);
    }

    .mel-yn-btn:focus-visible {
        outline: 2px solid var(--mel-orange);
    }

    .mel-yn-btn:disabled {
        opacity: 0.3;
        cursor: default;
        transform: none;
        box-shadow: none;
    }

/* ── LIKE BUTTON ── */
.mel-msg-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

.mel-like-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--mel-text-tertiary);
    padding: 2px 5px;
    border-radius: 5px;
    transition: color 0.18s, transform 0.18s;
    outline: none;
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: var(--mel-font);
    font-size: 0.65rem;
}

    .mel-like-btn:hover {
        color: var(--mel-orange);
        transform: scale(1.15);
    }

    .mel-like-btn.mel-liked {
        color: var(--mel-orange);
    }

    .mel-like-btn:focus-visible {
        outline: 2px solid var(--mel-orange);
    }

/* Source refs */
.mel-source-refs {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--mel-glass-border);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mel-source-ref {
    font-size: 0.58rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--mel-glass-border);
    color: var(--mel-text-tertiary);
    border-radius: 4px;
    padding: 2px 7px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--mel-font);
    cursor: default;
    outline: none;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    letter-spacing: 0.02em;
}

button.mel-source-ref {
    cursor: pointer;
}

    button.mel-source-ref:hover {
        background: var(--mel-orange-glass);
        border-color: rgba(245,130,32,0.4);
        color: var(--mel-orange);
    }

    button.mel-source-ref:focus-visible {
        outline: 2px solid var(--mel-orange);
        outline-offset: 1px;
    }

/* Timestamp */
.mel-msg-time {
    font-size: 0.56rem;
    color: var(--mel-text-tertiary);
    margin-top: 4px;
    padding: 0 3px;
    font-family: var(--mel-font);
    display: flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.03em;
}

.mel-msg.mel-user .mel-msg-time {
    flex-direction: row-reverse;
}

.mel-read-tick {
    color: var(--mel-blue);
    font-size: 0.6rem;
}

/* TTS word highlight */
.mel-tts-word {
    transition: background 0.1s ease;
    border-radius: 2px;
}

    .mel-tts-word.mel-tts-active {
        background: rgba(245,130,32,0.22);
        color: var(--mel-text-primary);
    }

/* ── TYPING INDICATOR ── */
.mel-typing-row {
    display: flex;
    gap: 9px;
    align-items: flex-end;
    animation: mel-msg-in 0.26s ease;
}

.mel-typing-bubble {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--mel-glass-border);
    border-radius: 16px 16px 16px 4px;
    padding: 12px 16px;
    display: flex;
    gap: 6px;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: mel-dot-bounce 1.2s ease infinite;
}

    .mel-dot:nth-child(1) {
        background: var(--mel-orange);
        animation-delay: 0s;
    }

    .mel-dot:nth-child(2) {
        background: var(--mel-blue);
        animation-delay: 0.15s;
    }

    .mel-dot:nth-child(3) {
        background: var(--mel-orange);
        animation-delay: 0.3s;
    }

@keyframes mel-dot-bounce {
    0%,80%,100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    40% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════
   INPUT AREA — Dark liquid glass premium
═══════════════════════════════════════════════════════ */
.mel-input-area {
    padding: 11px 12px 10px;
    border-top: 1px solid var(--mel-glass-border);
    background: rgba(10,11,13,0.75);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.mel-input-wrap {
    display: flex;
    gap: 7px;
    align-items: flex-end;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--mel-glass-border);
    border-radius: 20px;
    padding: 7px 7px 7px 10px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

    .mel-input-wrap:focus-within {
        border-color: rgba(245,130,32,0.5);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 3px rgba(245,130,32,0.10), 0 0 20px rgba(245,130,32,0.08);
        background: rgba(255,255,255,0.07);
    }

/* Mic button */
.mel-mic-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--mel-text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    outline: none;
}

    .mel-mic-btn:hover {
        background: var(--mel-orange-glass);
        color: var(--mel-orange);
    }

    .mel-mic-btn.mel-mic-active {
        background: var(--mel-orange);
        color: var(--mel-white);
        animation: mel-mic-pulse 1s ease infinite;
    }

    .mel-mic-btn:focus-visible {
        outline: 2px solid var(--mel-orange);
    }

@keyframes mel-mic-pulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(245,130,32,0.5);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(245,130,32,0);
    }
}

.mel-textarea {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--mel-font);
    font-size: 0.83rem;
    color: var(--mel-text-primary);
    resize: none;
    max-height: 96px;
    overflow-y: auto;
    line-height: 1.55;
    min-height: 20px;
    font-weight: 300;
    letter-spacing: 0.01em;
    caret-color: var(--mel-orange);
}

    .mel-textarea::placeholder {
        color: var(--mel-text-tertiary);
        font-style: italic;
    }

/* Send button — glowing orange */
.mel-send-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--mel-orange), var(--mel-orange-dark));
    border: none;
    color: var(--mel-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 3px 12px rgba(245,130,32,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
    outline: none;
}

    .mel-send-btn:hover:not(:disabled) {
        transform: scale(1.10);
        box-shadow: 0 6px 20px rgba(245,130,32,0.65), inset 0 1px 0 rgba(255,255,255,0.25);
    }

    .mel-send-btn:disabled {
        background: rgba(255,255,255,0.08);
        box-shadow: none;
        cursor: not-allowed;
        transform: none;
    }

    .mel-send-btn:focus-visible {
        outline: 2px solid var(--mel-orange);
        outline-offset: 2px;
    }

/* Input hint — editorial tiny caps */
.mel-input-hint {
    font-size: 0.55rem;
    color: var(--mel-text-tertiary);
    text-align: center;
    margin-top: 6px;
    font-family: var(--mel-font);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Voice recording overlay */
.mel-voice-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(245,130,32,0.08);
    border-radius: 12px;
    border: 1px dashed rgba(245,130,32,0.35);
    font-size: 0.72rem;
    color: var(--mel-orange);
    font-family: var(--mel-font);
    font-weight: 400;
}

    .mel-voice-bar.mel-voice-active {
        display: flex;
    }

.mel-voice-waves {
    display: flex;
    gap: 2px;
    align-items: center;
}

.mel-voice-wave {
    width: 3px;
    background: var(--mel-orange);
    border-radius: 2px;
    animation: mel-wave 0.8s ease infinite alternate;
}

    .mel-voice-wave:nth-child(1) {
        height: 8px;
        animation-delay: 0s;
    }

    .mel-voice-wave:nth-child(2) {
        height: 14px;
        animation-delay: 0.1s;
    }

    .mel-voice-wave:nth-child(3) {
        height: 10px;
        animation-delay: 0.2s;
    }

    .mel-voice-wave:nth-child(4) {
        height: 16px;
        animation-delay: 0.15s;
    }

    .mel-voice-wave:nth-child(5) {
        height: 8px;
        animation-delay: 0.05s;
    }

@keyframes mel-wave {
    from {
        transform: scaleY(0.4);
    }

    to {
        transform: scaleY(1);
    }
}

/* TTS button */
.mel-tts-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--mel-text-tertiary);
    padding: 2px 5px;
    border-radius: 6px;
    transition: color 0.15s, transform 0.15s;
    outline: none;
}

    .mel-tts-btn:hover {
        color: var(--mel-blue);
        transform: scale(1.15);
    }

    .mel-tts-btn.mel-tts-playing {
        color: var(--mel-blue);
    }

    .mel-tts-btn:focus-visible {
        outline: 2px solid var(--mel-orange);
    }

/* ── DISCLAIMER ── */
.mel-disclaimer {
    margin: 0;
    padding: 5px 14px 8px;
    font-size: 0.55rem;
    color: var(--mel-text-tertiary);
    text-align: center;
    background: rgba(10,11,13,0.6);
    border-top: 1px solid var(--mel-glass-border);
    line-height: 1.5;
    font-family: var(--mel-font);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════
   MINIMISED PILL — Dark glass edition
═══════════════════════════════════════════════════════ */
.mel-minimised-pill {
    position: fixed;
    bottom: calc(var(--mel-btn-bottom) + var(--mel-btn-size) + 14px);
    right: var(--mel-btn-right);
    background: rgba(15,17,20,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(245,130,32,0.35);
    border-radius: 30px;
    padding: 6px 11px 6px 8px;
    display: none;
    align-items: center;
    gap: 7px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(245,130,32,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
    z-index: 9998;
    font-family: var(--mel-font);
    cursor: default;
    animation: mel-msg-in 0.3s ease;
}

    .mel-minimised-pill.mel-pill-show {
        display: flex;
    }

.mel-min-restore-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--mel-orange);
    font-size: 0.75rem;
    padding: 2px 4px;
    border-radius: 6px;
    outline: none;
    transition: transform 0.15s;
}

    .mel-min-restore-btn:hover {
        transform: translateY(-2px);
    }

    .mel-min-restore-btn:focus-visible {
        outline: 2px solid var(--mel-orange);
    }

/* ═══════════════════════════════════════════════════════
   ACCESSIBILITY — Melikhaya inherits html-level a11y classes
   These declarations ensure our components also respond
═══════════════════════════════════════════════════════ */
html.a11y-large-text .mel-bubble {
    font-size: 0.92rem;
}

html.a11y-large-text .mel-chip {
    font-size: 0.76rem;
}

html.a11y-large-text .mel-agent-name {
    font-size: 1.1rem;
}

html.a11y-large-text .mel-input-hint {
    font-size: 0.68rem;
}

html.a11y-large-text .mel-textarea {
    font-size: 0.94rem;
}

/* High contrast: strengthen borders */
html.a11y-high-contrast .mel-window {
    border-color: var(--mel-orange);
    border-width: 2px;
    outline-color: var(--mel-orange);
}

html.a11y-high-contrast .mel-bubble {
    border-color: rgba(255,255,255,0.3);
}

html.a11y-high-contrast .mel-chip {
    border-color: rgba(255,255,255,0.3);
    color: var(--mel-text-primary);
}

html.a11y-high-contrast .mel-tl-close {
    background: #FF5F57;
}

html.a11y-high-contrast .mel-tl-min {
    background: #FEBC2E;
}

html.a11y-high-contrast .mel-tl-max {
    background: #28C840;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
    :root {
        --mel-window-w: 460px;
        --mel-window-h: 680px;
        --mel-btn-right: 20px;
        --mel-btn-bottom: 20px;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    :root {
        --mel-window-w: calc(100vw - 28px);
        --mel-window-h: 560px;
        --mel-btn-right: 15px;
        --mel-btn-bottom: 15px;
    }

    .mel-hover-label {
        display: none;
    }
}

@media (max-width: 480px) {
    :root {
        --mel-btn-right: 15px;
        --mel-btn-bottom: 15px;
    }

    .mel-window {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        bottom: 0 !important;
        right: 0 !important;
    }

    .mel-hover-label {
        display: none;
    }

    .mel-header-glass {
        padding: 12px 14px 11px;
    }

    .mel-agent-name {
        font-size: 1.15rem;
    }

    .mel-bubble {
        font-size: 0.79rem;
    }

    .mel-input-hint {
        display: none;
    }

    .mel-minimised-pill {
        right: 15px;
    }
}

@media (max-height: 560px) and (max-width: 900px) {
    .mel-window {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
    }

    .mel-tagline {
        display: none;
    }

    .mel-header-glass {
        padding: 9px 13px 8px;
    }

    .mel-agent-name {
        font-size: 0.88rem;
    }

    .mel-agent-sub {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mel-window {
        transition: opacity 0.16s ease;
        transform: none !important;
    }

    .mel-pulse-ring, .mel-dot, .mel-notif-badge, .mel-avatar-online, .mel-status-dot {
        animation: none;
    }

    .mel-msg {
        animation: none;
    }

    .mel-voice-wave {
        animation: none;
    }
}

/* ================================================================
   GEMINI-DRIVEN FOLLOW-UP SUGGESTION CHIPS
   Replaces the old hardcoded "Yes please / No thanks" row.
   Gemini's trailing question is stripped from the bubble HTML and
   shown exactly once here as a tappable chip. Never shown twice.
================================================================ */
.mel-suggest-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 11px;
}

.mel-suggest-chip {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--mel-glass-border);
    font-family: var(--mel-font);
    font-size: 0.74rem;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    line-height: 1.5;
    width: 100%;
    outline: none;
    transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
    letter-spacing: 0.01em;
}

    .mel-suggest-chip i {
        flex-shrink: 0;
        margin-top: 2px;
        font-size: 0.8rem;
    }

/* Yes / follow-up chip — dark glass orange tint */
.mel-suggest-yes {
    background: rgba(245,130,32,0.07);
    color: var(--mel-orange);
    border-color: rgba(245,130,32,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 10px rgba(0,0,0,0.3);
}

    .mel-suggest-yes:hover {
        background: rgba(245,130,32,0.12);
        border-color: rgba(245,130,32,0.45);
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 18px rgba(245,130,32,0.2), 0 2px 8px rgba(0,0,0,0.4);
    }

    .mel-suggest-yes:active {
        box-shadow: inset 0 2px 8px rgba(0,0,0,0.4) !important;
        transform: translateY(1px) !important;
        background: rgba(245,130,32,0.15) !important;
    }

    .mel-suggest-yes:focus-visible {
        outline: 2px solid var(--mel-orange);
        outline-offset: 2px;
    }

/* Skip chip — neutral dark glass */
.mel-suggest-skip {
    background: rgba(255,255,255,0.04);
    color: var(--mel-text-tertiary);
    border-color: var(--mel-glass-border);
    font-size: 0.69rem;
    font-weight: 400;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 6px rgba(0,0,0,0.3);
}

    .mel-suggest-skip:hover {
        background: rgba(255,255,255,0.07);
        color: var(--mel-text-secondary);
        border-color: var(--mel-glass-border-strong);
        transform: translateY(-1px);
    }

    .mel-suggest-skip:active {
        box-shadow: inset 0 2px 6px rgba(0,0,0,0.4) !important;
        transform: translateY(1px) !important;
    }

    .mel-suggest-skip:focus-visible {
        outline: 2px solid var(--mel-glass-border-strong);
        outline-offset: 2px;
    }

.mel-suggest-chip:disabled {
    opacity: 0.3;
    cursor: default;
    transform: none !important;
    box-shadow: none !important;
}

.mel-suggest-text {
    flex: 1;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
}

/* ================================================================
   PRESSED STATES — dark glass inset
================================================================ */
.mel-tl:active {
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5) !important;
    transform: scale(0.92) !important;
}

.mel-chip-arrow:active {
    opacity: 0.6 !important;
    transform: scale(0.88) !important;
}

.mel-chip:active {
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.4) !important;
    transform: translateY(1px) scale(0.97) !important;
    background: rgba(245,130,32,0.14) !important;
}

.mel-send-btn:active {
    box-shadow: 0 1px 4px rgba(245,130,32,0.3) !important;
    transform: scale(0.93) !important;
}

.mel-mic-btn:active {
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.4) !important;
    transform: scale(0.93) !important;
}

.mel-tts-btn:active {
    transform: scale(0.9) !important;
}

.mel-like-btn:active {
    transform: scale(0.9) !important;
}

.mel-tl-icon-btn:active {
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.4) !important;
    transform: scale(0.92) !important;
}

.mel-source-ref:active {
    transform: scale(0.95) !important;
}

.mel-trigger-btn:active {
    transform: scale(0.96) !important;
}


/* ================================================================
   MELIKHAYA MASCOT — FULL CSS REPLACEMENT
   ----------------------------------------------------------------
   INSTRUCTIONS:
   In melikhaya.css make TWO replacements:

   REPLACEMENT A — find the .mel-trigger-btn rule and ADD these
   two new selectors IMMEDIATELY AFTER the closing brace of
   .mel-trigger-btn { … } (before the :hover rule):

      .mel-robot-icon { … }
      (the block below)

   REPLACEMENT B — find the comment:
      /* MELIKHAYA CHATBOT MASCOT — ANIMATION SYSTEM */
and DELETE EVERYTHING from that comment to the very last line
of the file (the closing brace of the @media prefers-reduced-motion block).
Then PASTE the full animation block below in its place.
================================================================ */
/* ================================================================
   REPLACEMENT A — paste after .mel-trigger-btn { … } closing brace
================================================================ */
/* ── ROBOT ICON — overflows upward from the button footprint ── */
/* ── HTML GREETING BUBBLE — replaces SVG bubble ── */
/* ── HTML GREETING BUBBLE — replaces SVG bubble ── */
.mel-greet-bubble {
    position: fixed;
    bottom: calc(var(--mel-btn-bottom) + var(--mel-btn-size) + 95px);
    right: var(--mel-btn-right);
    transform: translateX(0) scale(0.94);
    transform-origin: bottom right;
    background: rgba(15,17,20,0.94);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(245,130,32,0.35);
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(245,130,32,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
    z-index: 10001;
    pointer-events: none;
    white-space: nowrap;
    min-width: 170px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.54,1.56,0.64,1);
}

.mel-greet-bubble.mel-bubble-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.mel-greet-bubble span {
    display: block;
    position: absolute;
    top: 50%;
    left: 16px;
    right: 16px;
    transform: translateY(-50%);
    font-family: var(--mel-font-display);
    font-size: 0.86rem;
    font-weight: 400;
    font-style: italic;
    color: var(--mel-orange);
    letter-spacing: 0.01em;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

    .mel-greet-bubble span.mel-greet-active {
        opacity: 1;
    }

/* Reserve height for the bubble so it doesn't collapse */
.mel-greet-bubble::before {
    content: '\00a0';
    display: block;
    visibility: hidden;
    font-family: var(--mel-font-display);
    font-size: 0.86rem;
    font-weight: 400;
    padding: 0;
    pointer-events: none;
}
/* Tail arrow pointing DOWN toward the robot head */
.mel-greet-tail {
    position: absolute;
    bottom: -10px;
    right: 14px;
    transform: none;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 10px solid rgba(245,130,32,0.35);
}

    .mel-greet-tail::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 8px solid rgba(15,17,20,0.97);
    }
/* Hide bubble when chat is open — bubble is INSIDE the trigger button */
.mel-trigger-btn.mel-is-open .mel-greet-bubble {
    opacity: 0 !important;
    pointer-events: none;
}
/* Touch devices: hide */
@media (hover: none) and (pointer: coarse) {
    .mel-greet-bubble {
        display: none !important;
    }
}

.mel-robot-icon {
    position: absolute;
    bottom: 0; /* anchored at button bottom edge */
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: visible;
    z-index: 2;
    /* Smooth transition for hover lift */
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), filter 0.28s ease;
    filter: drop-shadow(0 4px 12px rgba(245,130,32,0.35));
    animation: mel-idle-breathe 3.2s ease-in-out infinite;
}

@keyframes mel-idle-breathe {
    0%, 100% {
        filter: drop-shadow(0 4px 12px rgba(86,196,248,0.45)) drop-shadow(0 2px 6px rgba(245,130,32,0.20));
    }

    50% {
        filter: drop-shadow(0 4px 22px rgba(86,196,248,0.75)) drop-shadow(0 0 40px rgba(245,130,32,0.30));
    }
}

/* Hide robot when chat is open — show X pseudo-element instead */
.mel-trigger-btn.mel-is-open .mel-robot-icon {
    display: none;
}


/* ================================================================
   REPLACEMENT B — replaces the full animation block from the comment
   "MELIKHAYA CHATBOT MASCOT — ANIMATION SYSTEM" to end of file
================================================================ */

/* ================================================================
   MELIKHAYA CHATBOT MASCOT — ANIMATION SYSTEM
   Timeline: 44s loop broken into 4 chatbot-relevant phases
     0  – 24%   Phase 1 · LISTENING  (head tilt, hand drift, hover)
     25 – 49%   Phase 2 · THINKING   (right hand up, chat dots)
     50 – 74%   Phase 3 · GREETING   (wave, sway, happy eyes)
     75 – 100%  Phase 4 · CONFIRM    (nod, sparkle, return to idle)
================================================================ */

/* ── BODY FLOAT / PHASES ── */
@keyframes mel-robot-body-group {
    /* Phase 1 — Listening: gentle hover + tiny tilt */
    0%, 24% {
        transform: translateY(0) rotate(0deg);
    }

    6% {
        transform: translateY(-3px) rotate(-2deg);
    }

    12% {
        transform: translateY(-5px) rotate(-3deg);
    }

    18% {
        transform: translateY(-3px) rotate(-1deg);
    }
    /* Phase 2 — Thinking: slight forward lean, pause */
    28%, 46% {
        transform: translateY(-2px) rotate(2deg);
    }

    37% {
        transform: translateY(-4px) rotate(3deg);
    }
    /* Phase 3 — Greeting: left-right wave sway */
    52% {
        transform: translateY(-3px) rotate(-5deg);
    }

    56% {
        transform: translateY(-3px) rotate(5deg);
    }

    60% {
        transform: translateY(-3px) rotate(-4deg);
    }

    66% {
        transform: translateY(-2px) rotate(3deg);
    }

    72% {
        transform: translateY(0) rotate(0deg);
    }
    /* Phase 4 — Confirmation: small nod (y dip) */
    78% {
        transform: translateY(2px) rotate(0deg);
    }

    82% {
        transform: translateY(4px) rotate(0deg);
    }

    86% {
        transform: translateY(1px) rotate(0deg);
    }

    90% {
        transform: translateY(3px) rotate(0deg);
    }

    95% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

#mel-robot-body-group {
    animation: mel-robot-body-group 44s cubic-bezier(0.45,0,0.55,1) infinite;
    transform-origin: 50% 92%;
    transform-box: fill-box;
}

/* ── LEFT HAND ── */
@keyframes mel-robot-left-hand {
    /* Phase 1 — Listening: drift inward slightly */
    0%, 4% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(4px, -2px);
    }

    20%, 24% {
        transform: translate(3px, 0);
    }
    /* Phase 2 — Thinking: relaxed, resting */
    28%, 48% {
        transform: translate(0, 0);
    }
    /* Phase 3 — Greeting: wave outward */
    53% {
        transform: translate(-5px, -3px);
    }

    58% {
        transform: translate(-7px, -6px);
    }

    63% {
        transform: translate(-5px, -3px);
    }

    70%, 74% {
        transform: translate(0, 0);
    }
    /* Phase 4 — Confirm: slight thumbs-up style lift */
    80% {
        transform: translate(2px, -4px);
    }

    86% {
        transform: translate(1px, -2px);
    }

    100% {
        transform: translate(0, 0);
    }
}

#mel-robot-left-hand {
    animation: mel-robot-left-hand 44s ease-in-out infinite;
    transform-box: fill-box;
}

/* ── RIGHT HAND ── */
@keyframes mel-robot-right-hand {
    /* Phase 1 — Listening: gentle inward drift */
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    10% {
        transform: translate(-3px, -1px) rotate(0deg);
    }

    20%, 24% {
        transform: translate(0, 0) rotate(0deg);
    }
    /* Phase 2 — Thinking: raise up slightly */
    28% {
        transform: translate(0, -4px) rotate(-8deg);
    }

    37% {
        transform: translate(2px, -8px) rotate(-12deg);
    }

    46% {
        transform: translate(1px, -5px) rotate(-8deg);
    }

    49% {
        transform: translate(0, 0) rotate(0deg);
    }
    /* Phase 3 — Greeting: wave high outward */
    53% {
        transform: translate(5px, -5px) rotate(-10deg);
    }

    58% {
        transform: translate(8px, -10px) rotate(-18deg);
    }

    63% {
        transform: translate(5px, -6px) rotate(-10deg);
    }

    70%, 74% {
        transform: translate(0, 0) rotate(0deg);
    }
    /* Phase 4 — Confirm: small thumbs-up lift */
    80% {
        transform: translate(3px, -5px) rotate(-8deg);
    }

    86% {
        transform: translate(2px, -3px) rotate(-5deg);
    }

    95%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

#mel-robot-right-hand {
    animation: mel-robot-right-hand 44s ease-in-out infinite;
    transform-box: fill-box;
}

/* ── HUMAN-LIKE BLINK — scaleY ONLY around the eye's own centre.
   transform-box:fill-box pins origin to the element bbox so eyes
   never shift/drop position during the blink. ── */
@keyframes mel-robot-blink {
    0%, 100% {
        transform: scaleY(1);
    }
    /* Blink 1 */
    4% {
        transform: scaleY(1);
    }

    4.35% {
        transform: scaleY(0.06);
    }

    4.7% {
        transform: scaleY(1);
    }
    /* Blink 2 */
    30% {
        transform: scaleY(1);
    }

    30.35% {
        transform: scaleY(0.06);
    }

    30.7% {
        transform: scaleY(1);
    }
    /* Happy squint — greeting phase */
    53%, 70% {
        transform: scaleY(0.38);
    }

    72% {
        transform: scaleY(1);
    }
    /* Blink 3 */
    82% {
        transform: scaleY(1);
    }

    82.35% {
        transform: scaleY(0.06);
    }

    82.7% {
        transform: scaleY(1);
    }
}

#mel-robot-eye-left {
    animation: mel-robot-blink 44s ease-in-out infinite;
    transform-origin: center center;
    transform-box: fill-box;
}

#mel-robot-eye-right {
    animation: mel-robot-blink 44s ease-in-out infinite;
    animation-delay: 0.16s;
    transform-origin: center center;
    transform-box: fill-box;
}

/* ── SMILE — centred on x=45, symmetric arms, phases: neutral / thin / wide ── */
@keyframes mel-robot-smile {
    /* Default gentle smile — symmetric: 37→45→53 */
    0%, 22% {
        d: path("M 37 75 Q 45 82 53 75");
    }
    /* Thinking — slightly thinner */
    26%, 48% {
        d: path("M 38 76 Q 45 80 52 76");
    }

    50% {
        d: path("M 37 75 Q 45 82 53 75");
    }
    /* Greeting — big happy grin */
    53%, 70% {
        d: path("M 35 74 Q 45 87 55 74");
    }
    /* Back to default */
    74%, 100% {
        d: path("M 37 75 Q 45 82 53 75");
    }
}

#mel-robot-mouth {
    animation: mel-robot-smile 44s ease-in-out infinite;
}

/* ── CHAT DOTS — Phase 2 Thinking (25–49%) ── */
@keyframes mel-chat-dots-show {
    0%, 23%, 50%, 100% {
        opacity: 0;
    }

    28%, 46% {
        opacity: 1;
    }
}

#mel-chat-dots {
    animation: mel-chat-dots-show 44s ease-in-out infinite;
}

@keyframes mel-dot-bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.mel-dot {
    animation: mel-dot-bounce 0.9s ease-in-out infinite;
}

.mel-dot-2 {
    animation-delay: 0.3s;
}

.mel-dot-3 {
    animation-delay: 0.6s;
}

/* ── CONFIRM SPARKLE — Phase 4 (75–100%) ── */
@keyframes mel-confirm-spark-show {
    0%, 74%, 95%, 100% {
        opacity: 0;
        transform: scale(0.5);
    }

    79%, 88% {
        opacity: 1;
        transform: scale(1);
    }
}

#mel-confirm-spark {
    animation: mel-confirm-spark-show 44s ease-in-out infinite;
    transform-origin: 83.5px 72px;
    transform-box: fill-box;
}

/* ── GREETING BUBBLE — fades in/out on first appearance, then language cycles ── */
/* The bubble itself stays visible; individual text lines cycle */
@keyframes mel-bubble-breathe {
    0%, 100% {
        opacity: 0.9;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

#mel-greeting-bubble {
    animation: mel-bubble-breathe 3s ease-in-out infinite;
}

/* Each greeting text: 11 languages × (show 2s + hide 0.75s) ≈ 30.25s total cycle */
/* Each text is visible for ~2s out of every 30.25s, staggered by (30.25/11) ≈ 2.75s */

@keyframes mel-greet-cycle-1 {
    0%, 6.6%, 100% {
        opacity: 0;
    }

    0.5%, 5.6% {
        opacity: 1;
    }
}

@keyframes mel-greet-cycle-2 {
    0%, 6.6% {
        opacity: 0;
    }

    9.1%, 14.7% {
        opacity: 0;
    }

    9.6%, 13.7% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes mel-greet-cycle-3 {
    0%, 17.2% {
        opacity: 0;
    }

    17.7%, 22.3% {
        opacity: 1;
    }

    22.8%, 100% {
        opacity: 0;
    }
}

@keyframes mel-greet-cycle-4 {
    0%, 25.7% {
        opacity: 0;
    }

    26.2%, 30.8% {
        opacity: 1;
    }

    31.3%, 100% {
        opacity: 0;
    }
}

@keyframes mel-greet-cycle-5 {
    0%, 34.2% {
        opacity: 0;
    }

    34.7%, 39.3% {
        opacity: 1;
    }

    39.8%, 100% {
        opacity: 0;
    }
}

@keyframes mel-greet-cycle-6 {
    0%, 42.7% {
        opacity: 0;
    }

    43.2%, 47.8% {
        opacity: 1;
    }

    48.3%, 100% {
        opacity: 0;
    }
}

@keyframes mel-greet-cycle-7 {
    0%, 51.2% {
        opacity: 0;
    }

    51.7%, 56.3% {
        opacity: 1;
    }

    56.8%, 100% {
        opacity: 0;
    }
}

@keyframes mel-greet-cycle-8 {
    0%, 59.7% {
        opacity: 0;
    }

    60.2%, 64.8% {
        opacity: 1;
    }

    65.3%, 100% {
        opacity: 0;
    }
}

@keyframes mel-greet-cycle-9 {
    0%, 68.2% {
        opacity: 0;
    }

    68.7%, 73.3% {
        opacity: 1;
    }

    73.8%, 100% {
        opacity: 0;
    }
}

@keyframes mel-greet-cycle-10 {
    0%, 76.7% {
        opacity: 0;
    }

    77.2%, 81.8% {
        opacity: 1;
    }

    82.3%, 100% {
        opacity: 0;
    }
}

@keyframes mel-greet-cycle-11 {
    0%, 85.2% {
        opacity: 0;
    }

    85.7%, 93% {
        opacity: 1;
    }

    93.5%, 100% {
        opacity: 0;
    }
}

#mel-greet-1 {
    animation: mel-greet-cycle-1 30s ease-in-out infinite;
}

#mel-greet-2 {
    animation: mel-greet-cycle-2 30s ease-in-out infinite;
}

#mel-greet-3 {
    animation: mel-greet-cycle-3 30s ease-in-out infinite;
}

#mel-greet-4 {
    animation: mel-greet-cycle-4 30s ease-in-out infinite;
}

#mel-greet-5 {
    animation: mel-greet-cycle-5 30s ease-in-out infinite;
}

#mel-greet-6 {
    animation: mel-greet-cycle-6 30s ease-in-out infinite;
}

#mel-greet-7 {
    animation: mel-greet-cycle-7 30s ease-in-out infinite;
}

#mel-greet-8 {
    animation: mel-greet-cycle-8 30s ease-in-out infinite;
}

#mel-greet-9 {
    animation: mel-greet-cycle-9 30s ease-in-out infinite;
}

#mel-greet-10 {
    animation: mel-greet-cycle-10 30s ease-in-out infinite;
}

#mel-greet-11 {
    animation: mel-greet-cycle-11 30s ease-in-out infinite;
}


/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    #mel-robot-body-group,
    #mel-robot-left-hand,
    #mel-robot-right-hand,
    #mel-robot-eye-left,
    #mel-robot-eye-right,
    #mel-chat-dots,
    .mel-dot,
    #mel-confirm-spark,
    #mel-greeting-bubble,
    #mel-greet-1, #mel-greet-2, #mel-greet-3,
    #mel-greet-4, #mel-greet-5, #mel-greet-6,
    #mel-greet-7, #mel-greet-8, #mel-greet-9,
    #mel-greet-10, #mel-greet-11 {
        animation: none !important;
    }
    /* Show only the first greeting statically */
    #mel-greet-1 {
        opacity: 1 !important;
    }
}
/* ================================================================
   PREMIUM RESPONSIVE — Full device coverage
   Mobile-first, then tablet and desktop overrides
================================================================ */

/* ── EXTRA-SMALL PHONES (< 400px) ── */
@media (max-width: 399px) {
    :root {
        --mel-btn-right: 12px;
        --mel-btn-bottom: 32px;
        --mel-btn-size: 44px;
        --mel-window-w: calc(100vw - 16px);
        --mel-window-h: calc(100dvh - 100px);
        --mel-radius: 16px;
    }

    .mel-window {
        right: 8px !important;
        left: 8px !important;
        width: calc(100vw - 16px) !important;
        bottom: calc(var(--mel-btn-bottom) + var(--mel-btn-size) + 10px) !important;
        max-height: calc(100dvh - 90px) !important;
        border-radius: 16px !important;
    }

    .mel-header-glass {
        padding: 10px 12px 10px;
    }

    .mel-agent-name {
        font-size: 0.88rem;
    }

    .mel-tagline {
        font-size: 0.62rem;
        padding: 6px 9px;
    }

    .mel-chip {
        font-size: 0.64rem;
        padding: 4px 9px;
    }

    .mel-textarea {
        font-size: 0.8rem;
    }

    .mel-input-hint {
        font-size: 0.53rem;
    }

    .mel-msg-bubble {
        font-size: 0.8rem;
    }

    .mel-disclaimer {
        font-size: 0.56rem;
    }

    /* Robot already small enough at default 50×70 — no override needed */
    .mel-robot-icon svg {
        width: 44px !important;
        height: 62px !important;
    }
}

/* ── SMALL PHONES (400–599px) ── */
@media (min-width: 400px) and (max-width: 599px) {
    :root {
        --mel-btn-right: 14px;
        --mel-btn-bottom: 32px;
        --mel-window-w: calc(100vw - 20px);
        --mel-window-h: calc(100dvh - 110px);
    }

    .mel-window {
        right: 10px !important;
        left: 10px !important;
        width: calc(100vw - 20px) !important;
        bottom: calc(var(--mel-btn-bottom) + var(--mel-btn-size) + 12px) !important;
        max-height: calc(100dvh - 100px) !important;
    }
}

/* ── TABLETS (600–1023px) ── */
@media (min-width: 600px) and (max-width: 1023px) {
    :root {
        --mel-btn-right: 18px;
        --mel-btn-bottom: 32px;
        --mel-window-w: 400px;
        --mel-window-h: 640px;
    }

    .mel-window {
        max-height: calc(100dvh - 90px) !important;
    }
}

/* ── LANDSCAPE PHONES — prevent chat going off screen ── */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --mel-btn-bottom: 8px;
        --mel-window-h: calc(100dvh - 60px);
    }

    .mel-window {
        bottom: calc(var(--mel-btn-bottom) + var(--mel-btn-size) + 6px) !important;
        max-height: calc(100dvh - 60px) !important;
    }

    .mel-header-glass {
        padding: 8px 12px;
    }

    .mel-tagline {
        display: none;
    }
}

/* ── DESKTOP LARGE (≥ 1280px) ── */
@media (min-width: 1280px) {
    :root {
        --mel-btn-right: 32px;
        --mel-btn-bottom: 32px;
        --mel-window-w: 440px;
        --mel-window-h: 680px;
    }
}

/* ── TOUCH DEVICE COMFORT — bigger tap targets ── */
@media (hover: none) and (pointer: coarse) {
    .mel-chip {
        padding: 6px 13px;
        font-size: 0.7rem;
        min-height: 32px;
    }

    .mel-tl {
        width: 16px;
        height: 16px;
    }

    .mel-send-btn {
        width: 38px;
        height: 38px;
    }

    .mel-mic-btn {
        width: 36px;
        height: 36px;
    }

    .mel-scroll-btn {
        width: 22px;
        height: 22px;
    }

    .mel-textarea {
        font-size: 16px; /* prevent iOS auto-zoom */
    }

    /* Hover label not needed on touch */
    .mel-hover-label {
        display: none !important;
    }
}

/* ── NOTCH / SAFE AREA SUPPORT (iPhone X+) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mel-trigger-btn {
        bottom: calc(var(--mel-btn-bottom) + env(safe-area-inset-bottom, 0px)) !important;
        right: calc(var(--mel-btn-right) + env(safe-area-inset-right, 0px)) !important;
    }

    .mel-window {
        bottom: calc(var(--mel-btn-bottom) + var(--mel-btn-size) + 14px + env(safe-area-inset-bottom, 0px)) !important;
        right: calc(var(--mel-btn-right) + env(safe-area-inset-right, 0px)) !important;
    }

    .mel-hover-label {
        /* Already handled by the dedicated safe-area block above */
    }

    .mel-minimised-pill {
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        right: calc(14px + env(safe-area-inset-right, 0px)) !important;
    }
}

/* ── HIGH-DPI / RETINA — crisp SVG rendering ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .mel-robot-icon svg {
        image-rendering: auto;
        shape-rendering: geometricPrecision;
    }
}

/* ============================================================
   COST-CONTROL UI — character counter + quota nudge
   Added with the cost-optimisation work. Styling mirrors the
   Melikhaya accent (#F58220) and uses the existing glass tokens.
   ============================================================ */
.mel-char-count {
    font-size: 11px;
    line-height: 1;
    color: var(--mel-text-tertiary, rgba(255, 255, 255, 0.45));
    text-align: right;
    padding: 5px 6px 0 0;
    user-select: none;
    transition: opacity 0.2s, color 0.2s;
    opacity: 0;
}

    .mel-char-count.mel-cc-warn {
        color: #F58220;
    }

    .mel-char-count.mel-cc-max {
        color: #e53935;
        font-weight: 600;
    }

.mel-quota-note {
    font-size: 12.5px !important;
    color: var(--mel-text-secondary, rgba(255, 255, 255, 0.7)) !important;
    background: rgba(245, 130, 32, 0.08);
    border: 1px solid rgba(245, 130, 32, 0.22);
    border-radius: 10px;
    padding: 8px 11px !important;
    margin: 2px 0 0 !important;
}

    .mel-quota-note strong {
        color: #F58220;
    }