/* WAI - Design System ("2035" round, direct user reference: navy blue +
   orange kept as the brand identity, but navy now used mostly as a very
   light tint (--navy-tint) rather than solid dark panels, and orange is
   reserved for PRIMARY actions only (Submit/Add/Create) - see the
   docblock above .btn-primary below for the full rule. Warm, barely-there
   background texture instead of flat white/gray. */

:root {
    --navy: #0B1D3A;
    --navy-light: #14315C;
    --orange: #FF7A00;
    --orange-light: #FFA366;
    /* NEW ("Theme Engine" round, direct user feedback via "TURUNCU Problemi
       ve TEMALAR ile REVIZYONU.docx": "turuncunun her yerde aynı anda 'ana
       renk' olarak kullanılması" - orange used everywhere at once was the
       actual complaint, not orange itself. --orange/--orange-light stay as
       the literal WAI brand constants (unchanged - Classic/Copper still
       read as "WAI orange"), but every interactive/active/accent style
       below now reads --accent/--accent-light instead of --orange directly.
       In :root these default to the same brand orange, so Classic theme is
       pixel-identical to before. Each of the 7 premium themes overrides
       these 4 tokens below with its own accent color (Arctic → blue, Pearl
       → champagne/gold, Aurora → violet, etc. - see the mockup this was
       built from), so switching themes now actually re-colors buttons,
       active tabs, badges and focus rings instead of leaving them orange
       regardless of theme. --accent-rgb/--accent-light-rgb exist purely so
       the many existing rgba(255,122,41,X) translucency effects can become
       rgba(var(--accent-rgb),X) and theme correctly too. */
    --accent: var(--orange);
    --accent-light: var(--orange-light);
    --accent-rgb: 255,122,41;
    --accent-light-rgb: 255,163,102;
    /* NEW ("2035" round): navy used as an ambient tint, not a solid fill -
       this is what makes cards/badges/hover states feel "premium" instead
       of loud, per the direct reference: "navy blue az gozukecek, ...
       #EDF3FA gibi navy'nin cok acik tonu". */
    --navy-tint: #EDF3FA;
    --navy-tint-2: #E3ECF8;
    --warm-white: #FFFFFF;
    --soft-gray: #E9EDF4;
    --light-stone: #F1F4F8;
    --bg: #F7F9FC;
    --card: #FFFFFF;
    --border: #E5E8EE;
    --text: #1A2233;
    --text-muted: #6B7280;
    --radius: 10px;
    /* CHANGED (task #540, "C WAI Design.docx" section 23 "Border Radius" -
       explicit spec: "Card 10-14px" vs the old 16px used site-wide since
       the "2035" round. Moved to 12px, the midpoint of the doc's range -
       single-variable change, every card/panel already reads --card-radius
       instead of a hardcoded value, so nothing else needed touching. Modal
       radius (14px, hardcoded in a few places like .login-card/.upgrade-icon
       wrappers) already matched the doc's "Modal 14px" spec exactly, left
       as-is. */
    --card-radius: 12px;

    /* "2035 UI" pass - a small, additive depth/motion system layered on TOP
       of the existing navy/orange identity - nothing above this line
       changed, so nothing that already works can break. These tokens get
       reused across composer/sidebar/buttons/cards below instead of each
       spot inventing its own shadow/gradient by hand. */
    --radius-lg: 18px;
    /* CHANGED (Theme Engine round): 2-stop gradient built from --accent/
       --accent-light instead of 3 hardcoded orange hex stops - this one
       definition now re-themes automatically everywhere .btn-primary/active
       tabs/etc. use it, since --accent and --accent-light are what change
       per theme below. */
    --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    --grad-navy: linear-gradient(165deg, #0B1E3D 0%, #0E2749 55%, #14315C 100%);
    --shadow-sm: 0 1px 2px rgba(11,30,61,0.06), 0 1px 1px rgba(11,30,61,0.04);
    --shadow-md: 0 8px 24px rgba(11,30,61,0.10), 0 2px 6px rgba(11,30,61,0.06);
    --shadow-lg: 0 20px 48px rgba(11,30,61,0.16), 0 6px 16px rgba(11,30,61,0.08);
    --shadow-glow: 0 0 0 4px rgba(var(--accent-rgb),0.14);
    --ease: cubic-bezier(.2,.8,.2,1);

    /* NEW (Hybrid Design Language rollout, task #750 - direct user approval
       after reviewing WAI_Hybrid_Design_Prototype.html: "en küçüğü ve
       kullanıcının göreceği bu, buna geçelim"): the prototype's core visual
       signature - a frosted-glass card surface (translucent + blurred,
       "one box style only" per the prototype's own design-rule footer) -
       ported onto .profile-form below, the single shared card class already
       reused across My Profile, every My Personal OS tab, Advanced Tools,
       Company Registry and most module panels (see task #443's "shared WAI
       card-design component CSS library"). Deliberately built with
       color-mix() against var(--card)/var(--border) instead of a hardcoded
       white rgba like the prototype used, so it works correctly across all
       8 Appearance themes (Classic/Wood/Arctic/Pearl/Stone/Linen/Copper/
       Aurora) AND Dark mode with zero per-theme overrides needed - every
       theme's own --card/--border color still shows through, just softened
       and blurred rather than flat. This is a scoped, single-class rollout
       of the design language (the smallest, most visible slice per direct
       user instruction) - not the full mode-based Simply/Advanced/Quantum
       atmosphere-swap from the prototype, since that mechanism doesn't
       apply anymore (the AI page's mode switcher itself was removed in task
       #812; Quantum Sync's dark "atmosphere" already exists as Dark mode). */
    --surface-blur: 18px;
    --shadow-frosted: 0 8px 30px rgba(11,30,61,0.05), 0 1px 2px rgba(11,30,61,0.03);
}

/* NEW (this round): the dark theme selected from Settings > Appearance - a
   real theme option like in Claude/Gemini. Activated via html[data-theme="dark"],
   remembered in localStorage by JS (app.js applyTheme()). Only the
   background/card/text colors change, so the navy/orange color identity
   stays the same. */
html[data-theme="dark"] {
    --bg: #0F1420;
    --card: #1A2233;
    --border: #2B3348;
    --text: #E8EBF2;
    --text-muted: #9AA3B8;
}
html[data-theme="dark"] .sidebar {
    background: #0B0F18;
}

/* REWRITE (task #539, "WAI 7 Thema for APP.pdf" - direct user instruction:
   "bu 7 thema ilk sırada ve çok önemli, mevcut dizaynımızı 8. thema olacak
   şekilde düzenleme yap"): the old 5-option engine (Clean White/Aurora/Soft
   Glass/Arctic/Executive) is replaced by 8 options - the 7 new premium
   "material" themes from the PDF (Wood/Arctic/Pearl/Stone/Linen/Copper/
   Aurora, each with real hex values straight from the doc's [data-theme="x"]
   CSS blocks) listed FIRST in the picker (see index.php), plus the site's
   existing look kept exactly as-is and renamed "Classic" as the 8th/last
   option (data-visual-theme="classic") - nobody loses the current design,
   it just moved to the end of the row per the user's instruction.
   WAI Navy (#0B1D3A) and WAI Orange (#FF7A00) are brand constants and stay
   identical across every theme (per the doc: "Button.Primary her temada
   aynı davranacak") - only surface/border/text/background-texture change.
   Applied via html[data-visual-theme="..."], persisted in localStorage
   exactly like before (see applyVisualTheme()/THEME2_KEY in app.js) - picks
   a theme, it stays until the member changes it again. Light-mode-only by
   design (see the html[data-theme="light"] prefix on every rule) - a warm
   walnut or copper wash behind Dark mode would clash; Dark mode keeps its
   own single flat palette regardless of which of these 8 is selected. Real
   photographic textures (e.g. the doc's wood-texture.png) aren't available
   as assets here, so each theme's "Texture" spec is approximated with a
   pure-CSS layered gradient using the same material's color notes instead -
   documented per theme below. */
html[data-theme="light"][data-visual-theme="classic"] body {
    background: var(--bg);
}

/* 01 - WAI WOOD (Heritage Intelligence) */
html[data-theme="light"][data-visual-theme="wood"] {
    --bg: #F4EEE5;
    --card: #FFF9F1;
    --border: #CDBBA5;
    --text: #1B1A18;
    --text-muted: #655D53;
    --shadow-md: 0 4px 16px rgba(27,26,24,0.08);
    /* Theme Engine round: warm walnut/copper accent - close cousin of WAI
       orange but muted, matches "Warm / human / personal, orange çok az". */
    --accent: #A9683C;
    --accent-light: #C68F5C;
    --accent-rgb: 169,104,60;
    --accent-light-rgb: 198,143,92;
}
html[data-theme="light"][data-visual-theme="wood"] body {
    background:
        repeating-linear-gradient(90deg, rgba(140,100,60,0.025) 0px, rgba(140,100,60,0.025) 2px, transparent 2px, transparent 34px),
        linear-gradient(180deg, #FFF9F1 0%, #F4EEE5 100%);
}

/* 02 - WAI ARCTIC (Pure Intelligence) */
html[data-theme="light"][data-visual-theme="arctic"] {
    --bg: #F7FAFD;
    --card: #FFFFFF;
    --border: #DCE5EF;
    --text: #142033;
    --text-muted: #64748B;
    --shadow-md: 0 2px 12px rgba(16,24,40,0.04);
    /* Theme Engine round: cool blue accent - "AI / clean / futuristic,
       orange minimal", the doc's own recommended WAI default. */
    --accent: #2D6CDF;
    --accent-light: #6FA0FF;
    --accent-rgb: 45,108,223;
    --accent-light-rgb: 111,160,255;
}
html[data-theme="light"][data-visual-theme="arctic"] body {
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.95), transparent 45%),
        linear-gradient(135deg, #F8F8FF 0%, #EEF4FA 100%);
}

/* 03 - WAI PEARL (Executive Intelligence) */
html[data-theme="light"][data-visual-theme="pearl"] {
    --bg: #F8F6F2;
    --card: #FFFDFC;
    --border: #DDD9D1;
    --text: #20242A;
    --text-muted: #6D7278;
    --shadow-md: 0 2px 8px rgba(20,25,30,0.06);
    /* Theme Engine round: champagne/gold accent - "Premium / executive,
       orange minimal". */
    --accent: #B98A3D;
    --accent-light: #D9B876;
    --accent-rgb: 185,138,61;
    --accent-light-rgb: 217,184,118;
}
html[data-theme="light"][data-visual-theme="pearl"] body {
    background:
        radial-gradient(ellipse at 30% 15%, rgba(255,255,255,0.95), transparent 50%),
        #F8F6F2;
}

/* 04 - WAI STONE (Architecture Intelligence) */
html[data-theme="light"][data-visual-theme="stone"] {
    --bg: #F3F1EC;
    --card: #FCFBF8;
    --border: #D5D1C8;
    --text: #222521;
    --text-muted: #626761;
    --shadow-md: 0 3px 10px rgba(34,37,33,0.08);
    /* Theme Engine round: muted slate accent - "Serious / professional,
       orange çok az". */
    --accent: #57616F;
    --accent-light: #8A93A0;
    --accent-rgb: 87,97,111;
    --accent-light-rgb: 138,147,160;
}
html[data-theme="light"][data-visual-theme="stone"] body {
    background:
        radial-gradient(circle at 25% 30%, rgba(0,0,0,0.02) 1px, transparent 1px) 0 0/18px 18px,
        #F3F1EC;
}

/* 05 - WAI LINEN (Human Intelligence) */
html[data-theme="light"][data-visual-theme="linen"] {
    --bg: #F7F3EC;
    --card: #FFFDF8;
    --border: #DDD5C8;
    --text: #24231F;
    --text-muted: #6D685F;
    --radius: 10px;
    --shadow-md: 0 4px 12px rgba(36,35,31,0.06);
    /* Theme Engine round: soft terracotta accent - "Soft / personal,
       orange soft". */
    --accent: #C08462;
    --accent-light: #DDAE93;
    --accent-rgb: 192,132,98;
    --accent-light-rgb: 221,174,147;
}
html[data-theme="light"][data-visual-theme="linen"] body {
    background:
        repeating-linear-gradient(0deg, rgba(80,70,60,0.018) 0px, rgba(80,70,60,0.018) 1px, transparent 1px, transparent 4px),
        repeating-linear-gradient(90deg, rgba(80,70,60,0.018) 0px, rgba(80,70,60,0.018) 1px, transparent 1px, transparent 4px),
        #F7F3EC;
}

/* 06 - WAI COPPER (Energy Intelligence) */
html[data-theme="light"][data-visual-theme="copper"] {
    --bg: #F5F3EF;
    --card: #FFFCF8;
    --border: #D8D3CB;
    --text: #202328;
    --text-muted: #666A6E;
    --shadow-md: 0 4px 14px rgba(32,35,40,0.08);
    /* Theme Engine round: "WAI brand / distinctive, orange daha fazla" -
       the one theme (besides Classic) that keeps the brand orange front and
       center, just warmed toward true copper. */
    --accent: #D9773F;
    --accent-light: #F0A876;
    --accent-rgb: 217,119,63;
    --accent-light-rgb: 240,168,118;
}
html[data-theme="light"][data-visual-theme="copper"] body {
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0px, rgba(255,255,255,0.5) 1px, rgba(181,106,58,0.03) 2px, transparent 4px),
        #F5F3EF;
}
html[data-theme="light"][data-visual-theme="copper"] .btn-primary,
html[data-theme="light"][data-visual-theme="copper"] .upgrade-icon {
    box-shadow: 0 0 0 1px rgba(181,106,58,0.35) inset;
}

/* 07 - WAI AURORA (Future Intelligence) */
html[data-theme="light"][data-visual-theme="aurora"] {
    --bg: #F7F9FC;
    --card: #FFFFFF;
    --border: #E1E7EF;
    --text: #111827;
    --text-muted: #667085;
    --shadow-md: 0 4px 16px rgba(17,24,39,0.05);
    /* Theme Engine round: violet accent (gradient toward sky-blue via
       --accent-light) - "AI / dynamic / futuristic". */
    --accent: #7C6FEF;
    --accent-light: #6EA8F7;
    --accent-rgb: 124,111,239;
    --accent-light-rgb: 110,168,247;
}
html[data-theme="light"][data-visual-theme="aurora"] body {
    background:
        radial-gradient(circle at 15% 20%, rgba(191,215,255,0.35), transparent 35%),
        radial-gradient(circle at 85% 30%, rgba(221,210,255,0.28), transparent 35%),
        radial-gradient(circle at 70% 80%, rgba(255,217,192,0.25), transparent 30%),
        #F7F9FC;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* REMOVED (task #1030 round, direct repeated user report: two light
       oval shapes on screen since the "2035" round) - see the matching
       docblock in assets/css/style.css for the full explanation. */
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ---------- Login (Claude/Gemini-style: not a mandatory gate, a modal that
   opens on request - everyone can see the app as a guest first) ---------- */
#login-screen {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 30, 61, 0.72);
    backdrop-filter: blur(2px);
}

.login-modal-close {
    position: absolute;
    top: 24px;
    right: 28px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
}
.login-modal-close:hover { opacity: 1; }

/* BUG FIX (direct user report - login modal looked "twice as tall as the
   screen", content unreachable): .login-card had no max-height/overflow, and
   its parent #login-screen is align-items:center inside a position:fixed
   overlay - fine when the content is short, but this card now stacks a
   220px logo + language selector + Log in/Create account buttons + a
   divider + up to 5 OAuth provider buttons + a caption line. On any laptop
   with a viewport shorter than the card's natural height, the centered card
   overflows equally top AND bottom with NO scrollbar anywhere to reach the
   cut-off parts (position:fixed can't scroll on its own). Same root cause
   class as the one .settings-card-wide already solves below (max-height +
   overflow-y:auto) - applying the same fix here. */
.login-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 48px 40px;
    width: 360px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    max-height: 92vh;
    overflow-y: auto;
}

/* ---------- Upgrade modal ("Commercial OS" round, doc's "Payment
   Suggestions"/"Dynamic Offers" concept) - reuses #login-screen's overlay
   position and .login-card's card chrome, only adds what's new. ---------- */
#upgrade-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 30, 61, 0.72);
    backdrop-filter: blur(2px);
}
/* BUG FIX (same root cause as .login-card above): guard against tall content in a short viewport. */
.upgrade-card { width: 380px; max-height: 92vh; overflow-y: auto; }
.upgrade-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.2), rgba(var(--accent-rgb),0.06));
}
.upgrade-bonus-line {
    margin: 10px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(var(--accent-rgb),0.08);
    border-radius: 8px;
    padding: 7px 10px;
}
.upgrade-amount-row { justify-content: center; margin-top: 18px; }
.upgrade-amount-btn { min-width: 64px; font-weight: 700; }
#upgrade-modal-other-ways { display: inline-block; margin-top: 16px; font-size: 12.5px; }

/* FIXED (direct user report + live devtools reproduction, "yeni eklediğin
   ve telefon ile simgelediğin görüntü... sağdaki iconların yanında olmalı,
   not: mevcutta soldaki iconların altında"): this button had never actually
   been given the composer's absolute/34px-circle treatment (the exact same
   ZERO-CSS gap the docgen/docbrand/videogen/xlsxgen family's own docblock
   above already documents fixing once) - it was rendering as a plain
   in-flow <button>, which (a) pushed .ai-input-wrap taller than the
   textarea itself, visually detaching the whole icon row from the bottom
   of the box (the "icons look like they moved outside the box" complaint),
   and (b) sat wherever normal document flow put it, underneath the
   left-side W/attach family instead of with the right-side row it belongs
   to. Continuing the exact right-side 42px-step pattern (send:12, mic:54,
   imagegen:96, voice-mode:138) at the next step fixes both at once. */
.ai-voicecall-btn {
    position: absolute;
    right: 180px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.ai-voicecall-btn:hover { border-color: var(--orange-light, #FF7A29); }

/* NEW (task #888 follow-up, direct user complaint: "PDF i ekrana sığacak
   kadar büyütsen mi" - the generated-document PDF preview, task #780/#881,
   had never been given ANY CSS at all, so <embed> fell back to the
   browser's tiny intrinsic default size instead of filling the result
   panel). Sized to comfortably fill the panel while still leaving room for
   the download button beneath it; capped at a sane max-height so a single
   short document doesn't stretch the whole page. */
.ai-generated-doc-preview {
    width: 100%;
    height: 70vh;
    max-height: 820px;
    min-height: 420px;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: block;
}
@media (max-width: 640px) {
    .ai-generated-doc-preview { height: 55vh; min-height: 320px; }
}

/* ---------- Live Voice call modal (task #867/#874) - same overlay/card
   chrome as #upgrade-modal above, new content only. ---------- */
#voice-call-modal {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 30, 61, 0.82);
    backdrop-filter: blur(3px);
}
.voice-call-card { width: 360px; max-height: 92vh; overflow-y: auto; }
.voice-call-live-view { display: flex; flex-direction: column; align-items: center; }

/* Simple 3-state orb (idle/listening/speaking) - deliberately reuses the
   same visual language as WAI Sense's orb concept (pulsing ring) rather
   than inventing a fourth distinct "state system" in the codebase, just
   collapsed to the 3 states a phone-call UI actually needs. */
.voice-call-orb {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 8px auto 18px;
}
.voice-call-orb-core {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb),0.6));
    box-shadow: 0 0 24px rgba(var(--accent-rgb),0.5);
}
.voice-call-orb-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(var(--accent-rgb),0.35);
}
.voice-call-orb-idle .voice-call-orb-ring { opacity: 0.4; }
.voice-call-orb-listening .voice-call-orb-ring {
    animation: voiceOrbPulse 1.6s ease-in-out infinite;
}
.voice-call-orb-speaking .voice-call-orb-ring {
    animation: voiceOrbPulse 0.7s ease-in-out infinite;
    border-color: rgba(var(--accent-rgb),0.7);
}
.voice-call-orb-speaking .voice-call-orb-core { box-shadow: 0 0 36px rgba(var(--accent-rgb),0.75); }
@keyframes voiceOrbPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.18); opacity: 0.9; }
}

.voice-call-status { font-weight: 700; margin: 0 0 4px; }
.voice-call-timer { font-size: 13px; color: var(--text-dim, #7a8699); margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.voice-call-quota-hint { font-size: 11.5px; color: var(--text-dim, #7a8699); margin: 0 0 18px; }
.voice-call-controls { display: flex; gap: 14px; justify-content: center; }
.voice-call-mute-btn, .voice-call-end-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, background 0.15s;
}
.voice-call-mute-btn { background: rgba(var(--accent-rgb),0.12); color: var(--text); }
.voice-call-mute-btn.is-muted { background: rgba(220,80,80,0.18); color: #d84545; }
.voice-call-end-btn { background: #d84545; color: #fff; }
.voice-call-mute-btn:hover, .voice-call-end-btn:hover { transform: scale(1.06); }
.voice-call-gate-view .btn { margin-top: 12px; }

/* NEW (task #867/#875): My Credit's Live Voice quota meter - a plain
   progress bar, same weight as the existing plan-usage bar elsewhere in
   the app, no new component invented. */
.voice-quota-bar-track {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(var(--accent-rgb),0.12);
    overflow: hidden;
}
.voice-quota-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--accent);
    transition: width 0.3s ease;
}
.voice-quota-bar-fill.is-low { background: #d84545; }

/* NEW (task #536, "WAI Beni Tanısın" design doc): the post-registration
   "Personalize WAI" step - reuses #login-screen/.login-card's exact overlay
   and card chrome, only adds what's new (wider card + left-aligned question
   blocks, since 5 questions of chip rows read poorly centered). */
#personalize-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 30, 61, 0.72);
    backdrop-filter: blur(2px);
}
.personalize-card { width: 560px; max-height: 92vh; overflow-y: auto; }
.personalize-q { text-align: left; margin-top: 20px; }
.personalize-q-label { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.personalize-q-label .hint { font-weight: 400; font-size: 12px; }
.personalize-q .prompt-chip-row + .prompt-chip-row { margin-top: 8px; }

/* NEW (task #539, "WAI Beni Tanısın" design doc, stage 2): entry card sits
   above Identity inside #pos-content (see index.php), styled as a quiet,
   distinct invite rather than another data-entry card - reuses .pos-card's
   base look but centers everything since there's no form here. */
.beni-tanisin-entry { text-align: center; padding: 22px 20px; }
.beni-tanisin-icon { font-size: 26px; margin-bottom: 6px; }
/* NEW (real logo swap, replacing the ✦ glyph): fills the existing
   .upgrade-icon 56x56 rounded-square wrapper with the real W mark instead
   of a text character. */
.beni-tanisin-icon-wrap { padding: 8px; }
.beni-tanisin-logo-img { width: 100%; height: 100%; object-fit: contain; }
/* BUG FIX (direct user report - the entry card above the modal still showed
   the ✦ glyph after the modal's own icon was already fixed, because this is
   a separate element with no size/centering rules of its own): a standalone
   sized+centered logo image for the .beni-tanisin-entry card specifically. */
.beni-tanisin-entry-logo { width: 40px; height: 40px; object-fit: contain; margin: 0 auto 6px; display: block; }

/* BUG FIX (direct user report, screenshot: a tiny box with up/down arrows
   sat where the answer textarea should be, next to a huge orange button -
   looked like a broken "slider" widget). Root cause: .btn-primary is
   globally width:100% (correct for the stacked auth-screen buttons it was
   written for), but inside this flex row that fights the textarea's flex:1
   for space - the button wins almost all of the row's width, squeezing the
   textarea down to a sliver that only shows its native scrollbar (which
   looks like up/down arrows). Same root-cause class applies to
   .agent-run-card's "Run agent" button, but that one is NOT in a flex row
   next to an input, so it is unaffected. */
.beni-tanisin-input-row .btn-primary { width: auto; flex-shrink: 0; }
.beni-tanisin-textarea { min-width: 0; }

/* Chat modal - reuses #personalize-modal's overlay pattern, only the id
   differs so both can exist independently without CSS collisions. */
#beni-tanisin-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 30, 61, 0.72);
    backdrop-filter: blur(2px);
}
.beni-tanisin-card { width: 520px; max-height: 92vh; overflow-y: auto; }
.beni-tanisin-log {
    text-align: left;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.beni-tanisin-msg { padding: 9px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; max-width: 88%; }
.beni-tanisin-msg-wai { align-self: flex-start; background: rgba(11,30,61,0.06); color: var(--text); border-bottom-left-radius: 4px; }
.beni-tanisin-msg-me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
/* NEW (task #542-545, Agents feature): one shared run modal for every card
   in #view-agents (#agents-grid below) - reuses the exact same overlay/card
   pattern as #beni-tanisin-modal above (same z-index, same overlay tint), so
   it looks and behaves consistently with every other modal in the app rather
   than introducing a new visual language. */
#agent-run-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 30, 61, 0.72);
    backdrop-filter: blur(2px);
}
.agent-run-card { width: 480px; max-height: 92vh; overflow-y: auto; }
#agent-run-icon { font-size: 26px; }
#agents-grid .workspace-card-icon { font-size: 22px; }

/* NEW (direct user demand: "geniş ferah window" for the 23 My Personal OS
   modules - see index.php's #pos-module-modal comment for the full
   reasoning). Reuses #agent-run-modal's exact overlay pattern (same z-index,
   same backdrop tint) so it looks consistent with every other modal, just a
   noticeably wider card since these forms have multiple fields side by
   side (.profile-grid) - .agent-run-card's 480px felt cramped for that. */
#pos-module-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 30, 61, 0.72);
    backdrop-filter: blur(2px);
}
.pos-module-modal-card { width: min(760px, 92vw); max-height: 88vh; overflow-y: auto; text-align: left; }

/* NEW (direct user request, admin-unlock round): small self-contained
   password prompt for #account-menu-admin-unlock-btn - see index.php's
   #admin-unlock-modal markup and wireAccountMenu() in app.js. Same fixed-
   overlay-plus-centered-card pattern as #pos-module-modal above, but fully
   self-contained (own card chrome) since it doesn't reuse .profile-form. */
.admin-unlock-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 30, 61, 0.72);
    backdrop-filter: blur(2px);
}
.admin-unlock-modal-overlay.hidden { display: none !important; }
.admin-unlock-modal-card {
    width: min(380px, 90vw);
    background: var(--surface, #fff);
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    text-align: left;
}
.admin-unlock-modal-card h3 { margin: 0 0 6px; font-size: 17px; }
.admin-unlock-modal-hint { margin: 0 0 14px; font-size: 13px; opacity: 0.7; }
.admin-unlock-modal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.15);
    font-size: 14px;
    margin-bottom: 8px;
}
.admin-unlock-modal-error {
    font-size: 12.5px;
    color: #d33;
    margin-bottom: 8px;
}
.admin-unlock-modal-error.hidden { display: none; }
.admin-unlock-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}
.admin-unlock-modal-btn-cancel {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13.5px;
    cursor: pointer;
}
.admin-unlock-modal-btn-cancel:hover { background: rgba(0,0,0,0.05); }
/* FIX (direct user screenshot comparison - form fields inside the modal
   rendering with zero styling): #pos-module-modal-body now carries
   class="profile-form" (index.php) so its label/input/select/textarea
   inherit the real typography and field styling everywhere else in the app
   uses (see .profile-form label / .profile-form input,select,textarea
   above). But .profile-form ALSO draws its own card chrome (background/
   border/shadow/padding/max-width) - redundant here since
   .pos-module-modal-card (the modal itself) already IS that card, and
   stacking both would read as a card nested inside a card. This neutralizes
   just the outer-card part while keeping the label/input rules intact. */
.pos-module-modal-card .profile-form {
    max-width: none;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
/* NEW (cross-module sync round, direct user request: "window ona göre
   büyütülebilir, güzelleştirilebilir ve arka fonda WHT logosu veya konu
   ile ilgili image olabilir"): Transactions is the one module (so far)
   with a real computed summary worth showing at a glance (the monthly
   balance panel below), so it gets a wider card + a very faint brand
   watermark in the corner - never a literal placeholder-text kind of
   "example" image, just WAI's own mark at low opacity, purely decorative
   and never overlapping the readable content (z-index below everything,
   generous padding). Every other of the 23 modules is untouched. */
#pos-module-modal.pos-module-modal-finance .pos-module-modal-card {
    width: min(880px, 94vw);
    position: relative;
}
#pos-module-modal.pos-module-modal-finance .pos-module-modal-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/brand/logo-icon-64.png');
    background-repeat: no-repeat;
    background-position: right -30px bottom -30px;
    background-size: 220px;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}
#pos-module-modal.pos-module-modal-finance .pos-module-modal-card > * {
    position: relative;
    z-index: 1;
}
.pos-module-modal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pos-module-modal-icon { font-size: 28px; line-height: 1; }
.pos-module-modal-header h2 { margin: 0; font-size: 19px; }
.pos-module-privacy-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-muted);
    background: rgba(11,30,61,0.05);
    border-radius: 10px;
    padding: 9px 12px;
    margin: 0 0 16px;
}
/* NEW ("hepsini yapabilir misin ekleyebilir misin bir oturumda" round):
   shared still-frame capture modal for "Point camera & ask" / "Share screen
   & ask" - see #wai-capture-modal in index.php and openWaiCaptureModal()/
   wireWaiCaptureModal() in app.js. Reuses .pos-module-modal-header/-icon and
   .pos-module-privacy-banner above for visual consistency with the rest of
   the modal system rather than inventing new header/banner styles. */
.wai-capture-modal-card { width: min(560px, 92vw); text-align: left; }
.wai-capture-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #0b1e3d;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wai-capture-stage video,
.wai-capture-stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#wai-capture-error { margin-top: 10px; }

/* Zero-knowledge vault modules (Password Vault, Emergency & Legacy) get a
   visually distinct, stronger-confidence treatment than the standard
   "private to your account" banner - see openPosModule() in app.js. */
.pos-module-privacy-banner.pos-module-privacy-vault {
    color: #22a765;
    background: rgba(34,167,101,0.1);
    font-weight: 600;
}

