/* Astrolytix web chat widget (chat.js). Self-contained: app.html does not
   load styles.css, so every site variable has a fallback. */
.axchat {
    --axc-gold: var(--accent-gold, #d4af37);
    --axc-navy: var(--primary-color, #0a1630);
    --axc-navy-2: var(--secondary-color, #16213e);
    --axc-text: var(--text-light, #f5f5f5);
    --axc-muted: var(--text-muted, #c6d4ea);
    --axc-gap: 16px;
    font-family: 'Raleway', sans-serif;
    color: var(--axc-text);
}

.axchat-btn {
    position: fixed;
    right: var(--axc-gap);
    bottom: calc(var(--axchat-bottom-offset, 0px) + var(--axc-gap) + env(safe-area-inset-bottom, 0px));
    z-index: 950; /* above #stickybar (900), below the coming-soon overlay */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px 11px 14px;
    border: 1px solid var(--axc-gold);
    border-radius: 999px;
    background: rgba(10, 22, 52, 0.94);
    color: var(--axc-gold);
    font: 600 0.95rem/1.2 'Raleway', sans-serif;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 14px rgba(212, 175, 55, 0.25);
    backdrop-filter: blur(6px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.axchat-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.4); }
.axchat-btn:focus-visible { outline: 2px solid var(--axc-gold); outline-offset: 3px; }
.axchat-btn svg { width: 22px; height: 22px; flex: none; }

.axchat-badge {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--accent-color, #e94560);
    color: #fff;
    font: 700 0.75rem/20px 'Raleway', sans-serif;
    text-align: center;
    box-shadow: 0 0 0 2px var(--axc-navy);
}
.axchat-badge[hidden] { display: none; }

.axchat-panel {
    position: fixed;
    right: var(--axc-gap);
    bottom: calc(var(--axchat-bottom-offset, 0px) + var(--axc-gap) + 60px + env(safe-area-inset-bottom, 0px));
    z-index: 1100; /* above the navbar (1000/1001): full screen on phones */
    width: min(380px, calc(100vw - 2 * var(--axc-gap)));
    height: min(560px, calc(100vh - var(--axchat-bottom-offset, 0px) - 110px));
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #16213e, #0a1630);
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(212, 175, 55, 0.15);
    overflow: hidden;
    animation: axchat-in 0.22s ease-out;
}
.axchat-panel[hidden] { display: none; }

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

.axchat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}
.axchat-title {
    margin: 0;
    font: 600 1.05rem/1.3 'Cinzel', serif;
    color: var(--axc-gold);
}
.axchat-close {
    flex: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--axc-muted);
    cursor: pointer;
}
.axchat-close:hover { color: var(--axc-gold); background: rgba(212, 175, 55, 0.1); }
.axchat-close:focus-visible { outline: 2px solid var(--axc-gold); outline-offset: 1px; }
.axchat-close svg { width: 20px; height: 20px; }

.axchat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    overscroll-behavior: contain;
}
.axchat-list:focus-visible { outline: 2px solid rgba(212, 175, 55, 0.6); outline-offset: -2px; }

.axchat-hint {
    margin: auto 0;
    color: var(--axc-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: center;
}

.axchat-msg {
    max-width: 85%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 0.95rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* Questions on the right, answers on the left (mirrored for RTL). */
.axchat-msg-in {
    align-self: flex-end;
    background: rgba(212, 175, 55, 0.18);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-end-end-radius: 4px;
}
.axchat-msg-out {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(198, 212, 234, 0.25);
    border-end-start-radius: 4px;
}

.axchat-status,
.axchat-error {
    margin: 0;
    padding: 8px 16px;
    font-size: 0.85rem;
    line-height: 1.4;
}
.axchat-status { color: var(--axc-muted); border-top: 1px solid rgba(198, 212, 234, 0.12); }
.axchat-status[hidden], .axchat-error[hidden] { display: none; }
.axchat-error { color: #ffb4b4; }

.axchat-form {
    position: relative;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
}
/* Honeypot: off-screen rather than display:none (bots skip hidden inputs). */
.axchat-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}
.axchat-input {
    display: block;
    width: 100%;
    min-height: 52px;
    max-height: 140px;
    resize: vertical;
    padding: 9px 11px;
    border: 1px solid rgba(198, 212, 234, 0.3);
    border-radius: 10px;
    background: rgba(4, 9, 22, 0.55);
    color: var(--axc-text);
    font: 400 16px/1.4 'Raleway', sans-serif; /* 16px: no iOS zoom on focus */
    box-sizing: border-box;
}
.axchat-input::placeholder { color: rgba(198, 212, 234, 0.6); }
.axchat-input:focus { outline: none; border-color: var(--axc-gold); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2); }

.axchat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}
.axchat-counter { font-size: 0.8rem; color: var(--axc-muted); font-variant-numeric: tabular-nums; }
.axchat-counter-full { color: #ffb4b4; }
.axchat-send {
    padding: 9px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--axc-gold);
    color: var(--axc-navy);
    font: 600 0.95rem/1.2 'Raleway', sans-serif;
    cursor: pointer;
}
.axchat-send:disabled { opacity: 0.45; cursor: default; }
.axchat-send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Phone: the chat window takes the whole screen. */
@media (max-width: 600px) {
    .axchat-panel {
        inset: 0;
        width: 100%;
        height: 100%;
        height: 100dvh;
        border: 0;
        border-radius: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .axchat-open .axchat-btn { display: none; }
    html.axchat-lock, html.axchat-lock body { overflow: hidden; }
}

/* Must stay after the rules it overrides (same specificity). */
@media (prefers-reduced-motion: reduce) {
    .axchat-btn { transition: none; }
    .axchat-btn:hover { transform: none; }
    .axchat-panel { animation: none; }
}