/* ============================================================
   xCRUD NOVA AI — LANDING / CHAT PAGE
   Tailwind CDN is loaded by pages/index.php.
   Adapted from xcrud-nova-ai-light/styles.css: header removed
   (logo + account moved into the left rail), composer textarea
   auto-grows, login/register + app-history wired to real data.
   ============================================================ */

:root {
    --bg: #f6f8fb;
    --panel: #ffffff;
    --panel-2: #f8fafc;
    --border: #e5e9ef;
    --border-dark: #d7dee7;
    --text: #17202d;
    --muted: #718096;
    --muted-2: #94a0af;
    --green: #9be300;
    --green-hover: #b0f500;
    --green-dark: #5d8700;
    --purple: #5b46e8;
    --shadow: 0 12px 35px rgba(20, 31, 48, .07);
}

* {
    scrollbar-width: thin;
    scrollbar-color: #cbd3dd transparent;
}

*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #cbd3dd; border-radius: 999px; }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: "Inter", sans-serif;
    background: radial-gradient(circle at 43% 25%, rgba(111, 132, 160, .06), transparent 30%), #f6f8fb;
    color: var(--text);
}

button, input, textarea { font-family: inherit; }
button { cursor: pointer; }

/* ---------- Overall layout (no header - full viewport height) ---------- */

.app-shell {
    /* Hard cap (not min-height) as a second, outermost line of defense
       against the same "page grows taller than one screen and .left-nav
       scrolls away with it" failure .apps-panel's own overflow-x/
       overflow-y split above targets directly - min-height would let
       ANY future overflowing content (not just a long apps list) make
       the whole page scrollable again. See .main-grid's own dvh note for
       why both the vh and dvh declarations are kept. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: radial-gradient(circle at 42% 28%, rgba(112, 131, 159, .055), transparent 32%), #f6f8fb;
}

.main-grid {
    height: 100vh;
    /* 100vh on a real mobile browser (Safari especially) is the LARGEST
       possible viewport - address bar hidden - not the actual visible
       height most of the time, so a bottom-anchored/fixed child (the
       composer) can end up positioned below the real, currently-visible
       viewport, reading as "not staying fixed" even though the CSS math
       is fine. 100dvh tracks the TRUE current visible height instead;
       kept as a second declaration (not a replacement) since dvh is
       unsupported on older browsers, which then just keep the 100vh
       value above. */
    height: 100dvh;
    display: grid;
    grid-template-columns: 72px minmax(500px, 1fr) minmax(390px, 510px);
}

/* ---------- Left navigation (logo + account now live here) ---------- */

/* Real request: on load, the logo would render "fixed" for an instant
   then visibly jump/move - .left-nav's own layout (index.php's "flex
   flex-col items-center py-5 gap-3 border-r border-white/[0.06]") is
   Tailwind utility classes only, and the Tailwind Play CDN script
   (index.php's own <script src="https://cdn.tailwindcss.com">) injects
   its generated CSS AFTER the page starts painting - so the <aside>
   renders as a plain unstyled block for a frame (logo flush at the raw
   top-left) before snapping into its real flex-column layout the
   instant that script finishes. Every OTHER element in this rail
   (.nav-logo/.nav-button/.nav-account below) already has its own real
   CSS here rather than leaning on Tailwind for layout - .left-nav was
   the one left depending on it, from the same "logo + account moved
   into the left rail" refactor this file's header comment mentions.
   Declaring the equivalent layout here (a real stylesheet, blocking,
   applied before first paint) makes the Tailwind classes redundant
   rather than load-bearing, so there's nothing left to visibly snap
   into once its script does run. */
.left-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    gap: 12px;
    border-right: 1px solid #e7ebf0;
    background: #ffffff;
    border-color: #e7ebf0 !important;
}

/* Same pre-Tailwind-load fallback as .left-nav above - the spacer
   (index.php's "<div class="flex-1">") that pushes Help/Account down to
   the rail's bottom is a bare Tailwind utility class too. */
.left-nav > .flex-1 { flex: 1 1 0%; }

.nav-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 4px;
    box-shadow: 0 4px 14px rgba(20, 31, 48, .12);
}

.nav-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nav-button {
    width: 44px;
    height: 44px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #7c8797;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .18s ease;
}

.nav-button svg { width: 21px; height: 21px; }
.nav-button:hover { color: #263342; background: #f3f6f8; }

.nav-active {
    color: #6c9d00;
    border-color: rgba(155, 227, 0, .34);
    background: linear-gradient(145deg, rgba(155, 227, 0, .13), rgba(155, 227, 0, .035));
    box-shadow: inset 2px 0 0 #9be300;
}

.nav-account {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border-dark);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c8797;
    transition: .18s ease;
}

.nav-account:hover { border-color: #9be300; color: #263342; }

.nav-account.logged-in {
    border: none;
    background: linear-gradient(135deg, #16b982, #1386a5);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.nav-account svg { width: 20px; height: 20px; }

/* ---------- Chat ---------- */

.chat-panel {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid var(--border);
    background: #f9fafc;
}

.chat-title-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 15;
    padding: 16px clamp(22px, 4vw, 42px) 26px;
    background: linear-gradient(to bottom, #f9fafc 60%, rgba(249, 250, 252, 0));
    font-size: 13px;
    font-weight: 700;
    color: #263342;
    pointer-events: none;
}

.chat-inner {
    height: 100%;
    overflow-y: auto;
    padding: 52px clamp(22px, 4vw, 42px) 190px;
}

.chat-inner h1 { color: #182231; }
.chat-empty-hint { color: #7c8898; }

/* Direct request: the empty chat used to just be blank for a new
   visitor - a proper welcome moment instead, hidden the instant a real
   message exists (assets/landing.js's own updateChatWelcomeVisibility()). */
.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 480px;
    margin: 6vh auto 0;
    padding: 0 16px;
}

.chat-welcome[hidden] { display: none; }

.chat-welcome-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(145deg, #b6f000, #8fd400);
    color: #172000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 10px 26px rgba(155, 227, 0, .28);
}

.chat-welcome-icon svg { width: 26px; height: 26px; }

.chat-welcome h1 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 10px;
    letter-spacing: -.01em;
}

.chat-welcome p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #6c7684;
    margin: 0 0 22px;
}

.chat-welcome-examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.chat-welcome-chip {
    font-size: 12.5px;
    font-weight: 600;
    color: #4c5969;
    background: #ffffff;
    border: 1px solid #e2e6ea;
    border-radius: 999px;
    padding: 8px 15px;
    cursor: pointer;
    transition: .15s ease;
}

.chat-welcome-chip:hover { border-color: #9be300; color: #172000; background: rgba(155, 227, 0, .07); }

.message-time { color: #9aa4b2; font-size: 10px; margin-bottom: 6px; }

.message-user {
    min-width: 220px;
    max-width: 100%;
    padding: 13px 16px;
    border-radius: 17px 17px 5px 17px;
    border: 1px solid #dfe5eb;
    background: linear-gradient(145deg, #eef2f6, #e8edf2);
    box-shadow: 0 7px 24px rgba(32, 45, 61, .055);
}

.message-user p, .message-ai p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #273342;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-ai {
    padding: 14px 17px;
    border-radius: 5px 17px 17px 17px;
    border: 1px solid #e0e4ed;
    background: linear-gradient(145deg, #ffffff, #f7f8fc);
    box-shadow: 0 8px 28px rgba(30, 42, 58, .055);
}

.message-ai strong { color: #182231; }

.ai-avatar {
    flex: 0 0 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(110, 154, 0, .38);
    background: radial-gradient(circle at 35% 30%, rgba(155, 227, 0, .20), transparent 50%), #ffffff;
    color: #78aa00;
    font-weight: 900;
    font-size: 18px;
    box-shadow: 0 5px 16px rgba(38, 53, 67, .08);
}

.avatar {
    flex: 0 0 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.avatar-user {
    background: linear-gradient(135deg, #16b982, #1386a5);
    color: white;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 14px rgba(24, 46, 61, .13);
}

.ready-card {
    padding: 14px 17px 16px;
    border-radius: 5px 15px 15px 15px;
    width: min(100%, 445px);
    border: 1px solid #dce3ea;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.ready-card h3 { color: #17202d; }
.ready-card > p { color: #7c8795 !important; }

.success-icon { width: 25px; height: 25px; color: #76ac00; }
.success-icon svg { width: 100%; height: 100%; }

.chat-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.chat-options button {
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid #cfe8a0;
    background: rgba(155, 227, 0, .07);
    color: #5d8700;
    font-size: 12.5px;
    font-weight: 600;
}

.chat-options button:hover { background: var(--green); color: #172000; }

.primary-btn, .secondary-btn, .download-btn, .view-btn, .new-app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: .18s ease;
}

.primary-btn {
    height: 38px;
    padding: 0 17px;
    border-radius: 9px;
    background: var(--green);
    color: #172000;
    font-size: 13px;
    font-weight: 700;
    border: none;
    text-decoration: none;
}

.primary-btn:hover { background: var(--green-hover); transform: translateY(-1px); }

.secondary-btn {
    height: 38px;
    padding: 0 17px;
    border-radius: 9px;
    color: #4c5969;
    border: 1px solid #d6dde5;
    background: #ffffff;
    font-size: 13px;
}

.secondary-btn:hover, .download-btn:hover { background: #f3f5f7; }

/* ---------- Composer (auto-growing textarea) ---------- */

.composer-area {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 0 clamp(22px, 4vw, 42px) 14px;
    background: linear-gradient(to bottom, rgba(249, 250, 252, 0), rgba(249, 250, 252, .90) 24%, #f9fafc 52%);
}

.model-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #7c8797;
}

.model-picker-row[hidden] { display: none; }

.model-picker-row label { font-weight: 600; }

.model-picker-row select {
    border: 1px solid #e2e6ea;
    border-radius: 8px;
    background: #ffffff;
    color: #263342;
    font-size: 12.5px;
    padding: 5px 8px;
    outline: 0;
}

.model-picker-row select:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.composer {
    border: 1px solid #92d900;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(155, 227, 0, .06), 0 13px 35px rgba(30, 42, 57, .10);
    overflow: hidden;
}

.composer-textarea {
    display: block;
    width: 100%;
    resize: none;
    border: 0;
    outline: 0;
    padding: 16px 17px 5px;
    color: #263342;
    background: transparent;
    font-size: 14px;
    line-height: 1.5;
    max-height: 220px;
    overflow-y: auto;
    box-sizing: border-box;
}

.composer-textarea::placeholder { color: #98a3b1; }

.composer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px 9px 9px;
}

.icon-btn, .magic-btn, .send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: none;
}

.icon-btn { width: 38px; height: 34px; color: #8a95a4; background: transparent; }
.icon-btn:hover { color: #485464; background: #f3f5f7; }

.magic-btn {
    width: 38px;
    height: 38px;
    border: 1px solid #d6dde5 !important;
    color: #667385;
    background: #ffffff;
}

.magic-btn:hover { background: #f3f5f7; }

.send-btn { width: 40px; height: 38px; color: #172000; background: var(--green); }
.send-btn:hover { background: var(--green-hover); }
.send-btn:disabled { opacity: .5; cursor: default; }

.composer-hint { color: #a1a9b4; }
.usage-line { color: #7c8797; font-weight: 600; }
.usage-line[hidden] { display: none; }

/* ---------- Login notice banner ---------- */

.login-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-top: 14px;
    margin-bottom: 14px;
    border-radius: 11px;
    border: 1px solid #f1d9a8;
    background: linear-gradient(145deg, #fff8ea, #fdf3dc);
}

.login-banner svg { flex: 0 0 18px; width: 18px; height: 18px; color: #b4780b; }
.login-banner p { margin: 0; font-size: 12px; line-height: 1.5; color: #7a5a17; flex: 1; }

.login-banner button {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid #e3b452;
    background: #ffffff;
    color: #8a5f0b;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.login-banner button:hover { background: #fff3d6; }

/* ---------- Apps sidebar ---------- */

.apps-panel {
    position: relative;
    min-width: 0;
    padding: 22px 20px 15px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    /* Real bug: a blanket overflow:visible here meant a long "My PHP
       Apps" list (many app cards) could visually overflow PAST this
       panel's own box - .apps-scroll's own overflow-y:auto/min-height:0
       (below) only clips reliably when its ANCESTOR isn't independently
       letting that same content escape too - and since .app-shell (the
       page's own outermost wrapper) used min-height, not height, nothing
       stopped that escaping content from making the WHOLE PAGE taller
       than one screen. .left-nav (the logo's own rail) is a normal
       in-flow element, not position:sticky, so the moment the page
       became scrollable, it scrolled away with everything else - "the
       logo moves off screen" the more apps a visitor has. Splitting the
       axes keeps the ORIGINAL fix (the collapse-toggle's own left-
       protruding half, see its own comment, needs overflow-x visible)
       while actually clipping the axis a long list can grow on. */
    overflow-x: visible;
    overflow-y: hidden;
}

/* Direct request: collapsed by default for an anonymous visitor, or a
   logged-in one with no apps yet - a wide, mostly-empty panel just steals
   space from the chat; expanded by default once there's real content
   worth showing, but a manual toggle always wins either way
   (assets/landing.js persists the explicit choice in localStorage). */
.main-grid.apps-collapsed { grid-template-columns: 72px minmax(500px, 1fr) 56px; }

.apps-collapse-toggle {
    /* Straddles the panel's own left edge on purpose (half in the chat
       pane, half in the apps pane) - .apps-panel's own overflow:hidden
       (below) used to silently clip the half sticking out. */
    position: absolute;
    top: 24px;
    left: -14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e6ea;
    box-shadow: 0 2px 8px rgba(20, 31, 48, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #576273;
    cursor: pointer;
    z-index: 6;
    transition: transform .18s ease;
}

.apps-collapse-toggle svg { width: 14px; height: 14px; }
.apps-collapse-toggle:hover { background: #f3f5f7; }

.apps-panel.collapsed .apps-collapse-toggle { transform: rotate(180deg); }
.apps-panel.collapsed { padding: 22px 0; align-items: center; }
.apps-panel.collapsed .apps-panel-content { display: none; }

.apps-panel-collapsed-label {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #9aa4af;
    margin-top: 8px;
}

.apps-panel.collapsed .apps-panel-collapsed-label { display: flex; }

.apps-panel-collapsed-label svg { width: 20px; height: 20px; }

.apps-panel-collapsed-label span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    color: #6c7684;
    white-space: nowrap;
}

.apps-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.apps-header h2 { color: #1a2533; }
.apps-header p { color: #98a2af !important; }

.new-app-btn {
    height: 35px;
    padding: 0 12px;
    border: 1px solid #8dce00;
    border-radius: 8px;
    color: #608700;
    background: rgba(155, 227, 0, .045);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.apps-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.apps-header-buttons { display: flex; align-items: center; gap: 8px; }

.load-tokens-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 35px;
    padding: 0 12px;
    border: 1px solid #d6dde5;
    border-radius: 8px;
    color: #4c5969;
    background: #ffffff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.load-tokens-btn[hidden] { display: none; }

.token-balance {
    font-size: 11px;
    font-weight: 600;
    color: #6c9900;
    white-space: nowrap;
}

.token-balance[hidden] { display: none; }
.token-balance-sep { color: #c3ccd4; margin: 0 3px; }

.new-app-btn:hover { color: #172000; background: var(--green); }

.app-search {
    height: 42px;
    border-radius: 999px;
    border: 1px solid #dce2e8;
    background: #f8fafb;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
}

.app-search input { min-width: 0; width: 100%; background: transparent; outline: none; border: none; color: #293544; font-size: 12px; }
.app-search input::placeholder { color: #9aa4b1; }

.apps-scroll { overflow-y: auto; min-height: 0; padding-top: 13px; padding-right: 2px; flex: 1; }

.apps-empty {
    text-align: center;
    padding: 40px 12px;
    color: #98a2af;
    font-size: 13px;
}

.app-card {
    position: relative;
    padding: 15px;
    margin-bottom: 11px;
    border-radius: 13px;
    border: 1px solid #e1e6eb;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(31, 44, 59, .035);
    transition: .18s ease;
    cursor: pointer;
}

.app-card:hover {
    border-color: rgba(130, 188, 0, .42);
    background: #fcfefd;
    transform: translateY(-1px);
    box-shadow: 0 9px 25px rgba(31, 44, 59, .065);
}

.selected-app {
    border-color: rgba(130, 188, 0, .42);
    box-shadow: inset 2px 0 0 rgba(137, 199, 0, .85), 0 6px 20px rgba(31, 44, 59, .045);
}

.app-icon {
    position: relative;
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: linear-gradient(145deg, #6d55ee, #5038d7);
    overflow: visible;
}

.app-icon svg { width: 26px; height: 26px; }

.app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Direct request: a per-app logo, uploadable once a visitor has enough
   tokens (my_apps_api.php's own can_upload_logo) - a small camera badge
   overlaid on the icon's own corner, matching a familiar "change avatar"
   affordance rather than a separate button competing for card space. */
.app-logo-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--border);
    color: #5038d7;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(30, 42, 57, .18);
}

.app-logo-badge svg { width: 12px; height: 12px; }
.app-logo-badge:hover { background: #f3f0ff; }

.app-status-pill {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.app-status-done { color: #4c8a00; background: rgba(155, 227, 0, .14); }
.app-status-pending, .app-status-running { color: #a06a00; background: rgba(255, 179, 0, .14); }
.app-status-chatting { color: #667385; background: #eef1f4; }
.app-status-failed { color: #b91c1c; background: rgba(239, 68, 68, .12); }

.app-title { font-size: 14px; font-weight: 700; color: #25303d; line-height: 1.3; padding-right: 8px; }
.app-description { color: #7d8997; font-size: 11px; line-height: 1.5; margin-top: 5px; }
.app-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.app-date { color: #9aa4af; font-size: 10px; }
.app-cost { color: #6c9900; font-size: 10px; font-weight: 600; white-space: nowrap; }

.app-meta-right { display: flex; align-items: center; gap: 8px; }

.app-credentials-link {
    font-size: 10px;
    font-weight: 600;
    color: #5038d7;
    text-decoration: none;
    white-space: nowrap;
}
.app-credentials-link:hover { text-decoration: underline; }

.app-guide-link {
    font-size: 10px;
    font-weight: 600;
    color: #608700;
    text-decoration: none;
    white-space: nowrap;
}
.app-guide-link:hover { text-decoration: underline; }

.app-card-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #8a94a1;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.app-card-toggle:hover { background: #eef1f4; color: #4c8a00; }
.app-card-toggle svg { width: 14px; height: 14px; transition: transform .15s ease; }

.app-delete-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #8a94a1;
    background: transparent;
    border: none;
    cursor: pointer;
}

.app-delete-btn:hover { background: rgba(220, 38, 38, .1); color: #dc2626; }
.app-delete-btn svg { width: 14px; height: 14px; }

/* Collapsed = icon, title, status, cost, and actions only - description
   and date hidden, tightened spacing to actually take the least room
   possible (the whole point of collapsing more than one app card). */
.app-card.is-collapsed { padding: 11px 15px; }
.app-card.is-collapsed .app-description,
.app-card.is-collapsed .app-date { display: none; }
.app-card.is-collapsed .app-icon { width: 36px; height: 36px; flex: 0 0 36px; }
.app-card.is-collapsed .app-icon svg { width: 19px; height: 19px; }
.app-card.is-collapsed .app-meta-row { margin-top: 4px; justify-content: flex-start; }
.app-card.is-collapsed .app-actions { margin-top: 8px; }
.app-card.is-collapsed .app-card-toggle svg { transform: rotate(-90deg); }

/* Direct request: Download's own label always carries more text (a
   token count + $ price on top of "Download App") than View's plain
   "View App" - equal 1fr/1fr columns left Download's text either
   wrapping or ellipsis-truncated while View sat on excess space it
   didn't need. 2fr/3fr biases the extra width to Download without
   giving View so little it can't fit its own short label. */
.app-actions { display: grid; grid-template-columns: 2fr 3fr; gap: 8px; margin-top: 12px; }
.app-actions .action-caption { grid-column: 1 / -1; }
.app-actions .view-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.view-btn {
    height: 35px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    color: #6c9900;
    border: 1px solid rgba(125, 182, 0, .65);
    background: rgba(155, 227, 0, .025);
    text-decoration: none;
}

.view-btn:hover { color: #172000; background: var(--green); }

.action-caption {
    font-size: 10.5px;
    color: #94a0ad;
    line-height: 1.4;
    margin: 4px 0 0;
}

.secondary-btn.is-disabled,
.view-btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Direct request: a "Load Tokens" shortcut right next to the download
   modal's own disabled-option caption, so the shortfall it just told the
   visitor about is one click from being fixed instead of a dead end. */
.download-option-load-tokens {
    display: inline-block;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 11.5px;
    font-weight: 700;
    color: #608700;
    cursor: pointer;
}
.download-option-load-tokens:hover { text-decoration: underline; }

.action-icon { width: 15px; height: 15px; flex: 0 0 15px; }

/* ---------- Auth modal ---------- */

.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(20, 27, 38, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-overlay[hidden] { display: none; }

.auth-modal {
    width: min(100%, 380px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(15, 23, 35, .25);
    padding: 26px 26px 22px;
}

.auth-tabs { display: flex; gap: 6px; margin-bottom: 18px; background: #f3f5f7; border-radius: 10px; padding: 4px; }

.auth-tab {
    flex: 1;
    padding: 8px 0;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #64707e;
    border: none;
    background: transparent;
}

.auth-tab.active { background: #ffffff; color: #17202d; box-shadow: 0 3px 10px rgba(20, 31, 48, .08); }

.auth-title { font-size: 17px; font-weight: 700; color: #17202d; margin: 0 0 4px; }
.auth-subtitle { font-size: 12.5px; color: #8994a1; margin: 0 0 18px; }

.auth-field { margin-bottom: 13px; }
.auth-field label { display: block; font-size: 11.5px; font-weight: 600; color: #576273; margin-bottom: 6px; }

.auth-field input {
    width: 100%;
    height: 42px;
    border-radius: 9px;
    border: 1px solid #d8dfe6;
    padding: 0 13px;
    font-size: 13.5px;
    color: #202a37;
    outline: none;
    box-sizing: border-box;
}

.auth-field input:focus { border-color: #9be300; box-shadow: 0 0 0 3px rgba(155, 227, 0, .18); }
.auth-field[hidden] { display: none; }

.auth-forgot {
    text-align: right;
    font-size: 12px;
    color: #608700;
    font-weight: 600;
    cursor: pointer;
    margin: -6px 0 14px;
}

.auth-forgot:hover { text-decoration: underline; }
#authBackToLoginLink { text-align: center; margin: 14px 0 0; }

.auth-error {
    font-size: 12px;
    color: #b91c1c;
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .25);
    border-radius: 8px;
    padding: 8px 11px;
    margin-bottom: 13px;
}

.auth-error[hidden] { display: none; }

.auth-submit {
    width: 100%;
    height: 42px;
    border-radius: 9px;
    border: none;
    background: var(--green);
    color: #172000;
    font-size: 13.5px;
    font-weight: 700;
    margin-top: 4px;
}

.auth-submit:hover { background: var(--green-hover); }
.auth-submit:disabled { opacity: .6; cursor: default; }

.auth-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #f3f5f7;
    color: #576273;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-close:hover { background: #e7ebf0; }

.auth-modal { position: relative; }

/* ---------- Download options modal ---------- */

.download-options-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(20, 27, 38, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.download-options-modal {
    position: relative;
    width: min(100%, 420px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(15, 23, 35, .25);
    padding: 26px 26px 22px;
}

.download-options-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #f3f5f7;
    color: #576273;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.download-options-close:hover { background: #e7ebf0; }

.download-options-title { font-size: 17px; font-weight: 700; color: #17202d; margin: 0 0 18px; }

.download-option {
    border: 1px solid #e5e9ee;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.download-option:last-child { margin-bottom: 0; }

.download-option-label { font-size: 14px; font-weight: 700; color: #17202d; margin-bottom: 4px; }
.download-option-desc { font-size: 12.5px; color: #8994a1; line-height: 1.5; margin: 0 0 12px; }

.download-option-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    box-sizing: border-box;
}

.download-option-btn.primary-btn { background: var(--green); color: #172000; }
.download-option-btn.primary-btn:hover { background: var(--green-hover); }
.download-option-btn.secondary-btn { background: #f3f5f7; color: #17202d; }
.download-option-btn.secondary-btn:hover { background: #e7ebf0; }
.download-option-btn:disabled,
.download-option-btn.is-disabled { opacity: .55; cursor: default; pointer-events: none; }

.token-gate-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(217, 119, 6, .12);
    color: #b45309;
    margin-bottom: 12px;
}

.token-gate-icon svg { width: 24px; height: 24px; }

.token-gate-modal .auth-subtitle { margin-bottom: 20px; }

.delete-app-icon { background: rgba(220, 38, 38, .1); color: #dc2626; }

.delete-app-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.delete-app-actions .auth-submit,
.delete-app-actions .auth-cancel { margin-top: 0; width: 100%; }

.auth-cancel {
    height: 42px;
    border-radius: 9px;
    border: 1px solid #e2e6ea;
    background: #ffffff;
    color: #4c5969;
    font-size: 13.5px;
    font-weight: 700;
}

.auth-cancel:hover { background: #f6f8fa; }

.auth-submit-danger { background: #dc2626; color: #ffffff; }
.auth-submit-danger:hover { background: #b91c1c; }

/* ---------- Load Tokens modal ---------- */

.buy-tokens-cost {
    font-size: 13px;
    color: #4b5563;
    margin: 2px 0 16px;
}
.buy-tokens-cost strong { color: #182231; font-size: 16px; }

/* ---------- App credentials modal ---------- */

.credentials-loading { font-size: 13px; color: #6b7280; margin: 4px 0 0; }

.credentials-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    margin-top: 4px;
}
.credentials-table th {
    text-align: left;
    color: #8a94a3;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 0 8px 6px 0;
    border-bottom: 1px solid var(--border);
}
.credentials-table td {
    padding: 8px 8px 8px 0;
    border-bottom: 1px solid #f1f3f5;
    color: #263342;
}
.credentials-table code {
    background: #f3f5f7;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 12px;
}
.credentials-note { font-size: 11.5px; color: #8a94a3; margin: 14px 0 0; line-height: 1.5; }

/* ---------- Account dropdown ---------- */

.account-dropdown {
    position: absolute;
    left: 56px;
    bottom: 16px;
    z-index: 90;
    width: 220px;
    background: #ffffff;
    border: 1px solid #e1e6eb;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(20, 31, 48, .16);
    padding: 14px;
}

.account-dropdown[hidden] { display: none; }
.account-dropdown-email { font-size: 12.5px; font-weight: 600; color: #17202d; word-break: break-all; margin-bottom: 10px; }

.account-dropdown button {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #d8dfe6;
    background: #ffffff;
    color: #4c5969;
    font-size: 12px;
    font-weight: 600;
}

.account-dropdown button:hover { background: #f3f5f7; }

/* ---------- Typing indicator (waiting for the AI) ---------- */

.typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 2px;
}

.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9aa8b8;
    animation: typing-bounce 1.1s infinite ease-in-out;
}

.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .typing-dot { animation: none; opacity: .8; }
}

.typing-note {
    font-size: 11.5px;
    color: #8994a1;
    margin: 6px 0 0;
}

/* ---------- Build progress card (polled via job_status_api) ---------- */

.progress-card {
    width: min(100%, 445px);
    padding: 15px 17px 16px;
    border-radius: 5px 15px 15px 15px;
    border: 1px solid #dce3ea;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.progress-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #17202d;
}

.progress-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #dbe6c2;
    border-top-color: #6c9d00;
    animation: progress-spin .8s linear infinite;
    flex: 0 0 15px;
}

@keyframes progress-spin { to { transform: rotate(360deg); } }

.progress-step {
    font-size: 12px;
    color: #7c8795;
    margin-top: 4px;
}

.progress-summary {
    font-size: 12.5px;
    line-height: 1.5;
    color: #4b5563;
    margin-top: 8px;
}

.progress-summary[hidden] { display: none; }

.progress-reassurance {
    font-size: 11px;
    color: #9aa4af;
    margin-top: 6px;
}

.progress-reassurance[hidden] { display: none; }

.progress-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
}

.progress-actions .action-caption { flex-basis: 100%; }

.progress-track {
    height: 8px;
    border-radius: 999px;
    background: #eef1f4;
    margin-top: 11px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #9be300, #6c9d00);
    transition: width .4s ease;
}

.progress-card.is-failed .progress-card-title { color: #b91c1c; }
.progress-card.is-failed .progress-track { background: rgba(239, 68, 68, .12); }
.progress-card.is-failed .progress-fill { background: #ef4444; }

/* ---------- Composer gate (anonymous visitor, app already built) ---------- */

.composer-gate {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 11px;
    border: 1px solid #dbe6c2;
    background: linear-gradient(145deg, #f7fce9, #f1f8e0);
}

.composer-gate[hidden] { display: none; }
.composer-gate p { margin: 0; font-size: 12px; line-height: 1.5; color: #4c6300; flex: 1; }

.composer-gate button {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 8px;
    border: none;
    background: var(--green);
    color: #172000;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.composer-gate button:hover { background: var(--green-hover); }

.composer.is-locked { opacity: .6; }

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
    .main-grid { grid-template-columns: 64px minmax(0, 1fr) 400px; }
}

@media (max-width: 900px) {
    .main-grid { height: auto; min-height: 100vh; display: block; }
    /* Direct request: the composer wasn't staying "fixed at the bottom" -
       root-caused (Playwright diagnostic) to THIS rule being min-height,
       not height. .chat-inner's own height:100% resolves off whatever
       height .chat-panel ends up at - with only a min-height, a long
       conversation grows .chat-panel (and .chat-inner with it) past the
       viewport instead of staying capped, so chat-inner's own
       overflow-y:auto internal scroll never engages - the WHOLE PAGE
       scrolls instead, and newer messages render out from under the
       composer instead of the page scrolling past them. composer-area's
       own position:fixed/bottom:0 was already correct the whole time -
       it just had unscrolled content sitting behind it. A hard height
       here caps .chat-panel at exactly one screen, restoring
       chat-inner's own internal scroll (matching desktop, which already
       uses .main-grid{height:100vh} the same way). */
    /* Same 100vh-vs-real-visible-height gap as .main-grid's own dvh note
       above, and more consequential here - this is the exact rule the
       composer's "stay fixed at the bottom" behavior depends on on
       mobile (see the comment block just below). */
    .chat-panel { height: 100vh; height: 100dvh; border-right: 0; }
    .apps-panel { border-top: 1px solid var(--border); max-height: 700px; }
    .apps-scroll { max-height: 520px; }
    .composer-area { position: fixed; }
    .left-nav { flex-direction: row !important; width: 100% !important; height: 60px; padding: 0 12px !important; }
    .account-dropdown { left: 12px; bottom: 64px; }
    /* The collapse toggle solves a horizontal-space fight this stacked
       (block) layout doesn't have - always show the panel expanded here. */
    .apps-collapse-toggle { display: none; }
    .apps-panel.collapsed { padding: 22px 20px 15px; align-items: stretch; }
    /* Real bug found in testing: this override forces the content back
       to display:flex (undoing the desktop collapsed state's own
       display:none) but flex's default direction is ROW - without
       stating column explicitly, the header/banner/list laid out
       side-by-side instead of stacking on a fresh narrow-width page
       load (the only path that ever reaches this - an already-expanded
       panel resized narrower never had .collapsed applied in the first
       place). */
    .apps-panel.collapsed .apps-panel-content { display: flex; flex-direction: column; }
    .apps-panel.collapsed .apps-panel-collapsed-label { display: none; }
}

@media (max-width: 560px) {
    .chat-inner { padding-left: 15px; padding-right: 15px; }
    .composer-area { padding-left: 10px; padding-right: 10px; }
    .apps-panel { padding-left: 13px; padding-right: 13px; }
    .message-user, .message-ai, .ready-card { font-size: 13px; }
    .auth-modal { padding: 22px 18px 18px; }
}