/* Bedienelemente: Texteingabe (Fläche unter den Klangringen) und rechts unten die Knopfspalte
   Countdown (Stoppuhr), Wiederholen, Play. Abstände aus dem Raster in rahmen.css (--rand, --abstand, --luft). */
/* Text-Block: Textfenster links + Knopfspalte rechts, genau 192px hoch (--block), seitlich --rand (32px) wie die Wortmarke.
   Darüber und darunter je 40px Luft (--block-luft); auf niedrigen Bildschirmen schrumpft sie gleichmäßig bis 24px. */
.composer-dock { flex: 0 1 calc(var(--block) + 2 * var(--block-luft)); min-height: calc(var(--block) + 2 * var(--block-luft-min)); display: flex; align-items: center; padding: 0 var(--rand); }
.composer { position: relative; flex: 1; height: var(--block); margin: 0; cursor: text; }
/* Stift-Symbol in der ersten Textzeile links, vertikal auf deren Versalhöhe zentriert (--stift setzt texteingabe.js);
   die erste Zeile ist dafür eingerückt (text-indent). Scrollt der Text, tritt das Symbol zurück. */
.composer-icon { position: absolute; top: var(--stift, 0px); left: 0; width: 18px; height: 18px; color: #8edeea; opacity: .6; pointer-events: none; transition: opacity .2s; }
.composer[data-gescrollt="true"] .composer-icon { opacity: 0; }
/* Feste Fläche ohne Kasten: gleicher Hintergrund wie die App, kein Rahmen, kein Fokusrahmen. Feste Schriftgröße 20px
   (keine Anpassung an die Textmenge; mehr Text scrollt unsichtbar innerhalb des 192-px-Blocks, kein Balken, kein Ausblenden).
   Rechts bleibt die Knopfspalte frei: 56px Knopf + 24px Luft (--luft) = 80px, damit Text nie darunter verschwindet.
   Oberkante der ersten Zeile (Versalhöhe) = Oberkante des ersten Knopfs: das Feld ragt um --kappe (halber Zeilenabstand + Abstand
   Oberlänge → Versalhöhe, von texteingabe.js für 20px gesetzt) nach oben; Unterkante = Unterkante Play. */
.composer textarea { position: absolute; top: calc(-1 * var(--kappe, 0px)); right: 80px; bottom: 0; left: 0; width: auto; height: calc(100% + var(--kappe, 0px)); margin: 0; padding: 0; text-indent: 24px; resize: none; border: 0; border-radius: 0; outline: none; box-shadow: none; background: transparent; -webkit-appearance: none; appearance: none;
  color: #f0f5ff; caret-color: #94eee1; font-size: 20px; font-weight: 650; line-height: 1.12; letter-spacing: -.015em; text-transform: uppercase;
  white-space: pre-wrap; overflow-wrap: normal; word-break: normal; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.composer textarea::-webkit-scrollbar { display: none; }
/* Überlanges Wort (breiter als die Fläche, z. B. STROMVERSORGUNG): deutsche Silbentrennung mit Trennstrich (lang="de" am Dokument);
   kurze Wörter bleiben ganz (Trennung erst ab 10 Zeichen, je Teil mind. 4). Nur wenn kein Trennpunkt passt, bricht das Wort
   als Notnagel an der Kante (break-word statt anywhere). */
.composer textarea[data-umbruch="trennen"] { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; overflow-wrap: break-word; }
.composer textarea:focus, .composer textarea:focus-visible { outline: none; }
.composer textarea::placeholder { color: #a0adc2; opacity: .55; }
.composer-actions { position: absolute; right: 0; bottom: 0; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Stoppuhr und Wiederholen: gleich groß wie Play (56px), nur Linien – dünner Ring und Linien-Symbol, transparent.
   Aus = gedämpftes Grau; an = Ring und Symbol in Akzentfarbe mit leichtem Leuchten. */
.tool-button { width: 56px; height: 56px; display: grid; place-items: center; padding: 0; border: 1.5px solid #a0adc259; border-radius: 50%; background: transparent; color: #a0adc2; cursor: pointer; transition: color .2s, border-color .2s, box-shadow .2s; }
.tool-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool-button[aria-pressed="true"] { color: #94eee1; border-color: #94eee1; box-shadow: 0 0 14px #94eee140, inset 0 0 10px #94eee126; }
.tool-button:not([aria-pressed="true"]):hover { color: #d6dfec; border-color: #a0adc299; }
/* Countdown läuft: statt des Stoppuhr-Symbols die Restzeit m:ss (data-rest, von texteingabe.js gesetzt) – klein, Schrift der App,
   Akzentfarbe. Kein zusätzliches Element; danach erscheint wieder das Symbol. */
.timer-button[data-rest] svg { display: none; }
.timer-button[data-rest]::after { content: attr(data-rest); color: #94eee1; font-size: 13px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* Play-Knopf: zeigt nur Play (Ruhe) oder Stopp (während Erzeugung und Wiedergabe) – kein weiterer Zustand. */
.send-button { width: 56px; height: 56px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #b9e6ea; color: #132c40; box-shadow: 0 8px 24px #0003; cursor: pointer; transition: background .2s, transform .2s, opacity .2s; }
.send-button svg { grid-area: 1 / 1; width: 24px; height: 24px; }
.send-button .icon-stop { display: none; }
.send-button:is([data-state="loading"], [data-state="playing"]) .icon-play { display: none; }
.send-button:is([data-state="loading"], [data-state="playing"]) .icon-stop { display: block; }
.send-button:disabled { opacity: .4; cursor: default; }
.send-button:not(:disabled):hover { background: #d6faf5; transform: translateY(-1px); }
.send-button:not(:disabled):active { transform: scale(.94); }