/* ==========================================================================
   Asgine brand layer — loaded last.
   A story engine should feel like a place to read and play, not a console:
   warm ink surfaces, lantern gold from the mascot as the one accent, a book
   serif for titles and story text, soft corners, quiet chrome. The cyan of
   the "AI" mark stays inside the logo.
   ========================================================================== */

:root {
    --asg-ink-0: #0e0c0a;
    --asg-ink-1: #13110e;
    --asg-ink-2: #1a1713;
    --asg-ink-3: #221e19;
    --asg-ink-4: #2c2721;
    --asg-line: #302a23;
    --asg-line-strong: #4a4136;
    --asg-slate: #cfc5b3;
    --asg-slate-dim: #94897a;
    --asg-paper: #f3ecdf;
    --asg-lantern: #e5b257;
    --asg-lantern-bright: #f0c777;
    --asg-lantern-deep: #b97a2a;
    --asg-lantern-wash: rgba(229, 178, 87, .1);
    /* kept as aliases: older rules reference these names */
    --asg-signal: var(--asg-lantern);
    --asg-signal-bright: var(--asg-lantern-bright);
    --asg-ember: var(--asg-lantern);
    --asg-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Hoefler Text", Georgia, "Times New Roman", serif;
    --asg-display: var(--asg-serif);
    --asg-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

    --ai-bg: var(--asg-ink-1);
    --ai-sidebar: var(--asg-ink-0);
    --ai-surface: var(--asg-ink-2);
    --ai-surface-raised: var(--asg-ink-3);
    --ai-surface-soft: #161310;
    --ai-border: var(--asg-line);
    --ai-border-strong: var(--asg-line-strong);
    --ai-text: var(--asg-paper);
    --ai-muted: #b9ae9c;
    --ai-dim: var(--asg-slate-dim);
    --ai-accent: var(--asg-lantern);
    --ai-accent-strong: #d99a3c;
    --ai-accent-soft: var(--asg-lantern-wash);
    --ai-rose: #cf8a6f;
    --ai-cyan: #9fc4c4;
    --ai-gold: var(--asg-lantern);
    --ai-radius-sm: .375rem;
    --ai-radius: .5rem;
    --ai-radius-lg: .75rem;
    --ai-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}

/* ---- Canvas ------------------------------------------------------------ */

body {
    /* one warm light from the upper left, like a lamp over a desk */
    background:
        radial-gradient(60rem 34rem at 12% -8%, rgba(229, 178, 87, .055), transparent 70%),
        var(--asg-ink-1) !important;
    background-attachment: fixed !important;
    font-family: var(--asg-body);
    letter-spacing: 0;
}

::selection {
    background: rgba(229, 178, 87, .32);
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--asg-lantern);
    outline-offset: 2px;
}

.asg-blob,
.asg-gridlines,
.asg-corner,
.asg-land-grid,
.asg-land-corner,
.gift-reveal-glow {
    display: none !important;
}

/* ---- Type -------------------------------------------------------------- */

h1, h2,
.app-page-title,
.app-brand b,
.asg-wordmark,
.daily-sheet-head h2 {
    font-family: var(--asg-serif);
    font-weight: 600;
    letter-spacing: -.005em;
}

.app-content h1 {
    line-height: 1.12;
}

/* small labels: quiet caps instead of wide console lettering */
.nav-section-label,
.header-eyebrow,
.asg-kicker,
.asg-mark-sub,
.auth-kicker,
.help-kicker,
.admin-kicker,
.section-kicker {
    font-family: var(--asg-body);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.asg-wordmark,
[class*="bg-clip-text"] {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor;
    color: var(--asg-paper) !important;
    filter: none !important;
}

/* ---- Shell: sidebar ---------------------------------------------------- */

.app-sidebar {
    border-right: 1px solid var(--asg-line);
    background: var(--asg-ink-0);
}

.app-brand b {
    font-size: 1.15rem;
    color: var(--asg-paper);
}

.app-brand small {
    letter-spacing: .02em;
    color: var(--asg-slate-dim);
    font-style: italic;
    font-family: var(--asg-serif);
}

.asgine-logo-tile {
    border-radius: .5rem !important;
    border: 1px solid var(--asg-line-strong);
    background: var(--asg-ink-3) !important;
    box-shadow: none !important;
}

.asgine-logo-tile::after {
    display: none;
}

.nav-section-label {
    color: #766c5e;
    font-size: .64rem;
}

.nav-link,
.nav-create-grid a,
.btn-accent,
.btn-ghost,
.header-icon,
.account-trigger,
.wallet-summary,
.daily-trigger {
    border-radius: .5rem !important;
}

.nav-link {
    min-height: 2.5rem;
    border: 1px solid transparent;
    color: #a99e8d;
    font-size: .84rem;
    font-weight: 500;
}

.nav-link:hover {
    border-color: transparent;
    background: var(--asg-ink-2);
    color: var(--asg-paper);
}

/* "you are here": a lit entry with a bookmark edge */
.nav-link.active {
    border-color: transparent;
    background: var(--asg-lantern-wash);
    color: var(--asg-lantern-bright);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--asg-lantern);
}

.nav-link.active::before,
.nav-link.active::after {
    display: none;
}

.nav-link.active .nav-icon {
    color: var(--asg-lantern);
}

.nav-icon {
    font-size: .8rem;
    color: #7d7364;
}

.nav-create-grid a {
    border: 1px solid var(--asg-line);
    background: var(--asg-ink-2);
    color: var(--asg-slate);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.nav-create-grid a:hover {
    border-color: var(--asg-lantern-deep);
    background: var(--asg-ink-3);
    color: var(--asg-paper);
}

.nav-create-grid a i,
.nav-create-grid a:nth-child(1) i,
.nav-create-grid a:nth-child(2) i,
.nav-create-grid a:nth-child(3) i {
    color: var(--asg-lantern);
}

.nav-link.nav-premium,
.nav-link.nav-premium .nav-icon {
    color: var(--asg-lantern);
}

/* ---- Shell: top bar ---------------------------------------------------- */

.app-topbar {
    border-bottom: 1px solid var(--asg-line);
    background: rgba(19, 17, 14, .94);
    backdrop-filter: none;
}

.app-topbar::after,
.header-eyebrow {
    display: none;
}

.app-page-title {
    font-size: 1.2rem;
    color: var(--asg-paper);
}

.wallet-summary,
.interaction-control,
.daily-trigger,
.account-trigger,
.header-icon {
    border: 1px solid var(--asg-line) !important;
    background: var(--asg-ink-2) !important;
    box-shadow: none !important;
}

.token-pill-chat i,
.token-pill-creation i { color: var(--asg-slate); }
.token-pill-general i { color: var(--asg-lantern); }

/* ---- Actions ----------------------------------------------------------- */

.btn-accent,
.gradient-btn,
.asg-cta-primary,
.asg-land-cta.primary,
.welcome-nav-cta,
.auth-submit,
.account-primary,
.daily-confirm,
.ae-apply,
.gift-reveal-accept {
    border: 1px solid transparent !important;
    border-radius: .5rem !important;
    background: var(--asg-lantern) !important;
    background-image: none !important;
    color: #1d1405 !important;
    font-weight: 650;
    letter-spacing: 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 18px rgba(229, 178, 87, .12) !important;
    clip-path: none;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.btn-accent::after {
    display: none;
}

.btn-accent:hover,
.gradient-btn:hover,
.asg-cta-primary:hover,
.asg-land-cta.primary:hover,
.welcome-nav-cta:hover,
.auth-submit:hover,
.account-primary:hover,
.daily-confirm:hover:not(:disabled),
.ae-apply:hover:not(:disabled) {
    background: var(--asg-lantern-bright) !important;
    opacity: 1;
    transform: translateY(-1px);
}

.btn-accent:active,
.asg-cta-primary:active,
.auth-submit:active {
    transform: translateY(0);
}

.btn-accent:disabled,
.asg-cta-primary:disabled,
.auth-submit:disabled,
.daily-confirm:disabled {
    background: var(--asg-ink-4) !important;
    color: var(--asg-slate-dim) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none;
}

/* solid Tailwind action buttons written inline in templates */
:is(button, a, label):is([class~="bg-purple-600"], [class~="bg-violet-600"], [class~="bg-indigo-600"], [class~="bg-purple-500"], [class~="bg-violet-500"]) {
    background-color: var(--asg-lantern) !important;
    color: #1d1405 !important;
    font-weight: 650;
}

:is(button, a, label):is([class~="bg-purple-600"], [class~="bg-violet-600"], [class~="bg-indigo-600"], [class~="bg-purple-500"], [class~="bg-violet-500"]):hover {
    background-color: var(--asg-lantern-bright) !important;
}

.btn-ghost,
.char-secondary,
.dashboard-secondary,
.asg-cta-ghost,
.asg-land-cta.ghost,
.public-share,
.account-secondary,
.ae-dismiss,
.ae-tool {
    border: 1px solid var(--asg-line-strong) !important;
    border-radius: .5rem !important;
    background: transparent !important;
    color: var(--asg-slate) !important;
    font-weight: 550;
    box-shadow: none !important;
}

.btn-ghost:hover,
.char-secondary:hover,
.dashboard-secondary:hover,
.asg-cta-ghost:hover,
.asg-land-cta.ghost:hover,
.public-share:hover,
.account-secondary:hover,
.ae-dismiss:hover,
.ae-tool:hover {
    border-color: var(--asg-lantern-deep) !important;
    background: var(--asg-ink-3) !important;
    color: var(--asg-paper) !important;
}

/* ---- Surfaces ---------------------------------------------------------- */

.app-content :is([class~="bg-gray-900"], [class~="bg-gray-900/60"], [class~="bg-gray-900/70"], [class~="bg-gray-900/80"], [class~="bg-gray-800"], [class~="bg-gray-800/60"]) {
    background-color: var(--asg-ink-2) !important;
}

.app-content :is([class~="bg-gray-950"], [class~="bg-gray-950/40"], [class~="bg-gray-950/45"], [class~="bg-gray-950/70"]) {
    background-color: #161310 !important;
}

.app-content :is([class~="border-gray-800"], [class~="border-gray-700"]) {
    border-color: var(--asg-line) !important;
}

.app-content :is(section, article, aside, div, form)[class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ---- Fields ------------------------------------------------------------ */

body:not([data-page^="/chat/"]) .app-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
    border-color: var(--asg-line-strong);
    border-radius: .5rem;
    background-color: var(--asg-ink-0);
    color: var(--asg-paper);
    transition: border-color .15s ease, box-shadow .15s ease;
}

body:not([data-page^="/chat/"]) .app-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):hover {
    border-color: #5d5244;
}

body:not([data-page^="/chat/"]) .app-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):focus {
    border-color: var(--asg-lantern);
    box-shadow: 0 0 0 3px rgba(229, 178, 87, .14);
    outline: none;
}

/* long-form creative fields read like manuscript pages */
body:not([data-page^="/chat/"]):not([data-page^="/admin"]) .app-content textarea {
    font-family: var(--asg-serif);
    font-size: 1rem;
    line-height: 1.65;
}

.app-content :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--asg-lantern);
}

/* ---- Workspace home and landing hero ----------------------------------- */

.asg-hero,
html body .welcome-shell .asg-land-hero {
    border: 1px solid var(--asg-line) !important;
    border-radius: .875rem !important;
    background:
        radial-gradient(38rem 22rem at 0% 0%, rgba(229, 178, 87, .11), transparent 70%),
        var(--asg-ink-2) !important;
    box-shadow: none !important;
    clip-path: none;
}

.asg-hero::before,
.asg-hero::after,
.asg-land-hero::before,
.asg-land-hero::after,
.welcome-shell::before,
.auth-story::before,
.auth-story::after {
    display: none !important;
}

.welcome-shell,
.auth-shell-v2 {
    background: transparent !important;
}

.welcome-nav {
    border: 0 !important;
    border-bottom: 1px solid var(--asg-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

.welcome-brand-logo b {
    font-family: var(--asg-serif);
    font-size: 1.15rem;
}

.asg-land-copy h1,
.pm-shell .pm-hero h1,
.auth-card h1,
.auth-story h1 {
    font-family: var(--asg-serif) !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
    line-height: 1.02 !important;
    text-transform: none;
}

.asg-land-copy h1 {
    max-width: 12ch;
    font-size: clamp(3rem, 6vw, 5.4rem);
}

.asg-land-copy h1 em,
.pm-shell .pm-hero h1 em {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: var(--asg-lantern) !important;
    font-style: italic !important;
}

.asg-mark-sub {
    color: var(--asg-lantern) !important;
}

html body .welcome-shell .asg-engine-signal {
    border: 1px solid var(--asg-line-strong) !important;
    border-radius: .75rem !important;
    background: var(--asg-ink-1) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35) !important;
    transform: none !important;
    backdrop-filter: none !important;
}

.asg-signal-scene strong {
    font-family: var(--asg-serif) !important;
}

.asg-chip {
    border-radius: 999px !important;
}

.asg-chip-story {
    border-color: rgba(229, 178, 87, .45) !important;
    background: var(--asg-lantern-wash) !important;
    color: var(--asg-lantern) !important;
}

.auth-card,
.auth-status-card {
    border: 1px solid var(--asg-line) !important;
    border-radius: .875rem !important;
    background: var(--asg-ink-2) !important;
    box-shadow: none !important;
}

/* ---- Overlays ---------------------------------------------------------- */

.header-popover,
.daily-sheet,
.report-sheet,
.gift-reveal-card {
    border: 1px solid var(--asg-line-strong) !important;
    border-radius: .75rem !important;
    background: var(--asg-ink-2) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55) !important;
}

.daily-step.is-current .daily-step-mark {
    border-color: var(--asg-lantern);
    color: var(--asg-lantern);
}

.app-footer {
    border-top: 1px solid var(--asg-line);
    background: transparent;
}

/* ---- Advisor and AI helpers -------------------------------------------- */

.ae-card {
    border: 1px solid var(--asg-line-strong) !important;
    border-radius: .625rem !important;
    background: var(--asg-ink-1) !important;
}

.ae-card-head {
    color: var(--asg-lantern) !important;
}

.ae-undobar {
    border-color: var(--asg-line-strong) !important;
    background: var(--asg-ink-3) !important;
}

.ai-btn {
    border-radius: .5rem !important;
    border-color: var(--asg-line-strong) !important;
    background: var(--asg-ink-3) !important;
}

.ai-btn:hover {
    border-color: var(--asg-lantern) !important;
}

.ai-btn-icon {
    filter: grayscale(1) sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(1.5);
}

/* ---- Session view: the reading surface --------------------------------- */

body[data-page^="/chat/"] .app-footer {
    display: none;
}

/* narration is set like a page of a book */
.story-prose,
.narrator-content {
    font-family: var(--asg-serif);
    font-size: 1.08rem !important;
    line-height: 1.8 !important;
    color: #e6dccb !important;
}

.story-narration {
    color: #c3b8a5 !important;
}

.story-header {
    font-family: var(--asg-body);
    letter-spacing: .04em;
    color: var(--asg-slate-dim) !important;
}

.story-turnno {
    color: var(--asg-lantern) !important;
}

/* spoken lines stand apart from narration: a speaker card with a lit edge */
.story-dialogue {
    border: 0 !important;
    border-left: 2px solid var(--asg-lantern) !important;
    border-radius: 0 .5rem .5rem 0 !important;
    background: rgba(229, 178, 87, .055) !important;
}

.story-speaker {
    font-family: var(--asg-body);
    letter-spacing: .06em;
    color: var(--asg-lantern) !important;
}

.story-speech {
    font-family: var(--asg-serif);
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--asg-paper) !important;
}

.story-action {
    font-family: var(--asg-serif);
    font-size: .98rem !important;
    color: #b0a593 !important;
}

.story-avatar,
.story-avatar-fallback {
    border-radius: 999px !important;
}

@media (prefers-reduced-motion: reduce) {
    .btn-accent,
    .asg-cta-primary,
    .auth-submit {
        transition: none;
    }
}

/* ---- Creation forms ---------------------------------------------------- */

/* Back / Next bar from creator-steps.js: always within reach */
.creator-steps {
    position: sticky;
    bottom: .75rem;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.5rem;
    padding: .6rem .75rem;
    border: 1px solid var(--asg-line-strong);
    border-radius: .75rem;
    background: rgba(26, 23, 19, .97);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

.creator-steps__where {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    margin: 0 auto;
    text-align: center;
}

.creator-steps__where span {
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--asg-slate-dim);
}

.creator-steps__where b {
    font-family: var(--asg-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--asg-paper);
}

.creator-steps__back,
.creator-steps__next {
    flex: 0 0 auto;
    max-width: 40%;
    padding: .55rem .95rem;
    border-radius: .5rem;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.creator-steps__back {
    border: 1px solid var(--asg-line-strong);
    color: var(--asg-slate);
}

.creator-steps__back:hover {
    border-color: var(--asg-lantern-deep);
    color: var(--asg-paper);
}

.creator-steps__next {
    background: var(--asg-lantern);
    color: #1d1405;
}

.creator-steps__next:hover {
    background: var(--asg-lantern-bright);
}

.creator-steps [hidden] {
    display: none;
}

/* section tabs: readable size, clear current section */
.tab-btn,
.persona-tab-btn {
    border-radius: .5rem !important;
    font-size: .9rem !important;
}

.tab-btn.active {
    background: var(--asg-lantern-wash) !important;
    color: var(--asg-lantern-bright) !important;
    box-shadow: inset 0 -2px 0 var(--asg-lantern);
}

/* native file picker button matches the secondary buttons */
.app-content input[type="file"] {
    color: var(--asg-slate-dim);
    font-size: .85rem;
}

.app-content input[type="file"]::file-selector-button {
    margin-right: .75rem;
    padding: .45rem .85rem;
    border: 1px solid var(--asg-line-strong);
    border-radius: .5rem;
    background: var(--asg-ink-3);
    color: var(--asg-paper);
    font-weight: 600;
    cursor: pointer;
}

.app-content input[type="file"]::file-selector-button:hover {
    border-color: var(--asg-lantern-deep);
}

@media (max-width: 640px) {
    .creator-steps__where span { display: none; }
    .creator-steps__back,
    .creator-steps__next { padding: .5rem .7rem; font-size: .8rem; }
}

.story-readiness {
    border-color: var(--asg-line-strong) !important;
    border-radius: .75rem !important;
    background: var(--asg-ink-3) !important;
}

/* system windows and notices sit on warm ink like the rest of the session */
.sys-popup,
.xp-toast {
    background: rgba(19, 17, 14, .97) !important;
    backdrop-filter: none !important;
    border-radius: .625rem !important;
}