/* ════════════════════════════════════════════════════════════════════════════
 * SOSYAL PANEL — v3 PREMIUM LAYER (theme-agnostic).
 *
 * v3 design language ("Studio"): modern premium SaaS dashboard —
 *   · left sidebar (the team preferred it): wider, roomy, rounded nav rows,
 *     a SOLID accent pill for the active page, small-caps section labels,
 *     and the account as a mini-card docked at the bottom
 *   · sticky frosted topbar with a bold display-font page title
 *   · welcome hero banner on the dashboard (art generated via Atlas, vendored)
 *   · soft rounded cards, calm shadows, restrained motion
 *   · palettes are v2's originals (default blue + Aurora/Okyanus/Orman/…)
 *
 * RULES: no DOM/class/ID changes — this restyles the exact markup app.js
 * renders. All colours derive from the active theme/preset tokens via
 * color-mix, so light/dark and every preset keep working. --glass-* tokens
 * survive for v2-motion.css + module CSS. v2motion.js hooks kept
 * (.reveal/.is-visible/.view-enter/.ripple). Mobile drawer CSS in styles.css
 * is untouched — desktop layout overrides are scoped to (min-width: 901px).
 * Loaded AFTER styles.css. Companions: v2-motion.css, v2motion.js, v2-login.css.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Derived tokens (kept for compatibility; solid + quiet) ────────────────── */
:root {
  --glass-bg:        var(--bg-elev);
  --glass-bg-strong: var(--bg-elev);
  --glass-input:     var(--bg);
  --glass-border:    var(--border-soft);
  --glass-hi:        transparent;
  --glass-blur:      0px;
  --glow-accent:     none;
  --grad-accent:     linear-gradient(135deg, var(--accent), var(--accent-2));
  --ripple-ink:      color-mix(in srgb, var(--text) 10%, transparent);
  --hairline:        color-mix(in srgb, var(--border) 80%, transparent);
  --ring-soft:       0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  --card-shadow:     0 1px 2px rgba(0,0,0,.05), 0 8px 28px -20px rgba(0,0,0,.35);
  --card-shadow-up:  0 2px 4px rgba(0,0,0,.06), 0 16px 38px -20px rgba(0,0,0,.4);
}

/* ══ 2. SIDEBAR — wider, roomier, app-like (desktop) ═════════════════════════ */
@media (min-width: 901px) {
  .app { grid-template-columns: 262px 1fr; }
  .sidebar { padding: 18px 14px 14px; }
}
.sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--hairline);
  box-shadow: none;
}
.brand { font-size: 17px; gap: 10px; }
.brand-name { color: var(--text); letter-spacing: -.01em; }
.brand-icon {
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--grad-accent);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent),
              inset 0 1px 0 rgba(255,255,255,.2);
  filter: none;
}

