/* wwwroot/css/theragen-shared.css
   Global tokens, base styles, and light utilities for TheraGen.
   NOTE: This is a NON-SCOPED stylesheet. Keep it import-free. */

/* ---------- Design tokens ---------- */
:root{
    --tg-bg-deep:#02111b;
    --tg-bg-soft:#0b2f40;
    --tg-bg-accent:#133c4f;
    --tg-surface:rgba(5,18,26,.92);
    --tg-surface-soft:rgba(5,18,26,.85);

    --tg-card:rgba(5,18,26,.82);
    --tg-card-bright:rgba(255,255,255,.04);
    --tg-line:rgba(255,255,255,.08);

    --tg-primary:#4ce0c6;
    --tg-accent-2:#9cd5ff;
    --tg-accent-warm:#f4c4d7;
    --tg-ink:#ecf8f5;
    --tg-muted:#a9cdd1;

    --tg-radius:28px;
    --tg-radius-sm:18px;

    --tg-shadow:0 25px 80px rgba(0,0,0,.45);
    --tg-shadow-sm:0 12px 32px rgba(2,11,18,.4);
    --tg-shadow-glow:0 18px 60px rgba(10,113,128,.35);

    --tg-focus:0 0 0 3px rgba(76,224,198,.35);
    --tg-font:"Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

    /* Easing functions - matching landing page */
    --tg-ease-soft:cubic-bezier(.4,.14,.2,1);
    --tg-ease-swell:cubic-bezier(.35,.01,.22,1);

    /* Animation timings */
    --tg-glimmer-duration:18s;

    /* Layout tokens (shared across layout & pages) */
    --tg-sidebar-w: 250px;
    --tg-top-h: 56px;
    --tg-composer-h: clamp(72px, 12vh, 96px);

    /* Animation easing — extra durations */
    --tg-ease: cubic-bezier(.2,.8,.2,1);
    --tg-dur-fast: 160ms;
    --tg-dur: 240ms;
}

/* ---------- Base / reset-ish ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;
    min-height:100vh;
    background:radial-gradient(circle at 20% 20%,rgba(76,224,198,.16),transparent 55%),
               radial-gradient(circle at 80% 0,rgba(156,213,255,.15),transparent 55%),
               linear-gradient(135deg,var(--tg-bg-deep),var(--tg-bg-soft));
    color:var(--tg-ink);
    font: 16px/1.55 var(--tg-font);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
body::before{
    content:"";
    position:fixed;
    inset:-25% -10% 0 -10%;
    background:radial-gradient(circle at 70% 20%,rgba(244,196,215,.16),transparent 55%);
    z-index:-1;
    pointer-events:none;
}

/* Typography scale */
h1,h2,h3,h4{font-weight:800; color:var(--tg-ink); margin:.25rem 0}
h1{font-size: clamp(2rem, 3.6vw, 3rem); color:var(--tg-primary)}
h2{font-size: clamp(1.4rem, 2.2vw, 2rem)}
h3{font-size: clamp(1.15rem, 1.6vw, 1.5rem)}
h4{font-size: 1.1rem; font-weight:700}
p{margin:.5rem 0}
small,.text-sm{font-size:.9rem}
.muted,.text-muted{color:var(--tg-muted)}

/* Links */
a{color:var(--tg-accent-2); text-decoration:none; transition:color .3s ease}
a:hover{text-decoration:underline; color:var(--tg-primary)}

/* Focus ring (accessibility) — visible only on keyboard nav */
:where(a, button, [role="button"], input, select, textarea):focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px rgba(76,224,198,.25),
                0 0 16px rgba(76,224,198,.08);
    border-radius: 10px;
    transition: box-shadow .3s var(--tg-ease-soft);
}
/* Keep focus ring on form inputs for all focus types */
:where(input, select, textarea):focus{
    outline:none;
    box-shadow: var(--tg-focus);
    border-radius: 10px;
}

/* ---------- Layout helpers ---------- */
.container{
    width:min(1100px, 92vw);
    margin-inline:auto;
}
.center{text-align:center}
.stack{display:flex; flex-direction:column; gap:1rem}
.inline{display:inline-flex; align-items:center; gap:.5rem}
.space-y-2 > * + *{margin-top:.5rem}
.space-y-3 > * + *{margin-top:.75rem}
.space-y-4 > * + *{margin-top:1rem}
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.layer-1{position:relative; z-index:1}     /* sit above decorative canvases */
.layer-0{position:relative; z-index:0}

