/* ---------- SKARVEX system — silver/stone, gold ONLY on brain ---------- */
:root, [data-theme="dark"]{
  --bg-0:#070708;
  --bg-1:#0d0d0f;
  --bg-2:#15151a;
  --bg-3:#1c1c22;
  --line:rgba(255,255,255,0.07);
  --line-soft:rgba(255,255,255,0.04);
  --line-strong:rgba(255,255,255,0.14);
  --line-edge:rgba(255,255,255,0.22);

  /* silver gradient for chrome */
  --silver-1:#e8e8ea;
  --silver-2:#bcbcc0;
  --silver-3:#85858c;
  --silver-shadow:rgba(255,255,255,0.6);

  /* gold reserved for brain icon only */
  --gold:oklch(0.78 0.09 78);
  --gold-glow:oklch(0.78 0.13 78 / 0.55);

  --text-0:#f6f6f8;
  --text-1:#e2e2e8;
  --text-2:#b2b2bc;
  --text-3:#8a8a94;
  --danger:oklch(0.7 0.13 28);

  /* surface alphas */
  --panel-bg-1:rgba(36,38,46,0.42);
  --panel-bg-2:rgba(12,12,16,0.45);
  --panel-border:rgba(255,255,255,0.08);
  --panel-rim:rgba(255,255,255,0.08);
  --grain-tint:0.92, 0.92, 0.96; /* light grain on dark */
  --grain-alpha:0.05;

  --scroll-thumb:rgba(180,170,200,0.20);
  --scroll-thumb-hover:rgba(200,180,230,0.42);
  --scroll-track:transparent;

  --stage-radial-1:rgba(180,180,200,0.10);
  --stage-radial-2:rgba(180,140,90,0.07);
  --stage-radial-3:rgba(80,100,130,0.10);
  --stage-base-1:#08080b;
  --stage-base-2:#030305;
  --stage-base-3:#08080a;
  --stage-vignette:rgba(0,0,0,0.55);
  --star-color:255,255,255;

  --topbar-bg-1:rgba(10,10,12,0.92);
  --topbar-bg-2:rgba(10,10,12,0.72);
  --chip-bg:rgba(18,18,20,0.75);
  --inset-bg:rgba(0,0,0,0.30);
  --hover-bg:rgba(255,255,255,0.05);
  --active-bg:rgba(255,255,255,0.055);
  --note-hover-bg:rgba(255,255,255,0.025);
  --feature-icon-bg:rgba(255,255,255,0.04);

  --search-bg:rgba(0,0,0,0.30);
  --chat-msg-bg:rgba(255,255,255,0.045);
  --chat-msg-border:rgba(255,255,255,0.06);
  --chat-user-bg:rgba(255,255,255,0.10);

  --highlight-bg-1:rgba(90,130,180,0.28);
  --highlight-bg-2:rgba(60,100,150,0.22);
  --highlight-border:rgba(120,160,210,0.25);
  --highlight-text:#dfe7f2;

  --font-display:"Archivo Black", "Inter", system-ui, sans-serif;
  --font-ui:"Inter", system-ui, -apple-system, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius-s:8px;
  --radius-m:14px;
  --radius-l:20px;
}

/* ---------- light theme: bright cloudy sky ---------- */
[data-theme="light"]{
  --bg-0:#dde6f1;
  --bg-1:#e6edf5;
  --bg-2:#d4ddea;
  --bg-3:#c4cfdf;
  --line:rgba(20,40,80,0.10);
  --line-soft:rgba(20,40,80,0.05);
  --line-strong:rgba(20,40,80,0.18);
  --line-edge:rgba(20,40,80,0.28);

  --text-0:#0e1a2e;
  --text-1:#3a4661;
  --text-2:#6a7388;
  --text-3:#9aa3b6;

  --panel-bg-1:rgba(255,255,255,0.62);
  --panel-bg-2:rgba(228,236,246,0.58);
  --panel-border:rgba(255,255,255,0.85);
  --panel-rim:rgba(255,255,255,0.95);
  --grain-tint:0.2, 0.25, 0.40;
  --grain-alpha:0.03;

  --scroll-thumb:rgba(60,80,130,0.28);
  --scroll-thumb-hover:rgba(50,70,120,0.52);
  --scroll-track:transparent;

  /* cloudy sky — three soft cloud bloom layers */
  --stage-radial-1:rgba(255,255,255,0.85);
  --stage-radial-2:rgba(255,245,225,0.55);
  --stage-radial-3:rgba(255,255,255,0.70);
  --stage-base-1:#b8c9de;
  --stage-base-2:#dde6f1;
  --stage-base-3:#c8d4e4;
  --stage-vignette:rgba(60,80,120,0.20);
  --star-color:255,255,255;

  --topbar-bg-1:rgba(255,255,255,0.78);
  --topbar-bg-2:rgba(255,255,255,0.55);
  --chip-bg:rgba(255,255,255,0.70);
  --inset-bg:rgba(255,255,255,0.55);
  --hover-bg:rgba(20,40,80,0.05);
  --active-bg:rgba(20,40,80,0.07);
  --note-hover-bg:rgba(20,40,80,0.03);
  --feature-icon-bg:rgba(255,255,255,0.55);

  --search-bg:rgba(255,255,255,0.60);
  --chat-msg-bg:rgba(255,255,255,0.55);
  --chat-msg-border:rgba(20,40,80,0.08);
  --chat-user-bg:rgba(20,40,80,0.07);

  --highlight-bg-1:rgba(70,110,180,0.16);
  --highlight-bg-2:rgba(50,90,160,0.12);
  --highlight-border:rgba(70,110,180,0.30);
  --highlight-text:#0a2050;

  --gold:oklch(0.65 0.11 70);
  --gold-glow:oklch(0.78 0.13 78 / 0.35);
}

/* light-mode clouds layer */
[data-theme="light"] .stage::before{
  opacity:0.5;
  mix-blend-mode:screen;
  background-image:
    radial-gradient(closest-side at 20% 35%, rgba(255,255,255,0.85), transparent 70%),
    radial-gradient(closest-side at 75% 25%, rgba(255,255,255,0.75), transparent 70%),
    radial-gradient(closest-side at 50% 70%, rgba(255,255,255,0.80), transparent 75%),
    radial-gradient(closest-side at 85% 80%, rgba(255,255,255,0.65), transparent 70%),
    radial-gradient(closest-side at 10% 80%, rgba(255,255,255,0.70), transparent 70%),
    radial-gradient(closest-side at 60% 50%, rgba(255,245,225,0.45), transparent 75%),
    radial-gradient(closest-side at 30% 60%, rgba(255,255,255,0.55), transparent 70%);
  background-size:
    52% 38%,
    44% 30%,
    50% 36%,
    36% 28%,
    40% 30%,
    60% 42%,
    34% 26%;
  background-repeat:no-repeat;
  filter:blur(2px);
}

[data-theme="light"] .ambient .orb{
  opacity:0.55;
  mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,255,255,0.85), transparent 60%) !important;
}

/* ========================================================================
   LIGHT-MODE QUALITY PASS — panel shadows, depth, contrast
   ======================================================================== */
[data-theme="light"] .panel{
  /* white frosted glass with cool cast */
  background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(244,248,254,0.78));
  border:1px solid rgba(60,90,140,0.10);
  /* layered cooler shadow stack — adds real depth against the cloudy sky */
  box-shadow:
    0 40px 80px -28px rgba(40,60,110,0.32),
    0 20px 40px -16px rgba(40,60,110,0.20),
    0 8px 16px -8px  rgba(40,60,110,0.16),
    0 0 0 1px rgba(255,255,255,0.55) inset,
    0 1px 0 rgba(255,255,255,0.95) inset;
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
}
[data-theme="light"] .panel::before{ opacity:0.04; }

/* Stitch-theme light-mode rules live in themes/stitch/sovereign-stitch.css
   (R5 — base stylesheet stays theme-agnostic). */

/* Topbar + Rail get cleaner light shadows too */
[data-theme="light"] .topbar{
  background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(244,248,254,0.70));
  box-shadow:
    0 1px 0 rgba(60,90,140,0.10),
    0 8px 24px -12px rgba(40,60,110,0.18);
}

[data-theme="light"] .chat-hero::before{
  display:none;
}

/* Rail metallic pill — softer outline in light mode so it doesn't draw a hard
   1px dark ring on the cloud-sky background. */
[data-theme="light"] .rail-inner{
  box-shadow:
    0 0 0 1px rgba(60,80,130,0.18),
    0 12px 30px rgba(40,60,110,0.22),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(60,80,130,0.10);
}
/* And kill the residual dark frame around the workspace caused by the
   default-dark .stage colour shining through cracks where backdrops fall short */
[data-theme="light"] .stage{
  background:linear-gradient(180deg, #dde6f1 0%, #c8d4e4 100%);
}

/* Documents — light-mode row boxes + new-doc button */
[data-theme="light"] .docs-item{
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(60,90,140,0.14);
  box-shadow:
    0 4px 12px -4px rgba(40,60,110,0.16),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
[data-theme="light"] .docs-item:hover{
  background:rgba(255,255,255,0.92);
  border-color:rgba(60,90,140,0.28);
}
[data-theme="light"] .docs-ext{
  background:linear-gradient(135deg, #e0e2e6 0%, #b8babf 50%, #8a8d94 100%);
  color:#2a2a2e;
  border:1px solid rgba(60,80,130,0.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.12);
}
[data-theme="light"] .docs-ext[data-ext="md"]{
  background:linear-gradient(135deg, #c8d4ea 0%, #92a4c4 50%, #6a7c9a 100%);
  color:#1a2840;
}
[data-theme="light"] .docs-ext[data-ext="txt"]{
  background:linear-gradient(135deg, #e0e2e6 0%, #b8babf 50%, #8a8d94 100%);
  color:#2a2a2e;
}
[data-theme="light"] .docs-title{ color:#1a1a1c; }
/* .docs-new-btn is theme-agnostic — silver spec already set in base rule */

/* Image lightbox — light backdrop in light mode (was rgba(0,0,0,0.82) dark) */
[data-theme="light"] .vault-lightbox{
  background:rgba(240,244,250,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
[data-theme="light"] .vault-lightbox img{
  box-shadow:0 30px 80px -15px rgba(40,60,110,0.45);
}
[data-theme="light"] .vault-lightbox-close{
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(60,80,130,0.18);
  color:#1a1a1c;
}
[data-theme="light"] .vault-lightbox-close:hover{ background:rgba(255,255,255,0.95); }
[data-theme="light"] .lightbox-nav{
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(60,80,130,0.18);
  color:#1a1a1c;
}
[data-theme="light"] .lightbox-nav:hover{ background:rgba(255,255,255,0.95); }

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-0);
  color:var(--text-0);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .4s ease, color .4s ease;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea{font:inherit;color:inherit}
::selection{background:rgba(255,255,255,0.18);color:var(--text-0)}

/* ---------- stage / shared chrome ---------- */
.stage{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  isolation:isolate;
  background:#04040a;
  transition:background .4s ease;
}

/* base for every background variant */
.bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.bg-fill{position:absolute;inset:0}
.bg-svg{position:absolute;inset:0;width:100%;height:100%}
.bg-vignette{
  position:absolute;inset:0;
  background:radial-gradient(70% 70% at 50% 50%, transparent 0%, var(--stage-vignette) 100%);
  pointer-events:none;
}

/* ----- variant: stitch (Sovereign Stitch) -----
   Exact body recipe from the Stitch preview HTML:
     background-color: #0e0e0f;
     background-image: radial top-right rgba(60,20,30,0.4) + bottom-left rgba(20,20,30,0.6) */
.bg-stitch-base{
  background:
    radial-gradient(circle at top right, rgba(60,20,30,0.40) 0%, transparent 50%),
    radial-gradient(circle at bottom left, rgba(20,20,30,0.60) 0%, transparent 50%),
    #0e0e0f;
}

/* ----- variant: space -----
   Lives in themes/space.css (.bg-space-base + .bg-galaxy + .starfield). */

/* ----- variant: topo -----
   Lives in themes/topo.css (.bg-topo-base + .bg-thumb-topo). */

/* slow ambient glow */
.ambient{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:0;
}

/* matrix rain canvas */
.matrix-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:0.55;
  filter:contrast(1.05) saturate(0);
  mix-blend-mode:screen;
}
[data-theme="light"] .matrix-canvas{
  opacity:0.42;
  mix-blend-mode:multiply;
}

/* central humanoid silhouette — built from gradient + edge glow */
.figure-shadow{
  position:absolute;
  left:50%;top:50%;
  width:46%;
  max-width:560px;
  aspect-ratio:0.78;
  transform:translate(-50%, -45%);
  background:
    /* head */
    radial-gradient(ellipse 28% 22% at 50% 18%, rgba(0,0,0,0.55), transparent 70%),
    /* neck */
    radial-gradient(ellipse 10% 10% at 50% 38%, rgba(0,0,0,0.45), transparent 70%),
    /* shoulders */
    radial-gradient(ellipse 48% 22% at 50% 60%, rgba(0,0,0,0.55), transparent 70%),
    /* torso */
    radial-gradient(ellipse 40% 35% at 50% 85%, rgba(0,0,0,0.45), transparent 80%);
  filter:blur(14px);
  pointer-events:none;
  z-index:0;
  mix-blend-mode:multiply;
  opacity:0.85;
}
.figure-glow{
  position:absolute;
  left:50%;top:50%;
  width:42%;
  max-width:520px;
  aspect-ratio:0.78;
  transform:translate(-50%, -45%);
  background:
    /* eye-line glow */
    radial-gradient(ellipse 18% 4% at 50% 22%, rgba(255,255,255,0.45), transparent 60%),
    /* highlight on top of head */
    radial-gradient(ellipse 24% 12% at 50% 12%, rgba(220,220,230,0.18), transparent 70%),
    /* chest/heart node */
    radial-gradient(ellipse 6% 6% at 50% 70%, rgba(255,255,255,0.35), transparent 65%);
  filter:blur(6px);
  pointer-events:none;
  z-index:0;
  mix-blend-mode:screen;
  opacity:0.75;
  animation:figurePulse 6s ease-in-out infinite;
}
@keyframes figurePulse{
  0%,100%{opacity:0.65;filter:blur(6px)}
  50%{opacity:0.85;filter:blur(8px)}
}

[data-theme="light"] .figure-shadow{opacity:0.25;mix-blend-mode:multiply}
[data-theme="light"] .figure-glow{opacity:0.45;mix-blend-mode:overlay}
.ambient .orb{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.20;
  animation:driftA 24s ease-in-out infinite alternate;
}
.ambient .orb.b{animation-name:driftB;animation-duration:32s}
.ambient .orb.c{animation-name:driftC;animation-duration:40s}
@keyframes driftA{
  0%{transform:translate(-30px,-20px) scale(1)}
  100%{transform:translate(40px,30px) scale(1.1)}
}
@keyframes driftB{
  0%{transform:translate(40px,30px) scale(1.05)}
  100%{transform:translate(-30px,-30px) scale(0.95)}
}
@keyframes driftC{
  0%{transform:translate(-20px,40px) scale(0.95)}
  100%{transform:translate(30px,-30px) scale(1.1)}
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;
  height:64px;
  padding:0 24px;
  gap:24px;
  background:linear-gradient(180deg, var(--topbar-bg-1), var(--topbar-bg-2));
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line);
  transition:background .4s ease, border-color .4s ease;
}
.brand{display:flex;align-items:center;gap:10px;letter-spacing:0.22em;font-weight:500;font-size:13px;color:var(--text-0)}
.brand-mark{
  width:22px;height:22px;
  display:grid;place-items:center;
}
.tabs{
  display:flex;align-items:center;gap:2px;
  padding:4px;
  background:var(--chip-bg);
  border:1px solid var(--line);
  border-radius:999px;
  margin:0 auto;
}
.tab{
  padding:7px 18px;
  font-size:13px;
  color:var(--text-2);
  border-radius:999px;
  transition:color .18s, background .18s;
  white-space:nowrap;
}
.tab:hover{color:var(--text-1)}
.tab.is-active{
  color:var(--text-0);
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 4px 16px rgba(0,0,0,0.35);
}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* theme toggle (sun/moon segmented pill) */
.theme-toggle{
  position:relative;
  width:60px;height:32px;
  display:flex;align-items:center;
  padding:3px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--chip-bg);
  cursor:pointer;
  transition:background .3s, border-color .3s;
}
/* menu toggle — silver icon button, mobile/tablet only */
.menu-toggle{
  display:none;
  width:26px;height:26px;
  align-items:center;justify-content:center;
  border-radius:7px;
  background:linear-gradient(180deg, var(--silver-1), var(--silver-2));
  border:1px solid rgba(0,0,0,0.2);
  color:#1a1a1e;
  cursor:pointer;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.6);
  transition:transform .18s, filter .18s;
}
.menu-toggle:hover{transform:scale(1.06);filter:brightness(1.05)}
.menu-toggle:active{transform:scale(0.94)}
.menu-toggle svg{width:14px;height:14px}
.menu-toggle .tt-track,
.menu-toggle .tt-thumb{display:contents}
@media (max-width:1024px){
  .menu-toggle{display:inline-flex}
}

.theme-toggle:hover{border-color:var(--line-strong)}
.tt-track{
  position:relative;
  width:100%;height:100%;
  display:block;
}
.tt-thumb{
  position:absolute;top:0;
  width:26px;height:26px;
  border-radius:50%;
  background:linear-gradient(180deg, var(--silver-1), var(--silver-2));
  display:grid;place-items:center;
  color:#1a1a1e;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.2),
    0 4px 10px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition:left .35s cubic-bezier(.4,.0,.2,1), background .3s;
}
.tt-dark .tt-thumb{left:28px}
.tt-light .tt-thumb{left:0}
[data-theme="light"] .tt-thumb{
  background:linear-gradient(180deg, #fff, #f0e8d6);
}
.year-pill{
  display:flex;align-items:center;gap:8px;
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--chip-bg);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-1);
  letter-spacing:0.04em;
}
.year-pill .bell{color:var(--text-2);display:inline-flex}
.year-pill .bell:hover{color:var(--text-0)}
.topbar-logout{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-1, #b9bfca);
  background:transparent;
  border:1px solid var(--line-strong);
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.topbar-logout:hover{
  background:rgba(255,255,255,0.06);
  color:var(--text-0, #fff);
  border-color:rgba(255,255,255,0.18);
}
.topbar-logout svg{width:18px;height:18px;}

.avatar{
  width:34px;height:34px;border-radius:50%;
  background:
    radial-gradient(circle at 40% 35%, #4a3a30 0%, #2a2018 50%, #15100a 100%);
  border:1px solid var(--line-strong);
  overflow:hidden;
  position:relative;
}
.avatar::before{
  /* warm photo-y blob */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 65%, #6a4a35 0%, transparent 40%),
    radial-gradient(circle at 50% 30%, #c89070 0%, transparent 25%);
}

/* ---------- layout ---------- */
.app{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:72px 1fr;
  min-height:calc(100vh - 64px);
}

/* ---------- rail (silver metallic capsule) ---------- */
.rail{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:28px 0 28px;
  gap:20px;
}
.rail-inner{
  position:relative;
  width:36px;
  display:flex;flex-direction:column;align-items:center;
  gap:18px;
  padding:18px 0;
  border-radius:999px;
  background:
    linear-gradient(180deg,
      #f0f0f2 0%,
      #c8c8cc 18%,
      #d8d8dc 40%,
      #a8a8ae 70%,
      #888890 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 12px 30px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  flex:0 0 auto;
}
.rail-inner::before{
  /* highlight stripe down the middle */
  content:"";position:absolute;inset:2px;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,0.5), transparent 25%, transparent 75%, rgba(0,0,0,0.1));
  pointer-events:none;
}

/* Background picker — uses same .rail-btn styling as other icons */
.rail-sep{
  width:18px;
  height:1px;
  background:rgba(0,0,0,0.18);
  border-bottom:1px solid rgba(255,255,255,0.5);
  margin:2px 0;
}
.bg-picker-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
.bg-picker-pop{
  position:absolute;
  left:38px;
  top:50%;
  transform:translateY(-50%);
  width:220px;
  padding:10px;
  background:linear-gradient(180deg, rgba(36,38,46,0.92), rgba(14,14,20,0.92));
  border:1px solid var(--panel-border);
  border-radius:14px;
  box-shadow:
    0 30px 60px -15px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter:blur(30px) saturate(160%);
  -webkit-backdrop-filter:blur(30px) saturate(160%);
  z-index:60;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  animation:pickerIn 220ms cubic-bezier(.16,.84,.28,1.02) both;
}
@keyframes pickerIn{
  from{opacity:0;transform:translateY(8px) scale(0.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.bg-pick-card{
  position:relative;
  height:64px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer;
  transition:transform .15s, border-color .15s;
}
.bg-pick-card:hover{transform:translateY(-1px);border-color:rgba(255,255,255,0.18)}
.bg-pick-card.is-active{
  border-color:rgba(220,200,150,0.6);
  box-shadow:0 0 0 1px rgba(220,200,150,0.4) inset, 0 4px 12px rgba(0,0,0,0.5);
}
.bg-pick-thumb{position:absolute;inset:0}
.bg-pick-label{
  position:absolute;left:0;right:0;bottom:0;
  padding:4px 6px;
  font-size:9.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
  font-family:var(--font-mono);
}

/* thumb variants */
.bg-thumb-space{
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, #14142a, #04040a),
    radial-gradient(0.5px 0.5px at 20% 30%, white, transparent),
    radial-gradient(0.5px 0.5px at 60% 70%, white, transparent),
    radial-gradient(0.5px 0.5px at 80% 20%, white, transparent),
    radial-gradient(0.5px 0.5px at 40% 80%, white, transparent),
    radial-gradient(0.5px 0.5px at 70% 50%, white, transparent),
    #04040a;
}
.bg-thumb-space::after{
  content:"";position:absolute;inset:-10%;
  background:radial-gradient(ellipse 50% 15% at 50% 50%, rgba(180,150,220,0.4), transparent 70%);
  filter:blur(2px);
  transform:rotate(-12deg);
  mix-blend-mode:screen;
}
.bg-thumb-stitch{
  background:
    radial-gradient(80px 60px at 95% 5%, rgba(60,20,30,0.95), transparent 60%),
    radial-gradient(80px 60px at 5% 95%, rgba(35,40,70,0.80), transparent 60%),
    #0e0e0f;
  overflow:hidden;
}
.bg-thumb-stitch::after{
  /* gold pill anchored top-left mimicking the Stitch sidebar emblem */
  content:"";position:absolute;
  left:8%;top:50%;
  width:6%;height:60%;
  transform:translateY(-50%);
  background:linear-gradient(180deg, #3a3a3c, #2c2c2e, #1c1c1e);
  border-radius:9999px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 0 8px rgba(212,175,55,0.18);
}
.rail-btn{
  position:relative;
  width:24px;height:24px;
  display:grid;place-items:center;
  color:#2a2a2e;
  opacity:0.7;
  transition:opacity .18s, transform .18s;
}
.rail-btn:hover{opacity:1;transform:scale(1.08)}
.rail-btn.is-active{
  opacity:1;
  color:#1a1a1e;
}
.rail-btn.is-active::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,0,0,0.12), transparent 70%);
  z-index:-1;
}

/* SX mark with gold halo (floats bottom-left) */
/* SX mark with gold halo — clickable button */
button.brain-mark{
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  transition:transform .2s, filter .25s;
}
button.brain-mark:hover{
  transform:scale(1.08);
  filter:drop-shadow(0 0 36px var(--gold-glow)) drop-shadow(0 0 8px rgba(255,220,170,0.5));
}
button.brain-mark:active{transform:scale(0.96)}
.brain-mark{
  position:relative;
  width:48px;height:48px;
  display:grid;place-items:center;
  filter:drop-shadow(0 0 28px var(--gold-glow));
}
.brain-mark svg, .brain-mark img{width:100%;height:100%;display:block;color:var(--gold)}

/* canvas */
.canvas{
  position:relative;
  padding:24px 24px 36px;
  display:flex;
  flex-direction:column;
  gap:20px;
  /* When workspace content (e.g. the full dashboard grid) is taller than the
     viewport, the canvas scrolls vertically — rail + topbar stay fixed. */
  overflow-y:auto;
  overflow-x:hidden;
  max-height:calc(100vh - 64px);
  scrollbar-color:var(--scroll-thumb) var(--scroll-track);
  scrollbar-width:thin;
}
.canvas::-webkit-scrollbar{width:10px;height:10px}
.canvas::-webkit-scrollbar-track{background:var(--scroll-track)}
.canvas::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:content-box;
}
.canvas::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover);background-clip:content-box}
.canvas::-webkit-scrollbar-corner{background:transparent}

/* Workspace grows when the cockpit dashboard is open so every row (Hero →
   Hero → Calendar+Activity+Lineage → AI → Metrics (at bottom) is reachable
   via the canvas scrollbar. The bottom Metrics box sits at y=1013 with h=274,
   so we need ≥1300. */
.workspace.is-dashboard{
  /* 2-row layout: Hero+Metrics (380h) + Cal/Act/Lin/AIChat (480h) + 20 gap = 880 */
  min-height:900px;
}

/* ---------- spatial entrance animation ---------- */
@keyframes panelEnter{
  0%{
    opacity:0;
    transform:translate3d(0, 80px, -200px) scale(0.78);
    filter:blur(14px);
  }
  60%{
    opacity:0.85;
    filter:blur(2px);
  }
  100%{
    opacity:1;
    transform:translate3d(0, 0, 0) scale(1);
    filter:blur(0);
  }
}

/* exit — reverse of entrance, slightly faster */
@keyframes panelExit{
  0%{
    opacity:1;
    transform:translate3d(0, 0, 0) scale(1);
    filter:blur(0);
  }
  40%{
    opacity:0.85;
    filter:blur(2px);
  }
  100%{
    opacity:0;
    transform:translate3d(0, 80px, -200px) scale(0.78);
    filter:blur(14px);
  }
}

/* applied via .is-closing class — overrides the entrance animation */
.panel.is-closing,
.chat.is-closing,
.feature.is-closing{
  animation:panelExit 500ms cubic-bezier(.6,.0,.84,.16) both !important;
}

/* breathing — once entered, panels gently rise and fall to feel weightless */
@keyframes breathe{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

/* ---------- resize handle (bottom-right corner of each floating window) ---------- */
.resize-handle{
  position:absolute;
  right:0;bottom:0;
  width:18px;height:18px;
  cursor:nwse-resize;
  z-index:10;
  background:
    linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.18) 60%, transparent 60%, transparent 70%, rgba(255,255,255,0.14) 70%, rgba(255,255,255,0.14) 80%, transparent 80%);
  opacity:0.6;
  transition:opacity .18s;
}
.resize-handle:hover{opacity:1}
@media (max-width:760px){
  .resize-handle{display:none}
}

/* ---------- unified scrollbar (theme-aware) ----------
   Applies to every scrollable panel surface so the look matches the design. */
.note-list,
.editor-body,
.chat-body,
.cal-body,
.vault-body,
.min-dock,
.note-list *,
.cal-body *,
.settings-content,
.settings-content *,
.prompt-body,
.event-attendees-list,
.rtf-body,
.email-preview-body{
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) var(--scroll-track);
}
.note-list::-webkit-scrollbar,
.editor-body::-webkit-scrollbar,
.chat-body::-webkit-scrollbar,
.cal-body::-webkit-scrollbar,
.vault-body::-webkit-scrollbar,
.min-dock::-webkit-scrollbar,
.settings-content::-webkit-scrollbar,
.prompt-body::-webkit-scrollbar,
.event-attendees-list::-webkit-scrollbar,
.rtf-body::-webkit-scrollbar,
.email-preview-body::-webkit-scrollbar{
  width:8px;height:8px;
}
.note-list::-webkit-scrollbar-track,
.editor-body::-webkit-scrollbar-track,
.chat-body::-webkit-scrollbar-track,
.cal-body::-webkit-scrollbar-track,
.vault-body::-webkit-scrollbar-track,
.min-dock::-webkit-scrollbar-track,
.settings-content::-webkit-scrollbar-track,
.prompt-body::-webkit-scrollbar-track,
.event-attendees-list::-webkit-scrollbar-track,
.rtf-body::-webkit-scrollbar-track,
.email-preview-body::-webkit-scrollbar-track{
  background:var(--scroll-track);
}
.note-list::-webkit-scrollbar-thumb,
.editor-body::-webkit-scrollbar-thumb,
.chat-body::-webkit-scrollbar-thumb,
.cal-body::-webkit-scrollbar-thumb,
.vault-body::-webkit-scrollbar-thumb,
.min-dock::-webkit-scrollbar-thumb,
.settings-content::-webkit-scrollbar-thumb,
.prompt-body::-webkit-scrollbar-thumb,
.event-attendees-list::-webkit-scrollbar-thumb,
.rtf-body::-webkit-scrollbar-thumb,
.email-preview-body::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:padding-box;
  transition:background .18s;
}
.note-list::-webkit-scrollbar-thumb:hover,
.editor-body::-webkit-scrollbar-thumb:hover,
.chat-body::-webkit-scrollbar-thumb:hover,
.cal-body::-webkit-scrollbar-thumb:hover,
.vault-body::-webkit-scrollbar-thumb:hover,
.min-dock::-webkit-scrollbar-thumb:hover,
.settings-content::-webkit-scrollbar-thumb:hover,
.prompt-body::-webkit-scrollbar-thumb:hover,
.event-attendees-list::-webkit-scrollbar-thumb:hover,
.rtf-body::-webkit-scrollbar-thumb:hover,
.email-preview-body::-webkit-scrollbar-thumb:hover{
  background:var(--scroll-thumb-hover);
  background-clip:padding-box;
}
.note-list::-webkit-scrollbar-corner,
.editor-body::-webkit-scrollbar-corner,
.chat-body::-webkit-scrollbar-corner,
.cal-body::-webkit-scrollbar-corner,
.vault-body::-webkit-scrollbar-corner,
.settings-content::-webkit-scrollbar-corner,
.prompt-body::-webkit-scrollbar-corner{background:transparent}

/* ---------- workspace (free-floating window canvas) ---------- */
.workspace{
  position:relative;
  min-height:760px;
  perspective:1400px;
  perspective-origin:50% 30%;
}
/* While any panel is fullscreen, drop the perspective so position:fixed on
   the fullscreen panel resolves against the viewport (not against .workspace,
   which would otherwise act as its containing block). Maintained by
   FloatingProvider in icons.jsx. */
body.has-fullscreen-panel .workspace{
  perspective:none;
}

/* ---------- AI chat hero (header image) ----------
   `background-image` is set per theme in themes/<theme>/<theme>.css — the
   URL must be declared in the same stylesheet as its consuming selector
   because Chrome resolves url() inside var() substitutions relative to the
   CONSUMING stylesheet, not the declaring one. The fallback below covers
   the unscoped state (unknown data-bg / first paint before mount). */
.chat-hero{
  position:relative;
  width:100%;
  flex:none;                /* im Flex-Scroll des Chat-Verlaufs nicht stauchen */
  aspect-ratio: 16 / 4.86;  /* Hero-Container -10% Abstand ober/unter dem S (S bleibt gleich groß; background-size ist breiten-relativ) */
  overflow:hidden;
  background:transparent;
  perspective:1000px;
  perspective-origin:50% 50%;
}
.chat-hero-img{
  position:absolute;
  left:11%; right:11%;          /* = 78% width, centered */
  top:6%;   bottom:6%;           /* = 88% height */
  /* Safety fallback — themes/<id>/<id>.css overrides this with its own asset */
  background-image: url("themes/space/ai-header.webp?v=1");
  background-size: 27.5%;        /* Logo +10 % (zuvor 25 %), zentriert */
  background-position: center;
  background-repeat: no-repeat;
  /* Recoloring per theme — `filter` is set in themes/<id>/<id>.css */
  /* Premium-„S": sanftes 3D-Schweben/Kippen (nutzt perspective am .chat-hero). */
  transform-origin: 50% 58%;
  animation: heroFloat 9s ease-in-out infinite;
  will-change: transform;
}
@keyframes heroFloat{
  0%,100% { transform: perspective(1000px) rotateY(-5deg) rotateX(1.4deg) translateY(0); }
  50%     { transform: perspective(1000px) rotateY(5deg)  rotateX(-1deg)  translateY(-5px); }
}
/* Studiolicht-Glanz: ein heller Streifen wandert diagonal über das Metall. Auf die S-Form
   maskiert (mask-image je Theme = themes/<id>/ai-header.webp) → der Glanz sitzt exakt auf dem S,
   nicht im Hintergrund. mix-blend screen = metallischer Glint statt flachem Weiß. */
.chat-hero-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(118deg,
    transparent 36%,
    rgba(255,255,255,0.22) 45%,
    rgba(255,255,255,0.80) 50%,
    rgba(255,255,255,0.22) 55%,
    transparent 64%);
  background-size:280% 280%;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  pointer-events:none;
  /* gleiche Geometrie wie das Hintergrund-S; mask-image setzt jedes Theme relativ (Fallback: space) */
  -webkit-mask-image: url("themes/space/ai-header.webp?v=1");
          mask-image: url("themes/space/ai-header.webp?v=1");
  -webkit-mask-size:27.5%;  mask-size:27.5%;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation: heroSheen 7.5s ease-in-out infinite;
}
@keyframes heroSheen{
  0%       { background-position:150% -50%; opacity:0; }
  12%      { opacity:0.95; }
  55%      { background-position:-50% 150%; opacity:0.95; }
  66%,100% { background-position:-50% 150%; opacity:0; }
}
/* Reflexboden unter der Figur — driftet leicht zur Seite (als wandere die Lichtquelle). */
.chat-hero::before{
  content:"";
  position:absolute;
  left:8%;right:8%;
  bottom:5%;
  height:16%;
  background:radial-gradient(58% 100% at 50% 0%, rgba(220,180,110,0.22), transparent 72%);
  filter:blur(9px);
  pointer-events:none;
  opacity:0.6;
  animation: heroFloor 9s ease-in-out infinite;
}
@keyframes heroFloor{
  0%,100% { transform: translateX(-3%) scaleX(0.95); opacity:0.48; }
  50%     { transform: translateX(3%)  scaleX(1.05); opacity:0.7; }
}
@media (prefers-reduced-motion: reduce){
  .chat-hero-img, .chat-hero-img::after, .chat-hero::before{ animation:none; }
  .chat-hero-img{ transform:none; }
  .chat-hero-img::after{ opacity:0; }
}

