/* ===========================================================================
   Vision Room — die gemeinsame Gestalt.
   ---------------------------------------------------------------------------
   Diese Datei ist die EINZIGE Quelle für das Aussehen des Vision Rooms. Sie
   wird von flowertech.ch (index.html) UND vom öffentlichen Fragebogen
   (fragebogen.html) geladen. Vorher gab es im Fragebogen eine vereinfachte
   Zweitfassung mit Chips — zwei Oberflächen für dieselbe Sache driften
   auseinander, und die Kundschaft sah je nach Weg etwas anderes.

   Die Farben und Masse stehen als eigene Variablen auf `.mm`, nicht auf
   `:root`. So sieht der Vision Room auf beiden Seiten gleich aus, egal welches
   Farbschema die Seite selbst mitbringt (der Fragebogen hat einen hellen
   Modus, flowertech.ch nicht) — und keine Seite kann ihn versehentlich
   umfärben.
   =========================================================================== */

.mm {
  --ink: #f6f6f4;
  --ink-dim: #a3a3a8;
  --ink-faint: #5e5e64;
  --line: rgba(246,246,244,.09);
  --line-2: rgba(246,246,244,.2);
  --line-3: rgba(246,246,244,.42);
  --lime: #c8ff2e;
  --pink: #ff3ea5;
  --orange: #ff7a1a;
  --cyan: #25d5ff;
  --blue: #3765ff;
  --violet: #a06bff;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Inter, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.mm *, .mm *::before, .mm *::after { box-sizing: border-box; }

/* Der Baustein setzt seine eigenen Grundwerte, statt sich auf die Seite zu
   verlassen: Der Fragebogen bringt eigene Grundstile für Eingabefelder und
   Knöpfe mit, die Startseite nicht. Ohne diesen Block sähe der Vision Room je
   nach Seite anders aus — genau das soll er nicht. Er steht bewusst VOR den
   Regeln des Bausteins, damit diese ihn überschreiben. */
.mm p, .mm h3, .mm label, .mm input, .mm button, .mm a { margin: 0; }
.mm input { width: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: none; color: inherit; font: inherit; }
.mm input:focus, .mm input:focus-visible { outline: 0; outline-offset: 0; }
.mm button { padding: 0; border: 0; border-radius: 0; background: none; color: inherit;
  font: inherit; text-transform: none; }
.mm a { text-decoration: none; }

/* ========== Visionroom · Mindmap ========== */
.mm { position: relative; border: 1px solid rgba(255,255,255,.13); border-radius: 28px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(160,107,255,.09), transparent 70%), #08080b;
  box-shadow: 0 -1px 0 rgba(255,255,255,.18) inset, 0 50px 140px rgba(0,0,0,.85); }
.mm-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.025); }
.mm-types { display: flex; gap: 8px; flex-wrap: wrap; }
.mt { display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink-dim);
  border: 1px solid var(--line-2); border-radius: 100px; padding: 9px 16px; background: rgba(255,255,255,.03); cursor: pointer; transition: .25s; }
.mt i { width: 8px; height: 8px; border-radius: 50%; transition: .25s; }
.mt:hover { color: var(--ink); border-color: var(--line-3); }
.mt.on { color: #000; background: #f6f6f4; border-color: #f6f6f4; }
.mm-hint { margin-left: auto; margin-right: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }

.mm-canvas { position: relative; height: 560px; overflow: hidden;
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px); background-size: 26px 26px; }
.mm-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mm-links path { fill: none; stroke-linecap: round; }
.mm-links path.ghost { stroke: rgba(246,246,244,.16); stroke-width: 1; stroke-dasharray: 3 6; animation: mmdash 22s linear infinite; }
@keyframes mmdash { to { stroke-dashoffset: -180; } }
.mm-links path.live { stroke-width: 1.6; }

.mm-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3;
  width: 264px; padding: 20px 22px 18px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, #16161c, #0b0b0f); border: 1px solid rgba(246,246,244,.3);
  box-shadow: 0 24px 70px rgba(0,0,0,.8), 0 0 0 6px rgba(255,255,255,.02); }
.mc-halo { position: absolute; inset: -26px; border-radius: 34px; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(160,107,255,.28), transparent 70%); filter: blur(10px);
  animation: mmpulse 4.5s ease-in-out infinite; }
@keyframes mmpulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
.mc-flower { display: block; margin: 0 auto 10px; width: 26px; height: 26px; animation: vrspin 30s linear infinite; }
@keyframes vrspin { to { transform: rotate(360deg); } }
.mm-core input { width: 100%; background: none; border: 0; outline: 0; text-align: center; color: var(--ink);
  font-family: inherit; font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.mm-core input::placeholder { color: rgba(246,246,244,.28); font-weight: 600; }
.mc-type { display: block; margin-top: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.mc-badge { position: absolute; right: -10px; top: -10px; min-width: 26px; height: 26px; border-radius: 100px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: #000; background: var(--lime); box-shadow: 0 0 18px rgba(200,255,46,.5);
  transform: scale(0); transition: transform .35s cubic-bezier(.3,.9,.3,1.5); }
.mc-badge.on { transform: scale(1); }

.mm-nodes { position: absolute; inset: 0; }
.mnode { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; max-width: 212px;
  font-family: inherit; font-size: 11.5px; font-weight: 600; text-align: left; color: var(--ink-dim); cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 100px; padding: 8px 8px 8px 13px; background: rgba(12,12,16,.94);
  transition: transform .6s cubic-bezier(.2,.75,.25,1), color .3s, border-color .3s, background .3s, box-shadow .3s;
  will-change: transform; }
.mnode span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnode u { text-decoration: none; flex: none; width: 19px; height: 19px; border-radius: 50%; background: rgba(255,255,255,.1);
  display: grid; place-items: center; font-size: 13px; line-height: 1; color: var(--ink); transition: .25s; }
.mnode:hover { color: var(--ink); border-color: var(--line-3); }
.mnode:hover u { background: var(--c, var(--lime)); color: #000; }
.mnode.on { color: #000; background: var(--c, var(--lime)); border-color: var(--c, var(--lime)); font-weight: 750;
  box-shadow: 0 0 26px color-mix(in srgb, var(--c, #c8ff2e) 40%, transparent); }
.mnode.on u { background: rgba(0,0,0,.2); color: #000; }
.mnode.on:hover u { background: rgba(0,0,0,.45); color: #fff; }
.mnode.hidden { opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.6); }

.mm-empty { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); text-align: center; width: min(88%, 520px); pointer-events: none;
  font-size: 13px; line-height: 1.7; color: var(--ink-faint); transition: opacity .4s; }
.mm-empty b { color: var(--ink-dim); font-weight: 650; }
.mm-empty-mobile { display: none; }
.mm-empty.gone { opacity: 0; visibility: hidden; }

.mm-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border-top: 1px solid var(--line); background: rgba(255,255,255,.025); }
.mm-own, .mm-send { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line-2); border-radius: 100px; padding: 6px 6px 6px 16px; }
.mm-own { flex: 1; min-width: 240px; }
.mm-own input, .mm-send input { background: none; border: 0; outline: 0; color: var(--ink); font-family: inherit; font-size: 12.5px; }
.mm-own input { flex: 1; }
.mm-send input { width: 200px; }
.mm-own input::placeholder, .mm-send input::placeholder { color: var(--ink-faint); }
/* Der Fokus muss sichtbar bleiben: Die Felder selbst tragen keinen Rahmen,
   also zeigt ihn die Pille ringsherum an — dieselbe Anzeige auf beiden Seiten. */
.mm-own:focus-within, .mm-send:focus-within { border-color: var(--lime); }
.mm-own button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer; transition: .25s; }
.mm-own button:hover { background: var(--lime); color: #000; }
/* Der Senden-Knopf gehoert zum Vision Room der Startseite. Die Grundform steht
   hier, damit der Baustein auch auf einer Seite ohne .bttn vollstaendig ist. */
.mm .bttn { background: #fff; color: #000; text-decoration: none; font-size: 14.5px; font-weight: 650; padding: 15px 32px; border-radius: 100px; transition: .25s; display: inline-block; }
.mm-send .bttn { padding: 10px 22px; font-size: 13px; }
/* Der Senden-Knopf bleibt stumm, bis die Idee steht. Damit das nicht raten
   heisst, steht die Pflicht zweimal sichtbar da: im Zentrum beim Feld und
   unmittelbar beim Knopf. Ein gedimmter Knopf allein erklaert nichts. */
.mm-need { margin-top: 11px; font-size: 11.5px; line-height: 1.5; }
.mm-need b { display: block; color: var(--ink); font-weight: 700; }
.mm-need span { display: block; margin-top: 4px; color: var(--ink-dim); font-weight: 500; }
.mm-core.filled .mm-need { display: none; }
/* Leeres Zentrum: deutlich sichtbare Aufforderung statt blasser Platzhalter. */
.mm-core.empty { border-color: rgba(160,107,255,.6);
  box-shadow: 0 24px 70px rgba(0,0,0,.8), 0 0 0 6px rgba(160,107,255,.1); }
.mm-core.empty input::placeholder { color: rgba(246,246,244,.62); }
.mm-core:focus-within { border-color: var(--lime);
  box-shadow: 0 24px 70px rgba(0,0,0,.8), 0 0 0 4px rgba(200,255,46,.3); }
.mm-core:focus-within input::placeholder { color: rgba(246,246,244,.5); }
.mm-need-send { width: 100%; margin: 0; font-size: 12.5px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.mm-need-send::before { content: "→ "; color: var(--violet); }
.mm-need-send.done { font-weight: 500; color: var(--ink-dim); }
.mm-need-send.done::before { content: "✓ "; color: var(--lime); }
.mm-sum { padding: 0 20px 18px; font-size: 12.5px; color: var(--ink-faint); }
.mm-sum b { color: var(--ink); font-weight: 700; }

#vrSend { opacity: 1; pointer-events: none; background: rgba(246,246,244,.16); color: var(--ink-dim); }
#vrSend:hover { transform: none; box-shadow: none; background: rgba(246,246,244,.16); }
#vrSend.ready { pointer-events: auto; background: #fff; color: #000; }
#vrSend.ready:hover { background: var(--lime); transform: scale(1.04); box-shadow: 0 10px 44px rgba(200,255,46,.25); }

@media (max-width: 860px) {
  .mm-canvas { height: auto; padding: 22px 16px 26px; }
  .mm-links { display: none; }
  .mm-core { position: relative; left: auto; top: auto; transform: none; width: 100%; margin-bottom: 18px; }
  /* Zentriert umbrechende Pillen ergaben ein unruhiges Zickzack —
     am Handy liest sich eine gleichmässige Spalte deutlich besser. */
  .mm-nodes { position: relative; inset: auto; display: flex; flex-direction: column; gap: 8px; }
  .mnode { position: relative !important; transform: none !important; max-width: 100%; width: 100%;
    justify-content: space-between; touch-action: auto; padding: 9px 9px 9px 14px; }
  .mnode span { flex: 1; min-width: 0; }
  .mnode u { width: 24px; height: 24px; }
  .mnode.hidden { display: none; }
  .mm-empty { position: relative; left: auto; bottom: auto; transform: none; margin-top: 16px; }
  .mm-send, .mm-own { width: 100%; }
  .mm-send input { flex: 1; width: auto; }
  .mm-reset { display: none; }
}

.mm-reset { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--line-2); border-radius: 100px; padding: 7px 13px; background: none; cursor: pointer; transition: .25s; }
.mm-reset:hover { color: var(--ink); border-color: var(--line-3); }
.mm-mobile-step, .mm-label, .mm-suggest, .mm-more { display: none; }
.mnode { user-select: none; touch-action: none; }
.mnode.dragging { transition: none; cursor: grabbing; z-index: 5; box-shadow: 0 18px 44px rgba(0,0,0,.8); }
.mnode:active { cursor: grabbing; }
.mn-edit { width: 150px; background: rgba(0,0,0,.35); border: 0; outline: 0; border-radius: 6px; padding: 2px 6px;
  color: inherit; font-family: inherit; font-size: 11.5px; font-weight: inherit; }
.mt.shake { animation: mtshake .45s; }
@keyframes mtshake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* --- Kontrast auf Touch-Breiten: gedämpfte Töne und Haarlinien vom Desktop
   verschwinden unterwegs und bei Tageslicht. Dieselben Werte wie auf der
   Startseite, hier aber am Baustein selbst — er trägt sein Aussehen mit. --- */
@media (max-width: 900px) {
  .mm {
    --ink-dim: #c8c8ce;
    --ink-faint: #9a9aa3;
    --line: rgba(246,246,244,.17);
    --line-2: rgba(246,246,244,.32);
    --line-3: rgba(246,246,244,.6);
  }
}

@media (max-width: 760px) {
  /* --- Touch-Ziele --- */
  .mt { padding: 10px 15px; font-size: 12.5px; min-height: 42px; }
  .mnode { padding: 10px 10px 10px 14px; font-size: 12.5px; min-height: 42px; }
  .mnode u { width: 24px; height: 24px; font-size: 15px; }
  .mm-own, .mm-send { padding: 6px 6px 6px 14px; }
  .mm-own button { width: 36px; height: 36px; font-size: 19px; }
  .mm-empty { font-size: 13px; }
  .mm-sum { font-size: 12.5px; }
  /* iOS zoomt bei Eingabefeldern unter 16px automatisch hinein */
  .mm-own input, .mm-send input, .mm-core input { font-size: 16px; }
  .mm-core input { font-size: 17px; }

  /* --- Mindmap: Rhythmus --- */
  .mm { border-radius: 20px; }
  .mm-top { padding: 14px; gap: 12px; }
  .mm-hint { margin: 0; width: 100%; font-size: 10px; letter-spacing: .1em; }
  .mm-canvas { padding: 18px 12px 22px; }
  .mm-core { padding: 18px 18px 16px; }
  .mm-foot { padding: 14px; gap: 10px; }
  .mm-sum { padding: 0 14px 16px; }
}

/* Visionroom: vier verständliche Schritte, mobile Karten und normaler Bildlauf. */
@media (max-width: 760px) {
  .mm { display: flex; flex-direction: column; border-radius: 22px;
    background: linear-gradient(180deg, #0d0d12, #060608); box-shadow: 0 24px 70px rgba(0,0,0,.68); }
  .mm-mobile-step { display: flex; align-items: center; gap: 10px; width: 100%;
    color: var(--ink); font-size: 14px; font-weight: 720; letter-spacing: -.01em; }
  .mm-mobile-step em { display: grid; place-items: center; width: 25px; height: 25px; flex: none;
    border-radius: 50%; background: rgba(160,107,255,.16); color: #d7c5ff;
    font-family: var(--mono); font-size: 9px; font-style: normal; letter-spacing: .06em; }
  .mm-top { display: grid; grid-template-columns: 1fr auto; gap: 13px 10px; padding: 17px;
    border-bottom-color: rgba(255,255,255,.1); }
  .mm-top > .mm-mobile-step { grid-column: 1; }
  .mm-reset { display: inline-flex; grid-column: 2; grid-row: 1; align-items: center; justify-content: center;
    min-height: 32px; padding: 7px 10px; font-size: 8.5px; color: var(--ink-dim); }
  .mm-types { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
  .mt { min-width: 0; min-height: 48px; justify-content: center; gap: 7px; padding: 9px 6px;
    font-size: 11.5px; text-align: center; }
  .mt i { width: 7px; height: 7px; }
  .mm-hint { grid-column: 1 / -1; width: auto; margin: 0; padding: 9px 11px;
    border-radius: 10px; background: rgba(255,255,255,.04); font-size: 9.5px; letter-spacing: .1em;
    color: var(--ink-dim); text-align: center; }

  .mm-canvas { display: flex; flex-direction: column; height: auto; overflow: visible; padding: 18px 16px 17px;
    background-image: none; }
  .mm-links, .mc-halo { display: none; }
  .mm-idea-step { order: 1; margin-bottom: 12px; }
  .mm-core { order: 2; position: relative; left: auto; top: auto; transform: none; width: 100%; margin: 0;
    display: grid; grid-template-columns: auto 1fr; gap: 2px 11px; align-items: center; text-align: left;
    padding: 15px 16px 14px; border-radius: 16px; }
  .mc-flower { grid-column: 1; grid-row: 1 / 3; width: 25px; height: 25px; margin: 0; }
  .mm-label { display: block; grid-column: 2; grid-row: 1; color: var(--ink-faint);
    font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; }
  .mm-core input { grid-column: 2; grid-row: 2; text-align: left; min-width: 0; font-size: 16px; }
  .mm-need { grid-column: 1 / -1; grid-row: 3; margin-top: 3px; font-size: 12px; }
  .mm-suggest { display: inline-flex; grid-column: 1 / -1; grid-row: 4; align-items: center; justify-content: center;
    min-height: 46px; margin-top: 11px; border: 0; border-radius: 12px; background: #f6f6f4; color: #000;
    font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
  .mm-suggest:active { transform: scale(.985); background: var(--lime); }
  .mc-type { grid-column: 1 / -1; grid-row: 5; margin: 5px 0 0; font-size: 8.5px; text-align: left; }
  .mc-badge { right: -7px; top: -7px; }

  .mm-feature-step { order: 3; display: none; margin: 22px 0 12px; }
  .mm.has-items .mm-feature-step { display: flex; }
  .mm-nodes { order: 4; position: relative; inset: auto; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  .mnode { position: relative !important; left: auto; top: auto; transform: none !important; width: 100%;
    max-width: none; min-height: 50px; justify-content: space-between; align-items: flex-start;
    touch-action: auto; padding: 12px 11px 12px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.35; }
  .mnode span { white-space: normal; overflow: visible; text-overflow: clip; }
  .mnode u { width: 23px; height: 23px; margin-top: -2px; }
  .mnode.mobile-hidden { display: none; }
  .mm-more { order: 5; align-items: center; justify-content: center; min-height: 44px; margin-top: 10px;
    border: 1px solid var(--line-2); border-radius: 12px; background: none; color: var(--ink-dim);
    font-family: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
  .mm-more:not([hidden]) { display: inline-flex; }
  .mm-empty { order: 6; position: relative; left: auto; bottom: auto; transform: none; width: 100%;
    margin-top: 14px; padding: 13px 14px; border-radius: 12px; background: rgba(255,255,255,.03);
    font-size: 12.5px; line-height: 1.55; text-align: left; }
  .mm-empty-desktop { display: none; }
  .mm-empty-mobile { display: inline; }
  .mm-empty.gone { display: none; }

  .mm-foot { display: none; grid-template-columns: 1fr; gap: 11px; padding: 17px;
    border-top-color: rgba(255,255,255,.08); }
  .mm.has-picks .mm-foot, .mm.has-idea .mm-foot { display: grid; }
  .mm-need-send { order: 3; font-size: 12.5px; }
  .mm-own, .mm-send { width: 100%; min-width: 0; border-radius: 13px; background: #101014; }
  .mm-own { min-height: 50px; }
  .mm-send { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 7px 7px 7px 13px; }
  .mm-own input, .mm-send input { min-width: 0; font-size: 16px; }
  .mm-send .bttn { min-height: 42px; padding: 10px 17px; font-size: 13px; }
  .mm-sum { order: 4; padding: 13px 17px 16px; border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(160,107,255,.055); font-size: 12px; line-height: 1.5; }
}

@media (max-width: 359px) {
  .mm-nodes { grid-template-columns: 1fr; }
  .mt { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-halo, .mc-flower { animation: none; }
  .mm-links path.ghost { animation: none; }
  .mnode { transition: color .3s, border-color .3s, background .3s; }
}

/* ── Der Vision Room im Fragebogen ───────────────────────────────────────
   Dieselbe Mindmap, aber ohne eigenen Versand: Idee und Funktionen sind zwei
   Antworten DIESES Fragebogens und gehen mit ihm zusammen ab. Deshalb hat der
   Fuss hier keinen Senden-Knopf und kein E-Mail-Feld — der Rückkanal ist eine
   ganz normale Frage des Bogens. Die Felder des Fragebogens bleiben als
   Wertträger bestehen, werden aber vom Zentrum der Mindmap bedient. */
.mm[data-mode="intake"] .mm-send { display: none; }

/* ── Dateien im Vision Room (nur Fragebogen-Modus) ───────────────────────
   Eine eigene Zeile direkt unter der Art: links die Beschriftung, rechts der
   Knopf, darunter die Liste. Immer sichtbar — unabhaengig von Idee, Auswahl
   oder Bildschirmbreite. */
.mm-files { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "head pick" "list list" "status status"; align-items: center; gap: 8px 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.035); }
.mm-files-head { grid-area: head; min-width: 0; }
.mm-files-pick { grid-area: pick; }
.mm-files-list { grid-area: list; }
.mm-files-status { grid-area: status; }
.mm-files-label { margin: 0; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.mm-files-label span { font-weight: 400; color: var(--ink-faint); }
.mm-files-hint { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-faint); }
.mm-files input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.mm-files-pick { justify-self: end; border: 1px solid var(--lime); background: rgba(255,255,255,.06); color: var(--ink); font-family: inherit; font-size: 12.5px; border-radius: 100px; padding: 7px 14px; cursor: pointer; transition: .25s; }
.mm-files-pick:hover, .mm-files-pick:focus-visible { border-color: var(--lime); outline: 0; }
.mm-files-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mm-files-list:empty { display: none; }
.mm-file { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.mm-file.uploading { opacity: .6; }
.mm-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.mm-file-meta { color: var(--ink-faint); white-space: nowrap; }
.mm-file-remove { width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--ink); cursor: pointer; font-size: 15px; line-height: 1; }
.mm-file-remove:hover, .mm-file-remove:focus-visible { background: rgba(255,255,255,.2); outline: 0; }
.mm-files-status { margin: 0; font-size: 12px; color: var(--ink-faint); min-height: 1em; }
.mm-files-status.err { color: #ffb4a8; }
@media (max-width: 760px) {
  .mm-files { grid-template-columns: 1fr; grid-template-areas: "head" "pick" "list" "status"; padding: 14px 17px; }
  .mm-files-pick { justify-self: stretch; min-height: 44px; font-size: 14px; }
  .mm-file { min-height: 40px; }
}