/* nav rows — quiet at rest, SOLID accent pill when active */
.nav { gap: 3px; }
.nav-item {
  position: relative; border-radius: 10px; padding: 9px 12px;
  transition: color .16s, background .18s, transform .16s;
}
.nav-item .icon { transition: transform .18s; }
.nav-item:hover { background: var(--row-hover); color: var(--text); transform: none; }
.nav-item:hover .icon { transform: translateX(2px); }
.nav-item.active {
  background: var(--accent); color: #fff; font-weight: 700;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.nav-item.active::before { content: none; }
.nav-item.active .icon { color: #fff; opacity: 1; filter: none; }
:root[data-preset="aurora"] .nav-item.active { color: #fff; }

/* section labels */
.nav-sec-toggle { padding: 16px 12px 6px; letter-spacing: .09em; }
.nav-section { letter-spacing: .09em; }

/* account mini-card docked at the bottom (like the reference dashboards) */
.sidebar-footer { border-top: none; padding-top: 12px; }
.user-box {
  background: var(--bg-elev2);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 12px;
  gap: 10px;
}
#logout-btn { margin-top: 8px; border-radius: 10px; }

/* ══ 3. TOPBAR — sticky, frosted, bold title ═════════════════════════════════ */
.topbar {
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 20;
  padding: 15px 26px;
}
.topbar h2 { font-size: 20px; margin-right: auto; } /* keep title left, next to the toggle */
.view { padding: 24px 26px 44px; }
.ticker-bar { border-bottom: 1px solid var(--hairline); }

/* ══ 4. WELCOME HERO (dashboard) — gradient banner + Atlas art ═══════════════ */
/* the banner follows the ACTIVE theme's accent — every palette recolors it */
.welcome-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border-radius: 18px;
  margin-bottom: 18px;
  padding: 26px 28px;
  min-height: 190px;
  color: #fff;
  background:
    radial-gradient(720px 340px at 82% -30%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(115deg, color-mix(in srgb, var(--accent-2) 85%, #06101c) 0%, var(--accent) 78%, color-mix(in srgb, var(--accent) 78%, #fff) 130%);
  border: 1px solid color-mix(in srgb, var(--accent-2) 60%, var(--border-soft));
  box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--accent) 55%, transparent);
}
.wh-text { position: relative; z-index: 1; min-width: 0; }
.wh-hi { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: rgba(255,255,255,.93); }
.wh-hi b { color: #fff; }
.wh-sub { margin-top: 6px; font-size: 13.5px; color: rgba(255,255,255,.78); max-width: 46ch; }
/* it's an <a href> (so the scroll-wheel button opens it in a new tab) — reset the
   anchor defaults the .btn class never needed to. */
.btn.wh-cta {
  margin-top: 16px; border: none; color: var(--accent-2) !important; background: #fff;
  font-weight: 700; border-radius: 10px; padding: 9px 16px;
  display: inline-flex; align-items: center; text-decoration: none; align-self: flex-start;
}
a.quick-card { text-decoration: none; }
.btn.wh-cta:hover { background: rgba(255,255,255,.92); border-color: transparent; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.wh-cta-arrow { display: inline-block; margin-left: 7px; transition: transform .18s; }
.wh-cta:hover .wh-cta-arrow { transform: translateX(3px); }
/* transparent character cutout — grounded in the banner's bottom-right. Sized so
   her WHOLE figure (incl. head) fits inside the banner with headroom, never
   cropped; waves once when the dashboard loads. */
.wh-art {
  position: absolute; right: 30px; bottom: 0; z-index: 0;
  height: 96%; width: auto; max-width: 46%;
  object-fit: contain; object-position: right bottom;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.32));
  transform-origin: 70% bottom;
  animation: hero-wave 1.1s ease .35s 1 both;
}
@keyframes hero-wave {
  0% { transform: rotate(0deg); }
  18% { transform: rotate(-5deg); }
  38% { transform: rotate(3.5deg); }
  56% { transform: rotate(-2.5deg); }
  74% { transform: rotate(1.5deg); }
  100% { transform: rotate(0deg); }
}
.welcome-hero.no-art .wh-art { display: none; }
@media (max-width: 820px) { .wh-art { opacity: .55; right: -6px; } .wh-sub { max-width: 30ch; } }
@media (max-width: 600px) { .wh-art { display: none; } .welcome-hero { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .wh-art { animation: none; } }

/* ── 5. Panels / cards — soft, rounded, calm ─────────────────────────────────── */
.panel, .stat-card, .card,
.gnote-card, .vault-card, .entry-card, .quick-card, .member-card, .bday-panel, .shift-panel {
  background: var(--bg-elev);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}
.panel { overflow: hidden; }
.panel-head { background: transparent; border-bottom: 1px solid var(--border-soft); font-size: 14px; padding: 15px 18px; }
/* bare-header panels (<h3> directly in .panel) keep their breathing room */
.panel:has(> h3:first-child) { padding: 16px 18px; }
.panel:has(> h3:first-child) > h3 { margin-top: 0; }
.fr-controls, .fr-tpl-list { padding: 16px 18px; }
.stat-card .value { font-family: var(--font-display); font-weight: 700; }
.stat-card, .quick-card, .gnote-card, .member-card, .entry-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-card:hover, .quick-card:hover, .gnote-card:hover, .member-card:hover, .entry-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: var(--card-shadow-up);
}
.quick-card { padding: 16px 18px; font-weight: 700; }

/* ── 6. Buttons — rounded, tactile ───────────────────────────────────────────── */
.btn {
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-elev);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform .12s, border-color .18s, box-shadow .18s, background .18s, color .18s;
  position: relative; overflow: hidden;
  font-weight: 600;
}
.btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 2px 10px -6px color-mix(in srgb, var(--accent) 40%, transparent); transform: none; background: var(--row-hover); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--grad-accent); border: none; color: #fff;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 75%, transparent), inset 0 1px 0 rgba(255,255,255,.14);
  animation: none;
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent) 80%, transparent); background: var(--grad-accent); border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { border-color: var(--border); background: var(--row-hover); box-shadow: none; }
.btn-danger { background: transparent; border-color: color-mix(in srgb, var(--red) 35%, var(--border)); color: var(--red); }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); border-color: var(--red); box-shadow: none; }
/* click ripple (v2motion.js) */
.btn .ripple { position: absolute; border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  background: var(--ripple-ink); pointer-events: none; animation: v2-ripple .5s ease-out forwards; }
@keyframes v2-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* segmented controls — pill group, solid accent active */
.seg { border-radius: 999px; background: var(--bg-elev); }
.seg button { transition: background .16s, color .16s; }
.seg button.active { background: var(--accent); color: #fff; }
.lang-toggle { border-radius: 999px; }
.lang-toggle button.active { background: var(--accent); color: #fff; }

/* ── 7. Inputs — solid wells with a calm focus ring ──────────────────────────── */
input, select, textarea, .re-surface {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input:focus, select:focus, textarea:focus, .re-surface:focus-within {
  outline: none; border-color: var(--accent);
  box-shadow: var(--ring-soft);
  background: var(--bg);
}
::placeholder { color: var(--muted); }

/* ── 8. Floating menus / dropdowns — solid, elevated ─────────────────────────── */
.cmb-panel, .theme-presets-pop, .notify-pop, .cmb-menu, .dropdown-menu, .menu-pop {
  background: var(--bg-elev) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--border) !important;
  border-radius: 14px;
  box-shadow: 0 4px 8px rgba(0,0,0,.06), 0 24px 60px -24px rgba(0,0,0,.4);
}
.cmb-opt.active, .cmb-opt:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ── 9. Tables ───────────────────────────────────────────────────────────────── */
thead th { background: transparent; border-bottom: 1px solid var(--border); letter-spacing: .06em; font-size: 11.5px; }
tbody tr { transition: background .14s; }
tbody tr:hover { background: var(--row-hover); }

/* ── 10. Badges / chips ──────────────────────────────────────────────────────── */
.badge { -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 999px; }

/* ── 11. Modals + toasts ─────────────────────────────────────────────────────── */
.modal-overlay { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: v2-fade .18s ease; }
.modal {
  background: var(--bg-elev) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--border) !important;
  border-radius: 18px;
  box-shadow: 0 8px 16px rgba(0,0,0,.08), 0 40px 90px -30px rgba(0,0,0,.5);
  animation: v2-modal-in .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes v2-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes v2-fade { from { opacity: 0; } to { opacity: 1; } }
.toast {
  background: var(--bg-elev) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--border) !important;
  border-radius: 13px;
  box-shadow: 0 4px 8px rgba(0,0,0,.06), 0 20px 50px -20px rgba(0,0,0,.45);
  animation: v2-toast-in .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes v2-toast-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ── 12. Scroll-reveal + view transition (hooks toggled by v2motion.js) ──────── */
.view.view-enter { animation: v2-view-in .4s cubic-bezier(.2,.7,.2,1); }
@keyframes v2-view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#view .reveal { opacity: 0; transform: translateY(12px); }
#view .reveal.is-visible { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }

/* ── 13. "Aurora Işıltı" preset — v2's original palette + animated backdrop ──── */
:root[data-preset="aurora"] {
  --bg: #080b16; --bg-elev: #141a2e; --bg-elev2: #1b2340; --border: #2b3556; --border-soft: #212a45;
  --text: #eaf0ff; --text-dim: #a6b2d6; --muted: #7b88ad;
  --accent: #6d8bff; --accent-2: #8b5cf6; --green: #34d399; --red: #fb7185; --amber: #fbbf24; --purple: #a78bfa;
  --shadow: 0 20px 55px -20px rgba(2, 5, 18, 0.7); --bg-grad: #141d3a; --row-hover: #1b2340;
  --bar-bg: rgba(12, 16, 32, 0.72); --overlay: rgba(4, 7, 20, 0.62); --badge-ring: rgba(255, 255, 255, 0.07);
  --aurora-1: rgba(99, 102, 241, 0.55); --aurora-2: rgba(45, 212, 191, 0.40);
  --aurora-3: rgba(217, 70, 239, 0.42); --aurora-4: rgba(56, 130, 246, 0.42);
}
/* animated aurora blobs — ONLY on the Aurora preset */
:root[data-preset="aurora"] body { background: #080b16; }
:root[data-preset="aurora"] body::before,
:root[data-preset="aurora"] body::after {
  content: ""; position: fixed; inset: -30vmax; z-index: -2; pointer-events: none; will-change: transform;
}
:root[data-preset="aurora"] body::before {
  background:
    radial-gradient(38vmax 38vmax at 18% 22%, var(--aurora-1), transparent 60%),
    radial-gradient(34vmax 34vmax at 82% 18%, var(--aurora-4), transparent 60%),
    radial-gradient(40vmax 40vmax at 72% 82%, var(--aurora-3), transparent 62%),
    radial-gradient(32vmax 32vmax at 26% 88%, var(--aurora-2), transparent 60%);
  filter: blur(60px) saturate(125%); animation: v2-aurora 26s ease-in-out infinite alternate;
}
:root[data-preset="aurora"] body::after {
  background:
    radial-gradient(30vmax 30vmax at 60% 30%, rgba(139, 92, 246, 0.30), transparent 60%),
    radial-gradient(28vmax 28vmax at 30% 60%, rgba(56, 130, 246, 0.28), transparent 60%);
  filter: blur(80px); opacity: .9; animation: v2-aurora2 34s ease-in-out infinite alternate;
}
:root[data-preset="aurora"] .app::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(4, 7, 20, 0.5) 100%);
}
@keyframes v2-aurora {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3vmax,-2vmax,0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-2vmax,3vmax,0) rotate(-6deg) scale(1.04); }
}
@keyframes v2-aurora2 { 0% { transform: translate3d(0,0,0) rotate(0deg); } 100% { transform: translate3d(-4vmax,2vmax,0) rotate(12deg); } }
/* aurora keeps translucent surfaces so the backdrop shines through */
:root[data-preset="aurora"] .sidebar,
:root[data-preset="aurora"] .panel, :root[data-preset="aurora"] .stat-card,
:root[data-preset="aurora"] .quick-card, :root[data-preset="aurora"] .entry-card,
:root[data-preset="aurora"] .shift-panel, :root[data-preset="aurora"] .bday-panel {
  background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%);
}