/* ---------- Calendar panel ---------- */
.calendar-panel{
  display:flex;
  flex-direction:column;
  /* explicit pixel height from useFloating overrides max-height */
}
.cal-toolbar{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.cal-nav{display:flex;align-items:center;gap:4px}
.cal-nav-btn{
  width:28px;height:28px;border-radius:7px;
  display:grid;place-items:center;
  font-size:18px;line-height:1;
  color:var(--text-1);
  transition:color .15s, background .15s;
}
.cal-nav-btn:hover{color:var(--text-0);background:var(--hover-bg)}
.cal-today{
  padding:5px 12px;
  border-radius:7px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text-1);
  font-size:11.5px;letter-spacing:0.04em;text-transform:uppercase;
  transition:color .15s, background .15s, border-color .15s;
}
.cal-today:hover{color:var(--text-0);background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.14)}
.cal-new-event{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;margin-right:6px;border-radius:8px;
  font-size:11.5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--text-0);
  background:linear-gradient(135deg, rgba(180,140,220,0.30), rgba(120,160,220,0.30));
  border:1px solid rgba(180,140,220,0.45);
  cursor:pointer;transition:filter .15s, transform .08s;
}
.cal-new-event:hover{filter:brightness(1.12)}
.cal-new-event:active{transform:translateY(1px)}
.cal-new-event svg{width:14px;height:14px}
.cal-label{
  flex:1;
  font-size:14px;font-weight:500;
  color:var(--text-0);
  letter-spacing:0.005em;
}
.cal-switch{
  display:flex;
  padding:2px;
  border-radius:9px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
}
.cal-switch-btn{
  padding:5px 12px;border-radius:7px;
  font-size:11.5px;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--text-2);
  transition:color .18s, background .18s;
}
.cal-switch-btn:hover{color:var(--text-0)}
.cal-switch-btn.is-active{
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  color:var(--text-0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}

.cal-body{
  position:relative;
  flex:1;
  min-height:0;
  overflow:auto;
  padding:0;
}

/* gutter (hour labels) */
.cal-gutter{
  flex:0 0 56px;
  width:56px;
  padding-top:0;
}
.cal-gutter-spacer{width:56px;flex:0 0 56px}
.cal-hour-label{
  position:relative;
  font-size:10.5px;
  color:var(--text-3);
  text-align:right;
  padding:2px 8px 0 0;
  border-top:1px solid transparent;
}

/* shared hour grid */
.cal-grid{
  position:relative;
  flex:1;
  border-left:1px solid rgba(255,255,255,0.06);
}
.cal-hour-line{
  position:absolute;left:0;right:0;height:0;
  border-top:1px solid rgba(255,255,255,0.05);
}
.cal-event{
  position:absolute;
  left:6px;right:6px;
  padding:6px 9px;
  border-radius:8px;
  border:1px solid;
  display:flex;flex-direction:row;align-items:flex-start;gap:8px;
  text-align:left;
  overflow:hidden;
  color:#f4ecff;
  cursor:pointer;
  transition:transform .15s, filter .15s;
}
.cal-event:hover{transform:translateY(-1px);filter:brightness(1.12)}
/* Beim Ziehen folgt der Block dem Cursor ohne Nachlauf + hebt sich ab. */
.cal-event.is-dragging{transition:none;filter:brightness(1.18);opacity:.92;box-shadow:0 16px 40px -12px rgba(0,0,0,.6) !important;}
.cal-event-title{
  flex:1 1 auto;
  font-size:12px;font-weight:500;line-height:1.2;
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  word-break:break-word;
}
.cal-event-times{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  font-size:10.5px;color:rgba(255,255,255,0.78);
  font-family:"JetBrains Mono", monospace;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.cal-event-time{line-height:1.1;}

.cal-now{position:absolute;left:-4px;right:0;height:0;z-index:5;pointer-events:none}
.cal-now-dot{
  position:absolute;left:0;top:-4px;
  width:8px;height:8px;border-radius:50%;
  background:#ff5a5a;
  box-shadow:0 0 0 3px rgba(255,90,90,0.2);
}
.cal-now-line{
  position:absolute;left:6px;right:0;top:0;
  border-top:1.5px solid #ff5a5a;
}

/* Day view */
.cal-day-view{display:flex;padding:8px 14px 14px}

/* Week view */
.cal-week-view{display:flex;flex-direction:column}
.cal-week-head{
  display:flex;
  position:sticky;top:0;
  background:linear-gradient(180deg, var(--panel-bg-1), color-mix(in srgb, var(--panel-bg-2) 92%, transparent));
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:10px 14px 10px 0;
  z-index:4;
}
.cal-day-head{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 6px;
  border-radius:9px;
  background:transparent;
  border:0;
  color:inherit;
  cursor:pointer;
  font:inherit;
  transition:background .15s, transform .08s;
}
.cal-day-head:hover{background:rgba(255,255,255,0.04);}
.cal-day-head:active{transform:translateY(1px);}
.cal-day-name{font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-3)}
.cal-day-num{font-size:18px;font-weight:500;color:var(--text-1);font-feature-settings:"tnum"}
.cal-day-head.is-today{
  background:linear-gradient(180deg, rgba(255,90,90,0.10), rgba(255,90,90,0.02));
  box-shadow:inset 0 0 0 1px rgba(255,90,90,0.18);
}
.cal-day-head.is-today .cal-day-num{color:#ff8a8a}

.cal-week-body{display:flex;padding:0 14px 14px}
.cal-week-grid{display:flex;flex:1}
.cal-week-col{flex:1;border-right:1px solid rgba(255,255,255,0.04)}
.cal-week-col:last-child{border-right:0}

/* Month view */
.cal-month-view{padding:10px 14px 14px}
.cal-month-head{
  display:grid;grid-template-columns:repeat(7, 1fr);
  padding:6px 2px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.cal-month-headcell{
  text-align:center;
  font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-3);
}
.cal-month-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  grid-auto-rows:minmax(78px, 1fr);
  gap:1px;
  background:rgba(255,255,255,0.04);
  margin-top:1px;
  border-radius:10px;
  overflow:hidden;
}
.cal-month-cell{
  position:relative;
  background:rgba(20,20,24,0.55);
  padding:6px 8px;
  text-align:left;
  display:flex;flex-direction:column;gap:4px;
  cursor:pointer;
  transition:background .15s;
}
.cal-month-cell:hover{background:rgba(40,40,48,0.7)}
.cal-month-cell.is-out{opacity:0.4}
.cal-month-num{
  font-size:12px;font-weight:500;font-feature-settings:"tnum";
  color:var(--text-1);
  align-self:flex-end;
}
.cal-month-cell.is-today .cal-month-num{
  background:#ff5a5a;
  color:#fff;
  width:22px;height:22px;
  border-radius:50%;
  display:grid;place-items:center;
}
.cal-month-events{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.cal-month-event{
  font-size:10.5px;
  color:#f4ecff;
  padding:1.5px 6px;
  border-radius:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;
}
.cal-month-more{font-size:10px;color:var(--text-3);padding-left:4px}

/* ---------- Audio Recordings panel ---------- */
.audio-panel{
  display:flex;
  flex-direction:column;
}
.audio-body{
  position:relative;
  flex:1;
  min-height:0;
  overflow:auto;
  padding:12px 14px;
}
.audio-body{
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) transparent;
}
.audio-body::-webkit-scrollbar{width:8px}
.audio-body::-webkit-scrollbar-track{background:transparent}
.audio-body::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.audio-body::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover);background-clip:padding-box}

.audio-list{display:flex;flex-direction:column;gap:6px}
.audio-group-label{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text-3);
  padding:14px 6px 4px;
}
.audio-group-label:first-child{padding-top:4px}
.audio-item{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:14px;
  padding:12px 14px 12px 14px;
  border-radius:12px;
  background:rgba(20,20,26,0.45);
  border:1px solid var(--line);
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.audio-delete{
  position:absolute;
  top:8px;right:8px;
  width:24px;height:24px;
  border-radius:6px;
  display:grid;place-items:center;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
  color:var(--text-2);
  opacity:0;
  transition:opacity .15s, background .15s, color .15s, border-color .15s;
}
.audio-action{
  position:absolute;
  top:8px;
  right:8px;
  width:24px;height:24px;
  border-radius:6px;
  display:grid;place-items:center;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
  color:var(--text-2);
  opacity:0;
  cursor:pointer;
  transition:opacity .15s, background .15s, color .15s, border-color .15s;
}
.audio-action svg{width:13px;height:13px}
.audio-item:hover .audio-action{opacity:1}
.audio-transcribe{right:40px}
.audio-action.audio-delete{position:absolute;right:8px}
.audio-transcribe:hover{background:rgba(120,180,255,0.18);color:#fff;border-color:rgba(120,180,255,0.5)}
.audio-delete svg{width:13px;height:13px}
.audio-item:hover .audio-delete{opacity:1}
.audio-delete:hover{background:rgba(255,80,80,0.85);color:#fff;border-color:rgba(255,120,120,0.5)}
.audio-empty{
  padding:36px 14px;
  text-align:center;
  font-size:12.5px;
  color:var(--text-3);
}
.audio-item:hover{background:rgba(28,28,36,0.6);border-color:var(--line-strong)}
.audio-item.is-playing{
  background:linear-gradient(135deg, rgba(180,140,220,0.12), rgba(110,80,160,0.06));
  border-color:rgba(180,140,220,0.32);
}

.audio-play{
  width:38px;height:38px;
  border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border:1px solid var(--line-strong);
  color:var(--text-0);
  transition:transform .15s, background .15s;
}
.audio-play:hover{transform:scale(1.06);background:linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06))}
.audio-play:active{transform:scale(0.96)}
.audio-item.is-playing .audio-play{
  background:linear-gradient(180deg, oklch(0.68 0.13 300), oklch(0.52 0.13 290));
  border-color:oklch(0.78 0.13 300 / 0.55);
  color:#fff;
}
.audio-play svg{width:16px;height:16px}

.audio-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.audio-title{
  font-size:13px;
  font-weight:500;
  color:var(--text-0);
  letter-spacing:0.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.audio-date{font-size:11px;color:var(--text-3);font-family:"JetBrains Mono", monospace}
.audio-wave{
  display:flex;align-items:center;gap:2px;
  margin-top:2px;
  height:22px;
}
.audio-bar{
  display:inline-block;
  width:2px;
  background:rgba(255,255,255,0.18);
  border-radius:1px;
  transition:background .12s;
}
.audio-bar.is-filled{background:oklch(0.78 0.13 300 / 0.85)}

.audio-duration{
  font-size:11.5px;
  color:var(--text-2);
  font-family:"JetBrains Mono", monospace;
  font-feature-settings:"tnum";
}

/* mini-player dock at the bottom of the panel */
.audio-dock{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  gap:6px 12px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(20,20,26,0.5), rgba(14,14,18,0.7));
}
.audio-dock-play{
  grid-row:1 / span 2;
  width:42px;height:42px;
  border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(180deg, oklch(0.7 0.13 300), oklch(0.52 0.13 290));
  border:1px solid oklch(0.78 0.13 300 / 0.55);
  color:#fff;
  box-shadow:0 6px 16px -6px oklch(0.5 0.15 300 / 0.6);
  transition:transform .15s;
}
.audio-dock-play:hover{transform:scale(1.06)}
.audio-dock-play:active{transform:scale(0.96)}
.audio-dock-play svg{width:16px;height:16px}
.audio-dock-info{display:flex;justify-content:space-between;align-items:baseline;min-width:0}
.audio-dock-title{
  font-size:12.5px;
  color:var(--text-0);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.audio-dock-time{
  font-size:11px;
  color:var(--text-2);
  font-family:"JetBrains Mono", monospace;
  font-feature-settings:"tnum";
  flex-shrink:0;
  margin-left:8px;
}
.audio-dock-sep{color:var(--text-3);margin:0 2px}
.audio-dock-bar{
  position:relative;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.08);
  cursor:pointer;
  overflow:hidden;
}
.audio-dock-fill{
  display:block;
  height:100%;
  background:linear-gradient(90deg, oklch(0.7 0.13 300), oklch(0.78 0.13 78));
  transition:width .15s linear;
}

@media (max-width:760px){
  .audio-body{max-height:480px}
}
.gallery-panel{
  display:flex;
  flex-direction:column;
}
.gallery-group-label{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text-3);
  padding:14px 4px 6px;
}
.gallery-group-label:first-child{padding-top:4px}
.gallery-empty{
  padding:48px 14px;
  text-align:center;
  font-size:12.5px;
  color:var(--text-3);
}
.gallery-menu{
  position:absolute;
  top:6px;right:6px;
  z-index:3;
  opacity:0;
  transition:opacity .15s;
}
.gallery-cell:hover .gallery-menu,
.gallery-cell:focus-within .gallery-menu{opacity:1}
.gallery-menu .icon-btn{
  width:28px;height:28px;
  border-radius:8px;
  background:rgba(20,20,24,0.78);
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.85);
}
.gallery-menu .icon-btn:hover,
.gallery-menu .icon-btn.is-active{background:rgba(40,40,48,0.92);color:#fff}
.gallery-body{
  position:relative;
  flex:1;
  min-height:0;
  overflow:auto;
  padding:16px;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
}
.gallery-cell{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  border-radius:12px;
  overflow:hidden;
  background:rgba(20,20,24,0.6);
  border:1px solid rgba(255,255,255,0.06);
  cursor:zoom-in;
  padding:0;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.gallery-cell:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.18);
  box-shadow:0 24px 50px -20px rgba(0,0,0,0.6);
}
.gallery-cell img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.gallery-cell:hover img{transform:scale(1.04)}
.gallery-cell-meta{
  position:absolute;left:0;right:0;bottom:0;
  padding:24px 12px 10px;
  display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.78));
  color:#fff;
  text-align:left;
  pointer-events:none;
}
.gallery-cell-title{
  font-size:13px;
  font-weight:500;
  letter-spacing:0.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gallery-cell-cap{
  font-size:11px;
  color:rgba(255,255,255,0.72);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* unified scrollbar — register gallery-body */
.gallery-body{
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) transparent;
}
.gallery-body::-webkit-scrollbar{width:8px;height:8px}
.gallery-body::-webkit-scrollbar-track{background:transparent}
.gallery-body::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.gallery-body::-webkit-scrollbar-thumb:hover{
  background:var(--scroll-thumb-hover);
  background-clip:padding-box;
}

/* mobile: cap gallery body height like other in-flow panels */
@media (max-width:760px){
  .gallery-body{max-height:480px}
}
.vault-panel{
  display:flex;
  flex-direction:column;
}
.vault-body{
  position:relative;
  flex:1;
  min-height:0;
  overflow:auto;
  padding:14px;
}

.vault-empty{
  height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;
  padding:30px 20px;
  border:1.5px dashed rgba(255,255,255,0.10);
  border-radius:14px;
  color:var(--text-2);
  text-align:center;
}
.vault-empty-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  color:var(--text-2);
  background:rgba(255,255,255,0.04);
  border-radius:12px;
}
.vault-empty-title{font-size:14px;font-weight:500;color:var(--text-0)}
.vault-empty-sub{font-size:12px;line-height:1.5;color:var(--text-3);max-width:280px}
.vault-empty-sub em{font-style:normal;color:var(--text-1)}
.vault-empty-cta{
  margin-top:8px;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.12);
  color:var(--text-0);
  font-size:12px;letter-spacing:0.04em;text-transform:uppercase;
  transition:background .15s, border-color .15s;
}
.vault-empty-cta:hover{
  background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border-color:rgba(255,255,255,0.2);
}

.vault-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:10px;
}
.vault-cell{
  position:relative;
  aspect-ratio:1 / 1;
  border-radius:10px;
  overflow:hidden;
  background:rgba(20,20,24,0.6);
  border:1px solid rgba(255,255,255,0.06);
  cursor:pointer;
  transition:transform .15s, border-color .15s;
}
.vault-cell.is-image{cursor:zoom-in}
.vault-cell:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.18);
}
.vault-cell.is-image img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.vault-doc-thumb{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;
  padding:14px;
}
.vault-doc-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  opacity:0.85;
}
.vault-doc-ext{
  font-size:11px;
  letter-spacing:0.14em;
  font-weight:600;
  font-family:"JetBrains Mono", monospace;
  opacity:0.9;
}
.vault-cell-meta{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 8px 6px;
  display:flex;flex-direction:column;gap:1px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.8));
  color:#fff;
  font-size:10.5px;
  line-height:1.3;
  opacity:0;
  transition:opacity .15s;
}
.vault-cell:hover .vault-cell-meta{opacity:1}
.vault-cell-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:500;
}
.vault-cell-size{color:rgba(255,255,255,0.65);font-family:"JetBrains Mono", monospace;font-size:9.5px}
.vault-cell-actions{
  position:absolute;top:6px;right:6px;
  display:flex;gap:4px;
  opacity:0;
  transition:opacity .15s;
}
.vault-cell:hover .vault-cell-actions{opacity:1}
.vault-cell-btn{
  width:24px;height:24px;border-radius:6px;
  display:grid;place-items:center;
  background:rgba(20,20,24,0.72);
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.85);
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.vault-cell-btn:hover{background:rgba(255,255,255,0.16);color:#fff;border-color:rgba(255,255,255,0.22)}
.vault-cell-btn.is-danger:hover{background:rgba(255,80,80,0.85);color:#fff;border-color:rgba(255,120,120,0.5)}

.vault-toast{
  position:absolute;left:14px;right:14px;bottom:14px;
  padding:8px 12px;
  border-radius:8px;
  background:rgba(80,30,30,0.85);
  border:1px solid rgba(255,120,120,0.35);
  color:#ffd9d9;
  font-size:11.5px;
  text-align:center;
  z-index:6;
  animation:vaultToast 220ms ease-out both;
}
@keyframes vaultToast{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.vault-dropzone-hint{
  margin-top:14px;
  padding:8px 12px;
  text-align:center;
  font-size:11px;
  color:var(--text-3);
  border:1px dashed rgba(255,255,255,0.08);
  border-radius:8px;
}

.vault-body.is-dragging{
  outline:2px dashed rgba(180,150,255,0.5);
  outline-offset:-10px;
}
.vault-drop-overlay{
  position:absolute;inset:0;
  display:grid;place-items:center;
  background:rgba(20,15,30,0.55);
  pointer-events:none;
  z-index:5;
}
.vault-drop-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(80,60,120,0.85), rgba(50,40,80,0.85));
  border:1px solid rgba(180,150,255,0.5);
  color:#fff;font-size:13px;letter-spacing:0.05em;text-transform:uppercase;
  box-shadow:0 30px 70px -10px rgba(0,0,0,0.6);
}

/* fullscreen image preview */
.vault-lightbox{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.82);
  backdrop-filter:blur(8px);
  display:grid;place-items:center;
  z-index:5000;
  cursor:zoom-out;
  padding:40px;
  animation:vaultLb 220ms ease-out both;
}
@keyframes vaultLb{from{opacity:0}to{opacity:1}}
.vault-lightbox img{
  max-width:100%;max-height:100%;
  border-radius:8px;
  box-shadow:0 40px 100px -10px rgba(0,0,0,0.7);
  cursor:default;
}
.vault-lightbox-close{
  position:fixed;top:20px;right:20px;
  width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
  cursor:pointer;
  transition:background .15s;
}
.vault-lightbox-close:hover{background:rgba(255,255,255,0.18)}

/* lightbox navigation arrows (prev/next) */
.lightbox-nav{
  position:fixed;top:50%;
  transform:translateY(-50%);
  width:52px;height:52px;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
  font-family:"Inter", sans-serif;
  font-size:32px;line-height:1;
  cursor:pointer;
  transition:background .18s, transform .18s, border-color .18s;
  z-index:5001;
}
.lightbox-nav:hover{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.28);
  transform:translateY(-50%) scale(1.05);
}
.lightbox-nav:active{transform:translateY(-50%) scale(0.95)}
.lightbox-prev{left:24px}
.lightbox-next{right:24px}
@media (max-width:760px){
  .lightbox-nav{width:42px;height:42px;font-size:24px}
  .lightbox-prev{left:10px}
  .lightbox-next{right:10px}
}

/* ---------- Documents panel ---------- */
.docs-panel{display:flex;flex-direction:column}
.docs-body{
  position:relative;flex:1;min-height:0;overflow:auto;padding:14px;
  scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent;
}

