/* chat-suggestions.css — the "?" ideas button in the chat bar + its popup of
   category-aware questions to ask your DexHero. */

/* The chat bar is the positioning context for the floating "?" that sits
   just above its top-right corner. Desktop-only: on mobile the bar is
   position:fixed (shell.css + the visual-viewport float), which is already a
   containing block for the "?" — an unscoped `relative` here would defeat
   `fixed` and dump the pinned bar off-screen below the page. */
@media (min-width: 641px) {
    .lobby-stage__chat { position: relative; }
}

/* The "?" ideas button — floats OUTSIDE the bar, just above its top-right
   corner. No box: just the bare glyph, so it reads as a light hint rather
   than another control crammed into the bar. */
.lobby-stage__chat-sug {
    all: unset;
    position: absolute;
    right: 2px;
    bottom: calc(100% + 6px);   /* clear of the bar's top edge */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    color: var(--acc-cyan, #29d3e6);
    opacity: 0.82;
    cursor: pointer;
    transition: color var(--dur-sm), opacity var(--dur-sm), filter var(--dur-sm);
}
.lobby-stage__chat-sug svg { width: 18px; height: 18px; }
.lobby-stage__chat-sug:hover {
    color: #b6ecff;
    opacity: 1;
}
.lobby-stage__chat-sug[aria-expanded="true"] {
    color: #d8f6ff;
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.5));
}

/* Mobile (≤640px): the Body-slots button lives at the chat bar's top-RIGHT
   corner (.lobby-stage__equip-slots in shell.css), which would hide the "?"
   behind it. Flip the hint to the bar's top-LEFT corner instead — that corner
   is clear (the left slot column sits up near the brand title, not here). The
   popup itself is centred over the bar by position() in JS, so it's unaffected. */
@media (max-width: 640px) {
    .lobby-stage__chat-sug {
        right: auto;
        left: 2px;
    }
}

/* Popup — floats above the chat bar, dark glass (mirrors the other popovers). */
.chat-sug-pop {
    position: fixed;
    z-index: 1250;
    width: min(340px, calc(100vw - 20px));
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px 12px 10px;
    border-radius: 14px;
    border: 1px solid rgba(110, 231, 255, 0.24);
    background: linear-gradient(180deg, rgba(12, 16, 26, 0.98), rgba(7, 10, 18, 0.99));
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 24px rgba(6, 182, 212, 0.12);
    color: var(--ink-0, #eaf2f6);
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transform-origin: bottom center;
    transition: opacity 130ms ease, transform 130ms ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(6, 182, 212, 0.25) transparent;
}
.chat-sug-pop[data-open="1"] { opacity: 1; transform: translateY(0) scale(1); }
.chat-sug-pop::-webkit-scrollbar { width: 6px; }
.chat-sug-pop::-webkit-scrollbar-thumb { background: rgba(6, 182, 212, 0.25); border-radius: 3px; }

.chat-sug-pop__head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.chat-sug-pop__title { flex: 1; font-weight: 800; font-size: 12.5px; letter-spacing: 0.02em; }
.chat-sug-pop__cat {
    font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
    color: var(--acc-cyan, #29d3e6); padding: 2px 8px; border-radius: 999px;
    border: 1px solid rgba(6, 182, 212, 0.35); background: rgba(6, 182, 212, 0.08);
}

.chat-sug-pop__list { display: flex; flex-direction: column; gap: 5px; }
.chat-sug-pop__q {
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--ink-1, #c9d2dc);
    font-size: 12.5px; line-height: 1.35; padding: 8px 11px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 90ms ease;
}
.chat-sug-pop__q:hover {
    background: rgba(6, 182, 212, 0.10);
    border-color: rgba(6, 182, 212, 0.4);
    color: #fff;
}
.chat-sug-pop__q:active { transform: translateY(1px); }