/* Momo Nacht · Metall — Premium-Edition im Stil von Chrome/Revolut:
   tiefes Schwarz, silberne Metall-Flächen, irisierende Chrom-Akzente.
   Baut auf dem dunklen Grunddesign auf; diese Datei ändert nur Akzente,
   Flächen und Hairlines — Textfarben bleiben unangetastet (keine
   Kontrastfehler). Wirkt nur mit data-color="metal" auf <html>. */
:root[data-color="metal"]{
  --chrome-hi:#f4f4f7;
  --chrome-mid:#b9b9c2;
  --chrome-lo:#7c7c86;
  --chrome-edge:rgba(255,255,255,.20);
  --chrome-glass:rgba(18,18,22,.72);
  --iride:conic-gradient(from 210deg at 50% 50%,#8ecbff,#c9a6ff,#ff9ad5,#ffd9a8,#9dffe0,#8ecbff);
}

/* Hintergrund: sattes Schwarz mit kühler silberner Lichtung oben */
html[data-color="metal"] body{
  background:
    radial-gradient(70vw 46vh at 50% -12%, rgba(185,185,194,.10), transparent 60%),
    radial-gradient(40vw 30vh at 92% 8%, rgba(142,203,255,.05), transparent 65%),
    #000;
}

/* Titel in Chrom-Metall */
:root[data-color="metal"] .page-title strong,
:root[data-color="metal"] .sidebar-brand-identity strong{
  background:linear-gradient(180deg,#fff 0%,#d9d9e0 38%,#8e8e99 62%,#e9e9ef 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Seitenleiste: schwarzes Glas mit silberner Kante */
:root[data-color="metal"] .sidebar{
  background:linear-gradient(180deg,rgba(14,14,17,.92),rgba(8,8,10,.94));
  backdrop-filter:blur(22px) saturate(1.1);
  -webkit-backdrop-filter:blur(22px) saturate(1.1);
  box-shadow:inset -1px 0 0 rgba(142,203,255,.4),inset -2px 0 0 rgba(201,166,255,.12);
}
:root[data-color="metal"] .sidebar-action.active{
  background:linear-gradient(90deg,rgba(244,244,247,.14),rgba(185,185,194,.06));
  box-shadow:inset 2px 0 0 var(--chrome-hi);
  border-radius:12px;
}
:root[data-color="metal"] .sidebar-action.active span{color:#fff}

/* Eingabebereich: glänzendes Chrom-Glas mit irisierender Kante */
:root[data-color="metal"] .composer{
  background:var(--chrome-glass);
  backdrop-filter:blur(24px) saturate(1.2);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
  border:1px solid var(--chrome-edge);
  box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
}
:root[data-color="metal"] .composer::before{
  content:"";
  position:absolute;inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(115deg,rgba(142,203,255,.55),rgba(201,166,255,.35) 30%,rgba(255,255,255,.10) 50%,rgba(157,255,224,.30) 74%,rgba(142,203,255,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* Senden-Knopf: Chrom-Plakette, dunkler Pfeil — wie beim Vorbild */
:root[data-color="metal"] .send{
  background:linear-gradient(180deg,#ffffff 0%,#dcdce2 45%,#a9a9b3 100%);
  color:#0a0a0c;
  box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
}
:root[data-color="metal"] .send:hover{filter:brightness(1.06)}

/* Karten: dunkles Glas mit silberner Hairline */
:root[data-color="metal"] .momo-network-card,
:root[data-color="metal"] .momo-store-card,
:root[data-color="metal"] .settings-card,
:root[data-color="metal"] .ms-karte-kern{
  background:linear-gradient(160deg,rgba(24,24,28,.78),rgba(12,12,15,.82));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
:root[data-color="metal"] .momo-network-local-badge{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border-color:var(--chrome-edge);
  color:#e9e9ef;
}
:root[data-color="metal"] .rail-account-avatar{
  background:linear-gradient(160deg,#3a3a42,#17171b);
  border-color:var(--chrome-edge);
  color:#f4f4f7;
}

/* Feine irisierende Akzente an aktiven Elementen */
:root[data-color="metal"] .rail-btn.active,
:root[data-color="metal"] .round-btn:hover{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
:root[data-color="metal"] ::selection{background:rgba(185,185,194,.35);color:#fff}
:root[data-color="metal"] a{color:#a9c8ff}
:root[data-color="metal"] *{scrollbar-color:rgba(185,185,194,.35) transparent}
:root[data-color="metal"] ::-webkit-scrollbar-thumb{background:rgba(185,185,194,.30);border-radius:8px}

/* Ladebildschirm im Metall-Look */
html[data-color="metal"] .momo-loading-screen{
  background:
    radial-gradient(70vw 46vh at 50% -12%, rgba(185,185,194,.10), transparent 60%),
    #000;
  color:#f4f4f7;
}

/* ==================================================================
   Metall-Serie — Revolut-X-Edition: Chrom-Plaketten, gebürstete
   Flächen, irisierende Säume. Textfarben bleiben unangetastet. */

/* Hintergrund: Tiefschwarz mit silberner Lichtung + kühlem Blau-Streif */
html[data-color="metal"] body{
  background:
    radial-gradient(80vw 52vh at 50% -14%, rgba(244,244,247,.14), transparent 58%),
    radial-gradient(46vw 36vh at 96% 4%, rgba(142,203,255,.09), transparent 64%),
    radial-gradient(40vw 34vh at 2% 90%, rgba(201,166,255,.06), transparent 66%),
    linear-gradient(180deg,#050506 0%,#000 30%,#000 100%);
}

/* Gebürstetes Metall als wiederverwendbare Schicht (feine Linien-Textur) */
:root[data-color="metal"]{
  --metal-brushed:
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
    linear-gradient(160deg,rgba(34,34,40,.92),rgba(14,14,17,.96));
  --metal-chrome:linear-gradient(180deg,#ffffff 0%,#e2e2e8 40%,#b4b4be 78%,#d6d6de 100%);
  --metal-chrome-dark:linear-gradient(180deg,#33333a 0%,#1a1a1f 55%,#101013 100%);
}

/* Topbar: schwarzes Chrom mit silberner Kante */
:root[data-color="metal"] .topbar{
  background:linear-gradient(180deg,rgba(20,20,24,.92),rgba(8,8,10,.94));
  backdrop-filter:blur(20px) saturate(1.15);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* Avatar: dunkle Chrom-Plakette; Momo-Avatar mit Iris-Ring */
:root[data-color="metal"] .avatar{
  background:var(--metal-chrome-dark);
  border-color:rgba(255,255,255,.18);
  color:#b9b9c2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
:root[data-color="metal"] .message.ai .avatar{
  background:linear-gradient(160deg,#26262d,#0e0e11);
  border:1px solid transparent;
  background-clip:padding-box;
  color:#f4f4f7;
  box-shadow:0 0 0 1px rgba(142,203,255,.35), 0 0 18px rgba(142,203,255,.12);
}

/* Rundknöpfe: dunkle Chrom-Plaketten, beim Hover Iris-Saum */
:root[data-color="metal"] .round-btn{
  background:var(--metal-chrome-dark);
  border:1px solid rgba(255,255,255,.16);
  color:#d9d9e0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 4px 12px rgba(0,0,0,.4);
}
:root[data-color="metal"] .round-btn:hover{
  border-color:rgba(142,203,255,.45);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 16px rgba(142,203,255,.14);
}

/* Aktionsknöpfe: helle Chrom-Plaketten wie beim Vorbild */
:root[data-color="metal"] .action-btn{
  background:var(--metal-chrome);
  color:#0a0a0c;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
}
:root[data-color="metal"] .action-btn:hover{filter:brightness(1.06)}
:root[data-color="metal"] .action-btn.white{background:var(--metal-chrome);color:#0a0a0c;border-color:rgba(255,255,255,.55)}
:root[data-color="metal"] .action-btn.danger{color:#8a1f1f;border-color:rgba(216,56,56,.4);background:linear-gradient(180deg,#f6dcdc,#e8bcbc)}

/* Rechtes Zeitpanel & Coding-Panes: gebürstetes Metall */
:root[data-color="metal"] .artifact-panel,
:root[data-color="metal"] .artifact-pane,
:root[data-color="metal"] .panel-view,
:root[data-color="metal"] .coding-files-pane,
:root[data-color="metal"] .coding-editor-pane,
:root[data-color="metal"] .coding-output-pane,
:root[data-color="metal"] .coding-output-toolbar{
  background:var(--metal-brushed);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-color:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 48px rgba(0,0,0,.5);
}

/* Codeblöcke: dunkles Metall mit silberner Kopfzeile */
:root[data-color="metal"] .code-block{
  background:linear-gradient(165deg,rgba(28,28,33,.9),rgba(10,10,13,.94));
  border:1px solid rgba(255,255,255,.12);
}
:root[data-color="metal"] .code-head{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border-bottom:1px solid rgba(255,255,255,.10);
}

/* Popups & Dialoge: schwarzes Glas mit Chromrahmen und Iris-Kante.
   Achtung: die Sidebar-Account-Popover darf NICHT position:relative bekommen —
   sie ist basisseitig position:absolute bottom:calc(100% + 8px) ueber dem
   Account-Dock verankert; relative wuerde sie in den Fluss ziehen (Popup oben
   statt ueber dem Account-Eintrag). Absolute ist ebenfalls ein Containing
   Block, der ::before-Irisring funktioniert dort unveraendert. */
:root[data-color="metal"] .modal,
:root[data-color="metal"] .dialog{
  background:linear-gradient(165deg,rgba(26,26,31,.96),rgba(10,10,13,.98));
  backdrop-filter:blur(26px) saturate(1.2);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
}
:root[data-color="metal"] .sidebar-account-popover{
  background:linear-gradient(165deg,rgba(26,26,31,.96),rgba(10,10,13,.98));
  backdrop-filter:blur(26px) saturate(1.2);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
}
:root[data-color="metal"] .modal::before,
:root[data-color="metal"] .dialog::before,
:root[data-color="metal"] .sidebar-account-popover::before{
  content:"";
  position:absolute;inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(130deg,rgba(142,203,255,.5),rgba(255,255,255,.10) 35%,rgba(201,166,255,.35) 65%,rgba(142,203,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
:root[data-color="metal"] .modal-backdrop,
:root[data-color="metal"] .dialog-backdrop{
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* Toast: Chrom-Plakette, dunkler Text */
:root[data-color="metal"] .toast{
  background:var(--metal-chrome);
  color:#0a0a0c;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 14px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.9);
}

/* Plugin-Karten: dunkles Metall; aktive Badges als Chrom-Plakette */
:root[data-color="metal"] .momo-plugin-card{
  background:linear-gradient(160deg,rgba(26,26,31,.85),rgba(12,12,15,.9));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
:root[data-color="metal"] .momo-plugin-badge.an{
  background:var(--metal-chrome);
  color:#0a0a0c;border-color:transparent;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}

/* Store-Buttons im Metall-Look: Primary = Chrom-Plakette, dunkle Platten */
:root[data-color="metal"] .momo-store-card form button{
  background:var(--metal-chrome-dark);
  border:1px solid rgba(255,255,255,.16);
  color:#d9d9e0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 4px 12px rgba(0,0,0,.4);
}
:root[data-color="metal"] .momo-store-card form button:hover{border-color:rgba(142,203,255,.45);color:#fff}
:root[data-color="metal"] .momo-store-card form button.primary{
  background:var(--metal-chrome);
  border-color:rgba(255,255,255,.5);color:#0a0a0c;
  box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
}

/* Aktive Rail-Buttons & wichtige Kennzeichnungen mit Iris-Ring */
:root[data-color="metal"] .rail-btn.active{
  box-shadow:inset 0 0 0 1px rgba(142,203,255,.40), 0 0 14px rgba(142,203,255,.10);
  color:#fff;
}
:root[data-color="metal"] button:focus-visible,
:root[data-color="metal"] input:focus-visible,
:root[data-color="metal"] textarea:focus-visible{
  outline:2px solid rgba(185,185,194,.55);
  outline-offset:1px;
}

/* ==================================================================
   Iris-Rand-Serie — der feine farbige Saum des Account-Popups
   (blau → silber → violett) zieht durch alle Karten, Panels, Buttons,
   Eingabefelder und Menüs im Metall-Modus. */

/* --- 1) Container & Karten: Ring via ::before (Masken-Trick) --- */
:root[data-color="metal"] .settings-card,
:root[data-color="metal"] .momo-store-card,
:root[data-color="metal"] .ms-karte-kern,
:root[data-color="metal"] .momo-network-card,
:root[data-color="metal"] .momo-plugin-card,
:root[data-color="metal"] .artifact-pane,
:root[data-color="metal"] .coding-files-pane,
:root[data-color="metal"] .coding-editor-pane,
:root[data-color="metal"] .coding-output-pane,
:root[data-color="metal"] .coding-output-toolbar,
:root[data-color="metal"] .code-block,
:root[data-color="metal"] .momo-device-modal-box,
:root[data-color="metal"] .momo-device-modal-actions button,
:root[data-color="metal"] .momo-store-card form button,
:root[data-color="metal"] .action-btn:not(.danger):not(.danger-solid),
:root[data-color="metal"] .round-btn,
:root[data-color="metal"] .send,
:root[data-color="metal"] .momo-device-btn,
:root[data-color="metal"] .momo-dict-btn:not(.is-an),
:root[data-color="metal"] .momo-store-tabs button,
:root[data-color="metal"] .momo-store-plus,
:root[data-color="metal"] .momo-store-actions button,
:root[data-color="metal"] .momo-switch-actions button,
:root[data-color="metal"] .rail-btn{
  position:relative;
}

:root[data-color="metal"] .settings-card::before,
:root[data-color="metal"] .momo-store-card::before,
:root[data-color="metal"] .ms-karte-kern::before,
:root[data-color="metal"] .momo-network-card::before,
:root[data-color="metal"] .momo-plugin-card::before,
:root[data-color="metal"] .artifact-panel::before,
:root[data-color="metal"] .artifact-pane::before,
:root[data-color="metal"] .coding-files-pane::before,
:root[data-color="metal"] .coding-editor-pane::before,
:root[data-color="metal"] .coding-output-pane::before,
:root[data-color="metal"] .coding-output-toolbar::before,
:root[data-color="metal"] .code-block::before,
:root[data-color="metal"] .chat-context-menu::before,
:root[data-color="metal"] .chat-project-submenu::before,
:root[data-color="metal"] .momo-device-pop::before,
:root[data-color="metal"] .momo-device-modal-box::before,
:root[data-color="metal"] .momo-device-modal-actions button::before,
:root[data-color="metal"] .momo-store-card form button::before,
:root[data-color="metal"] .action-btn:not(.danger):not(.danger-solid)::before,
:root[data-color="metal"] .round-btn::before,
:root[data-color="metal"] .send::before,
:root[data-color="metal"] .momo-device-btn::before,
:root[data-color="metal"] .momo-dict-btn:not(.is-an)::before,
:root[data-color="metal"] .momo-store-tabs button::before,
:root[data-color="metal"] .momo-store-plus::before,
:root[data-color="metal"] .momo-store-actions button::before,
:root[data-color="metal"] .momo-switch-actions button::before,
:root[data-color="metal"] .rail-btn::before{
  content:"";
  position:absolute;inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(130deg,rgba(142,203,255,.5),rgba(255,255,255,.10) 35%,rgba(201,166,255,.35) 65%,rgba(142,203,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
  opacity:.85;
  transition:opacity .2s ease;
}

/* Hover: Saum leuchtet etwas heller */
:root[data-color="metal"] .settings-card:hover::before,
:root[data-color="metal"] .momo-store-card:hover::before,
:root[data-color="metal"] .ms-karte-kern:hover::before,
:root[data-color="metal"] .momo-network-card:hover::before,
:root[data-color="metal"] .momo-plugin-card:hover::before,
:root[data-color="metal"] .artifact-panel:hover::before,
:root[data-color="metal"] .code-block:hover::before,
:root[data-color="metal"] .momo-device-modal-actions button:hover::before,
:root[data-color="metal"] .momo-store-card form button:hover::before,
:root[data-color="metal"] .action-btn:not(.danger):not(.danger-solid):hover::before,
:root[data-color="metal"] .round-btn:hover::before,
:root[data-color="metal"] .send:hover::before,
:root[data-color="metal"] .momo-device-btn:hover::before,
:root[data-color="metal"] .momo-dict-btn:not(.is-an):hover::before,
:root[data-color="metal"] .momo-store-tabs button:hover::before,
:root[data-color="metal"] .momo-store-plus:hover::before,
:root[data-color="metal"] .momo-store-actions button:hover::before,
:root[data-color="metal"] .momo-switch-actions button:hover::before,
:root[data-color="metal"] .rail-btn:hover::before,
:root[data-color="metal"] .rail-btn.active::before{
  opacity:1;
  background:linear-gradient(130deg,rgba(142,203,255,.75),rgba(255,255,255,.18) 35%,rgba(201,166,255,.55) 65%,rgba(142,203,255,.65));
}

/* Seitenleiste (Menu): Iris-Saum als zwei Ton-inset (kein position:relative —
   die Sidebar ist unter 720px position:fixed und muss es bleiben) */

/* Menüeinträge: dezenter Saum nur beim Hover / aktiv */
:root[data-color="metal"] .sidebar-action{position:relative}
:root[data-color="metal"] .sidebar-action::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(130deg,rgba(142,203,255,.6),rgba(255,255,255,.10) 40%,rgba(201,166,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
:root[data-color="metal"] .sidebar-action:hover::before,
:root[data-color="metal"] .sidebar-action.active::before{opacity:.9}

/* --- 2) Composer: Iris-Gradient gewinnt gegen die Textur (ID-Spezifität) --- */
:root[data-color="metal"] #view-chat>.composer-shell .composer::before{
  background:linear-gradient(130deg,rgba(142,203,255,.5),rgba(255,255,255,.10) 35%,rgba(201,166,255,.35) 65%,rgba(142,203,255,.4));
  background-size:auto;
  mix-blend-mode:normal;
  opacity:.9;
}

/* --- 3) Eingabefelder: Border-Box-Trick (Pseudo-Elemente sind hier nicht möglich) --- */
:root[data-color="metal"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="file"]),
:root[data-color="metal"] textarea,
:root[data-color="metal"] select{
  background:
    linear-gradient(rgba(20,20,24,.92),rgba(14,14,17,.94)) padding-box,
    linear-gradient(130deg,rgba(142,203,255,.5),rgba(255,255,255,.10) 35%,rgba(201,166,255,.35) 65%,rgba(142,203,255,.4)) border-box;
  border:1px solid transparent;
}

/* Composer-Textarea bleibt gläsern-transparent (der Composer trägt selbst den Saum) */
:root[data-color="metal"] .composer textarea{
  background:transparent;
  border:none;
}

/* Fokus: Saum hellt sich auf */
:root[data-color="metal"] input:focus,
:root[data-color="metal"] textarea:focus,
:root[data-color="metal"] select:focus{
  background:
    linear-gradient(rgba(24,24,29,.95),rgba(16,16,20,.96)) padding-box,
    linear-gradient(130deg,rgba(142,203,255,.8),rgba(255,255,255,.16) 35%,rgba(201,166,255,.6) 65%,rgba(142,203,255,.7)) border-box;
}