/* =========================================================
   JALO EXPERIENCE — ACCESSIBILITY + VOICE
   Version 1.0.0
   ========================================================= */

.jalo-a11y-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#jalo-widget button:focus-visible,
#jalo-widget input:focus-visible,
#jalo-widget a:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px #111111 !important;
}

#jalo-widget button,
#jalo-widget input {
    min-height: 44px;
}

#jalo-voice-toggle {
    min-width: 44px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    margin-right: 4px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
}

#jalo-voice-toggle:hover {
    background: rgba(255,255,255,.16);
}

#jalo-voice-toggle[aria-pressed="true"] {
    border-color: #d4af37;
    background: rgba(212,175,55,.18);
}

#jalo-messages {
    overflow-wrap: anywhere;
}

#jalo-messages a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #jalo-widget *,
    #jalo-widget *::before,
    #jalo-widget *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 600px) {
    #jalo-chat-window {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }
    #jalo-voice-toggle {
        min-width: 44px;
        width: 44px;
        height: 44px;
    }
}

@media (forced-colors: active) {
    #jalo-widget button,
    #jalo-widget input,
    #jalo-chat-window {
        forced-color-adjust: auto;
    }
}


/* =========================================================
   EXPERIENCE MANAGER THEME VARIABLES — v1.1.0
   ========================================================= */
#jalo-widget {
    --jalo-exp-chat-bg: #f7f7f7;
    --jalo-exp-header-bg: #111111;
    --jalo-exp-text: #111111;
    --jalo-exp-user-bubble: #d4af37;
    --jalo-exp-user-text: #111111;
    --jalo-exp-jalo-bubble: #ffffff;
    --jalo-exp-jalo-text: #111111;
    --jalo-exp-accent: #d4af37;
}
#jalo-chat-window { background: var(--jalo-exp-chat-bg) !important; color: var(--jalo-exp-text); }
#jalo-chat-window .jalo-header { background: var(--jalo-exp-header-bg) !important; }
#jalo-chat-window.jalo-has-cover-image .jalo-header {
    background-image: linear-gradient(rgba(0,0,0,.56),rgba(0,0,0,.56)), var(--jalo-exp-cover-image) !important;
    background-size: cover !important;
    background-position: center !important;
}
#jalo-widget .jalo-message-user .jalo-bubble {
    background: var(--jalo-exp-user-bubble) !important;
    color: var(--jalo-exp-user-text) !important;
}
#jalo-widget .jalo-message-bot .jalo-bubble {
    background: var(--jalo-exp-jalo-bubble) !important;
    color: var(--jalo-exp-jalo-text) !important;
}
#jalo-widget .jalo-message-bot {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.jalo-exp-message-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--jalo-exp-accent);
}
.jalo-exp-response-card {
    display: none;
    margin: 8px 14px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--jalo-exp-accent) 55%, transparent);
    border-radius: 14px;
    background: var(--jalo-exp-header-bg);
    color: #fff;
    align-items: center;
    gap: 10px;
}
.jalo-exp-response-card.is-visible { display: flex; }
.jalo-exp-response-card img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--jalo-exp-accent);
}
.jalo-exp-response-card strong,
.jalo-exp-response-card span { display: block; }
.jalo-exp-response-card strong { color: var(--jalo-exp-accent); }
#jalo-widget[data-jalo-theme="light"] {
    --jalo-exp-chat-bg:#ffffff;
    --jalo-exp-header-bg:#f5f5f5;
    --jalo-exp-text:#111111;
    --jalo-exp-jalo-bubble:#f2f2f2;
}
#jalo-widget[data-jalo-theme="light"] .jalo-header,
#jalo-widget[data-jalo-theme="light"] .jalo-header * { color:#111 !important; }
#jalo-widget[data-jalo-theme="midnight"] {
    --jalo-exp-chat-bg:#111111;
    --jalo-exp-header-bg:#050505;
    --jalo-exp-text:#ffffff;
    --jalo-exp-jalo-bubble:#242424;
    --jalo-exp-jalo-text:#ffffff;
}