/* ==========================================================================
   Arrelam AI assistant widget
   All selectors are prefixed .aiw- and tokens are scoped at .aiw-root.
   Fonts are inherited from the site body (Manrope) — nothing is loaded here.
   ========================================================================== */

.aiw-root {
    --aiw-primary: #3A5A40;
    --aiw-primary-strong: #2F4A34;
    --aiw-on-primary: #FFFFFF;
    --aiw-bg: #F2F0EB;
    --aiw-surface: #FFFFFF;
    --aiw-bubble: #F2F0EB;
    --aiw-text: #2B2D26;
    --aiw-muted: #595959;
    --aiw-border: #D8D4CB;
    --aiw-error-bg: #F7ECEA;
    --aiw-error-text: #8A2F26;
    --aiw-shadow: 0 10px 30px rgba(43, 45, 38, 0.18);
    color: var(--aiw-text);
}

/* Dark mode (html.dark) — minimal token remap */
.dark .aiw-root {
    --aiw-primary: #88B090;
    --aiw-primary-strong: #9DC2A4;
    --aiw-on-primary: #151817;
    --aiw-bg: #151817;
    --aiw-surface: #1e2220;
    --aiw-bubble: #2A2F2C;
    --aiw-text: #E8E5DF;
    --aiw-muted: #A9A79E;
    --aiw-border: #3A403C;
    --aiw-error-bg: #3B2724;
    --aiw-error-text: #F2B8AE;
    --aiw-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.aiw-root button {
    font: inherit;
}

.aiw-root :focus-visible {
    outline: 2px solid var(--aiw-primary);
    outline-offset: 2px;
}

/* Author styles below use display:flex, which would defeat the UA [hidden]
   rule — force it back. */
.aiw-root [hidden],
.aiw-panel[hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Launcher (fixed, above the back-to-top button)
   -------------------------------------------------------------------------- */
.aiw-launcher {
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 9990;
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--aiw-primary);
    color: var(--aiw-on-primary);
    cursor: pointer;
    /* Stronger, layered shadow + faint inner ring: reads clearly on any page. */
    box-shadow: 0 8px 24px rgba(43, 45, 38, 0.38), 0 2px 6px rgba(43, 45, 38, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Attention halo: a soft ring that expands and fades behind the button, so the
   launcher signals "live" without stealing focus from the page's own CTA. */
.aiw-launcher::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: var(--aiw-primary);
    opacity: 0;
}

.aiw-launcher:focus-visible {
    outline: 3px solid var(--aiw-primary-strong);
    outline-offset: 3px;
}

.aiw-launcher svg {
    width: 28px;
    height: 28px;
}

/* Short, one-time invitation. It increases discovery without opening the
   conversation or competing with the page's primary CTA. */
.aiw-teaser {
    position: fixed;
    right: 20px;
    bottom: 152px;
    z-index: 9989;
    width: min(288px, calc(100vw - 40px));
    display: flex;
    align-items: flex-start;
    gap: 4px;
    background: var(--aiw-surface);
    color: var(--aiw-text);
    border: 1px solid var(--aiw-border);
    border-radius: 16px;
    box-shadow: var(--aiw-shadow);
}

.aiw-teaser::after {
    content: '';
    position: absolute;
    right: 20px;
    bottom: -7px;
    width: 12px;
    height: 12px;
    background: var(--aiw-surface);
    border-right: 1px solid var(--aiw-border);
    border-bottom: 1px solid var(--aiw-border);
    transform: rotate(45deg);
}

.aiw-teaser-main {
    flex: 1;
    min-width: 0;
    padding: 16px 8px 16px 16px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.aiw-teaser-title,
.aiw-teaser-body {
    display: block;
}

.aiw-teaser-title {
    margin-bottom: 4px;
    color: var(--aiw-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.aiw-teaser-body {
    color: var(--aiw-muted);
    font-size: 14px;
    line-height: 1.5;
}

.aiw-teaser-close {
    position: relative;
    z-index: 1;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px 4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--aiw-muted);
    cursor: pointer;
}

.aiw-teaser-close svg {
    width: 18px;
    height: 18px;
}

.aiw-teaser-main:hover .aiw-teaser-title,
.aiw-teaser-close:hover {
    color: var(--aiw-primary-strong);
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
.aiw-panel {
    position: fixed;
    right: 20px;
    bottom: 148px;
    /* Above the floating cookie button (9998) so panel actions stay clickable;
       still below the cookie consent banner/modal (10001+). */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: calc(100vw - 40px);
    max-height: min(600px, calc(100vh - 170px));
    background: var(--aiw-surface);
    color: var(--aiw-text);
    border: 1px solid var(--aiw-border);
    border-radius: 16px;
    box-shadow: var(--aiw-shadow);
    overflow: hidden;
}

/* Header */
.aiw-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 10px 12px 20px;
    border-bottom: 1px solid var(--aiw-border);
}

.aiw-header-txt {
    flex: 1;
    min-width: 0;
}

.aiw-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--aiw-text);
}

.aiw-subtitle {
    margin: 3px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--aiw-muted);
}

.aiw-chip {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--aiw-primary);
    border-radius: 6px;
    color: var(--aiw-primary);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.aiw-close {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--aiw-text);
    cursor: pointer;
}