/* Screen-reader-only helper */
.sr-only{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Cards ---------- */
.card{
    background:var(--tg-card);
    border:1px solid var(--tg-line);
    border-radius:var(--tg-radius);
    box-shadow:var(--tg-shadow);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: transform .85s var(--tg-ease-swell),
                box-shadow .85s var(--tg-ease-soft),
                border-color .85s var(--tg-ease-soft);
}
.card:hover{
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(0,0,0,.55);
    border-color: rgba(255,255,255,.18);
}
.card-sm{
    border-radius:var(--tg-radius-sm);
    box-shadow:var(--tg-shadow-sm);
}
.card-body{padding: clamp(1.25rem, 3vw, 2rem)}
.card-title{margin:.1rem 0 .35rem; font-weight:800; color:var(--tg-primary)}
.card-subtitle{margin:0 0 1rem; color:var(--tg-muted)}

/* ---------- Buttons ---------- */
.btn{
    --pad-x:1.15rem; --pad-y:.72rem;
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    padding: var(--pad-y) var(--pad-x);
    font-weight:700; letter-spacing:.02em;
    border-radius:999px; border:1px solid transparent;
    text-decoration:none; cursor:pointer; user-select:none;
    transition: transform .4s var(--tg-ease-soft),
                box-shadow .4s var(--tg-ease-soft),
                background .5s var(--tg-ease-soft),
                color .5s var(--tg-ease-soft);
}
.btn:disabled{opacity:.55; cursor:not-allowed}

.btn-primary{
    color:#04181e;
    background:linear-gradient(120deg,var(--tg-primary),var(--tg-accent-2));
    box-shadow:0 15px 35px rgba(76,224,198,.4);
}
.btn-primary:hover:not(:disabled){transform:translateY(-2px)}

.btn-outline, .btn-ghost{
    background:rgba(255,255,255,.04);
    color:var(--tg-ink);
    border-color:rgba(255,255,255,.2);
}
.btn-outline:hover:not(:disabled), .btn-ghost:hover:not(:disabled){
    background:rgba(255,255,255,.12);
}

/* Google button (works for <a> or <button>) */
.btn-google{
    composes: btn btn-primary; /* if your build ignores 'composes', the rules below still apply */
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.65rem 1rem; border-radius:999px;
    background:var(--tg-primary); color:#fff; border:1px solid var(--tg-primary);
}
.btn-google img{width:20px; height:20px; display:block}

/* ---------- Header / hero defaults ---------- */
.site-header{
    display:grid; place-items:center;
    padding: clamp(18px, 2.4vh, 28px) 1rem 0;
}
.site-logo{height:40px; width:auto}

/* Generic hero with breathing room for decorative canvases above */
.hero{
    display:grid; place-items:center;
    padding-top: clamp(96px, 14vh, 160px);
    padding-bottom: .5rem;
}

/* ---------- Utility alerts ---------- */
.alert{
    padding:.65rem .8rem; border-radius:10px; border:1px solid transparent;
}
.alert-error{background:rgba(255,96,96,.12); border-color:rgba(255,96,96,.25); color:#ff8f8f}
.alert-info{background:rgba(76,224,198,.12); border-color:rgba(76,224,198,.3); color:var(--tg-ink)}

/* ---------- Images & media ---------- */
img{max-width:100%; height:auto; border-style:none}

/* ---------- Tables (simple) ---------- */
table{border-collapse:collapse; width:100%}
th,td{padding:.6rem .75rem; border-bottom:1px solid var(--tg-line)}
th{text-align:left; color:var(--tg-muted); font-weight:700}

/* ---------- Forms (light touch) ---------- */
input,select,textarea{
    font:inherit; color:var(--tg-ink);
    background:rgba(255,255,255,.04);
    border:1px solid var(--tg-line);
    border-radius:12px; padding:.65rem .8rem;
}
input:focus,select:focus,textarea:focus{box-shadow:var(--tg-focus); outline:none}

/* ---------- Z-index helpers ---------- */
.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}

/* ---------- Print tweaks ---------- */
@media print{
    .no-print{display:none !important}
    body{background:#fff}
    a{text-decoration:underline}
}

/* ---------- Motion & accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Subtle elevate/press */
.elevate{ transition: transform .25s ease, box-shadow .25s ease }
.elevate:hover{ transform: translateY(-2px); box-shadow: var(--tg-shadow) }
.press:active{ transform: translateY(0) scale(.99) }

/* ---------- Unified type rhythm ---------- */
:root{
    --tg-h1: clamp(1.75rem, 2.6vw, 2.5rem);
    --tg-h2: clamp(1.35rem, 2vw, 1.8rem);
    --tg-h3: clamp(1.15rem, 1.6vw, 1.4rem);
    --tg-text: 16px;
    --tg-leading: 1.55;
    --tg-pad: clamp(14px, 1.8vw, 18px);
}

body{ font: var(--tg-text)/var(--tg-leading) var(--tg-font); letter-spacing:.2px }

/* Headings */
h1{ font-size:var(--tg-h1); color:var(--tg-primary); font-weight:800; }
h2{ font-size:var(--tg-h2); font-weight:800 }
h3{ font-size:var(--tg-h3); font-weight:800 }

/* ---------- Surfaces ---------- */
.surface{ background:var(--tg-card); border:1px solid var(--tg-line); border-radius:var(--tg-radius); box-shadow:var(--tg-shadow); }
.surface-sm{ border-radius:var(--tg-radius-sm); box-shadow:var(--tg-shadow-sm); }

/* Animated vs static logos */
.brand-logo{display:block;height:42px;width:auto}
.brand-logo.static{display:none}
@media (prefers-reduced-motion: reduce){
    .brand-logo.animated{display:none}
    .brand-logo.static{display:block}
}

/* ---------- Buttons (consolidated) ---------- */
.btn{ --pad-x:1rem; --pad-y:.62rem; display:inline-flex; align-items:center; gap:.55rem; padding:var(--pad-y) var(--pad-x); font-weight:800; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, filter .15s ease, box-shadow .2s ease; }
.btn:focus-visible{ box-shadow: var(--tg-focus) }
.btn:active{ transform: translateY(1px) }
.btn-primary{ background:var(--tg-primary); color:#fff; border-color:var(--tg-primary); }
.btn-primary:hover{ filter:brightness(1.06) }
.btn-outline{ background:#fff; color:var(--tg-primary); border-color:var(--tg-primary) }
.btn-outline:hover{ background:rgba(44,114,126,.06) }
.btn-ghost{ background:transparent; color:var(--tg-primary) }

/* ---------- Badges / pills ---------- */
.pill{ display:inline-flex; align-items:center; gap:.4rem; background:#fff; color:var(--tg-primary); border:1px solid var(--tg-line); padding:.35rem .6rem; border-radius:999px; font-weight:700; }

/* ---------- Sidebar pattern ---------- */
.tg-sidebar{ width:260px; background:var(--tg-primary); color:#fff; }
.tg-sidebar a{ color:#fff; }
.tg-sidebar .nav-link{ display:flex; align-items:center; gap:.6rem; padding:.65rem 1rem; border-radius:10rem; transition: background .2s ease, transform .2s ease; }
.tg-sidebar .nav-link:hover{ background:rgba(255,255,255,.08); transform: translateX(2px); }
.tg-sidebar .nav-link.active{ background:#04485D }

/* slide-in panel (account panel) */
.tg-panel{ position:fixed; inset:0 0 0 auto; width:min(360px, 92vw); background:var(--tg-primary); color:#fff; transform: translateX(100%); transition: transform .32s ease; z-index:1110; box-shadow: -12px 0 32px rgba(0,0,0,.2) }
.tg-panel.show{ transform: translateX(0) }
.tg-panel .panel-body{ height:100%; overflow:auto; padding:24px }

/* Backdrop for panels/modals */
.backdrop{ position:fixed; inset:0; background:rgba(2,16,20,.38); opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s step-end; z-index:1100 }
.backdrop.show{ opacity:1; visibility:visible; transition: opacity .25s ease, visibility 0s }

/* ---------- Header bar ---------- */
.tg-topbar{ height:56px; background:var(--tg-primary); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 var(--tg-pad); border-bottom:1px solid rgba(255,255,255,.12); position:sticky; top:0; z-index:10 }
.tg-topbar .logo{ height:34px }

/* ---------- Chat area ---------- */
.tg-chat{ height: calc(100vh - 56px - 86px); /* header + composer */ overflow:auto; padding: 12px clamp(12px,2vw,20px); }
.chat-row{ display:flex; gap:.75rem; margin:.5rem 0; align-items:flex-start; }
.chat-avatar{ width:40px; height:40px; border-radius:50%; overflow:hidden; flex:0 0 40px; }
.chat-bubble{ max-width: min(720px, 70vw); background:#fff; border:1px solid var(--tg-line); border-radius:14px 14px 14px 6px; padding:.6rem .8rem; box-shadow:var(--tg-shadow-sm) }
.chat-bubble.user{ margin-left:auto; background:#dceef7; border-radius:14px 14px 6px 14px }

/* ---------- Composer ---------- */
.tg-composer{ position:sticky; bottom:0; background:#fff; border-top:1px solid var(--tg-line); padding:10px clamp(12px, 2vw, 20px); }
.compose{ position:relative; max-width:1200px; margin-inline:auto; }
.compose textarea{ width:100%; min-height:44px; max-height:160px; resize:vertical; padding:12px 56px 12px 14px; border-radius:999px; border:1px solid var(--tg-line) }
.compose .send{ position:absolute; right:6px; top:50%; transform:translateY(-50%); display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--tg-primary); color:#fff; border:none; }
.compose .send:disabled{ background:#9dbdc3; cursor:not-allowed }

/* ---------- Cards used in subscriptions/account ---------- */
.plan-card{ border:1px solid var(--tg-line); background:#fff; border-radius:16px; padding:18px; width: min(300px, 92vw); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.plan-card:hover{ transform: translateY(-4px); box-shadow: var(--tg-shadow) }
.plan-card.active{ background:linear-gradient(180deg, #2C727E, #145F6D); color:#fff; border-color:transparent }
.plan-card h5{ margin:.25rem 0 .35rem; font-weight:800 }
.plan-card .price{ font-size:1.25rem; font-weight:800 }

/* ---------- Utilities ---------- */
.grid{ display:grid; gap:1rem }
.grid.auto-fit{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.round{ border-radius:999px }
.shadow{ box-shadow:var(--tg-shadow) }
.border{ border:1px solid var(--tg-line) }

/* ---------- Reveal animations (scroll-triggered) ---------- */
.reveal{
    opacity:0;
    transform:translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
}
.reveal.show{
    opacity:1;
    transform:none;
}
.reveal-delay-1{ transition-delay:.1s }
.reveal-delay-2{ transition-delay:.2s }
.reveal-delay-3{ transition-delay:.3s }

/* Fade-in animation for page entry */
@keyframes fadeInUp{
    from{ opacity:0; transform:translateY(20px); }
    to{ opacity:1; transform:translateY(0); }
}
.fade-in-up{
    animation: fadeInUp .6s var(--tg-ease-soft) forwards;
}

/* ---------- Glimmer animation (for headers/accents) ---------- */
@keyframes nav-glimmer{
    0%{ transform:translate(-10%, -10%) scale(1); }
    40%{ transform:translate(5%, 10%) scale(1.08); }
    70%{ transform:translate(15%, -5%) scale(.95); }
    100%{ transform:translate(-5%, -10%) scale(1); }
}
.glimmer::after{
    content:"";
    position:absolute;
    inset:-40% -10%;
    background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 55%),
               radial-gradient(circle at 70% 30%,rgba(76,224,198,.25),transparent 65%);
    opacity:.12;
    filter:blur(60px);
    animation:nav-glimmer var(--tg-glimmer-duration) ease-in-out infinite;
    pointer-events:none;
}

/* ---------- Progress bars ---------- */
.progress-bar{
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,.2);
    overflow:hidden;
}
.progress-bar span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(120deg,var(--tg-primary),var(--tg-accent-warm));
    transition: width 1s var(--tg-ease-soft);
}

/* ---------- Metrics/Stats cards ---------- */
.metric-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--tg-radius-sm);
    padding:1rem;
    transition: transform .6s var(--tg-ease-soft), border-color .6s var(--tg-ease-soft);
}
.metric-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.2);
}
.metric-card strong{
    display:block;
    font-size:2rem;
    color:var(--tg-primary);
}
.metric-card span{
    color:var(--tg-muted);
    font-size:.9rem;
}

/* ---------- Eyebrow text ---------- */
.eyebrow{
    letter-spacing:.3em;
    text-transform:uppercase;
    font-size:.78rem;
    font-weight:700;
    color:var(--tg-primary);
}

/* ---------- Lead text ---------- */
.lead{
    color:var(--tg-muted);
    font-size:1.15rem;
    line-height:1.65;
}

/* ---------- Page content entrance ---------- */
/* backwards (not both): after animation, element reverts to its base style
   (no transform) so it does NOT create a containing block for position:fixed
   modals rendered inside @Body. */
.content{
    animation: fadeInUp .5s var(--tg-ease-soft) backwards;
}