/* ══════════════════════════════════════════════════════════════════
   Alva Code IDE — 1:1 Nachbau des Coding-Chat-Panels.
   Alle Werte stammen aus der echten App:
     frontend/src/components/coding/coding-chat-panel.tsx
     frontend/src/components/coding/chat-message-renderer.tsx
     frontend/src/components/coding/composer-styles.ts
     frontend/src/components/coding/unified-model-selector.tsx
     frontend/src/index.css   (.coding-bg-*, .coding-glass)
   Tailwind-Klassen wurden zu ihren konkreten Farbwerten aufgelöst.
   ══════════════════════════════════════════════════════════════════ */

/* — Tailwind-Palette, exakt wie in der App verwendet — */
:root{
  --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569;
  --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a;
  --cyan-300:#67e8f9;  --cyan-400:#22d3ee;  --cyan-500:#06b6d4;
  --cyan-600:#0891b2;  --cyan-700:#0e7490;
  --teal-600:#0d9488;
  --amber-300:#fcd34d; --amber-400:#fbbf24; --amber-500:#f59e0b;
  --blue-400:#60a5fa;  --blue-500:#3b82f6;
  --violet-400:#a78bfa;
  --purple-400:#c084fc;
  --emerald-500:#10b981;
  --red-500:#ef4444;
  --orange-500:#f97316;

  /* index.css: --coding-base (dark default) + .coding-bg-* */
  --coding-base: 24,24,27;
  --coding-bg-dark:   rgb(30,30,30);
  --coding-bg-darker: rgb(37,37,38);
  --coding-border:    rgb(60,60,60);
}

*{box-sizing:border-box;margin:0;padding:0}

html{overflow:hidden}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#08080a;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:32px 16px;
  -webkit-font-smoothing:antialiased;
}

/* ── Fensterrahmen (entspricht .coding-glass in AlvaCode.tsx) ── */
.alva-window{
  width:100%; max-width:520px; height:660px;
  background-color:rgb(var(--coding-base));
  border:1px solid rgba(255,255,255,.14);      /* --coding-line-strong */
  border-radius:14px;
  box-shadow:0 32px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.4);
  overflow:hidden;
  display:flex; flex-direction:column;
  position:relative;
}

/* ══ Header ══ coding-chat-panel.tsx:7276
   "flex items-center justify-between px-4 py-3 border-b
    border-slate-700/50 coding-bg-dark shrink-0"                     */
.alva-chat-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid rgba(51,65,85,.5);
  background-color:var(--coding-bg-dark);
  flex-shrink:0;
}
.hdr-left{display:flex; align-items:center; gap:8px}
/* "h-7 w-7 bg-gradient-to-br from-cyan-500 to-teal-600 rounded-lg" */
.hdr-logo{
  height:28px; width:28px; border-radius:8px;
  background:linear-gradient(to bottom right, var(--cyan-500), var(--teal-600));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.hdr-logo svg{height:16px; width:16px; color:#fff}
/* "text-xs font-black text-slate-200" */
.hdr-title{font-size:12px; line-height:16px; font-weight:900; color:var(--slate-200)}
/* "text-[10px] text-slate-400 font-medium" */
.hdr-sub{font-size:10px; line-height:14px; color:var(--slate-400); font-weight:500}
.hdr-right{display:flex; align-items:center; gap:4px}
/* "p-1.5 rounded-lg text-slate-400 hover:text-cyan-400 hover:bg-cyan-500/10" */
.hdr-btn{
  padding:6px; border-radius:8px; background:none; border:none; cursor:pointer;
  color:var(--slate-400); display:flex; transition:color .15s, background-color .15s;
}
.hdr-btn svg{height:16px; width:16px}
.hdr-btn:hover{color:var(--cyan-400); background:rgba(6,182,212,.1)}
.hdr-btn.amber:hover{color:var(--amber-400); background:rgba(245,158,11,.1)}
.hdr-btn.plain:hover{color:var(--slate-200); background:var(--slate-800)}

/* ══ Agent-Tab-Bar ══ coding-chat-panel.tsx:7351
   "flex items-center gap-0.5 px-1 py-0.5 border-b overflow-x-auto
    border-slate-700/50 bg-slate-900/80"                             */
.alva-tabs{
  display:flex; align-items:center; gap:2px;
  padding:2px 4px;
  border-bottom:1px solid rgba(51,65,85,.5);
  background:rgba(15,23,42,.8);
  flex-shrink:0;
}
/* aktiver Tab: "bg-cyan-500/15 border border-cyan-500/30 text-cyan-300" */
.tab{
  display:flex; align-items:center; gap:4px;
  padding:4px 8px; border-radius:6px;
  font-size:10px; line-height:14px; font-weight:500;
  white-space:nowrap; max-width:160px;
  background:rgba(6,182,212,.15);
  border:1px solid rgba(6,182,212,.3);
  color:var(--cyan-300);
  cursor:pointer;
}
.tab svg{height:12px; width:12px; color:var(--slate-500); flex-shrink:0}
.tab .tab-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tab-add{
  padding:4px 6px; border-radius:6px; background:none; border:1px solid transparent;
  color:var(--slate-500); cursor:pointer; display:flex;
}
.tab-add svg{height:12px; width:12px}
.tab-bell{margin-left:auto; padding:4px 6px; color:var(--slate-500); display:flex}
.tab-bell svg{height:14px; width:14px}

/* ══ Offene-Datei-Chip ══ */
.file-strip{
  display:flex; align-items:center; gap:6px;
  padding:5px 8px;
  border-bottom:1px solid rgba(51,65,85,.5);
  background:rgba(15,23,42,.55);
  flex-shrink:0;
}
.file-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; border-radius:6px;
  background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.22);
  font-size:11px; font-weight:600; color:var(--slate-300);
  font-family:'JetBrains Mono',monospace;
}
.file-chip svg{height:12px; width:12px; color:var(--cyan-400)}
.file-chip .lang{color:var(--cyan-400); font-weight:700}

/* ══ Nachrichtenbereich ══ */
.alva-messages{
  flex:1; min-height:0; overflow-y:auto;
  padding:12px; display:flex; flex-direction:column; gap:10px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.alva-messages::-webkit-scrollbar{display:none}

/* User-Bubble — chat-message-renderer.tsx:1223
   "rounded-2xl px-4 py-3 text-sm leading-relaxed bg-[#046981] text-white ml-8" */
.msg-user{
  border-radius:16px; padding:12px 16px;
  font-size:14px; line-height:1.625;
  background:#046981; color:#fff;
  margin-left:32px;
}
/* Zeitstempel: "text-[10px] font-medium mb-1 text-right text-white/60" */
.msg-user .ts{font-size:10px; font-weight:500; margin-bottom:4px; text-align:right; color:rgba(255,255,255,.6)}
.msg-user code{
  font-family:'JetBrains Mono',monospace; font-size:12.5px;
  background:rgba(255,255,255,.13); padding:1px 5px; border-radius:4px;
}

/* Assistant-Bubble — chat-message-renderer.tsx:1231
   "bg-slate-800/80 text-slate-200 mr-4 border border-slate-700/50 shadow-sm" */
.msg-assistant{
  border-radius:16px; padding:12px 16px;
  font-size:14px; line-height:1.625;
  background:rgba(30,41,59,.8); color:var(--slate-200);
  margin-right:16px;
  border:1px solid rgba(51,65,85,.5);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.msg-assistant .ts{font-size:10px; font-weight:500; margin-bottom:4px; text-align:right; color:var(--slate-500)}
.msg-assistant p{margin-bottom:8px}
.msg-assistant p:last-of-type{margin-bottom:0}
.msg-assistant code{
  font-family:'JetBrains Mono',monospace; font-size:12.5px;
  color:var(--cyan-400); background:rgba(6,182,212,.1);
  padding:1px 5px; border-radius:4px;
}
.msg-assistant strong{color:#fff; font-weight:700}

/* System-Marker (Engine-Wechsel) — chat-message-renderer.tsx:1228
   "bg-blue-500/10 text-blue-300 mx-4 border border-blue-500/30
    text-center text-xs font-medium rounded-2xl px-4 py-3"           */
.msg-system{
  border-radius:16px; padding:10px 16px;
  margin:0 16px;
  background:rgba(59,130,246,.1); color:#93c5fd;
  border:1px solid rgba(59,130,246,.3);
  text-align:center; font-size:12px; line-height:1.6; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.msg-system svg{height:13px; width:13px; flex-shrink:0}

/* Code-Block im Assistant-Text */
.code-block{
  margin:8px 0; border-radius:8px; overflow:hidden;
  border:1px solid rgba(51,65,85,.6); background:#0d1117;
}
.code-block .cb-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 10px; background:rgba(15,23,42,.9);
  border-bottom:1px solid rgba(51,65,85,.6);
  font-size:10px; font-weight:700; color:var(--slate-400);
  text-transform:uppercase; letter-spacing:.05em;
}
.code-block pre{
  padding:10px 12px; overflow-x:auto;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; line-height:1.7;
  color:var(--slate-300);
}
.tok-key{color:#c792ea}.tok-fn{color:#82aaff}.tok-str{color:#c3e88d}.tok-com{color:#546e7a}

/* Message-Actions — chat-message-renderer.tsx:837
   "mt-2 flex flex-wrap items-center gap-0.5 border-t pt-1.5"        */
.msg-actions{
  margin-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:2px;
  border-top:1px solid rgba(51,65,85,.7); padding-top:6px;
}
.msg-user .msg-actions{border-top-color:rgba(255,255,255,.15)}
/* "inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[10px] font-medium" */
.msg-actions button{
  display:inline-flex; align-items:center; gap:4px;
  border-radius:6px; padding:4px 6px;
  font-size:10px; font-weight:500; font-family:inherit;
  background:none; border:none; cursor:pointer;
  color:var(--slate-500); transition:background-color .15s,color .15s;
}
.msg-user .msg-actions button{color:rgba(255,255,255,.65)}
.msg-actions button:hover{background:rgba(51,65,85,.6); color:var(--slate-300)}
.msg-user .msg-actions button:hover{background:rgba(255,255,255,.1); color:#fff}
.msg-actions button svg{height:14px; width:14px}

/* ══ Composer ══ coding-chat-panel.tsx:8215
   "border-t border-slate-700/50 coding-bg-dark"                     */
.alva-composer{
  border-top:1px solid rgba(51,65,85,.5);
  background-color:var(--coding-bg-dark);
  flex-shrink:0; position:relative;
}
/* Mode-Tabs — "flex items-center gap-1 px-3 pt-2.5 pb-1" */
.mode-tabs{display:flex; align-items:center; gap:4px; padding:10px 12px 4px}
/* "flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5
    rounded-lg text-xs font-bold border" — inaktiv: text-slate-500 */
.mode-tab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:6px 8px; border-radius:8px;
  font-size:12px; line-height:16px; font-weight:700; font-family:inherit;
  border:1px solid transparent; background:none; cursor:pointer;
  color:var(--slate-500); transition:all .18s;
}
.mode-tab svg{height:14px; width:14px}
.mode-tab:hover{background:rgba(30,41,59,.6); color:var(--slate-300)}
/* MODE_CONFIG.chat.activeColorDark: "bg-blue-500/15 text-blue-400 border-blue-400/40" */
.mode-tab.active-chat{background:rgba(59,130,246,.15); color:var(--blue-400); border-color:rgba(96,165,250,.4)}
/* MODE_CONFIG.plan.activeColorDark: "bg-amber-500/15 text-amber-400 border-amber-400/40" */
.mode-tab.active-plan{background:rgba(245,158,11,.15); color:var(--amber-400); border-color:rgba(251,191,36,.4)}
/* MODE_CONFIG.code.activeColorDark: "bg-cyan-500/15 text-cyan-400 border-cyan-400/40" */
.mode-tab.active-code{background:rgba(6,182,212,.15); color:var(--cyan-400); border-color:rgba(34,211,238,.4)}

/* composer-styles.ts: COMPOSER_OUTER_PADDING = "px-3 pb-3 pt-1" */
.composer-outer{padding:4px 12px 12px}
/* composerFrameClass('code', true):
   "relative rounded-xl border overflow-hidden bg-slate-800/60
    border-cyan-500/40"                                              */
.composer-frame{
  position:relative; border-radius:12px; overflow:hidden;
  background:rgba(30,41,59,.6);
  border:1px solid rgba(6,182,212,.4);
  transition:border-color .25s, box-shadow .25s;
}
.composer-frame.plan-accent{border-color:rgba(245,158,11,.4)}
/* composerInputClass(true):
   "w-full min-h-[40px] px-3.5 py-2.5 pr-12 text-sm text-slate-200"  */
.composer-input{
  width:100%; min-height:40px;
  padding:10px 48px 10px 14px;
  font-size:14px; line-height:1.5; color:var(--slate-200);
  white-space:pre-wrap; word-break:break-word;
}
.composer-input.placeholder{color:var(--slate-500)}
/* composerActionRowClass():
   "flex items-center justify-between px-2 pb-2 pt-0.5"              */
.composer-actions{display:flex; align-items:center; justify-content:space-between; padding:2px 8px 8px}
.ca-left{display:flex; align-items:center; gap:2px}
.ca-right{display:flex; align-items:center; gap:6px}
/* composerIconButtonClass(true):
   "h-8 w-8 rounded-lg text-slate-400 hover:text-cyan-400 hover:bg-cyan-500/10" */
.ca-icon{
  height:32px; width:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  color:var(--slate-400); transition:color .15s, background-color .15s;
}
.ca-icon svg{height:16px; width:16px}
.ca-icon:hover{color:var(--cyan-400); background:rgba(6,182,212,.1)}
/* composerSendButtonClass(true,true): "bg-cyan-600 text-white shadow-sm" */
.ca-send{
  height:32px; width:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--cyan-600); color:#fff; border:none; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.ca-send svg{height:16px; width:16px}

/* ══ Modell-Chip ══ unified-model-selector.tsx:565
   "flex items-center gap-1.5 h-8 px-2.5 rounded-lg text-[11px]
    font-bold border bg-slate-800/60 border-slate-700/50 text-slate-300" */
.model-chip{
  display:flex; align-items:center; gap:6px;
  height:32px; padding:0 10px; border-radius:8px;
  font-size:11px; font-weight:700; font-family:inherit;
  background:rgba(30,41,59,.6);
  border:1px solid rgba(51,65,85,.5);
  color:var(--slate-300);
  cursor:pointer; transition:all .2s;
}
.model-chip:hover{background:var(--slate-700); border-color:var(--slate-600); color:#fff}
.model-chip.open{background:var(--slate-700); border-color:var(--slate-600); color:#fff}
/* "h-2 w-2 rounded-full" — providerColor */
.mc-dot{height:8px; width:8px; border-radius:9999px; flex-shrink:0; transition:background-color .3s}
.mc-name{max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* "text-[8px] font-black uppercase px-1 py-0 rounded bg-amber-500/20 text-amber-300" */
.mc-badge-exp{
  font-size:8px; font-weight:900; text-transform:uppercase;
  padding:0 4px; border-radius:4px;
  background:rgba(245,158,11,.2); color:var(--amber-300);
}
/* badge 'plan_api' → "bg-cyan-500/20 text-cyan-400" */
.mc-badge-plan{
  font-size:8px; font-weight:700;
  padding:0 4px; border-radius:4px;
  background:rgba(6,182,212,.2); color:var(--cyan-400);
}
.mc-chev{height:12px; width:12px; flex-shrink:0; transition:transform .2s}
.model-chip.open .mc-chev{transform:rotate(180deg)}

/* ══ Modell-Dropdown ══ unified-model-selector.tsx:604
   "fixed w-[280px] rounded-xl border shadow-2xl overflow-hidden
    bg-slate-800 border-slate-700 shadow-black/40"                   */
.model-drop{
  position:absolute; width:280px;
  border-radius:12px; overflow:hidden;
  background:var(--slate-800); border:1px solid var(--slate-700);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.3);
  z-index:60;
  display:flex; flex-direction:column;
  max-height:330px;
  opacity:0; transform:translateY(8px);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.model-drop.show{opacity:1; transform:translateY(0); pointer-events:auto}
.md-list{
  padding:4px 0; overflow-y:auto; flex:1; min-height:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.md-list::-webkit-scrollbar{display:none}
/* Gruppenkopf — "px-3 py-1.5 flex items-center gap-1.5 border-l-2
   bg-slate-900/95 text-slate-400 border-l-cyan-500/50"              */
.md-group{
  padding:6px 12px; display:flex; align-items:center; gap:6px;
  background:rgba(15,23,42,.95); color:var(--slate-400);
  border-left:2px solid rgba(6,182,212,.5);
}
.md-group + .md-group,
.md-item + .md-group{border-top:1px solid rgba(71,85,105,.4)}
.md-group .g-label{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.md-group .g-hint{font-size:9px; margin-left:auto; color:var(--slate-500)}
.md-logo{height:14px; width:14px; border-radius:3px; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; font-size:8px; font-weight:900; color:#fff}
/* Modelleintrag — "w-full flex items-center gap-2 px-3 py-2 text-slate-300
   hover:bg-slate-700/50"; ausgewählt: "bg-cyan-500/15 text-cyan-300"   */
.md-item{
  width:100%; display:flex; align-items:center; gap:8px;
  padding:8px 12px; text-align:left;
  background:none; border:none; cursor:pointer; font-family:inherit;
  color:var(--slate-300); transition:background-color .15s, color .15s;
}
.md-item:hover{background:rgba(51,65,85,.5)}
.md-item.selected{background:rgba(6,182,212,.15); color:var(--cyan-300)}
.md-item .m-dot{height:8px; width:8px; border-radius:9999px; flex-shrink:0}
.md-item .m-name{font-size:12px; font-weight:600; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Badge — "text-[8px] font-bold px-1.5 py-0.5 rounded" */
.m-badge{font-size:8px; font-weight:700; padding:2px 6px; border-radius:4px; flex-shrink:0}
.m-badge.plan{background:rgba(6,182,212,.15); color:var(--cyan-400)}
.m-badge.local{background:rgba(168,85,247,.15); color:var(--purple-400)}
.m-badge.api{background:rgba(59,130,246,.15); color:var(--blue-400)}
.md-item .m-check{height:12px; width:12px; flex-shrink:0; color:var(--cyan-400)}
.md-foot{
  border-top:1px solid rgba(51,65,85,.5);
  padding:6px 12px; display:flex; align-items:center; justify-content:space-between;
  font-size:10px; font-weight:700; color:var(--slate-400);
}
/* Cursor-Attrappe für die Klick-Animation */
.fake-cursor{
  position:absolute; width:18px; height:18px; z-index:80;
  pointer-events:none; opacity:0;
  transition:opacity .2s, left .5s cubic-bezier(.4,0,.2,1), top .5s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.click-ring{
  position:absolute; z-index:79; pointer-events:none;
  height:26px; width:26px; margin:-13px 0 0 -13px;
  border-radius:9999px; border:2px solid var(--cyan-400); opacity:0;
}
.click-ring.fire{animation:ring .5s ease-out}
@keyframes ring{
  0%{opacity:.9; transform:scale(.3)}
  100%{opacity:0; transform:scale(1.7)}
}
/* Einblende-Animation für neue Nachrichten */
.enter{animation:enter .38s cubic-bezier(.16,1,.3,1) both}
@keyframes enter{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}
/* Glow beim Engine-Wechsel des Chips */
.model-chip.switching{animation:chipGlow 1.1s ease-out}
@keyframes chipGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(6,182,212,0)}
  35%{box-shadow:0 0 0 4px rgba(6,182,212,.25)}
}
/* Bildunterschrift */
.caption{
  margin-top:18px; text-align:center;
  font-size:12px; color:var(--slate-500); font-weight:500;
}

/* Das Panel steckt in einem responsiven iframe. Flex-Inhalte dürfen dessen
   schmale Breite nicht über ihre intrinsische Mindestbreite aufziehen. */
body > div{width:100%; min-width:0}
.alva-window,
.chat-main,
.composer-actions,
.ca-left,
.ca-right{min-width:0}

@media (max-width:420px){
  body{padding:16px 8px}
  .alva-window{min-width:0; border-radius:12px}
  .alva-chat-header{padding:10px 12px}
  .hdr-right .hdr-btn:nth-child(2),
  .hdr-right .hdr-btn:nth-child(3){display:none}
  .chat-scroll{padding-left:12px; padding-right:12px}
  .composer-outer{padding-left:8px; padding-right:8px}
  .ca-left .ca-icon:nth-child(2){display:none}
  .model-chip{min-width:0; max-width:126px; padding:0 8px; gap:5px}
  .mc-name{max-width:78px}
  .model-chip .mc-badge-plan{display:none}
  .model-drop{width:calc(100% - 16px); max-width:280px}
  .caption{margin-top:12px; padding:0 8px; font-size:11px; line-height:1.35}
}



/* ══ Fallback-Karte ══ fallback-prompt-card.tsx:28
   "mx-3 mb-2 rounded-xl border p-3 shadow-sm
    border-amber-400/30 bg-amber-500/10 text-slate-100"              */
.fallback-card{
  margin:0 12px 8px; border-radius:12px; padding:12px;
  border:1px solid rgba(251,191,36,.3);
  background:rgba(245,158,11,.1);
  color:var(--slate-100);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

.fc-row{display:flex; align-items:flex-start; gap:10px}

/* "mt-0.5 h-4 w-4 shrink-0 text-amber-400" */
.fc-row > svg{margin-top:2px; height:16px; width:16px; flex-shrink:0; color:var(--amber-400)}

.fc-body{min-width:0; flex:1}

/* "text-xs font-bold" */
.fc-title{font-size:12px; line-height:16px; font-weight:700}

/* "mt-1 text-[10px] leading-relaxed text-slate-400" */
.fc-text{margin-top:4px; font-size:10px; line-height:1.625; color:var(--slate-400)}

/* "mt-2 flex flex-wrap gap-1.5" */
.fc-btns{margin-top:8px; display:flex; flex-wrap:wrap; gap:6px}

/* "inline-flex items-center gap-1 rounded-lg bg-cyan-500 px-2.5 py-1.5
    text-[10px] font-bold text-slate-950"                            */
.fc-primary{
  display:inline-flex; align-items:center; gap:4px;
  border-radius:8px; background:var(--cyan-500);
  padding:6px 10px; font-size:10px; font-weight:700; font-family:inherit;
  color:var(--slate-950); border:none; cursor:pointer; transition:background-color .15s;
}

.fc-primary:hover{background:var(--cyan-400)}

/* "inline-flex items-center gap-1 rounded-lg border border-white/15 px-2.5 py-1.5" */
.fc-ghost{
  display:inline-flex; align-items:center; gap:4px;
  border-radius:8px; border:1px solid rgba(255,255,255,.15);
  padding:6px 10px; font-size:10px; font-weight:700; font-family:inherit;
  background:none; color:inherit; cursor:pointer; transition:background-color .15s;
}

.fc-ghost:hover{background:rgba(255,255,255,.1)}

.fc-btns svg{height:12px; width:12px}

/* Hervorhebung, wenn die Automatik den Primärknopf selbst betätigt */
.fc-primary.auto{animation:autoPress 1s ease-out}