/* Path: assets/css/app-shell.css
   Abqary Live application-style responsive UI layer.
   This file is intentionally additive: it leaves room, WebRTC, gift and PWA logic untouched. */
:root {
    --app-glass: rgba(25, 24, 39, .82);
    --app-card: linear-gradient(145deg, rgba(30, 29, 47, .96), rgba(20, 20, 32, .96));
    --app-card-border: rgba(255, 255, 255, .085);
    --app-elevated: #222138;
    --app-muted: #a7a4bd;
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.app-shell {
    min-height: 100vh;
    overflow-x: clip;
    background:
        radial-gradient(ellipse at 8% -10%, color-mix(in srgb, var(--purple) 17%, transparent), transparent 35rem),
        radial-gradient(ellipse at 105% 30%, color-mix(in srgb, var(--pink) 9%, transparent), transparent 33rem),
        var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.app-shell main { min-height: 55vh; }
body.app-shell a { text-decoration-thickness: .08em; text-underline-offset: .2em; }
body.app-shell :where(button, .button, input, select, textarea) { transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
body.app-shell :where(input, select, textarea) {
    border-radius: 14px;
    border-color: rgba(255,255,255,.12);
}
body.app-shell :where(input, select, textarea):focus {
    outline: none;
    border-color: color-mix(in srgb, var(--purple) 75%, white 25%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 18%, transparent);
}

/* Native-app-like top bar */
body.app-shell .site-header {
    position: sticky;
    top: 0;
    min-height: 76px;
    height: auto;
    background: rgba(16, 16, 27, .86);
    border-bottom: 1px solid rgba(255,255,255,.075);
    box-shadow: 0 12px 36px rgba(0,0,0,.13);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}
body.app-shell .header-inner { min-height: 76px; gap: clamp(12px, 1.6vw, 24px); }
body.app-shell .brand { gap: 10px; }
body.app-shell .brand-mark {
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--purple), var(--pink));
    box-shadow: 0 7px 25px color-mix(in srgb, var(--purple) 27%, transparent);
}
body.app-shell .brand-copy strong { letter-spacing: -.35px; }
body.app-shell .main-nav {
    flex: 1 1 auto;
    min-width: 0;
    gap: clamp(9px, 1.15vw, 17px);
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
body.app-shell .main-nav::-webkit-scrollbar { display: none; }
body.app-shell .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 2px;
    font-weight: 650;
    text-decoration: none;
}
body.app-shell .nav-link:hover,
body.app-shell .nav-link:focus-visible { color: #fff; }
body.app-shell .header-actions { gap: 7px; }
body.app-shell .user-chip,
body.app-shell .coin-chip,
body.app-shell .sound-settings > summary {
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
    border-radius: 13px;
}
body.app-shell .user-chip { padding: 5px 10px 5px 6px; }
body.app-shell .coin-chip { min-height: 38px; padding-inline: 10px; }
body.app-shell .sound-settings > summary { padding: 8px 10px; }
body.app-shell .sound-settings-popover { border: 1px solid var(--app-card-border); border-radius: 18px; background: #191827; box-shadow: 0 22px 65px rgba(0,0,0,.4); }
body.app-shell .pwa-install-button:not([hidden]) { white-space: nowrap; }

/* Shared app-like cards, panels and touch targets */
body.app-shell .button {
    min-height: 42px;
    border-radius: 14px;
    padding: 10px 16px;
    font-weight: 800;
}
body.app-shell .button-primary {
    background: linear-gradient(120deg, var(--purple), color-mix(in srgb, var(--purple) 34%, var(--pink)) 72%, var(--pink));
    box-shadow: 0 9px 24px color-mix(in srgb, var(--purple) 20%, transparent);
}
body.app-shell .button-primary:hover { box-shadow: 0 12px 28px color-mix(in srgb, var(--purple) 30%, transparent); }
body.app-shell .button-outline { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.13); }
body.app-shell .button-outline:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.23); }
body.app-shell .button-small { min-height: 36px; padding: 7px 11px; border-radius: 11px; }
body.app-shell :where(.room-card, .gift-card, .svip-card, .profile-card, .panel, .auth-panel, .admin-panel, .admin-stat-card, .admin-shortcuts > a, .message-card, .notification-card, .wallet-card, .settings-card) {
    border-radius: 22px;
    border-color: var(--app-card-border);
    box-shadow: 0 14px 36px rgba(0,0,0,.12);
}
body.app-shell :where(.room-card, .gift-card, .svip-card, .panel, .auth-panel) {
    background: var(--app-card);
}
body.app-shell :where(.room-card, .gift-card, .svip-card, .admin-stat-card, .admin-shortcuts > a) {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.app-shell :where(.room-card, .gift-card, .svip-card, .admin-stat-card, .admin-shortcuts > a):hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--purple) 38%, rgba(255,255,255,.1));
    box-shadow: 0 20px 44px rgba(0,0,0,.19);
}
body.app-shell :where(.section-heading, .panel-heading, .admin-panel-heading) { gap: 14px; }
body.app-shell :where(.section-heading h2, .panel-heading h2) { letter-spacing: -.45px; }
body.app-shell .page-hero { border-bottom-color: var(--app-card-border); }
body.app-shell .flash { border-radius: 15px; }
body.app-shell .site-footer { border-top-color: rgba(255,255,255,.07); background: rgba(9,9,16,.55); }
body.app-shell .footer-inner { gap: 20px; }