.aiw-close:hover {
    background: var(--aiw-bubble);
}

.aiw-close svg {
    width: 20px;
    height: 20px;
}

/* Sound toggle — secondary header control (chime on the bot's reply) */
.aiw-sound {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--aiw-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.aiw-sound:hover {
    background: var(--aiw-bubble);
    color: var(--aiw-text);
}
.aiw-sound[aria-pressed="true"] {
    color: var(--aiw-primary);
}
.aiw-sound[aria-pressed="false"] {
    opacity: 0.7;
}
.aiw-sound svg {
    width: 19px;
    height: 19px;
}

/* AI notice line */
.aiw-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px 10px 20px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--aiw-muted);
    border-bottom: 1px solid var(--aiw-border);
}

.aiw-notice-body {
    flex: 1;
    min-width: 0;
}

.aiw-notice a {
    color: var(--aiw-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aiw-notice-close {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: -1px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--aiw-muted);
    cursor: pointer;
}

.aiw-notice-close:hover {
    background: var(--aiw-bubble);
    color: var(--aiw-text);
}

.aiw-notice-close:focus-visible {
    outline: 2px solid var(--aiw-primary);
    outline-offset: 2px;
}

.aiw-notice-close svg {
    width: 15px;
    height: 15px;
}

/* Views (chat / contact / success) */
.aiw-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */
.aiw-messages {
    flex: 1 1 auto;
    min-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
}

.aiw-msg {
    max-width: 85%;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.91rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    user-select: text;
}

.aiw-msg-user {
    align-self: flex-end;
    background: var(--aiw-primary);
    color: var(--aiw-on-primary);
    border-bottom-right-radius: 4px;
}

.aiw-msg-assistant {
    align-self: flex-start;
    background: var(--aiw-bubble);
    color: var(--aiw-text);
    border-bottom-left-radius: 4px;
}

/* "IA" prefix chip — speaker is not marked by color alone */
.aiw-msg-chip {
    display: block;
    margin-bottom: 2px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--aiw-primary);
}

.aiw-msg-text {
    margin: 0;
}

.aiw-msg-error {
    align-self: flex-start;
    background: var(--aiw-error-bg);
    color: var(--aiw-error-text);
    font-size: 0.85rem;
}

/* Inline contact CTA under a bubble */
.aiw-cta-row {
    align-self: flex-start;
    max-width: 85%;
}

.aiw-cta {
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--aiw-primary);
    border-radius: 10px;
    background: transparent;
    color: var(--aiw-primary);
    font-weight: 700;
    cursor: pointer;
}

.aiw-cta:hover {
    background: var(--aiw-bubble);
}

/* Session-limit status line */
.aiw-status {
    align-self: center;
    padding: 2px 8px;
    font-size: 0.75rem;
    color: var(--aiw-muted);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Suggestions
   -------------------------------------------------------------------------- */
.aiw-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 20px 12px;
}

.aiw-suggestion {
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--aiw-primary);
    border-radius: 10px;
    background: transparent;
    color: var(--aiw-primary);
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.aiw-suggestion:hover {
    background: var(--aiw-bubble);
}

/* --------------------------------------------------------------------------
   Typing indicator
   -------------------------------------------------------------------------- */
.aiw-typing {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 20px 10px;
    flex-shrink: 0;
}

.aiw-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aiw-muted);
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Input area
   -------------------------------------------------------------------------- */
.aiw-counter {
    padding: 2px 20px 0;
    font-size: 0.75rem;
    color: var(--aiw-muted);
    text-align: right;
    flex-shrink: 0;
}

.aiw-inputarea {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px 6px;
    border-top: 1px solid var(--aiw-border);
    flex-shrink: 0;
}

.aiw-input {
    flex: 1;
    min-height: 44px;
    max-height: 108px; /* ~4 rows, JS mirrors this cap */
    padding: 11px 12px;
    border: 1px solid var(--aiw-border);
    border-radius: 10px;
    background: var(--aiw-surface);
    color: var(--aiw-text);
    font: inherit;
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
}

.aiw-input::placeholder {
    color: var(--aiw-muted);
}

.aiw-send {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--aiw-primary);
    color: var(--aiw-on-primary);
    cursor: pointer;
}

.aiw-send:hover:not(:disabled) {
    background: var(--aiw-primary-strong);
}

.aiw-send:disabled {
    opacity: 0.55;
    cursor: default;
}

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