/* ── 14. Page art (Peter's transparent PNG cutouts in /img) ──────────────────── */
/* Sticker Yap drop zone — the sticker girl leans against the right side of the
   existing drop area; transparent PNG, so she sits on any theme's panel colour */
.st-drop { position: relative; overflow: hidden; isolation: isolate; }
.st-drop::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/img/sticker-drop.png') right 16px bottom / auto 88% no-repeat;
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 26%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 26%, #000 52%);
}
.st-drop > * { position: relative; z-index: 1; }

/* Per-page mascot — a fixed element pinned to the bottom-right VIEWPORT corner
   so she's always in sight. pointer-events:none → she NEVER blocks a click; the
   hover-lift and click greeting are driven by cursor position in app.js. She
   peeks up once when a page loads, then stays still (no idle bobbing). The
   background-image (not <img>) can't be dragged or saved. */
#corner-mascot {
  position: fixed; right: -6px; bottom: 0; z-index: 3;
  width: 178px; height: 212px; pointer-events: none;
  background: var(--m-art, none) no-repeat right bottom / contain;
  opacity: .84; transform-origin: 78% 92%;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
  /* fade the top + left edges so she reads as a corner watermark, never a hard box */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%), linear-gradient(90deg, transparent 0, #000 30%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(180deg, transparent 0, #000 30%), linear-gradient(90deg, transparent 0, #000 30%);
}
#corner-mascot.hidden { display: none; }
/* fill-mode is `backwards`, not `both`: a finished animation keeps overriding
   plain declarations, so `both` locked transform at `none` and killed the .hot
   lift and the .away duck. The end state equals the base rule anyway. */