/* Admin dashboard gets a product-console look rather than a plain web table look. */
body.app-admin .admin-page { padding-top: 38px; padding-bottom: 60px; }
body.app-admin .admin-title-row { align-items: center; margin-bottom: 24px; }
body.app-admin .admin-title-row h1 { font-size: clamp(27px, 3.1vw, 38px); letter-spacing: -.7px; }
body.app-admin .admin-status,
body.app-admin .admin-count { border-radius: 999px; padding: 8px 13px; }
body.app-admin .admin-stat-grid { gap: 14px; }
body.app-admin .admin-stat-card {
    min-width: 0;
    padding: 20px;
    background: var(--app-card);
    border: 1px solid var(--app-card-border);
}
body.app-admin .admin-stat-card > strong { overflow-wrap: anywhere; }
body.app-admin .admin-shortcuts > a {
    min-width: 0;
    background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    border-color: var(--app-card-border);
    border-radius: 19px;
}
body.app-admin .admin-panel { background: rgba(24,24,38,.86); }
body.app-admin .admin-table-wrap { border-radius: 15px; }
body.app-admin .admin-table th { position: sticky; top: 0; }
body.app-admin .admin-form-grid input,
body.app-admin .admin-form-grid select,
body.app-admin .admin-inline-form select,
body.app-admin .admin-search input,
body.app-admin .admin-adjust-form input,
body.app-admin .admin-adjust-form select { background: #11111c; }

/* Mobile layout: hide the crowded text menu and put the main destinations in a fixed tab bar. */
.app-bottom-nav { display: none; }
@media (max-width: 1050px) {
    body.app-shell .header-inner { gap: 12px; }
    body.app-shell .main-nav { gap: 10px; }
    body.app-shell .nav-link { font-size: 12px; }
    body.app-shell .header-actions { gap: 5px; }
    body.app-shell .user-chip > span:last-child { display: none; }
}
@media (max-width: 760px) {
    body.app-shell { padding-bottom: 0; }
    body.app-shell main { padding-bottom: 15px; }
    body.app-shell .site-header { min-height: 64px; }
    body.app-shell .header-inner {
        width: calc(100% - 24px);
        min-height: 64px;
        padding-block: 8px;
        flex-wrap: nowrap;
        gap: 8px;
    }
    body.app-shell .brand { min-width: 0; gap: 8px; }
    body.app-shell .brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 13px; font-size: 20px; }
    body.app-shell .brand img { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
    body.app-shell .brand-copy { min-width: 0; }
    body.app-shell .brand-copy strong { font-size: 14px; max-width: 35vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.app-shell .brand-copy small { font-size: 9px; margin-top: 2px; }
    body.app-shell .main-nav { display: none !important; }
    body.app-shell .header-actions { margin-inline-start: auto; gap: 5px; flex: 0 0 auto; }
    body.app-shell .header-actions .inline-form { display: none; }
    body.app-shell .header-actions .user-chip { padding: 3px; background: transparent; border: 0; }
    body.app-shell .header-actions .avatar { width: 34px; height: 34px; }
    body.app-shell .header-actions .coin-chip { display: none; }
    body.app-shell .header-actions .button-small { min-height: 34px; padding: 6px 9px; font-size: 10px; }
    body.app-shell .sound-settings > summary { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; font-size: 0; }
    body.app-shell .sound-settings > summary span:first-child { font-size: 18px; }
    body.app-shell .pwa-install-button:not([hidden]) { max-width: 115px; overflow: hidden; text-overflow: ellipsis; }
    body.app-shell .header-actions .button-text { padding-inline: 7px; }

    body.app-shell .wrap { width: calc(100% - 24px); }
    body.app-shell .section { padding-block: 32px; }
    body.app-shell .section-heading { align-items: flex-start; }
    body.app-shell .section-heading h2,
    body.app-shell .panel-heading h2 { font-size: 21px; }
    body.app-shell :where(.room-card, .gift-card, .svip-card, .panel, .auth-panel, .admin-panel) { border-radius: 19px; }
    body.app-shell .site-footer { padding-bottom: calc(10px + var(--app-safe-bottom)); }
    body.app-shell .footer-inner { flex-wrap: wrap; padding-block: 18px; gap: 10px; }
    body.app-shell .footer-inner > p { flex-basis: 100%; margin: 0; }
    body.app-shell .footer-copy { margin-inline-start: auto; }

    .app-bottom-nav {
        position: fixed;
        z-index: 1000;
        inset-inline: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        padding: 7px 8px calc(7px + var(--app-safe-bottom));
        background: rgba(18, 17, 29, .94);
        border-top: 1px solid rgba(255,255,255,.1);
        box-shadow: 0 -12px 35px rgba(0,0,0,.25);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        backdrop-filter: blur(24px) saturate(150%);
    }
    .app-nav-item {
        min-width: 0;
        min-height: 52px;
        padding: 5px 2px 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border-radius: 14px;
        color: #9b98b2;
        text-decoration: none !important;
        line-height: 1.2;
        -webkit-tap-highlight-color: transparent;
    }
    .app-nav-icon { font-size: 20px; line-height: 1.15; font-weight: 800; transition: transform .18s ease; }
    .app-nav-label { max-width: 100%; font-size: 9px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-nav-item.is-active {
        color: #fff;
        background: linear-gradient(145deg, color-mix(in srgb, var(--purple) 26%, transparent), color-mix(in srgb, var(--pink) 11%, transparent));
    }
    .app-nav-item.is-active .app-nav-icon { color: color-mix(in srgb, var(--gold) 72%, white); transform: translateY(-1px); }
    body.app-shell:not(.app-live-room) { padding-bottom: calc(70px + var(--app-safe-bottom)); }
    body.app-shell:not(.app-live-room) .site-footer { margin-bottom: calc(66px + var(--app-safe-bottom)); }

    /* Room calls intentionally keep their own full-height controls and no bottom tabs. */
    body.app-live-room { padding-bottom: 0; }
    body.app-live-room .site-header { position: relative; }

    body.app-admin .admin-page { padding-top: 25px; padding-bottom: 22px; }
    body.app-admin .admin-title-row { align-items: flex-start; }
    body.app-admin .admin-stat-grid { gap: 9px; margin: 20px 0; }
    body.app-admin .admin-stat-card { padding: 14px; border-radius: 17px; }
    body.app-admin .admin-stat-icon { width: 35px; height: 35px; border-radius: 12px; }
    body.app-admin .admin-stat-label { line-height: 1.45; }
    body.app-admin .admin-stat-card > strong { font-size: 23px; }
    body.app-admin .admin-shortcuts { gap: 9px; margin: 19px 0; }
    body.app-admin .admin-shortcuts > a { min-height: 112px; padding: 13px; }
    body.app-admin .admin-shortcuts strong { line-height: 1.5; }
    body.app-admin .admin-shortcuts small { line-height: 1.5; }
    body.app-admin .admin-table { font-size: 11px; }
}
@media (max-width: 390px) {
    body.app-shell .header-actions { gap: 3px; }
    body.app-shell .pwa-install-button:not([hidden]) { max-width: 88px; }
    body.app-shell .header-actions .button-primary { padding-inline: 8px; }
    .app-bottom-nav { padding-inline: 4px; }
    .app-nav-label { font-size: 8px; }
    .app-nav-icon { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    body.app-shell *, body.app-shell *::before, body.app-shell *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}