/* Secondary actions + privacy line */
.aiw-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 12px;
    padding: 0 12px;
    flex-shrink: 0;
}

.aiw-textbtn {
    min-height: 44px;
    padding: 8px;
    border: 0;
    background: none;
    color: var(--aiw-primary);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.aiw-privacy {
    margin: 0;
    padding: 0 20px 12px;
    font-size: 0.75rem;
    color: var(--aiw-muted);
    flex-shrink: 0;
}

.aiw-privacy a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Contact form + success view
   -------------------------------------------------------------------------- */
.aiw-contact,
.aiw-success {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px;
    overflow-y: auto;
}

.aiw-contact-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.aiw-contact-intro {
    margin: 0;
    font-size: 0.85rem;
    color: var(--aiw-muted);
}

.aiw-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8rem;
    font-weight: 700;
}

.aiw-field input,
.aiw-field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--aiw-border);
    border-radius: 10px;
    background: var(--aiw-surface);
    color: var(--aiw-text);
    font: inherit;
    line-height: 1.4;
}

.aiw-field textarea {
    resize: vertical;
}

.aiw-field [aria-invalid="true"] {
    border-color: var(--aiw-error-text);
}

.aiw-field-error {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--aiw-error-text);
}

.aiw-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.aiw-consent input {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    accent-color: var(--aiw-primary);
}

.aiw-consent label {
    font-size: 0.8rem;
    line-height: 1.45;
}

.aiw-consent a {
    color: var(--aiw-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aiw-form-error {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--aiw-error-text);
    border-radius: 10px;
    background: var(--aiw-error-bg);
    color: var(--aiw-error-text);
    font-size: 0.84rem;
}

.aiw-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aiw-btn-primary {
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--aiw-primary);
    color: var(--aiw-on-primary);
    font-weight: 700;
    cursor: pointer;
}

.aiw-btn-primary:hover:not(:disabled) {
    background: var(--aiw-primary-strong);
}

.aiw-btn-primary:disabled {
    opacity: 0.55;
    cursor: default;
}

.aiw-success p {
    margin: 0;
    font-size: 0.91rem;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Visually hidden (clip-path pattern)
   -------------------------------------------------------------------------- */
.aiw-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --------------------------------------------------------------------------
   Motion (opt-in only) and reduced-motion guard
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .aiw-panel:not([hidden]) {
        animation: aiw-in 0.18s ease-out;
    }

    .aiw-teaser:not([hidden]) {
        animation: aiw-in 0.18s ease-out;
    }

    .aiw-launcher {
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    /* Continuous soft halo — the main "I'm here / live" cue. */
    .aiw-launcher::before {
        animation: aiw-halo 2.8s ease-out infinite;
    }

    /* Periodic gentle nudge of the chat icon: signals it's interactive without
       moving the whole button (so it never conflicts with the hover scale). */
    .aiw-launcher svg {
        animation: aiw-nudge 5s ease-in-out infinite;
        transform-origin: 50% 60%;
    }

    .aiw-launcher:hover {
        transform: scale(1.08);
        box-shadow: 0 10px 28px rgba(43, 45, 38, 0.44), 0 3px 8px rgba(43, 45, 38, 0.28);
    }

    .aiw-launcher:hover::before {
        animation: none; /* calm the halo while the visitor engages */
    }

    .aiw-typing-dot {
        animation: aiw-pulse 1.1s ease-in-out infinite;
    }

    .aiw-typing-dot + .aiw-typing-dot {
        animation-delay: 0.18s;
    }

    .aiw-typing-dot + .aiw-typing-dot + .aiw-typing-dot {
        animation-delay: 0.36s;
    }
}

@keyframes aiw-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes aiw-pulse {
    0%,
    100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

@keyframes aiw-halo {
    0% {
        opacity: 0.45;
        transform: scale(1);
    }
    70%,
    100% {
        opacity: 0;
        transform: scale(1.75);
    }
}

/* Mostly at rest, with a brief friendly wobble once per cycle. */
@keyframes aiw-nudge {
    0%, 84%, 100% {
        transform: rotate(0) translateY(0);
    }
    88% {
        transform: rotate(-9deg) translateY(-1px);
    }
    92% {
        transform: rotate(7deg) translateY(-1px);
    }
    96% {
        transform: rotate(-3deg) translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aiw-panel,
    .aiw-teaser,
    .aiw-launcher,
    .aiw-launcher::before,
    .aiw-launcher svg,
    .aiw-typing-dot {
        animation: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile (≤640px): full-screen panel
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .aiw-teaser {
        right: 16px;
        bottom: 152px;
        width: min(288px, calc(100vw - 32px));
    }

    .aiw-panel {
        inset: 0;
        width: auto;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
        padding-top: env(safe-area-inset-top);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
    }
}