#corner-mascot.peek { animation: mascot-peek .55s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes mascot-peek { from { transform: translateY(66px); opacity: 0; } to { transform: none; opacity: .84; } }
/* hover-react (class set by the cursor-position watcher) — gentle lift + tilt */
#corner-mascot.hot { opacity: 1; transform: translateY(-7px) scale(1.05) rotate(-2.5deg); }
/* clicked (→ chat opens): she ducks down off the bottom edge so she never sits
   behind the chat window. Comes back up the same way when the chat closes.
   Declared after .hot so it wins while both classes are briefly present. */
#corner-mascot.away { opacity: 0; transform: translateY(96px) scale(.97); }

/* palette-popover "Köşe maskotu" show/hide toggle row */
.theme-presets-pop .tpp-sep { height: 1px; margin: 6px 8px; background: var(--border-soft); }
.tpp-toggle { cursor: pointer; }
.tpp-toggle .tpp-name { flex: 1; }
.tpp-switch {
  flex: 0 0 auto; width: 36px; height: 20px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  position: relative; transition: background .18s ease;
}
.tpp-switch.on { background: var(--accent); }
.tpp-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.tpp-switch.on .tpp-knob { transform: translateX(16px); }

/* clicking the corner mascot opens the Sosyal Asistan chat (app.js). She stays
   pointer-events:none so clicks still reach the content underneath — the hand
   cursor is therefore set on <body> by the cursor-position watcher, not here. */

