/* Ghostwriter – Gesprächskarte, Mitschrift und Live-Konversation (Lex' persönliche App).
   Durchgängige Studio-Formensprache (10px / 8px / 6px / 2px) in Hell & Dunkel,
   reine Schriftmarke „Ghostwriter“, mitscrollender Gesprächsverlauf ohne Zeituhren
   sowie abgestimmte Mobil- und Desktop-Bühne mit Walkie-Talkie-Steuerung. */

/* ── Gesprächskarte vor dem Anruf ── */
.ghostwriter-karte {
  position: relative; isolation: isolate; overflow: clip;
  padding: clamp(20px, 2.5vw, 26px);
  border-radius: var(--nw-radius-large, 10px);
  background: var(--karte); border: 1px solid var(--linie-2);
}
.ghostwriter-karte :focus-visible { outline-color: var(--gw-aktiv, var(--tinte)); }
.ghostwriter-kopf { display: flex; align-items: flex-start; gap: 14px; }
.ghostwriter-wer { min-width: 0; }
.ghostwriter-name {
  margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2; font-weight: 650; letter-spacing: -.02em;
}
.ghostwriter-rolle { margin: 4px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--tinte-2); }
.ghostwriter-karte.still .ghostwriter-kopf { margin-bottom: 4px; }
.ghostwriter-karte.still .knopf { margin-top: 14px; }

.anruf-knopf {
  position: relative; display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 58px; margin-top: 18px; padding: 8px 18px 8px 9px;
  border: 1px solid transparent; border-radius: var(--nw-radius-small, 6px);
  background: var(--gw-weiss, var(--tinte)); color: var(--gw-auf-weiss, var(--grund));
  font-size: 17px; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; text-align: left;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.anruf-knopf:disabled { opacity: 1; cursor: default; }
.anruf-symbol {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border-radius: var(--nw-radius-small, 6px);
  background: var(--gw-auf-weiss, var(--grund)); color: var(--gw-weiss, var(--tinte));
}
.anruf-symbol svg { width: 20px; height: 20px; }
.anruf-text { flex: 1; min-width: 0; }

.ghostwriter-grund { margin: 14px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--tinte-2); }
.ghostwriter-infos {
  list-style: none; display: grid; gap: 8px;
  margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--linie);
}
.ghostwriter-infos li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; color: var(--tinte-2); }
.ghostwriter-infos svg { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--tinte-3); }
.ghostwriter-infos li.ghostwriter-thema {
  margin-bottom: 4px; padding: 11px 14px;
  border-radius: var(--nw-radius-medium, 8px); border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--tinte); font-size: 14.5px; line-height: 1.45; overflow-wrap: break-word;
}
.ghostwriter-infos li.ghostwriter-thema strong { font-weight: 650; }

/* ── Anrufliste „Deine Gespräche“ (ohne Bildmarke, ohne Dauer) ── */
.anrufe {
  list-style: none; margin: 0; padding: 0; overflow: clip;
  border-radius: var(--nw-radius-medium, 8px); background: var(--karte); border: 1px solid var(--linie);
}
.anrufe li + li { border-top: 1px solid var(--linie); }
.anruf-eintrag {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  width: 100%; min-height: 58px; padding: 14px 16px;
  border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
  transition: background-color .15s;
}
.anruf-eintrag > svg { width: 18px; height: 18px; color: var(--tinte-3); flex: none; }
.anruf-eintrag:focus-visible { outline-offset: -3px; }
.anruf-eintrag:active { background: var(--flaeche); }
.anruf-info { display: grid; gap: 3px; min-width: 0; }
.anruf-datum { font-size: 15px; font-weight: 650; line-height: 1.3; letter-spacing: -.012em; }
.anruf-punkt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: clip; font-size: 14px; line-height: 1.42; color: var(--tinte-2); overflow-wrap: break-word;
}
@media (hover: hover) { .anruf-eintrag:hover { background: var(--flaeche); } }

/* ── Blatt mit der gespeicherten Mitschrift ── */
dialog.mitschrift-blatt .info-innen { padding-bottom: 0; }
.mitschrift-kopf h2 { margin: 6px 0 0; font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.65rem); }
.mitschrift-block { margin-top: 26px; }
.mitschrift .mitschrift-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; }
.mitschrift .mitschrift-zeile h3 { margin: 0; }
.mitschrift-hinweis { margin: 26px 0 0; color: var(--tinte-2); }
.mitschrift-nochmal { margin-top: 14px; }
.wortlaut { display: grid; gap: 14px; }
.wechsel { display: grid; gap: 5px; max-width: min(92%, 34rem); }
.wechsel-ghostwriter { justify-self: start; }
.wechsel-ich { justify-self: end; }
.wechsel-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin: 0 2px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--tinte-3);
}
.wechsel-ich .wechsel-kopf { justify-content: flex-end; }
.wechsel-rolle { font-weight: 650; color: var(--tinte); }
.wechsel-marke {
  padding: 2px 8px; border-radius: var(--nw-radius-small, 6px);
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--tinte-2); font-size: 12px;
}
.wechsel-text {
  margin: 0; padding: 12px 16px 13px; overflow-wrap: break-word;
  font-size: 16px; line-height: 1.52; border-radius: var(--nw-radius-medium, 8px);
}
.wechsel-ghostwriter .wechsel-text {
  background: var(--karte); border: 1px solid var(--linie); border-left: 3px solid var(--linie-2);
}
.wechsel-ich .wechsel-text {
  background: var(--flaeche); border: 1px solid var(--linie-2);
}
.wechsel.uebersprungen .wechsel-text { opacity: .62; }
dialog.mitschrift-blatt .info-fuss {
  position: sticky; bottom: 0; margin: 20px -24px 0;
  padding: 16px 24px max(18px, env(safe-area-inset-bottom));
  background: var(--erhaben); border-top: 1px solid var(--linie);
}
@media (min-width: 640px) {
  dialog.mitschrift-blatt .info-fuss { margin-inline: -32px; padding-inline: 32px; }
}

dialog:modal { overscroll-behavior: contain; }
dialog::backdrop { overflow: hidden; overscroll-behavior: contain; }

/* ── Live-Gesprächsansicht (Mobil: Vollbild-App; Desktop: zentriertes Studio-Panel) ── */
dialog.gespraech {
  position: fixed; inset: 0; isolation: isolate; overflow: clip; overscroll-behavior: contain;
  width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--karte); color: var(--tinte);
}
dialog.gespraech::backdrop { background: var(--grund); }

.gespraech-rahmen {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%; height: 100%; outline: none; min-width: 0;
}

/* Kopfbereich: reine Schriftmarke „Ghostwriter“ links, „Beenden“ rechts */
.gespraech-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: var(--karte); border-bottom: 1px solid var(--linie);
}
.gespraech-kopf-links { display: flex; align-items: center; min-width: 0; flex: 1; }
.gespraech-kopf-name {
  font-size: 18px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; color: var(--tinte);
}
.gespraech-kopf-rechts { display: flex; align-items: center; gap: 8px; flex: none; }
.gespraech-beenden {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 6px 13px; font-size: 13.5px; font-weight: 600;
}
.gespraech-beenden svg { width: 16px; height: 16px; flex: none; }
@media (pointer: coarse) {
  .gespraech-beenden { min-height: 44px; }
}

/* Vertiefte Gesprächsbühne mit ruhigem Mitscrollen */
.gespraech-mitte {
  overflow-y: auto; overflow-x: clip; scrollbar-gutter: stable; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 18px max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left));
  min-height: 0; -webkit-overflow-scrolling: touch;
  background: var(--grund);
}
.gespraech-ton {
  align-self: center; max-width: 28rem; margin-bottom: 14px; white-space: normal; text-align: center;
}
.gespraech-verlauf {
  display: flex; flex-direction: column; gap: 16px;
  width: 100%; max-width: 44rem; min-height: 100%; margin-inline: auto;
}
.gespraech-verlauf > :first-child { margin-top: auto; }

.verlauf-start-hinweis {
  margin: auto; max-width: 24rem; padding: 24px 20px; text-align: center;
  border-radius: var(--nw-radius-large, 10px); background: var(--karte); border: 1px solid var(--linie);
}
.verlauf-start-titel { margin: 0; font-size: 16.5px; font-weight: 650; color: var(--tinte); }
.verlauf-start-unter { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--tinte-2); }

/* Einzelner Sprecherschnitt im Live-Verlauf */
.verlauf-beitrag {
  display: grid; gap: 6px; max-width: min(88%, 34rem); min-width: min(190px, 70%);
}
.beitrag-ghostwriter { align-self: flex-start; }
.beitrag-ich { align-self: flex-end; }

.beitrag-kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 4px 8px; padding-inline: 2px; font-size: 12.5px; line-height: 1.3; color: var(--tinte-2);
}
.beitrag-ich .beitrag-kopf { justify-content: flex-end; }
.beitrag-rolle { font-weight: 650; color: var(--tinte); }
.beitrag-status {
  padding: 2px 8px; border-radius: var(--nw-radius-small, 6px);
  background: var(--karte); border: 1px solid var(--linie);
  font-size: 11.5px; font-weight: 600; color: var(--tinte-2);
}

.beitrag-blase {
  display: grid; gap: 9px; padding: 13px 16px 14px;
  border-radius: var(--nw-radius-medium, 8px);
  background: var(--karte); border: 1px solid var(--linie);
  transition: border-color .15s, background-color .15s;
}
.beitrag-ghostwriter .beitrag-blase {
  border-left: 3px solid var(--linie-2);
}
.beitrag-ich .beitrag-blase {
  background: var(--flaeche); border-color: var(--linie-2);
}
.verlauf-beitrag.uebersprungen .beitrag-blase { opacity: .62; }

.beitrag-text {
  margin: 0; font-size: 16px; line-height: 1.52; color: var(--tinte);
  overflow-wrap: break-word; text-align: left;
}
.beitrag-text.platzhalter { font-size: 14.5px; color: var(--tinte-2); }
.beitrag-text .vorlaeufig { opacity: .75; }
.beitrag-punkte { justify-self: start; }

/* Live-Mikrofonpegel in der aktiven eigenen Aufnahmeblase */
.pegel-leiste {
  display: inline-flex; align-items: flex-end; gap: 4px; height: 22px; padding: 2px 0;
}
.pegel-balken {
  width: 4px; height: 100%; border-radius: 2px; background: var(--gw-geprueft, var(--tinte));
  transform: scaleY(var(--hoehe, .22)); transform-origin: center bottom;
  transition: transform 90ms ease-out;
}

/* Abschluss- & Störungskarte */
.gespraech-abschluss-karte {
  margin: auto; width: 100%; max-width: 34rem; display: grid; gap: 16px;
  padding: clamp(20px, 3vw, 26px); border-radius: var(--nw-radius-large, 10px);
  background: var(--karte); border: 1px solid var(--linie-2); text-align: left;
}
.gespraech-zustand {
  margin: 0; justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: var(--nw-radius-small, 6px);
  background: var(--flaeche); border: 1px solid var(--linie);
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--tinte-2);
}
.gespraech-zustand::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.gespraech-text { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 600; overflow-wrap: break-word; }
.gespraech-hinweis { margin: 0; font-size: 14.5px; line-height: 1.48; color: var(--tinte-2); }
.gespraech-kurz {
  padding: 15px 16px 16px; border-radius: var(--nw-radius-medium, 8px);
  background: var(--flaeche); border: 1px solid var(--linie);
}
.gespraech-kurz .etikett { margin: 0 0 8px; color: var(--tinte-2); }
.gespraech-zusammenfassung { margin: 0; padding-left: 18px; display: grid; gap: 7px; font-size: 15px; line-height: 1.45; }
.gespraech-schreibt {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 13px 15px;
  border-radius: var(--nw-radius-medium, 8px); background: var(--flaeche); border: 1px solid var(--linie-2);
  font-size: 14.5px; font-weight: 550; line-height: 1.42;
}

/* ── Untere Schnitt-Leiste & Walkie-Talkie-Konsole ── */
.gespraech-fuss-bereich {
  display: grid; gap: 10px;
  padding: 12px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--karte); border-top: 1px solid var(--linie);
}
.verlauf-unten-knopf {
  justify-self: center; display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 6px 14px; font-size: 13.5px; font-weight: 600;
}
.verlauf-unten-knopf svg { width: 16px; height: 16px; flex: none; }

.schnitt-leiste {
  display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 7px 12px;
  border-radius: var(--nw-radius-small, 6px); background: var(--flaeche); border: 1px solid var(--linie);
  font-size: 13.5px; line-height: 1.35; color: var(--tinte-2);
}
.schnitt-punkt {
  width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--tinte-2);
}
.schnitt-text { flex: 1; min-width: 0; font-weight: 550; color: var(--tinte); }

.gespraech-fuss {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; gap: 10px;
}
.gespraech-fuss[data-art="ende"], .gespraech-fuss[data-art="fehler"] {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.gespraech-fuss[data-art="ende"] > .knopf, .gespraech-fuss[data-art="fehler"] > .knopf { flex: 1 1 150px; }
.gespraech-fuss[data-art="ende"] > .knopf-primaer { flex: 1.5 1 190px; }

.gespraech-fuss > .knopf {
  min-height: 56px; font-size: 16.5px; font-weight: 650;
}
.telefon-seite { display: flex; }
.telefon-rund {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 15px; border: 1px solid var(--linie-2); border-radius: var(--nw-radius-small, 6px);
  background: var(--flaeche); color: var(--tinte); cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.telefon-rund svg { width: 18px; height: 18px; flex: none; }
.telefon-rund:disabled { opacity: .45; cursor: default; }
.telefon-text { font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: inherit; }

/* Desktop-Bühne: zentriertes Studio-Fenster mit ausgewogener Walkie-Talkie-Konsole */
@media (min-width: 768px) {
  dialog.gespraech {
    width: min(820px, calc(100dvw - 48px));
    height: min(840px, calc(100dvh - 48px));
    margin: auto;
    border: 1px solid var(--linie-2);
    border-radius: var(--nw-radius-large, 10px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  }
  dialog.gespraech::backdrop {
    background: rgba(9, 9, 11, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .gespraech-kopf {
    min-height: 62px;
    padding: 12px 28px;
  }
  .gespraech-mitte {
    padding: 24px 28px;
  }
  .gespraech-fuss-bereich {
    padding: 14px 28px 18px;
  }
  .gespraech-fuss-bereich > :is(.schnitt-leiste, .gespraech-fuss) {
    width: 100%;
    max-width: 540px;
    margin-inline: auto;
  }
  .gespraech-fuss > .knopf,
  .telefon-rund {
    min-height: 52px;
  }
}

@media (max-width: 340px) {
  .beenden-wort { display: none; }
  .gespraech-beenden { padding-inline: 10px; min-width: 44px; }
  .gespraech-fuss { grid-template-columns: 1fr; }
  .telefon-rund { width: 100%; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .pegel-balken { transition: none; }
}