/* ============================================================================
   24-genz.css - the "vibe layer". A fully additive, opt-in Gen-Z feature suite
   injected by js/genz.js as a floating dock. Nothing here targets existing app
   chrome except a few :root-scoped aesthetic overlays keyed off data-attributes
   that only genz.js ever sets, so with the dock closed and no toggles on, the
   app looks exactly as before. Every animated effect bows to reduced-motion.
   ============================================================================ */

:root {
    /* One gradient drives the whole layer so a re-theme is a one-line change. */
    --gz-grad: linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #0EA5E9 100%);
    --gz-glow: 0 6px 22px rgba(124, 58, 237, 0.45);
    --gz-ink: #0F1020;
    --gz-card: #FFFFFF;
}

/* ---- Floating dock (bottom-right) ----------------------------------------- */
.gz-dock {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: var(--chronos-font-sans);
}
.gz-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--gz-grad);
    background-size: 200% 200%;
    box-shadow: var(--gz-glow);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    animation: gz-fab-breathe 3.4s ease-in-out infinite, gz-grad-drift 8s ease infinite;
    transition: transform 140ms cubic-bezier(.34,1.56,.64,1);
    position: relative;
}
.gz-fab:hover { transform: scale(1.08) rotate(6deg); }
.gz-fab:active { transform: scale(0.94); }
.gz-fab .gz-fab-mood {
    position: absolute;
    bottom: -2px; right: -2px;
    font-size: 18px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
@keyframes gz-fab-breathe {
    0%,100% { box-shadow: 0 6px 22px rgba(124,58,237,0.40); }
    50%     { box-shadow: 0 8px 30px rgba(236,72,153,0.60); }
}
@keyframes gz-grad-drift {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
}

/* ---- Panel ---------------------------------------------------------------- */
.gz-panel {
    width: 300px;
    max-width: calc(100vw - 36px);
    background: var(--gz-card);
    border: 1px solid var(--chronos-outline);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(15, 16, 32, 0.28);
    padding: 14px;
    transform-origin: bottom right;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    pointer-events: none;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.34,1.56,.64,1);
}
.gz-dock[data-open="true"] .gz-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.gz-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.gz-title {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.01em;
    background: var(--gz-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.gz-level {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: var(--gz-ink);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}

/* XP / rizz-o-meter */
.gz-xp {
    height: 8px;
    border-radius: 999px;
    background: var(--chronos-chip-bg);
    overflow: hidden;
}
.gz-xp-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--gz-grad);
    background-size: 200% 200%;
    animation: gz-grad-drift 6s ease infinite;
    transition: width 500ms cubic-bezier(.22,1,.36,1);
}

/* Daily affirmation */
.gz-affirm {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--chronos-fg-primary);
    background: color-mix(in srgb, var(--chronos-violet) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--chronos-violet) 35%, transparent);
    border-radius: 12px;
    padding: 8px 10px;
    line-height: 1.3;
}
.gz-affirm-text { flex: 1; min-width: 0; }
.gz-reroll {
    border: none; background: none; cursor: pointer;
    font-size: 15px; padding: 2px; border-radius: 8px;
    transition: transform 200ms ease;
}
.gz-reroll:hover { transform: rotate(90deg); }

/* Mood + reaction rows */
.gz-row-label { font-size: 11px; font-weight: 700; color: var(--chronos-fg-muted); text-transform: uppercase; letter-spacing: .06em; }
.gz-moods, .gz-reacts { display: flex; gap: 4px; justify-content: space-between; }
.gz-mood, .gz-react {
    flex: 1;
    border: 1px solid transparent;
    background: var(--chronos-chip-bg);
    border-radius: 12px;
    padding: 7px 0;
    font-size: 19px;
    cursor: pointer;
    transition: transform 140ms cubic-bezier(.34,1.56,.64,1), background 140ms ease, border-color 140ms ease;
}
.gz-mood:hover, .gz-react:hover { transform: translateY(-3px) scale(1.12); background: var(--chronos-hover-bg); }
.gz-mood.on { border-color: var(--chronos-violet); background: color-mix(in srgb, var(--chronos-violet) 16%, transparent); }
.gz-react:active { transform: scale(0.86); }

/* Toggle / action grid */
.gz-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.gz-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--chronos-outline);
    background: #fff;
    border-radius: 12px;
    padding: 9px 10px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--chronos-fg-primary);
    cursor: pointer;
    text-align: left;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.gz-btn .gz-btn-emoji { font-size: 16px; }
.gz-btn:hover { transform: translateY(-2px); border-color: var(--chronos-violet); }
.gz-btn:active { transform: translateY(0) scale(0.97); }
.gz-btn.on {
    border-color: transparent;
    color: #fff;
    background: var(--gz-grad);
    background-size: 200% 200%;
    animation: gz-grad-drift 6s ease infinite;
}
.gz-hint { font-size: 10.5px; color: var(--chronos-fg-muted); text-align: center; margin-top: -2px; }

/* ---- Floating emoji reactions --------------------------------------------- */
.gz-fx-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1500;
    overflow: hidden;
}
.gz-float {
    position: absolute;
    font-size: 30px;
    will-change: transform, opacity;
    animation: gz-rise 1.5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes gz-rise {
    0%   { transform: translateY(0) scale(0.4) rotate(0deg); opacity: 0; }
    18%  { opacity: 1; transform: translateY(-14vh) scale(1.15) rotate(-8deg); }
    100% { transform: translateY(-64vh) scale(0.9) rotate(12deg); opacity: 0; }
}

/* ---- Confetti (canvas driven, layer only) --------------------------------- */
.gz-confetti-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1550;
}

/* ---- Hype toast ----------------------------------------------------------- */
.gz-toast-wrap {
    position: fixed;
    left: 50%;
    top: 22px;
    transform: translateX(-50%);
    z-index: 1700;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}
.gz-toast {
    background: var(--gz-ink);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    border: 2px solid transparent;
    background-image: linear-gradient(var(--gz-ink), var(--gz-ink)), var(--gz-grad);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: gz-toast-in 380ms cubic-bezier(.34,1.56,.64,1);
    white-space: nowrap;
}
.gz-toast.out { animation: gz-toast-out 320ms ease forwards; }
@keyframes gz-toast-in  { from { opacity:0; transform: translateY(-16px) scale(.9); } to { opacity:1; transform:none; } }
@keyframes gz-toast-out { to   { opacity:0; transform: translateY(-16px) scale(.9); } }

/* ---- Cursor sparkle trail -------------------------------------------------- */
.gz-sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 1450;
    font-size: 14px;
    animation: gz-spark 720ms ease-out forwards;
    will-change: transform, opacity;
}
@keyframes gz-spark {
    0%   { transform: translate(-50%,-50%) scale(1) rotate(0deg); opacity: .95; }
    100% { transform: translate(-50%,-50%) scale(0) rotate(90deg); opacity: 0; }
}

/* ---- Aura background ------------------------------------------------------- */
.gz-aura {
    position: fixed;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40vmax 40vmax at 15% 20%, rgba(124,58,237,.35), transparent 60%),
        radial-gradient(38vmax 38vmax at 85% 25%, rgba(236,72,153,.32), transparent 60%),
        radial-gradient(45vmax 45vmax at 50% 90%, rgba(14,165,233,.30), transparent 62%);
    filter: blur(18px) saturate(1.1);
    animation: gz-aura-move 16s ease-in-out infinite;
    opacity: 0;
    transition: opacity 600ms ease;
}
.gz-aura.on { opacity: 1; }
@keyframes gz-aura-move {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(3%, -2%) scale(1.06); }
    66%     { transform: translate(-3%, 2%) scale(1.03); }
}

/* ---- Brainrot ticker ------------------------------------------------------- */
.gz-ticker {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1380;
    background: var(--gz-ink);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .04em;
    padding: 5px 0;
    overflow: hidden;
    white-space: nowrap;
}
.gz-ticker-track {
    display: inline-block;
    padding-left: 100%;
    animation: gz-ticker-run 18s linear infinite;
}
.gz-ticker-track span { margin: 0 26px; background: var(--gz-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes gz-ticker-run { from { transform: translateX(0); } to { transform: translateX(-100%); } }
body.gz-brainrot { animation: gz-hue 12s linear infinite; }
@keyframes gz-hue { 0%{filter:hue-rotate(0)} 100%{filter:hue-rotate(360deg)} }

/* ---- Focus (locked-in) timer ---------------------------------------------- */
.gz-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: rgba(10, 8, 24, 0.62);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    animation: gz-fade 200ms ease;
}
@keyframes gz-fade { from { opacity: 0; } to { opacity: 1; } }
.gz-timer {
    width: min(360px, 90vw);
    background: var(--gz-card);
    border-radius: 24px;
    padding: 26px 24px 22px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,.4);
    animation: gz-pop 300ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes gz-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.gz-timer h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.gz-timer .gz-sub { color: var(--chronos-fg-muted); font-size: 12.5px; margin-bottom: 16px; }
.gz-ring { position: relative; width: 200px; height: 200px; margin: 0 auto 16px; }
.gz-ring svg { transform: rotate(-90deg); }
.gz-ring-bg { stroke: var(--chronos-chip-bg); }
.gz-ring-fg { stroke: url(#gzGrad); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.gz-ring-time {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums;
    font-family: var(--chronos-font-mono);
}
.gz-timer-actions { display: flex; gap: 8px; justify-content: center; }
.gz-timer-btn {
    border: none; border-radius: 12px; padding: 10px 18px;
    font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
    background: var(--chronos-chip-bg); color: var(--chronos-fg-primary);
    transition: transform 120ms ease;
}
.gz-timer-btn:hover { transform: translateY(-2px); }
.gz-timer-btn.primary { background: var(--gz-grad); background-size:200% 200%; color: #fff; animation: gz-grad-drift 6s ease infinite; }
.gz-timer-preset { display:flex; gap:6px; justify-content:center; margin-bottom:14px; }
.gz-chip-sm {
    border:1px solid var(--chronos-outline); background:#fff; border-radius:999px;
    padding:4px 12px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit;
}
.gz-chip-sm.on { background: var(--chronos-violet); color:#fff; border-color: var(--chronos-violet); }

/* ---- Flex / share card ----------------------------------------------------- */
.gz-card {
    width: min(340px, 88vw);
    aspect-ratio: 9 / 16;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--gz-grad);
    background-size: 200% 200%;
    animation: gz-grad-drift 8s ease infinite, gz-pop 300ms cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 26px 22px;
}
.gz-card::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(60% 40% at 70% 15%, rgba(255,255,255,.35), transparent 60%);
    mix-blend-mode: soft-light; pointer-events: none;
}
.gz-card-kicker { font-size: 13px; font-weight: 700; opacity: .9; letter-spacing: .08em; text-transform: uppercase; }
.gz-card-big { font-size: 84px; font-weight: 900; line-height: .95; margin: 6px 0; text-shadow: 0 4px 20px rgba(0,0,0,.25); }
.gz-card-label { font-size: 20px; font-weight: 800; }
.gz-card-stats { display: flex; gap: 18px; margin-top: 8px; }
.gz-card-stat b { display: block; font-size: 26px; font-weight: 900; }
.gz-card-stat span { font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: .05em; }
.gz-card-foot { font-size: 12px; font-weight: 700; opacity: .9; }
.gz-card-actions { display: flex; gap: 8px; margin-top: 14px; }

/* ---- Aesthetic overlays (data-attr set only by genz.js) -------------------- */
#gz-aesthetic {
    position: fixed; inset: 0; z-index: 1350; pointer-events: none;
    opacity: 0; transition: opacity 400ms ease; mix-blend-mode: overlay;
}
html[data-aesthetic="vaporwave"] #gz-aesthetic {
    opacity: .5;
    background:
        linear-gradient(180deg, rgba(255,113,206,.5), rgba(1,205,254,.4)),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px);
}
html[data-aesthetic="y2k"] #gz-aesthetic {
    opacity: .45;
    background:
        radial-gradient(circle at 30% 20%, rgba(0,255,255,.4), transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(255,0,200,.4), transparent 45%),
        linear-gradient(135deg, rgba(192,192,255,.3), rgba(255,192,240,.3));
}
html[data-aesthetic="academia"] .chronos-shell { filter: sepia(.34) contrast(1.04) brightness(.98); }
html[data-aesthetic="cyber"] #gz-aesthetic {
    opacity: .5; mix-blend-mode: screen;
    background:
        repeating-linear-gradient(0deg, rgba(0,255,140,.10) 0 1px, transparent 1px 3px),
        radial-gradient(circle at 50% 0%, rgba(0,255,140,.18), transparent 55%);
}

/* ---- Konami "skibidi rain" ------------------------------------------------- */
.gz-rain {
    position: fixed; top: -8vh; z-index: 1650; pointer-events: none;
    font-size: 34px; animation: gz-fall linear forwards;
}
@keyframes gz-fall {
    to { transform: translateY(120vh) rotate(360deg); }
}

/* Small screens: shrink dock so it never eats the compose UI. */
@media (max-width: 480px) {
    .gz-fab { width: 48px; height: 48px; font-size: 22px; }
    .gz-panel { width: 260px; }
}

/* Reduced motion: keep the tools, drop the perpetual motion. */
@media (prefers-reduced-motion: reduce) {
    .gz-fab, .gz-xp-fill, .gz-btn.on, .gz-timer-btn.primary, .gz-card,
    .gz-aura, .gz-ticker-track, body.gz-brainrot { animation: none !important; }
    .gz-float, .gz-sparkle, .gz-rain, .gz-toast { animation-duration: 1ms !important; }
    .gz-aura.on { opacity: .5; }
}

/* ---- Vibe status badge on the topbar profile chip ------------------------
   The vibe check (mood picker) injects <span class="gz-status"> into the
   server-rendered .user-chip - see paintStatus() in genz.js. Styled to sit in
   the Chronos topbar (violet-tinted pill), not in the neon dock, so it reads as
   part of the profile in both the light and dark theme. */
.user-chip .gz-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    margin-left: 3px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    background: rgba(124, 58, 237, 0.14);
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.28);
    user-select: none;
    animation: gz-status-pop 0.3s cubic-bezier(0.18, 0.7, 0.25, 1);
}
@keyframes gz-status-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .user-chip .gz-status { animation: none; }
}