.beni-tanisin-inferences { text-align: left; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.beni-tanisin-inference-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(var(--accent-rgb),0.08);
    border-radius: 10px;
    padding: 8px 10px;
}
.beni-tanisin-inference-text { flex: 1 1 200px; font-size: 12.5px; color: var(--text); }
.beni-tanisin-inference-row.is-confirmed { background: rgba(34,167,101,0.12); }
.beni-tanisin-inference-row.is-confirmed .beni-tanisin-inference-text::after { content: ' ✓ remembered'; color: #22a765; font-weight: 700; }
.beni-tanisin-inference-row.is-declined { opacity: 0.55; }
.beni-tanisin-inference-row.is-declined .beni-tanisin-inference-text::after { content: ' - not saved'; font-style: italic; }
.beni-tanisin-input-row { display: flex; gap: 8px; margin-top: 14px; align-items: flex-end; }
.beni-tanisin-textarea {
    flex: 1;
    resize: none;
    border: 1px solid rgba(11,30,61,0.15);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13.5px;
    font-family: inherit;
}
.btn-chip {
    border: 1px solid rgba(11,30,61,0.18);
    background: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.btn-chip.beni-tanisin-yes:hover:not(:disabled) { border-color: #22a765; color: #22a765; }
.btn-chip.beni-tanisin-no:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-chip:disabled { opacity: 0.5; cursor: default; }

/* REWRITE (this round): #admin-login-screen removed entirely - admin login
   no longer lives inside the main app at all (see WAI_Admin.php). */

/* Sidebar guest CTA - shown in place of the identity-badge */
.guest-login-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 18px;
}
.guest-login-btn:hover { opacity: .92; }

/* ---------- Settings modal (equivalent of Gemini's account-icon -> settings panel) ---------- */
#settings-modal,
#set-plan-modal,
#recent-chats-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 30, 61, 0.72);
    backdrop-filter: blur(2px);
}
/* ---------- Recent chats modal (task #1044, "Grok-style history" round;
   REDESIGNED task #1046 into a wide 2-pane layout - see the markup comment
   in index.php for the full rationale) - the search box + date-grouped
   list are the EXACT markup that used to live permanently inline in the
   sidebar (#sidebar-search-row/#sidebar-recent), just relocated here - same
   ids, so renderRecentList()/wireSidebarSearchToggle() in app.js need no
   changes. ---------- */
/* Compound selector (.settings-card.recent-chats-card-split), not just
   .recent-chats-card-split alone - .settings-card's own width/padding/
   flex-direction rule sits LATER in this file (equal specificity, so
   source order would otherwise let it win and silently undo this
   override). Two classes on one selector always beats .settings-card's
   one, regardless of order. */
.settings-card.recent-chats-card-split {
    width: 960px;
    max-width: 94vw;
    height: 78vh;
    max-height: 720px;
    padding: 0;
    flex-direction: row;
    overflow: hidden;
}
.recent-chats-list-pane {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 28px 20px 20px;
    border-right: 1px solid var(--border);
    overflow: hidden;
}
.recent-chats-header-compact { margin: 0 0 12px; }
.recent-chats-header-compact h2 { margin: 0; }
.recent-chats-card .sidebar-search-row {
    margin: 4px 0 14px;
    flex-shrink: 0;
}
.recent-chats-modal-body {
    flex: 1;
    overflow-y: auto;
}
/* Sidebar-scoped chrome (dark-navy sidebar background, light text) doesn't
   apply inside this light settings-card - restyle the search row + recent
   list to match the card's own light theme instead of the sidebar's. */
.recent-chats-card .sidebar-search-row { background: transparent; }
.recent-chats-card .sidebar-search-icon {
    background: var(--light-stone);
    color: var(--navy, #0B1E3D);
}
.recent-chats-card .sidebar-search {
    background: var(--light-stone);
    color: var(--navy, #0B1E3D);
    border: 1px solid var(--border);
}
.recent-chats-card .gemini-nav-label { color: var(--text-muted, #6B7686); }
/* .recent-item/.recent-delete-btn/.gemini-recent-empty default to light-on-
   dark colors (#C7CEDD etc.) tuned for the navy sidebar background - nearly
   invisible on this light settings-card, so restyle for dark text here. */
.recent-chats-card .recent-item {
    color: var(--navy, #0B1E3D);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.recent-chats-card .recent-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recent-chats-card .recent-item-time {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted, #6B7686);
}
.recent-chats-card .recent-item:hover { background: var(--light-stone); color: var(--navy, #0B1E3D); }
/* NEW (task #1046): the selected row (previewed on the right) gets the
   same accent treatment as an active sidebar nav-group, so it's obvious
   which conversation the preview pane is currently showing. */
.recent-chats-card .recent-item-row.active .recent-item {
    background: var(--light-stone);
    box-shadow: inset 3px 0 0 var(--accent);
}
.recent-chats-card .recent-delete-btn,
.recent-chats-card .recent-rename-btn { color: var(--text-muted, #6B7686); }
.recent-chats-card .recent-rename-btn:hover { background: rgba(11,30,61,0.08); color: var(--navy, #0B1E3D); }
.recent-item-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.recent-chats-card .gemini-recent-empty { color: var(--text-muted, #6B7686); }

/* Right pane: live preview of whichever row is selected on the left - see
   selectRecentPreview()/renderRecentPreviewContent() in app.js. */
.recent-chats-preview-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 28px 28px 20px;
    overflow-y: auto;
}
.recent-chats-preview-empty {
    margin: auto;
    text-align: center;
    color: var(--text-muted, #6B7686);
}
.recent-chats-preview-empty-icon { font-size: 34px; display: block; margin-bottom: 10px; opacity: .6; }
.recent-chats-preview-content.hidden,
.recent-chats-preview-empty.hidden { display: none; }
.recent-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.recent-preview-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--navy, #0B1E3D);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recent-preview-open-btn {
    flex-shrink: 0;
    background: var(--grad-accent, var(--accent));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.recent-preview-open-btn:hover { opacity: .92; }
.recent-preview-loading { color: var(--text-muted, #6B7686); font-size: 13px; }
.recent-preview-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.recent-preview-bubble {
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    max-width: 92%;
}
.recent-preview-bubble-user {
    align-self: flex-end;
    background: var(--grad-accent, var(--accent));
    color: #fff;
}
.recent-preview-bubble-assistant {
    align-self: flex-start;
    background: var(--light-stone);
    color: var(--navy, #0B1E3D);
}
.recent-preview-bubble-topic {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .75;
    margin-bottom: 4px;
}

@media (max-width: 860px) {
    .recent-chats-card-split {
        flex-direction: column;
        width: 94vw;
        height: 86vh;
    }
    .recent-chats-list-pane {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 45vh;
    }
    .recent-chats-preview-pane { padding: 20px; }
}
/* BUG FIX (same root cause as .login-card above): guard against tall content in a short viewport. */
.settings-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 36px 32px;
    width: 340px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 92vh;
    overflow-y: auto;
}
.settings-card h2 { margin: 0 0 14px; font-size: 18px; color: var(--navy); }
.settings-link {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 12px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}
.settings-link:hover { background: #F2F4F8; }
.settings-link.danger { color: #D64545; }

/* NEW (this round): Settings is now split into sections like in Claude/Gemini
   (Account/Appearance/AI behavior/Data & Privacy/About) - it used to be 5
   plain links stacked in a row, looking more like a menu than a real settings
   screen. */
.settings-card-wide {
    width: 420px;
    max-height: 82vh;
    overflow-y: auto;
}
.settings-section {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 10px;
}
.settings-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.settings-section h3 {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
/* NEW (Roadmap task #563): a lighter-weight sub-heading for grouping toggles
   inside an existing settings-section (Data & Privacy > Permissions), without
   the visual weight of a full new .settings-section h3. */
.settings-subheading {
    margin: 14px 0 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.settings-account-line {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 8px;
    font-size: 14px;
}
.settings-account-email { color: var(--text-muted); font-size: 12px; }
/* NEW ("big redesign" round, uploaded settings.html reference: .nav-grid /
   .nav-card-link tile pattern) - reuses .settings-link's existing click
   handler (class kept, selector untouched), just restyles it as a bordered
   tile instead of a plain stacked text link. */
.settings-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 4px;
}
.settings-nav-card {
    background: var(--light-stone);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 13px;
    text-align: left;
    transition: all .2s var(--ease);
}
.settings-nav-card:hover {
    border-color: var(--accent-light);
    background: var(--card);
    color: var(--accent);
}
/* Each settings section reads as its own soft card instead of just a
   border-top divider, echoing the .section-card language used across the
   rest of the redesign. */
.settings-section {
    background: var(--light-stone);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
}
.settings-section:first-of-type { border-top: 1px solid var(--border); margin-top: 0; padding-top: 18px; }

/* NEW ("shop window" round, direct user feedback: "Settings ekranı bizim
   dükkan kapımız, daha görkemli, anlaşılır ve kullanışlı olmalı" - our
   storefront, should feel grander/clearer/more usable): two-pane settings
   layout (left tab rail, right scrollable content) instead of one long
   stacked scroll of 9 sections. Every .settings-section above keeps its
   existing card styling - this just adds the rail + show/hide-by-tab
   layer around it (see wireSettingsTabs() in app.js). */
/* CHANGED (user feedback round, 2026-08-10 - direct request: "settings
   sayfası biraz daha büyük, relax ve modern olsun ... WAI'nin kapısı ne
   kadar modern, rahat olursa o kadar müşteri gelir"): more breathing room
   throughout (wider shell, bigger padding, larger corner radius, softer
   deeper shadow) - same two-pane layout and tab logic from the "shop
   window" round, just given more room to feel like a real settings app
   instead of a cramped popup. */
.settings-card-shell {
    width: 900px;
    max-width: 95vw;
    max-height: 89vh;
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(11, 30, 61, 0.38);
}
.settings-header {
    padding: 32px 40px 22px;
    border-bottom: 1px solid var(--border);
}
.settings-header h2 { margin: 0; font-size: 27px; }
.settings-header-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
/* Phase 3 (UI/UX spec restoration, per supplied settings.html "notice-banner"). */
.settings-notice-banner {
    margin: 16px 40px 0;
    padding: 12px 16px;
    background: var(--light-stone);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.settings-body {
    display: flex;
    flex: 1;
    min-height: 0;
}
.settings-nav-rail {
    flex: 0 0 208px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 14px;
    border-right: 1px solid var(--border);
    background: var(--light-stone);
    overflow-y: auto;
}
.settings-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}
.settings-tab-btn:hover { background: var(--card); }
.settings-tab-btn.active { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.settings-tab-btn-danger { color: #D64545; margin-top: 8px; }
.settings-tab-btn-danger.active { color: #D64545; }
/* Phase 3 (UI/UX spec restoration, per supplied settings.html "bottom-nav" bar):
   a persistent quick-links + logout footer, so Log out isn't a bare orphaned
   button below the tab content anymore. Reuses #settings-logout-btn's
   existing id/handler - purely a wrapper/layout change. */
.settings-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 40px;
    border-top: 1px solid var(--border);
    background: var(--light-stone);
}
.settings-bottom-bar-links { display: flex; gap: 4px; flex-wrap: wrap; }
.settings-bottom-link { width: auto; display: inline-block; padding: 8px 12px; font-size: 12.5px; font-weight: 600; }
.settings-bottom-bar .settings-link.danger { width: auto; display: inline-block; padding: 8px 12px; font-size: 12.5px; }
.settings-panes {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.settings-pane-hidden { display: none !important; }
@media (max-width: 720px) {
    .settings-card-shell { width: 96vw; max-height: 92vh; border-radius: 16px; }
    .settings-body { flex-direction: column; }
    .settings-nav-rail { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); }
    .settings-panes { padding: 20px; }
}

/* NEW ("shop window" round): Personalization Status - small stat cards
   answering "what's WAI already doing with/without my data". Deliberately
   plain (label + value + one-line detail), no charts - this is a status
   readout, not a dashboard to analyze. */
.settings-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.settings-status-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
}
.settings-status-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin: 0 0 4px; }
.settings-status-card-value { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
.settings-status-card-value.on { color: #2E8B57; }
.settings-status-card-value.off { color: var(--text-muted); }
.settings-status-card-detail { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.4; }

/* NEW ("big redesign" round, uploaded reference pack): reusable contextual
   info banner - the one component every mockup (Settings/Credit/Registry/
   Subscriptions/Safety/Search/Profile) uses right under its header to state
   what the page is for / what's currently true, in one calm line. Generic
   enough to drop into any .view without page-specific CSS. */
.view-notice-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--navy-tint) 0%, rgba(var(--accent-rgb),0.05) 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
}
.view-notice-banner strong { color: var(--navy, #0B1E3D); }
.view-notice-banner .notice-icon { font-size: 16px; flex-shrink: 0; }
/* Small rounded status/context chip next to a view's <h1> title, matching
   the mockups' header badge (e.g. "Account Secured", "Safety Protocol
   Active"). Purely decorative text container - callers set color inline
   per page accent if needed. */
.view-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--light-stone);
    border: 1px solid var(--border);
    color: var(--navy, #0B1E3D);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
}
/* NEW ("big redesign" round, uploaded Calculators.html reference): the
   Calculators hub's cards used .workspace-card-icon/.workspace-card-body
   with zero dedicated CSS - they inherited the plain flex-column card shell
   but the icon+title+description inside had no layout rules of their own.
   This gives them the same polished icon/title/badge/description structure
   as the main Workspaces grid cards, reusing .tag for the "real formula"
   badges that already exist in the markup. */
.workspace-card-icon {
    font-size: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.05));
    margin-bottom: 4px;
}
.workspace-card-body h3 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy, #0B1E3D);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.workspace-card-body p {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* NEW ("big redesign" round, uploaded "Ask WAI Anything" mockup pack, direct
   user request "3 sayfa modu vardi"): the 3-mode switcher tab bar plus the
   Advanced/Quantum "extras" panels that appear around the single shared
   composer (#ask-mode-stage). See switchAskMode() in app.js. */
.mode-switcher-wrapper {
    display: inline-flex;
    align-items: center;
    background: var(--card);
    padding: 5px;
    border-radius: 16px;
    border: 1px solid var(--border);
    margin: 4px 0 20px;
    gap: 3px;
    box-shadow: var(--shadow-sm);
}
.mode-btn {
    background: transparent;
    border: none;
    padding: 11px 22px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--text-muted);
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
}
/* CHANGED (redesign round, uploaded "Personal AI OS"/"Advanced Command
   Center" mockup pair, direct user request - "Simply/Advanced/Quantum
   butonların dizaynı" flagged as important): the active tab used to be a
   flat white pill with no color at all, easy to miss at a glance. Now it
   carries the actual orange brand gradient + a soft glow, so which mode
   you're in reads instantly instead of blending into the tab bar - same
   --grad-accent/--shadow-glow tokens already used for primary CTAs
   elsewhere, nothing new introduced. */
.mode-btn.active {
    background: var(--grad-accent);
    color: #fff;
    box-shadow: var(--shadow-glow), var(--shadow-sm);
}
.mode-btn:hover:not(.active) { color: var(--navy, #0B1E3D); background: var(--navy-tint); }

.ask-mode-stage { display: flex; flex-direction: column; gap: 16px; }

/* Advanced mode: navy command-center box + a live snapshot grid, no fake
   numbers - renderAdvancedSnapshot() in app.js reads the real Capabilities
   toggle state (CAP_DEFAULTS/localStorage). */
.advanced-search-box {
    background: var(--grad-navy, var(--navy));
    border-radius: var(--radius-lg, 18px);
    padding: 26px;
    color: #fff;
    box-shadow: var(--shadow-md);
}
.advanced-search-box-title { font-size: 18px; font-weight: 800; color: #fff; }
.advanced-search-box-sub { font-size: 12.5px; color: rgba(255,255,255,0.7); margin-top: 4px; max-width: 640px; line-height: 1.5; }
.advanced-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 18px;
}
.advanced-snapshot-item {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 12px 14px;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}
.advanced-snapshot-item:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.28); }
.advanced-snapshot-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,0.6); }
.advanced-snapshot-value { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.55); margin-top: 5px; }
.advanced-snapshot-value.is-on { color: #fff; }
/* NEW (redesign round, per Advanced Command Center mockup's ON/OFF switch
   pills): a small status dot next to each read-only value - stays read-only
   (see the "kapat kullanici gormesin" instruction elsewhere on this page,
   these snapshot cards deliberately mirror state, they don't toggle it),
   just a clearer visual echo of an on/off switch than plain text alone. */
.advanced-snapshot-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    flex-shrink: 0;
}
.advanced-snapshot-dot.is-on { background: var(--accent-light); box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb),0.25); }

/* Quantum mode: dramatic navy/orange hero + a real quick-launch action bar. */
.quantum-hero {
    background: var(--grad-navy, var(--navy));
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg, 18px);
    padding: 28px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.quantum-hero h2 { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.quantum-hero h2 span { color: var(--accent-light); }
.quantum-hero p { font-size: 13px; color: rgba(255,255,255,0.75); max-width: 620px; margin: 0 auto; line-height: 1.6; }
.quantum-action-bar {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 18px);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
}
.quantum-action-bar-label { font-size: 13px; font-weight: 700; color: var(--navy, #0B1E3D); }
.quantum-trigger-group { display: flex; gap: 10px; flex-wrap: wrap; }
.trigger-btn {
    background: var(--light-stone);
    border: 1px solid var(--border);
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy, #0B1E3D);
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
}
.trigger-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.trigger-btn.is-listening { background: #10B981; border-color: #10B981; color: #fff; }

/* Advanced mode re-skins the shared composer with a slightly more "control
   panel" feel (subtle navy-tint background) - Simply/Quantum keep the
   composer's normal look. */
.ask-mode-stage-advanced .ai-panel {
    background: var(--navy-tint);
    border-radius: var(--radius-lg, 18px);
    padding: 4px;
}

/* NEW ("deep adaptation" round, direct user request "eksiksiz uygula"): a
   real card-header style (18px bold navy + icon) for splitting single big
   .profile-form blocks into multiple distinct titled cards, matching the
   uploaded mockups' .section-title look - .admin-subhead (13px muted
   uppercase) was too subtle to read as a real section boundary between
   cards. Reused across My Profile / Company Registry / Safety / Search. */
.card-section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--navy, #0B1E3D);
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
}

/* NEW ("deep adaptation" round, uploaded safety.html reference): the SOS
   dispatch card gets a distinct red-tinted "danger console" treatment so it
   reads as the one truly high-stakes control on the page, instead of
   looking identical to the neutral cards above/below it. */
.sos-console {
    background: linear-gradient(180deg, rgba(192,57,43,0.03) 0%, rgba(192,57,43,0.07) 100%);
    border: 2px solid rgba(192,57,43,0.28) !important;
    text-align: center;
}
.sos-console > label,
.sos-console > p { text-align: left; max-width: 420px; margin-left: auto; margin-right: auto; }

/* NEW ("deep adaptation" round, uploaded search.html reference: .search-box-
   card / .source-preview-box) - the Search view's composer used to sit in a
   bare .ai-panel (margin only, zero card styling of its own). Wrapped in a
   real rounded card, plus a dashed highlight box explaining what's actually
   powering it underneath. */
.search-page-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 18px);
    padding: 28px;
    box-shadow: var(--shadow-md);
}
.search-feature-box {
    background: rgba(var(--accent-rgb),0.04);
    border: 1px dashed rgba(var(--accent-rgb),0.35);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
}
.search-feature-box .search-feature-icon { font-size: 20px; }
.search-feature-box h5 { font-size: 13px; font-weight: 700; color: var(--navy, #0B1E3D); margin: 0 0 2px; }
.search-feature-box p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }


.settings-theme-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.theme-btn, .theme2-btn {
    flex: 1 1 auto;
    min-width: 90px;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}
.theme-btn:hover, .theme2-btn:hover { background: #F2F4F8; }
.theme-btn.active, .theme2-btn.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.settings-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
    padding: 8px 10px;
    cursor: pointer;
}
/* NEW (task #773, direct user upload "Customise.html"): Settings -> Customize
   tab two-column layout (AI Memory & Personality form card + memory-explainer
   card). Follows the site's existing CSS variable conventions rather than the
   mockup's own standalone :root palette. */
.settings-customize-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
    margin-top: 14px;
}
@media (max-width: 850px) {
    .settings-customize-grid {
        grid-template-columns: 1fr;
    }
}
.customize-counter {
    text-align: right;
    font-size: 11px;
    color: var(--text-muted);
    margin: 4px 0 0;
}
.customize-memory-block {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-2, #F9FAFC);
}
.customize-memory-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(91, 92, 226, .1);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 auto;
}
.customize-note {
    margin-top: 14px;
    padding: 12px 13px;
    border-radius: 10px;
    background: var(--card-2, #F9FAFC);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}
/* NEW (this round): BYOK settings row - input + Save/Remove buttons on one line. */
.byok-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.byok-row input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12.5px;
}
/* NEW ("WAI Personal Intelligence Matrix" round): Faith<->Reality 7-level slider. */
.guidance-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}
.guidance-slider-row input[type="range"] {
    flex: 1;
    accent-color: var(--orange, #E8722C);
}
#guidance-slider-emoji { font-size: 18px; }
#guidance-slider-label {
    min-width: 108px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
/* CHANGED (user feedback round, 2026-08-10 - direct request: "SLIDING i daha
   belirgin ve büyük yapalım"): this is the single control that shapes every
   answer WAI gives, so it gets outsized visual weight vs. a normal form
   control - bigger track, bigger thumb (custom-styled per browser, since
   accent-color alone doesn't resize the thumb), a highlighted card
   background, and always-visible Faith/Reality endpoint labels so the two
   poles are never ambiguous even before you touch it. */
.settings-hint-lg { font-size: 13.5px; line-height: 1.6; }
.guidance-slider-row-lg {
    padding: 18px 20px;
    gap: 16px;
    background: linear-gradient(135deg, rgba(232,114,44,0.07), rgba(139,92,246,0.06));
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-top: 10px;
}
.guidance-slider-emoji-lg { font-size: 30px; line-height: 1; }
.guidance-slider-track { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.guidance-slider-lg {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    accent-color: var(--orange, #E8722C);
    cursor: pointer;
}
.guidance-slider-lg::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6C7CE0, var(--orange, #E8722C));
}
.guidance-slider-lg::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--card, #fff);
    border: 4px solid var(--orange, #E8722C);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    cursor: pointer;
}
.guidance-slider-lg::-moz-range-track {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6C7CE0, var(--orange, #E8722C));
}
.guidance-slider-lg::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--card, #fff);
    border: 4px solid var(--orange, #E8722C);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    cursor: pointer;
}
.guidance-slider-endcaps {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .02em;
    padding: 0 2px;
}
.guidance-slider-label-lg {
    min-width: 120px;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}
.guidance-systems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 12px;
    padding: 0 10px;
}
.guidance-systems-grid label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text);
    padding: 4px 0;
    cursor: pointer;
}
/* NEW: "why this answer" transparency footer + life-pattern confirm/reject chips. */
.explain-footer {
    margin-top: 10px;
    padding: 8px 10px;
    border-top: 1px dashed var(--border);
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.explain-footer .tag {
    background: var(--bg-subtle, #F2F4F8);
    border-radius: 999px;
    padding: 2px 8px;
}
.life-pattern-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    font-size: 12.5px;
}
.life-pattern-row .lp-confirm-btns button {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    margin-left: 4px;
}
.life-pattern-row .lp-confirm-btns button.active { border-color: var(--orange, #E8722C); color: var(--orange, #E8722C); }
.settings-hint {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 4px 0 8px;
}

/* REMOVED (AI Brain deleted from Personal OS, direct user request this round):
   the .customize-preview-* rules styled a read-only summary card that used to
   live in Settings -> Customize and link out to Personal OS for editing. The
   real editable fields now render directly in that tab instead (reusing
   .profile-form/.pos-card/.prompt-chip-row styles already defined elsewhere),
   so this preview-only CSS has no matching markup left and was removed. */

/* ---------- Workspaces grid (equivalent of Gemini's "Gems") ---------- */
/* CHANGED ("elegant Workspaces" round, direct user request: sidebar's 5
   separate shortcuts collapsed back to one "Workspaces" entry, so THIS
   screen is now the single door into every app - "o ekranın albenisi
   dizaynı müthiş olmalı, elegan olmalı". Adds a gradient hero header, a
   pill-shaped search box, and icon "badges" (colored rounded squares
   instead of bare floating emoji) + a top accent bar that appears on
   hover - same underlying cards/search/click logic as before, purely a
   visual upgrade. */
/* REMOVED ("tek ekran, 3 menü" round): .workspace-hero/.workspace-search-row/
   .workspace-search styled #view-workspaces, which no longer exists (see
   index.php - it's replaced by a per-pillar .pos-tab-nav tab bar). Deleted
   along with the rest of that page's now-dead CSS below. */

/* NOTE: .workspace-grid/.workspace-card are the SHARED card-grid shell also
   used by the Calculators hub (#view-engineering-calcs) and the Agents grid
   (#agents-grid) via .workspace-card-icon/.workspace-card-body - left
   untouched here on purpose so those two screens keep their existing
   left-aligned icon+title+description layout. */
.workspace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
/* NEW (WAI Harness Faz 3, task #763): plain static content card for the
   EPC Contract Analysis pilot view - deliberately NOT .calculator-card
   (that's a collapsible <details> element with its own summary/chevron
   behavior, wrong shape for a plain textarea+button+results block) and NOT
   .settings-card (fixed 340-420px modal width). A minimal card using the
   same CSS custom properties (--card/--border/--radius) every other card
   class in this file already relies on. */
.epc-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
}
.epc-card textarea {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
}
#epc-step-list li { margin-bottom: 6px; }

.workspace-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 22px 20px;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.workspace-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--navy-tint-2);
    opacity: 0;
    transition: opacity .2s var(--ease);
}
.workspace-card:hover {
    border-color: var(--border-strong, #D3D9E4);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.workspace-card:hover::before { opacity: 1; }

/* ---------- "Grok Library"-style toolbar (task #1024, direct user
   request: "WaiSpace ve History revize" -> clarified visual-only: "Grok
   Library tarzı" a search box + pill filter chips row shared by both
   WaiSpace and History - same markup pattern (#waispace-toolbar id-less,
   just the .wai-library-* classes), purely presentational: the actual
   filtering happens client-side in app.js (waiSpaceApplyFilters()/
   historyApplyFilters()), no new API calls. ---------- */
.wai-library-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.wai-library-search {
    flex: 1 1 220px;
    min-width: 180px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    font-size: 13.5px;
}
.wai-library-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}
.wai-library-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.wai-library-chip {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-muted, var(--text));
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
    white-space: nowrap;
}
.wai-library-chip:hover { border-color: var(--border-strong, #D3D9E4); }
.wai-library-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

/* ---------- WaiSpace (AI output gallery, direct user request: "Claude
   design benzeri WaiSpace nerede? eklemedin mi?") - reuses the same
   card-grid design language as .workspace-grid/.workspace-card above
   (border/radius/shadow tokens, hover-lift) for visual consistency, with
   its own thumbnail row since these are downloadable image/PDF/xlsx
   artifacts rather than clickable module launchers. ---------- */
.waispace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.waispace-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.waispace-card:hover {
    border-color: var(--border-strong, #D3D9E4);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.waispace-thumb-link { display: block; }
.waispace-thumb {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    background: var(--light-stone);
}
.waispace-thumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.04));
}
.waispace-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px 10px;
}
.waispace-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy, #0B1E3D);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.waispace-card-meta { font-size: 11px; }
.waispace-card-actions {
    display: flex;
    gap: 8px;
    padding: 0 14px 12px;
}
.waispace-card-actions .btn {
    flex: 1;
    text-align: center;
    font-size: 12px;
    padding: 6px 10px;
}
/* Per-type accent tint on the icon thumbnail (task #1024, visual-only
   pass) - keys off WAISPACE_TYPE_META in app.js (image/document/
   spreadsheet/video). Falls back to the neutral accent gradient above
   when no type modifier class is present. */
.waispace-thumb-icon-image { background: linear-gradient(135deg, rgba(122,92,255,0.16), rgba(122,92,255,0.05)); }
.waispace-thumb-icon-document { background: linear-gradient(135deg, rgba(43,120,255,0.16), rgba(43,120,255,0.05)); }
.waispace-thumb-icon-spreadsheet { background: linear-gradient(135deg, rgba(23,168,110,0.16), rgba(23,168,110,0.05)); }
.waispace-thumb-icon-video { background: linear-gradient(135deg, rgba(230,110,40,0.16), rgba(230,110,40,0.05)); }

/* ---------- History (task #1024, Grok-Library-style card grid -
   visual-only redesign confirmed by user, reuses the same
   .waispace-card design language for consistency). Cards are grouped by
   date (.history-grid per group, rendered by renderHistoryGroups() in
   app.js); the color-coded icon chip keys off HISTORY_CATEGORY_META's 6
   categories. ---------- */
.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.history-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
    padding: 13px 14px;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
    cursor: pointer;
}
.history-card:hover {
    border-color: var(--border-strong, #D3D9E4);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.history-card-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-rgb),0.05));
}
.history-card-icon-engineering { background: linear-gradient(135deg, rgba(43,120,255,0.16), rgba(43,120,255,0.05)); }
.history-card-icon-business { background: linear-gradient(135deg, rgba(23,168,110,0.16), rgba(23,168,110,0.05)); }
.history-card-icon-hr_career { background: linear-gradient(135deg, rgba(230,110,40,0.16), rgba(230,110,40,0.05)); }
.history-card-icon-personal_life { background: linear-gradient(135deg, rgba(122,92,255,0.16), rgba(122,92,255,0.05)); }
.history-card-icon-location { background: linear-gradient(135deg, rgba(224,60,110,0.16), rgba(224,60,110,0.05)); }
.history-card-icon-other { background: linear-gradient(135deg, rgba(120,130,145,0.16), rgba(120,130,145,0.05)); }
.history-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.history-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy, #0B1E3D);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.history-card-meta { font-size: 11px; color: var(--text-muted, #6B7686); }
.history-card-summary {
    font-size: 12px;
    color: var(--text-muted, #6B7686);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---------- Wishlist ("wishlist" round, other half of old backlog #155) ---------- */
/* NEW ("2035" round): hero row - title/subtitle left, live Ideas/In
   progress/Implemented counters right, matching the approved
   WAI_2035_Design_Preview.html mockup. */
.wishlist-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.wishlist-stats { display: flex; gap: 22px; }
.wishlist-stat { text-align: center; }
.wishlist-stat-num { display: block; font-size: 20px; font-weight: 700; color: var(--accent); }
.wishlist-stat-label { display: block; font-size: 11px; color: var(--text-muted); }

/* NEW ("2035" round): board (left) + Top contributors (right, sticky) side
   by side on wide screens, stacking on narrow ones - same elements/IDs as
   before, just a new grid wrapper. */
.wishlist-layout { display: grid; grid-template-columns: 1fr 260px; gap: 18px; align-items: start; }
.wishlist-side-panel { position: sticky; top: 0; }
@media (max-width: 900px) {
    .wishlist-layout { grid-template-columns: 1fr; }
    .wishlist-side-panel { position: static; }
}

.wishlist-submit-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.wishlist-submit-card input,
.wishlist-submit-card textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 13.5px;
    font-family: inherit;
    margin-bottom: 8px;
    resize: vertical;
}
#wishlist-submit-btn { width: auto; padding: 8px 16px; }
.wishlist-guest-hint { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.wishlist-guest-hint button { color: var(--accent); font-weight: 600; }
.wishlist-list { display: flex; flex-direction: column; gap: 10px; }
.wishlist-item {
    display: flex;
    gap: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 14px 16px;
    align-items: flex-start;
    transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.wishlist-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.wishlist-vote-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    padding: 8px 4px;
    flex-shrink: 0;
}
.wishlist-vote-btn:disabled { cursor: default; opacity: .6; }
.wishlist-vote-btn.wishlist-voted { border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); }
.wishlist-vote-count { font-size: 16px; font-weight: 700; color: var(--navy); }
.wishlist-vote-label { font-size: 9.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.wishlist-item-body { flex: 1; min-width: 0; }
.wishlist-item-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--navy); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wishlist-item-desc { margin: 0 0 6px; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.wishlist-item-meta { margin: 0; font-size: 11.5px; color: var(--text-muted); }
.wishlist-status-badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F0F2F6;
    color: #4B5563;
}
.wishlist-status-done { background: #E6F4EA; color: #1E7B34; }
.wishlist-status-in_progress { background: #FFF4E5; color: #B26A00; }
.wishlist-status-planned { background: rgba(var(--accent-rgb),0.1); color: var(--accent); }
.wishlist-status-declined { background: #FDECEC; color: #B42318; }
.wishlist-status-select { margin-top: 8px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); font-size: 12px; }

/* ---------- Wishlist -> AI Innovation Hub ("AI Innovation Hub" round):
   status-grouped board, category chips, leaderboard, duplicate-check UI.
   Reuses .wishlist-item/.wishlist-vote-*/.wishlist-status-* above unchanged -
   only new layout wrappers are added here. ---------- */
.wishlist-duplicate-check {
    margin-top: 10px;
    padding: 12px;
    border: 1px dashed var(--accent);
    border-radius: 10px;
    background: rgba(var(--accent-rgb),0.05);
}
.wishlist-duplicate-check p { margin: 0 0 8px; font-size: 12.5px; color: var(--text); }
.wishlist-duplicate-check .wishlist-item-compact { padding: 8px 10px; margin-bottom: 6px; }
.wishlist-toolbar { margin-bottom: 14px; }
.wishlist-category-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.wishlist-chip {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}
.wishlist-chip { transition: transform .15s var(--ease); }
.wishlist-chip:hover { transform: scale(1.05); }
/* CHANGED ("2035" round, "turuncu sadece Primary Action" rule): filter chip
   selection is a passive state, not a primary action - moved from orange to
   navy-tint so orange stays reserved for Submit/Add/Create buttons only. */
.wishlist-chip.active { border-color: var(--navy-tint-2); background: var(--navy-tint); color: var(--navy); }
.wishlist-category-badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(11,30,61,0.06);
    color: var(--navy);
}
.wishlist-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
}
.wishlist-column {
    background: var(--light-stone);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 12px;
}
.wishlist-column-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 6px;
}
.wishlist-column-count {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 7px;
}
.wishlist-column-items { display: flex; flex-direction: column; gap: 10px; }
.wishlist-column .wishlist-item { padding: 12px 13px; gap: 11px; }
.wishlist-leaderboard-card {
    margin-top: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 16px 18px;
}
.wishlist-leaderboard-card h3 { margin: 0 0 10px; font-size: 14px; color: var(--navy); }
.wishlist-leaderboard-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
}
.wishlist-leaderboard-row:last-child { border-bottom: none; }
.wishlist-leaderboard-rank { font-weight: 700; color: var(--accent); min-width: 24px; }
.wishlist-leaderboard-name { font-weight: 600; color: var(--navy); flex-shrink: 0; }
.wishlist-leaderboard-stats { color: var(--text-muted); }

/* NEW ("adaptive UI" round): highlight for pillars this member actually uses
   most, based on real usage - see applyPillarPersonalization() in app.js. */
.workspace-card-foryou { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.workspace-foryou-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(var(--accent-rgb),0.1);
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 6px;
}
.how-to-credit {
    background: var(--light-stone, #F7F8FC);
    border: 1px solid #E4E8F1;
    border-radius: var(--card-radius);
    padding: 16px 20px;
    margin-bottom: 22px;
}
.how-to-credit ol { margin: 0; padding-left: 20px; }
.how-to-credit li { margin-bottom: 8px; font-size: 13.5px; color: var(--text); line-height: 1.5; }
.how-to-credit code { background: #fff; border: 1px solid #E4E8F1; border-radius: 4px; padding: 1px 6px; }

/* NEW ("real payment integration" round): instant Stripe card top-up. */
.stripe-topup-card {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(11,30,61,0.04));
    border-color: var(--accent-light);
}
.stripe-amount-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}
.stripe-amount-btn { width: auto; padding: 8px 18px; }
.stripe-amount-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.stripe-amount-row input#stripe-amount-custom {
    width: 140px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    background: var(--card);
    color: var(--text);
}

.brand { font-size: 40px; font-weight: 800; letter-spacing: -1px; }
.brand-w { color: var(--navy); }
.brand-ai { color: var(--accent); }

.brand-sub { color: var(--text-muted); font-size: 13px; margin: 6px 0 28px; }

.auth-form input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 14px;
}

.btn {
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .15s ease;
}
.btn:hover { opacity: .96; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
    background: var(--grad-accent);
    color: #fff;
    width: 100%;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { box-shadow: var(--shadow-md); }

.error {
    color: #D64545;
    font-size: 13px;
    margin-top: 12px;
}
/* NEW (task #893, direct user request: "bu kırmızı mesajları bir window/box
   içerisinde göster" - the raw red-text-only error line under a failed
   PDF/Excel/CV generation read as broken, not as a recoverable message).
   Scoped to .ai-error specifically (the Ask WAI Anything result panel's
   error line - see showGenError() in app.js) so this does NOT change the
   plain inline error text used on the login/register/checkout forms
   elsewhere, which are short, already-boxed-by-their-form context, and
   don't need this treatment. */
.error.ai-error {
    display: block;
    background: #FDECEC;
    border: 1px solid #F3C6C6;
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 14px;
}
.ai-error-title {
    font-weight: 700;
    color: #B3261E;
    margin: 0 0 4px;
    font-size: 13.5px;
}
.ai-error-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
/* Admin-only real-error detail line (see showGenError()'s currentRole check)
   - monospace so it visually reads as a technical/debug value, never
   confusable with the friendly member-facing sentence above it. */
.ai-error-admin-detail {
    display: block;
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.05);
    border-radius: 8px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 11.5px;
    color: #6b1a16;
    white-space: pre-wrap;
    word-break: break-word;
}
/* NEW (user feedback round, 2026-08-10): inline action link inside a
   register-step error (e.g. "email already exists") - lets a member jump
   straight to Forgot Password / Log in instead of hunting for it. Reuses
   the same visual weight as .auth-link but sits inline with the error text
   so it's the FIRST thing a returning user notices, not a hunt-for-it link
   buried below the form. */
.auth-error-link {
    background: none;
    border: none;
    padding: 0;
    margin-left: 4px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}
.auth-error-link:hover { color: var(--navy); }

/* NEW (user feedback round, 2026-08-10): WAI Sense promo card inside Settings
   > About - see index.php comment at its call site for why this is a plain
   external link rather than an embed. */
.settings-sense-promo {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--orange-light, #F0C39A);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(232,114,44,0.06), rgba(139,92,246,0.05));
}
.settings-sense-promo-title { margin: 0; font-weight: 700; font-size: 13.5px; color: var(--navy); }
.error a { color: #D64545; font-weight: 600; }
.status { color: #1E8E5A; font-size: 13px; margin-top: 12px; }
/* NEW (this round): labels that clearly distinguish the Auto/Manual module
   add modes ("I added it manually, nothing happened" - the error message
   wasn't noticeable, both the modes were unclear and the error text was too
   muted). */
.module-mode-tabbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.module-mode-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    background: var(--navy);
    color: #fff;
}
.module-mode-tag-manual { background: var(--accent); }
#ingest-error {
    border: 1px solid #D64545;
    background: #FDEDED;
    border-radius: 8px;
    padding: 10px 12px;
}
.hint { color: var(--text-muted); font-size: 11px; margin-top: 22px; }
/* NEW (this round): the "powered by" line on the auth screen is now also a
   hidden button that opens the admin/developer login screen - it looks like
   normal text (subtle, an ordinary visitor won't notice) but is clickable. */
.hint-link {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
}
.hint-link:hover { color: var(--accent); }

/* ---------- Auth steps (landing / login / register / verify / forgot / reset) ----------
   Each step is its own .auth-step - only one is visible at a time, so login and
   register never visually mix (they never overlap each other). */
.auth-step { display: flex; flex-direction: column; gap: 10px; }
.auth-big-btn { width: 100%; }
.auth-form { display: flex; flex-direction: column; }
.auth-link {
    display: block;
    margin: 2px auto 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    text-align: center;
}
.auth-link:hover { color: var(--navy); }
.admin-key-link {
    display: block;
    margin: 20px auto 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11.5px;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Sidebar logo button (task #1045, direct user request: "WAI
   logo ise Ask WAI yerine geçecek") - .sidebar-brand-icon/-text used to be
   direct children of the plain .sidebar-brand div; now they're wrapped in
   this real <button> so the logo itself navigates home, replacing the old
   separate "+ Ask WAI" button. Resets all default button chrome so it stays
   pixel-identical to the old div (flex row, no border/background/padding,
   inherits the parent's gap via being a flex child of .sidebar-brand). ---------- */
.sidebar-brand-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

/* ---------- App Shell ---------- */
/* BUG FIX ("2 slide" round, direct user report): #app-shell used to be
   min-height:100vh (a FLOOR, not a ceiling) - so once the sidebar's nav list
   grew past one screen (many pillars: AI/Search/Business/Personal/Travel/
   Health/Shopping/Education/Finance/Developer/Registry/Safety/Wishlist/Help/
   Modules/Admin...), the WHOLE PAGE just kept growing taller instead of the
   sidebar scrolling on its own - so the page ended up "2 screens tall" with
   only ONE scrollbar (the browser's own, on the far right) moving the
   sidebar and the content together. Claude/Gemini instead give the sidebar
   ITS OWN internal scrollbar (for a long nav list) that's independent from
   the main content's scrollbar - that's the "2 slide" (2 scrollbars) the
   user was expecting. Fix: #app-shell is now a real height:100vh box
   (a ceiling, not a floor) with overflow:hidden, so its two children
   (.sidebar / .content) are forced to actually fit within one screen -
   .gemini-nav's existing `flex:1; overflow-y: auto` (below) can finally do
   its job and scroll internally instead of pushing the page taller, and
   .content gets its own overflow-y:auto so long result panels scroll in
   their own pane too. Nothing else about the layout changes - same 3-part
   sidebar (fixed brand/search top, scrollable nav middle, fixed account/
   powered-by bottom), same content area, just properly height-capped. */
#app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.sidebar {
    width: 260px;
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
    background: var(--grad-navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    font-weight: 800;
    padding: 6px 10px 20px;
}
.sidebar-brand .brand-w { color: #fff; }
.sidebar-brand .brand-ai { color: var(--accent); }
/* NEW (this round): real logo files supplied by the developer (bronze/copper
   ribbon mark) - see logo-icon-*.png / logo-full-480.png in assets/brand/. */
.sidebar-brand-icon { width: 28px; height: 28px; border-radius: 6px; }
.login-logo { width: 220px; max-width: 80%; margin: 0 auto 14px; display: block; border-radius: 12px; }
.admin-login-logo { width: 64px; height: 64px; margin: 0 auto 10px; display: block; border-radius: 10px; }

/* NEW ("Claude-style account menu" round): avatar + name + chevron row that
   replaces the old read-only .identity-badge - now the whole row is a button
   that opens #account-menu (see wireAccountMenu() in app.js). The small
   colored dot moved from sitting next to the name to sitting on the avatar's
   corner (same green/orange/red meaning as before). */
.account-row-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 0 0 2px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #E4E8F1;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.account-row-btn:hover { background: rgba(255,255,255,0.06); }
.account-avatar-wrap {
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.account-avatar-img,
.account-avatar-placeholder,
.account-avatar-initials {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}
.account-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    font-size: 13px;
}
/* NEW (direct user request, matching Claude's own bottom-left account avatar):
   a colored circle with the user's initials instead of a generic silhouette
   emoji - makes the account row feel like it's actually "theirs", not a
   generic placeholder. Color is deterministic per-user (see
   accountInitialsColor() in app.js) so the same person always sees the same
   color, but different people get visually distinct avatars. Only shown when
   there's no uploaded profile photo (avatar_url is null) - see
   refreshIdentity(). */
.account-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.account-avatar-wrap .identity-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    border: 2px solid var(--navy);
}
.account-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.account-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* NEW: plan tier shown under the name, e.g. "Saban" / "Free" - same pattern
   as Claude's own "Saban · Pro" bottom row, split onto two lines here since
   the sidebar column is narrower. */
.account-row-plan {
    font-size: 11px;
    opacity: .6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* NEW (task #540, "C WAI Design.docx" section 14 "Credit Indicator"): the
   always-visible W$ balance text next to the account row (see app.js
   refreshIdentity()) - color escalates using the exact same tiers as
   #identity-dot (green/orange/red) so the two never disagree. */
.account-row-credit {
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.account-row-credit.credit-green { color: #2FBE6E; }
.account-row-credit.credit-orange { color: #C77A00; }
.account-row-credit.credit-red { color: #E5484D; }
.account-row-chevron {
    opacity: .6;
    font-size: 12px;
    flex-shrink: 0;
    align-self: center;
}
.account-menu {
    position: fixed;
    left: 16px;
    bottom: 70px;
    width: 240px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
    z-index: 600;
    padding: 6px;
}
/* NEW: email header row at the top of the popup - mirrors Claude's own
   account menu (email shown first, muted, non-interactive). */
.account-menu-email {
    padding: 8px 10px 10px;
    font-size: 12px;
    color: var(--muted, #6B7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.account-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.account-menu-item:hover { background: rgba(11,30,61,0.06); }
.account-menu-icon { width: 18px; text-align: center; flex-shrink: 0; }
.account-menu-chevron-right { margin-left: auto; opacity: .5; font-size: 14px; }
.account-menu-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.account-menu-logout { color: #C0392B; }

.identity-dot,
.dot-green, .dot-orange, .dot-red {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.dot-green { background: #2FBE6E; }
.dot-orange { background: #FFA630; }
.dot-red { background: #E5484D; }
/* NEW (2026-07-30, direct user request: the dot needs to actually DO
   something - a real credit-status shortcut, not decoration): on the
   account row specifically, give the tiny 8px dot a much bigger invisible
   click target (::after) and a hover ring so it reads as clickable instead
   of just a status light. */
#identity-dot {
    cursor: pointer;
    position: relative;
}
#identity-dot::after {
    content: '';
    position: absolute;
    inset: -8px;
}
#identity-dot:hover { box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }

/* ---------- Gemini-style sidebar: New chat -> Recent -> WAI-specific links ---------- */
.new-chat-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    margin: 4px 0 18px;
    width: fit-content;
}
.new-chat-btn:hover { background: rgba(255,255,255,0.14); }
.new-chat-icon { font-size: 15px; font-weight: 700; }

/* NEW ("Claude-style console" round): search box for the Recent list, sitting
   between New chat and the Recent block - same dark-sidebar treatment as
   new-chat-btn (subtle white overlay, not a bright input). */
.sidebar-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 7px 10px;
    margin: 0 0 14px;
    /* CHANGED (v85): width/padding now animate between the collapsed
       (icon-only) and expanded states - see .sidebar-search-row.collapsed
       below and wireSidebarSearchToggle() in app.js. */
    transition: background 0.15s ease;
}
.sidebar-search-icon {
    font-size: 12px;
    opacity: 0.7;
    flex-shrink: 0;
    /* NEW (v85): the icon is now a real <button>, not a decorative <span> -
       strip default button chrome so it still looks like a plain icon. */
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}
.sidebar-search-icon:hover { opacity: 1; }
/* NEW (v85, direct user report - "search'e ait uzun beyaz giriş alanı kapalı
   olsun, her zaman benim mail adresim orada duruyor"): collapsed by default
   - the input is width:0 and unfocusable-by-tab/invisible until the user
   explicitly clicks the search icon (wireSidebarSearchToggle() in app.js
   adds/removes this class and focuses the input on expand). */
.sidebar-search-row.collapsed { padding: 7px 8px; }
.sidebar-search-row.collapsed .sidebar-search {
    width: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.sidebar-search {
    /* CHANGED (v85): width now transitions between 0 (collapsed) and 100%
       (expanded) instead of always being 100%. */
    transition: width 0.15s ease, opacity 0.15s ease;
    /* BUG FIX (direct user report, desktop-only): type="search" inputs get
       a browser-native "search field" appearance on desktop Chrome/Edge -
       that native chrome draws its OWN (white) background ON TOP of
       background:transparent below, so the box looked white on desktop
       while looking correctly navy-tinted on mobile (where that native
       styling doesn't kick in the same way). -webkit-appearance/appearance:
       none drops the native chrome so our own transparent background (the
       dark sidebar showing through) actually applies on every platform. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    width: 100%;
}
.sidebar-search::placeholder { color: #8E97AD; }
/* Remove the native browser "clear" (x) icon so it doesn't clash with the
   dark sidebar styling in Chrome/Edge/Safari. */
.sidebar-search::-webkit-search-cancel-button { -webkit-appearance: none; }

.gemini-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    overflow-y: auto;
}
/* Tightened this round ("sol menu sadelestirme"): with the Me + Life&work
   merge into "My stuff" the sidebar is down to 4 accordion sections, so the
   block gap above (20px -> 14px) and this bottom border keep the remaining
   groups visually distinct without the extra whitespace the 5-section
   layout needed. */
.gemini-nav-block { display: flex; flex-direction: column; gap: 2px; }
/* NEW (sidebar IA restructure round, direct user request: "Recent /
   Previous 7 days / Older ayrı bir conversation-history zone olmalı,
   Core+ ile karışmamalı"): #recent-nav-block used to be visually
   identical to every accordion group below it (Core+/AI Workspace/
   Platform/Tools) - same flat label + item list, no boundary. This class
   gives it a distinct card-like container (subtle fill + border) plus a
   divider beneath it, so it reads as its own "conversations" zone rather
   than one more menu section, before the Core+ nav-groups begin. */
.conversation-history-zone {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 8px 6px 10px;
    margin-bottom: 6px;
}
.conversation-history-zone .gemini-nav-label { padding-top: 2px; }
.conversation-history-zone::after {
    content: "";
    display: block;
    height: 1px;
    margin: 10px 2px 0;
    background: rgba(255,255,255,0.08);
}
html:not([data-theme="dark"]) .conversation-history-zone {
    background: rgba(11,30,61,0.03);
    border-color: rgba(11,30,61,0.08);
}
html:not([data-theme="dark"]) .conversation-history-zone::after {
    background: rgba(11,30,61,0.08);
}
.gemini-nav-label {
    color: #8E97AD;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px 6px;
}
/* NEW ("menu sadelestirme" round): the label is now also a +/- accordion
   toggle button (see wireNavAccordion() in app.js) - reuses .gemini-nav-label's
   text styling, just adds button resets + the trailing icon layout. */
.gemini-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.gemini-nav-toggle:hover { color: #C7CEDD; }
.gemini-nav-toggle-icon { font-size: 13px; font-weight: 700; line-height: 1; flex-shrink: 0; }
.gemini-nav-items { display: flex; flex-direction: column; gap: 2px; }
.gemini-nav-items.nav-items-collapsed { display: none; }
/* REMOVED (sidebar IA restructure round): the old icon-only rail used to
   force every accordion open (regardless of its collapsed/expanded state)
   since there were no labels to click, only icons. The rail no longer
   shows the nav at all (see .sidebar.collapsed .gemini-nav above) - the
   only place .gemini-nav becomes visible again is inside the slide-out
   .drawer-open overlay, which should respect each accordion's normal
   open/closed state like the regular expanded sidebar does. */

/* NEW ("ChatGPT-tarzı sidebar" round): each Recent entry is now a row (the
   chat-open button + a hover-reveal delete button) instead of a lone button -
   same ChatGPT pattern (hover a history item, a "..."/trash icon appears on
   the right). .recent-date-label reuses .gemini-nav-label's look for the
   Today/Yesterday/Previous 7 days/Older group headers. */
.recent-item-row {
    display: flex;
    align-items: center;
    gap: 2px;
}
.recent-item-row:hover .recent-delete-btn { opacity: 1; pointer-events: auto; }
/* NEW (task #1046): the rename (✏️) button follows the exact same hover-
   reveal pattern as delete, defined right below - hidden until the row is
   hovered, then fades in. */
.recent-item-row:hover .recent-rename-btn { opacity: 1; pointer-events: auto; }
.recent-rename-btn {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #8E97AD;
    font-size: 12px;
    padding: 6px 7px;
    border-radius: 7px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}
.recent-rename-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.recent-date-label { margin-top: 6px; }
#sidebar-recent > .recent-date-label:first-child { margin-top: 0; }

.recent-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: #C7CEDD;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.recent-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.recent-delete-btn {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #8E97AD;
    font-size: 12px;
    padding: 6px 7px;
    border-radius: 7px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}
.recent-delete-btn:hover { background: rgba(229,72,77,0.16); color: #E5484D; }
.gemini-recent-empty { color: #6E7791; font-size: 12px; padding: 4px 12px; margin: 0; }
.gemini-recent-empty.hidden { display: none; }

.nav-group {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    color: #C7CEDD;
    text-align: left;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    cursor: pointer;
    width: 100%;
    transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.nav-group:hover { background: rgba(255,255,255,0.08); color: #fff; transform: translateX(2px); }
.nav-group.active {
    background: var(--grad-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb),0.35);
    transform: none;
}
.nav-icon { font-size: 15px; }

/* NEW ("big revision" round): same look as .nav-group but for the
   visibly-locked Agents/Marketplace roadmap rows (a plain, non-clickable
   row - the one active use of this class since the Developer Program
   link that used to share it was removed). */
.nav-group-locked {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6E7791;
    padding: 10px 12px;
    font-size: 13.5px;
    cursor: default;
}
.badge-soon {
    margin-left: auto;
    background: rgba(255,255,255,0.08);
    color: #9BA3B8;
    border-radius: 999px;
    font-size: 10.5px;
    padding: 1px 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- ChatGPT-style collapsible sidebar ("ChatGPT-tarzı sidebar" round) ----------
   Direct user request: "sipariş ediyorum birebir aynısı CHATGPT menüsü olsun".
   Collapsing narrows the sidebar to a 64px icon-only rail - New chat/nav-group
   icons stay visible and clickable, everything text-based (brand name, search
   box, Recent list, section labels, row labels) hides. Rather than editing
   every single nav-group/new-chat-btn template to wrap its label in its own
   span, the collapsed rules below give each row a fixed narrow width with
   overflow:hidden - the icon (always first in the row) stays on screen, the
   label that follows simply overflows past the visible edge. Desktop-only:
   on narrow/mobile widths the sidebar is already an off-canvas drawer (see
   .mobile-menu-btn), so the collapse button itself is hidden there (see the
   mobile media query further down). */
.sidebar-collapse-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.16);
    color: #C7CEDD;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

.sidebar.collapsed { width: 68px; padding: 20px 10px; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 6px 0 20px; }
/* REVERTED (task #1019, direct user request with screenshot: "hamburger
   menu, tek sıra halinde tüm ana başlıklar ile ilgili objelerin olması
   durumu, GROK ta olduğu gibi"): the previous round made the collapsed
   rail show ONLY the brand mark + hamburger (see the comment this
   replaced) - live-tested by the user, who confirmed that leaves the rail
   looking blank/broken rather than "premium", and does not match Grok's
   actual collapsed rail (a single column of icons for every main nav
   destination, each directly clickable - no need to open the drawer just
   to navigate). This restores that: .gemini-nav stays visible in rail
   mode; the search box, "Recent chats" text, new-chat and sidebar-bottom
   account row still stay hidden (unchanged) since those aren't "ana
   başlıklar" (main nav destinations) - the drawer (below) is still there
   for anyone who wants the full labeled nav or Settings/account access
   without pinning the sidebar back open. */
.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-search-row,
.sidebar.collapsed .new-chat-btn,
.sidebar.collapsed .sidebar-bottom {
    display: none;
}
.sidebar.collapsed:not(.drawer-open) .gemini-nav {
    display: flex;
}
/* Group headers (Core+/Core/Platform/Tools +/- accordion buttons) are
   text-only (no icon) - hidden in rail mode so the rail reads as one flat
   icon column, Grok-style, rather than un-clickable text stubs. Every
   group's items are force-shown regardless of that group's own
   expanded/collapsed accordion state (.nav-items-collapsed normally
   applies display:none - overridden here) so nothing in Platform/Tools
   disappears just because that group happens to be collapsed in the
   full sidebar. */
.sidebar.collapsed:not(.drawer-open) .gemini-nav-toggle {
    display: none;
}
.sidebar.collapsed:not(.drawer-open) .gemini-nav-items {
    display: flex !important;
}
/* Each nav-group button collapses to a centered icon: font-size:0 hides
   the trailing text label (a plain text node, not its own span, so it
   can't be targeted directly) without disturbing layout math, then
   .nav-icon resets its own font-size back so the emoji still renders at
   normal size. */
.sidebar.collapsed:not(.drawer-open) .nav-group,
.sidebar.collapsed:not(.drawer-open) #recent-chats-nav-btn {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
    font-size: 0;
}
.sidebar.collapsed:not(.drawer-open) .nav-icon {
    font-size: 19px;
}
.sidebar.collapsed:not(.drawer-open) .nav-group:hover {
    transform: none;
}

/* Slide-out drawer: while collapsed, clicking the hamburger adds
   .drawer-open, which pops the sidebar out as a floating overlay (fixed
   position, doesn't push page content, full nav restored) at a normal
   working width. #collapsed-sidebar-overlay dims the page behind it -
   click it, press Escape, or click any nav row to close back to the rail
   (see wireSidebarCollapse() in app.js). Pinning the drawer's own toggle
   button instead returns to the permanent, non-collapsed sidebar. */
.sidebar.collapsed.drawer-open {
    position: fixed;
    top: 12px;
    left: 12px;
    bottom: 12px;
    width: 272px;
    padding: 20px 14px;
    z-index: 70;
    border-radius: 18px;
    box-shadow: 10px 10px 40px rgba(0,0,0,0.4);
    overflow-y: auto;
    transition: width 0.2s var(--ease);
}
.sidebar.collapsed.drawer-open .sidebar-brand { justify-content: flex-start; padding: 0 0 16px; }
.sidebar.collapsed.drawer-open .sidebar-brand-text,
.sidebar.collapsed.drawer-open .sidebar-search-row,
.sidebar.collapsed.drawer-open .new-chat-btn,
.sidebar.collapsed.drawer-open .sidebar-bottom {
    display: flex;
}
.sidebar.collapsed.drawer-open .gemini-nav { display: flex; }
#collapsed-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11,30,61,0.35);
    z-index: 65;
}
#collapsed-sidebar-overlay.visible { display: block; }

.sidebar.collapsed .badge,
.sidebar.collapsed .badge-soon {
    display: none;
}
/* NOTE: .guest-login-btn/.account-row-btn/.notif-bell-btn used to get a
   dedicated shrink-to-icon treatment here for the old "icon rail shows
   everything" mode - .sidebar-bottom (their container) is now hidden
   outright in plain rail mode above, and restored full-size inside
   .drawer-open, so those per-button width rules no longer apply anywhere
   and were removed rather than left as dead CSS. */
.sidebar.collapsed .gemini-nav { gap: 10px; }

.sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.settings-gear-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: #C7CEDD;
    text-align: left;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
}
.settings-gear-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }

.badge {
    margin-left: auto;
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    font-size: 11px;
    padding: 1px 8px;
}
.nav-group.active .badge { background: rgba(255,255,255,0.35); }

.logout-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #C7CEDD;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    margin-top: 12px;
}
.logout-btn:hover { color: #fff; border-color: #fff; }

.powered-by {
    display: flex;
    justify-content: center;
    padding-top: 14px;
    opacity: .85;
    /* BUG FIX (this round): now a <button> - since the /wadmin URL is
       unreliable, this badge became a hidden "Developer" admin-login trigger
       (see app.js powered-by-admin-entry). We reset the button defaults to
       keep the old look, only hinting via the cursor that it's clickable. */
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
}
.powered-by:hover {
    opacity: 1;
}

/* ---------- Content ---------- */
.content {
    /* CHANGED (scrollbar-inset bug fix, direct user report: "Edge ve Chrome
       da Admin sayfası sağdaki slide pozisyonu" - the scrollbar sat inset
       from the browser's true right edge on wide screens). .content used
       to be BOTH the centered max-width reading column AND the
       overflow-y:auto scroll container - since a scrollbar always belongs
       to the box that declares overflow, capping THIS box at 1220px also
       capped where its own scrollbar could render, floating it inside the
       centering gutter well short of the real window edge on any screen
       wider than ~1480px. Fix: .content is now a plain full-width, full-
       height scroll container (nothing but overflow/height/flex-sizing
       lives here anymore), so its scrollbar is flush with the true right
       edge again - the old centered-column look (max-width/margin/padding)
       moved to the new .content-inner wrapper below, one level inside. */
    flex: 1;
    height: 100%;
    overflow-y: auto;
    width: 100%;
}

.content-inner {
    /* FIX (direct user bug report: "menu minimize edilince ekran sag
       taraf iceriye kayiyor" - screenshot showed a growing dead gray
       strip on the right, worse whenever the sidebar was collapsed).
       Root cause: this column was flex:1 (so it COULD grow into freed
       sidebar space) but capped at max-width:1100px with NO margin,
       so it always hugged the left edge (right after the sidebar) and
       dumped every freed pixel onto the right as unused space - the
       gap got visibly bigger the moment the sidebar collapsed and gave
       back ~190px, because nothing claimed that space. margin:0 auto
       centers the capped column instead, splitting any freed width
       evenly on both sides - same fix used by every chat app (Claude/
       ChatGPT) that centers a max-width reading column. */
    padding: 36px 44px;
    /* WIDENED ("Simplify AI answer page layout" round, direct user request -
       "wider"): 1100px -> 1220px. A pure chat bubble benefits from a narrow
       reading column, but this app's answers are often full reports (input
       summary + hero number + schematic + equipment cards + sources), which
       felt cramped at 1100px on anything wider than a laptop. Still well
       short of full-bleed - stays a comfortable reading width, just not as
       tight as the original chat-only column. */
    max-width: 1220px;
    margin: 0 auto;
    width: 100%;
}

/* ---------- Finance-only mode (Commercial OS RBAC round) - see
   wireFinanceMode() in app.js. #app-shell is flex, so hiding the sidebar
   lets .content reflow to full width with no extra layout rules needed. ---------- */
.finance-mode #app-sidebar,
.finance-mode #mobile-menu-btn,
.finance-mode #mobile-sidebar-overlay {
    display: none !important;
}


/* Claude/Gemini-style chat-centric view: the long description paragraphs
   under the heading were shrunk/faded, so the screen feels like a "chat
   header" rather than a "documentation page". */
.view-header h1 { margin: 0 0 4px; font-size: 20px; }
.view-header p { margin: 0 0 18px; color: var(--text-muted); font-size: 12.5px; max-width: 640px; line-height: 1.5; }
.view-header code { background: #EEF1F6; padding: 2px 6px; border-radius: 4px; font-size: 12.5px; }
/* NEW ("personalized/white-label" round): time-of-day greeting above the
   W-ENG Console h1 - see applyPersonalization() in app.js. */
.personalized-greeting { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--accent); }

/* ---------- Home screen hero ("Faz 1: ana sayfa hero" round) ----------
   Direct user request: a centered, landing-page-style first screen (like
   Perplexity/You.com) rather than a dense dashboard header - bigger title,
   centered greeting/description, centered single search box below it (the
   box itself is unchanged, just the surrounding header treatment). */
.hero-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 8px;
    position: relative;
}
.hero-header h1 { font-size: 26px; margin: 0 0 8px; }
.hero-header p { margin: 0 auto 18px; }
.hero-header .personalized-greeting { text-align: center; }

/* CHANGED (direct user request: "sadece logo olacak... spiral logo yu ortaya
   al" - only the bronze DNA-spiral mark remains, centered above the "Ask WAI
   anything" title; the corner "WAI" wordmark and the angular "W" mark from
   the original "home-screen logo lockup" round were deleted). Hides once a
   real conversation starts (see .wai-conversation-active rule below) - it
   only belongs on the blank landing screen, same rule as the rest of the
   hero marketing stack. */
.hero-logo-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 18px;
}
.hero-spiral-mark { width: 64px; height: auto; display: block; }

/* NEW ("ekran sorunu / can damarı" round, direct user request: "orasi bizim
   can damarimiz, o bolge akici olmali" - a live DOM measurement showed the
   home Ask WAI screen was 3535px tall BEFORE any answer even rendered (hero
   header alone: 977px), and none of that empty-state marketing stack ever
   went away once a real conversation started - so asking one question meant
   scrolling past ~1500px of Quantum teaser/Personal OS quick-add/pillar
   shortcuts/AI-partners content to see the answer, then hitting MORE of the
   same stuff below it. This is the "2.5 screens" complaint, literally.
   app.js's enterConversationMode() (see wireAiPanel) adds this class to
   #view-wengine the instant a real question is sent (or a past conversation
   is reopened), removed again by panel.__waiNewChat() on "+ Ask WAI" - same
   empty-state-vanishes-once-you're-mid-chat pattern every consumer AI
   product (ChatGPT/Claude/Gemini) already uses. Hero collapses to a slim
   title bar; everything below it that only makes sense on a blank page
   disappears entirely, leaving composer + conversation, nothing else. */
.wai-conversation-active .hero-header {
    max-width: 100%;
    margin: 0 0 4px;
    text-align: left;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.wai-conversation-active .hero-logo-lockup {
    display: none;
}
.wai-conversation-active .hero-header h1 {
    font-size: 16px;
    margin: 0;
}
.wai-conversation-active .hero-header .hero-subtitle,
.wai-conversation-active .hero-header .live-stats-line,
.wai-conversation-active .hero-header .faith-reality-banner,
.wai-conversation-active .hero-header .personalized-greeting {
    display: none !important;
}
.wai-conversation-active .home-section-label,
.wai-conversation-active .home-section-sub,
.wai-conversation-active #quantum-teaser-row,
.wai-conversation-active #pos-quickadd-row,
.wai-conversation-active #hero-shortcuts,
.wai-conversation-active .ai-partners-disclosure {
    display: none !important;
}

/* NEW ("Faz 1: ikon satırı" round): quick icon shortcuts straight to the
   pillars, right under the single search box - a lighter-touch, light-theme
   pill (the sidebar's own .nav-group is styled for the dark sidebar, not
   reusable as-is on the light content area). */
/* CHANGED (redesign round, uploaded "Personal AI OS" mockup's "I NEED..."
   quick-grid - direct user request, "daha ferah olsun"): was a row of small
   pill buttons that wrapped awkwardly with 6 items. Now a real responsive
   card grid, reusing the exact .workspace-card visual language already
   established for the Workspaces hub (task #445) so this reads as the same
   design system rather than a one-off - icon-over-label, centered, same
   hover lift. No HTML/JS changes - same buttons/data-view attributes, only
   restyled. */
.hero-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 18px 0 4px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
/* CHANGED ("WAI Owerall design.docx" round, Hybrid WAI Design Language -
   direct user request "uygula"): the homepage's two most central card-grids
   (this + .pos-quickadd-item) now use the doc's "Borderless/Floating
   Surface" treatment as their first live application - translucent white,
   near-invisible border/shadow, so the CARD stops competing for attention
   and the label/icon inside it reads first (the doc's core principle: "the
   box itself should never draw attention"). Applied narrowly here (the two
   already-symmetric homepage grids) rather than a full sitewide rewrite -
   every other screen's existing card treatment is untouched, on purpose,
   until each is reviewed live one at a time (see chat: a full reskin of
   Business/Engineering/Quantum's functional layouts needs visual QA this
   environment can't do blind). html[data-theme="dark"] gets its own
   slightly-lighter-than-card glass tint so it doesn't just look like a
   plain dark card with no glass effect at all. */
.hero-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255,255,255,.62);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(20,25,35,.06);
    color: var(--text);
    border-radius: var(--card-radius);
    padding: 16px 10px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(20,25,35,.035);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.hero-shortcut:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
html[data-theme="dark"] .hero-shortcut,
html[data-theme="dark"] .pos-quickadd-item,
html[data-theme="dark"] .calculator-card {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.09);
}
.hero-shortcut-icon { font-size: 22px; }

/* NEW ("NE DEGISTI.docx" positioning review round): the "I NEED..." shortcut
   needs to visually stand out from the other (equally valid, but lower-
   urgency) pillar shortcuts - solid orange instead of the neutral outline
   card, since this is meant to read as "click me first if this applies to
   you right now" rather than just another category link. */
.hero-shortcut-highlight {
    background: var(--grad-accent);
    border-color: transparent;
    color: #fff;
}
.hero-shortcut-highlight:hover { box-shadow: var(--shadow-glow), var(--shadow-md); border-color: transparent; }

/* NEW ("NE DEGISTI.docx" positioning review round): honest "which real AI
   engines does W-ENG orchestrate" strip on the home hero - see
   wai_public_ai_partner_labels() in index.php for where the labels come
   from (always the live engine_routing.json, never a hardcoded list). */
.ai-partners-band {
    margin: 22px auto 0;
    max-width: 640px;
    text-align: center;
}
.ai-partners-eyebrow {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ai-partners-tagline {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 10px 0 14px;
}
.ai-partners-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}
.ai-partner-chip {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--navy);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
}
/* NEW ("NE DEGISTI.docx" positioning review round): short vision statement
   at the very bottom of the home screen - deliberately understated (small,
   muted, centered) rather than another loud hero, since its job is to give
   an investor/press visitor who scrolls the "why" without competing with
   the concrete product copy above it for attention. */
/* NEW (2026-07-30): "What's new" account-menu view - plain cards, matches
   the rest of the view-header + card system already used everywhere else. */
.changelog-list { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.changelog-entry {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm, none);
}
.changelog-entry h3 { margin: 0 0 6px; font-size: 15px; }
.changelog-entry p { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.55; }

.wai-vision-section {
    max-width: 680px;
    margin: 34px auto 10px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.wai-vision-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 10px;
}
.wai-vision-body {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}
/* NEW: Today/Tomorrow/Future roadmap strip - see index.php's
   .wai-vision-section for context on why this exists (staged progression
   reads as a plan, not just an aspiration paragraph). Wraps to a stacked
   layout on narrow screens via flex-wrap. */
.wai-roadmap-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.wai-roadmap-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 120px;
}
.wai-roadmap-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--accent);
}
.wai-roadmap-value {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
}
.wai-roadmap-arrow {
    opacity: .4;
    font-size: 14px;
    flex-shrink: 0;
}

/* Settings > Workspace branding (white-label accounts only). */
#settings-white-label-section input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 13.5px;
    font-family: inherit;
}
#settings-white-label-section input[type="color"] {
    width: 60px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
}
#settings-wl-save-btn { width: auto; padding: 8px 16px; }
.live-stats-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--accent-rgb),0.08);
    border: 1px solid var(--accent-light);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    margin: 2px 0 4px;
}

/* NEW ("shop window" round, direct user request - validation report risk
   #6, "the Faith<->Reality dial should be the headline of the feature in
   marketing, not something found later in Settings"): a small discovery
   banner under the hero, same soft-orange family as .live-stats-line above
   but a touch more prominent (real border, not just a pill) since this is
   inviting a click, not just displaying a stat. See wireFaithRealityBanner()
   in app.js. */
.faith-reality-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 640px;
    margin: 6px auto 4px;
    padding: 10px 14px;
    background: rgba(var(--accent-rgb),0.06);
    border: 1px solid var(--accent-light);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
}
.faith-reality-banner span { flex: 1; }
.faith-reality-banner button {
    border: none;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}
.faith-reality-banner #faith-reality-banner-try {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
}
.faith-reality-banner #faith-reality-banner-dismiss {
    color: var(--text-muted, #8a8a8a);
    font-size: 14px;
    padding: 4px;
}
@media (max-width: 640px) {
    .faith-reality-banner { flex-wrap: wrap; text-align: center; }
}

/* ---------- Notifications bell (sidebar) - "notifications" round ---------- */
/* FIXED (v93, direct user report with screenshot): used to be icon-only and
   center-justified - the only sidebar-bottom row without a text label, which
   made it look like a stray/broken button floating under the account row.
   Now left-aligned icon+label, exactly like every sibling row
   (settings-gear-btn) - same row, same position (last in the sidebar
   footer, directly below the account row), just visually consistent now. */
.notif-bell-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    background: transparent;
    border: none;
    color: #C7CEDD;
    font-size: 13px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.notif-bell-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.notif-bell-icon { font-size: 16px; line-height: 1; }
.notif-bell-label { flex: 1; }
.notif-badge {
    position: absolute;
    top: 4px;
    right: 12px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 999px;
    min-width: 15px;
    text-align: center;
}
.notif-panel {
    position: fixed;
    left: 16px;
    bottom: 70px;
    width: 300px;
    max-height: 380px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
    z-index: 600;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
}
/* NEW (direct user request: "Notifications a CLEAR ayrıca ekleyelim") - the
   header used to hold just the "Mark all read" text link; now it's two
   links side by side in their own row so the header text doesn't wrap. */
.notif-panel-header-actions { display: flex; align-items: center; gap: 12px; }
.notif-mark-read-btn, .notif-clear-btn {
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.notif-mark-read-btn:hover, .notif-clear-btn:hover { text-decoration: underline; }
.notif-clear-btn { color: var(--text-muted); }
.notif-list { overflow-y: auto; padding: 6px; }
.notif-empty { color: var(--text-muted); font-size: 13px; padding: 14px; text-align: center; margin: 0; }
/* NEW (v135, direct user request: "ziyaretcilere de bildirim yapsak mi...
   bir ise yarasin") - soft sign-up nudge shown under the guest panel
   (empty or not) so the bell doubles as a growth touchpoint, not just a
   dead icon for a visitor. */
.notif-signup-nudge {
    color: var(--text-muted);
    font-size: 12px;
    padding: 10px 14px;
    text-align: center;
    margin: 4px 0 0;
    border-top: 1px solid var(--border);
}
.notif-item {
    padding: 9px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
}
.notif-item-unread { background: rgba(var(--accent-rgb),0.07); }
.notif-item-title { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--navy); }
.notif-item-message { margin: 0 0 4px; font-size: 12.5px; color: var(--text); }
.notif-item-time { margin: 0; font-size: 11px; color: var(--text-muted); }

/* NEW ("shop window" round, direct user request: notifications should
   split into "genel bildirimler, ödemeler, balance" vs. "kullanıcı için
   oluşturulan datalar ile ilgili bildirimler, farkındalıklar") - a small
   uppercase group label above each bucket, plus styling for the guest
   sign-up teaser card that fills the "For you" bucket when there's nothing
   real to show yet. */
.notif-group-label {
    margin: 10px 4px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.notif-group-label:first-child { margin-top: 2px; }
.notif-item-teaser {
    background: rgba(var(--accent-rgb),0.08);
    border: 1px dashed var(--accent-light);
}
.notif-teaser-btn {
    font-size: 12px;
    padding: 6px 12px;
    margin-top: 2px;
}

.ingest-form {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}
.ingest-form input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}
.ingest-form .btn { white-space: nowrap; }

.module-grid { margin-top: 12px; }

.module-category { margin-top: 26px; }
.module-category:first-child { margin-top: 0; }
.module-category-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.module-category-title .badge {
    position: static;
    background: #E4E8F1;
    color: var(--text-muted);
}

.module-grid-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.module-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}
.module-card h3 { margin: 0 0 6px; font-size: 15px; }
.module-card p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-muted);
    min-height: 34px;
}
.module-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.tag {
    background: #EEF1F6;
    padding: 2px 8px;
    border-radius: 999px;
}
.module-actions { display: flex; gap: 8px; }
.module-actions button {
    flex: 1;
    padding: 7px;
    font-size: 12.5px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
}
.module-actions button:hover { background: #F2F4F8; }
.module-actions .danger:hover { background: #FDECEC; border-color: #F3B4B4; color: #B42318; }

.empty-state {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 30px;
    text-align: center;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.wengine-form { margin-bottom: 8px; }
.wengine-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
}
.wengine-row label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: var(--text-muted);
    flex: 1;
    min-width: 140px;
}
.wengine-row select {
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    background: #fff;
}
#wengine-prompt {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 12px;
}

/* ---------- W-ENG Capabilities panel (on/off cards above the composer) ---------- */
.capabilities-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.cap-toggle, .cap-static {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #E4E8F1;
    border-radius: 10px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.cap-static { cursor: default; background: #F7F8FC; }
.cap-toggle:hover { border-color: var(--accent-light); }
.cap-toggle.active { border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); }
.cap-toggle.cap-disabled { opacity: 0.5; cursor: not-allowed; }
.cap-toggle.cap-disabled:hover { border-color: #E4E8F1; }
.cap-icon { font-size: 18px; flex-shrink: 0; }
.cap-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cap-label { font-size: 13px; font-weight: 700; color: var(--text); }
.cap-label em { font-weight: 400; font-style: normal; color: var(--text-muted); font-size: 11px; }
.cap-label .badge { position: static; margin-left: 6px; background: var(--navy); color: #fff; }
.cap-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.3; }
.cap-switch {
    flex-shrink: 0;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: #D5D9E3;
    position: relative;
    transition: background 0.15s ease;
}
.cap-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}
.cap-toggle.active .cap-switch { background: var(--accent); }
.cap-toggle.active .cap-switch::after { transform: translateX(15px); }

.ai-panel-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: .02em;
    margin-bottom: 10px;
}
.ai-panel-label span {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 11.5px;
}

/* NEW ("first impression" round): clickable example prompts on the main
   W-ENG Console, shown until the visitor sends their first real question. */
.example-prompts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 16px;
}
.example-prompts-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-right: 2px;
}
.example-prompt-chip {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.example-prompt-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.ai-input-wrap {
    position: relative;
    margin-bottom: 4px;
}

.ai-prompt {
    width: 100%;
    padding: 20px 56px 52px 56px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    /* CHANGED (2026-07-30, direct user request: "yazi ekrani buyuk olabilir") -
       was 120px, a cramped single-topic box. 220px reads as an actual writing
       surface (closer to what DeepSeek/ChatGPT/Claude give you by default)
       instead of a search-bar-sized slot. */
    min-height: 220px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.ai-prompt:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-glow); }

/* CHANGED (direct user request: "köşeler eliptik yapmışsın, kesinlikle
   eliptik olmayacak" - corners must NOT be elliptical/pill-shaped). The
   border-radius:999px pill treatment from the "home-screen logo lockup"
   round is removed - the landing-screen composer now uses the exact same
   corner radius as every other state (.ai-prompt's own base rule above),
   no special case. The placeholder-color tweak from that round is kept. */
#view-wengine:not(.wai-conversation-active) .ai-prompt::placeholder {
    color: var(--text-muted);
}

/* REBUILT (Cowork strategy round, direct user report: "sen index teki W ile
   attach yapıyorduk, o özelliği neden kaldırdın? eklemeliyiz" - the W-logo
   animated icon from task #788 had its HTML markup and app.js state-class
   wiring (.receiving/.has-attachment, see renderAttachments()) in place,
   but its CSS was never actually written, so the SVG rendered with no
   stroke color/size - effectively invisible. This was a real gap, not an
   intentional removal. The rules below implement exactly what #788's own
   index.php docblock specifies: idle -> hover (slight scale) -> open
   (outer strokes ease apart, center stroke drops) -> receiving (brief
   inward "swallow" pulse) -> attached (small orange check badge). The
   button itself no longer rotates as a whole (that was the OLD 📎-emoji
   behavior, replaced by #788 - kept here only as the reason overload:
   rotate is gone entirely now, the W's own geometry animates instead). */
.ai-attach-btn {
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: visible;
    border: none;
    padding: 0;
    cursor: pointer;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s var(--ease, ease);
}
.ai-attach-btn:hover { transform: scale(1.08); }

.w-icon {
    width: 22px;
    height: 22px;
    overflow: visible;
    pointer-events: none;
}
.w-icon-outer,
.w-icon-center {
    fill: none;
    stroke-width: 2.4;
    transition: transform .28s cubic-bezier(.34,1.4,.64,1);
    transform-box: fill-box;
    transform-origin: center;
}
.w-icon-outer { stroke: var(--navy); }
.w-icon-center { stroke: var(--accent); }

.ai-attach-btn.open .w-icon-outer-left { transform: translateX(-1.5px) rotate(-4deg); }
.ai-attach-btn.open .w-icon-outer-right { transform: translateX(1.5px) rotate(4deg); }
.ai-attach-btn.open .w-icon-center { transform: translateY(2px); }

@keyframes wIconSwallow {
    0% { transform: translateY(0) scale(1); }
    40% { transform: translateY(3px) scale(0.85); }
    100% { transform: translateY(0) scale(1); }
}
.ai-attach-btn.receiving .w-icon-center { animation: wIconSwallow .65s ease; }

.w-icon-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity .2s ease, transform .2s cubic-bezier(.34,1.4,.64,1);
}
.ai-attach-btn.has-attachment .w-icon-badge { opacity: 1; transform: scale(1); }

.ai-attach-menu {
    position: absolute;
    left: 12px;
    bottom: 54px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(11,30,61,0.12);
    min-width: 220px;
    padding: 6px;
    display: none;
    z-index: 20;
}
.ai-attach-menu.open { display: block; }
.ai-attach-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    border-radius: 6px;
    border: none;
    background: none;
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
}
.ai-attach-menu button:hover { background: #F2F4F8; }

.ai-module-picker {
    position: absolute;
    left: 12px;
    bottom: 54px;
    z-index: 21;
    max-width: 260px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    box-shadow: 0 8px 24px rgba(11,30,61,0.12);
    font-size: 13px;
}

.ai-send-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--grad-accent);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ai-send-btn:hover { transform: scale(1.06); box-shadow: var(--shadow-md); }
.ai-send-btn:active { transform: scale(.97); }
.ai-send-btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }

/* NEW ("add" round): voice input mic button, sits just left of Send - only
   unhidden when the browser actually supports the Web Speech API (see
   wireAiPanel() in app.js). .listening is toggled while actively recording. */
.ai-mic-btn {
    position: absolute;
    right: 54px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.ai-mic-btn:hover { border-color: var(--orange-light, #FF7A29); }
.ai-mic-btn.listening {
    background: #FDEBE3;
    border-color: var(--accent);
    animation: waiMicPulse 1.2s ease-in-out infinite;
}
@keyframes waiMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.35); }
    50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0); }
}

/* NEW (voice mode round, direct user request "kullanıcı keyifle ve
   kolaylıkla ses ile kullanabilir mi"): sits one 42px step further right
   than the mic button, continuing the same 34px-circle toolbar pattern.
   Unlike .listening (a transient few-second state), .active here is a
   standing toggle that stays on across multiple turns, so it gets a solid
   filled look rather than the mic's pulse animation. */
/* CHANGED (WAI CREATE v2 round): moved from right:138px to right:96px now
   that imagegen/mic/voicecall (which used to sit between this and Send) are
   hidden - closes the gap left by their removal. */
.ai-voice-mode-btn {
    position: absolute;
    right: 96px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.ai-voice-mode-btn:hover { border-color: var(--orange-light, #FF7A29); }
.ai-voice-mode-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18);
}

/* NEW (WAI CREATE v2 round - real bug fix): .ai-voiceunified-btn (the merged
   🎙️ voice icon from the earlier button-consolidation round) was added to
   index.php/app.js with NO layout CSS of its own at all - it was rendering
   as a plain unstyled inline button in normal document flow instead of
   sitting in the absolutely-positioned icon row with everything else. This
   is very likely the exact "icons scattered out of place" bug reported
   (alongside the similar pre-existing gap on .ai-docformat-btn, now hidden
   entirely). Same 34px-circle language as its siblings, placed at
   right:54px (freed up now that mic/imagegen/voicecall are hidden). */
.ai-voiceunified-btn {
    position: absolute;
    right: 54px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 15px;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .18s var(--ease);
}
.ai-voiceunified-btn:hover { border-color: var(--accent); transform: translateY(-1px); }

/* NEW (image generation round, direct user request - hybrid free+paid image
   generation): composer button, sits just left of the mic button (34px
   button + 8px gap pattern already used between Send/Mic - see the right:
   values above). Only rendered where wai_render_composer() added it (see
   index.php) - matches .ai-mic-btn's own resting style so all three
   composer buttons read as one family. */
.ai-imagegen-btn {
    position: absolute;
    right: 96px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .18s var(--ease);
}
.ai-imagegen-btn:hover { border-color: var(--orange-light, #FF7A29); transform: scale(1.06); }
.ai-imagegen-btn:disabled { opacity: .5; cursor: default; transform: none; }

/* NEW (Cowork strategy round, direct user report: "W diğerleriyle karışmış,
   sol alt biraz dizayn et" - the 4 generation buttons (Document/Report
   Identity/Video/Excel, tasks #786/#794/#782/#787) were shipped with ZERO
   CSS the entire time - they rendered as unstyled default <button>s flowing
   in normal document flow right under the textarea, visually colliding with
   the one properly-styled element down there (the animated W attach button,
   which floats correctly at bottom:12px via .ai-attach-btn above). This is
   what read as "W mixed in with the others" - two different layout systems
   sitting on top of each other, not a W-specific bug. Fix: give these 4 the
   exact same 34px-circle/8px-gap treatment as .ai-mic-btn/.ai-imagegen-btn
   on the right, continuing the W's own row (left:12) rightward in 42px
   steps - so the whole bottom-left is now ONE deliberate 5-icon toolbar
   (W, Document, Report Identity, Video, Excel) instead of a floating W with
   a plain button row crashing into it from below. */
.ai-docgen-btn,
.ai-docbrand-btn,
.ai-videogen-btn,
.ai-xlsxgen-btn {
    position: absolute;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .18s var(--ease);
}
.ai-docgen-btn:hover,
.ai-docbrand-btn:hover,
.ai-videogen-btn:hover,
.ai-xlsxgen-btn:hover { border-color: var(--orange-light, #FF7A29); transform: scale(1.06); }
.ai-docgen-btn:disabled,
.ai-videogen-btn:disabled,
.ai-xlsxgen-btn:disabled { opacity: .5; cursor: default; transform: none; }
.ai-docgen-btn { left: 54px; }
.ai-docbrand-btn { left: 96px; }
.ai-videogen-btn { left: 138px; }
.ai-xlsxgen-btn { left: 180px; }
.ai-docbrand-btn.open { border-color: var(--accent); background: #FDEBE3; }

/* NEW (Template Gallery round, task #941): the 🧩 HTML-template picker
   continues the same 5-icon toolbar rightward at the next 42px step (after
   W/54/Document/96/Report Identity/138/Video/180/Excel/... wait, that's
   already 4 - this is icon #6, so it sits at 222px). Same 34px-circle
   treatment as its siblings, deliberately duplicated here rather than
   folded into the shared .ai-docgen-btn/.ai-docbrand-btn/... selector list
   above, per this codebase's own "duplication over shared indirection"
   convention (see HtmlStudioClient.php's detectLengthGuidance() docblock) -
   keeps the well-tested existing 4-button rule untouched. */
/* CHANGED (WAI CREATE v2 round): this was a bare 34px circle holding only
   the 🧩 emoji - renamed to a labeled pill ("✨ Create") per spec section 3
   ("Secondary controls ... Create"), and moved from left:222px to left:54px
   now that imagegen/docformat/videogen (which used to occupy the 96/138/180
   slots) are folded inside this button's own window instead of sitting
   next to it - closes the dead gap those removals would otherwise leave. */
.ai-create-btn {
    position: absolute;
    bottom: 10px;
    left: 54px;
    height: 34px;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 15px;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .18s var(--ease);
}
.ai-create-btn:hover, .ai-create-btn.open { border-color: var(--accent); color: var(--accent); }
.ai-create-btn-label { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 480px) {
    .ai-create-btn-label { display: none; }
    .ai-create-btn { padding: 0; width: 28px; min-width: 28px; height: 28px; }
}
.ai-htmltpl-btn:hover { border-color: var(--orange-light, #FF7A29); transform: scale(1.06); }
.ai-htmltpl-btn.open { border-color: var(--accent); background: #FDEBE3; }

/* The template-picker popover itself. Deliberately does NOT use a `hidden`
   class alongside `.open` (unlike .ai-docbrand-panel above, which carries
   both) - `.hidden { display:none !important; }` elsewhere in this file
   would always beat a non-!important `.open { display:block; }` rule
   regardless of specificity, a pre-existing ambiguity that is out of scope
   to fix here. This panel instead defaults to display:none on its own base
   rule and relies solely on `.open` to reveal it. */
/* CHANGED (WAI CREATE v2 round, direct user spec: uploaded "WAI HTML
   Template v2" + GAMMA-comparison doc, explicit feedback "Büyük window
   gelecekti ekrana, özel dizayn ... AYRI ve DEVELOPED WINDOW/BOX ve pencere
   olmalı" - a big, separately-designed window, not a small anchored
   popover). This element is now the full-viewport dimmed backdrop; the
   actual visible window is the .ai-htmltpl-modal-card wrapped inside it (see
   index.php). Desktop: large centered card. Mobile: full-screen sheet (see
   media query below). */
.ai-htmltpl-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(2px);
    font-size: 12.5px;
}
.ai-htmltpl-panel.open { display: flex; }
/* BUG FIX (direct user report: "ÇOK FAZLA ŞEFFAF" + "TIKLAYINCA WINDOW'DAN
   ÇIKIYOR" - screenshot showed the modal transparent with page content
   bleeding through, and any click anywhere inside closing the whole window).
   Root cause: this rule used to be named .ai-htmltpl-card, the EXACT same
   class already used by the per-template gallery buttons further down
   (.ai-htmltpl-card[data-template]). Same selector, same specificity -> the
   later rule (line ~4041, the small button style: background:none, 8px
   radius, 10px padding, no box-shadow) was winning for this big container
   too, stripping its opaque background - and app.js's
   `htmlTplPanel.querySelectorAll('.ai-htmltpl-card')` (template-select ->
   generate -> close) was ALSO binding to this outer wrapper, so any click
   bubbling up through it (i.e. almost any click in the window) triggered an
   unwanted generate+close. Renamed to a unique class; template buttons keep
   their original, untouched .ai-htmltpl-card rule below. */
.ai-htmltpl-modal-card {
    width: min(960px, 100%);
    max-height: min(88vh, 880px);
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(11,30,61,0.32);
    padding: 22px 26px 26px;
    text-align: left;
}
.ai-htmltpl-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.ai-htmltpl-close-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-muted, #888);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.ai-htmltpl-close-btn:hover { border-color: var(--accent); color: var(--accent); }
.ai-htmltpl-panel-title { font-weight: 800; font-size: 19px; margin-bottom: 2px; color: var(--text); letter-spacing: 0.2px; }
.ai-htmltpl-panel-hint { font-weight: 400; font-size: 13px; color: var(--text-muted, #888); display: block; }

/* NEW: the mirrored prompt field - spec section 12 "Large primary prompt
   field". Two-way bound to the main composer textarea in app.js. */
.ai-htmltpl-prompt-mirror {
    width: 100%;
    resize: vertical;
    min-height: 52px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--card-alt, rgba(17,24,39,.03));
    margin-bottom: 4px;
}
.ai-htmltpl-prompt-mirror:focus { outline: none; border-color: var(--accent); }

.ai-htmltpl-sources-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-htmltpl-sources-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.ai-htmltpl-sources-empty { font-size: 11.5px; color: var(--text-muted, #888); }
.ai-htmltpl-source-chip {
    display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border);
    border-radius: 999px; padding: 3px 10px; font-size: 11px; color: var(--text); background: var(--card-alt, rgba(17,24,39,.03));
}
.ai-htmltpl-addsource-btn {
    border: 1px dashed var(--border); background: none; border-radius: 999px;
    padding: 5px 12px; font-size: 11.5px; cursor: pointer; color: var(--text); white-space: nowrap;
}
.ai-htmltpl-addsource-btn:hover { border-color: var(--accent); color: var(--accent); }

/* NEW: the Create Type row - image/PDF/Excel/video proxy cards, spec
   section 11 "Use visual cards". Deliberately styled slightly bolder
   (accent-tinted border) than the plain .ai-htmltpl-card HTML-look cards
   below, since these switch OUTPUT FORMAT entirely, not just visual style. */
.ai-createtype-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 4px; }
.ai-createtype-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 1px solid var(--border); background: var(--card-alt, rgba(17,24,39,.03)); border-radius: 10px;
    padding: 12px 4px; cursor: pointer; color: var(--text); text-align: center;
    transition: border-color .15s ease, transform .15s ease;
}
.ai-createtype-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.ai-createtype-card-icon { font-size: 20px; line-height: 1; }
.ai-createtype-card-label { font-size: 10.5px; line-height: 1.2; font-weight: 600; }
/* NEW (user request: card clicks should only SELECT, not immediately
   fire generation - see wireCreateModal()'s createTypeProxyMap/
   htmlTplPanel .ai-htmltpl-card click handlers in app.js). Same
   accent-tinted "picked" look as the existing .ai-htmltpl-imgsrc-card.active
   pattern, reused here for consistency. */
.ai-createtype-card.active { border-color: var(--accent); color: var(--accent); background: var(--card-alt, rgba(255,122,0,0.1)); }
.ai-htmltpl-style-label-sub { font-weight: 400; font-size: 10.5px; text-transform: none; letter-spacing: normal; margin: 8px 0 0; color: var(--text-muted, #888); }

.ai-htmltpl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.ai-htmltpl-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--border);
    background: none;
    border-radius: 8px;
    padding: 10px 4px;
    cursor: pointer;
    color: var(--text);
    text-align: center;
    transition: border-color .15s ease, transform .15s ease;
}
.ai-htmltpl-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.ai-htmltpl-card-icon { font-size: 18px; line-height: 1; }
.ai-htmltpl-card-label { font-size: 10px; line-height: 1.2; }
/* NEW (user request: "bunlar sadece seçimlik olsun, iş bitince alt sağ
   köşedeki GENERATE tiklanınca running çalışsın" - card clicks should
   only mark a selection, generation should wait for the explicit
   Generate button) - visual "picked" state, same language as
   .ai-createtype-card.active above. */
.ai-htmltpl-card.active { border-color: var(--accent); color: var(--accent); background: var(--card-alt, rgba(255,122,0,0.1)); }

/* NEW (theme/texture/icon round) - opt-in style controls appended below the
   template grid inside the same .ai-htmltpl-panel window, see index.php. */
.ai-htmltpl-style-row { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.ai-htmltpl-style-label { font-weight: 700; font-size: 10.5px; color: var(--text-muted, #888); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.ai-htmltpl-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
/* CHANGED: swatch button itself is now a small column (dot + label) instead
   of just a bare circle, so the theme name reads without hovering (spec
   section 16-17: "Use visual preview cards... Do NOT use text-only theme
   buttons"). */
.ai-htmltpl-swatch {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    border: none; background: none; cursor: pointer; padding: 2px; color: var(--text-muted, #888);
}
.ai-htmltpl-swatch-dot {
    display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
    box-shadow: 0 1px 2px rgba(11,30,61,0.15);
}
.ai-htmltpl-swatch.active .ai-htmltpl-swatch-dot, .ai-htmltpl-swatch:hover .ai-htmltpl-swatch-dot { border-color: var(--text); }
.ai-htmltpl-swatch.active { color: var(--text); font-weight: 700; }
.ai-htmltpl-swatch-label { font-size: 10px; }
.ai-htmltpl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-htmltpl-chip {
    border: 1px solid var(--border); background: none; border-radius: 999px;
    padding: 4px 10px; font-size: 10.5px; cursor: pointer; color: var(--text);
}
.ai-htmltpl-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* NEW: texture chips get a real small pattern preview square (spec section
   18: "Every option must have a real preview") instead of being text-only. */
.ai-htmltpl-chips-visual .ai-htmltpl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; }
.ai-htmltpl-chips-visual .ai-htmltpl-chip.active { background: none; border-color: var(--accent); color: var(--accent); }
.ai-htmltpl-texture-preview {
    display: block; width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--border);
    background-color: var(--card-alt, #f4f4f6);
}
.ai-htmltpl-texture-preview-none { background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(15,23,42,0.15) 3px, rgba(15,23,42,0.15) 4px); }
.ai-htmltpl-icons-toggle {
    display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text); cursor: pointer;
}
.ai-htmltpl-icons-toggle input { margin-top: 2px; }
.ai-htmltpl-icon-preview-strip { display: flex; gap: 8px; margin-top: 8px; padding-left: 22px; color: var(--text-muted, #888); }

/* NEW: Image Source visual cards (spec section 20 "IMAGE SOURCE... visual
   selector"). */
.ai-htmltpl-imgsrc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ai-htmltpl-imgsrc-card {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: 1px solid var(--border); background: none; border-radius: 10px;
    padding: 10px 6px; cursor: pointer; color: var(--text); text-align: center; font-size: 11.5px; font-weight: 600;
    transition: border-color .15s ease;
}
.ai-htmltpl-imgsrc-card.active { border-color: var(--accent); color: var(--accent); background: var(--card-alt, rgba(255,122,0,0.06)); }
.ai-htmltpl-imgsrc-icon { font-size: 18px; line-height: 1.4; }
.ai-htmltpl-imgsrc-hint { font-size: 9.5px; font-weight: 400; color: var(--text-muted, #888); }

/* NEW (free stock-photo search + company-logo fetch round, direct user
   request: "web den free image... genelde daha çok a kaynağından görsel
   çekilecek... web sayfasından belki logo vs olabilir"). Search panel reuses
   the same card/border language as the imgsrc cards above; results are a
   small thumbnail grid, same sizing as .ai-htmltpl-image-thumb below so the
   picker and the "already added" strip read as one visual family. */
.ai-htmltpl-imgsearch-panel { margin-top: 8px; }
.ai-htmltpl-imgsearch-panel.hidden { display: none; }
.ai-htmltpl-imgsearch-bar { display: flex; gap: 6px; }
.ai-htmltpl-imgsearch-bar input {
    flex: 1; border: 1px solid var(--border); border-radius: 8px; background: var(--card);
    color: var(--text); font-size: 12px; padding: 8px 10px;
}
.ai-htmltpl-imgsearch-bar button {
    border: none; background: var(--accent); color: #fff; font-weight: 700; font-size: 12px;
    padding: 8px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.ai-htmltpl-imgsearch-results {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-top: 8px;
}
.ai-htmltpl-imgsearch-results:empty { margin-top: 0; }
.ai-htmltpl-imgsearch-result {
    padding: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
    cursor: pointer; aspect-ratio: 1 / 1; background: none;
}
.ai-htmltpl-imgsearch-result:hover { border-color: var(--accent); }
.ai-htmltpl-imgsearch-result img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-htmltpl-imgsearch-result:disabled { opacity: 0.5; cursor: default; }
.ai-htmltpl-imgsearch-status { font-size: 11px; color: var(--text-muted, #888); margin-top: 6px; min-height: 14px; }

.ai-htmltpl-logofetch-row {
    display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.ai-htmltpl-logofetch-row input {
    flex: 1; min-width: 140px; border: 1px solid var(--border); border-radius: 8px; background: var(--card);
    color: var(--text); font-size: 12px; padding: 7px 10px;
}
.ai-htmltpl-logofetch-row button {
    border: 1px dashed var(--border); background: none; border-radius: 8px; color: var(--text);
    font-size: 11.5px; font-weight: 600; padding: 7px 12px; cursor: pointer; white-space: nowrap;
}
.ai-htmltpl-logofetch-row button:hover { border-color: var(--accent); color: var(--accent); }
.ai-htmltpl-logofetch-status { font-size: 10.5px; color: var(--text-muted, #888); flex-basis: 100%; }

.ai-htmltpl-footer-hint { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted, #888); text-align: center; }
/* NEW (direct user request: "OK veya Run butonu koyalım/ekleyelim") - explicit
   primary Generate action alongside the existing footer hint text, so
   confirming isn't only possible by clicking a template tile above. */
.ai-htmltpl-footer-row {
    margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.ai-htmltpl-footer-row .ai-htmltpl-footer-hint { margin-top: 0; padding-top: 0; border-top: none; text-align: left; flex: 1; min-width: 180px; }
.ai-htmltpl-generate-btn {
    flex-shrink: 0; border: none; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px;
    padding: 10px 22px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    box-shadow: 0 6px 16px rgba(255,122,0,0.28); transition: transform .15s ease, box-shadow .15s ease;
}
.ai-htmltpl-generate-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,122,0,0.36); }

/* Mobile: full-screen creation sheet, spec section 10/33 - no dimmed margin,
   the card itself fills the viewport with only its own internal padding. */
@media (max-width: 640px) {
    .ai-htmltpl-panel { padding: 0; align-items: stretch; }
    .ai-htmltpl-modal-card { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
    .ai-createtype-row, .ai-htmltpl-grid { grid-template-columns: repeat(3, 1fr); }
    .ai-htmltpl-imgsrc-row { grid-template-columns: repeat(2, 1fr); }
}

/* NEW (Gamma-style HTML Studio round): page-count/density chips reuse
   .ai-htmltpl-chip's existing look (see the texture-chip rule above), so no
   new chip CSS is needed - only the image-attach slot below is new. */
.ai-htmltpl-image-add-btn {
    border: 1px dashed var(--border); background: none; border-radius: 8px;
    padding: 8px 12px; font-size: 11.5px; cursor: pointer; color: var(--text);
    width: 100%; text-align: center;
}
.ai-htmltpl-image-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.ai-htmltpl-image-thumbs {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.ai-htmltpl-image-thumbs:empty { margin-top: 0; }
.ai-htmltpl-image-thumb {
    position: relative; width: 48px; height: 48px; border-radius: 6px;
    overflow: hidden; border: 1px solid var(--border);
}
.ai-htmltpl-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-htmltpl-image-thumb-remove {
    position: absolute; top: 0; right: 0; width: 16px; height: 16px;
    background: rgba(15,23,42,0.75); color: #fff; border: none; border-radius: 0 0 0 6px;
    font-size: 10px; line-height: 16px; cursor: pointer; padding: 0;
}

/* The Report Identity popover itself never had layout CSS either (only its
   hidden/open class toggling existed in app.js) - same card/shadow language
   as .ai-attach-menu, anchored above its own toggle button instead of the W's. */
.ai-docbrand-panel {
    position: absolute;
    left: 96px;
    bottom: 54px;
    z-index: 22;
    width: 260px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(11,30,61,0.12);
    padding: 12px;
    display: none;
    font-size: 12.5px;
}
.ai-docbrand-panel.open { display: block; }

/* NEW (button-consolidation round, direct user request: "Excel, word, pdf,
   html ve ilgili ikonlar birleştirilebilirmi, tek ikon ile zaten
   seçilecek") - same popover language as .ai-docbrand-panel above, just a
   2-option list instead of a form. */
.ai-docformat-panel {
    position: absolute;
    left: 176px;
    bottom: 54px;
    z-index: 22;
    width: 200px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(11,30,61,0.12);
    padding: 8px;
    display: none;
    font-size: 12.5px;
}
.ai-docformat-panel.open { display: block; }
.ai-docformat-option {
    display: block; width: 100%; text-align: left; border: none; background: none;
    border-radius: 6px; padding: 8px 10px; cursor: pointer; color: var(--text); font-size: 12.5px;
}
.ai-docformat-option:hover { background: var(--hover, rgba(0,0,0,0.05)); }

/* NEW (button-consolidation round): permanently hides a composer button
   that's been merged into another one via the click-through-proxy pattern
   (see .ai-mic-btn/.ai-voicecall-btn -> .ai-voiceunified-btn in index.php,
   and .ai-docgen-btn/.ai-xlsxgen-btn -> .ai-docformat-btn above) - stronger
   than the plain .hidden class alone so it stays invisible even if the
   button's own JS (e.g. wireVoiceInput()'s classList.remove('hidden') for
   browsers that support dictation) tries to unhide it. */
.ai-icon-proxied { display: none !important; }

/* NEW (task #946, direct user request - ChatGPT/Grok-style top-right ⋮
   session menu): a slim bar sitting above .ai-asked-prompt, hidden until a
   real server-side conversation exists (see updateSessionMenuBar() in
   app.js). Title on the left (fades if too long), ⋮ button + popover on the
   right - same card/shadow/border-radius language as .ai-docbrand-panel
   above, just anchored top-right instead of bottom-left of the composer. */
/* CHANGED (direct user report, twice now: "3 nokta hala yok benim sağ üst
   köşede" - the bar was previously a normal in-flow element sitting just
   above the "you asked" line, i.e. it scrolled away with the conversation
   and only ever sat wherever that line happened to land on the page - not
   what "my top-right corner" means to a user (a fixed spot, always in the
   same place, like the hamburger icon's opposite number). Now pinned to
   the actual browser viewport with position:fixed, reusing the exact
   top:72px/right:16px anchor + z-index scale already proven not to
   collide with anything else on this page by .global-result-panel (see
   that rule's own docblock) - same technique, much smaller widget. */
.ai-session-menu-bar {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 470;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    max-width: min(340px, 42vw);
    padding: 6px 8px 6px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(11,30,61,0.16);
}
.ai-session-menu-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary, var(--text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 900px) {
    /* On narrow screens the fixed corner widget would overlap the
       hamburger/mobile menu button - collapse it down to just the ⋮
       button (still fixed, still always reachable) and hide the title
       text rather than fight for the same few pixels of header space. */
    .ai-session-menu-bar { max-width: none; padding: 6px; top: 10px; right: 10px; }
    .ai-session-menu-title { display: none; }
}
.ai-session-menu-wrap { position: relative; flex-shrink: 0; }
.ai-session-menu-btn {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: 8px;
    width: 28px;
    height: 28px;
    line-height: 1;
    font-size: 16px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.ai-session-menu-btn:hover { border-color: var(--accent); }
.ai-session-menu-panel {
    position: absolute;
    top: 34px;
    right: 0;
    z-index: 22;
    min-width: 180px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(11,30,61,0.12);
    padding: 6px;
    display: none;
}
.ai-session-menu-panel.open { display: block; }
.ai-session-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    color: var(--text);
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.ai-session-menu-item:hover { background: var(--bg-hover, rgba(0,0,0,0.05)); }
.ai-session-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.ai-docbrand-panel-title { font-weight: 700; margin-bottom: 8px; color: var(--text); }
.ai-docbrand-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ai-docbrand-presets button {
    border: 1px solid var(--border);
    background: none;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11.5px;
    cursor: pointer;
    color: var(--text);
}
.ai-docbrand-presets button:hover { border-color: var(--accent); color: var(--accent); }
.ai-docbrand-section { margin-bottom: 10px; }
.ai-docbrand-section:last-child { margin-bottom: 0; }
.ai-docbrand-section-label { font-weight: 600; display: block; margin-bottom: 4px; color: var(--text); }
.ai-docbrand-radio { display: block; margin-bottom: 4px; cursor: pointer; color: var(--text); }
.ai-docbrand-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 4px; }
.ai-docbrand-fields select { font-size: 11.5px; padding: 2px 4px; }
/* NEW (task #895): CV role/country/style selects read better stacked full-
   width than inline with the header/footer checkboxes above - each is its
   own decision, not a set of toggles to scan together. */
.ai-docbrand-fields-stacked { flex-direction: column; align-items: stretch; }
.ai-docbrand-fields-stacked select { font-size: 12px; padding: 5px 6px; width: 100%; }
.ai-docbrand-hint { font-weight: 400; font-size: 10.5px; color: var(--text-muted, #888); }

/* CHANGED (WAI CREATE v2 round): most of the composer icons this block used
   to reposition (docgen/docbrand/videogen/xlsxgen/imagegen/mic/voicecall)
   are now permanently hidden (.ai-icon-proxied - see index.php), folded into
   the ✨ Create window or the 🎙️ unified voice button. Only the survivors
   (attach, create, voice-mode toggle, unified voice, send) need shrinking on
   phone-width screens now - a much shorter, much less fragile list than the
   old "9 buttons at hand-tuned pixel offsets" version. */
@media (max-width: 480px) {
    .ai-attach-btn, .ai-send-btn, .ai-voiceunified-btn {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    .ai-voiceunified-btn { right: 44px; }
    .ai-voice-mode-btn { right: 80px; width: 28px; height: 28px; font-size: 13px; }
    .ai-docbrand-panel { left: 12px; width: calc(100vw - 64px); max-width: 260px; }
}

/* NEW ("compact Q+A" round, direct user request: "soru ekranı, altında yanıt
   ekranı, çok kompakt" / "progresing yanıt ekranında olsun, heryerde değil"):
   the compact "you asked" line - see index.php's wai_render_composer(),
   moved directly above .ai-thinking/.ai-result so question -> progress ->
   answer reads as one small consolidated group at the bottom of the panel,
   not scattered across separate blocks up and down the page. Deliberately
   plain (no bubble/avatar chrome) - it's a quiet label, the real visual
   weight stays on the answer below it. */
/* FIX (task #1030, direct user report: "you asked yüksekliği sorulan soru
   satır ve yüksekliği ile ilintili olsun" - screenshots showed a long
   feasibility-study question getting hard-clipped mid-sentence). See the
   matching docblock in assets/css/style.css for the full explanation. */
.ai-asked-prompt {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-muted, #6b7280);
    background: var(--card-alt, rgba(17,24,39,.035));
    border-radius: 10px;
    padding: 8px 12px;
    margin: 10px 0 8px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
.ai-asked-prompt::before {
    content: "You asked";
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 2px;
}
html[data-theme="dark"] .ai-asked-prompt { background: rgba(255,255,255,.05); }

/* Generated image result - rendered inline into .ai-text (see runImageGen()
   in app.js), same container real text answers use, so no separate result
   layout was needed. */
.ai-generated-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md, 14px);
    box-shadow: var(--shadow-sm);
    margin-top: 4px;
}

.ai-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.ai-attachments:empty { display: none; margin: 0; }
.ai-attachment-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #EEF1F6;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    color: var(--text);
}
.ai-attachment-chip button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1;
    padding: 0;
}

.ai-thinking {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 10px;
    width: 22px;
    height: 22px;
}
.ai-thinking img {
    width: 100%;
    height: 100%;
    transform-origin: center;
    animation: wai-blink 1.4s ease-in-out infinite;
}
@keyframes wai-blink {
    0%, 80%, 100% { transform: scaleY(1); }
    90% { transform: scaleY(0.15); }
}

.prompt-chip {
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.prompt-chip:hover { border-color: var(--accent); color: var(--text); }
/* NEW ("Universal AI Data Studio" round): a small horizontal row of pill-
   style prompt chips (Data Import's "what would you like to do" row) -
   scoped under .prompt-chip-row so it doesn't affect the existing full-width
   .placeholder-card.prompt-chip usage elsewhere, which needs the plain,
   unstyled base above. */
.prompt-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.prompt-chip-row .prompt-chip {
    width: auto;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.prompt-chip-row .prompt-chip:hover { border-color: var(--accent); color: var(--text); background: var(--card); }
/* NEW (task #339): registration interest-picker reuses the .prompt-chip-row
   pattern above, plus a selected/active state (not needed by the Data Import
   usage, which has no persistent selection) and a small muted label. */
.register-interest-label { font-size: 12px; color: var(--text-muted); margin: 2px 0 -4px; }
/* GENERALIZED (Personal OS redesign round): was scoped to #register-interest-row
   only - widened to any .prompt-chip-row so the AI Memory & Personality chip
   pickers below (and any future single-select chip row) get the same selected
   state for free, no new CSS needed per usage. */
.prompt-chip-row .prompt-chip.is-selected {
    border-color: var(--accent);
    color: #fff;
    background: var(--accent);
}
/* NEW (Personal OS redesign round): small muted label above a chip-picker
   field, matching .profile-form label's own font-size/color so it reads as
   part of the same form even though it's not inside a real <label>+<select>
   pair anymore. */
.pos-chip-field-label {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0 0 5px;
}


.ai-panel { margin-top: 24px; }

/* Claude/Gemini-style "message bubble" - it used to look like a "result box"
   with a dark border, now it's a softer, lighter card that feels like a chat
   reply: no hard border, a subtle shadow, more rounded corners. */
.wengine-result {
    margin-top: 22px;
    background: #F7F8FC;
    border: none;
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(11,30,61,0.06);
}
/* FIX (direct user request, live screenshot: a stray "WHT AI" label was
   floating above every answer's Sources block, disconnected from the actual
   reply bubble above it - this is exactly that element. Leftover from
   before the WAI rebrand (task #87 renamed WHT AI -> WAI everywhere else in
   the app, this one hardcoded ::before was missed). Removed rather than
   relabeled "WAI" - the message bubble itself already reads as WAI's answer
   (composer label, W-Spiral, etc.), a second small caption repeating the
   brand name added noise without adding information. */
/* Which engine ran and its cost are not shown to the customer/user - this
   information is internal only (the Admin & Analytics screen already shows
   cost broken down by engine). JS still populates these fields, they're just
   not visible; if a "developer mode" setting is added in the future, this can
   be turned back on with a single line. */
.wengine-chain,
.wengine-meta {
    display: none;
}
/* If a guest/a user out of credit is in the free (Free Community Model) mode,
   a badge that clearly shows this - to fulfill the "at least let them try it" request. */
.free-mode-badge {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #0B6B3A;
    background: #E8F7EE;
    border: 1px solid #BEE9CE;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.free-mode-badge a {
    color: #0B6B3A;
    text-decoration: underline;
    font-weight: 700;
}

/* NEW ("report quality" round, direct user request): the "Inputs used" card
   at the top of every calculator/tool report (see .ai-input-summary in
   index.php and buildInputSummary() in app.js). Reuses the same
   label/value-row look as .calc-number-row (below) so it feels like part of
   the same family of "numbers" UI rather than a bolted-on new pattern. */
.ai-input-summary {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border);
}
.input-summary-title {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}
.input-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}
.input-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: #F7F8FA;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12.5px;
}
.input-summary-row strong { color: var(--navy); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.input-summary-badge {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 999px;
    padding: 2px 7px;
}
.input-summary-badge-default {
    color: var(--text-muted);
    background: #EEF1F6;
    border: 1px solid var(--border);
}
.input-summary-badge-edited {
    color: #B8560C;
    background: #FFF1E4;
    border: 1px solid #FFCFA0;
}
.input-summary-edit-btn {
    font-size: 12px;
    padding: 6px 12px;
}

/* NEW ("report quality" round, direct user request): the "Example equipment
   configuration" card for Solar/BESS results (see EquipmentCatalog.php +
   renderEquipmentExamples() in app.js). Distinct light-orange tint (not the
   neutral gray of .ai-input-summary) so it visually reads as "illustrative
   reference," not as verified fact - matching the disclaimer text it always
   carries. */
.ai-equipment-examples {
    margin-top: 14px;
    padding: 12px 14px;
    background: #FFF9F3;
    border: 1px solid #FFE0BF;
    border-radius: 10px;
}
.equipment-examples-title {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
}
.equipment-example-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #FFE0BF;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12.5px;
    margin-bottom: 6px;
}
.equipment-example-row:last-of-type { margin-bottom: 10px; }
.equipment-examples-disclaimer {
    margin: 0;
    font-size: 10.5px;
    font-style: italic;
    color: var(--text-muted);
}

/* NEW ("report quality" round, direct user request): the headline "hero"
   number card - large bold typography for the single most important result
   figure (e.g. net system cost, annual savings), so a report reads at a
   glance instead of requiring the user to scan a bullet list first. */
.ai-hero-number {
    margin-bottom: 14px;
    padding: 16px 18px;
    background: var(--navy);
    border-radius: 12px;
    color: #ffffff;
}
.ai-hero-number-label {
    margin: 0 0 4px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255,255,255,0.7);
}
.ai-hero-number-value {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.1;
}

/* NEW ("report quality" round): simple illustrative system schematic
   (roof/panel/inverter/battery/grid) - a generic static diagram, not drawn
   from the user's real numbers, just to make Solar/BESS reports feel like
   an actual system diagram rather than only text. */
.ai-schematic {
    margin-top: 14px;
    padding: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
}
.ai-schematic svg { max-width: 100%; height: auto; }
.ai-schematic-caption {
    margin: 8px 0 0;
    font-size: 10.5px;
    font-style: italic;
    color: var(--text-muted);
}

/* NEW ("sharing" round, direct user request): the "Get shareable link"
   result box - shows the real /r/{id} permalink once created, with a
   preview thumbnail of the server-rendered OG image so the user can see
   exactly what a WhatsApp/X/LinkedIn paste will look like before sharing. */
.ai-share-link-result {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.ai-share-link-result img {
    width: 100px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.ai-share-link-result-body { flex: 1; min-width: 0; }
.ai-share-link-url {
    font-size: 12.5px;
    color: var(--navy);
    word-break: break-all;
}
.ai-share-link-hint {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--text-muted);
}

/* Real conversation history - previous turns (see ConversationStore.php)
   accumulate here as static bubbles, the most recent turn stays in .ai-result.
   MOVED (this round, "newest report always on top" fix): this block now
   renders BELOW the live current-turn area in the DOM (see
   wai_render_composer() in index.php) and each newly-archived turn is
   prepended to the top of it (see archiveCurrentTurn() in app.js) - so
   margin-top (separating it from the result above) is now correct, not
   margin-bottom (which separated it from what used to follow it). */
.ai-thread-history {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.ai-thread-history:empty { display: none; }
.thread-bubble {
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    padding: 10px 14px;
    border-radius: 14px;
    max-width: 85%;
}
.thread-bubble-user {
    align-self: flex-end;
    background: var(--navy);
    color: #fff;
}
.thread-bubble-assistant {
    align-self: flex-start;
    background: #F7F8FC;
    color: var(--text);
}

/* ---------- How to use WHT AI (in-app user manual) ---------- */
/* NEW ("Complete User Guide" round): download card on Help + inline link
   on Subscriptions - see view-help / view-subscriptions in index.php. */
.guide-download-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    border-radius: var(--card-radius, 14px);
    padding: 18px 20px;
    margin-bottom: 26px;
    max-width: 720px;
    color: #fff;
}
.guide-download-icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
.guide-download-text { flex: 1; min-width: 0; }
.guide-download-text h3 { margin: 0 0 4px; font-size: 15px; color: #fff; }
.guide-download-text p { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.85); }
.guide-download-card .btn { flex-shrink: 0; white-space: nowrap; }
.guide-inline-link { margin: 0 0 6px !important; font-size: 13px; }
.guide-inline-link a { color: var(--orange, #FF7A1A); font-weight: 600; text-decoration: none; }
.guide-inline-link a:hover { text-decoration: underline; }

.help-section { margin-bottom: 26px; max-width: 720px; }
.help-section h3 { margin: 0 0 8px; font-size: 15px; color: var(--navy); }
.help-section p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.help-section code {
    background: #EEF1F6;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12.5px;
}
.help-walkthroughs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.help-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.help-card h4 { margin: 0 0 6px; font-size: 13.5px; }
.help-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.wengine-text {
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    margin-bottom: 14px;
    /* Long contract/report outputs scroll within themselves so they don't
       stretch the page excessively and give an "unclear where it ends" look -
       we deliberately made the scrollbar prominent/thick too (to avoid the
       "there's no scroll here" impression). */
    max-height: 480px;
    overflow-y: auto;
    padding-right: 6px;
}
.wengine-text::-webkit-scrollbar { width: 10px; }
.wengine-text::-webkit-scrollbar-track { background: #EEF1F6; border-radius: 999px; }
.wengine-text::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }

/* NEW (this round): "report-quality" typography for renderRichText() output -
   headers/lists/paragraphs/code now get real spacing and hierarchy instead
   of running together as one dense block. Header levels are deliberately
   modest (h3-h5, not h1/h2) since they sit INSIDE a result panel, not as a
   page title. */
.wengine-text p { margin: 0 0 10px; }
.wengine-text p:last-child { margin-bottom: 0; }
.wengine-text h3, .wengine-text h4, .wengine-text h5 {
    margin: 16px 0 8px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}
.wengine-text h3:first-child, .wengine-text h4:first-child, .wengine-text h5:first-child { margin-top: 0; }
/* NEW ("Gemini-style report" round): a colored left accent bar on the top-
   level section header - the same treatment the PDF template gives .wai-
   report-body h3 (see exportTextAsPdf() in app.js) - so a section boundary
   reads as a real visual break on screen too, not just bold text, and the
   two outputs share one consistent look. */
.wengine-text h3 { font-size: 17px; border-left: 3px solid var(--accent, var(--orange, #FF7A00)); padding-left: 9px; }
.wengine-text h4 { font-size: 15.5px; }
.wengine-text h5 { font-size: 14.5px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); }
.wengine-text ul, .wengine-text ol { margin: 0 0 12px; padding-left: 22px; }
.wengine-text li { margin-bottom: 4px; }
.wengine-text code {
    background: #F1F3F8;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.92em;
}
.wengine-text strong { color: var(--navy); }

/* REWRITE ("Gemini-style report" round, direct user request "gemini tarzı
   dizayn"): real source links for a Live Data (Tavily)-backed answer used to
   render as a plain wrapped line of underlined links - modern AI-answer UIs
   (Gemini, Perplexity) show these as small rounded CARD chips instead, so
   they read as distinct, scannable citations rather than a wall of blue
   text. Same real data, only the markup/styling changed - see
   renderSources()/waiSourceIcon()/waiSourceHost() in app.js. The exact same
   class names are reused (unstyled but present) in exportTextAsPdf()'s PDF
   template so the two stay visually consistent. */
.ai-sources { margin: -2px 0 14px; }
.ai-sources-label {
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--text-muted, #6B7280);
    margin-bottom: 7px;
}
.ai-source-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ai-source-chip {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    background: var(--light-stone, #F7F8FB);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 11px;
    max-width: 240px;
    text-decoration: none;
    transition: border-color .15s var(--ease, ease), transform .15s var(--ease, ease);
}
.ai-source-chip:hover { border-color: var(--accent, var(--orange, #FF7A00)); transform: translateY(-1px); }
.ai-source-chip-icon { font-size: 14px; line-height: 1.4; flex-shrink: 0; }
.ai-source-chip-body { min-width: 0; }
.ai-source-chip-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy, #0B1E3D);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-source-chip-meta {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted, #6B7280);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html[data-theme="dark"] .ai-source-chip { background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .ai-source-chip-title { color: var(--text); }

.ai-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.ai-result-actions .btn { width: auto; padding: 7px 14px; font-size: 12.5px; }

/* NEW ("Simplify AI answer page layout" round): the share/platform buttons
   collapsed into a native <details> disclosure right after the primary
   4-button row above - reuses the same visual language as .ai-trust-details
   (▸ arrow, muted label) so the two disclosures already on this screen feel
   consistent, not like two different components bolted together. */
.ai-share-more { margin: 0 0 14px; font-size: 12.5px; }
.ai-share-more summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 0;
    user-select: none;
}
.ai-share-more summary::-webkit-details-marker { display: none; }
.ai-share-more summary::before {
    content: '▸';
    display: inline-block;
    color: var(--accent);
    font-size: 11px;
    margin-right: 6px;
    transition: transform 0.15s ease;
}
.ai-share-more[open] summary::before { transform: rotate(90deg); }
.ai-share-more-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.ai-share-more-body .btn { width: auto; padding: 7px 14px; font-size: 12.5px; }

/* REVERTED ("hala yarısı kadar bile değil" round, direct user report: the
   side-by-side layout below reserved a fixed 250px column for sources/
   evidence/details on every wide screen, which for a short answer (e.g. one
   date) made the real answer column look cramped/lopsided next to a wide
   near-empty side rail, and never matched the composer's own full width the
   way the user wanted - "yanıt ekranı soru ekranı ile aynı genişlikte olsun"
   - back to a single, full-width column: the answer text, then sources/
   evidence/details stacked below it, all at the SAME width as the composer
   above (both are just children of .ai-panel, no extra layout imposed here
   any more). */
.ai-side-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* NEW (v92, direct user request): per-answer feedback widget - see
   renderFeedbackWidget() in app.js, inserted right after .ai-result-actions
   on every result panel. */
.ai-feedback-widget {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.ai-feedback-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-feedback-label { font-size: 12.5px; color: var(--text-muted); margin-right: 4px; }
.ai-feedback-btn {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--text);
}
.ai-feedback-btn:hover { border-color: var(--accent); }
.ai-feedback-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ai-feedback-followup { margin-top: 8px; }
.ai-feedback-comment {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 6px;
}
.ai-feedback-submit-btn { width: auto; padding: 6px 14px; font-size: 12.5px; }
.ai-feedback-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ai-suggestion-chip {
    background: #FFF3EA;
    border: 1px solid #FFD8B8;
    color: var(--navy);
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
}
.ai-suggestion-chip:hover { background: #FFE6D0; }
.ai-feedback-thanks { font-size: 12.5px; color: var(--text-muted); margin: 8px 0 0; }
/* NEW (App Store/Play Store compliance round): report button + persistent
   AI-content disclosure line - see renderFeedbackWidget() in app.js. */
.ai-feedback-report-btn { color: #D64545; border-color: #F3B4B4; margin-left: 4px; }
.ai-feedback-report-btn:hover { background: #FDECEC; border-color: #D64545; }
.ai-feedback-report-btn.active { background: #D64545; border-color: #D64545; color: #fff; }
.ai-feedback-disclosure { font-size: 11px; color: var(--text-muted); margin: 8px 0 0; opacity: 0.75; }

/* NEW ("Share enrichment" round): format-optimized platform preview panel,
   opened when a share/platform button in .ai-result-actions is clicked. */
.share-preview {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 0 0 14px;
}
.share-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 10px;
    font-size: 13.5px;
}
.share-preview-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    padding: 2px 6px;
}
.share-preview-close:hover { color: var(--text); }

/* NEW (task #865, "Canvas" - Ask WAI Anything only): same card/header
   grammar as .share-preview above, so this reads as part of the same
   family of "extra panel that opens under an answer" UI rather than a
   one-off. Monospace content area since Canvas content is almost always
   code or a plain-text draft, never rich/markdown. */
.ai-canvas-panel {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 0 0 14px;
}
/* NEW (task #866, "competitor gap" round): Persona/Saved Mode select row -
   the <select> plus its "Manage" button need to sit side by side inside the
   same label the way Task type/Customer segment/Model already do, without
   the button stretching to the label's full width like a lone form element
   would. */
.ai-persona-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-persona-row .ai-persona-select {
    flex: 1;
    min-width: 0;
}
.ai-persona-manage-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.ai-canvas-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 10px;
    font-size: 13.5px;
    gap: 10px;
}
/* NEW (task #896): Preview/Code tabs - only unhidden for html/htm content
   (see wireCanvas() in app.js), sitting between the title and the close
   button so the head reads as one row: title, mode switch, close. */
.ai-canvas-tabs {
    display: flex;
    gap: 4px;
    margin-left: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
}
.ai-canvas-tab {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}
.ai-canvas-tab.active {
    background: var(--navy);
    color: #fff;
}
.ai-canvas-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    padding: 2px 6px;
}
.ai-canvas-close-btn:hover { color: var(--text); }
.ai-canvas-content {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    max-height: 420px;
    overflow-y: auto;
    margin: 0 0 10px;
}
/* NEW (task #896): the live-render half of the Preview/Code toggle - a
   real iframe, not a screenshot or a re-parsed subset, so CSS/JS in the
   AI's HTML actually runs (sandboxed - see index.php's iframe comment). */
.ai-canvas-preview {
    width: 100%;
    height: 420px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    margin: 0 0 10px;
}
.ai-canvas-panel-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.share-mode-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.share-mode-chip {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11.5px;
    cursor: pointer;
}
.share-mode-chip:hover { border-color: var(--accent-light); }
/* CHANGED (2026-07-30, direct user request): tick-style multi-select instead
   of a single exclusive pick - several chips can show this "on" state at
   once now (see openSharePreview() in app.js). The checkmark makes that
   obvious at a glance instead of just a color swap. */
.share-mode-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}
.share-mode-chip.active::before { content: '✓ '; }
.share-preview-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
    margin: 0 0 8px;
}
.share-preview-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.share-char-count.over { color: #D64545; font-weight: 600; }
.share-sig-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
    cursor: pointer;
}
.share-sig-toggle input { margin: 0; }
.share-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.share-preview-actions .btn { width: auto; padding: 7px 14px; font-size: 12.5px; }

/* NEW (this round): clarifying-question module. */
.ai-clarify {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 16px;
}
.ai-clarify-question { font-weight: 600; margin: 0 0 12px; }
.ai-clarify-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ai-clarify-option-btn {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
}
.ai-clarify-option-btn:hover { border-color: var(--accent); color: var(--accent); }
.ai-clarify-custom-form { display: flex; gap: 8px; }
.ai-clarify-custom-form input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
}

/* NEW ("C WAI 2.0" product-audit round): cross-pillar link banner - points
   to where a pillar's real tools actually live when they're not physically
   on this page (currently just HR & Career -> My Personal OS's Resume
   Builder). Light navy/orange accent, distinct from a plain hint line so
   it reads as an actionable pointer, not just informational copy. */
.cross-link-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--navy-light, #14315C);
    color: #fff;
    border-radius: var(--radius-lg, 14px);
    padding: 14px 18px;
    margin: 0 0 20px;
}
.cross-link-icon { font-size: 20px; flex-shrink: 0; }
.cross-link-text { flex: 1; min-width: 220px; font-size: 13px; line-height: 1.5; }
.cross-link-btn.btn-ghost {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.4);
    color: #fff;
    white-space: nowrap;
}
.cross-link-btn.btn-ghost:hover { background: rgba(255,255,255,.22); }

.placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}
/* REDESIGNED ("hepsini bitir" round, "right side" content polish): these are
   real clickable AI prompt-starters (topics like "CV Builder"), not empty
   placeholders - but the dashed border made them read as "coming soon",
   which was exactly the complaint about the 6 pillars just removed for
   actually being empty. Solid card + shadow + hover-lift + reveal arrow
   makes the "click to start" affordance clear instead of implying "not
   built yet". */
.placeholder-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 13px 16px;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    /* FIXED (2nd round, direct user screenshot report - the narrow-card case
       still broke: the earlier fix kept the tag from shrinking, but that
       meant on a genuinely narrow card the label had almost no room left and
       wrapped one word per line. flex-wrap lets the tag drop to its OWN line
       below the dot+label row instead of fighting them for horizontal space
       - the label then always gets the card's (near-)full width to wrap
       into, so it wraps normally (2-4 words/line) instead of one word/line.
       No effect on normal/wide cards - wrap only kicks in when content
       genuinely doesn't fit on one line. */
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: transform .14s var(--ease), box-shadow .14s var(--ease), border-color .14s var(--ease);
}
.placeholder-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.placeholder-card::after {
    content: '\2192';
    margin-left: auto;
    opacity: 0;
    transform: translateX(-4px);
    color: var(--text-muted);
    transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.placeholder-card:hover::after { opacity: 1; transform: translateX(0); }
.placeholder-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
}
/* FIXED (direct user screenshot report: long chip labels like "Fal &
   Kultur: Tarot / I Ching / Omikuji / Biorhythm / Chinese Zodiac" squeezed
   the "opens the real tool" tag down into a narrow single-word-per-line
   stack). The label now has its own flexible, wrappable box (min-width:0
   is what actually lets it wrap instead of overflowing/forcing its
   sibling to shrink); the tag is pinned to its natural single-line size so
   it never gets fought over for space. */
.placeholder-label { flex: 1 1 auto; min-width: 0; }
.placeholder-card .tag { flex-shrink: 0; white-space: nowrap; margin-left: 6px; }
.soon {
    margin-left: auto;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #EEF1F6;
    padding: 2px 6px;
    border-radius: 4px;
}

/* ---------- My Profile ---------- */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* CHANGED ("berbat sayfalar" round, direct user feedback comparing
       against the uploaded My Profile.html/My Credit.html mockups): was
       max-width:640px, which reads as a narrow form column floating in a
       sea of empty space on any modern wide screen - the mockups use a
       ~900-1100px container. Widened here (shared by every .profile-form
       across the app - My Profile, Personal OS Identity/AI Brain/
       Reminders/Security/Emergency tabs, module panels) so the whole
       family of cards gets more breathing room, not just this one page. */
    max-width: 900px;
    /* CHANGED (Hybrid Design Language rollout - see the :root docblock
       above --surface-blur): was a flat var(--card) fill - now a translucent,
       blurred "frosted glass" surface so the app's own textured/gradient
       theme backgrounds (Wood's grain, Aurora's color washes, etc.) show
       softly through every card instead of sitting under a flat white
       rectangle. Falls back gracefully to the old flat var(--card) look on
       any browser without backdrop-filter support (progressive enhancement -
       the @supports block right after this rule adds the blur only where
       it's actually usable). */
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px 24px;
    box-shadow: var(--shadow-frosted);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .profile-form {
        background: color-mix(in srgb, var(--card) 72%, transparent);
        border-color: color-mix(in srgb, var(--border) 55%, transparent);
        backdrop-filter: blur(var(--surface-blur));
        -webkit-backdrop-filter: blur(var(--surface-blur));
    }
}
.profile-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.profile-form input,
.profile-form select,
.profile-form textarea {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text);
    resize: vertical;
}
/* FIX (user-reported screenshot: PRINT - Report branding card) - the
   checkbox/radio labels inside .print-brand-card (identity radios, the
   Header/Footer master toggles, and the Logo/Name/Address/etc field
   checkboxes) were rendering with the label text pinned far left and the
   actual checkbox/radio control shoved to the far right edge of this wide
   settings card, an almost unreadable two-column look. Root cause: the
   ".profile-form label" rule above (added for ordinary "caption above a
   text input" fields elsewhere - the right layout for THOSE) has the same
   0-1-1 selector specificity as ".ai-docbrand-radio"/
   ".ai-docbrand-section-label" and comes later in this file, so it won
   the cascade and forced every checkbox/radio label here into a
   full-width flex column instead of the tight inline row they need.
   Scoped strictly to .print-brand-card so no other .profile-form field
   (My Profile, Company Registry, etc.) is touched - purely additive.
   display:flex (not inline-flex) keeps each option on its own line for
   .ai-docbrand-radio/.ai-docbrand-section-label; width:fit-content stops
   it from stretching across the whole card. */
.print-brand-card label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: fit-content;
}
.profile-grid {
    display: grid;
    /* CHANGED (same round): was minmax(130px,1fr) - cramped a select like
       "Country" or "Gender" into a column barely wider than its label.
       Matches the mockup's own grid-2/grid-3 proportions better. */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}
.profile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.profile-actions .btn { width: auto; }

/* NEW (v133, direct user feedback: "Quantum'da yapilacaklari her baslikta
   veriyi giren burada test etsin"): inline "Test in Quantum Sync" block,
   shared by every profile/collection module panel (see
   posQuantumTestBlockHtml()/wirePosQuantumTestBlock() in app.js). */
.pos-qs-test-block {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.pos-qs-test-result {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pos-qs-test-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    background: var(--card);
}
.pos-qs-test-card-live {
    border-color: rgba(255,122,0,0.35);
    background: var(--navy-tint);
}
.pos-qs-test-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.pos-qs-test-card-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--soft-gray);
    color: var(--text-muted);
}
.pos-qs-test-card-live .pos-qs-test-card-badge {
    background: var(--accent);
    color: #fff;
}
.pos-qs-test-card p {
    margin: 0;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
/* NEW ("resume builder polish" round): light section dividers so a long
   form (Resume Builder, or any future multi-part profile-form) reads as
   clearly grouped steps instead of one undifferentiated wall of fields -
   same "makyaj" fix pattern already used for .registry-section. */
.profile-section-title {
    margin: 18px 0 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.profile-form > .profile-section-title:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 4px;
}

/* Phase 3 (UI/UX spec restoration): shared "bottom-nav" bar pattern - several
   supplied specs (my profile.html, and likely others as this pass continues)
   end each screen with a persistent quick-links + "Powered by" footer bar.
   One shared class set so it doesn't get redefined per-screen. */
.view-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 14px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.view-bottom-nav-links { display: flex; gap: 4px; flex-wrap: wrap; }
.view-bottom-link { width: auto; display: inline-block; padding: 8px 12px; font-size: 12.5px; font-weight: 600; }
.view-bottom-nav-powered { font-size: 11.5px; color: var(--text-muted); }
.view-bottom-nav-powered strong { color: var(--navy); }
.resume-builder-form { max-width: 720px; }
.resume-contact-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

/* NEW (Personal OS redesign round, per uploaded "My Personal OS.html" mockup
   + direct user request "böyle yapabiliriz"): widen Personal OS cards
   specifically so they use the available screen space on desktop instead of
   being capped at the same 640px as My Profile/Company Registry (which stay
   narrow deliberately - long single-column forms read better there). Scoped
   entirely under #pos-content so nothing else changes. */
#pos-content .profile-form {
    max-width: none;
}
#pos-content .profile-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* NEW (Personal OS redesign round, direct user request "+ ile box acilir
   kapanir"): +/- accordion behavior for the 4 top-level Personal OS section
   cards. Reuses the exact native <details>/<summary> + rotating-chevron
   pattern already proven and shipped for .calculator-card (task #174) - the
   browser hides everything except <summary> automatically when a <details>
   is closed, so no new JS is needed here either. .profile-form's own box
   styling (border/background/shadow/padding) is untouched; this only adds
   the clickable-header affordance on top. */
/* CHANGED (direct user report: the open/close affordance on My Personal
   OS section headers - a bare 12px triangle character - read as decorative
   punctuation rather than a clickable control, so it wasn't obvious the
   card could collapse at all. Replaced with a real button-looking circular
   +/x badge (26px, orange border + tint fill) that rotates 45deg on open so
   the '+' visually becomes an 'x' - same zero-JS <details> mechanism, just
   a much more visible target). */
.pos-card > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
}
.pos-card > summary::-webkit-details-marker { display: none; }
.pos-card > summary::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 122, 0, 0.12);
    border: 1.5px solid var(--accent);
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin-right: 12px;
    transition: transform 0.18s ease, background 0.18s ease;
}
.pos-card > summary:hover::before { background: rgba(255, 122, 0, 0.22); }
.pos-card[open] > summary::before { transform: rotate(45deg); background: rgba(255, 122, 0, 0.18); }
.pos-card > summary h3 { display: inline-flex; }
/* NEW ("aesthetic pass" round - Registry view): light divider between the
   "Company details" / "Contact" sub-sections so the form doesn't read as
   one undifferentiated wall of fields - the exact "makyaj" ask. */
.registry-section + .registry-section {
    border-top: 1px solid var(--border);
    padding-top: 4px;
}
.registry-form { max-width: 820px; }
/* CHANGED ("deep adaptation" round, uploaded Company Registry.html reference:
   .quick-setup-box - a dashed-border callout box instead of a bare ghost
   button + inline hint text) - same #registry-quick-setup-btn/msg IDs, just
   a real visual container around them now. */
.registry-method-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 20px;
    background: var(--light-stone);
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.registry-method-picker .hint { flex-basis: 100%; margin: 0; }


/* NEW (Personal OS phase 1): My Personal OS view - Identity + AI Memory +
   Reminders cards stacked in a single column, same profile-form/admin-card
   visual language as the rest of the "2035" redesign (light-card border-
   radius + shadow-sm, see the how-to-credit/profile-form/admin-card pass
   above). */
/* CHANGED (direct user report: "ekranda sagda cok bosluk var" - screenshot
   showed a large dead gray strip on the right because .pos-wrap capped at
   720px while .content is centered at up to 1220px). Switched from a fixed
   single column to a responsive auto-fit grid (same minmax(...,1fr) pattern
   already used by .profile-grid elsewhere) so the two mid-size cards (AI
   Memory + Reminders) sit side-by-side and use the freed width on desktop,
   while Identity and More Modules - the two content-heavy cards - explicitly
   span the full row via grid-column so they don't get squeezed into a
   column. Falls back to a single column automatically on narrow/mobile
   screens (no media query needed, same as .profile-grid). */
/* CHANGED (redesign round, uploaded "My Personal OS Mode A.html" - direct
   user pick, "bu sayfa cok onemli"): was a multi-column auto-fit grid whose
   direct children were the individual cards (Identity/AI Memory/Reminders/
   modules). Now that those cards live one level deeper inside per-tab
   .pos-tab-page wrappers (see wirePosTabs() in app.js, only one tab-page
   visible at a time), .pos-wrap itself just needs to be a simple full-width
   block - the multi-column layout moved down into .pos-overview-grid for
   the one tab (Overview) that actually shows several cards side by side. */
.pos-wrap {
    display: block;
    max-width: 1100px;
}
.pos-wrap .profile-form { max-width: none; }

/* NEW (redesign round): the Mode A top tab bar - same visual language as
   the Ask WAI Anything mode-switcher (.mode-switcher-wrapper/.mode-btn)
   reused here at a slightly smaller scale, so a member recognizes it as the
   same "page has its own tabs" pattern rather than a brand-new control. */
.pos-tab-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--card);
    padding: 5px;
    border-radius: 14px;
    border: 1px solid var(--border);
    margin: 0 0 20px;
    gap: 3px;
    box-shadow: var(--shadow-sm);
}
.pos-tab-btn {
    background: transparent;
    border: none;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
    white-space: nowrap;
}
.pos-tab-btn.active {
    background: var(--grad-accent);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.pos-tab-btn:hover:not(.active) { color: var(--navy, #0B1E3D); background: var(--navy-tint); }

.pos-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.pos-kpi-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}
.pos-kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.pos-kpi-value { font-size: 22px; font-weight: 800; color: var(--navy, #0B1E3D); margin-top: 4px; }
.pos-kpi-tag {
    display: inline-block;
    margin-top: 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(255, 122, 41, 0.1);
    border-radius: 999px;
    padding: 2px 9px;
}
.pos-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}
.pos-overview-wide { grid-column: span 2; }
@media (max-width: 760px) { .pos-overview-wide { grid-column: span 1; } }
.pos-notice {
    background: var(--navy-tint);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--navy, #0B1E3D);
    margin-top: 12px;
}
.pos-quickaccess-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.pos-quickaccess-card {
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.pos-quickaccess-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--accent); }
.pos-reminder-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pos-reminder-form input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text);
}
.pos-reminder-form input[type="date"] {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text);
}
.pos-reminder-form .btn { width: auto; white-space: nowrap; }
.pos-reminder-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pos-reminder-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-subtle, rgba(0,0,0,0.02));
}
.pos-reminder-check {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 13.5px;
    color: var(--text);
    cursor: pointer;
}
.pos-reminder-done .pos-reminder-check span {
    text-decoration: line-through;
    color: var(--text-muted);
}
.pos-reminder-date {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.pos-reminder-delete {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}
.pos-reminder-delete:hover { color: var(--danger, #d64545); }

/* NEW (direct user request, "WAI_Digital_Accounts_Assets_Designer.html"
   mockup - "kayıtlar listelenebilir ve slide ile yukarı aşağı yapılabilir,
   seçilebilir, görüntülenebilir, toplama yapılacaksa altına yapılabilir"):
   collection-module list items (renderPosCollectionPanel's reload(), NOT
   Reminders/Vault which keep their own separate rendering) get 4 new,
   additive pieces on top of the existing .pos-reminder-item row - a
   view/expand toggle, a reorder up/down pair, a distinct "include in
   total" select checkbox (separate from the existing is_done checkbox,
   which stays exactly as it was), and a detail panel + sum footer. Nothing
   here is reused/repurposed from .pos-reminder-* since those classes are
   shared with Reminders and Password Vault's own list rendering. */
.pos-item-card { flex-direction: column; align-items: stretch; gap: 4px; }
.pos-item-card-row { display: flex; align-items: center; gap: 10px; }
.pos-item-toggle {
    border: none; background: transparent; color: var(--text-muted);
    font-size: 12px; cursor: pointer; padding: 2px 4px; flex-shrink: 0;
    transition: transform 0.15s;
}
.pos-item-toggle.open { transform: rotate(90deg); }
.pos-item-select { flex-shrink: 0; cursor: pointer; }
.pos-item-select input { cursor: pointer; }
.pos-item-reorder { display: flex; flex-direction: column; gap: 0; flex-shrink: 0; }
.pos-item-reorder button {
    border: none; background: transparent; color: var(--text-muted);
    font-size: 10px; line-height: 1; cursor: pointer; padding: 1px 4px;
}
.pos-item-reorder button:hover { color: var(--navy, #0B1E3D); }
.pos-item-reorder button:disabled { opacity: 0.25; cursor: default; }
.pos-item-detail {
    display: none; margin: 6px 0 2px 30px; padding: 8px 12px;
    background: rgba(0,0,0,0.025); border-radius: 8px;
    font-size: 12.5px; color: var(--text-muted); line-height: 1.7;
}
.pos-item-detail.open { display: block; }
.pos-item-detail strong { color: var(--text); }
.pos-collection-empty {
    text-align: center; border: 1px dashed var(--border);
    border-radius: 16px; padding: 34px 16px; margin-top: 6px;
    background: var(--bg-subtle, rgba(0,0,0,0.015));
}
.pos-collection-empty-icon { font-size: 26px; margin-bottom: 8px; }
.pos-collection-empty h4 { margin: 0 0 4px; font-size: 14px; color: var(--text); }
.pos-collection-empty p { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.pos-sum-footer {
    margin-top: 8px; padding: 9px 12px; border-radius: 10px;
    background: rgba(255,106,0,0.08); border: 1px solid rgba(255,106,0,0.2);
    font-size: 13px; font-weight: 700; color: var(--navy, #0B1E3D);
    display: flex; justify-content: space-between; align-items: center;
}
.pos-vault-nudge {
    background: rgba(34,167,101,0.08); border-left: 3px solid #22a765;
    padding: 8px 12px; border-radius: 8px; margin: 10px 0 0;
}
/* NEW (cross-module sync round): a small tag on Transactions rows that
   wai_pos_sync_shopping_to_transactions() (index.php) generated
   automatically from a Shopping entry - kept visually distinct from rows
   the member typed directly into Transactions themselves, per the
   explicit transparency request ("kişi... nasıl kullanılacağını görmeli"). */
.pos-item-synced-badge {
    flex-shrink: 0; font-size: 10.5px; font-weight: 600; color: #6E7791;
    background: rgba(110,119,145,0.12); border-radius: 999px;
    padding: 2px 8px; white-space: nowrap;
}
/* NEW (cross-module sync round, direct user request: "tabloda gelir gider
   olduğu için aylıklarda otomatik balans verilmeli" + "window alt
   ekranında görselleştirilmeli"): the monthly income/expense/balance
   summary rendered by renderFinanceBalancePanel() in app.js, only present
   on the finance_transactions module, at the BOTTOM of the window per the
   user's explicit placement request. */
.pos-finance-balance-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.pos-finance-balance-panel.hidden { display: none; }
.pos-finance-balance-head { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.pos-finance-warning {
    background: rgba(229,72,77,0.08); border-left: 3px solid #E5484D;
    color: #B3261E; padding: 8px 12px; border-radius: 8px;
    font-size: 12.5px; font-weight: 600; margin-bottom: 10px;
}
.pos-finance-warning-mild {
    background: rgba(255,159,10,0.1); border-left-color: #FF9F0A; color: #92600A;
}
.pos-finance-tip {
    background: rgba(11,30,61,0.05); border-left: 3px solid var(--navy, #0B1E3D);
    padding: 8px 12px; border-radius: 8px; font-size: 12.5px; color: var(--text-muted); margin-top: 10px;
}
.pos-finance-month-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.pos-finance-month-card {
    border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
    background: var(--bg-subtle, rgba(0,0,0,0.015));
}
.pos-finance-month-card.is-negative { border-color: rgba(229,72,77,0.35); }
.pos-finance-month-card.is-positive { border-color: rgba(34,167,101,0.3); }
.pos-finance-month-label { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.pos-finance-month-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); padding: 1px 0; }
.pos-finance-income { color: #22a765; font-weight: 600; }
.pos-finance-expense { color: #E5484D; font-weight: 600; }
.pos-finance-month-net {
    display: flex; justify-content: space-between; font-size: 13px; font-weight: 700;
    color: var(--text); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
}
/* NEW (#836/#974, "Personal OS Finance Matrix: currency fields + income/
   expense linking"): renderFinanceBalancePanel() now groups a month's rows
   by currency instead of assuming everything is USD - a month card can
   contain more than one of these blocks when a member has entered rows in
   more than one currency. Single-currency members (the common case) never
   see the tag or the extra spacing, since only one block renders. */
.pos-finance-month-currency-block + .pos-finance-month-currency-block {
    margin-top: 8px; padding-top: 8px; border-top: 1px dotted var(--border);
}
.pos-finance-month-currency-tag {
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted); background: rgba(0,0,0,0.04); border-radius: 5px;
    display: inline-block; padding: 1px 6px; margin-bottom: 4px;
}
.pos-finance-multicur-note {
    font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: none;
    letter-spacing: normal;
}

/* CHANGED (v134, direct user feedback: "su modullerin hepsini acsana
   expose etsene... sayfa dizayni yapsana ab, karmasik amk"): the old
   pillar-chip nav (small pill buttons crammed in a flex-wrap row, buried
   behind a collapsed <details>) is replaced with a real card grid, reusing
   the same visual language as the Workspaces hub's .workspace-card (icon
   badge, bordered card, hover lift + top accent bar - see .workspace-card
   above) but denser since there are 23 items across 5 groups instead of a
   handful of workspaces. Each module is now its own directly-visible,
   directly-clickable card - no more "click to expand a list, then click
   again to see a module" indirection. */
.pos-modules-hub { max-width: none; }
.pos-pillar-nav {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 8px;
}
.pos-pillar-title {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pos-pillar-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.pos-module-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: var(--card-radius, 14px);
    padding: 14px 14px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease), border-color .18s var(--ease, ease);
}
.pos-module-chip::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--navy-tint-2);
    opacity: 0;
    transition: opacity .18s var(--ease, ease);
}
.pos-module-chip .pos-module-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 17px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.05));
}
.pos-module-chip .pos-module-chip-label { line-height: 1.3; }
.pos-module-chip-qs {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent, #ff7a1a);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.pos-module-chip:hover {
    border-color: var(--border-strong, #D3D9E4);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    background: var(--card);
}
.pos-module-chip:hover::before { opacity: 1; }

/* NEW (task #532, direct user feedback: "Veri girisi her baslik icin
   satir/ROW u kaplasin" + "bu basliklarin hepsini acalim ve yatayda veri
   girisi olsun"): container for renderAllPosModules() in app.js - every
   Personal OS module now renders as its own always-open .pos-card row,
   grouped under a plain pillar heading, instead of a click-to-open chip
   grid. Each row is full-width so its .profile-grid fields lay out as a
   horizontal set of tiles - the "row" layout requested - and every module
   type (profile/collection/vault) now shares this exact same look. */
.pos-all-modules {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.pos-pillar-section > .pos-pillar-title {
    margin: 0 0 12px;
}
.pos-pillar-modules {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pos-module-body { margin-top: 10px; }

/* NEW (this round, direct user feedback: "LIFE alt menüsünde çok fazla giriş
   var ve dağınık", reference: "My Personal OS Mode A.html"'s compact
   icon+label .modulegrid): a scannable overview grid sits above the (now
   collapsed-by-default, see renderAllPosModules() in app.js) 23 module rows.
   Deliberately smaller/denser than .pos-module-chip below it - this is a
   directory, not a data-entry surface, so it should read at a glance rather
   than compete with real form fields for attention. Clicking a tile calls
   the existing openPosModule() which expands + scrolls to that module's row
   further down the page. */
.pos-life-quickgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 8px;
    margin: 4px 0 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.pos-life-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 12px;
    padding: 12px 8px 10px;
    font-family: inherit;
    cursor: pointer;
    position: relative;
    transition: transform .15s var(--ease, ease), box-shadow .15s var(--ease, ease), border-color .15s var(--ease, ease);
}
.pos-life-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--accent-light, var(--accent-light));
}
.pos-life-tile-icon { font-size: 19px; line-height: 1; }
.pos-life-tile-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    line-height: 1.25;
}
.pos-life-tile-qs {
    position: absolute;
    top: 6px;
    right: 7px;
    font-size: 10px;
}
.pos-hub-panel-open .pos-pillar-nav { display: none; }
.pos-module-panel-wrap { margin-top: 10px; }
.pos-module-back {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    cursor: pointer;
    padding: 0 0 10px;
}
.pos-module-back:hover { color: var(--text); }
.pos-generic-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}
.pos-generic-form input[type="text"],
.pos-generic-form input[type="date"],
.pos-generic-form input[type="password"],
.pos-generic-form textarea {
    flex: 1;
    min-width: 140px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text);
}
.pos-generic-form .btn { width: auto; white-space: nowrap; }
.pos-item-extra { color: var(--text-muted); font-size: 12px; }

/* Zero-knowledge vault (Password Vault, Emergency & Legacy) */
.pos-vault-unlock {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.pos-vault-unlock input[type="password"] {
    flex: 1;
    min-width: 200px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
}
.pos-vault-unlock .btn { width: auto; }
.pos-vault-item-label { flex: 1; font-size: 13.5px; color: var(--text); }
.pos-vault-revealed {
    font-family: monospace;
    font-size: 12.5px;
    color: var(--accent, #ff7a1a);
    background: var(--bg-subtle, rgba(0,0,0,0.03));
    padding: 3px 8px;
    border-radius: 6px;
}
.profile-cv-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.profile-cv-upload-row .btn { width: auto; }

/* NEW ("C WAI 2.0" upload-first round): same pattern as .profile-cv-upload-row
   above, reused for the Resume Builder card's own upload button. Kept as a
   separate class (not a rename) so nothing about the existing Identity CV
   upload risks breaking. */
.resume-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    /* CHANGED ("big redesign" round, uploaded My Personal OS.html reference:
       .upload-box - dashed drop-zone treatment instead of a bare button, so
       CV upload reads as a distinct "drop your file here" affordance rather
       than just another form action. */
    border: 2px dashed var(--border);
    border-radius: var(--card-radius);
    background: var(--light-stone, var(--navy-tint));
    padding: 16px 18px;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.resume-upload-row:hover { border-color: var(--accent-light); }
.resume-upload-row .btn { width: auto; }

.think-for-me {
    margin-top: 24px;
    max-width: 640px;
}
.think-for-me .hint { margin: 8px 0 0; }
.think-for-me .ai-thinking { margin-left: 10px; }
.think-web-search-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
}
.think-web-search-toggle input[type="checkbox"] { cursor: pointer; }
.think-web-search-toggle input:disabled + * ,
.think-web-search-toggle:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* ---------- Admin & Analytics ---------- */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}
/* NEW ("berbat sayfalar" round): pairs My Credit's referral panel + promo
   code card side by side on wide screens, matching the uploaded My
   Credit.html mockup's "Invite & Earn" / "Promo Codes" 2-column layout -
   both cards keep their exact ids/wiring, this only wraps them. */
.credit-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}
.credit-two-col > .admin-card { margin-bottom: 0 !important; }
.admin-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}
.admin-card h3 { margin: 0 0 8px; font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.admin-card code { background: #EEF1F6; padding: 2px 6px; border-radius: 4px; font-size: 11.5px; word-break: break-all; }
.admin-big { margin: 0; font-size: 26px; font-weight: 700; color: var(--navy); }
.admin-big.negative { color: #c0392b; }

.admin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    margin-bottom: 8px;
    font-size: 13px;
}
.admin-row span { color: var(--text); }
.admin-row .tag { margin-left: 4px; }

/* NEW ("notifications" round): announcement broadcast form on Admin > Dashboard. */
.admin-broadcast-card { margin-bottom: 16px; }
.admin-broadcast-card input,
.admin-broadcast-card textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 13.5px;
    font-family: inherit;
    margin-bottom: 8px;
    resize: vertical;
}
.admin-broadcast-send-btn { width: auto; padding: 8px 16px; }
.admin-broadcast-card .hint { margin: 6px 0 0; }
/* NEW ("Live Data" round): a small labeled-input grid for admin settings
   forms (Live Data quota/price/cap) - same visual language as admin-grid's
   stat cards, but for editable number inputs instead of read-only numbers. */
.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.admin-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 600;
}
.admin-form-grid input {
    font: inherit;
    font-weight: 400;
    color: var(--text);
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}
/* NEW (task #259, Credit/Program tracker): textarea/select share the same
   input styling above - added separately so existing .admin-form-grid input
   usages elsewhere are untouched. */
.admin-form-grid textarea,
.admin-form-grid select {
    font: inherit;
    font-weight: 400;
    color: var(--text);
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    resize: vertical;
}
#credit-program-form-card .btn { width: auto; padding: 8px 18px; }
/* NEW (this round): "W-ENG Impact" card - a highlighted wrapper around its own
   mini admin-grid, so it visually stands out from the plain stat cards below it. */
.weng-impact-card {
    background: linear-gradient(135deg, rgba(11,30,61,0.04), rgba(var(--accent-rgb),0.05));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 22px;
}

.admin-subhead {
    font-size: 13px;
    color: var(--text-muted);
    margin: 26px 0 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
/* NEW (this round): Chart.js chart containers - the one genuinely valuable
   idea taken from the "WADMIN by CoPilot.docx" document (real charts instead
   of DIY CSS bars). Chart.js uses responsive:true but can grow without limit
   if the parent container has no HEIGHT - hence the fixed height. */
.admin-chart-wrap {
    position: relative;
    height: 220px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 10px;
}
.admin-chart-wrap-small { height: 200px; max-width: 320px; }
.admin-chart-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.admin-bars { display: flex; flex-direction: column; gap: 8px; }
.admin-bar-row {
    display: grid;
    grid-template-columns: 140px 1fr 90px;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
}
.admin-bar-label { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-bar-track {
    background: #EEF1F6;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}
.admin-bar-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
}
.admin-bar-value { color: var(--text-muted); text-align: right; }
.admin-json {
    background: var(--navy);
    color: #C7CEDD;
    padding: 16px 18px;
    border-radius: var(--radius);
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    max-width: 640px;
}

/* ---------- Admin tab bar (Dashboard/Users/Cloudflare/Accounting/Reports/Credit/Models/Health) ---------- */
.admin-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 22px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}
.admin-tab {
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.admin-tab:hover { background: #F2F4F8; }
.admin-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.admin-subview.hidden { display: none; }

.admin-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.admin-alert {
    font-size: 12.5px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
}
.admin-alert-danger { background: #FDECEC; border-color: #F3B4B4; color: #B42318; }
.admin-alert-warn { background: #FFF6E5; border-color: #F5D897; color: #93650A; }
.admin-alert-info { background: #EEF1F6; border-color: var(--border); color: var(--text-muted); }

.admin-engines-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.admin-engines-table th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 600;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
}
.admin-engines-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
}
.admin-engines-table input[type="text"],
.admin-engines-table input[type="number"] {
    width: 100%;
    max-width: 130px;
    padding: 5px 7px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
}
.admin-engines-table input[type="checkbox"] { width: 16px; height: 16px; }

/* ---------- GitHub + Free Modules: quick add ---------- */
.quick-add-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.quick-add-btn { font-size: 12.5px; padding: 8px 12px; }

/* ---------- Members / Top-up tables (Admin) ---------- */
.members-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.member-row {
    display: grid;
    grid-template-columns: 16px 1.4fr 1.4fr 100px auto auto;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 12.5px;
}
.member-name { font-weight: 600; color: var(--text); }
.member-name .tag { font-weight: 400; margin-left: 6px; font-size: 10.5px; }
.member-email { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-credit { color: var(--navy); font-weight: 600; }
/* NEW (this round): "detailed" member row - signup date, last seen, free-trial
   used/limit, paid balance, each as their own small column, plus a status
   badge next to the name. Own grid template (more columns than the plain
   .member-row) so this doesn't fight with the original 6-column layout. */
/* NEW (this round): corporate domain whitelist admin card (Admin > Users). */
.corp-domain-add-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.corp-domain-add-row input {
    flex: 1;
    min-width: 160px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}

.member-row-detailed {
    /* NEW ("personalized/white-label" round): one more auto column for the
       new "White-label: ON/OFF" toggle button (4th action button per row). */
    grid-template-columns: 16px 1.2fr 1.2fr auto auto auto auto auto auto auto auto;
}
.member-meta { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
.tag-status-active { background: #E6F4EA; color: #1E7B34; }
.tag-status-blocked { background: #FDECEC; color: #B42318; }
.tag-status-pending_verification { background: #FFF4E5; color: #B26A00; }
.member-row button {
    padding: 5px 10px;
    font-size: 11.5px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.member-row button:hover { background: #F2F4F8; }
.member-row button.danger:hover { background: #FDECEC; border-color: #F3B4B4; color: #B42318; }

/* ---------- Real calculators (LCOE / ROI-NPV) ---------- */
/* CHANGED (Hybrid WAI Design Language "vur baltayi" round, direct user
   request for a radical pass, not incremental): this was the single biggest
   remaining inconsistency between the homepage (already on the "Borderless/
   Floating Surface" glass treatment - see .hero-shortcut above) and every
   inner hub page (Personal & Life, Business, Engineering, HR & Career) -
   .calculator-card was still the OLD flat opaque var(--card)/var(--border)
   box, so the app visually split into "two different products" the moment
   you left the home screen. Now every calculator/tool card everywhere uses
   the exact same glass surface as the home tiles - same values, one
   consistent language across all 4 target screens at once, since they all
   share this one class. */
.calculator-card {
    background: rgba(255,255,255,.62);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(20,25,35,.06);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 24px;
    box-shadow: 0 8px 30px rgba(20,25,35,.035);
    transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.calculator-card:hover { border-color: rgba(20,25,35,.10); }
.calculator-card[open] { box-shadow: var(--shadow-md); }
.calculator-card h3 {
    margin: 0 0 6px;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* NEW (this round): calculator cards used to always show their full input
   form/result area, even before anyone clicked anything - cluttering pillar
   pages that also have chat/AI content (tarot, advice, etc.) right below.
   Now every .calculator-card is a native <details> - just the title/tag row
   shows by default (closed), the description/form/result only render once
   opened. summary::marker is restyled to the WAI orange so it reads as an
   obvious "click to open" affordance rather than a generic bullet. */
.calculator-card summary {
    cursor: pointer;
    list-style: none;
}
.calculator-card summary::-webkit-details-marker { display: none; }
.calculator-card summary::before {
    content: '▸';
    display: inline-block;
    color: var(--accent);
    font-size: 12px;
    margin-right: 8px;
    transition: transform 0.15s ease;
}
.calculator-card[open] summary::before { transform: rotate(90deg); }
.calculator-card summary h3 { display: inline-flex; }
.calculator-card > p.hint { margin-top: 12px !important; }
.calculator-card .calc-form,
.calculator-card .tool-form { margin-top: 12px; }

/* NEW ("Fal & Kultur ambiance" round): a distinct, deliberately different
   mood for the fortune-telling group (Tarot/I Ching/Omikuji/Biorhythm/
   Zodiac) - deep indigo-to-violet night-sky gradient with a soft scattered-
   star texture (pure CSS radial-gradients, no image asset to host/break),
   gold accents instead of WAI's navy/orange, so this corner reads as its
   own little "fal köşesi" rather than another gray calculator. Individual
   .fal-kultur-card panels stay light/readable (form inputs unchanged) -
   only the surrounding section chrome + card accents shift theme, so
   nothing about input contrast or existing .tool-form styling breaks. */
.fal-kultur-section {
    position: relative;
    margin: 22px 0 28px;
    padding: 26px 22px 20px;
    border-radius: 20px;
    background:
        radial-gradient(1.5px 1.5px at 8% 20%, rgba(255,255,255,.85), transparent),
        radial-gradient(1.5px 1.5px at 22% 65%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 38% 15%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 55% 78%, rgba(255,255,255,.75), transparent),
        radial-gradient(1px 1px at 68% 30%, rgba(255,255,255,.55), transparent),
        radial-gradient(1.5px 1.5px at 82% 55%, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 92% 18%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.5px 1.5px at 12% 88%, rgba(255,255,255,.65), transparent),
        linear-gradient(155deg, #241a42 0%, #3b215f 45%, #5a2a63 100%);
    box-shadow: 0 8px 28px rgba(58,20,74,.28);
    overflow: hidden;
}
.fal-kultur-header {
    position: relative;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,215,140,.22);
}
.fal-kultur-header h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #F6D68A;
    text-shadow: 0 0 18px rgba(246,214,138,.35);
}
.fal-kultur-header p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(233,224,255,.78);
    max-width: 640px;
}
.fal-kultur-card.calculator-card {
    position: relative;
    background: rgba(255,251,242,.97);
    border: 1px solid rgba(255,215,140,.55);
    box-shadow: 0 4px 16px rgba(40,10,55,.22);
}
.fal-kultur-card.calculator-card[open] { box-shadow: 0 6px 22px rgba(40,10,55,.3); }
.fal-kultur-card.calculator-card summary::before { color: #B8862F; }
.fal-kultur-card.calculator-card h3 { color: #3B2154; }
.fal-kultur-card.calculator-card .tag {
    background: linear-gradient(135deg, #F6D68A, #E3B24B);
    color: #3B2154;
    border: none;
}
.fal-kultur-card.calculator-card:last-child { margin-bottom: 0; }

/* CHANGED (Hybrid WAI Design Language "vur baltayi" round, direct user
   request "radikal degisiklikler lazim" - reverses the "per-hub color
   identity" decision that used to live in this block): the design doc's own
   stated principle is "Accent = action only. Orange never decorates - only
   active states, send button, hover." Four different permanent decorative
   colors per hub (teal/purple/blue/green on every header, badge and border)
   is exactly the kind of box/text drawing attention to itself for no reason
   that principle argues against - and it fought against the single unified
   glass-card language just applied to .calculator-card above, since each hub
   still looked like a visually different app. Every hub now reads through
   ONE consistent WAI orange accent, used only where accent is actually
   supposed to mean something - hover state and the calculator open/close
   marker (which already defaulted to var(--accent) globally, so no override
   is even needed for it any more). Hub titles, card titles and dots go back
   to the same neutral text/accent colors every other screen uses. Fal &
   Kultur's bespoke gold/navy mystical theme is intentionally exempt (see the
   guard rules below) - that is a deliberate, separate "corner of the app"
   identity by explicit prior request, not incidental hub decoration, so it
   is kept exactly as-is. */
#view-hr_career .prompt-chip:hover,
#view-personal_life .prompt-chip:hover,
#view-engineering .prompt-chip:hover,
#view-business .prompt-chip:hover {
    border-color: var(--accent);
    background: rgba(255,122,41,.09);
    color: var(--text);
}

/* Fal & Kultur cards keep their own bespoke gold/navy mystical styling even
   inside #view-personal_life - a deliberate distinct identity, not
   decoration-by-hub, so it stays even though the generic hub-accent system
   above it is gone. */
#view-personal_life .fal-kultur-card.calculator-card summary::before { color: #B8862F; }
#view-personal_life .fal-kultur-card.calculator-card summary h3,
#view-personal_life .fal-kultur-card.calculator-card h3 { color: #3B2154; }

/* ---------- Options / Capabilities disclosure ("declutter" round) ----------
   Same closed-by-default <details> pattern as .calculator-card above, reused
   for the task/segment/model row (every composer) and the W-ENG Capabilities
   panel (home screen only) - direct user request: a first-time visitor should
   land on a plain greeting + example prompts + a blank textbox, nothing else,
   with anything more advanced one click away instead of shown by default. */
.options-disclosure {
    margin: 0 0 14px;
}
.options-disclosure summary {
    cursor: pointer;
    list-style: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 0;
    user-select: none;
}
.options-disclosure summary .hint {
    font-weight: 400;
    font-size: 11.5px;
}
.options-disclosure summary::-webkit-details-marker { display: none; }
.options-disclosure summary::before {
    content: '▸';
    display: inline-block;
    color: var(--accent);
    font-size: 11px;
    margin-right: 7px;
    transition: transform 0.15s ease;
}
.options-disclosure[open] summary::before { transform: rotate(90deg); }
/* NEW (task #264, Trust Layer - Business/Pro segment only): same collapsed-
   disclosure visual language as .options-disclosure above, reused here for
   consistency rather than inventing a second style. Hidden by default via
   the "hidden" class on the element itself (JS-controlled, segment-gated) -
   these display rules only govern its OPEN/CLOSED look once shown. */
.ai-trust-details {
    margin: 8px 0 4px;
    font-size: 12.5px;
}
.ai-trust-details summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 0;
    user-select: none;
}
.ai-trust-details summary::-webkit-details-marker { display: none; }
.ai-trust-details summary::before {
    content: '▸';
    display: inline-block;
    color: var(--accent);
    font-size: 11px;
    margin-right: 6px;
    transition: transform 0.15s ease;
}
.ai-trust-details[open] summary::before { transform: rotate(90deg); }
.ai-trust-details-body {
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    line-height: 1.6;
}
.options-disclosure .wengine-row,
.options-disclosure .capabilities-panel { margin-top: 10px; }
/* NEW ("clearer calculator inputs" round): .tool-form (the 10 W-ENG X
   ToolAdapter cards - Battery Storage, BESS Revenue Stacking, Carbon Offset,
   DSCR, Break-Even, Cost of Employment, Turnover Cost, Retirement Savings,
   Loan Payoff, Home Solar+Battery) previously had NO dedicated grid/label
   styling at all - only .calc-form (the original 2: LCOE, ROI/NPV) did. That
   meant every .tool-form field rendered as plain inline "label text + input"
   with no vertical spacing or column alignment - exactly the "veri girişleri
   çok içi içe" (fields feel cramped/run-together) problem Saban flagged.
   Folding .tool-form into the same grid rules fixes all 10 cards at once.
   Also widened the min column (160px -> 200px) and gap so denser forms like
   BESS Revenue Stacking (10 fields) breathe more on smaller screens. */
.calc-form,
.tool-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px 16px;
    align-items: start;
}
.calc-form label,
.tool-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.calc-form input,
.tool-form input,
.tool-form select {
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
}
.calc-form button, .tool-form button { grid-column: span 1; height: 38px; align-self: end; }
/* Typical-range guidance line under a field, e.g. "typical: 85-95%" - lets a
   non-expert know a sane ballpark without hiding the ability to enter any
   value they actually have. Deliberately small/muted so it doesn't compete
   with the label itself. */
.field-hint {
    /* FIX (direct user report: "menu cekmecelerindeki yazilar cok silik" -
       the calculator field hints were unreadably faint): text-muted was
       being dimmed a SECOND time via opacity:0.75 on top of an already-muted
       color, and 10px was small even at full contrast. Bumped size and
       dropped the extra opacity - still visually secondary to the label via
       color/italic/weight alone, but now actually legible. */
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
    font-style: italic;
}
html[data-theme="dark"] .field-hint { color: #B8C0D6; }
.calc-result {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.calc-numbers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}
.calc-number-row {
    display: flex;
    justify-content: space-between;
    background: #F7F8FA;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12.5px;
}
.calc-number-row strong { color: var(--navy); }
.calc-formula {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    margin: 0 0 12px;
}
/* NEW (production-readiness pass): used by the 8 newly-exposed W-ENG X tool
   cards (.tool-form results) to show each ToolAdapter's constraint-check
   warnings (e.g. "DoD above 95% is unusually aggressive...") distinctly from
   the plain narrative text below them. */
.calc-warnings {
    margin: 0 0 12px;
    padding: 8px 10px;
    background: #FFF4EC;
    border: 1px solid #FFB27A;
    border-radius: 6px;
}
.calc-warnings .hint {
    margin: 0;
    color: #8A4B12;
    font-size: 12px;
}
.calc-warnings .hint + .hint {
    margin-top: 4px;
}

/* ---------- Social login (Google/Microsoft) - login screen ---------- */
.auth-oauth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.auth-oauth-divider::before,
.auth-oauth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.auth-oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.auth-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
.auth-oauth-btn svg { flex-shrink: 0; }

/* NEW (this round, direct user request): unconfigured OAuth providers stay
   VISIBLE (not hidden) but are rendered disabled with a small "Coming soon"
   badge - communicates the feature exists without letting anyone click a
   button that would just 503. Flips to the normal clickable .auth-oauth-btn
   look automatically the moment real credentials are added to .env (see the
   $p['client']->configured() check in index.php). */
.auth-oauth-btn-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    position: relative;
}
.auth-oauth-soon {
    margin-left: auto;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--border);
    color: var(--text-muted);
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 600;
}

/* ---------- My Profile: avatar upload + subscription plan usage bar ---------- */
.profile-picture-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.profile-avatar-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.profile-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    font-size: 26px;
    color: var(--text-muted);
}
.profile-avatar-actions label.btn { display: inline-block; cursor: pointer; }

.profile-plan-usage {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 18px;
}
.profile-plan-usage-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--navy);
}
.progress-bar-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #EDEFF3;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width 0.3s ease;
}
.progress-bar-fill-warn { background: #E5484D; }

/* ---------- Subscriptions (SMB/Enterprise waitlist) ---------- */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 16px 0;
}
.plan-card {
    position: relative;
    background: var(--light-stone);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
/* CHANGED ("big redesign" round, uploaded My Credit.html/Subscripstions.html
   reference: .pricing-card/.tier-card hover-lift): plain flat cards (10px
   radius, var(--radius), no hover) upgraded to the same lift+shadow language
   used by .workspace-card elsewhere in the app - was the single most
   visually "flat" component on the pricing/credit/subscriptions pages. */
.plan-card:hover {
    border-color: var(--accent-light);
    background: var(--card);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.plan-card-featured {
    background: var(--card);
    border: 2px solid var(--accent);
    box-shadow: var(--shadow-sm);
}
.plan-card-featured:hover { box-shadow: var(--shadow-lg); }

/* NEW (doc-review round): Enterprise plan cards collapsed behind a
   click-to-expand disclosure - see #enterprise-toggle/#enterprise-plan-grid
   in index.php and wireEnterpriseDisclosure() in app.js. */
.enterprise-disclosure { margin: 18px 0; }
.enterprise-disclosure-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-weight: 500;
}
/* FIXED (task #635): was var(--text-secondary, #6b6b68) - --text-secondary
   is never defined in :root, so this silently ignored the theme system
   (dark mode / 8-theme Appearance) and always fell back to the hardcoded
   hex. Now uses the real theme-aware token. */
.enterprise-disclosure-icon { color: var(--text-muted); font-size: 18px; }
.enterprise-plan-grid { margin-top: 14px; }
.campaign-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}
.campaign-card { border-color: var(--accent-light); }
.campaign-badge {
    display: inline-block;
    background: var(--accent-light);
    color: var(--navy);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: var(--radius);
    margin-bottom: 4px;
}
.campaign-plan-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.campaign-plan-buttons .btn { flex: 1 1 auto; min-width: 130px; display: flex; flex-direction: column; gap: 2px; }
.campaign-was-price { font-size: 11px; text-decoration: line-through; opacity: 0.75; font-weight: 400; }
.teams-seats-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0;
}
.teams-seats-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }


.plan-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    background: var(--navy);
    color: #fff;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
}
.plan-card h3 { margin: 0; font-size: 15px; color: var(--navy); }
.plan-price { margin: 0; font-size: 22px; font-weight: 700; color: var(--accent); }
.plan-price span { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.plan-features {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--text-muted);
    flex: 1;
}
.plan-features li { margin-bottom: 4px; }
.plan-current-badge { text-align: center; cursor: default; opacity: 0.8; }
.plan-request-btn { width: 100%; margin-top: auto; }
.sub-plan-icon { font-size: 24px; margin-bottom: 2px; }

/* ==========================================================================
   SUBSCRIPTIONS REDESIGN (task #635)
   ---------------------------------------------------------------
   Restyled to follow the section-by-section structure of the uploaded
   preview.html mockup (hero / trust strip / plan grid / three layers /
   Personal box / W$ credit box / team calculator / enterprise / special
   pricing / guide banner / request form / FAQ), but rebuilt entirely on
   WAI's own navy/orange design tokens (--navy/--orange/--grad-navy/
   --grad-accent/--card-radius/--shadow-*) instead of the mockup's own
   indigo/violet palette - "WAI renkleri ve logoları kullan ama dizayn ve
   sayfalara sadık kal" (direct user instruction). This is layered ON TOP
   of the existing .plan-card/.plan-grid/.campaign-*/.enterprise-* rules
   above, which are unchanged and still used by the real Free/Teams/
   Enterprise/campaign cards - only new "sub-" prefixed classes were added
   below, nothing above this point was renamed or removed, so no other
   view/JS wiring is affected.
   ========================================================================== */

.sub-hero { text-align: center; padding-bottom: 6px; }
.sub-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid rgba(255,122,0,0.22);
    background: var(--navy-tint);
    color: var(--accent);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}
.sub-eyebrow-dark {
    color: #fff;
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.1);
}
.sub-hero h1 {
    margin: 0 auto;
    max-width: 720px;
    font-size: clamp(30px, 4.2vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--navy);
}
.sub-hero-accent {
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sub-hero-sub {
    max-width: 560px;
    margin: 16px auto 0;
    font-size: 15px;
    color: var(--text-muted);
}
.sub-hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.sub-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    overflow: hidden;
    margin: 22px 0;
    box-shadow: var(--shadow-sm);
}
.sub-trust-item { background: var(--card); padding: 18px; text-align: center; }
.sub-trust-item strong { display: block; font-size: 17px; color: var(--navy); margin-bottom: 2px; }
.sub-trust-item span { color: var(--text-muted); font-size: 12.5px; }

.sub-section { margin: 46px 0; }
.sub-section-heading { text-align: center; max-width: 640px; margin: 0 auto 22px; }
.sub-section-heading h2 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; color: var(--navy); margin-bottom: 8px; }
.sub-section-heading p { color: var(--text-muted); font-size: 14px; }

.sub-popular-badge {
    left: 50%;
    right: auto;
    top: -11px;
    transform: translateX(-50%);
    background: var(--grad-accent);
    white-space: nowrap;
}

.sub-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sub-layer {
    position: relative;
    padding: 22px;
    border-radius: var(--card-radius);
    background: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.sub-layer::after {
    content: "";
    position: absolute;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: var(--navy-tint);
    right: -45px; top: -45px;
}
.sub-layer-number { position: relative; color: var(--accent); font-size: 11.5px; font-weight: 800; margin-bottom: 10px; letter-spacing: 0.02em; }
.sub-layer h3 { position: relative; margin: 0 0 6px; font-size: 17px; color: var(--navy); }
.sub-layer p { position: relative; color: var(--text-muted); font-size: 13px; }
.sub-layer-tag {
    position: relative;
    display: inline-block;
    margin-top: 14px;
    padding: 5px 9px;
    background: var(--navy-tint);
    border-radius: 8px;
    color: var(--navy);
    font-size: 10.5px;
    font-weight: 700;
}

.sub-personal-box {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 32px;
    align-items: center;
    padding: 34px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--card) 0%, var(--navy-tint) 100%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.sub-personal-box h2 { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 12px; color: var(--navy); }
.sub-personal-box p { color: var(--text-muted); max-width: 480px; }
.sub-personal-price { text-align: center; background: var(--card); border-radius: var(--card-radius); padding: 26px; border: 1px solid var(--border); }
.sub-personal-amount { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); }
.sub-personal-period { color: var(--text-muted); font-size: 13px; }
.sub-save { margin-top: 10px; color: #10B981; font-size: 12.5px; font-weight: 700; }

.sub-credit-box {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    padding: 34px;
    border-radius: var(--radius-lg);
    background: var(--grad-navy);
    color: #fff;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
}
.sub-credit-box::before {
    content: "";
    position: absolute;
    width: 380px; height: 380px;
    right: -130px; top: -170px;
    border-radius: 50%;
    background: rgba(255,122,0,0.18);
    filter: blur(20px);
}
.sub-credit-content, .sub-credit-features { position: relative; z-index: 1; }
.sub-credit-content h2 { font-size: 27px; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 12px; }
.sub-credit-content p { color: rgba(255,255,255,0.72); }
.sub-credit-features { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.sub-credit-feature { padding: 15px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); }
.sub-credit-feature strong { display: block; margin-bottom: 3px; font-size: 13px; }
.sub-credit-feature span { color: rgba(255,255,255,0.6); font-size: 11.5px; }

.sub-calculator { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-md); }
.sub-calculator-top { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.sub-calculator h2 { font-size: 26px; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--navy); }
.sub-calculator p { color: var(--text-muted); }
.sub-seat-control { padding: 20px; border-radius: var(--card-radius); background: var(--light-stone); border: 1px solid var(--border); }
.sub-seat-label { color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 10px; }
.sub-seat-row { display: flex; align-items: center; gap: 10px; }
.sub-seat-btn {
    width: 38px; height: 38px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}
.sub-seat-btn:hover { border-color: var(--accent); color: var(--accent); }
.sub-seat-row #teams-seats-input {
    width: 76px;
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--navy);
}
.sub-interval-select {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
}
.sub-discount-badge {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 9px;
    border-radius: 8px;
    background: var(--soft-gray);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
}
.sub-discount-badge-on { background: #ECFDF5; color: #059669; }
.sub-calculator-result {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sub-result-item span { display: block; color: var(--text-muted); font-size: 11.5px; margin-bottom: 4px; }
.sub-result-item strong { font-size: 20px; color: var(--navy); }

.sub-enterprise {
    padding: 38px;
    border-radius: var(--radius-lg);
    background: var(--grad-navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.sub-enterprise::after {
    content: "";
    position: absolute;
    width: 360px; height: 360px;
    right: -150px; top: -160px;
    border: 60px solid rgba(255,122,0,0.08);
    border-radius: 50%;
}
.sub-enterprise-content { position: relative; z-index: 2; max-width: 620px; }
.sub-enterprise h2 { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 12px; }
.sub-enterprise p { color: rgba(255,255,255,0.75); }
.sub-enterprise-list { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.sub-enterprise-list div { font-size: 12.5px; }
.sub-enterprise-list div::before { content: "✓"; margin-right: 7px; font-weight: 900; color: var(--accent-light); }
.sub-enterprise-btn { margin-top: 24px; background: #fff; color: var(--navy); }

.sub-special-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.sub-guide-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    background: var(--navy-tint);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    flex-wrap: wrap;
}
.sub-guide-banner strong { display: block; margin-bottom: 3px; color: var(--navy); }
.sub-guide-banner span { color: var(--text-muted); font-size: 13px; }
.sub-guide-link { color: var(--accent); font-weight: 800; white-space: nowrap; }

.sub-request-box {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 40px;
    padding: 34px;
    border-radius: var(--radius-lg);
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.sub-request-copy h2 { font-size: 25px; line-height: 1.14; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--navy); }
.sub-request-copy p { color: var(--text-muted); font-size: 13.5px; }
.sub-no-charge {
    display: inline-flex;
    margin-top: 18px;
    padding: 9px 12px;
    border-radius: 9px;
    background: #ECFDF5;
    color: #047857;
    font-size: 12px;
    font-weight: 700;
}
.sub-form { display: grid; gap: 13px; }
.sub-field { display: grid; gap: 6px; }
.sub-field label { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.sub-field input, .sub-field textarea, .sub-field select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 10px 12px;
    outline: none;
    background: var(--bg);
    color: var(--text);
}
.sub-field textarea { min-height: 90px; resize: vertical; }
.sub-field input:focus, .sub-field textarea:focus, .sub-field select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255,122,0,0.1);
}

.sub-faq { max-width: 800px; margin: 0 auto; }
.sub-faq details {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px 18px;
    margin-bottom: 9px;
}
.sub-faq summary { cursor: pointer; font-weight: 700; list-style: none; color: var(--navy); }
.sub-faq summary::-webkit-details-marker { display: none; }
.sub-faq details p { color: var(--text-muted); font-size: 13px; padding-top: 10px; }

@media (max-width: 900px) {
    .sub-trust-strip { grid-template-columns: repeat(2, 1fr); }
    .sub-layers,
    .sub-personal-box,
    .sub-credit-box,
    .sub-calculator-top,
    .sub-request-box { grid-template-columns: 1fr; }
    .sub-calculator-result { grid-template-columns: repeat(2, 1fr); }
    .sub-enterprise-list, .sub-credit-features { grid-template-columns: 1fr; }
    .sub-personal-box, .sub-credit-box, .sub-request-box, .sub-enterprise, .sub-calculator { padding: 22px; }
    .sub-guide-banner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   MOBILE RESPONSIVE PASS (NEW)
   ---------------------------------------------------------------
   Previously there were zero @media queries anywhere in this file, so on a
   phone the 260px-wide sidebar stayed permanently on-screen next to the
   content, and several admin/table layouts used fixed pixel grid columns
   that didn't reflow. This section:
     1. Turns the sidebar into an off-canvas drawer below 900px, toggled by
        the new #mobile-menu-btn hamburger (see index.php/app.js -
        openMobileSidebar()/closeMobileSidebar()).
     2. Lets .content take the full width and reduces its padding.
     3. Stacks the fixed-column admin/member-row grids into single-column
        cards so nothing gets clipped or forces horizontal scrolling.
     4. Shrinks modal/card widths so they fit within the viewport.
   Most of the auto-fill/auto-fit CSS grids elsewhere in this file (plan
   cards, module cards, admin stat cards, etc.) already reflow naturally as
   the viewport narrows, so they didn't need explicit overrides here. */

.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 60;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: var(--navy);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(11,30,61,0.25);
}
.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11,30,61,0.45);
    z-index: 45;
}
.mobile-sidebar-overlay.hidden { display: none !important; }

@media (max-width: 900px) {
    .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
    #app-shell.sidebar-open .mobile-sidebar-overlay { display: block; }
    /* Collapse is a desktop-only affordance - on mobile the sidebar is
       already an off-canvas drawer (shown/hidden entirely, not narrowed),
       so the collapse toggle has nothing useful to do here. */
    .sidebar-collapse-btn { display: none; }
    .sidebar.collapsed { width: 84vw; max-width: 300px; }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 50;
        width: 84vw;
        max-width: 300px;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    }
    #app-shell.sidebar-open .sidebar { transform: translateX(0); }

    .content-inner {
        padding: 64px 16px 24px;
        max-width: 100%;
    }

    .view-header h1 { font-size: 18px; }
    .view-header p { max-width: 100%; }

    /* Fixed-pixel-column admin/member grids -> stacked single-column cards. */
    .member-row,
    .member-row-detailed {
        grid-template-columns: 1fr;
        justify-items: start;
    }
    .member-row button { width: 100%; }

    .admin-grid,
    .plan-grid,
    .workspace-grid {
        grid-template-columns: 1fr !important;
    }

    .ingest-form { flex-direction: column; align-items: stretch; }

    /* Modals/cards (login, settings, admin login) - full-bleed with margin
       instead of a fixed desktop width. */
    .settings-card,
    .settings-card-wide,
    .login-card {
        width: calc(100vw - 32px);
        max-width: 420px;
    }

    .admin-tabbar { flex-wrap: wrap; }
    .admin-chart-wrap { overflow-x: auto; }
}

@media (max-width: 480px) {
    .content-inner { padding: 60px 12px 20px; }
    .view-header h1 { font-size: 16px; }
    .admin-big { font-size: 20px; }
}

.link-list { padding-left: 18px; font-size: 13px; line-height: 1.9; }

/* NEW (this round): show/hide password toggle - added after the user reported
   that a re-entered/saved password field seemed to display a DIFFERENT value
   than what was typed (very likely a browser autofill/password-manager
   mismatch, e.g. an old cached credential silently overriding what the user
   thinks they typed). Rather than guess at browser-specific autofill
   behavior, this lets the user visually confirm the EXACT characters in any
   password field before submitting - removes all ambiguity. */
.pw-wrap {
    position: relative;
    width: 100%;
}
.pw-wrap input[type="password"],
.pw-wrap input[type="text"] {
    width: 100%;
    padding-right: 40px;
    box-sizing: border-box;
}
.pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 6px;
    opacity: 0.55;
    color: inherit;
}
.pw-toggle:hover {
    opacity: 1;
}

/* NEW (2026-07-30, "Chatgpt Screen onerileri.docx" round): "buy credit /
   subscribe" call-to-action shown only when the AI narrative genuinely
   could not be produced due to no W$ credit (see appendCreditCta() in
   app.js) - never blocks the real computed numbers/statistics above it. */
.ai-credit-cta { margin-top: 14px; }
.ai-credit-cta .btn { width: auto; }

/* NEW: "Add Context" composer menu groups (rebrand of the old plain Attach
   menu - see the ai-attach-menu markup in index.php). */
.ai-attach-menu-group-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #9aa1ae;
    padding: 6px 10px 2px;
}
.ai-attach-menu-divider {
    height: 1px;
    background: #e3e6ed;
    margin: 4px 0;
}


/* ================================================================
   "2035" ROUND - LIGHT SIDEBAR OVERRIDE
   Direct reference (uploaded mockup images + docx): "Navy tam dolu panel
   yerine %100 kullanilmaz... boylece marka hissi kaybolmaz" - the sidebar
   moves from a solid dark-navy panel with white text to a warm-white
   panel with navy text and orange reserved for the single active/primary
   state, matching the WAI_2035_Design_Preview.html mockup approved by the
   user ("onayliyoruz, mockup ok").

   Scoped to html:not([data-theme="dark"]) so the existing dark-theme
   sidebar (html[data-theme="dark"] .sidebar, further up this file) is left
   completely untouched - Settings > Appearance > Dark still gets the
   original near-black sidebar with light text, exactly as before. Placed
   at the END of the file so normal CSS cascade order (not !important) is
   enough to win over the earlier dark-sidebar rules for the light theme.
   ================================================================ */

html:not([data-theme="dark"]) .sidebar {
    background: var(--warm-white);
    border-right: 1px solid var(--border);
    color: var(--navy);
}
html:not([data-theme="dark"]) .sidebar-brand .brand-w { color: var(--navy); }
html:not([data-theme="dark"]) .new-chat-btn {
    background: var(--navy-tint);
    border: 1px solid var(--navy-tint-2);
    color: var(--navy);
}
html:not([data-theme="dark"]) .new-chat-btn:hover { background: var(--navy-tint-2); }
html:not([data-theme="dark"]) .sidebar-search-row {
    background: var(--light-stone);
    border: 1px solid var(--border);
}
html:not([data-theme="dark"]) .sidebar-search { color: var(--navy); }
html:not([data-theme="dark"]) .sidebar-search::placeholder { color: var(--text-muted); }
html:not([data-theme="dark"]) .gemini-nav-label { color: var(--text-muted); }
html:not([data-theme="dark"]) .gemini-nav-toggle:hover { color: var(--navy); }
html:not([data-theme="dark"]) .nav-group { color: #4A5570; }
html:not([data-theme="dark"]) .nav-group:hover {
    background: var(--light-stone);
    color: var(--navy);
}
/* REVERTED (direct user request, with screenshot: "bizim ilk ekranlar boyle
   idi" - the reference screenshot shows the ORIGINAL active-nav look: solid
   ORANGE highlight, white text - exactly the base .nav-group.active rule
   above (var(--grad-accent)), which already applies correctly in Dark mode.
   The "2035" round had overridden this to a pale navy-tint pill in Light
   mode only; removing that override here restores the original orange
   look in Light mode too, matching the screenshot. (A separate, real navy
   restoration - the Workspaces hero banner - is below, matching the same
   screenshot.) */
html:not([data-theme="dark"]) .nav-group-locked { color: var(--text-muted); }
html:not([data-theme="dark"]) .badge-soon {
    background: var(--light-stone);
    color: var(--text-muted);
}
html:not([data-theme="dark"]) .sidebar-collapse-btn {
    border: 1px solid var(--border);
    color: var(--text-muted);
}
html:not([data-theme="dark"]) .sidebar-collapse-btn:hover {
    background: var(--light-stone);
    color: var(--navy);
}
html:not([data-theme="dark"]) .sidebar-bottom { border-top: 1px solid var(--border); }
html:not([data-theme="dark"]) .settings-gear-btn { color: #4A5570; }
html:not([data-theme="dark"]) .settings-gear-btn:hover {
    background: var(--light-stone);
    color: var(--navy);
}
html:not([data-theme="dark"]) .badge {
    background: var(--soft-gray);
    color: var(--navy);
}
/* REVERTED alongside .nav-group.active above - the active-item badge dot
   should sit on ORANGE now, not navy-tint, so it uses the same translucent
   white the base rule (line ~1365) already defines for that. */
html:not([data-theme="dark"]) .account-row-btn { color: var(--navy); }
html:not([data-theme="dark"]) .account-row-btn:hover { background: var(--light-stone); }
html:not([data-theme="dark"]) .logout-btn {
    border: 1px solid var(--border);
    color: var(--text-muted);
}
html:not([data-theme="dark"]) .logout-btn:hover { color: var(--navy); border-color: var(--navy); }
html:not([data-theme="dark"]) .notif-bell-btn { color: #4A5570; }
html:not([data-theme="dark"]) .notif-bell-btn:hover {
    background: var(--light-stone);
    color: var(--navy);
}

/* NEW (Quantum Sync round, direct user request "hepsini yap bitir" after
   reviewing/approving the mockup): styling for the rebuilt Quantum mode -
   run button, 6 mode filter chips, 3 sections (personal/general/technical
   per direct user ordering request), and the card accordion, which reuses
   the same +/circle-badge accordion language just built for .pos-card this
   session so the two features read as one design system. */
.quantum-run-wrap {
    text-align: center;
    padding: 4px 8px 20px;
}
.quantum-run-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.quantum-run-btn:hover { background: #e06c00; transform: translateY(-1px); }
.quantum-run-btn:disabled { opacity: 0.7; cursor: default; transform: none; }
.quantum-run-hint {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 10px 0 0;
}
.quantum-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding-bottom: 20px;
}
.quantum-mode-chip {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--navy);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.quantum-mode-chip:hover { border-color: var(--accent); }
.quantum-mode-chip.active {
    border-color: var(--accent);
    background: rgba(255, 122, 0, 0.1);
    color: var(--accent);
}
.quantum-empty-note {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    padding: 20px 0;
}
.quantum-locked-teaser {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 12px 20px;
}
/* NEW ("completion nudge" round): the "N of 7 cards are live" tally shown
   right after the (now auto-triggered) first sync - a small pill so it reads
   as status, not as another line of body text. */
.quantum-completion-summary {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(255, 122, 0, 0.08);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0 auto 10px;
    display: table;
}
.quantum-section { margin-bottom: 20px; }
.quantum-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 8px 4px;
}
/* CHANGED (redesign round, uploaded "Personal AI OS" mockup - direct user
   request, "daha ferah olsun"): was a single-column stack, so a fully
   synced set of 7-9 cards on a wide screen turned into a long, narrow
   scroll. Grid with a 300px minimum reflows into 2-3 columns on anything
   past tablet width and back to one column on mobile automatically -
   still the exact same <details> accordion cards/JS, just laid out
   differently. */
.quantum-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    align-items: start;
}
.quantum-card {
    /* FIX ("burası silik yazılar" - direct user report, dark-theme
       screenshot): the card is a fixed WHITE surface (background: #fff
       below) regardless of which of the 8 Appearance themes is active, but
       every text rule inside it was reading var(--text)/var(--text-muted) -
       tokens that flip to near-white (#E8EBF2) in dark themes so they stay
       legible on a DARK page background. On this always-white card that
       produced near-invisible washed-out text. Scoping fixed light-theme
       values as local custom properties here (and swapping every var(--text)
       / var(--text-muted) below to these) keeps the card readable no matter
       which theme is active, same fix pattern as .quantum-card-title's
       existing var(--navy)/.quantum-state-live's fixed #1B7A43. */
    --qc-text: #1A2233;
    --qc-text-muted: #6B7280;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.quantum-card:hover { box-shadow: var(--shadow-sm); border-color: #d8dde6; }
.quantum-card-summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
}
.quantum-card-summary::-webkit-details-marker { display: none; }
.quantum-card-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.quantum-badge-live { background: rgba(27, 122, 67, 0.1); color: #1B7A43; }
.quantum-badge-locked { background: rgba(107, 114, 128, 0.12); color: var(--qc-text-muted); }
.quantum-card-icon { font-size: 16px; }
.quantum-card-title { font-weight: 700; color: var(--navy); font-size: 14.5px; flex: 1; }
.quantum-card-state {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.quantum-state-live { color: #1B7A43; }
.quantum-state-locked { color: var(--qc-text-muted); }
.quantum-card-body { padding: 0 16px 16px 52px; }
.quantum-card-body p { font-size: 13.5px; color: var(--qc-text); line-height: 1.6; margin: 0 0 8px; }
/* NEW ("daha iyi gösterim" round): card body now runs through richTextToHtml()
   (see renderQuantumCardHtml() in app.js), so it can contain real <ul>/<ol>/<strong>
   markup instead of one flat paragraph - style those the same way the wrapping
   .quantum-card-body p rule above does, so a numbered/bulleted item list looks
   native to the card rather than like unstyled browser-default list output. */
.quantum-card-body-text { font-size: 13.5px; color: var(--qc-text); line-height: 1.6; }
.quantum-card-body-text p { margin: 0 0 8px; }
.quantum-card-body-text ul,
.quantum-card-body-text ol { margin: 0 0 8px; padding-left: 20px; }
.quantum-card-body-text li { margin: 0 0 4px; }
.quantum-card-body-text strong { color: var(--accent); font-weight: 600; }
.quantum-card-locked-text { font-style: italic; color: var(--qc-text-muted) !important; }
.quantum-card-sources { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.quantum-card-sources a {
    font-size: 11.5px;
    color: var(--accent);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
}
.quantum-card-sources a:hover { border-color: var(--accent); }
.quantum-card-used { font-size: 11px; color: var(--qc-text-muted); margin: 0; }
.quantum-unlock-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.quantum-unlock-link:hover { text-decoration: underline; }

/* NEW (task #535, direct user feedback: "pozitif bir muzikle ilgili
   rapora ok derse... muzik seviyor bilgisi... negatifse negatif bilgi"):
   small ok/so-so/no row under every live Quantum Sync card - see
   renderQuantumCardHtml()/wireQuantumSync() in app.js. */
.quantum-card-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.quantum-card-feedback-label { font-size: 11px; color: var(--qc-text-muted); margin-right: 2px; }
.quantum-feedback-btn {
    /* FIX (same "silik yazılar" round): var(--card) is #1A2233 (dark navy)
       in dark themes - on this always-white card that painted a dark blob
       behind the 👍😐👎 emoji instead of a light pill. Fixed white to match
       the card's own fixed background. */
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 14px;
    line-height: 1.6;
    cursor: pointer;
}
.quantum-feedback-btn:hover:not(:disabled) { border-color: var(--accent); }
.quantum-feedback-btn:disabled { opacity: 0.5; cursor: default; }
.quantum-card-feedback-thanks { font-size: 11px; color: var(--qc-text-muted); margin-left: 4px; }

/* Phase 1 audit Fix #16: Calculators loading/error state spinner */
.wai-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--orange, #FF7A00);
    border-radius: 50%;
    animation: wai-spin 0.7s linear infinite;
}
@keyframes wai-spin {
    to { transform: rotate(360deg); }
}
.calc-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* NEW (My Personal OS "blank on first open" fix, direct user screenshot):
   shown the instant loadPersonalOS() starts and removed the moment a
   terminal state (paywall/not-configured/real content) is reached - see
   app.js. Without this there was a 1-4s gap with only the header + trial
   banner visible and nothing else, which read as a broken/dead screen. */
.pos-loading-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 16px;
    color: var(--text-muted, #8a8f98);
    text-align: center;
}
.pos-loading-skeleton p { margin: 0; font-size: 14px; }

/* ==================== GLOBAL RESULT PANEL ====================
   NEW ("single unified result screen" round, direct user request: "ciktilar
   her buton un altinda beliriyor... onun yerine tek bir ekranda sayfa sayfa
   olsa? o sayfa veya raporda isek asagidaki print paylas aktif olur o
   rapor icin"): every calculator/tool report now docks here instead of
   appearing inline under whatever card triggered it. Desktop: fixed panel on
   the right edge. Mobile (<900px, matches the breakpoint already used
   elsewhere in this file): becomes a bottom sheet instead - same markup,
   CSS just repositions it. See #global-result-panel in index.php and
   wireGlobalCalcPanel() in app.js. */
.global-result-panel {
    position: fixed;
    top: 72px;
    right: 16px;
    bottom: 16px;
    /* CHANGED ("hala yarısı kadar bile değil" round, direct user report -
       the previous 560px bump was STILL nowhere near what "window'u büyüt"
       meant on an actual desktop screen; the panel needs to genuinely read
       as a large window, not a docked sidebar strip). Now takes most of the
       viewport width by default. Still user-resizable/movable (see
       .grp-resize-handle and #grp-header-drag + wireGlobalCalcPanel() in
       app.js) - a user who wants it narrower can still drag it down. */
    width: min(1400px, 88vw);
    min-width: 380px;
    max-width: 96vw;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    z-index: 480;
    overflow: hidden;
}
.global-result-panel.hidden { display: none; }
/* NEW (same round): dragged-position state - once a user drags the header,
   JS switches from right/top-anchored to left/top-anchored positioning
   (see wireGlobalCalcPanel()'s drag handler) so it can be moved anywhere
   on screen instead of staying pinned to the right edge. */
.global-result-panel.grp-positioned { right: auto; bottom: auto; }

/* NEW (same round): thin invisible strip on the left edge - drag it to
   resize the panel's width. Kept a plain custom drag (not CSS `resize`)
   since `resize` doesn't play well with position:fixed + flex children
   across browsers. */
.grp-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 2;
}
.grp-resize-handle:hover, .grp-resize-handle.grp-dragging { background: var(--accent, var(--orange, #FF7A00)); opacity: 0.25; }

.grp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    /* NEW (same round): the header IS the drag-to-move handle now (see
       #grp-header-drag in index.php + wireGlobalCalcPanel() in app.js) -
       cursor signals it's grabbable. Buttons/inputs inside still work
       normally since the drag only starts on a direct background click. */
    cursor: move;
}
.grp-title {
    font-weight: 700;
    font-size: 14px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.grp-tab-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.grp-tab-prev, .grp-tab-next {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 26px;
    height: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--text);
    font-size: 15px;
}
.grp-tab-prev:disabled, .grp-tab-next:disabled { opacity: 0.35; cursor: default; }
.grp-tab-count {
    font-size: 11.5px;
    color: var(--text-muted);
    min-width: 34px;
    text-align: center;
}
.grp-clear-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px 6px;
}
.grp-clear-btn:hover { color: var(--text); text-decoration: underline; }
.grp-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 2px 4px;
}
.grp-close-btn:hover { color: var(--text); }

.grp-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 14px 0;
    flex-shrink: 0;
}
.grp-tabs:empty { display: none; }
.grp-tab-chip {
    flex-shrink: 0;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11.5px;
    color: var(--text-muted);
    cursor: pointer;
}
.grp-tab-chip.active {
    background: var(--accent, var(--orange, #FF7A00));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.grp-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px;
}
.grp-empty-hint {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    margin-top: 24px;
}

.grp-actions {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 10px 14px;
    flex-wrap: wrap;
}

.grp-reopen-btn {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 470;
    background: var(--accent, var(--orange, #FF7A00));
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.grp-reopen-btn.hidden { display: none; }

@media (max-width: 900px) {
    .global-result-panel {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-height: 72vh;
        border-radius: 16px 16px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
    .grp-reopen-btn { right: 12px; bottom: 12px; }
}

/* ===================================================================
   PERSONAL & LIFE - 5-CATEGORY IA (direct user spec + preview(5).html
   mockup: Everyday Life / Money & Planning / Home & Energy / Wellness &
   Self / Fortune & Culture). Purely a visual grouping layer on top of
   the existing .calculator-card/.tool-form cards - every card keeps its
   original id/class/JS wiring, this just adds a labeled header + a
   responsive grid wrapper around each group so the page reads as 5
   organized sections instead of one long scattered list. Fortune &
   Culture keeps its own pre-existing .fal-kultur-section theme; these
   rules cover the other 4 categories plus the shared header style all
   5 use. =================================================================== */
.pl-category { margin-bottom: 26px; }
.pl-category:last-of-type { margin-bottom: 18px; }
.pl-category-header { margin-bottom: 12px; }
.pl-category-title {
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.01em;
    color: var(--text);
    margin-bottom: 3px;
}
.pl-category-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
}
.pl-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
    align-items: start;
}
.pl-category-grid > .calculator-card { margin-bottom: 0; }
/* I NEED... and What's Around Me are naturally tall/open-by-default -
   let each keep the full row width instead of squeezing into a forced
   2-column cell when the grid only has these two items. */
#ineed-card, #ineed-nearby-card { grid-column: 1 / -1; }
@media (max-width: 700px) {
    .pl-category-grid { grid-template-columns: 1fr; }
}

/* NEW (task #1032, "WBook LLM" main-menu entry): 3-pane NotebookLM-style
   layout (Sources / Chat / Studio) - see #view-wbookllm in index.php. Plain
   CSS grid, no JS layout logic - collapses to a single stacked column on
   narrow screens same as every other multi-column view in this app.
   FIXED (task #1034 redesign round): was using undefined --card-bg/
   --border-color custom properties (never declared anywhere in :root), so
   this pane silently always rendered its hardcoded fallback colors no
   matter which of the 8 Appearance themes was active. Now uses the real
   theme-aware --card/--border variables (see :root block near the top of
   this file) so WBook LLM finally re-themes correctly like every other
   view. */
.wbook-layout {
    display: grid;
    grid-template-columns: 280px 1fr 300px;
    gap: 16px;
    margin-top: 16px;
    align-items: start;
}
.wbook-pane {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}
.wbook-pane h3 { margin: 0; font-size: 15px; }
.wbook-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.wbook-pane-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 9px;
}
@media (max-width: 900px) {
    .wbook-layout { grid-template-columns: 1fr; }
}

/* NEW (task #1034, mockup adaptation): source upload dropzone + checkbox
   rows with a small file-type icon and a live status dot (queued / parsed /
   error), replacing the old plain "Add source" link button per the uploaded
   WBook_LLM_Beyond_NotebookLM.html mockup. Rendering logic lives in
   renderWbookSourceList() in app.js. */
.wbook-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius);
    padding: 16px 10px;
    cursor: pointer;
    color: var(--text-muted);
    transition: border-color .15s, background .15s;
}
.wbook-upload:hover { border-color: var(--accent); background: var(--bg); }
.wbook-upload-plus {
    width: 28px; height: 28px;
    border-radius: 999px;
    background: var(--grad-accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; line-height: 1;
    margin-bottom: 2px;
}
.wbook-upload strong { color: var(--text); font-size: 13px; }
.wbook-upload span { font-size: 11px; }
.wbook-source-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
}
.wbook-source-row:last-child { border-bottom: none; }
.wbook-source-row .wbook-src-ico { font-size: 15px; flex: 0 0 auto; }
.wbook-source-row .wbook-src-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.wbook-src-dot {
    width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto;
    background: var(--text-muted);
}
.wbook-src-dot.ready { background: #22c55e; }
.wbook-src-dot.error { background: #ef4444; }
.wbook-src-dot.pending { background: #f59e0b; }

/* NEW (task #1034): Studio's 5 tool buttons - full-width row with an icon
   chip + title + one-line description, per the mockup, instead of the old
   plain .btn.btn-ghost list. */
.wbook-tool {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 10px;
    margin-bottom: 7px;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    transition: border-color .15s, background .15s, transform .1s;
}
.wbook-tool:hover { border-color: var(--accent); background: var(--card); }
.wbook-tool:active { transform: scale(.99); }
.wbook-tool:last-of-type { margin-bottom: 0; }
.wbook-tool-ico {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: rgba(var(--accent-rgb), .12);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.wbook-tool b { display: block; font-size: 12.5px; }
.wbook-tool span span { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; }

/* NEW (task #1034): honest source-intelligence panel - real counts only
   (source count, combined word count, last-built timestamp), no fabricated
   "coverage %" style numbers like the mockup's own placeholders (those had
   no real computation behind them - see runWbookInsightUpdate() in app.js
   for what actually feeds these). */
.wbook-insight {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}
.wbook-insight > b { display: block; margin-bottom: 6px; color: var(--text); font-size: 12.5px; }
.wbook-metric-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    color: var(--text-muted);
}
.wbook-metric-row strong { color: var(--text); font-weight: 600; }

/* NEW (task #1034, direct fix for "open deck deyince başka ekran açılıyor,
   açılmasın... previous next zoom falan olsun"): inline paginated deck
   viewer replacing the old new-tab/download-link-only result. The iframe is
   loaded via srcdoc so it's same-origin scriptable from the parent page -
   see wireWBookDeckViewer()/renderWbookDeck() in app.js for the actual
   slide-paging (.wai-slide display toggling) and zoom (iframe html{zoom})
   logic. */
/* GENERALIZED (task #1037): was an inline WBook-only panel (margin-top,
   sits in normal document flow inside #view-wbookllm); now a shared global
   modal viewer usable from any screen, so it's position:fixed with its own
   backdrop and an inner .wbook-deck-card that holds the actual toolbar+
   stage. data-skin (see index.php) swaps --wai-viewer-accent per calling
   app; .wbook-deck-textbody is the non-iframe "plain document" mode (WAI
   Legal etc - no images/slides, needs to stay readable/selectable text). */
.wbook-deck-viewer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(10,12,16,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.wbook-deck-viewer.hidden { display: none; }
.wbook-deck-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--wai-viewer-accent, var(--accent));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    width: min(1240px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}
.wbook-deck-viewer[data-skin="legal"] { --wai-viewer-accent: #64748b; }
.wbook-deck-viewer[data-skin="fal"] { --wai-viewer-accent: #a855f7; }
.wbook-deck-viewer[data-skin="tarot"] { --wai-viewer-accent: #a855f7; }
.wbook-deck-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.wbook-deck-title { font-weight: 700; font-size: 13.5px; color: var(--text); }
.wbook-deck-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wbook-deck-pagecontrols { display: flex; align-items: center; gap: 6px; }
.wbook-deck-pagecontrols.hidden { display: none; }
.wbook-deck-controls .btn { padding: 5px 10px; font-size: 12.5px; }
.wbook-deck-pagelabel {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 46px;
    text-align: center;
}
.wbook-deck-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
.wbook-deck-stage {
    background: #2b2f36;
    padding: 18px;
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
    overflow: auto;
}
#wbook-deck-frame {
    width: 297mm;
    height: 210mm;
    max-width: 100%;
    border: 0;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
    flex: 0 0 auto;
}
#wbook-deck-frame.hidden { display: none; }
.wbook-deck-textbody {
    background: var(--card);
    color: var(--text);
    border-radius: var(--radius-lg);
    padding: 32px 40px;
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 14.5px;
    box-shadow: 0 6px 24px rgba(0,0,0,.25);
    align-self: flex-start;
}
.wbook-deck-textbody.hidden { display: none; }

/* NEW (task #1034, mockup's bottom 3-mini-card row) */
.wbook-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
}
.wbook-mini {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.wbook-mini h3 { margin: 0 0 6px; font-size: 13.5px; }
.wbook-mini p { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.wbook-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wbook-chip {
    font-size: 11px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 9px;
    color: var(--text-muted);
}
@media (max-width: 900px) {
    .wbook-bottom { grid-template-columns: 1fr; }
}

/* NEW (Hybrid WAI Design Language "vur baltayi" round, direct user request
   "radikal degisiklikler... devam et bitir"): implements the prototype's
   core hierarchy rule for real - "Large -> Medium -> Inline, no equal-size
   card grids for everyday lists." Money & Planning / Home & Energy /
   Wellness & Self (and Fortune & Culture below, same idea) used to render
   every single tool as its own full-width card even when closed, so 7 simple
   lookup tools took as much vertical space as the 2 flagship actions above
   them. Closed, each .calculator-card now behaves like a compact pill/chip
   that wraps in a row with its siblings; opening one (native <details>
   behavior, completely unchanged) makes just that one card expand back to a
   full-width form exactly as before - nothing about the underlying
   id/form/JS wiring changes, this is a closed-state layout change only. */
.pl-category-grid.pl-category-grid--chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}
.pl-category-grid--chips > .calculator-card,
.fal-kultur-section > .calculator-card {
    flex: 0 1 auto;
    width: auto;
    margin-bottom: 0;
    padding: 9px 16px;
}
.pl-category-grid--chips > .calculator-card summary,
.fal-kultur-section > .calculator-card summary {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pl-category-grid--chips > .calculator-card h3,
.fal-kultur-section > .calculator-card h3 {
    font-size: 13px;
    margin: 0;
    white-space: nowrap;
    gap: 6px;
}
.pl-category-grid--chips > .calculator-card .tag,
.fal-kultur-section > .calculator-card .tag {
    font-size: 10px;
    padding: 1px 7px;
}
.pl-category-grid--chips > .calculator-card[open],
.fal-kultur-section > .calculator-card[open] {
    flex: 1 1 100%;
    width: 100%;
    padding: 18px 20px;
}
.pl-category-grid--chips > .calculator-card[open] h3,
.fal-kultur-section > .calculator-card[open] h3 {
    font-size: 14.5px;
    white-space: normal;
}
/* Fortune & Culture's 4 tools were direct block children with no wrapping
   container at all (unlike the other 4 categories, which already had
   .pl-category-grid) - give the section itself the same flex-row treatment,
   keeping the header (title + intro paragraph) on its own full-width line
   above the chip row. */
.fal-kultur-section {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fal-kultur-header { flex: 1 1 100%; }
@media (max-width: 700px) {
    .pl-category-grid--chips > .calculator-card,
    .fal-kultur-section > .calculator-card { width: 100%; }
}

/* Quick-links row inside My Personal OS pointing to My Profile / Company
   Registry (menu declutter round, direct user question: "menüde REGISTRY
   ve MY PROFILE in ne işi var?") - reuses .nav-group's click wiring but
   restyled as a compact pill row instead of a full-width sidebar button. */
.pos-quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.pos-quicklink.nav-group {
    width: auto;
    display: inline-flex;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 13px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
}
.pos-quicklink.nav-group:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-1px);
}

/* ===================================================================
   ASK WAI HOME - Quantum teaser strip + Personal OS quick-add row
   (direct user-uploaded mockup round; the Simply/Advanced/Quantum mode
   switcher above is kept exactly as-is per direct user instruction "bu
   modlar silinmeyecek kalacak" - these are additions below it, not a
   replacement). =================================================== */
.home-section-label {
    text-align: center;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    margin: 34px 0 8px;
}
.home-section-sub {
    text-align: center;
    color: var(--text-muted);
    font-size: 12.5px;
    margin: 0 0 16px;
}
.quantum-teaser-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
/* CHANGED ("routing matrix" round follow-up): same soft-glass family as
   .hero-shortcut/.pos-quickadd-item just above - this card is the same
   visual role (a clickable home-screen navigational tile, same stacked
   position on the page), so it read as a third, inconsistent style next to
   the two that already got the treatment. */
.quantum-teaser-card {
    text-align: left;
    min-height: 92px;
    padding: 15px 16px;
    border: 1px solid rgba(20,25,35,.06);
    border-radius: 15px;
    background: rgba(255,255,255,.62);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(20,25,35,.035);
    transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.quantum-teaser-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}
html[data-theme="dark"] .quantum-teaser-card {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.09);
}
.quantum-teaser-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}
.quantum-teaser-icon { font-size: 13px; }
.quantum-teaser-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.quantum-teaser-text {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* CHANGED ("Personal ve Explorer simetrik olsun" - direct user feedback
   after live testing on their phone: the quick-add row above "Explore" used
   a totally different visual language, pill/chip flex-wrap vs. Explore's
   .hero-shortcut card grid, so the two stacked sections read as unrelated
   systems rather than one consistent home screen. Now shares the exact same
   grid-card treatment as .hero-shortcuts/.hero-shortcut just above (task
   #445's card language) - same HTML/JS, restyle only. */
.pos-quickadd-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 18px 0 4px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
/* FIXED ("routing matrix" round follow-up, direct user request "kalanları
   tamamla" + a re-check of the earlier "Hybrid Design Language" claim): the
   comment above .hero-shortcut said BOTH .hero-shortcut and .pos-quickadd-item
   got the soft-glass treatment, but only .hero-shortcut's rule actually did -
   this rule still had the old opaque var(--card)/var(--border) look in light
   mode (only the html[data-theme="dark"] override further up was ever
   updated). These two grids sit stacked directly on top of each other on the
   home screen, so the mismatch was visible - one translucent, one solid.
   Brought in line with .hero-shortcut exactly. */
.pos-quickadd-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255,255,255,.62);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(20,25,35,.06);
    color: var(--text);
    border-radius: var(--card-radius);
    padding: 16px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(20,25,35,.035);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.pos-quickadd-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}
.pos-quickadd-item:hover .pos-quickadd-plus { color: var(--accent); }
.pos-quickadd-plus {
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--text-muted);
    font-size: 13px;
    transition: color .16s var(--ease);
}

@media (max-width: 700px) {
    .quantum-teaser-row { grid-template-columns: 1fr; }
}

/* ============================================================
   WAI INTELLIGENCE SYSTEM ("WAI message sound icon.docx" round)
   W-Spiral core symbol + 8-state processing UX (Activating ->
   Understanding -> Discovering -> Connecting -> Analyzing ->
   Verifying -> Building -> Ready) + Intelligence Trace + Evidence
   layer + Source Intelligence tags. Replaces the old static
   "Thinking..." icon/text everywhere .ai-thinking is used.
   State colors are semantic (state = meaning, per the doc's own
   "renkler state anlami tasiyacak" principle), so these tokens
   are deliberately NOT tied to --accent/--orange - they stay
   constant across all 8 Appearance themes and dark/Quantum mode,
   only the surrounding card/text still follow --card/--text/
   --border as normal so the block still looks native in every
   theme. See app.js's "WAI INTELLIGENCE SYSTEM" section for the
   state machine that drives these classes/data-state attrs. */
:root {
    --wai-core: #2D6CDF;
    --wai-intel: #7C6FEF;
    --wai-analysis: #C24FD1;
    --wai-verify: #E0A526;
    --wai-success: #2FAE6A;
    --wai-data: #21B6C4;
}

.wai-intel-status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
}
.wai-intel-status-text { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.wai-intel-state-label { font-weight: 700; font-size: 13px; letter-spacing: .01em; color: var(--text); }
.wai-intel-state-sub { font-size: 12px; color: var(--text-muted); }

/* REVERTED (direct user report: "orada logo yu döndürüyorsun, eski
   halini istiyorum, yanlışlıkla silinen i istiyorum, logomu değil" -
   "you're spinning the [brand] logo there, I want the old version back,
   I want the thing that was accidentally deleted, not my logo"): a
   same-day detour swapped this to a background-image of the actual
   bronze ribbon logo PNG (plus two follow-up patches chasing legibility/
   path bugs on that approach). The user does not want the brand mark
   itself spinning here. Restored the original pure-CSS two-ring +
   pulsing-core spiral (no bitmap at all, so nothing here can ever
   regress to a blurry/blob rendering issue again) - colors are semantic
   per --wai-spiral-color, switching with data-state exactly like the
   original design. The matching <span class="wai-spiral-core"> child
   markup this depends on has been restored in index.php too (was
   dropped as "vestigial" in the same detour). */
.wai-spiral {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin-top: 1px;
    --wai-spiral-color: var(--wai-core);
}
.wai-spiral::before,
.wai-spiral::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid transparent;
}
.wai-spiral::before {
    border-top-color: var(--wai-spiral-color);
    border-right-color: var(--wai-spiral-color);
    animation: wai-spiral-spin 1.1s linear infinite;
}
.wai-spiral::after {
    inset: 6px;
    opacity: .55;
    border-top-color: var(--wai-spiral-color);
    border-left-color: var(--wai-spiral-color);
    animation: wai-spiral-spin-rev 1.7s linear infinite;
}
.wai-spiral-core {
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background: var(--wai-spiral-color);
    animation: wai-spiral-pulse 1.3s ease-in-out infinite;
}
@keyframes wai-spiral-spin { to { transform: rotate(360deg); } }
@keyframes wai-spiral-spin-rev { to { transform: rotate(-360deg); } }
@keyframes wai-spiral-pulse {
    0%, 100% { transform: scale(.82); opacity: .7; }
    50% { transform: scale(1); opacity: 1; }
}
/* Ready state: rings stop reading as "spinning" - a single soft green
   pulse instead, so the eye immediately reads "done", not "still working". */
.wai-spiral[data-state="ready"]::before,
.wai-spiral[data-state="ready"]::after { animation: none; border-color: var(--wai-success); opacity: .3; }
.wai-spiral[data-state="ready"] .wai-spiral-core { animation: none; background: var(--wai-success); transform: scale(1); opacity: 1; }

.wai-spiral[data-state="activating"],
.wai-spiral[data-state="understanding"],
.wai-spiral[data-state="connecting"] { --wai-spiral-color: var(--wai-intel); }
.wai-spiral[data-state="discovering"] { --wai-spiral-color: var(--wai-data); }
.wai-spiral[data-state="analyzing"],
.wai-spiral[data-state="building"] { --wai-spiral-color: var(--wai-analysis); }
.wai-spiral[data-state="verifying"] { --wai-spiral-color: var(--wai-verify); }

/* 8-state substep list (main composer only - think-for-me's compact
   variant has no .wai-intel-substeps container, which is fine, the
   forEach in app.js simply no-ops when it finds none). */
.wai-intel-substeps {
    display: none;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
    padding-left: 1px;
}
.wai-intel-status.is-expanded .wai-intel-substeps { display: flex; }
.wai-intel-substep {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--text-muted);
    transition: color .2s var(--ease);
}
.wai-intel-substep .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
    transition: background .2s var(--ease);
}
.wai-intel-substep.is-done { color: var(--text); }
.wai-intel-substep.is-done .dot { background: var(--wai-success); }
.wai-intel-substep.is-current { color: var(--text); font-weight: 600; }
.wai-intel-substep.is-current .dot { background: var(--wai-analysis); animation: wai-spiral-pulse 1s ease-in-out infinite; }

/* NEW (task #1099, direct user request: "Ask wai deki spiral gibi WBook LLM
   de running objesi görsel olarak iyi bir yere yerleştir, sunum hazırlayıp
   hazırlamadığı anlaşılmıyor... çakışma olmasın. altın sağına soluna yap,
   aynı anda birden fazla seçenek run edildi ise ona da 2. veya 3. running
   ekle, boyutlar ve yerleşimi ona göre ayarla"): a small floating toast
   system, separate from the composer-anchored .wai-intel-status above -
   WBook LLM's recipe buttons/PowerPoint export live inside a wide 3-column
   workspace with no single natural anchor point near the triggering
   control, so a fixed corner stack is used instead. Reuses the EXACT
   .wai-spiral markup/animation/data-state color rules already defined
   above for visual consistency with Ask WAI's own indicator. Two corner
   stacks (bottom-right primary, bottom-left secondary - see
   wbookGenRelayout() in app.js) so a 2nd concurrent generation gets its
   own clearly separate spot rather than stacking on the first; everything
   shrinks via .is-compact once more than 2 are running at once so the
   stacks never grow tall enough to cover other UI. */
.wai-gen-stack {
    position: fixed;
    bottom: 18px;
    z-index: 4200;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    max-width: min(320px, calc(50vw - 24px));
}
.wai-gen-stack-br { right: 18px; align-items: flex-end; }
.wai-gen-stack-bl { left: 18px; align-items: flex-start; }
.wai-gen-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    width: 280px;
    animation: wai-gen-toast-in .25s var(--ease, ease) both;
}
.wai-gen-toast.is-compact { width: 220px; padding: 9px 11px; gap: 8px; }
.wai-gen-toast.is-compact .wai-spiral { width: 22px; height: 22px; }
.wai-gen-toast.is-compact .wai-spiral::after { inset: 4px; }
.wai-gen-toast.is-compact .wai-spiral-core { inset: 8px; }
.wai-gen-toast.is-compact .wai-gen-toast-title { font-size: 12px; }
.wai-gen-toast.is-compact .wai-gen-toast-stage { font-size: 10.5px; }
.wai-gen-toast-body { min-width: 0; flex: 1; }
.wai-gen-toast-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wai-gen-toast-stage {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}
.wai-gen-toast.is-done .wai-gen-toast-title { color: var(--wai-success); }
.wai-gen-toast.is-error .wai-gen-toast-stage { color: #c0392b; }
@keyframes wai-gen-toast-in {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 640px) {
    .wai-gen-stack { bottom: 10px; max-width: calc(100vw - 20px); }
    .wai-gen-stack-br { right: 10px; }
    .wai-gen-stack-bl { left: 10px; }
    .wai-gen-toast { width: calc(50vw - 20px); min-width: 150px; }
}

/* Evidence badge - honest, signal-based (see renderEvidenceBadge() in
   app.js): HIGH/MEDIUM only ever appear when real Live Data sources
   backed the answer; otherwise a neutral "general knowledge" label, never
   a confidence number invented out of thin air. */
.wai-evidence-badge-row { margin: 8px 0 2px; }
.wai-evidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
.wai-evidence-badge.high { background: rgba(47,174,106,.13); color: #1F8A54; }
.wai-evidence-badge.medium { background: rgba(224,165,38,.15); color: #92670E; }
.wai-evidence-badge.general { background: rgba(107,114,128,.12); color: var(--text-muted); }
.wai-evidence-badge .n { font-weight: 400; opacity: .85; }

/* Intelligence Trace - only ever shows numbers app.js can actually derive
   from the response (model(s), step count, latency, source count). No
   fabricated "relationships identified" style metrics. */
.wai-intel-trace {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}
.wai-intel-trace-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.wai-intel-trace-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text);
    padding: 2px 0;
}
.wai-intel-trace-row .ico { width: 16px; text-align: center; flex-shrink: 0; }

/* REMOVED ("Gemini-style report" round): .wai-source-tag styled a small
   pill next to each plain-text source link - that markup no longer exists
   (renderSources() now builds .ai-source-chip cards with the category label
   folded into .ai-source-chip-meta instead, see style rules above). */

html[data-theme="dark"] .wai-evidence-badge.high { background: rgba(47,174,106,.22); color: #6FE0A4; }

/* ---------------- WAI Studio (task #1063, full rebuild) ----------------
   Template-driven image+video generation screen, replacing the old bare
   single-textarea Image Studio (task #1032). Built entirely from the
   existing theme-variable system (--accent/--accent-light/--accent-rgb/
   --card/--border/--text/--text-muted/--card-radius) so it re-colors
   correctly across all 8 Appearance themes, same as every other screen -
   no hardcoded hex, unlike the uploaded WAI Studio.pdf mockup this UX
   pattern (filmstrip + live cost readout + Fast/Quality toggle) was
   borrowed from. */
.wai-studio-filmstrip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    margin-bottom: 18px;
    scrollbar-width: thin;
}
.wai-studio-template-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 108px;
    padding: 14px 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    cursor: pointer;
    font: inherit;
    color: var(--text);
    transition: border-color .15s var(--ease, ease), box-shadow .15s var(--ease, ease), transform .1s ease;
}
.wai-studio-template-card:hover { border-color: rgba(var(--accent-rgb),.45); transform: translateY(-1px); }
.wai-studio-template-card.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.14);
    background: rgba(var(--accent-rgb),.06);
}
.wai-studio-template-icon { font-size: 24px; line-height: 1; }
.wai-studio-template-title {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
}

.wai-studio-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 860px) {
    .wai-studio-panel { grid-template-columns: 1fr; }
}
.wai-studio-col {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 20px;
}

.wai-studio-upload { margin-bottom: 16px; }
.wai-studio-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 16px;
    border: 1.5px dashed var(--border);
    border-radius: var(--card-radius);
    cursor: pointer;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    transition: border-color .15s ease, background .15s ease;
}
.wai-studio-upload-zone:hover,
.wai-studio-upload-zone.drag {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb),.05);
}
.wai-studio-upload-icon { font-size: 26px; }
.wai-studio-upload-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.wai-studio-upload-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--card-radius);
    border: 1px solid var(--border);
}

.wai-studio-row { margin-bottom: 16px; }
.wai-studio-mode-toggle {
    display: flex;
    gap: 8px;
}
.wai-studio-mode-btn {
    flex: 1;
    padding: 9px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s ease;
}
.wai-studio-mode-btn:hover { border-color: rgba(var(--accent-rgb),.4); }
.wai-studio-mode-btn.active {
    background: var(--grad-accent, var(--accent));
    border-color: var(--accent);
    color: #fff;
}

.wai-studio-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 280px;
    padding: 24px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.wai-studio-preview img,
.wai-studio-preview video { max-width: 100%; border-radius: var(--card-radius); }
.wai-studio-preview-icon { font-size: 34px; margin-bottom: 4px; }
.wai-studio-preview b { color: var(--text); font-size: 14px; }
html[data-theme="dark"] .wai-evidence-badge.medium { background: rgba(224,165,38,.24); color: #F0C868; }

/* ---------------- Engineering & CAD hub (task #1067) ----------------
   Same visual language as .hero-shortcut (link cards) and .calculator-card
   (info cards), rebuilt from theme tokens only so it stays correct across
   every Appearance theme - see that section's own comment for why hardcoded
   colors are a hard no here (task #646, "orange pollution" regression). */
.eng-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.eng-hub-grid--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.eng-hub-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 14px 16px;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    transition: border-color .15s var(--ease, ease), box-shadow .15s var(--ease, ease), transform .1s ease;
}
.eng-hub-link:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.eng-hub-link-icon { font-size: 20px; line-height: 1; }
.eng-hub-link-title { font-size: 13px; font-weight: 700; margin-top: 2px; }
.eng-hub-link-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.eng-hub-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 16px 18px;
}
.eng-hub-card h3 { margin: 0 0 6px; font-size: 14px; }
.eng-hub-card-standards { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; margin: 0; }
html[data-theme="dark"] .eng-hub-link { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.09); }
html[data-theme="dark"] .eng-hub-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.09); }