/* on narrow screens the corner mascot would crowd the content — hide it */
@media (max-width: 1200px) { #corner-mascot { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  #corner-mascot.peek { animation: none; }
  #corner-mascot.hot { transform: scale(1.04); }
}

/* ── 15. Collapsible sidebar (desktop) — clean topbar toggle → icon rail ─────── */
/* The nav's scrollbar stays INVISIBLE until the pointer is over the sidebar
   (it was always showing on the collapsed rail and looked messy). Transparent
   thumb — not display:none — so the track keeps its width and nothing shifts.
   Firefox gets the same via scrollbar-color. */
.sidebar .nav { scrollbar-color: transparent transparent; }
.sidebar .nav::-webkit-scrollbar-thumb { background: transparent; border: none; }
.sidebar:hover .nav { scrollbar-color: var(--border) transparent; }
.sidebar:hover .nav::-webkit-scrollbar-thumb {
  background: var(--border); border: 2px solid transparent; background-clip: content-box;
}
.sidebar:hover .nav::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: content-box; }

.sb-collapse { display: none; } /* hidden by default; desktop media query shows it */
@media (min-width: 901px) {
  /* a tidy icon button that lives at the far left of the topbar, left of the
     page title — matches the bell/theme buttons, no floating dot on the edge */
  .sb-collapse {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto; margin-right: 12px; padding: 0;
    border-radius: 10px; background: transparent; border: 1px solid transparent;
    color: var(--text-dim); cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .sb-collapse:hover { background: var(--row-hover); color: var(--text); border-color: var(--border-soft); }
  .app.nav-collapsed .sb-collapse { color: var(--accent); }

  .app.nav-collapsed { grid-template-columns: 78px 1fr; }
  .app.nav-collapsed .sidebar { padding-left: 11px; padding-right: 11px; }
  .app.nav-collapsed .brand { justify-content: center; }
  .app.nav-collapsed .brand-name { display: none; }
  .app.nav-collapsed .sb-collapse svg { transform: rotate(180deg); }
  .app.nav-collapsed .nav-item { justify-content: center; padding: 11px 0; }
  .app.nav-collapsed .nav-item span { display: none; }
  .app.nav-collapsed .nav-item .icon { width: 20px; height: 20px; }
  /* section headers become slim dividers between icon groups */
  .app.nav-collapsed .nav-sec-toggle {
    pointer-events: none; padding: 8px 0 0; margin: 6px 10px 2px;
    border-top: 1px solid var(--border-soft);
  }
  .app.nav-collapsed .nav-sec-toggle > span { display: none; }
  /* footer: drop the user text + lang toggle; logout becomes an icon-only button */
  .app.nav-collapsed .user-box { display: none; }
  .app.nav-collapsed #logout-btn { font-size: 0; padding: 10px 0; }
  .app.nav-collapsed #logout-btn::before {
    content: ''; width: 18px; height: 18px; display: inline-block; background: currentColor;
    -webkit-mask: var(--logout-ic) center / contain no-repeat; mask: var(--logout-ic) center / contain no-repeat;
  }
}
:root {
  --logout-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

/* ── 15b. Sosyal Asistan — chat panel (token-driven, themes with the panel) ──── */
#assistant-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: min(384px, calc(100vw - 28px)); height: min(560px, calc(100vh - 90px));
  display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 8px 16px rgba(0,0,0,.1), 0 40px 90px -30px rgba(0,0,0,.55);
}
/* Open animation. It is bound to .as-opening (set by JS only when the panel is
   actually opened) instead of the element itself, so pressing Büyüt/Küçült uses
   the width/height transition rather than replaying an entry animation.
   The enlarged panel needs its OWN keyframe: it is centred with
   translate(-50%,-50%), and a keyframe ending in `transform: none` would fight
   that centring — which is why the big window used to pop in without sliding. */
#assistant-panel.as-opening:not(.expanded) { animation: as-open .26s cubic-bezier(.2,.8,.2,1); }
#assistant-panel.as-opening.expanded { animation: as-open-big .28s cubic-bezier(.2,.8,.2,1); }
@keyframes as-open {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes as-open-big {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 22px)) scale(.985); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #assistant-panel.as-opening:not(.expanded),
  #assistant-panel.as-opening.expanded { animation: none; }
}
#assistant-panel.hidden { display: none; }
/* ENLARGED (serbest mode): a big centered window for long chats / prompt work.
   Overrides the corner anchoring; the width/height clamps keep it inside any
   screen, so the same rule works on a laptop and an ultrawide. */
#assistant-panel {
  transition: width .24s cubic-bezier(.2,.8,.2,1), height .24s cubic-bezier(.2,.8,.2,1),
              right .24s cubic-bezier(.2,.8,.2,1), bottom .24s cubic-bezier(.2,.8,.2,1);
}
#assistant-panel.expanded {
  right: auto; bottom: auto; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(1040px, 94vw);
  height: min(880px, 88vh);
  box-shadow: 0 20px 40px rgba(0,0,0,.2), 0 60px 140px -40px rgba(0,0,0,.7);
}
#assistant-panel.expanded .as-msgs { padding: 20px 26px; gap: 10px; }
#assistant-panel.expanded .as-msg { max-width: 74%; font-size: 14px; }
#assistant-panel.expanded .as-form { padding: 14px 18px; }
#assistant-panel.expanded .as-msg-img { max-width: 260px; max-height: 200px; }
/* inline action chips under an assistant bubble (Yarat handoff offer) */
.as-actions { display: flex; gap: 8px; align-self: flex-start; margin: 2px 0 4px 6px; }
/* the size button flips its icon depending on state */
#as-size-btn .as-ic-shrink { display: none; }
#as-size-btn.on .as-ic-shrink { display: block; }
#as-size-btn.on .as-ic-grow { display: none; }
@media (prefers-reduced-motion: reduce) { #assistant-panel { transition: none; } }
.as-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
#as-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  /* FIXED close-up face photo (160px, downscaled → crisp at this small size);
     the chat-header icon never changes, only the big welcome-hero swaps poses. */
  background: var(--bg-elev2) url('/img/assistant-face.png') center / cover no-repeat;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.as-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
/* never let the name/status wrap onto a second line when serbest mode adds its
   extra header buttons — they stay on one line and ellipsize if space is tight */
.as-name { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-status { font-size: 11.5px; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-head .as-hbtn { flex: 0 0 auto; }
/* In the compact card, serbest mode's extra buttons leave no room for the full
   name — so the pill goes icon-only there (mode is still obvious from the amber
   pill + the "Serbest sohbet · AI" status line). The label returns when enlarged. */
#assistant-panel.free-mode:not(.expanded) .as-free-lbl { display: none; }
.as-hbtn { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 15px;
  padding: 6px; border-radius: 8px; display: inline-flex; }
.as-hbtn:hover { color: var(--text); background: var(--row-hover); }
/* "Serbest Sohbet" toggle in the chat header (paid AI mode) */
.as-free-btn { gap: 5px; padding: 5px 9px !important; border-radius: 999px; border: 1px solid var(--border);
  font: inherit; font-size: 11.5px; font-weight: 700; align-items: center; }
.as-free-btn .as-free-lbl { white-space: nowrap; }
.as-free-btn:hover { color: var(--amber); border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.as-free-btn.on { color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--amber), color-mix(in srgb, var(--amber) 60%, var(--red)));
  box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--amber) 70%, transparent); }
/* while the paid mode is on, tint the panel edge so it's unmistakable */
#assistant-panel.free-mode { border-color: color-mix(in srgb, var(--amber) 50%, var(--border)); }
#assistant-panel.free-mode .as-head { background: color-mix(in srgb, var(--amber) 8%, transparent); }
#assistant-panel.free-mode .as-status { color: var(--amber); }
/* clickable link chips inside messages (keeps long URLs tidy) */
.as-link { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 1px 7px; margin: 1px 0;
  border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent) !important; text-decoration: none; font-weight: 600; word-break: break-all; }
.as-link:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); text-decoration: underline; }
.as-msg.me .as-link { background: rgba(255,255,255,.22); color: #fff !important; }
.as-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.as-msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; word-break: break-word; }
.as-msg.her { align-self: flex-start; background: var(--bg-elev2); border: 1px solid var(--border-soft); border-bottom-left-radius: 5px; }
.as-msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.as-msg.me b { color: #fff; }
.as-typing { display: inline-flex; gap: 4px; align-items: center; min-height: 18px; }
.as-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: as-blink 1.2s ease-in-out infinite; }
.as-dot:nth-child(2) { animation-delay: .18s; } .as-dot:nth-child(3) { animation-delay: .36s; }
@keyframes as-blink { 0%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* image attachment (serbest mode): preview bar above the input + in-message thumb */
.as-attach-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-top: 1px solid var(--border-soft); background: color-mix(in srgb, var(--amber) 8%, transparent); }
.as-attach-bar.hidden { display: none; }
.as-attach-bar img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; }
.as-attach-txt { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
#as-attach-x { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 6px; }
#as-attach-x:hover { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.as-attach { flex: 0 0 auto; align-self: center; padding: 7px !important; border-radius: 9px; }
.as-attach:hover { color: var(--accent); background: var(--row-hover); }
.as-msg-img { display: block; max-width: 160px; max-height: 120px; border-radius: 9px; margin-top: 6px; object-fit: cover; }
#assistant-panel.drop-hover { outline: 2px dashed var(--amber); outline-offset: -4px; }
.as-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-soft); }
.as-form input { flex: 1; }
.as-send { flex: 0 0 auto; padding: 9px 13px; }
/* the GIRL in the hero (not the whole banner) is the chat launcher */
.wh-art { pointer-events: auto !important; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #as-avatar.pulse, .as-dot { animation: none; } }

/* ── 15c. Winter / Christmas theme (html.xmas — auto in season, toggle in popover) */
#xmas-snow {
  position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: .75;
  --snowc: rgba(255,255,255,.85); --snowc2: rgba(255,255,255,.55);
  background-image:
    radial-gradient(2.2px 2.2px at 22px 34px, var(--snowc), transparent 55%),
    radial-gradient(1.6px 1.6px at 84px 128px, var(--snowc2), transparent 55%),
    radial-gradient(2.6px 2.6px at 156px 64px, var(--snowc), transparent 55%),
    radial-gradient(1.4px 1.4px at 218px 168px, var(--snowc2), transparent 55%),
    radial-gradient(1.9px 1.9px at 254px 234px, var(--snowc), transparent 55%);
  background-size: 280px 280px;
  animation: xmas-fall 13s linear infinite;
  will-change: background-position;
}
:root[data-theme="light"] #xmas-snow { --snowc: rgba(90,125,175,.55); --snowc2: rgba(90,125,175,.32); }
@keyframes xmas-fall { from { background-position: 0 -280px; } to { background-position: 46px 280px; } }
html.xmas .brand-name::after { content: ' ❄'; font-size: 13px; }
html.xmas .wh-hi::after { content: ' 🎄'; }
html.xmas .login-screen .login-card h1::after { content: ' 🎄'; font-size: 20px; }
/* ✨ Christmas string lights — a garland of glowing bulbs hanging under the
   topbar. Two alternating color sets blink softly (GPU-cheap: opacity only). */
html.xmas .topbar { overflow: visible; }
html.xmas .topbar::before, html.xmas .topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 16px;
  pointer-events: none; z-index: 21;
  background-repeat: repeat-x; background-size: 112px 16px;
}
/* set A: red + gold bulbs (slightly lower, like a drooping wire) */
html.xmas .topbar::before {
  background-image:
    radial-gradient(4px 5px at 14px 10px, #ff5a52 40%, rgba(255,90,82,.35) 60%, transparent 72%),
    radial-gradient(4px 5px at 70px 12px, #ffcf4d 40%, rgba(255,207,77,.35) 60%, transparent 72%);
  filter: drop-shadow(0 0 4px rgba(255,120,90,.8));
  animation: xmas-blink-a 2.4s ease-in-out infinite;
}
/* set B: green + blue bulbs (offset positions + counter-phase blink) */
html.xmas .topbar::after {
  background-image:
    radial-gradient(4px 5px at 42px 8px, #4ade80 40%, rgba(74,222,128,.35) 60%, transparent 72%),
    radial-gradient(4px 5px at 98px 11px, #60a5fa 40%, rgba(96,165,250,.35) 60%, transparent 72%);
  filter: drop-shadow(0 0 4px rgba(120,200,255,.8));
  animation: xmas-blink-b 2.4s ease-in-out infinite;
}
@keyframes xmas-blink-a { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes xmas-blink-b { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
/* a matching mini garland across the top of the welcome banner */
html.xmas .welcome-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: 1;
  pointer-events: none; background-repeat: repeat-x; background-size: 96px 14px;
  background-image:
    radial-gradient(3.5px 4.5px at 12px 8px, #ff5a52 45%, transparent 72%),
    radial-gradient(3.5px 4.5px at 36px 5px, #ffcf4d 45%, transparent 72%),
    radial-gradient(3.5px 4.5px at 60px 9px, #4ade80 45%, transparent 72%),
    radial-gradient(3.5px 4.5px at 84px 6px, #60a5fa 45%, transparent 72%);
  filter: drop-shadow(0 0 3px rgba(255,255,255,.55));
  animation: xmas-blink-a 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  html.xmas .topbar::before, html.xmas .topbar::after, html.xmas .welcome-hero::before { animation: none; }
}
/* the hero banner turns icy winter blue in season, on every palette */
html.xmas .welcome-hero {
  background:
    radial-gradient(720px 340px at 82% -30%, rgba(255,255,255,.2), transparent 60%),
    linear-gradient(115deg, #0b2440 0%, #16558f 62%, #4a8ecf 100%);
  border-color: #2a5b8f;
  box-shadow: 0 14px 34px -16px rgba(35,110,190,.55);
}
@media (max-width: 900px) { #xmas-snow { display: none; } }
@media (prefers-reduced-motion: reduce) { #xmas-snow { animation: none; } }

/* ── 15. Focus + motion safety ───────────────────────────────────────────────── */
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  :root[data-preset="aurora"] body::before, :root[data-preset="aurora"] body::after { animation: none !important; }
  #view .reveal { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .06s !important; }
}

/* ── 16. Profile post-stats (donut + 7-day strip + account chips) ────────────── */
.pf-stats { padding: 18px 20px 20px; display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.pf-chips { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.pf-chip {
  min-width: 108px; padding: 12px 16px; border-radius: 14px;
  background: var(--row-hover); border: 1px solid var(--border-soft); text-align: center;
}
.pf-chip-n { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--accent); }
.pf-chip-l { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.pf-pie { display: flex; gap: 18px; align-items: center; flex: 0 0 auto; }
.pf-donut circle { stroke-linecap: butt; }
.pf-legend { min-width: 190px; }
.pf-leg-row { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 13.5px; }
.pf-leg-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.pf-leg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-days { flex: 1 1 220px; min-width: 210px; }
.pf-bars { display: flex; gap: 10px; align-items: flex-end; }
.pf-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; max-width: 46px; }
.pf-bar { width: 100%; max-width: 26px; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent)); }
.pf-bar-n { font-size: 11px; font-weight: 700; color: var(--text-dim); min-height: 14px; }
.pf-bar-d { font-size: 11px; color: var(--text-dim); }
.pf-accounts { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-accounts > .muted-sm { flex: 1 1 100%; }
.pf-acct {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 13px;
  border-radius: 999px; background: var(--row-hover); border: 1px solid var(--border-soft);
}
.pf-acct b { color: var(--accent); }
@media (max-width: 700px) { .pf-chips { flex-direction: row; } .pf-pie { flex-wrap: wrap; } }

/* ── 17. "Dünü kopyala" — quiet dashed helper under today's + Add ────────────── */
.day-copy-yday {
  width: 100%; margin-top: 6px; border-style: dashed; font-weight: 600;
  color: var(--text-dim); background: transparent;
}
.day-copy-yday:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }

/* ── 18. İlk giriş turu — spotlight + step card ───────────────────────────────── */
#tour-root { position: fixed; inset: 0; z-index: 6000; }
/* the "hole": transparent window whose giant shadow dims everything else */
.tour-hole {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(5, 8, 14, .72);
  outline: 2px solid color-mix(in srgb, var(--accent) 80%, #fff);
  transition: left .3s cubic-bezier(.2,.8,.2,1), top .3s cubic-bezier(.2,.8,.2,1),
              width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1);
}
.tour-card {
  position: fixed; z-index: 1;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-soft); border-radius: 16px;
  padding: 16px 18px 14px; box-shadow: 0 18px 50px -12px rgba(0,0,0,.6);
  transition: left .3s cubic-bezier(.2,.8,.2,1), top .3s cubic-bezier(.2,.8,.2,1);
  animation: tour-pop .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes tour-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.tour-step-no { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--accent); text-transform: uppercase; }
.tour-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; margin: 6px 0 4px; }
.tour-text { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.tour-dots { display: flex; gap: 6px; margin: 12px 0 10px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--text) 20%, transparent); transition: background .2s, transform .2s; }
.tour-dots i.on { background: var(--accent); transform: scale(1.25); }
.tour-btns { display: flex; gap: 8px; align-items: center; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card { transition: none; animation: none; } }

/* Ekip Planı per-person "Dünü kopyala" — same quiet dashed look as the board's */
.tp-copy-yday { border-style: dashed; color: var(--text-dim); background: transparent; margin-top: 6px; }
.tp-copy-yday:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }