/* ================================================================
   Mind Map Studio — Oberflaeche
   ================================================================ */

.mms-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

/* ---------- Werkzeugleiste ---------- */

.mms-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border-bottom: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  flex: 0 0 auto;
}

.mms-btn {
  padding: 4px 10px;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-normal);
  cursor: pointer;
  white-space: nowrap;
}
.mms-btn:hover {
  background: var(--background-modifier-hover);
  border-color: var(--background-modifier-border);
}
/* Toolbar icon styles (since 1.28.0): compact square buttons, no shadow, no text */
.mms-toolbar:not(.mms-bar-standard) .mms-btn {
  min-width: 34px; height: 34px; padding: 0 6px; display: inline-flex; align-items: center;
  justify-content: center; box-shadow: none; border-radius: 9px; font-size: 18px; line-height: 1;
}
.mms-toolbar:not(.mms-bar-standard) .mms-btn svg { width: 18px; height: 18px; stroke-width: 1.75; }
.mms-bar-line .mms-btn { color: var(--text-muted); }
.mms-bar-line .mms-btn:hover { color: var(--text-normal); }
/* "color": each group in its own soft colour, with a faint tinted background */
.mms-bar-color .mms-btn { background: color-mix(in srgb, currentColor 11%, transparent); }
.mms-bar-color .mms-btn:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
.mms-tint-1 { color: var(--color-cyan, #2fa7b4); }
.mms-tint-2 { color: var(--color-blue, #3b82d6); }
.mms-tint-3 { color: var(--color-purple, #8b5cf6); }
.mms-tint-4 { color: var(--color-green, #3f9f5f); }
.mms-tint-5 { color: var(--color-orange, #e0802f); }
.mms-tint-6 { color: var(--text-muted); }
/* Eingeschalteter Werkzeug-Knopf (z. B. ⬚ Auswahl).
   ⚠️ Muss deutlich sein: Ein Werkzeug, das den Sinn des Ziehens umdreht, darf
   man nicht versehentlich an lassen. */
.mms-btn.is-active {
  background: var(--interactive-accent);
  border-color: var(--interactive-accent);
  color: var(--text-on-accent);
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--interactive-accent), 0 0 10px var(--interactive-accent);
}
.mms-btn.is-active:hover {
  background: var(--interactive-accent-hover, var(--interactive-accent));
  color: var(--text-on-accent);
}

/* Solange der Rahmen gilt, zeigt der Zeiger ein Kreuz statt der Hand. */
.mms-wrap.is-marquee .mms-svg,
.mms-wrap.is-marquee .mms-svg:active {
  cursor: crosshair;
}

.mms-btn:active {
  background: var(--background-modifier-active-hover);
}

.mms-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 6px;
  background: var(--background-modifier-border);
}
.mms-spacer {
  flex: 1 1 auto;
}

/* ---------- Werkzeugleiste wegklappen ----------
   Der Griff schwebt über der Zeichenfläche und bleibt auch im eingeklappten
   Zustand sichtbar. Im Querformat gewinnt die Karte so spürbar Höhe.

   ⚠️ Er sitzt LINKS: Im Querformat legt Samsung die Systemtasten (Zurück,
   Startseite, Übersicht) an die rechte Seite — dort verdeckten sie den Griff
   und das Auswahlmenü (gemeldet 08.08.2026). */
.mms-bar-toggle {
  position: absolute;
  top: 2px;
  left: calc(4px + env(safe-area-inset-left, 0px));
  z-index: 25;
  width: 30px;
  height: 22px;
  padding: 0;
  line-height: 1;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 0 0 8px 8px;
  opacity: 0.75;
}
.mms-bar-toggle:hover {
  opacity: 1;
  color: var(--text-normal);
}
.mms-container.is-bar-collapsed .mms-toolbar {
  display: none;
}
/* Eingeklappt darf der Griff etwas größer sein — er ist dann der einzige. */
.mms-container.is-bar-collapsed .mms-bar-toggle {
  height: 26px;
  opacity: 0.9;
}

/* ---------- Zeichenflaeche ---------- */

.mms-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--background-primary);
  background-image: radial-gradient(
    circle at 1px 1px,
    var(--background-modifier-border) 1px,
    transparent 0
  );
  background-size: 26px 26px;
  /* Auf dem Handy: keine Wisch-Weitergabe an Obsidian, kein Gummiband-Scrollen,
     kein Doppeltipp-Zoom des Systems. */
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.mms-svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.mms-svg:active {
  cursor: grabbing;
}

/* Unsichtbare, fingergerechte Trefferfläche über kleinen Bedienelementen. */
.mms-hit {
  fill: transparent;
  pointer-events: all;
}

/* ⚠️ Eingabefelder müssen von der Auswahl- und Touch-Sperre der Zeichenfläche
   ausgenommen werden. Ohne Textauswahl bietet Android die Stift-Handschrift
   („mit S Pen schreiben") gar nicht erst an, und der Textcursor fehlt. */
.mms-container textarea,
.mms-container input,
.mms-container select,
.mms-wrap textarea,
.mms-wrap input,
.mms-prompt textarea,
.mms-prompt input,
.mms-handwriting {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  touch-action: auto;
}

/* ---------- Aeste ---------- */

.mms-branch {
  stroke: none;
  opacity: 0.92;
}
/* Line shape: same opacity as the branch, so the joint shows no change in shade (1.32.3) */
.mms-underline {
  opacity: 0.92;
}

/* ---------- Knoten ---------- */

.mms-node {
  cursor: grab;
}
.mms-node:active {
  cursor: grabbing;
}

.mms-shape {
  transition: stroke-width 90ms ease;
}
/* Export reads final values, not a running animation (since 1.30.2) */
.mms-no-anim * { transition: none !important; }

.mms-label {
  pointer-events: none;
  dominant-baseline: middle;
}

/* Light/dark per map (since 1.29.0): Obsidian puts the base colours on
   .theme-dark/.theme-light but resolves the named colours on <body> — so they
   are resolved again inside the map. Same mapping as Obsidian's own. */
.mms-container.theme-dark, .mms-container.theme-light {
  --background-primary: var(--color-base-00);
  --background-primary-alt: var(--color-base-10);
  --background-secondary: var(--color-base-20);
  --background-modifier-border: var(--color-base-30);
  --text-normal: var(--color-base-100);
  --text-muted: var(--color-base-70);
  --text-faint: var(--color-base-50);
  --interactive-normal: var(--color-base-00);
  --interactive-hover: var(--color-base-10);
  color: var(--text-normal);
  background: var(--background-primary);
}

/* Farbpalette: 10 Proben unter der Auswahl (seit 1.27.3) */
.mms-palette-proben { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 12px; }
.mms-palette-proben .mms-swatch { width: 22px; height: 22px; border-radius: 50%; margin: 0; }

/* Ordnerwahl im Baum: „Wählen“ rechts in der Zeile (seit 1.27.2) */
.mms-tree-pick { margin-left: 8px; padding: 2px 10px; min-height: 30px; font-size: 13px; flex: 0 0 auto; }

/* Einstellungen: Leiste und Menü anpassen (seit 1.27.0) */
.mms-reihen-vorschau { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px; margin-bottom: 8px;
  border: 1px solid var(--background-modifier-border); border-radius: 8px; background: var(--background-secondary); }
.mms-reihen-chip { padding: 3px 9px; border-radius: 6px; font-size: 13px; background: var(--interactive-normal);
  box-shadow: var(--input-shadow); white-space: nowrap; }
.mms-reihen-trenn { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--background-modifier-border); }
.mms-reihen-luecke { flex: 1 1 12px; }
.mms-reihen-liste summary { cursor: pointer; padding: 6px 0; font-weight: 600; }
.mms-reihen-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--background-modifier-border); }
.mms-reihen-zeile.is-aus .mms-reihen-name { opacity: 0.5; }
.mms-reihen-name { flex: 1; min-width: 0; }
.mms-reihen-hinweis { font-size: 11px; color: var(--text-muted); }
.mms-reihen-zeile button { min-width: 36px; min-height: 32px; padding: 0 8px; }

/* Markdown in der Blase (seit 1.25.0) */
.mms-label .mms-href { pointer-events: auto; cursor: pointer; }
.mms-label .mms-href.is-accent { fill: var(--text-accent); }
.mms-code-bg { fill: var(--code-background, rgba(127, 127, 127, 0.16)); pointer-events: none; }
.mms-mark-bg { fill: var(--text-highlight-bg, rgba(255, 208, 0, 0.4)); pointer-events: none; }
.mms-math { pointer-events: none; overflow: visible; }

.mms-pin {
  font-size: 9px;
  pointer-events: none;
  opacity: 0.95;
}

/* Verknüpfungs-Marker: anklickbar, öffnet die Notiz. */
.mms-pin-link {
  cursor: pointer;
}
.mms-pin-note {
  cursor: pointer;
}
.mms-pin-link:hover .mms-pin,
.mms-pin-link:active .mms-pin,
.mms-pin-note:hover .mms-pin,
.mms-pin-note:active .mms-pin {
  font-size: 11px;
  opacity: 1;
}

/* Auswahl */
.mms-node.is-selected .mms-shape {
  stroke: var(--interactive-accent);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px var(--interactive-accent));
}

/* Ziel beim Umhaengen */
.mms-node.is-drop .mms-shape {
  stroke: var(--interactive-accent);
  stroke-width: 3.5;
  stroke-dasharray: 6 4;
}

/* Quelle einer Querverbindung */
.mms-node.is-linksource .mms-shape {
  stroke: var(--text-accent);
  stroke-width: 3;
  stroke-dasharray: 3 3;
}

/* ---------- Einklapp-Knopf ---------- */

/* Ausgeklappt: erst beim Überfahren zeigen, damit der Knopf nicht dauerhaft
   auf den Ästen liegt. Eingeklappt: immer sichtbar — er trägt die Anzahl. */
.mms-collapse {
  cursor: pointer;
  opacity: 0;
  transition: opacity 110ms ease;
}
.mms-collapse.is-folded,
.mms-node:hover .mms-collapse,
.mms-node.is-selected .mms-collapse {
  opacity: 1;
}
.mms-collapse-bg {
  opacity: 0.95;
  stroke: var(--background-primary);
  stroke-width: 1.5;
}
.mms-collapse-sign {
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

/* ---------- „+"-Griff ---------- */

.mms-handle {
  cursor: crosshair;
  opacity: 0;
  transition: opacity 110ms ease;
}
.mms-node:hover .mms-handle,
.mms-node.is-selected .mms-handle {
  opacity: 1;
}
.mms-handle-bg {
  fill: var(--background-primary);
  stroke: var(--interactive-accent);
  stroke-width: 2;
}
.mms-handle-sign {
  font-size: 14px;
  font-weight: 700;
  fill: var(--interactive-accent);
  pointer-events: none;
}

/* ---------- Querverbindungen ---------- */

.mms-crosslink {
  cursor: pointer;
}
.mms-crosslink-path {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 2;
  stroke-dasharray: 6 5;
  opacity: 0.85;
  pointer-events: none;
}
/* Breite, unsichtbare Fanglinie — eine 2 px dünne Kurve trifft man sonst nicht. */
.mms-crosslink-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 20;
  pointer-events: stroke;
}
.mms-crosslink:hover .mms-crosslink-path {
  stroke: var(--text-accent);
  opacity: 1;
}
.mms-crosslink-label {
  font-size: 11.5px;
  fill: var(--text-muted);
  paint-order: stroke;
  stroke: var(--background-primary);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}
/* Griff für Verbindungen ohne Text — zeigt, wo man tippen kann. */
.mms-crosslink-add {
  font-size: 13px;
  font-weight: 700;
  fill: var(--text-faint);
  paint-order: stroke;
  stroke: var(--background-primary);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
  opacity: 0;
  transition: opacity 110ms ease;
}
.mms-crosslink:hover .mms-crosslink-add {
  opacity: 1;
  fill: var(--text-accent);
}
.mms-container.is-touch .mms-crosslink-add {
  opacity: 0.75;
}
.mms-arrow-head {
  fill: var(--text-faint);
}

/* ---------- Sticky Note ---------- */

.mms-sticky-shadow {
  fill: rgba(0, 0, 0, 0.16);
  stroke: none;
  pointer-events: none;
}
/* Auf dem Zettel steht die Schrift immer dunkel — er ist immer hell. */
.mms-node .mms-sticky ~ .mms-label { fill: #3a3320; }

/* ---------- EN|DE-Schalter (Ecke unten rechts) ---------- */

/* Sitzt IN der Werkzeugleiste, nicht auf der Karte — die bleibt frei. */
.mms-lang {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 1px;
  padding: 1px;
  margin-left: 2px;
  border-radius: 7px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  opacity: 0.7;
  transition: opacity 120ms;
}
.mms-lang:hover { opacity: 1; }

.mms-lang-btn {
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.03em;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: none;
}
.mms-lang-btn:hover { background: var(--background-modifier-hover); }
.mms-lang-btn.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}

/* Am Finger etwas groesser, sonst trifft man ihn nicht. */
@media (pointer: coarse) {
  .mms-lang { opacity: 0.9; }
  .mms-lang-btn { padding: 3px 8px; font-size: 11px; }
}

/* ---------- Fangline auf dem Ast ---------- */

/* Unsichtbar, aber breit — sonst trifft man einen 4 px dünnen Ast nicht. */
.mms-branch-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 22;
  cursor: pointer;
}
@media (pointer: coarse) {
  .mms-branch-hit { stroke-width: 34; }
}

/* ---------- Text auf dem Ast ---------- */

.mms-edge-label {
  font-size: 11px;
  font-weight: 600;
  fill: var(--text-muted);
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--background-primary);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* ---------- Zeichen (Emoji) ueber der Blase ---------- */

.mms-icon {
  pointer-events: none;
  dominant-baseline: alphabetic;
}

/* ---------- Zeichen-Auswahl ---------- */

.mms-icon-preview {
  font-size: 42px;
  line-height: 1.1;
  text-align: center;
  padding: 6px 0 10px;
  min-height: 48px;
  color: var(--text-muted);
}
.mms-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 4px;
  margin-bottom: 10px;
}
.mms-icon-btn {
  font-size: 24px;
  line-height: 1;
  padding: 8px 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--background-secondary);
  cursor: pointer;
}
.mms-icon-btn:hover {
  background: var(--background-modifier-hover);
  border-color: var(--background-modifier-border);
}
.mms-icon-btn.is-active {
  border-color: var(--interactive-accent);
  background: var(--background-modifier-hover);
}

