/* ══════════════════════════════════════════════════════════════
   css/ai-assistant.css — OnlineRealGames AI Assistant panel
   Markup: header.php (#ora-panel)   Behaviour: js/ai-assistant.js
   Uses the site tokens from main.css (--primary, --ff-display, …)
   with fallbacks so the panel renders even if those change.
   ══════════════════════════════════════════════════════════════ */

.ora {
    --ora-red:      var(--primary, #e62327);
    --ora-red-dk:   var(--primary-dark, #b51418);
    --ora-blue:     var(--secondary, #1d8ef0);
    --ora-text:     var(--text, #1a1f2e);
    --ora-muted:    var(--text-muted, #6b7280);
    --ora-line:     #eef0f3;
    --ora-soft:     #f6f7f9;
    --ora-tint:     #fff4f4;
    --ora-radius:   var(--radius-lg, 18px);
    --ora-shadow:   0 24px 60px rgba(26, 31, 46, .18), 0 4px 14px rgba(180, 30, 35, .08);

    position: fixed;
    z-index: 100000;
    top: var(--ora-top, 84px);
    right: 20px;
    width: 400px;
    max-width: calc(100vw - 40px);
    height: min(660px, calc(100vh - var(--ora-top, 84px) - 20px));
    min-height: 360px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    color: var(--ora-text);
    border: 1px solid rgba(26, 31, 46, .06);
    border-radius: var(--ora-radius);
    box-shadow: var(--ora-shadow);
    font: 400 14px/1.5 var(--ff-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
    box-sizing: border-box;
}
.ora *, .ora *::before, .ora *::after { box-sizing: border-box; }
.ora[hidden] { display: none; }
.ora.is-open { opacity: 1; transform: none; pointer-events: auto; }

/* ── Header ───────────────────────────────────────────────────── */
.ora__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px 12px 16px;
    border-bottom: 1px solid var(--ora-line);
    flex: 0 0 auto;
}
.ora__brand { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.ora__avatar {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ora-red), var(--ora-red-dk));
    color: #fff;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(230, 35, 39, .28);
}
.ora__title {
    margin: 0;
    font: 700 15px/1.2 var(--ff-display, 'Poppins', system-ui, sans-serif);
    color: var(--ora-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ora__sub {
    margin: 2px 0 0;
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--ora-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ora__online { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; }
.ora__icon-btn {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0; border-radius: 10px;
    background: transparent;
    color: var(--ora-muted);
    font-size: 16px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ora__icon-btn:hover { background: var(--ora-soft); color: var(--ora-text); }
.ora__icon-btn:focus-visible,
.ora button:focus-visible,
.ora a:focus-visible { outline: 2px solid var(--ora-blue); outline-offset: 2px; }

/* ── Conversation ─────────────────────────────────────────────── */
.ora__log {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}
.ora__log::-webkit-scrollbar { width: 6px; }
.ora__log::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .12); border-radius: 3px; }

.ora-msg {
    max-width: 88%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    animation: ora-in .22s ease both;
}
.ora-msg--user {
    align-self: flex-end;
    background: var(--ora-red);
    color: #fff;
    border-bottom-right-radius: 6px;
}
.ora-msg--bot {
    align-self: flex-start;
    background: var(--ora-soft);
    color: var(--ora-text);
    border-bottom-left-radius: 6px;
}
.ora-msg--error { background: #fff4f4; color: #9b1c1f; border: 1px solid #ffd9da; }
.ora-msg--voice::before {
    content: '\f130';                       /* fa-microphone */
    font: 900 11px/1 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    margin-right: 6px;
    opacity: .8;
}
.ora-followup { align-self: flex-start; font-size: 13px; color: var(--ora-muted); padding: 2px 4px 0; animation: ora-in .22s ease both; }

/* Welcome */
.ora-welcome { display: flex; flex-direction: column; gap: 12px; animation: ora-in .25s ease both; }
.ora-welcome__card {
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--ora-tint), #fff);
    border: 1px solid #ffe3e4;
}
.ora-welcome__hi { margin: 0 0 4px; font: 700 16px/1.3 var(--ff-display, 'Poppins', sans-serif); color: var(--ora-text); }
.ora-welcome__card p { margin: 0; color: #3d4452; font-size: 14px; }
.ora-welcome__card p + p { margin-top: 6px; }
.ora-welcome__ask { font-weight: 600; color: var(--ora-text) !important; }
.ora-welcome__tip { font-size: 12px; color: var(--ora-muted); text-align: center; margin: 0; }
.ora-welcome__tip i { color: var(--ora-red); }

/* Chips */
.ora-chips { display: flex; flex-wrap: wrap; gap: 8px; animation: ora-in .25s ease both; }
.ora-chips--grid { display: grid; grid-template-columns: 1fr 1fr; }
.ora-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid #e7e9ee;
    border-radius: var(--radius-pill, 999px);
    background: #fff;
    color: var(--ora-text);
    font: 600 13px/1.2 var(--ff-body, 'Inter', sans-serif);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ora-chips--grid .ora-chip { border-radius: 12px; min-height: 44px; padding: 10px 12px; }
.ora-chip:hover { border-color: #ffc2c4; background: var(--ora-tint); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(230, 35, 39, .08); }
.ora-chip:active { transform: none; }

/* Typing / thinking */
.ora-typing {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--ora-soft);
    border-radius: 16px 16px 16px 6px;
    color: var(--ora-muted);
    font-size: 13px;
    animation: ora-in .2s ease both;
}
.ora-typing__dots { display: inline-flex; gap: 4px; }
.ora-typing__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ora-red); opacity: .35; animation: ora-dot 1.1s infinite ease-in-out; }
.ora-typing__dots span:nth-child(2) { animation-delay: .15s; }
.ora-typing__dots span:nth-child(3) { animation-delay: .3s; }

/* ── Game cards ───────────────────────────────────────────────── */
.ora-games { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ora-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--ora-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(26, 31, 46, .04);
    animation: ora-in .28s ease both;
    transition: border-color .15s, box-shadow .15s;
}
.ora-card:hover { border-color: #ffd0d2; box-shadow: 0 6px 18px rgba(180, 30, 35, .08); }
.ora-card__media {
    display: block;
    width: 76px; height: 76px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ora-soft);
}
.ora-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ora-card__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ora-card__title {
    margin: 0;
    font: 700 14px/1.25 var(--ff-display, 'Poppins', sans-serif);
    color: var(--ora-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ora-card__meta { font-size: 12px; color: var(--ora-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ora-card__meta b { color: var(--ora-red); font-weight: 600; }
.ora-card__desc {
    margin: 2px 0 6px;
    font-size: 12.5px; line-height: 1.4; color: #4b5261;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ora-card__play {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px;
    padding: 0 14px;
    border-radius: var(--radius-pill, 999px);
    background: var(--ora-red);
    color: #fff !important;
    font: 700 12px/1 var(--ff-display, 'Poppins', sans-serif);
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(230, 35, 39, .25);
    transition: background .15s, transform .15s;
    margin-top: auto;
}
.ora-card__play:hover { background: var(--ora-red-dk); transform: translateY(-1px); }
.ora-card__play i { font-size: 10px; }

/* Featured (single game) card */
.ora-card--feature { grid-template-columns: 1fr; padding: 0; overflow: hidden; }
.ora-card--feature .ora-card__media { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
.ora-card--feature .ora-card__body { padding: 12px 14px 14px; gap: 4px; }
.ora-card--feature .ora-card__title { font-size: 16px; white-space: normal; }
.ora-card--feature .ora-card__desc { -webkit-line-clamp: 5; font-size: 13px; }
.ora-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 4px; }
.ora-card__tag { padding: 2px 9px; border-radius: 999px; background: var(--ora-tint); color: var(--ora-red-dk); font-size: 11.5px; font-weight: 600; }
.ora-card__tag--plays { background: #eef6ff; color: #1565c0; }
.ora-card__how { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--ora-soft); font-size: 12.5px; color: #4b5261; }
.ora-card__how strong { color: var(--ora-text); }
.ora-card--feature .ora-card__play { height: 38px; width: 100%; justify-content: center; font-size: 13px; }
.ora-related-label { font-size: 12px; font-weight: 600; color: var(--ora-muted); margin: 4px 2px 0; text-transform: uppercase; letter-spacing: .04em; }

/* ── Voice status bar ─────────────────────────────────────────── */
.ora__voice {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    margin: 0 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--ora-tint);
    border: 1px solid #ffe0e1;
    animation: ora-in .2s ease both;
}
.ora__voice[hidden] { display: none; }
.ora__voice-orb {
    position: relative;
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ora-red);
    color: #fff;
    font-size: 15px;
}
.ora__voice-orb::before, .ora__voice-orb::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ora-red);
    opacity: 0;
}
.ora__voice[data-state="listening"] .ora__voice-orb::before { animation: ora-pulse 1.5s ease-out infinite; }
.ora__voice[data-state="listening"] .ora__voice-orb::after  { animation: ora-pulse 1.5s ease-out .5s infinite; }
.ora__voice[data-state="thinking"] .ora__voice-orb { background: var(--ora-blue); }
.ora__voice-text { flex: 1; min-width: 0; }
.ora__voice-label { display: block; font: 700 13px/1.2 var(--ff-display, 'Poppins', sans-serif); color: var(--ora-text); }
.ora__voice-heard { display: block; font-size: 12px; color: var(--ora-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ora__voice-bars { display: none; align-items: center; gap: 3px; height: 16px; }
.ora__voice[data-state="speaking"] .ora__voice-bars,
.ora__voice[data-state="greeting"] .ora__voice-bars { display: inline-flex; }
.ora__voice-bars span { width: 3px; height: 100%; border-radius: 2px; background: var(--ora-red); animation: ora-bar .9s ease-in-out infinite; }
.ora__voice-bars span:nth-child(2) { animation-delay: .15s; }
.ora__voice-bars span:nth-child(3) { animation-delay: .3s; }
.ora__voice-bars span:nth-child(4) { animation-delay: .45s; }
.ora__voice-stop {
    flex: 0 0 auto;
    height: 32px; padding: 0 12px;
    border: 1px solid #ffc9cb; border-radius: 999px;
    background: #fff; color: var(--ora-red-dk);
    font: 600 12px/1 var(--ff-body, 'Inter', sans-serif);
    cursor: pointer;
}
.ora__voice-stop:hover { background: var(--ora-red); color: #fff; border-color: var(--ora-red); }

/* ── Composer ─────────────────────────────────────────────────── */
.ora__composer {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    margin: 10px 12px 12px;
    padding: 5px 5px 5px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.ora__composer:focus-within { border-color: var(--ora-red); box-shadow: 0 0 0 4px rgba(230, 35, 39, .10); }
.ora__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    border: 0; outline: 0; background: transparent;
    color: var(--ora-text);
    font: 400 14px/1 var(--ff-body, 'Inter', sans-serif);
}
.ora__input::placeholder { color: #9aa0ab; }
.ora__mic, .ora__send {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    transition: background .15s, color .15s, transform .15s;
}
.ora__mic { background: var(--ora-tint); color: var(--ora-red); }
.ora__mic:hover { background: #ffe3e4; }
.ora__mic.is-active { background: var(--ora-red); color: #fff; animation: ora-glow 1.5s ease-out infinite; }
.ora__send { background: var(--ora-red); color: #fff; }
.ora__send:hover { background: var(--ora-red-dk); }
.ora__send:disabled { background: #f1b6b8; cursor: default; }
.ora__send:not(:disabled):active, .ora__mic:active { transform: scale(.94); }

/* ── Floating button (bottom-right corner of every page) ─────────
   header.php #ora-open. Robot icon; turns into ✕ while the panel is
   open. No status dot. Sits under the panel/backdrop layers. */
.ai-fab {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 99990;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    padding: 0; border: 0; border-radius: 50%;
    background: linear-gradient(135deg, #ff4f64 0%, var(--primary, #e62327) 100%);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 10px 26px -6px rgba(230, 35, 39, .6), 0 3px 8px rgba(26, 31, 46, .18);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ai-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px -6px rgba(230, 35, 39, .7), 0 4px 10px rgba(26, 31, 46, .2); }
.ai-fab:active { transform: scale(.96); }
.ai-fab:focus-visible { outline: 3px solid #111827; outline-offset: 3px; }
.ai-fab__icon { grid-area: 1 / 1; transition: opacity .15s ease, transform .2s ease; }
.ai-fab__icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.ai-fab[aria-expanded="true"] .ai-fab__icon--open  { opacity: 0; transform: rotate(90deg) scale(.6); }
.ai-fab[aria-expanded="true"] .ai-fab__icon--close { opacity: 1; transform: none; }
.ai-fab[aria-expanded="true"] { box-shadow: 0 0 0 4px rgba(230, 35, 39, .18), 0 10px 26px -6px rgba(230, 35, 39, .6); }
body.faux-fs .ai-fab { display: none !important; }
@media (max-width: 640px) {
    .ai-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; font-size: 20px; }
}

/* Desktop / tablet: the panel opens just above the button, anchored to
   the bottom-right corner (phones keep the near-full-screen sheet below). */
@media (min-width: 641px) {
    .ora {
        top: auto;
        bottom: calc(90px + env(safe-area-inset-bottom, 0px));
        height: min(620px, calc(100vh - 180px));
        transform: translateY(10px) scale(.98);
        transform-origin: bottom right;
    }
    .ora.is-open { transform: none; }
}

/* ── Backdrop (mobile only) ───────────────────────────────────── */
.ora-backdrop {
    position: fixed; inset: 0;
    z-index: 99999;
    background: rgba(17, 20, 28, .38);
    opacity: 0;
    transition: opacity .2s ease;
    display: none;
}
.ora-backdrop.is-open { opacity: 1; }

/* Hidden while a game runs in faux-fullscreen (same as the old drawer). */
body.faux-fs .ora, body.faux-fs .ora-backdrop { display: none !important; }

/* ── Tablet ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .ora { right: 12px; max-width: calc(100vw - 24px); }
}

/* ── Phones: nearly full-screen sheet that follows the visual
      viewport, so the on-screen keyboard never covers the input. ── */
@media (max-width: 640px) {
    .ora {
        top: calc(var(--ora-vv-top, 0px) + 8px);
        left: 8px; right: 8px;
        width: auto; max-width: none;
        height: calc(var(--ora-vv-h, 100dvh) - 16px);
        min-height: 0;
        border-radius: 20px;
        transform: translateY(16px);
        transform-origin: bottom center;
    }
    .ora.is-open { transform: none; }
    .ora-backdrop { display: block; }
    .ora-backdrop[hidden] { display: none; }
    .ora__log { padding: 14px 12px 8px; }
    .ora-msg { max-width: 92%; }
    /* 16px stops iOS Safari from zooming into the field. */
    .ora__input { font-size: 16px; }
    .ora__composer { margin: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .ora__voice { margin: 0 10px; }
}
@media (max-width: 360px) {
    .ora__head { padding: 12px 6px 10px 12px; gap: 4px; }
    .ora__brand { gap: 8px; }
    .ora__avatar { width: 32px; height: 32px; font-size: 14px; border-radius: 10px; }
    .ora__title { font-size: 14px; }
    .ora__sub { font-size: 11.5px; }
    .ora__icon-btn { width: 32px; height: 32px; }
    .ora-card { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
    .ora-card__media { width: 64px; height: 64px; }
    .ora-chips--grid .ora-chip { padding: 9px 10px; font-size: 12.5px; }
    .ora__composer { padding-left: 12px; }
    .ora__mic, .ora__send { width: 36px; height: 36px; }
}

@keyframes ora-in    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ora-dot   { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes ora-pulse { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes ora-glow  { 0% { box-shadow: 0 0 0 0 rgba(230, 35, 39, .45); } 100% { box-shadow: 0 0 0 10px rgba(230, 35, 39, 0); } }
@keyframes ora-bar   { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
    .ora, .ora * { animation: none !important; transition: none !important; }
}


/* Card descriptions: whole sentences (ai_trim → sentence_excerpt), so no
   line clamp / trailing "…". */
.ora-card__desc,
.ora-card--feature .ora-card__desc {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}

/* Answers to general questions: keep paragraphs / bullet lines. */
.ora-msg--bot { white-space: pre-wrap; overflow-wrap: anywhere; }

/* "Explore games" — every category as a link */
.ora-links {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 4px 0 10px;
}
.ora-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 12px;
    border-radius: 999px;
    font: 600 12.5px/1.2 system-ui, sans-serif;
    color: #111827;
    background: #fff;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, transform .15s;
}
.ora-link:hover { background: #fff1f2; border-color: #ff4f64; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .ora-link { transition: none; } .ora-link:hover { transform: none; } }