/* Wissens-Uploads (Backend /documents → RAG) — füllen jetzt das Documents-Panel */
.docs-uploads{flex:1;min-height:0;padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
.docs-dropzone{
  border:1px dashed var(--line-strong);
  border-radius:10px;
  padding:12px;
  text-align:center;
  font-size:12px;color:var(--text-2, #8a8f9a);
  cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.docs-dropzone:hover, .docs-dropzone.is-over{
  border-color:rgba(180,140,220,0.55);
  background:rgba(180,140,220,0.08);
  color:var(--text-0, #fff);
}
.docs-upload-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;overflow:auto;}
.docs-upload-row{
  display:flex;align-items:center;gap:10px;
  padding:6px 8px;border-radius:8px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line-strong);
}
.docs-upload-row .docs-info{flex:1;min-width:0;}
.docs-upload-row .docs-title{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.docs-upload-row .docs-preview{font-size:11px;color:var(--text-2, #8a8f9a);}
.docs-ext[data-ext="up"]{background:rgba(180,140,220,0.18);color:#caa9ec;}
.rag-badge{
  display:inline-block;font-size:10px;font-weight:600;letter-spacing:0.02em;
  padding:1px 7px;border-radius:999px;white-space:nowrap;
}
.rag-badge.is-in{color:#7fdca0;background:rgba(80,200,120,0.12);border:1px solid rgba(80,200,120,0.30);}
/* Notiz-Tags (Chips im Editor) */
.note-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid var(--line-strong);}
.note-tag-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;line-height:1;
  padding:4px 6px 4px 9px;border-radius:999px;
  color:#caa9ec;background:rgba(180,140,220,0.14);border:1px solid rgba(180,140,220,0.30);
}
.note-tag-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:inherit;font-size:13px;line-height:1;
}
.note-tag-x:hover{background:rgba(255,255,255,0.18);color:#fff;}
.note-tag-input{
  min-width:80px;flex:0 0 auto;font-size:12px;font-family:inherit;
  padding:4px 8px;border-radius:999px;outline:none;
  color:var(--text-0);background:rgba(0,0,0,0.28);border:1px dashed var(--line-strong);
}
.note-tag-input:disabled{opacity:0.5;}
/* Tag-Filterleiste in der Notizen-Liste */
.note-tagbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line-strong);}
.note-tagbar-chip{
  font-size:11px;font-weight:600;line-height:1;cursor:pointer;
  padding:4px 9px;border-radius:999px;
  color:var(--text-2, #8a8f9a);background:transparent;border:1px solid var(--line-strong);
}
.note-tagbar-chip:hover{color:var(--text-0, #fff);background:rgba(255,255,255,0.05);}
.note-tagbar-chip.is-active{color:#caa9ec;background:rgba(180,140,220,0.14);border-color:rgba(180,140,220,0.40);}

/* Status-Panel: Segment-Umschaltung (Alle über den Typ-Buttons) */
.status-switch{padding:8px 12px 0;border-bottom:1px solid var(--line-strong);}
.status-seg-all{
  display:block;width:100%;margin-bottom:6px;
  font-size:12px;font-weight:700;line-height:1;cursor:pointer;
  padding:7px 10px;border-radius:8px;
  color:var(--text-2, #8a8f9a);background:transparent;border:1px solid var(--line-strong);
}
.status-seg-all:hover{color:var(--text-0, #fff);background:rgba(255,255,255,0.05);}
.status-seg-all.is-active{color:#caa9ec;background:rgba(180,140,220,0.14);border-color:rgba(180,140,220,0.40);}
.status-seg-row{display:flex;gap:6px;padding-bottom:8px;}
.status-seg-row .note-tagbar-chip{flex:1 1 0;text-align:center;}
/* Stag-Filterleiste im Status-Panel */
.status-tagbar{align-items:center;}
.status-tagbar-label{font-size:10px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-3, #6b7180);margin-right:2px;}
/* Abstand zwischen Zeit-Text und RAG-Badge in jeder Status-Zeile (linksbündig,
   die untere rechte Ecke bleibt für den More-Button frei). */
.status-item .note-meta{display:flex;align-items:center;gap:10px;padding-right:30px;}
/* More-Button (…) in den Status-Zeilen unten-rechts; Menü öffnet nach unten
   (nicht nach oben → würde sonst beim ersten Eintrag hinter dem Suchfeld liegen) */
.status-item .note-more-wrap{top:auto;bottom:6px;right:8px;left:auto;}
.status-item .note-menu{top:30px;bottom:auto;right:0;left:auto;}
/* Typ-Chip + Titel in einer Zeile */
.status-head{display:flex;align-items:center;gap:8px;min-width:0;}
.status-head .note-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.status-item .status-type{
  flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;
  color:var(--text-2, #8a8f9a);background:rgba(255,255,255,0.05);border:1px solid var(--line-strong);
}
.status-item .status-type.t-note{color:#9ec9a0;border-color:rgba(120,190,130,0.32);background:rgba(120,190,130,0.10);}
.status-item .status-type.t-image{color:#caa9ec;border-color:rgba(180,140,220,0.32);background:rgba(180,140,220,0.10);}
.status-item .status-type.t-doc{color:#8ab6e8;border-color:rgba(120,160,220,0.32);background:rgba(120,160,220,0.10);}
.rag-badge.is-out{color:#d9a066;background:rgba(220,150,80,0.10);border:1px solid rgba(220,150,80,0.28);}
.rag-badge.is-pending{color:#8ab6e8;background:rgba(120,160,220,0.12);border:1px solid rgba(120,160,220,0.30);animation:ragpulse 1.4s ease-in-out infinite;}
@keyframes ragpulse{0%,100%{opacity:1}50%{opacity:0.55}}
/* Dokument-Vorschau-Fenster (verschiebbar + Vollbild, wie ein Editor) */
.doc-preview-win{display:flex;flex-direction:column;overflow:hidden;}
.doc-preview-tabs{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;border-bottom:1px solid var(--line-strong);
}
/* Stag-Chips inline am Anfang der Tab-Zeile (keine eigene Zeile mehr) */
.doc-preview-tags{padding:0;border-bottom:0;flex:0 1 auto;margin-right:2px;}
.doc-tab{
  font-size:12px;font-weight:600;padding:5px 12px;border-radius:8px;
  background:transparent;border:1px solid transparent;color:var(--text-2, #8a8f9a);cursor:pointer;
}
.doc-tab:hover{color:var(--text-0, #fff);background:rgba(255,255,255,0.05);}
.doc-tab.is-active{color:var(--text-0, #fff);border-color:var(--line-strong);background:rgba(180,140,220,0.10);}
.doc-search{display:flex;align-items:center;gap:6px;margin-left:auto;flex:0 1 280px;}
.doc-search-ic{display:flex;color:var(--text-2, #8a8f9a);}
.doc-search-ic svg{width:15px;height:15px;}
.doc-search input{
  flex:1;min-width:0;padding:6px 10px;font-size:12px;font-family:inherit;
  color:var(--text-0);background:rgba(0,0,0,0.32);
  border:1px solid var(--line-strong);border-radius:8px;outline:none;
}
.doc-search input:disabled{opacity:0.55;}
.doc-search-nav{display:flex;align-items:center;gap:2px;}
.doc-search-count{font-size:11px;color:var(--text-2, #8a8f9a);white-space:nowrap;font-variant-numeric:tabular-nums;}
.doc-preview-area{flex:1;min-height:0;display:flex;overflow:hidden;position:relative;}
.doc-preview-frame{flex:1;width:100%;height:100%;border:0;background:#fff;}
/* PDF.js-Viewer-Container (absolut über die Vorschaufläche) */
.pdfv-container{position:absolute;inset:0;overflow:auto;background:#525659;}
.pdfv-container .pdfViewer{padding:8px 0;}
/* aktueller Such-Treffer im PDF deutlicher hervorheben */
.pdfv-container .textLayer .highlight{background:rgba(244,197,66,0.45);border-radius:2px;}
.pdfv-container .textLayer .highlight.selected{background:#f4c542;}
.doc-preview-text{
  flex:1;margin:0;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-size:13px;line-height:1.55;color:var(--text-1, #c7ccd6);
  font-family:inherit;padding:14px;
}
.doc-preview-text mark.hl{background:rgba(220,200,90,0.30);color:inherit;border-radius:2px;}
.doc-preview-text mark.hl.is-cur{background:#f4c542;color:#1a1a1a;}
/* Bild-Original in der Vorschau */
.doc-preview-imgwrap{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;background:#1a1c22;padding:12px;}
.doc-preview-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;}
.docs-body::-webkit-scrollbar{width:8px}
.docs-body::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.docs-body::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover);background-clip:padding-box}
.docs-group-label{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--text-3);
  padding:14px 4px 6px;
}
.docs-group-label:first-child{padding-top:4px}
.docs-list{display:flex;flex-direction:column;gap:6px}
.docs-item{
  position:relative;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:14px;align-items:center;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(20,20,26,0.45);
  border:1px solid var(--line);
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.docs-item:hover{background:rgba(28,28,36,0.6);border-color:var(--line-strong)}
.docs-ext{
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:10px;
  font-family:"JetBrains Mono", monospace;
  font-size:11px;letter-spacing:0.12em;
  font-weight:600;
  color:#f4ecff;
  background:linear-gradient(135deg, #33333c, #1a1a22);
  border:1px solid rgba(255,255,255,0.08);
  flex-shrink:0;
}
.docs-ext[data-ext="md"]{background:linear-gradient(135deg, #2a4a6e, #14253a);color:#d4e6ff}
.docs-ext[data-ext="txt"]{background:linear-gradient(135deg, #3a3a44, #1c1c22);color:#e0e0e6}
.docs-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.docs-title{
  font-size:13.5px;font-weight:500;color:var(--text-0);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.docs-preview{
  font-size:12px;color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.docs-menu{
  position:absolute;top:6px;right:6px;
  opacity:0;
  transition:opacity .15s;
}
.docs-item:hover .docs-menu,
.docs-item:focus-within .docs-menu{opacity:1}
.docs-menu .icon-btn{
  width:26px;height:26px;border-radius:7px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
  color:var(--text-2);
}
.docs-menu .icon-btn:hover,
.docs-menu .icon-btn.is-active{background:rgba(255,255,255,0.10);color:var(--text-0)}
.docs-empty{padding:48px 14px;text-align:center;font-size:12.5px;color:var(--text-3)}

/* viewer (modal over panel) */
.docs-viewer{
  position:absolute;inset:0;
  background:rgba(8,8,11,0.75);
  backdrop-filter:blur(8px);
  display:grid;place-items:center;
  padding:24px;
  z-index:50;
}
.docs-viewer-pane{
  width:100%;max-width:680px;max-height:100%;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg, var(--panel-bg-1), var(--panel-bg-2));
  border:1px solid var(--line-strong);
  border-radius:14px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,0.7);
  overflow:hidden;
}
.docs-viewer-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.docs-viewer-title{
  flex:1;font-size:13px;color:var(--text-0);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.docs-viewer-body{
  margin:0;padding:18px 22px;
  flex:1;
  overflow:auto;
  font-family:"JetBrains Mono", monospace;
  font-size:12.5px;
  line-height:1.65;
  color:var(--text-1);
  white-space:pre-wrap;
  word-break:break-word;
}

@media (max-width:760px){
  .docs-body{max-height:480px}
  .docs-viewer{position:fixed}
}
.min-dock{
  position:fixed;
  top:84px;
  right:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:8px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(28,28,32,0.72), rgba(18,18,22,0.72));
  border:1px solid var(--panel-border);
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,0.55),
    0 0 60px -20px rgba(180,180,200,0.18),
    inset 0 1px 0 var(--panel-rim);
  backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  z-index:1000;
  animation:minDockIn 320ms cubic-bezier(.2,.9,.3,1.05) both;
}
@keyframes minDockIn{
  from{opacity:0;transform:translate(20px,-50%)}
  to  {opacity:1;transform:translate(0,-50%)}
}
.min-dock-btn{
  position:relative;
  width:38px;height:38px;
  border-radius:11px;
  display:grid;place-items:center;
  color:var(--text-1);
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.06);
  cursor:pointer;
  transition:transform .18s, color .18s, background .18s, border-color .18s;
}
.min-dock-btn:hover{
  color:var(--text-0);
  transform:translateX(-2px) scale(1.04);
  background:linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  border-color:rgba(255,255,255,0.12);
}
.min-dock-btn:active{transform:translateX(-1px) scale(0.98)}
.min-dock-ic{display:grid;place-items:center}
@media (max-width:760px){
  .min-dock{display:none}
}
/* When mounted in the topbar slot: horizontal, compact, no panel chrome */
.top-dock-slot{display:flex;align-items:center}
.top-dock-slot .min-dock{
  position:static;
  top:auto;right:auto;
  flex-direction:row;
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  animation:none;
  z-index:auto;
}
.top-dock-slot .min-dock-btn{
  width:32px;height:32px;
  border-radius:9px;
}
.top-dock-slot .min-dock-btn:hover{transform:translateY(-1px) scale(1.04)}
.feature-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  perspective:1400px;
  perspective-origin:50% 0%;
}

.panel{
  position:relative;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(180deg, var(--panel-bg-1), var(--panel-bg-2));
  border:1px solid var(--panel-border);
  border-radius:22px;
  box-shadow:
    0 60px 120px -25px rgba(0,0,0,0.55),
    0 30px 60px -15px rgba(0,0,0,0.35),
    0 8px 0 -7px var(--panel-rim),
    0 0 80px -20px rgba(180,180,200,0.18),
    inset 0 1px 0 var(--panel-rim),
    inset 0 0 0 1px rgba(255,255,255,0.02);
  backdrop-filter:blur(48px) saturate(170%);
  -webkit-backdrop-filter:blur(48px) saturate(170%);
  overflow:hidden;
  animation:panelEnter 700ms cubic-bezier(.16,.84,.28,1.02) both;
  transform-origin:50% 80%;
  will-change:transform, opacity, filter;
  transition:background .4s ease, border-color .4s ease;
}
.panel::before{
  /* delicate grain on glass */
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.92  0 0 0 0 0.96  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:0.05;
  pointer-events:none;
  mix-blend-mode:overlay;
}
.panel::after{
  /* top + diagonal highlight (chrome edge) */
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.28) 50%, transparent 95%);
  pointer-events:none;
}
.panel-header{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:13px;
  font-weight:500;
  color:var(--text-0);
}
/* draggable handle */
.panel-header.is-handle{
  cursor:grab;
  user-select:none;
}
.panel-header.is-handle:active{cursor:grabbing}
@media (max-width:760px){
  .panel-header.is-handle,
  .panel-header.is-handle:active{cursor:default}
}
.panel-header .ph-title{flex:1;letter-spacing:0.005em}
.panel-header .ph-actions{display:flex;align-items:center;gap:2px;color:var(--text-2)}
.icon-btn{
  width:28px;height:28px;border-radius:7px;
  display:grid;place-items:center;
  color:var(--text-2);
  transition:color .18s, background .18s;
}
.icon-btn:hover{color:var(--text-0);background:var(--hover-bg)}
.icon-btn.is-active{
  color:var(--text-0);
  background:linear-gradient(180deg, rgba(180,140,220,0.20), rgba(110,80,160,0.08));
  box-shadow:inset 0 0 0 1px rgba(180,140,220,0.35);
}
.icon-btn.is-danger:hover{color:var(--danger);background:rgba(255,80,80,0.08)}

/* Panel-header action buttons are hidden until panel hover (or focus).
   Title stays always visible; only the trailing icon-button cluster fades. */
.panel-header .ph-actions,
.chat-header > .icon-btn{
  opacity:0;
  transition:opacity .18s;
}
.panel:hover .panel-header .ph-actions,
.panel:focus-within .panel-header .ph-actions,
.chat:hover .chat-header > .icon-btn,
.chat:focus-within .chat-header > .icon-btn,
.panel-header:hover .ph-actions,
.chat-header:hover > .icon-btn{
  opacity:1;
}
/* Always keep them visible when there's an open popover inside */
.ph-actions:has(.more-wrap > .is-active){opacity:1}

/* More-button popover container (same look as note-menu) */
.more-wrap{position:relative;display:inline-flex}
.more-menu{
  top:30px;right:0;
  min-width:160px;
}

/* Chat microphone button */
.chat-mic{
  width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;
  color:var(--text-2);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  margin-right:8px;
  cursor:pointer;
  transition:color .15s, background .15s, border-color .15s;
  /* Push-to-Talk auf Touch: kein Scroll/Zoom/Textauswahl/Callout beim Gedrückthalten,
     sonst feuert der Browser pointercancel und die Aufnahme bricht sofort ab. */
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.chat-mic:hover{color:var(--text-0);background:rgba(180,140,220,0.18);border-color:rgba(180,140,220,0.45)}
.chat-mic svg{width:14px;height:14px}
/* Mic aktiv (hört zu) — pulsierend rot */
.chat-mic.is-listening{color:#fff;background:rgba(220,70,70,0.85);border-color:rgba(220,70,70,0.9);animation:micPulse 1.2s ease-in-out infinite;}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,70,70,0.5)}50%{box-shadow:0 0 0 5px rgba(220,70,70,0)}}
/* TTS-Umschalter (Antworten vorlesen) */
.chat-tts{
  width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;font-size:14px;line-height:1;
  background:rgba(255,255,255,0.03);border:1px solid var(--line);
  margin-right:8px;cursor:pointer;
  transition:background .15s, border-color .15s;
}
.chat-tts:hover{background:rgba(180,140,220,0.18);border-color:rgba(180,140,220,0.45)}
.chat-tts.is-on{background:rgba(180,140,220,0.22);border-color:rgba(180,140,220,0.55)}
.editor-toolbar{
  display:flex;align-items:center;gap:2px;
  padding:8px 14px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:rgba(20,20,26,0.45);
  flex-wrap:wrap;
}
.editor-toolbar button{
  min-width:30px;height:28px;
  padding:0 8px;
  border-radius:7px;
  display:inline-grid;place-items:center;
  color:var(--text-1);
  font-size:13px;
  font-family:"Inter", sans-serif;
  transition:color .15s, background .15s;
}
.editor-toolbar button:hover{color:var(--text-0);background:var(--hover-bg)}
.editor-toolbar-sep{
  width:1px;height:18px;
  background:rgba(255,255,255,0.10);
  margin:0 4px;
}

/* Header save button (visible only in edit mode) */
.save-btn{
  color:var(--text-1, #bfc5d1);
  transition:color .15s, background .2s;
}
.save-btn:hover{color:#fff;}
.save-btn.is-saved{
  color:#6edca0;
  background:rgba(110,220,160,0.14);
}

.editor-body img,
.md-editor-body--live > .live-md-editor img{
  max-width:100%;
  max-height:480px;
  height:auto;
  display:block;
  margin:8px 0;
  border-radius:6px;
}

/* Hervorhebung/Zitat-Markierung in der Theme-Akzentfarbe (gold-glow ist translux
   → Text bleibt in hell wie dunkel lesbar). box-decoration-break: clean über
   Zeilenumbrüche. */
.editor-body mark.skv-mark,
.email-preview-body-html mark.skv-mark{
  background:var(--gold-glow, rgba(214,181,107,0.45));
  color:inherit;
  border-radius:3px;
  padding:0 .15em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
/* Toolbar-Button: akzentfarbenes Chip, das wie die Markierung aussieht */
.hl-ico{
  background:var(--gold, #d6b56b);
  color:#241a06;
  font-style:normal;font-weight:700;
  padding:0 5px;border-radius:3px;line-height:1.4;
}

/* ---------- Prompt dialog (themed window.prompt replacement) ---------- */
.prompt-overlay{
  position:fixed;inset:0;
  background:rgba(5,7,12,0.62);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:10000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  animation:prompt-fade .14s ease-out;
}
.prompt-dialog{
  width:min(440px, 92vw);
  background:linear-gradient(180deg, rgba(28,30,38,0.96), rgba(18,20,26,0.96));
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(180,140,220,0.10) inset;
  color:var(--text-0);
  overflow:hidden;
  animation:prompt-pop .18s cubic-bezier(.2,.9,.3,1.2);
}
.prompt-header{
  padding:16px 20px 8px;
}
.prompt-title{
  font-family:"Archivo Black", sans-serif;
  font-size:14px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#fff;
}
.prompt-body{
  padding:8px 20px 18px;
  display:flex;flex-direction:column;gap:8px;
}
.prompt-label{
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-2, #8a8f9a);
}
.prompt-input{
  width:100%;
  padding:11px 14px;
  font-size:14px;
  color:var(--text-0);
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:10px;
  outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
  font-family:inherit;
}
.prompt-input:focus{
  border-color:rgba(180,140,220,0.55);
  background:rgba(0,0,0,0.48);
  box-shadow:0 0 0 3px rgba(180,140,220,0.14);
}
/* LLM-Verbindungs-Card. */
.llm-status{font-size:12px;font-weight:600;}
.llm-status.is-ok{color:#7fdca0;}
.llm-status.is-off{color:var(--text-2, #8a8f9a);}
.llm-save-msg{font-size:12px;color:var(--text-2, #8a8f9a);align-self:center;}

/* Auth-Gate (nutzt .prompt-*). */
.auth-checking{font-size:13px;color:var(--text-2, #8a8f9a);padding:6px 0;}
.auth-hint{font-size:12.5px;line-height:1.5;color:var(--text-2, #8a8f9a);margin-bottom:10px;}
.auth-error{
  margin-top:4px;font-size:12px;
  color:#ff8a8a;
  background:rgba(255,80,80,0.08);
  border:1px solid rgba(255,80,80,0.20);
  border-radius:8px;padding:8px 10px;
}
.prompt-actions{
  display:flex;justify-content:flex-end;gap:8px;
  padding:12px 16px 16px;
  border-top:1px solid rgba(255,255,255,0.06);
  background:rgba(0,0,0,0.15);
}
.prompt-actions .btn{
  padding:9px 16px;
  font-size:13px;font-weight:600;
  border-radius:9px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.12);
  background:transparent;
  color:var(--text-0);
  transition:background .15s, border-color .15s, transform .08s;
}
.prompt-actions .btn:hover{background:rgba(255,255,255,0.06);}
.prompt-actions .btn:active{transform:translateY(1px);}
.prompt-actions .btn.is-primary{
  /* Standard SKARVEX primary — dark glass + light rim (matches vault Choose Files) */
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.20);
  color:var(--text-0);
  font-weight:600;
  letter-spacing:0.04em;
  box-shadow:0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
}
.prompt-actions .btn.is-primary:hover{
  background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border-color:rgba(255,255,255,0.30);
  filter:none;
}
.prompt-actions .btn.is-primary:hover{filter:brightness(1.08);}
.prompt-actions .btn.is-primary:disabled{
  opacity:0.5;cursor:not-allowed;filter:none;
}

/* Settings-Karten-Buttons (z. B. LLM-Verbindung „Speichern", Export, „Neu laden",
   „Embeddings neu aufbauen") als ECHTE Buttons stylen — gleiche Optik wie die Dialog-
   Buttons unten, damit man sie als Button erkennt (nicht als bloßen Text). */
.settings-group .btn{
  padding:9px 16px;
  font-size:13px;font-weight:600;letter-spacing:0.02em;
  border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,255,255,0.12);
  background:transparent;color:var(--text-0);
  transition:background .15s, border-color .15s, transform .08s;
}
.settings-group .btn:hover:not(:disabled){background:rgba(255,255,255,0.06);}
.settings-group .btn:active:not(:disabled){transform:translateY(1px);}
.settings-group .btn.is-primary{
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.20);
  letter-spacing:0.04em;
  box-shadow:0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
}
.settings-group .btn.is-primary:hover:not(:disabled){
  background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border-color:rgba(255,255,255,0.30);
}
.settings-group .btn:disabled{opacity:0.5;cursor:not-allowed;}

@keyframes prompt-fade{from{opacity:0}to{opacity:1}}
@keyframes prompt-pop{
  from{opacity:0;transform:translateY(8px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Settings dialog — built on top of .prompt-dialog */
.settings-dialog{width:min(640px, 94vw);}
.settings-dialog.has-sidebar{width:min(820px, 96vw);}
.settings-layout{
  display:flex;
  min-height:420px;
  max-height:62vh;
}
.settings-sidebar{
  width:160px;flex:0 0 auto;
  display:flex;flex-direction:column;gap:4px;
  padding:14px 10px;
  background:rgba(0,0,0,0.22);
  border-right:1px solid rgba(255,255,255,0.06);
  position:relative;
}
.settings-card-btn{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--text-1, #bfc5d1);
  font-size:13px;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, transform .08s, box-shadow .15s;
}
.settings-card-btn:hover{
  background:rgba(255,255,255,0.04);
  color:var(--text-0, #fff);
}
.settings-card-btn:active{transform:translateY(1px);}
.settings-card-btn.is-active{
  background:linear-gradient(135deg, rgba(180,140,220,0.18), rgba(120,160,220,0.14));
  border-color:rgba(180,140,220,0.40);
  color:#fff;
  box-shadow:0 6px 14px -8px rgba(150,130,220,0.35), inset 0 0 0 1px rgba(180,140,220,0.18);
}
.settings-card-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  color:var(--text-2, #8a8f9a);
  flex:0 0 auto;
}
.settings-card-btn:hover .settings-card-ic{color:var(--text-0, #fff);}
.settings-card-btn.is-active .settings-card-ic{color:#fff;}
.settings-content{
  flex:1 1 auto;
  min-width:0;
  overflow-y:auto;
  padding:18px 20px;
  display:flex;flex-direction:column;gap:14px;
}

/* Model section */
.model-select{
  width:240px !important;
  text-align:left !important;
  font-family:inherit !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  padding-right:34px !important;
  cursor:pointer;
  /* shorthand so the chevron SVG doesn't get tiled by .prompt-input's background reset */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23bfc5d1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1.5 6 6.5 11 1.5'/></svg>")
    no-repeat right 12px center / 12px 8px,
    rgba(0,0,0,0.35) !important;
}
.model-select:focus{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1.5 6 6.5 11 1.5'/></svg>")
    no-repeat right 12px center / 12px 8px,
    rgba(0,0,0,0.48) !important;
}
.model-select::-ms-expand{display:none;}
/* Native dropdown options can only be styled minimally; set sane fallbacks. */
.model-select option{
  background:#1c1e26;
  color:var(--text-0, #fff);
}
.model-input-wide{width:240px !important;text-align:left !important;}
.model-temp-wrap{
  display:flex;align-items:center;gap:10px;
  flex:0 0 auto;
}
.model-temp-wrap input[type=range]{width:180px;accent-color:rgb(180,140,220);}
.model-temp-val{
  min-width:42px;
  text-align:right;
  font-family:"JetBrains Mono", monospace;
  font-size:12px;
  color:var(--text-1);
}
.model-local-actions{display:flex;gap:8px;flex-wrap:wrap;}
.model-system-prompt{
  width:100% !important;
  text-align:left !important;
  resize:vertical;
  min-height:120px;
  font-family:inherit;
  line-height:1.5;
}
.settings-group{
  display:flex;flex-direction:column;gap:10px;
  padding:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
}
.settings-group-title{
  font-family:"Archivo Black", sans-serif;
  font-size:11px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--text-1, #bfc5d1);
  margin-bottom:4px;
}
.settings-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.settings-row .prompt-label{margin:0;flex:1;}
.settings-row .prompt-input{width:140px;flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums;}
.bg-pick-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
.bg-pick-grid .bg-pick-card{padding:8px;}

/* Contacts dialog */
.contacts-dialog{width:min(520px, 94vw);}
.contacts-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px 12px;
}
.contacts-add-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  font-size:12px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  /* Standard SKARVEX primary — dark glass + light rim */
  color:var(--text-0);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.20);
  border-radius:8px;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .08s;
  box-shadow:0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
}
.contacts-add-btn:hover{
  background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border-color:rgba(255,255,255,0.30);
  filter:none;
}
.contacts-add-btn:hover{filter:brightness(1.10);}
.contacts-add-btn:active{transform:translateY(1px);}
.contacts-add-btn svg{width:14px;height:14px;}
.contacts-header-actions{display:inline-flex;align-items:center;gap:8px;}
/* "CSV"-Button als sekundäre (ruhigere) Variante */
.contacts-add-btn.ghost{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-color:rgba(255,255,255,0.14);
  box-shadow:none;
}
.contacts-import-msg{
  margin:0 20px 8px;padding:6px 10px;
  font-size:12px;color:var(--text-1, #cdd3df);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);border-radius:8px;
}
.contacts-body{padding:6px 16px 14px;max-height:60vh;overflow:auto;}
.contacts-empty{
  padding:24px 8px;text-align:center;
  font-size:13px;color:var(--text-2, #8a8f9a);
}
.contact-list{display:flex;flex-direction:column;gap:6px;}
.contact-row{
  display:flex;align-items:center;gap:12px;
  width:100%;
  padding:10px 12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  cursor:pointer;
  text-align:left;
  color:var(--text-0);
  font:inherit;
  transition:background .15s, border-color .15s, transform .08s;
  outline:none;
}
.contact-row:hover{
  background:rgba(255,255,255,0.07);
  border-color:rgba(180,140,220,0.40);
}
.contact-row:focus-visible{
  border-color:rgba(180,140,220,0.55);
  box-shadow:0 0 0 3px rgba(180,140,220,0.14);
}
.contact-row:active{transform:translateY(1px);}
.contact-edit-btn{
  margin-left:auto;
  flex:0 0 auto;
  width:32px;height:32px;
  display:inline-grid;place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text-1, #bfc5d1);
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, transform .08s;
}
.contact-edit-btn:hover{
  background:rgba(180,140,220,0.18);
  border-color:rgba(180,140,220,0.50);
  color:#fff;
}
.contact-edit-btn:active{transform:translateY(1px);}
.contact-edit-btn svg{width:15px;height:15px;}
.contact-avatar{
  flex:0 0 36px;
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:50%;
  font-family:"Archivo Black", sans-serif;
  font-size:12px;letter-spacing:0.04em;
  color:#2a2a2e;
  background:linear-gradient(135deg, #e0e2e6 0%, #b8babf 50%, #8a8d94 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.18);
  box-shadow:0 4px 10px rgba(150,130,220,0.30);
}
.contact-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.contact-name{
  font-size:14px;font-weight:600;
  color:var(--text-0);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.contact-role{
  font-size:11.5px;
  color:var(--text-2, #8a8f9a);
  letter-spacing:0.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Contact edit dialog */
.contact-edit-dialog{width:min(560px, 94vw);}
.contact-edit-dialog .prompt-body{
  display:flex;flex-direction:column;gap:12px;
  max-height:70vh;overflow:auto;
  /* match the unified Skarvex scrollbar used by note-list / editor-body / chat-body */
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) var(--scroll-track);
}
.contact-edit-dialog .prompt-body::-webkit-scrollbar{width:8px;height:8px;}
.contact-edit-dialog .prompt-body::-webkit-scrollbar-track{background:var(--scroll-track);}
.contact-edit-dialog .prompt-body::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:padding-box;
  transition:background .18s;
}
.contact-edit-dialog .prompt-body::-webkit-scrollbar-thumb:hover{
  background:var(--scroll-thumb-hover);
  background-clip:padding-box;
}
.contact-edit-dialog .prompt-body::-webkit-scrollbar-corner{background:transparent;}
.contact-edit-dialog .settings-row{align-items:center;gap:14px;}
.contact-edit-dialog .settings-row .prompt-input{
  width:auto;flex:1;
  text-align:left;
  font-variant-numeric:normal;
}
.contact-edit-dialog .settings-row .prompt-label{
  flex:0 0 100px;
  margin:0;
}
/* Paired field row (Vorname+Nachname, Straße+Nr, PLZ+Ort) */
.contact-edit-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.contact-edit-pair-street{grid-template-columns:1fr 110px;}
.contact-edit-pair-zip{grid-template-columns:120px 1fr;}
.contact-edit-cell{display:flex;flex-direction:column;gap:4px;min-width:0;}
.contact-edit-cell .prompt-label{flex:0 0 auto;margin:0;}
.contact-edit-cell .prompt-input{width:100%;text-align:left;font-variant-numeric:normal;}
.contact-edit-note{
  resize:vertical;
  min-height:64px;
  font-family:inherit;
  line-height:1.4;
  width:100%;
  text-align:left;
}

/* ====================================================
   Documents — "Neues Dokument" + FSA hints + Split-view MD editor
   ==================================================== */
.docs-new-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  /* Standard SKARVEX primary — dark glass + light rim */
  color:var(--text-0);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.20);
  border-radius:8px;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .08s;
  box-shadow:0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
}
.docs-new-btn:hover{
  background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border-color:rgba(255,255,255,0.30);
  filter:none;
}
.docs-new-btn:hover{filter:brightness(1.10);}
.docs-new-btn:active{transform:translateY(1px);}
.docs-new-btn svg{width:14px;height:14px;}

.docs-folder-hint{
  margin:0 16px 8px;
  padding:9px 14px;
  font-size:11.5px;color:var(--text-2, #8a8f9a);
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  display:flex;align-items:center;gap:10px;
}
.docs-folder-hint b{color:var(--text-0);font-weight:600;}
.docs-folder-hint code{
  font-family:"JetBrains Mono", monospace;font-size:10.5px;
  color:rgba(199,154,90,0.95);
  padding:1px 5px;border-radius:3px;
  background:rgba(199,154,90,0.12);
}
.docs-folder-hint.is-connected{
  border-color:rgba(127,201,154,0.30);
  background:rgba(127,201,154,0.06);
  color:var(--text-1);
}
.docs-folder-dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 7px;
  background:oklch(0.75 0.13 150);
  box-shadow:0 0 8px rgba(127,201,154,0.65);
}
.docs-folder-link{
  font:inherit;font-size:11.5px;
  background:transparent;border:0;
  color:rgba(199,154,90,0.95);cursor:pointer;
  text-decoration:underline;
  padding:0 2px;
}
.docs-folder-link:hover{color:#fff;}

/* Doc editor — floating window (mirrors NoteEditor's chrome) */
.doc-editor{
  position:absolute;
  z-index:20;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.doc-editor .panel-header{gap:10px;}
.doc-editor .docs-ext{flex:0 0 auto;}
.md-editor-title{
  flex:1;min-width:0;
  background:transparent;border:0;outline:none;
  color:var(--text-0);
  font-family:"JetBrains Mono", monospace;
  font-size:13.5px;letter-spacing:0.02em;
  padding:6px 8px;border-radius:6px;
}
.md-editor-title:focus{background:rgba(255,255,255,0.04);}
.md-editor-status{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:oklch(0.75 0.13 150);
}
.md-editor-status.is-dirty{color:rgba(214,138,138,0.95);}
.md-editor-save{padding:6px 12px;font-size:12px;}

/* Live (Typora-style) editor body: single full-width editor, no split. */
.md-editor-body--live{
  flex:1;
  display:flex;
  min-height:0;
}
.md-editor-body--live > .live-md-editor{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:32px 40px;
  outline:none;
  font-size:15px;
  line-height:1.65;
  caret-color:var(--gold, #d6b56b);
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) var(--scroll-track);
}
.md-editor-body--live > .live-md-editor::-webkit-scrollbar{width:8px;}
.md-editor-body--live > .live-md-editor::-webkit-scrollbar-track{background:var(--scroll-track);}
.md-editor-body--live > .live-md-editor::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);border-radius:8px;
  border:2px solid transparent;background-clip:padding-box;
}
.md-editor-body--live > .live-md-editor::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover);background-clip:padding-box;}
.md-editor-body--live > .live-md-editor:focus{outline:none;}
.md-editor-body--live > .live-md-editor :empty{min-height:1.65em;}
/* `.live-md-editor img` styling is shared with `.editor-body img` — see the
   combined rule near `.editor-body img` further up in this file. */

/* ====================================================
   Rendered Markdown — shared by viewer and live editor
   ==================================================== */
.md-rendered{color:var(--text-1, #bfc5d1);line-height:1.6;font-size:14px;}
.md-rendered h1,
.md-rendered h2,
.md-rendered h3,
.md-rendered h4,
.md-rendered h5,
.md-rendered h6{
  font-family:"Archivo Black", sans-serif;
  color:var(--text-0);
  letter-spacing:-0.01em;
  margin:1.4em 0 0.5em;line-height:1.25;
}
.md-rendered h1:first-child,
.md-rendered h2:first-child,
.md-rendered h3:first-child{margin-top:0;}
.md-rendered h1{font-size:28px;}
.md-rendered h2{font-size:27.3px;}  /* +30% über Default 21px */
.md-rendered h3{font-size:16.5px;}
.md-rendered h4{font-size:14px;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-2);}
.md-rendered p{margin:0 0 0.9em;}
/* Hyperlinks heller im Dark-Mode (normal + besucht); auch im Editor (statt UA-Blau) */
.md-rendered a,.editor-body a{color:rgba(205,178,248,1);text-decoration:underline;text-underline-offset:2px;}
.md-rendered a:visited,.editor-body a:visited{color:rgba(205,178,248,1);}
.md-rendered a:hover,.editor-body a:hover{color:#fff;}
.md-rendered strong{color:var(--text-0);font-weight:700;}
.md-rendered em{color:var(--text-0);font-style:italic;}
.md-rendered ul,
.md-rendered ol{margin:0 0 0.9em;padding-left:1.4em;}
.md-rendered li{margin-bottom:4px;}
.md-rendered li::marker{color:rgba(199,154,90,0.85);}
.md-rendered blockquote{
  /* Zitat-Stil wie das Dashboard-Zitat: vertikaler Balken links + Hanken-Grotesk-Kursiv */
  margin:0.9em 0;padding:4px 0 4px 14px;
  border-left:3px solid rgba(199,154,90,0.7);
  background:transparent;
  color:var(--text-1);
  font-family:"Hanken Grotesk", Inter, sans-serif;
  font-style:italic;
}
.md-rendered blockquote p:last-child{margin-bottom:0;}
/* Eingefügte Bilder: per Ecke größen-änderbar (resize:both am Wrapper) */
.md-img-wrap{
  display:inline-block;
  position:relative;
  resize:both;
  overflow:hidden;
  max-width:100%;
  line-height:0;
  border-radius:8px;
}
.md-img-wrap img{width:100%;height:100%;display:block;object-fit:contain;}
.editor-body img,.md-rendered img{max-width:100%;border-radius:8px;}
/* Absatzabstand im Docs-Editor: kompakt (0.5em −30% → 0.35em) */
.editor-body p{margin:0 0 0.17em;}
/* Überschriften-Abstand im Docs-Editor: sehr kompakt (mehrfach 0.7×) */
.editor-body h1{margin:0.23em 0;}
.editor-body h2{margin:0.29em 0;}
.editor-body h3,.editor-body h4,.editor-body h5,.editor-body h6{margin:0.34em 0;}
.md-rendered hr{
  border:0;border-top:1px solid rgba(255,255,255,0.10);
  margin:1.4em 0;
}
.md-rendered code{
  font-family:"JetBrains Mono", monospace;
  font-size:0.88em;
  padding:1px 6px;border-radius:4px;
  background:rgba(255,255,255,0.06);
  color:var(--text-0);
}
.md-rendered pre{
  margin:0.9em 0;
  padding:14px 16px;
  background:rgba(0,0,0,0.40);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  overflow:auto;
  font-family:"JetBrains Mono", monospace;
  font-size:12.5px;line-height:1.5;
  color:var(--text-0);
}
.md-rendered pre code{
  background:transparent;padding:0;border-radius:0;font-size:inherit;
}

/* Viewer body styled with the rendered-MD reset (override the old <pre>) */
.docs-viewer-body.md-rendered{
  white-space:normal;
  padding:24px 28px;
  font-size:14.5px;
}

/* Email-preview toast (skv-event-email listener stub) */
.skv-toast{
  position:fixed;
  right:24px;bottom:24px;
  width:min(360px, calc(100vw - 48px));
  z-index:9999;
  background:linear-gradient(180deg, rgba(28,30,38,0.96), rgba(18,20,26,0.96));
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(180,140,220,0.10) inset;
  color:var(--text-0);
  padding:14px 16px 12px;
  animation:skv-toast-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes skv-toast-pop{
  from{opacity:0;transform:translateY(8px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.skv-toast-close{
  position:absolute;top:8px;right:8px;
  width:24px;height:24px;
  display:grid;place-items:center;
  background:transparent;border:0;border-radius:6px;
  color:var(--text-2, #8a8f9a);
  cursor:pointer;font-size:14px;line-height:1;
}
.skv-toast-close:hover{background:rgba(255,255,255,0.06);color:#fff;}
.skv-toast-head{
  display:flex;flex-direction:column;gap:4px;
  padding-right:24px;margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding-bottom:8px;
}
.skv-toast-tag{
  font-family:"JetBrains Mono", monospace;
  font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(199,154,90,0.95);
}
.skv-toast-title{
  font-family:"Archivo Black", sans-serif;
  font-size:13px;letter-spacing:0.02em;
  color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.skv-toast-section{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
.skv-toast-label{
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--text-2, #8a8f9a);
}
.skv-toast-section.is-skipped .skv-toast-label{color:rgba(214,138,138,0.85);}
.skv-toast-section ul{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:3px;
}
.skv-toast-section li{
  font-size:12.5px;line-height:1.35;
  display:flex;align-items:baseline;gap:8px;
  color:var(--text-1, #bfc5d1);
}
.skv-toast-section li b{color:#fff;font-weight:600;}
.skv-toast-section li span{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;color:var(--text-2, #8a8f9a);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.skv-toast-section.is-skipped li{opacity:0.7;}

/* Toast → "Vorschau öffnen" action */
.skv-toast-actions{
  margin-top:10px;padding-top:8px;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;justify-content:flex-end;gap:8px;
}
.skv-toast-action{
  font:inherit;font-size:11.5px;font-weight:600;letter-spacing:0.02em;
  padding:6px 12px;border-radius:8px;
  background:linear-gradient(135deg, rgba(180,140,220,0.95), rgba(120,160,220,0.95));
  border:0;color:#fff;cursor:pointer;
  box-shadow:0 4px 12px rgba(150,130,220,0.30);
  transition:filter .15s, transform .08s;
}
.skv-toast-action:hover{filter:brightness(1.10);}
.skv-toast-action:active{transform:translateY(1px);}
.skv-toast-action:disabled{opacity:.6;cursor:default;filter:none;transform:none;}
/* sekundärer (ruhiger) Toast-Button, z. B. "Vorschau" */
.skv-toast-action.ghost{
  background:rgba(255,255,255,0.06);
  color:var(--text-0);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:none;
}
/* Versand-Ergebnis im Toast / in der Vorschau */
.skv-toast-result, .email-preview-result{
  margin-top:10px;padding:7px 10px;border-radius:8px;
  font-size:12px;font-weight:500;
}
.skv-toast-result.is-ok, .email-preview-result.is-ok{
  color:#bff3d2;background:rgba(60,180,110,0.14);border:1px solid rgba(60,180,110,0.30);
}
.skv-toast-result.is-error, .email-preview-result.is-error{
  color:#ffd0d0;background:rgba(220,80,80,0.14);border:1px solid rgba(220,80,80,0.30);
}
.email-preview-result{margin:0 0 4px;}

/* Email preview dialog */
.email-preview-dialog{width:min(620px, 96vw);}
.email-preview-dialog .prompt-body{
  display:flex;flex-direction:column;gap:14px;
  max-height:72vh;overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) var(--scroll-track);
}
.email-preview-dialog .prompt-body::-webkit-scrollbar{width:8px;height:8px;}
.email-preview-dialog .prompt-body::-webkit-scrollbar-track{background:var(--scroll-track);}
.email-preview-dialog .prompt-body::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:8px;border:2px solid transparent;background-clip:padding-box;
}
.email-preview-dialog .prompt-body::-webkit-scrollbar-thumb:hover{
  background:var(--scroll-thumb-hover);background-clip:padding-box;
}
.email-preview-source{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;letter-spacing:0.04em;
  color:var(--text-2, #8a8f9a);
  padding:6px 10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
}
.email-preview-source b{
  font-family:"Archivo Black", sans-serif;
  font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(199,154,90,0.95);
  margin-right:4px;
}
.email-preview-source code{
  font-family:"JetBrains Mono", monospace;
  font-size:10px;
  color:var(--text-1, #bfc5d1);
}
.email-preview-body-html p{margin:0 0 10px;}
.email-preview-body-html strong{color:#0a0a0c;font-weight:700;}
.email-preview-body-html em{font-style:italic;}
.email-preview-body-html a{color:rgba(100,80,180,0.95);text-decoration:underline;}
.email-preview-body-html ul,.email-preview-body-html ol{margin:0 0 10px;padding-left:20px;}
.email-preview-body-html li{margin-bottom:4px;}
.email-preview-tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  padding-bottom:4px;
}
.email-preview-tab{
  font:inherit;font-size:12px;
  padding:6px 12px;border-radius:99px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text-1, #bfc5d1);
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.email-preview-tab:hover{background:rgba(255,255,255,0.07);color:#fff;}
.email-preview-tab.is-active{
  background:linear-gradient(135deg, #e0e2e6 0%, #b8babf 50%, #8a8d94 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 4px 12px rgba(150,130,220,0.25);
}
.email-preview-tab.is-muted{opacity:0.65;}
.email-preview-tab.is-muted.is-active{
  background:linear-gradient(135deg, rgba(214,138,138,0.75), rgba(180,100,100,0.75));
  box-shadow:0 4px 12px rgba(214,138,138,0.25);
  opacity:1;
}
.email-preview-mute{
  font-family:"JetBrains Mono", monospace;
  font-size:9.5px;letter-spacing:0.10em;
  color:rgba(255,200,200,0.85);
}
.email-preview-card{
  position:relative;
  background:linear-gradient(180deg, rgba(252,252,253,0.97), rgba(244,244,247,0.97));
  color:#1a1a22;
  border-radius:12px;
  padding:18px 20px;
  box-shadow:0 16px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.email-preview-card.is-muted{filter:saturate(0.6) brightness(0.92);}
.event-mail-meta{
  display:flex;flex-direction:column;gap:6px;
  font-size:12.5px;
}
.event-mail-meta > div{display:flex;gap:10px;align-items:baseline;}
.email-preview-key{
  flex:0 0 60px;
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:#7a7a82;
}
.event-mail-meta b{color:#0a0a0c;font-weight:600;}
.email-preview-divider{
  height:1px;
  background:rgba(0,0,0,0.10);
  margin:12px 0 10px;
}
.email-preview-body-text{
  font-size:13.5px;line-height:1.6;color:#22222a;
}
.email-preview-body-text p{margin:0 0 10px;}
.email-preview-event{
  background:rgba(180,140,220,0.10);
  border-left:3px solid rgba(180,140,220,0.85);
  border-radius:0 8px 8px 0;
  padding:10px 14px;margin:6px 0 12px;
}
.email-preview-event-title{
  font-family:"Archivo Black", sans-serif;
  font-size:13.5px;color:#0a0a0c;margin-bottom:4px;
}
.email-preview-event > div{font-size:12.5px;color:#34343c;}
.email-preview-event-desc{margin-top:6px;color:#52525a;font-size:12px;line-height:1.5;}
.email-preview-sig{
  margin-top:14px;color:#7a7a82;font-size:12.5px;
  font-family:"JetBrains Mono", monospace;letter-spacing:0.04em;
}
.email-preview-skip-banner{
  margin-top:12px;padding:8px 12px;
  font-size:11.5px;color:rgba(140,40,40,0.95);
  background:rgba(214,138,138,0.16);
  border-radius:8px;
  border:1px solid rgba(214,138,138,0.30);
}

/* Event dialog (calendar) */
.event-dialog{width:min(560px, 94vw);}
.event-dialog .settings-row .prompt-input{width:220px;}
.event-time-row{display:flex;gap:14px;}
.event-time-row .event-time-cell{flex:1;}
.event-time-row .event-time-cell .prompt-input{width:140px;}
.event-desc-row{display:flex;flex-direction:column;gap:6px;}
.event-desc{
  width:100% !important;
  text-align:left !important;
  resize:vertical;
  min-height:90px;
  font-family:inherit;
  line-height:1.5;
}
.event-delete,
.contact-delete{
  color:#ff8a8a !important;
  border-color:rgba(255,120,120,0.35) !important;
}
.event-delete:hover,
.contact-delete:hover{
  background:rgba(255,120,120,0.10) !important;
}

/* Event color picker */
.event-color-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.event-color-list{
  display:flex;gap:8px;flex-wrap:wrap;
}
.event-color-swatch{
  width:26px;height:26px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.15);
  cursor:pointer;
  padding:0;
  transition:transform .12s, border-color .15s, box-shadow .15s;
}
.event-color-swatch:hover{transform:scale(1.10);}
.event-color-swatch.is-active{
  border-color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,0.18);
}

/* Attendees + email toggle inside the event dialog */
.event-attendees-row{
  display:flex;flex-direction:column;gap:8px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,0.06);
  margin-top:4px;
}
.event-attendee-search{margin:0;}
.event-attendees-empty{
  padding:8px 6px;font-size:12px;color:var(--text-2, #9aa3b2);text-align:center;
}
.event-attendees-list{
  display:flex;flex-direction:column;gap:4px;
  max-height:160px;
  overflow:auto;
  padding:4px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  background:rgba(0,0,0,0.18);
}
.event-attendee{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
  transition:background .12s;
}
.event-attendee:hover{background:rgba(255,255,255,0.04);}
.event-attendee.is-checked{background:rgba(180,140,220,0.10);}
.event-attendee input[type=checkbox]{
  accent-color:rgb(180,140,220);
  width:14px;height:14px;flex:0 0 auto;cursor:pointer;
}
.event-attendee-name{color:var(--text-0);flex:0 0 auto;}
.event-attendee-email{
  color:var(--text-3, #6e737e);
  font-size:11px;
  margin-left:auto;
  font-family:"JetBrains Mono", monospace;
}
.event-email-toggle{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(180,140,220,0.08);
  border:1px solid rgba(180,140,220,0.20);
  font-size:13px;
  cursor:pointer;
  transition:opacity .15s;
}
.event-email-toggle.is-disabled{
  opacity:0.45;cursor:not-allowed;
}
.event-email-toggle input[type=checkbox]{
  accent-color:rgb(180,140,220);
  width:14px;height:14px;cursor:pointer;
}
.event-email-toggle.is-disabled input[type=checkbox]{cursor:not-allowed;}

/* Email-template subject + body */
.email-subject-row{display:flex;flex-direction:column;gap:6px;}
.email-subject-input{width:100% !important;text-align:left !important;}

/* ---------- Mail-Konto block (Settings → E-Mail) ---------- */
.email-account-status{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);
  background:var(--hover-bg);
  font-size:13px;color:var(--text-1);
}
.email-account-status .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--text-3);
  flex:0 0 auto;
}
.email-account-status .dot.ok{background:#3ad07a;box-shadow:0 0 8px rgba(58,208,122,0.5)}
.email-account-host{color:var(--text-3);font-family:var(--font-mono);font-size:11px;}
.email-account-empty{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.email-account-form{display:flex;flex-direction:column;gap:10px;}
.email-account-form .settings-row .prompt-input{width:240px;text-align:left;}
.email-tls-pick{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.email-tls-pick label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-1);cursor:pointer;}
.email-tls-pick input[type=radio]{accent-color:var(--gold);}
.email-account-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}
.email-account-error{
  padding:8px 12px;border-radius:8px;
  background:rgba(230,154,154,0.10);border:1px solid rgba(230,154,154,0.30);
  color:#e69a9a;font-size:12.5px;
}
.email-account-warning{
  padding:10px 14px;border-radius:10px;
  background:rgba(245,158,11,0.10);border:1px solid rgba(245,158,11,0.30);
  color:#e8b97a;font-size:12.5px;line-height:1.45;
  margin-bottom:6px;
}
.email-account-warning strong{color:#f5b04a;}
/* Rich-text editor for the email template */
.email-body-row{display:flex;flex-direction:column;gap:6px;}
.email-body-row > .prompt-label{margin-bottom:4px;}
.rtf-wrap{
  display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:10px;
  background:rgba(0,0,0,0.35);
  overflow:hidden;
}
.rtf-toolbar{
  display:flex;align-items:center;gap:4px;
  padding:6px 8px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
}
.rtf-toolbar button{
  width:28px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:6px;
  color:var(--text-1, #bfc5d1);
  font-size:12px;
  cursor:pointer;
  transition:background .12s, color .12s;
}
.rtf-toolbar button:hover{color:#fff;background:rgba(255,255,255,0.08);}
.rtf-body{
  padding:12px 14px;
  font-size:13px;
  line-height:1.5;
  color:var(--text-0);
  outline:none;
}
.rtf-body[data-placeholder]:empty::before{
  content:attr(data-placeholder);
  color:var(--text-3, #6e737e);
  pointer-events:none;
}
.rtf-body p{margin:0 0 8px;}
.rtf-body p:last-child{margin-bottom:0;}
.rtf-body ul, .rtf-body ol{margin:0 0 8px;padding-left:22px;}
.email-preview-actions{display:flex;justify-content:flex-end;}
.settings-hint code{
  background:rgba(255,255,255,0.06);
  padding:1px 5px;
  border-radius:4px;
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;
  color:var(--text-1);
}

/* Email preview dialog */
.email-preview-dialog{width:min(640px, 94vw);}
.email-preview-frame{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:10px;
  background:rgba(255,255,255,0.95);
  color:#0f1115;
  overflow:hidden;
}
.email-preview-meta{
  display:flex;gap:10px;align-items:baseline;
  padding:12px 16px;
  border-bottom:1px solid rgba(0,0,0,0.08);
  background:rgba(0,0,0,0.04);
}
.email-preview-meta-label{
  font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(15,17,21,0.55);
  flex:0 0 auto;
}
.email-preview-meta-value{
  font-size:14px;
  font-weight:600;
  color:#0f1115;
}
.email-preview-body{
  padding:16px 18px;
  font-size:13.5px;
  line-height:1.55;
}
.email-preview-body p{margin:0 0 10px;}
.email-preview-body p:last-child{margin-bottom:0;}
.settings-hint{
  font-size:11px;
  line-height:1.4;
  color:var(--text-2, #8a8f9a);
  padding:8px 10px;
  background:rgba(180,140,220,0.06);
  border-left:2px solid rgba(180,140,220,0.45);
  border-radius:4px;
  margin-top:6px;
}
.editor-body.is-editing{
  outline:1px solid rgba(180,140,220,0.25);
  outline-offset:-1px;
  background:rgba(20,20,26,0.35);
  cursor:text;
}
.editor-body.is-editing > p:empty,
.editor-body.is-editing > p:has(> br:only-child){
  min-height:1.4em;
}
.editor-body.is-editing:focus-visible{
  outline-color:rgba(180,140,220,0.5);
}

/* ---------- legacy notes panel ---------- */
.search{
  position:relative;
  margin:14px 14px 10px;
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  background:var(--search-bg);
  border:1px solid var(--line);
  border-radius:10px;
}
.search input{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--text-0);font-size:13px;
}
.search input::placeholder{color:var(--text-3)}
.search .filter{color:var(--text-2)}

.note-list{
  display:flex;flex-direction:column;
  padding:6px 14px 16px;
  flex:1;
  min-height:0;
  overflow:auto;
}

.note-item{
  position:relative;
  text-align:left;
  padding:12px 4px;
  display:flex;flex-direction:column;gap:3px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background .15s;
}
/* note-item more-actions popover */
.note-more-wrap{
  position:absolute;
  top:8px;
  right:8px;
}
.note-more{
  display:grid;place-items:center;
  width:24px;height:24px;
  border-radius:6px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
  color:var(--text-2);
  opacity:0;
  cursor:pointer;
  transition:opacity .15s, background .15s, color .15s, border-color .15s;
}
.note-more svg{width:13px;height:13px}
.note-item:hover .note-more{opacity:1}
.note-more.is-open{opacity:1;color:var(--text-0);background:var(--hover-bg);border-color:var(--line-strong)}
.note-menu{
  position:absolute;
  top:30px;right:0;
  min-width:160px;
  padding:5px;
  background:linear-gradient(180deg, rgba(28,28,34,0.96), rgba(18,18,22,0.96));
  border:1px solid var(--line-strong);
  border-radius:10px;
  box-shadow:0 24px 60px -10px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:20;
  display:flex;flex-direction:column;gap:1px;
  text-align:left;
  cursor:default;
}
.note-menu-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 10px;
  border-radius:7px;
  font-size:12.5px;
  color:var(--text-1);
  cursor:pointer;
  transition:color .15s, background .15s;
}
.note-menu-item:hover{color:var(--text-0);background:var(--hover-bg)}
.note-menu-item.is-danger{color:#e69a9a}
.note-menu-item.is-danger:hover{color:#fff;background:rgba(255,80,80,0.18)}
.note-menu-ic{display:grid;place-items:center;color:var(--text-2)}
.note-menu-ic svg{width:14px;height:14px}
.note-menu-item:hover .note-menu-ic{color:var(--text-0)}
.note-menu-item.is-danger .note-menu-ic{color:#e69a9a}
.note-menu-item.is-danger:hover .note-menu-ic{color:#fff}
.note-item:last-child{border-bottom:0}
.note-item:hover{background:var(--note-hover-bg)}
.note-item.is-active{
  background:var(--active-bg);
  margin:0 -8px;
  padding-left:12px;
  padding-right:12px;
  border-radius:10px;
  border-bottom-color:transparent;
  box-shadow:0 0 0 1px var(--panel-border) inset;
}
.note-title{font-size:13px;font-weight:500;color:var(--text-0);letter-spacing:0.005em}
.note-meta{font-size:11px;color:var(--text-3);letter-spacing:0.01em}
.note-divider{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--text-3);
  padding:14px 4px 6px;
}

/* ---------- editor panel ---------- */
.editor{
  display:flex;flex-direction:column;
}
.editor-body{
  position:relative;
  padding:28px 32px 36px;
  flex:1;
  min-height:0;
  overflow:auto;
  display:flex;flex-direction:column;gap:20px;
}
.editor-body .constellation{
  position:absolute;
  right:-40px;bottom:-30px;
  width:520px;height:380px;
  opacity:0.18;
  pointer-events:none;
}
.editor-body > *{position:relative;z-index:1}

/* document title */
.doc-title{
  font-family:var(--font-ui);
  font-size:clamp(26px, 3.2vw, 38px);
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--text-0);
  line-height:1.15;
  margin:0;
}

/* document sections */
.doc-section{display:flex;flex-direction:column;gap:6px}
.doc-section h3{
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.005em;
  color:var(--text-0);
  margin:0;
}
.doc-section p{
  font-size:13.5px;
  line-height:1.65;
  color:var(--text-1);
  margin:0;
}
.doc-section .highlight{
  display:inline;
  background:linear-gradient(180deg, var(--highlight-bg-1), var(--highlight-bg-2));
  box-shadow:0 0 0 1px var(--highlight-border) inset;
  border-radius:4px;
  padding:1px 2px;
  color:var(--highlight-text);
  position:relative;
}
.doc-section ul{margin:0;padding-left:22px;list-style:disc;display:flex;flex-direction:column;gap:4px}
.doc-section ul li{color:var(--text-1);font-size:13.5px}
.doc-section ul li::marker{color:var(--text-2)}

/* ---------- AI chat (with bubble tail) ---------- */
.chat{
  position:absolute;
  top:130px;right:12px;
  width:210px;
  z-index:20;
  display:flex;flex-direction:column;
  background:
    linear-gradient(180deg, var(--panel-bg-1), var(--panel-bg-2));
  border:1px solid var(--panel-border);
  border-radius:18px;
  box-shadow:
    0 70px 140px -25px rgba(0,0,0,0.6),
    0 30px 60px -15px rgba(0,0,0,0.4),
    0 0 80px -20px rgba(180,180,200,0.15),
    inset 0 1px 0 var(--panel-rim),
    inset 0 0 0 1px rgba(255,255,255,0.02);
  backdrop-filter:blur(48px) saturate(170%);
  -webkit-backdrop-filter:blur(48px) saturate(170%);
  overflow:hidden;
  animation:panelEnter 800ms cubic-bezier(.16,.84,.28,1.02) 120ms both;
  transform-origin:50% 80%;
  transition:background .4s ease, border-color .4s ease;
}
.chat::before{
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.88  0 0 0 0 0.88  0 0 0 0 0.92  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:0.08;
  pointer-events:none;
  mix-blend-mode:overlay;
}
.chat-header{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  cursor:grab;
  user-select:none;
}
.chat-header:active{cursor:grabbing}
.chat-title{flex:1;font-size:13px;font-weight:500;color:var(--text-0)}
.chat-body{
  position:relative;
  padding:14px;
  display:flex;flex-direction:column;gap:10px;
  flex:1;
  min-height:0;
  overflow:auto;
  font-size:12.5px;
  line-height:1.55;
}
.msg{
  position:relative;
  padding:10px 12px;
  border-radius:10px;
  white-space:pre-wrap;
  max-width:100%;
}
.msg.assistant{
  background:var(--chat-msg-bg);
  border:1px solid var(--chat-msg-border);
  color:var(--text-1);
}
.msg.assistant::before{
  /* tail pointing left */
  content:"";
  position:absolute;
  left:-7px;top:14px;
  width:0;height:0;
  border:7px solid transparent;
  border-right-color:var(--chat-msg-bg);
  border-left:0;
}
.msg.user{
  background:var(--chat-user-bg);
  border:1px solid var(--chat-msg-border);
  color:var(--text-0);
  align-self:flex-end;
  max-width:85%;
}
.msg-tts{
  display:block;
  margin:6px 0 0 auto;        /* eigene Zeile, rechtsbündig in der Blase */
  width:24px;height:24px;
  padding:0;
  border:1px solid var(--chat-msg-border);
  background:transparent;
  border-radius:6px;
  cursor:pointer;
  font-size:12px;
  line-height:1;
  opacity:.55;
  transition:opacity .15s ease, background .15s ease, border-color .15s ease;
}
.msg-tts:hover{opacity:1;background:rgba(180,140,220,0.18);border-color:rgba(180,140,220,0.45)}
.msg-tts.is-speaking{opacity:1;background:rgba(180,140,220,0.30);border-color:rgba(180,140,220,0.6)}
/* Gerendertes Markdown in Chat-Nachrichten: Block-Abstände zähmen, kein pre-wrap (sonst
   doppelte Leerzeilen durch die HTML-Newlines des Renderers). */
.msg-md{white-space:normal}
.msg-md > :first-child{margin-top:0}
.msg-md > :last-child{margin-bottom:0}
.msg-md p{margin:0 0 .5em}
.msg-md ul,.msg-md ol{margin:.25em 0 .5em;padding-left:1.25em}
.msg-md li{margin:.1em 0}
.msg-md h1,.msg-md h2,.msg-md h3,.msg-md h4{margin:.5em 0 .25em;font-size:1.05em;font-weight:700;line-height:1.3}
.msg-md code{font-family:var(--mono, "JetBrains Mono", monospace);font-size:.92em;background:rgba(255,255,255,0.08);padding:1px 4px;border-radius:4px}
.msg-md pre{margin:.4em 0;padding:8px 10px;background:rgba(255,255,255,0.06);border-radius:8px;overflow:auto}
.msg-md pre code{background:none;padding:0}
.msg-md blockquote{margin:.4em 0;padding-left:10px;border-left:2px solid var(--line);color:var(--text-1)}
.chat-input{
  position:relative;
  display:flex;align-items:center;
  margin:4px 10px 10px;
  padding:10px 12px;
  background:var(--inset-bg);
  border:1px solid var(--line);
  border-radius:10px;
}
.chat-input input{
  flex:1;background:transparent;border:0;outline:0;
  font-size:12.5px;color:var(--text-0);
}
.chat-input input::placeholder{color:var(--text-3)}
.chat-send{
  width:24px;height:24px;border-radius:6px;
  display:grid;place-items:center;
  color:var(--text-2);
  transition:color .15s, background .15s;
}
.chat-send:hover{color:var(--text-0);background:var(--hover-bg)}
.chat-send:disabled{opacity:0.35;cursor:not-allowed}

.typing{display:inline-flex;gap:3px;align-items:center;height:1em}
.typing span{
  width:5px;height:5px;border-radius:50%;background:var(--text-2);
  animation:typing 1.2s ease-in-out infinite;
}
.typing span:nth-child(2){animation-delay:0.15s}
.typing span:nth-child(3){animation-delay:0.30s}
@keyframes typing{
  0%,80%,100%{opacity:0.3;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-2px)}
}
/* Agent-Tool-Status (während ein Werkzeug läuft, vor der finalen Antwort) */
.tool-note{
  display:inline-block;font-size:0.85em;color:var(--text-2);
  font-style:italic;opacity:0.85;
}
/* Vom Agent aufgelistete Notizen/Dokumente — klickbar, öffnet die Ressource */
.chat-doclink{
  color:var(--accent,#e4c49f);text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;
}
.chat-doclink:hover{opacity:0.8;}

/* ---------- feature row ---------- */
.feature{
  position:relative;
  padding:18px;
  background:
    linear-gradient(180deg, var(--panel-bg-1), var(--panel-bg-2));
  border:1px solid var(--panel-border);
  border-radius:18px;
  display:flex;flex-direction:column;gap:10px;
  min-height:170px;
  backdrop-filter:blur(36px) saturate(160%);
  -webkit-backdrop-filter:blur(36px) saturate(160%);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.55),
    0 18px 36px -10px rgba(0,0,0,0.35),
    0 0 60px -25px rgba(180,180,200,0.18),
    inset 0 1px 0 var(--panel-rim);
  transition:transform .25s ease, border-color .25s, box-shadow .25s, background .4s ease;
  overflow:hidden;
  animation:panelEnter 700ms cubic-bezier(.16,.84,.28,1.02) both;
  transform-origin:50% 100%;
}
.feature:nth-child(1){animation-delay:200ms}
.feature:nth-child(2){animation-delay:280ms}
.feature:nth-child(3){animation-delay:360ms}
.feature:nth-child(4){animation-delay:440ms}
.feature::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.88  0 0 0 0 0.88  0 0 0 0 0.92  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:0.06;pointer-events:none;mix-blend-mode:overlay;
}
.feature::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent 8%, rgba(255,255,255,0.18) 50%, transparent 92%);
  pointer-events:none;
}
.feature > *{position:relative;z-index:1}
.feature:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.16);
  box-shadow:
    0 40px 80px -15px rgba(0,0,0,0.75),
    0 16px 32px -8px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.feature-icon{
  width:32px;height:32px;border-radius:8px;
  display:grid;place-items:center;
  background:var(--feature-icon-bg);
  color:var(--text-1);
  border:1px solid var(--line);
}
.feature-title{
  font-size:16px;
  font-weight:600;
  line-height:1.2;
  color:var(--text-0);
  letter-spacing:-0.005em;
}
.feature-desc{
  font-size:12px;
  line-height:1.55;
  color:var(--text-2);
}

/* ---------- CTA (dark glass) ---------- */
.cta-wrap{
  display:flex;justify-content:center;
  padding:14px 0 16px;
}
.cta{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;
  background:
    linear-gradient(180deg, rgba(50,52,62,0.55), rgba(18,18,24,0.55));
  color:var(--text-0);
  font-family:var(--font-ui);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.06em;
  border:1px solid rgba(255,255,255,0.20);
  border-radius:10px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 25px 50px -10px rgba(0,0,0,0.7),
    0 12px 24px -6px rgba(0,0,0,0.5);
  transition:transform .15s, border-color .25s, box-shadow .25s;
  backdrop-filter:blur(20px) saturate(150%);
}
.cta:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.28);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 16px 36px rgba(0,0,0,0.6);
}
.cta:active{transform:translateY(0)}

/* spark in corner (gold accent) */
.spark{
  position:absolute;right:24px;bottom:24px;
  width:32px;height:32px;
  color:var(--gold);
  filter:drop-shadow(0 0 8px var(--gold-glow));
  pointer-events:none;
  opacity:0.9;
}

/* ---------- responsive: mobile (≤760px) ---------- */
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .menu-toggle{display:none}   /* ≡-Menübutton auf Mobile ausblenden */
  .canvas{padding:18px 14px 90px}
  .tabs{display:none}
  .top-right .year-pill .bell{display:none}
  .year-pill{padding:5px 10px;font-size:11px}
  .topbar{padding:0 14px;gap:10px}
  .workspace{
    min-height:auto;
    display:flex;
    flex-direction:column;
    gap:14px;
    perspective:none;
  }
  .feature-row{grid-template-columns:1fr 1fr;gap:10px}
  .feature{min-height:130px;padding:14px}
  .feature-title{font-size:14px}
  .feature-desc{font-size:11.5px}
  .editor-body{padding:24px 22px 28px}
  .hero{font-size:44px}
  .doc-title{font-size:28px}
  .panel{border-radius:18px}

  /* Mobile: every box becomes a normal in-flow block, stacked one after
     another. Override all desktop floating/drawer/sheet positioning. */
  .workspace > .panel,
  .workspace > .chat{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    transform:none !important;
    animation:none !important;
    z-index:auto !important;
    border-radius:18px !important;
  }
  /* Inner scrollable surfaces get a sensible cap so stacked panels don't
     dominate the page */
  .note-list{max-height:280px}
  .editor-body{max-height:560px}
  .chat-body{max-height:380px}
  .cal-body{max-height:520px}
  .vault-body{max-height:480px}

  /* Drawer scrim & resize handle are off on mobile — no overlay UX */
  .drawer-scrim{display:none !important}
  .resize-handle{display:none}

  /* Dock-Toggle steuert die Sichtbarkeit: Chat-Sheet bzw. Status-Drawer nur
     zeigen, wenn geöffnet (sonst gestapelt-immer-sichtbar → Ein-/Ausblenden wirkungslos) */
  .workspace > .chat:not(.is-open){display:none !important;}
  .workspace > .panel.is-drawer:not(.is-open){display:none !important;}

  /* Chat-Sheet auf Mobile: schwebendes Fenster (wie der Status-Drawer) — leichter Rand
     rundherum + runde Ecken, aber bis knapp über den Dock. Body (flex:1) füllt den Rest,
     kein 380px-Deckel mehr. */
  /* Mobile-Tabs: Chat, Status-Drawer UND Kalender liegen als DECKENDES Vollbild-Overlay
     übereinander (statt in-flow gestapelt). Das per Dock zuletzt getippte kommt via
     data-mobilefront ganz nach vorn (z-index). So „liegt Status/Termine über dem Chat". */
  .workspace > .chat.is-open,
  .workspace > .panel.notes-panel.is-drawer.is-open,
  .workspace > .panel.calendar-panel{
    position:fixed !important;
    top:82px !important; left:14px !important; right:14px !important;
    bottom:calc(90px + env(safe-area-inset-bottom)) !important;
    width:auto !important; max-width:none !important;
    height:auto !important;
    border-radius:18px !important;
    z-index:60 !important;
    background:var(--bg-0) !important;   /* DECKEND — verdeckt, was dahinter liegt */
  }
  /* das vorderste (zuletzt getippte) Panel nach ganz oben */
  .workspace[data-mobilefront="chat"] > .chat.is-open,
  .workspace[data-mobilefront="status"] > .panel.notes-panel.is-drawer.is-open,
  .workspace[data-mobilefront="cal"] > .panel.calendar-panel{ z-index:70 !important; }
  .workspace > .chat.is-open .chat-body{max-height:none !important;}

  /* Kalender-Kopf auf Mobile: der Datums-Bereich ("25. Mai – 31, 2026") darf nicht
     zwischen Nav und Tag/Woche/Monat auf 2–3 Zeilen zerquetscht werden. Stattdessen
     bekommt er eine eigene, einzeilige Zeile ganz oben; darunter Nav (links) + Switch. */
  .cal-toolbar{flex-wrap:wrap; column-gap:8px; row-gap:10px;}
  .cal-label{flex:1 0 100%; order:-1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .cal-nav{margin-right:auto;}

  /* Mobile dock at the bottom (replaces rail) */
  .mobile-dock{
    position:fixed;bottom:0;left:0;right:0;
    padding:8px 10px max(14px, env(safe-area-inset-bottom));
    display:flex;justify-content:space-around;align-items:center;
    background:linear-gradient(180deg, rgba(10,10,14,0.65), rgba(10,10,14,0.92));
    border-top:1px solid var(--line);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    z-index:50;
  }
  .dock-btn{
    width:56px;height:46px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;
    color:rgba(255,255,255,0.5);
    font-size:9.5px;font-weight:500;letter-spacing:0.04em;
    border-radius:10px;
    transition:color .15s;
  }
  .dock-btn.is-active{color:var(--text-0)}
  .dock-btn .dock-ic{display:grid;place-items:center}
  .dock-brain{
    width:54px;height:54px;
    margin-top:-18px;
    display:grid;place-items:center;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #6a4d28, #2a1f10);
    box-shadow:0 0 24px var(--gold-glow), 0 8px 20px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(220,180,110,0.4);
    /* Push-to-Talk (Halten): Touch-Gesten/Callout unterdrücken, sonst bricht die Aufnahme ab. */
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
  }
  .dock-brain svg{width:30px;height:30px;color:var(--gold)}
  .dock-brain.is-recording{
    background:radial-gradient(circle at 35% 30%, #7a2a2a, #2a1010);
    box-shadow:0 0 24px rgba(220,70,70,0.6), 0 8px 20px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(220,90,90,0.5);
    animation:micPulse 1.2s ease-in-out infinite;
  }
  .dock-brain.is-recording svg{color:#ff6b6b}
  .brain-mark{display:none}
  .floor-grid{display:none}
}
/* hide mobile dock on desktop */
@media (min-width:761px){
  .mobile-dock{display:none}
  .drawer-scrim{display:none}
}

/* ============================================================
   Dashboard panels (dashboard.jsx)
   Each dash-panel is a standard .panel floating window — only
   the body content is panel-specific.
   ============================================================ */

.dash-panel{
  display:flex;
  flex-direction:column;
}
.dash-body{
  flex:1;
  padding:18px 22px 22px;
  overflow:auto;
  display:flex;
  flex-direction:column;
}

/* tone helpers — used by tiles, activity icons, lineage dots, sparklines */
.dash-tone-gold   { color:var(--gold)                       }
.dash-tone-violet { color:oklch(0.70 0.13 295)              }
.dash-tone-emerald{ color:oklch(0.75 0.13 150)              }
.dash-tone-mute   { color:var(--text-2)                     }

/* ---------- Hero ---------- */
.dash-hero-body{position:relative;overflow:hidden}
.dash-hero-body::before{
  content:"";position:absolute;top:-30%;right:-20%;
  width:380px;height:380px;
  background:radial-gradient(circle, var(--gold-glow), transparent 70%);
  filter:blur(40px);pointer-events:none;opacity:0.55;
}
.dash-eyebrow{
  font-family:var(--font-mono);font-size:10.5px;
  color:var(--gold);letter-spacing:0.22em;
  text-transform:uppercase;margin-bottom:12px;
  position:relative;
}
.dash-h-title{
  font-family:var(--font-display);
  font-size:32px;line-height:1.05;letter-spacing:-0.01em;
  color:var(--text-0);margin:0 0 12px;position:relative;
}
.dash-h-sub{
  color:var(--text-2);font-size:14px;line-height:1.6;
  margin:0 0 20px;max-width:540px;position:relative;
}
.dash-h-quote{
  color:var(--text-1);font-style:italic;font-size:14px;line-height:1.5;
  font-family:"Hanken Grotesk", Inter, sans-serif;
  margin:0 0 20px;max-width:540px;position:relative;
  padding-left:12px;border-left:2px solid rgba(199,154,90,0.6);
}
.dash-stats{display:flex;gap:32px;flex-wrap:wrap;position:relative}
.dash-stat-num{
  font-family:var(--font-display);
  font-size:24px;color:var(--text-0);
  letter-spacing:-0.01em;line-height:1;
}
.dash-stat-label{
  font-size:10.5px;color:var(--text-3);
  letter-spacing:0.18em;text-transform:uppercase;margin-top:6px;
}
.dash-stat-delta{
  font-size:10.5px;color:oklch(0.75 0.13 150);
  font-family:var(--font-mono);margin-top:2px;
}

/* ---------- Metrics — row list ---------- */
.dash-metrics-list{display:flex;flex-direction:column;gap:0;padding:8px 0}
.dash-row{
  display:grid;
  grid-template-columns:auto 1fr minmax(180px, 28%);
  align-items:center;
  gap:14px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.dash-row:last-child{border-bottom:none}
.dash-row-icon{
  position:relative;
  width:38px;height:38px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.dash-row-icon svg{width:16px;height:16px;opacity:0.85}
.dash-row-dot{
  position:absolute;
  top:50%;left:50%;
  width:10px;height:10px;
  border-radius:50%;
  background:currentColor;
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px currentColor;
  opacity:0.95;
}
.dash-row-icon svg{position:relative;z-index:1}
.dash-row-icon .dash-row-dot{z-index:0;width:34px;height:34px;opacity:0.18;box-shadow:none}
.dash-row-text{min-width:0}
.dash-row-title{
  font-size:14px;font-weight:600;
  color:var(--text-0);
  letter-spacing:-0.005em;
  margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dash-row-sub{
  font-size:11.5px;
  color:var(--text-3);
  letter-spacing:0.01em;
}
.dash-row-meta{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "status pct"
    "bar bar";
  column-gap:12px;
  row-gap:6px;
  align-items:center;
}
.dash-row-status{
  grid-area:status;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:currentColor;
  opacity:0.95;
}
.dash-row-status.is-down{opacity:0.55}
.dash-row-pct{
  grid-area:pct;
  justify-self:end;
  font-size:12px;
  font-weight:600;
  color:var(--text-1);
  font-variant-numeric:tabular-nums;
}
.dash-row-pct.is-down{color:var(--text-3)}
.dash-row-bar{
  grid-area:bar;
  height:2px;
  background:rgba(255,255,255,0.06);
  border-radius:2px;
  overflow:hidden;
  position:relative;
}
.dash-row-bar > span{
  display:block;height:100%;
  background:currentColor;
  border-radius:2px;
  box-shadow:0 0 6px currentColor;
  opacity:0.85;
  transition:width .4s ease;
}
@media (max-width:640px){
  .dash-row{grid-template-columns:auto 1fr;gap:10px;padding:12px 14px}
  .dash-row-meta{grid-column:1 / -1}
}

/* ---------- Metrics — legacy tile grid (still used by older code paths) ---------- */
.dash-metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dash-tile{
  background:var(--hover-bg);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:14px 16px;
  display:flex;flex-direction:column;
  gap:6px;
  transition:transform .2s, border-color .2s;
}
.dash-tile:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.dash-tile-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.dash-tile-icon{
  width:28px;height:28px;border-radius:7px;
  display:grid;place-items:center;
}
.dash-tile-icon.dash-tone-gold   {background:rgba(184,150,110,0.18)}
.dash-tile-icon.dash-tone-violet {background:rgba(155,127,201,0.18)}
.dash-tile-icon.dash-tone-emerald{background:rgba(127,191,154,0.16)}
.dash-tile-icon.dash-tone-mute   {background:var(--feature-icon-bg)}
.dash-tile-icon svg{width:14px;height:14px}
.dash-tile-delta{
  font-family:var(--font-mono);font-size:10.5px;
  color:oklch(0.75 0.13 150);
}
.dash-tile-delta.is-down{color:oklch(0.70 0.13 28)}
.dash-tile-num{
  font-family:var(--font-display);font-size:24px;
  color:var(--text-0);line-height:1;letter-spacing:-0.01em;
}
.dash-tile-label{
  font-size:11.5px;color:var(--text-3);
  letter-spacing:0.04em;
}
.dash-spark{
  margin-top:6px;height:26px;
  display:flex;align-items:flex-end;gap:2px;
}
.dash-spark span{
  flex:1;border-radius:2px 2px 0 0;
  opacity:0.8;
  background:linear-gradient(180deg, currentColor, rgba(255,255,255,0.04));
}
.dash-spark.dash-tone-gold    span{color:var(--gold)}
.dash-spark.dash-tone-violet  span{color:oklch(0.70 0.13 295)}
.dash-spark.dash-tone-emerald span{color:oklch(0.75 0.13 150)}
.dash-spark.dash-tone-mute    span{color:var(--text-1);opacity:0.4}

/* ---------- Calendar ---------- */
/* No internal scrollbar — cells shrink to fit the panel body. */
.dash-cal-body{padding-top:4px;overflow:hidden}
.dash-cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  margin-bottom:8px;
}
.dash-cal-hd{
  font-family:var(--font-mono);font-size:10px;
  color:var(--text-3);text-align:center;
  text-transform:uppercase;letter-spacing:0.16em;
  padding:2px 0 6px;
}
.dash-cd{
  aspect-ratio:1;border-radius:8px;
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:12px;
  color:var(--text-2);
  background:var(--hover-bg);
  border:1px solid var(--line);
  cursor:default;position:relative;
  transition:transform .15s, border-color .15s, background .15s, color .15s;
}
.dash-cd.muted{
  color:var(--text-3);opacity:0.35;
  background:transparent;border-color:transparent;
}
.dash-cd.today{
  background:linear-gradient(135deg, var(--gold), oklch(0.55 0.10 70));
  color:var(--text-0);font-weight:700;
  border-color:transparent;
  box-shadow:0 0 16px var(--gold-glow);
  /* dark ink on gold — readable in both themes */
  -webkit-text-stroke:0.4px rgba(0,0,0,0.5);
}
.dash-cd.has{
  background:rgba(184,150,110,0.10);
  border-color:rgba(184,150,110,0.32);
  color:var(--text-0);cursor:pointer;
}
.dash-cd.has::after{
  content:"";position:absolute;
  bottom:4px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 6px var(--gold-glow);
}
.dash-cd.has:hover{
  transform:translateY(-1px);
  border-color:var(--gold);
  background:rgba(184,150,110,0.18);
}
.dash-cd-count{
  position:absolute;top:2px;right:4px;
  font-size:9px;color:var(--gold);
  font-family:var(--font-mono);line-height:1;
}
.dash-cal-hint{
  font-family:var(--font-mono);font-size:10px;
  color:var(--text-3);text-align:center;
  letter-spacing:0.05em;
}

/* Calendar event dialog (portal — sits above the panels) */
.dash-dlg-back{
  position:fixed;inset:0;z-index:1000;
  background:rgba(5,7,12,0.62);
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  display:grid;place-items:center;
  padding:20px;
  animation:dashDlgFade 220ms ease-out both;
}
@keyframes dashDlgFade{from{opacity:0}to{opacity:1}}
.dash-dlg{
  width:min(540px, 100%);
  max-height:84vh;overflow:auto;
  background:linear-gradient(180deg, var(--panel-bg-1), var(--panel-bg-2));
  border:1px solid var(--panel-border);
  border-radius:var(--radius-l);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.75),
    inset 0 1px 0 var(--panel-rim);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  animation:dashDlgIn 280ms cubic-bezier(.16,.84,.28,1.02) both;
}
@keyframes dashDlgIn{
  from{opacity:0;transform:translateY(12px) scale(0.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.dash-dlg-head{
  padding:20px 22px 14px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  border-bottom:1px solid var(--line);
}
.dash-dlg-eyebrow{
  font-family:var(--font-mono);font-size:10.5px;
  color:var(--gold);letter-spacing:0.22em;
  text-transform:uppercase;margin-bottom:6px;
}
.dash-dlg-title{
  font-family:var(--font-display);font-size:20px;
  color:var(--text-0);letter-spacing:-0.01em;line-height:1.15;
}
.dash-dlg-body{padding:14px 22px 22px;display:flex;flex-direction:column;gap:10px}
.dash-ev{
  display:grid;grid-template-columns:74px 1fr;gap:14px;
  padding:12px 14px;border-radius:12px;
  background:var(--hover-bg);
  border-left:3px solid var(--gold);
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.dash-ev.dash-ev-v{border-left-color:oklch(0.70 0.13 295)}
.dash-ev.dash-ev-c{border-left-color:oklch(0.78 0.10 215)}
.dash-ev.dash-ev-e{border-left-color:oklch(0.75 0.13 150)}
.dash-ev-time{
  font-family:var(--font-mono);font-size:12px;
  color:var(--text-1);font-weight:500;align-self:start;
}
.dash-ev-title{
  font-size:13px;color:var(--text-0);font-weight:500;line-height:1.4;
}
.dash-ev-sub{
  font-size:11px;color:var(--text-3);
  font-family:var(--font-mono);margin-top:3px;letter-spacing:0.02em;
}
.dash-dlg-empty{
  color:var(--text-3);font-family:var(--font-mono);
  font-size:12px;letter-spacing:0.04em;
  text-align:center;padding:24px 0;
}
.dash-dlg-new{
  display:inline-flex;align-items:center;gap:8px;
  margin:14px auto 4px;
  padding:8px 16px;
  font-size:12px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--text-0);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.20);
  border-radius:8px;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .08s;
  box-shadow:0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
  align-self:center;
}
.dash-dlg-new:hover{
  background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border-color:rgba(255,255,255,0.30);
}
.dash-dlg-new:active{transform:translateY(1px);}
.dash-dlg-new svg{width:14px;height:14px;}

/* ---------- Activity ---------- */
.dash-activity-body{gap:0;padding-top:8px}
.dash-act-row{
  display:grid;grid-template-columns:32px 1fr auto;gap:12px;
  padding:12px 0;border-top:1px solid var(--line);
  align-items:center;
}
.dash-act-row:first-of-type{border-top:0;padding-top:6px}
.dash-act-icon{
  width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;
  background:var(--feature-icon-bg);
}
.dash-act-icon.dash-tone-gold   {background:rgba(184,150,110,0.18)}
.dash-act-icon.dash-tone-violet {background:rgba(155,127,201,0.15)}
.dash-act-icon.dash-tone-emerald{background:rgba(127,191,154,0.15)}
.dash-act-icon svg{width:13px;height:13px}
.dash-act-body{font-size:12.5px;color:var(--text-1);line-height:1.5}
.dash-act-body b{color:var(--text-0);font-weight:600}
.dash-act-time{
  font-family:var(--font-mono);font-size:10.5px;
  color:var(--text-3);white-space:nowrap;
}

/* ---------- Lineage ---------- */
.dash-lineage-body{gap:10px;padding-top:8px}
.dash-lin-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);
  background:var(--hover-bg);
}
.dash-dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 8px;
  background:currentColor;
  box-shadow:0 0 10px currentColor;
}
.dash-lin-text{flex:1;min-width:0}
.dash-lin-title{
  font-size:13px;color:var(--text-0);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dash-lin-sub{
  font-size:11px;color:var(--text-3);
  font-family:var(--font-mono);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dash-lin-pill{
  font-size:9.5px;color:var(--text-2);
  border:1px solid var(--line);padding:2px 7px;border-radius:99px;
  text-transform:uppercase;letter-spacing:0.12em;
  font-family:var(--font-mono);
}

/* ---------- AI preview ---------- */
.dash-ai-body{gap:14px}
.dash-msg{display:flex;gap:12px}
.dash-av{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  font-size:11px;font-weight:700;flex:0 0 30px;
}
.dash-av-u{
  background:var(--chat-msg-bg);
  color:var(--text-1);
  border:1px solid var(--chat-msg-border);
}
.dash-av-ai{
  background:linear-gradient(135deg, var(--gold), oklch(0.55 0.10 70));
  color:var(--text-0);
  -webkit-text-stroke:0.4px rgba(0,0,0,0.5);
}
.dash-msg-text{
  font-size:13px;color:var(--text-1);line-height:1.6;
  flex:1;min-width:0;
}
.dash-msg-text b{color:var(--text-0)}
.dash-ai-input{
  margin-top:auto;display:flex;gap:10px;align-items:center;
  padding:10px 12px;background:var(--inset-bg);
  border:1px solid var(--line);border-radius:10px;
}
.dash-ai-input input{
  flex:1;background:none;border:0;outline:none;
  color:var(--text-0);font-size:13px;
}
.dash-ai-input input::placeholder{color:var(--text-3)}
.dash-ai-send{
  background:var(--gold);color:var(--text-0);border:0;
  padding:8px 14px;border-radius:8px;
  font-weight:700;font-size:12px;cursor:pointer;
  font-family:var(--font-ui);letter-spacing:0.02em;
  -webkit-text-stroke:0.4px rgba(0,0,0,0.5);
}
.dash-ai-send:hover{filter:brightness(1.08)}

/* ---------- Settings — Dashboard section ---------- */
.dash-cfg{display:flex;flex-direction:column;gap:8px}
.dash-cfg-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);
  background:var(--hover-bg);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.dash-cfg-row:hover{border-color:var(--line-strong);background:var(--active-bg)}
.dash-cfg-row input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px;cursor:pointer}
.dash-cfg-label{flex:1;font-size:13.5px;color:var(--text-0)}
.dash-cfg-key{
  font-family:var(--font-mono);font-size:10.5px;
  color:var(--text-3);letter-spacing:0.08em;
}

/* Theme skins live in themes/*.css and are loaded separately from Skarvex.html.
   Each skin is scoped to body[data-bg="<id>"] and only takes effect when the
   user picks that variant in Settings → Theme.
   Currently: themes/forge.css. */


/* ---------- Verlauf (letzte Aktivitäten) ---------- */
.verlauf-dialog{width:min(560px,92vw);}
.verlauf-body{max-height:60vh;overflow:auto;padding:6px 16px 14px;}
.verlauf-empty{padding:18px;text-align:center;color:var(--text-2);}
.verlauf-list{display:flex;flex-direction:column;}
.verlauf-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,0.06);}
.verlauf-type{flex:none;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,0.08);color:var(--text-1);min-width:64px;text-align:center;}
.verlauf-type.t-docs{background:rgba(214,181,107,0.20);}
.verlauf-type.t-rag-doc{background:rgba(120,160,220,0.20);}
.verlauf-type.t-bild{background:rgba(180,140,220,0.20);}
.verlauf-type.t-termin{background:rgba(110,220,160,0.20);}
.verlauf-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.verlauf-time{flex:none;font-size:11px;color:var(--text-2);}

/* Settings → Export */
.export-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-1);cursor:pointer;padding:3px 0;}
.export-row input{accent-color:var(--gold);}

/* ---------- Dashboard-Kennzahlen: Ring-Grafik (statt Balken) ---------- */
.dash-metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;}
.dash-metric-tile{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,0.07);border-radius:12px;background:rgba(255,255,255,0.02);min-width:0;}
.dash-ring{flex:none;}
.dash-ring-track{fill:none;stroke:rgba(255,255,255,0.10);stroke-width:8;}
.dash-ring-fill{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s ease;}
.dash-ring-num{fill:var(--text-0);font-size:26px;font-weight:700;font-family:"Archivo Black",sans-serif;}
.dash-metric-text{min-width:0;}
.dash-metric-label{font-weight:700;font-size:14px;}
.dash-metric-sub{font-size:11px;color:var(--text-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Dashboard Docs/Bilder — klickbare Zeilen + Leerzustand */
.dash-empty{padding:18px;text-align:center;color:var(--text-2);font-size:13px;}
.dash-act-row.is-click, .dash-lin-row.is-click{cursor:pointer;border-radius:8px;transition:background .12s;}
.dash-act-row.is-click:hover, .dash-lin-row.is-click:hover{background:rgba(255,255,255,0.05);}

/* Bilder-Galerie als schmale Liste (wie Docs) statt breitem Grid */
.gallery-list{display:flex;flex-direction:column;gap:4px;padding:4px 10px 12px;}
.gallery-list-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:background .12s,border-color .12s;}
.gallery-list-row:hover{background:rgba(255,255,255,0.04);}
.gallery-list-row.is-active{background:rgba(180,140,220,0.14);border-color:rgba(180,140,220,0.40);}
.gallery-thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;flex:none;background:rgba(255,255,255,0.05);}
.gallery-list-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.gallery-list-title{font-size:13px;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gallery-list-row .gallery-menu{position:static;flex:none;opacity:0;transition:opacity .12s;}
.gallery-list-row:hover .gallery-menu{opacity:1;}
/* More-Button in der Bilder-Liste: gleiches dezente Design wie die Docs-Liste (.note-more) */
.gallery-list-row .gallery-menu .icon-btn{
  width:24px;height:24px;border-radius:6px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
  color:var(--text-2);
}
.gallery-list-row .gallery-menu .icon-btn:hover,
.gallery-list-row .gallery-menu .icon-btn.is-active{color:var(--text-0);background:var(--hover-bg);border-color:var(--line-strong)}
.gallery-list-row .gallery-menu .icon-btn svg{width:13px;height:13px}

/* RAG-Badge in der Docs-Liste */
.note-rag-badge{margin-left:8px;}

/* RAG-Docs: Badge auf eigener Zeile (in der schmalen Liste sonst abgeschnitten) */
.docs-badge-line{margin-top:4px;}

/* RAG-Docs-Zeile klickbar (Klick öffnet Vorschau) */
.docs-upload-row.is-click{cursor:pointer;}
.docs-upload-row.is-click:hover{background:rgba(255,255,255,0.04);}
.docs-upload-row.is-active{background:rgba(180,140,220,0.14);border:1px solid rgba(180,140,220,0.40);}

/* Notiz-Vorschau: RAG-Text-Tab + In-Notiz-Suche (Original-Tab Lesemodus) */
.rag-text-view{white-space:pre-wrap;overflow:auto;padding:14px 18px;font-size:13.5px;line-height:1.6;color:var(--text-1);}
.rag-text-view mark.hl{background:rgba(220,200,90,0.30);color:inherit;border-radius:2px;}
.rag-text-view mark.hl.is-cur{background:#f4c542;color:#1a1a1a;}
.editor-body mark.find-hl{background:rgba(220,200,90,0.30);color:inherit;border-radius:2px;}
.editor-body mark.find-hl.is-cur{background:#f4c542;color:#1a1a1a;}

/* ---- Audit-Log (Settings → Sicherheit) ---- */
.audit-table-wrap{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-m);margin-top:4px;}
.audit-table{width:100%;border-collapse:collapse;font-size:12px;}
.audit-table thead th{position:sticky;top:0;background:var(--inset-bg);text-align:left;padding:8px 10px;color:var(--text-3);font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap;}
.audit-table td{padding:7px 10px;border-bottom:1px solid var(--line);color:var(--text-2);vertical-align:top;}
.audit-table tbody tr:last-child td{border-bottom:none;}
.audit-table tbody tr:hover td{background:var(--hover-bg);}
.audit-time{white-space:nowrap;color:var(--text-3);font-variant-numeric:tabular-nums;}
.audit-method{font-family:var(--font-mono);font-size:11px;font-weight:600;padding:1px 6px;border-radius:6px;background:var(--chip-bg);color:var(--text-1);}
.audit-entity{font-family:var(--font-mono);font-size:11px;color:var(--text-2);word-break:break-all;}
.audit-ok{color:var(--text-2);font-variant-numeric:tabular-nums;}
.audit-bad{color:var(--danger);font-weight:600;font-variant-numeric:tabular-nums;}

/* ---- Gefahrenzone (Werkeinstellung) ---- */
.danger-zone{margin-top:18px;padding:14px;border:1px solid var(--danger);border-radius:var(--radius-m);background:rgba(255,80,80,0.05);}
.danger-title{color:var(--danger);}
.btn.is-danger{background:var(--danger);color:#fff;border:1px solid var(--danger);}
.btn.is-danger:hover:not(:disabled){filter:brightness(1.08);}
.btn.is-danger:disabled{opacity:0.5;cursor:not-allowed;}

/* ---- Agent-Confirm-Karte im Chat (Phase-7-Bestätigung) ---- */
.chat-confirm{margin:8px 0 4px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-m);background:var(--inset-bg);}
.chat-confirm-q{font-size:14px;color:var(--text-1);margin-bottom:10px;}
.chat-confirm-actions{display:flex;gap:8px;}