/* 😊 emoji library under the toolbar button (since 1.32.6) */
.mms-emoji-panel {
  position: fixed;
  z-index: 40;
  width: min(312px, calc(100vw - 16px));
  max-height: 300px;
  overflow-y: auto;
  padding: 6px 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  box-shadow: var(--shadow-s, 0 6px 24px rgba(0, 0, 0, 0.18));
}
.mms-emoji-head { margin: 8px 2px 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.mms-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.mms-emoji-grid button {
  height: 34px; padding: 0; font-size: 20px; line-height: 1; border: 0; border-radius: 8px;
  background: transparent; box-shadow: none; cursor: pointer;
}
.mms-emoji-grid button:hover { background: var(--background-modifier-hover); }

/* ---------- Auswahl-Rahmen ---------- */

.mms-marquee {
  fill: var(--interactive-accent);
  fill-opacity: 0.1;
  stroke: var(--interactive-accent);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

/* ---------- Zieh-Vorschau ---------- */

.mms-ghost-line {
  stroke: var(--interactive-accent);
  stroke-width: 2.5;
  stroke-dasharray: 5 4;
  opacity: 0.85;
}
.mms-ghost-dot {
  fill: var(--interactive-accent);
  opacity: 0.85;
}

/* ---------- Inline-Editor ---------- */

.mms-editor {
  position: absolute;
  z-index: 30;
  min-width: 150px;
  padding: 6px 10px;
  font-family: var(--font-interface);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  resize: none;
  overflow: hidden;
  border: 2px solid var(--interactive-accent);
  border-radius: 10px;
  background: var(--background-primary);
  color: var(--text-normal);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
.mms-editor:focus {
  outline: none;
}

/* ---------- Statuszeile ---------- */

.mms-status {
  position: absolute;
  left: 10px;
  bottom: 8px;
  padding: 3px 9px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0.92;
}

/* ---------- Farbkacheln im Menü ---------- */

.mms-swatch {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 9px;
  border-radius: 3px;
  vertical-align: -2px;
  border: 1px solid rgba(128, 128, 128, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* ---------- Modal ---------- */

.mms-modal-hint {
  margin-top: 0;
  color: var(--text-muted);
  font-size: 13px;
}
.mms-modal-input {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 14px;
  font-size: 14px;
  border-radius: 6px;
}
.mms-modal-area {
  min-height: 130px;
  resize: vertical;
  font-family: var(--font-text);
  line-height: 1.5;
}

/* Auf dem Handy: mindestens 16px, sonst zoomt Android beim Antippen hinein. */
@media (pointer: coarse) {
  .mms-prompt .mms-modal-input {
    font-size: 16px;
    padding: 10px 12px;
  }
}

/* ---------- Schlankes Eingabefenster (Handy) ----------
   Ohne Überschrift, ohne Beschreibung, am oberen Rand angedockt: Die volle
   Fassung verdeckte die halbe Karte, und der Bestätigen-Knopf lag hinter der
   Tastatur (gemeldet 05.08.2026). */
.mms-modal-top {
  align-items: flex-start !important;
}
/* Karte bleibt beim Tippen sichtbar — Obsidians grauer Schleier deckte sie am
   Handy zu (Wunsch 09.11.2026). Tippen daneben schließt weiterhin. */
.mms-modal-top .modal-bg {
  opacity: 0 !important;
}
/* Obsidian kürzt die App bei offener Tastatur auf 100vh − Tastaturhöhe. Hat
   Android das Fenster schon verkleinert, bleibt 0 px — die Karte war weg
   (Video 09.11.2026). Solange unser Eingabefenster offen ist: volle Höhe, wie
   Obsidian sie selbst beim Hochfahren der Tastatur setzt. Die Zeichenfläche
   hält sich danach selbst über der Tastatur (fitCanvasToViewport). */
body.is-mobile.mms-typing .app-container {
  max-height: 100vh !important;
}

.mms-modal-compact {
  margin-top: 6px;
  padding: 10px 12px 10px;
  width: min(96vw, 640px);
  max-width: 96vw;
  border-radius: 12px;
}
.mms-modal-compact .modal-close-button {
  top: 4px;
  right: 6px;
  transform: scale(0.8);
}
.mms-modal-compact .mms-prompt {
  padding: 0;
}
.mms-modal-compact .mms-modal-input {
  margin-bottom: 8px;
}
/* Zwei Zeilen genügen — der Rest ist verschenkter Platz über der Karte. */
.mms-modal-compact .mms-modal-area {
  min-height: 62px;
  max-height: 30vh;
}
.mms-modal-compact .mms-modal-row {
  gap: 6px;
}
.mms-modal-compact .mms-modal-row button {
  padding: 5px 14px;
  font-size: 14px;
  min-height: 34px;
  flex: 0 0 auto;
}
.mms-modal-compact .mms-modal-row .mod-cta {
  min-width: 58px;
  font-size: 16px;
}
.mms-prompt h3 {
  margin-top: 0;
}
.mms-modal-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Notiz-Auswahl: Suchfeld + Ordnerbaum ------------------------------- */
.mms-tree-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
}
.mms-tree-row:hover {
  background: var(--background-modifier-hover);
}
.mms-tree-row.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.mms-tree-row.is-folder .mms-tree-name {
  font-weight: 600;
}
.mms-tree-chevron {
  flex: 0 0 12px;
  text-align: center;
  opacity: 0.7;
  font-size: 11px;
}
.mms-tree-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Zählt Notizen im Ordner bzw. zeigt bei der Suche den Ablageort. */
.mms-tree-count {
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  opacity: 0.6;
}

/* Fingerkuppen brauchen Platz — und die Liste darf die Tastatur nicht
   verdecken, deshalb bleibt die Höhenbegrenzung aus `.mms-chooser-list`. */
@media (pointer: coarse) {
  .mms-tree-row {
    padding: 10px 8px;
    font-size: 15px;
    min-height: 44px;
  }
  .mms-tree-chevron {
    flex-basis: 16px;
    font-size: 13px;
  }
}

/* Verweis unter dem Eingabefeld: „Eingetragen in … — dorthin springen".
   Kein Knopf, damit er nicht mit „Übernehmen" konkurriert — aber mit genug
   Höhe, dass man ihn mit dem Finger trifft. */
.mms-modal-link {
  margin: -6px 0 12px;
  padding: 6px 2px;
  min-height: 34px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--text-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mms-modal-link:hover {
  filter: brightness(1.15);
}
@media (pointer: coarse) {
  .mms-modal-link {
    min-height: 44px;
    font-size: 14px;
  }
}

/* Der Zusatzknopf gehoert nicht zum Paar „Übernehmen / Abbrechen" — er wird
   deshalb nach links geschoben, damit man ihn nicht versehentlich trifft. */
.mms-modal-extra {
  margin-right: auto;
}

/* Nebenwege im Auswahlfenster (entfernen, von Hand tippen) — links, damit
   „Abbrechen" rechts allein steht. */
.mms-modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-right: auto;
}
@media (max-width: 480px) {
  .mms-modal-actions {
    flex: 1 0 100%;
    margin-right: 0;
    margin-bottom: 6px;
  }
  .mms-modal-actions button {
    flex: 1 1 auto;
    min-height: 40px;
  }
}
@media (max-width: 480px) {
  /* Auf dem Handy passen drei Knoepfe nicht nebeneinander: eigene Zeile. */
  .mms-modal-extra {
    margin-right: 0;
    flex: 1 0 100%;
    margin-bottom: 6px;
  }
}

/* ---------- Fenster „öffnen oder anlegen" ---------- */

.mms-chooser h3 {
  margin-top: 0;
}
.mms-chooser .mms-modal-input {
  margin-bottom: 6px;
}
.mms-chooser-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.mms-chooser-list {
  max-height: 44vh;
  overflow-y: auto;
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 12px;
  background: var(--background-primary);
}
.mms-chooser-group {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 7px 8px 3px;
  position: sticky;
  top: 0;
  background: var(--background-primary);
}
.mms-chooser-item {
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.mms-chooser-item:hover {
  background: var(--background-modifier-hover);
}
.mms-chooser-item.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.mms-chooser-new {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  background: var(--background-secondary);
}
.mms-chooser-label {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}
.mms-chooser-folder {
  flex: 1 1 180px;
  min-width: 0;
  padding: 5px 8px;
  border-radius: 6px;
}
.mms-chooser-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.mms-chooser-foot .mms-modal-hint {
  margin: 0;
  font-size: 11.5px;
}

@media (pointer: coarse) {
  .mms-chooser-list {
    max-height: 38vh;
  }
  .mms-chooser-item {
    padding: 10px;
    font-size: 15px;
  }
  .mms-chooser-new button,
  .mms-chooser-folder {
    min-height: 40px;
  }
}

/* ================================================================
   Fingerbedienung (Android / iPad)
   ================================================================ */

.mms-container.is-touch .mms-toolbar {
  /* Bei schmalem Bildschirm bleibt die Leiste einzeilig und wischbar —
     sonst frisst sie die halbe Zeichenfläche. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  padding: 4px 8px;
  gap: 5px;
}

/* Querformat: dort ist Höhe das knappste Gut — und rechts sitzen bei Samsung
   die Systemtasten, denen die Leiste ausweichen muss. */
@media (orientation: landscape) and (max-height: 520px) {
  .mms-toolbar {
    padding: 3px 8px;
    gap: 4px;
  }
  .mms-container.is-touch .mms-toolbar {
    padding-left: 40px;
    /* Reserve für die Navigationsleiste, falls das System keine Angabe macht */
    padding-right: max(48px, calc(8px + env(safe-area-inset-right, 0px)));
  }
  .mms-container.is-touch .mms-btn {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 13px;
  }
}
.mms-container.is-touch .mms-toolbar::-webkit-scrollbar {
  display: none;
}
.mms-container.is-touch .mms-btn {
  flex: 0 0 auto;
  padding: 7px 11px;
  font-size: 13.5px;
  min-height: 36px; /* bequem treffbar, aber flach — die Karte braucht Platz */
  border-color: var(--background-modifier-border);
}
/* Platz für den Klapp-Griff oben links; rechts hält die Leiste Abstand zu den
   Systemtasten im Querformat. */
.mms-container.is-touch .mms-toolbar {
  padding-left: 40px;
  padding-right: calc(8px + env(safe-area-inset-right, 0px));
}
.mms-container.is-touch .mms-spacer {
  min-width: 4px;
}

/* Ohne Mauszeiger gibt es kein „Überfahren": Griffe und Knöpfe erscheinen,
   sobald ein Knoten ausgewählt ist (Antippen genügt). */
.mms-container.is-touch .mms-handle {
  opacity: 0;
}
.mms-container.is-touch .mms-node.is-selected .mms-handle,
.mms-container.is-touch .mms-node.is-selected .mms-collapse {
  opacity: 1;
}
.mms-container.is-touch .mms-handle-bg {
  stroke-width: 2.5;
}
.mms-container.is-touch .mms-handle-sign {
  font-size: 16px;
}

/* Auswahl deutlicher zeigen — auf kleinen Bildschirmen sonst schwer zu sehen. */
.mms-container.is-touch .mms-node.is-selected .mms-shape {
  stroke-width: 3.5;
}

/* ---------- Texteingabe auf dem Handy ----------
   Auf Touch-Geräten übernimmt ein gewöhnliches Fenster (Obsidian-Modal) die
   Eingabe. Ein frei schwebendes Feld über der Karte war unbrauchbar: die
   Karte sprang weg, das Feld ließ sich nicht schließen, und der S Pen bot
   keine Handschrifterkennung an (gemeldet 03.08.2026). */

/* Der Knoten, der gerade bearbeitet wird, bleibt sichtbar und pulsiert leicht,
   damit klar ist, wohin der Text gehört. */
.mms-node.is-editing .mms-shape {
  stroke: var(--interactive-accent);
  stroke-width: 3.5;
  stroke-dasharray: 5 3;
}
@media (prefers-reduced-motion: no-preference) {
  .mms-node.is-editing .mms-shape {
    animation: mms-editing-pulse 1.4s ease-in-out infinite;
  }
}
@keyframes mms-editing-pulse {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.35; }
}

/* Statuszeile auf dem Handy weglassen — sie stand als grauer Kasten im Bild
   und kostet Platz, den die Karte besser gebrauchen kann (gemeldet 07.08.). */
.mms-container.is-touch .mms-status {
  display: none;
}

.mms-container.is-touch .mms-status {
  font-size: 11px;
  bottom: 6px;
  left: 6px;
  opacity: 0.8;
}

@media (max-width: 620px) {
  .mms-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .mms-btn {
    flex: 0 0 auto;
  }
}

/* --- Karte und Quelltext nebeneinander --------------------------------- */
.mms-split {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  min-width: 0;
}
.mms-split > .mms-wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.mms-source {
  flex: 0 0 clamp(280px, 34%, 560px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
}
.mms-source-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--background-modifier-border);
}
.mms-source-kopf > span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mms-source-btn {
  flex: 0 0 auto;
  padding: 3px 9px;
  font-size: 12px;
  border-radius: 5px;
  cursor: pointer;
  background: var(--background-primary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
}
.mms-source-btn:hover { background: var(--background-modifier-hover); }
.mms-source-text {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 8px 10px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-monospace, ui-monospace, Consolas, monospace);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-normal);
  user-select: text;
  /* ein Textfeld zum Bearbeiten — ohne Rahmen und Ziehgriff */
  border: none;
  border-radius: 0;
  resize: none;
  background: transparent;
}

/* Schmales Fenster (Handy): Quelltext unter die Karte statt daneben. */
@media (max-width: 720px) {
  .mms-split { flex-direction: column; }
  .mms-source {
    flex: 0 0 44%;
    border-left: none;
    border-top: 1px solid var(--background-modifier-border);
  }
  .mms-source-text { font-size: 12px; }
}

/* Häkchen im Auswahlfenster (z. B. „Einbetten") */
.mms-modal-check {
  display: block;
  margin: 8px 0 2px;
  font-size: 0.9em;
  cursor: pointer;
}

/* Aufgabe: abgehakt = durchgestrichen und zurückgenommen */
.mms-label.is-done {
  text-decoration: line-through;
  opacity: 0.55;
}
.mms-check {
  cursor: pointer;
}

/* Ast aus einer eingebetteten Karte */
.mms-guest-ring {
  fill: none;
  stroke-width: 1.6;
  stroke-dasharray: 5 3;
  pointer-events: none;
}

/* Kartendaten in der Notiz: im Editor eingeklappt (seit 1.24.0) */
.mms-data-fold {
  padding: 2px 8px;
  margin: 2px 0;
  border-radius: 6px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  background: var(--background-secondary);
  cursor: pointer;
}

/* MarkDown MindMap — website frame. Layout: top bar, then note | map side by side;
   on phones the two panes sit next to each other and you swipe between them.
   Colours are Obsidian's variable names, so the plugin's own styles fit unchanged. */
:root {
  --color-base-00: #ffffff; --color-base-10: #fafafa; --color-base-20: #f6f6f6; --color-base-25: #e3e3e3;
  --color-base-30: #e0e0e0; --color-base-50: #ababab; --color-base-70: #5c5c5c; --color-base-100: #222222;
  --accent: #7b6cd9; --accent-hover: #6a5ac9;
  --background-primary: var(--color-base-00); --background-primary-alt: var(--color-base-10);
  --background-secondary: var(--color-base-20); --background-modifier-border: var(--color-base-30);
  --background-modifier-hover: rgba(0, 0, 0, 0.06); --background-modifier-active-hover: rgba(0, 0, 0, 0.1);
  --interactive-normal: var(--color-base-00); --interactive-hover: var(--color-base-10);
  --interactive-accent: var(--accent); --interactive-accent-hover: var(--accent-hover);
  --text-normal: var(--color-base-100); --text-muted: var(--color-base-70); --text-faint: var(--color-base-50);
  --text-accent: var(--accent); --text-on-accent: #ffffff; --text-error: #d13c3c; --text-highlight-bg: rgba(255, 208, 0, 0.4);
  --code-background: rgba(127, 127, 127, 0.12);
  --color-red: #e93147; --color-orange: #ec7500; --color-green: #08b94e; --color-cyan: #00bfbc; --color-blue: #086ddd; --color-purple: #7852ee;
  --font-interface: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: var(--font-interface); --font-monospace: ui-monospace, "Cascadia Code", Consolas, monospace;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-base-00: #1e1e1e; --color-base-10: #242424; --color-base-20: #262626; --color-base-25: #2a2a2a;
    --color-base-30: #363636; --color-base-50: #666666; --color-base-70: #b3b3b3; --color-base-100: #dadada;
    --accent: #a594f9; --accent-hover: #b6a8fb; --background-modifier-hover: rgba(255, 255, 255, 0.07);
    --background-modifier-active-hover: rgba(255, 255, 255, 0.12); --shadow: 0 6px 24px rgba(0, 0, 0, 0.5); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-base-00: #1e1e1e; --color-base-10: #242424; --color-base-20: #262626; --color-base-25: #2a2a2a;
  --color-base-30: #363636; --color-base-50: #666666; --color-base-70: #b3b3b3; --color-base-100: #dadada;
  --accent: #a594f9; --accent-hover: #b6a8fb; --background-modifier-hover: rgba(255, 255, 255, 0.07);
  --background-modifier-active-hover: rgba(255, 255, 255, 0.12); --shadow: 0 6px 24px rgba(0, 0, 0, 0.5); color-scheme: dark;
}
/* The per-map light/dark switch (🌓) flips these base colours inside the map only. */
.theme-light .mms-container.theme-dark, .mms-container.theme-dark { --color-base-00: #1e1e1e; --color-base-10: #242424; --color-base-20: #262626; --color-base-30: #363636; --color-base-50: #666666; --color-base-70: #b3b3b3; --color-base-100: #dadada; }
.theme-dark .mms-container.theme-light, .mms-container.theme-light { --color-base-00: #ffffff; --color-base-10: #fafafa; --color-base-20: #f6f6f6; --color-base-30: #e0e0e0; --color-base-50: #ababab; --color-base-70: #5c5c5c; --color-base-100: #222222; }

html, body { height: 100%; }
body {
  margin: 0; background: var(--background-secondary); color: var(--text-normal); font-family: var(--font-interface);
  display: flex; flex-direction: column; overflow: hidden;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; gap: 6px; padding-block: 8px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; margin-right: 4px; white-space: nowrap; color: inherit; text-decoration: none; }
.brand .logo { width: 28px; height: 28px; flex: none; } /* logo → home (landing) page */
#btn-files { flex: 1 1 80px; min-width: 0; color: var(--text-muted); } /* 📑 + name of the open map → list of all maps */
#filename { display: inline; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px; font-size: 13px;
  border: 1px solid var(--background-modifier-border); background: var(--background-primary); }
.tb:hover { background: var(--interactive-hover); }
.group { display: inline-flex; border: 1px solid var(--background-modifier-border); border-radius: 9px; overflow: hidden; }
.group .tb { border: 0; border-radius: 0; }
.tb.is-active { background: var(--interactive-accent); color: var(--text-on-accent); }

/* ---------- panes ---------- */
.panes { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
.pane { min-width: 0; min-height: 0; flex: 1 1 50%; display: flex; flex-direction: column; background: var(--background-primary);
  border: 1px solid var(--background-modifier-border); border-radius: 12px; overflow: hidden; }
body[data-view="note"] #map-pane, body[data-view="map"] #note-pane { display: none; }
#note { flex: 1 1 auto; min-height: 0; overflow: auto; }
.cm-editor { height: 100%; font-size: 16px; }
.cm-editor.cm-focused { outline: none; }
.cm-scroller { font-family: var(--font-text); line-height: 1.6; padding: 18px 8px; }
.cm-content { max-width: 760px; margin: 0 auto; caret-color: var(--text-normal); }
.cm-selectionBackground, .cm-focused .cm-selectionBackground { background: color-mix(in srgb, var(--accent) 25%, transparent) !important; }
#map { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#map > .workspace-leaf-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.view-header { display: none; }
.view-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* phones: note and map side by side, swipe (or use the switch) */
@media (max-width: 767px) {
  .panes { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; }
  .panes::-webkit-scrollbar { display: none; }
  .pane, body[data-view] #note-pane, body[data-view] #map-pane { display: flex; flex: 0 0 100%; scroll-snap-align: start; }
  [data-view-btn="split"] { display: none; }
  .brand { margin-right: 0; flex: none; }
  .brand > span { display: none; } /* phone: the logo alone */
  /* one row: icons only; the 📝 | 🧠 switch shows where you are */
  .top { flex-wrap: nowrap; }
  .top .tb > span:last-child { display: none; }
  /* every button shares the row equally and shrinks with the screen — always one row, never cut off */
  .top .tb, .top #btn-files { flex: 1 1 0; min-width: 0; justify-content: center; padding: 7px 0; font-size: clamp(14px, 4.2vw, 18px); }
  .group { flex: 2 1 0; min-width: 0; }
  .pane { position: relative; }
  .pane .web-edge-tab { display: flex; position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); flex-direction: column;
    align-items: center; gap: 2px; padding: 10px 5px; font-size: 12px; border: 1px solid var(--background-modifier-border);
    background: var(--background-primary); color: var(--text-muted); box-shadow: var(--shadow); opacity: 0.92; }
  #map-pane .web-edge-tab { left: 0; border-left: 0; border-radius: 0 10px 10px 0; }
  #note-pane .web-edge-tab { right: 0; border-right: 0; border-radius: 10px 0 0 10px; }
}
/* small phones: 📑 alone, without a cut-off map name */
@media (max-width: 619px) { #filename { display: none; } }
/* very narrow (the landing page's test window on a phone): tighter gaps, smaller logo */
@media (max-width: 380px) {
  .top { gap: 4px; }
  .brand .logo { width: 24px; height: 24px; }
}
.web-edge-tab { display: none; }
/* note: ✏️ edit / 📖 read switch (top right of the note) and the read view */
#note-pane { position: relative; }
.web-mode { position: absolute; top: 8px; right: 12px; z-index: 6; display: inline-flex; gap: 4px; align-items: center; padding: 4px 10px;
  border-radius: 8px; font-size: 13px; border: 1px solid var(--background-modifier-border); background: var(--background-primary); color: var(--text-muted); }
#reader { display: none; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 22px 20px 40px; font-family: var(--font-text); line-height: 1.6; }
body.reading #note { display: none; }
body.reading #reader { display: block; }
#reader .r-in { max-width: 760px; margin: 0 auto; }
#reader h1 { font-size: 1.6em; margin: .6em 0 .3em; }
#reader h2 { font-size: 1.35em; margin: .6em 0 .3em; }
#reader h3, #reader h4, #reader h5, #reader h6 { font-size: 1.15em; margin: .5em 0 .25em; }
#reader p { margin: .4em 0 .7em; }
#reader .r-li { display: flex; gap: 8px; align-items: baseline; margin: 3px 0; }
#reader .r-li input { margin: 0; cursor: pointer; transform: translateY(2px); accent-color: var(--interactive-accent); }
#reader .r-li.is-done > span { text-decoration: line-through; color: var(--text-muted); }
#reader .r-mark { color: var(--text-muted); min-width: 1.1em; }
#reader mark { background: #fff1a8; color: inherit; border-radius: 3px; padding: 0 2px; }
#reader code { font-family: var(--font-monospace); background: var(--code-background); border-radius: 3px; padding: 0 4px; font-size: .92em; }
#reader pre { background: var(--code-background); border-radius: 8px; padding: 10px 12px; overflow: auto; }
#reader blockquote { margin: 6px 0; padding-left: 12px; border-left: 3px solid var(--background-modifier-border); color: var(--text-muted); }
#reader a { color: var(--text-accent); }

/* my mind maps: open or delete */
.web-files-note { margin: 0 0 8px; color: var(--text-muted); font-size: 13px; }
.web-files { display: grid; gap: 4px; }
.web-file { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 8px; }
.web-file.is-current { background: var(--background-modifier-hover); }
.web-file button { border-radius: 8px; padding: 8px 10px; border: 1px solid var(--background-modifier-border); background: var(--interactive-normal); }
.web-file .web-file-name { flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: none; overflow-wrap: anywhere; padding: 8px 10px; }
.web-file.is-current .web-file-name { font-weight: 600; }
.web-file .web-file-del { border: 0; background: none; }

/* note editor: the part the map writes, collapsed into one bar */
.web-region-bar { display: block; width: 100%; margin: 6px 0; padding: 8px 12px; text-align: left; font-size: 14px; border-radius: 8px;
  border: 1px dashed var(--background-modifier-border); background: var(--background-secondary); color: var(--text-muted); }
.web-region-bar:hover { color: var(--text-normal); }
.web-mermaid { overflow-x: auto; padding: 8px 0; text-align: center; color: var(--text-faint); }
.web-mermaid svg { max-width: 100%; height: auto; }

/* ---------- Obsidian look-alikes: menus, windows, messages, settings ---------- */
.menu { position: fixed; z-index: 100; min-width: 200px; max-width: min(340px, 92vw); max-height: 80vh; overflow: auto; padding: 5px;
  background: var(--background-primary); border: 1px solid var(--background-modifier-border); border-radius: 10px; box-shadow: var(--shadow); font-size: 14px; }
.menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 6px; cursor: pointer; }
.menu-item:hover { background: var(--background-modifier-hover); }
.menu-item.is-disabled { opacity: 0.5; cursor: default; }
.menu-item-icon { width: 18px; display: flex; color: var(--text-muted); }
.menu-item-title { flex: 1; }
.menu-item-check { color: var(--accent); }
.menu-separator { height: 1px; margin: 4px 6px; background: var(--background-modifier-border); }
.svg-icon { width: 17px; height: 17px; stroke-width: 1.75; flex: none; }
.modal-container { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.modal { position: relative; max-width: 640px; width: 100%; max-height: 90%; overflow: auto; padding: 20px; border-radius: 14px;
  background: var(--background-primary); box-shadow: var(--shadow); }
.modal.mod-settings { max-width: 760px; height: 90%; }
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; padding-right: 30px; }
.modal-close-button { position: absolute; top: 10px; right: 10px; border: 0; background: none; font-size: 18px; color: var(--text-muted); }
.notice-container { position: fixed; z-index: 120; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; }
.notice { padding: 10px 14px; border-radius: 8px; background: var(--color-base-100); color: var(--color-base-00); max-width: 340px; box-shadow: var(--shadow); font-size: 14px; }
.setting-item { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--background-modifier-border); flex-wrap: wrap; }
.setting-item-info { flex: 1 1 260px; min-width: 0; }
.setting-item-name { font-weight: 600; }
.setting-item-description { color: var(--text-muted); font-size: 13px; }
.setting-item-control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setting-item-control input[type="text"], .dropdown { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--background-modifier-border); background: var(--background-primary); }
.setting-item-control button, .web-settings-bar button { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--background-modifier-border); background: var(--interactive-normal); }
.mod-cta { background: var(--interactive-accent) !important; color: var(--text-on-accent) !important; border-color: transparent !important; }
.mod-warning { background: var(--text-error) !important; color: #fff !important; border-color: transparent !important; }
.web-settings-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.web-error { position: fixed; inset: auto 16px 16px; max-height: 40vh; overflow: auto; background: #fff0f0; color: #a00; padding: 12px; border-radius: 8px; z-index: 200; }
body:not(.is-ready) .panes { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }