/* Promptheus-Chat-Widget. Nutzt die CSS-Variablen der Seite (--green, --glass,
   --text1/2/3, --font-ui, --font-body). Eigene Sektion, ersetzt NICHT das
   Kontaktformular. Chamfer (abgeschraegte Ecken) + Glas im Stil der Seite. */
.phc{--ch:16px;max-width:760px;margin:34px auto 0}
.phc-shell{clip-path:var(--card-clip);
  background:rgba(var(--green),0.40);padding:1px}
.phc-panel{clip-path:var(--card-clip);
  background:var(--glass);backdrop-filter:blur(16px) saturate(1.05);-webkit-backdrop-filter:blur(16px) saturate(1.05);
  display:flex;flex-direction:column;min-height:480px}

/* Kopf: Avatar + Name + Status */
.phc-head{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid rgba(var(--green),0.16)}
.phc-ava{width:42px;height:42px;flex:0 0 auto;color:rgb(var(--green))}
.phc-ava svg{width:100%;height:100%;display:block}
.phc-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.phc-name{font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--text1);letter-spacing:.02em}
.phc-status{font-family:var(--font-ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--green));
  display:flex;align-items:center;gap:7px}
.phc-status::before{content:"";width:7px;height:7px;background:rgb(var(--green));border-radius:50%;
  box-shadow:0 0 8px rgba(var(--green),0.8);animation:phcpulse 2.4s ease-in-out infinite}
@keyframes phcpulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Verlauf */
.phc-log{flex:1 1 auto;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth}
.phc-msg{display:flex;gap:11px;max-width:88%}
.phc-msg .b{font-family:var(--font-body);font-size:16px;line-height:1.6;padding:12px 16px;
  border:1px solid rgba(var(--green),0.16);background:rgba(var(--green),0.04);color:var(--text1);white-space:pre-wrap;word-wrap:break-word}
.phc-msg.bot{align-self:flex-start}
.phc-msg.bot .ico{width:26px;height:26px;flex:0 0 auto;color:rgb(var(--green));margin-top:2px}
.phc-msg.bot .ico svg{width:100%;height:100%;display:block}
.phc-msg.bot .b{clip-path:var(--card-clip)}
.phc-msg.me{align-self:flex-end;flex-direction:row-reverse}
.phc-msg.me .b{background:rgba(var(--green),0.13);border-color:rgba(var(--green),0.34);
  clip-path:var(--card-clip)}
/* Kontext-Chip: zeigt, welches Bild gerade besprochen wird (kein User-Text) */
.phc-ctx{align-self:center;font-family:var(--font-ui);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgb(var(--green));background:rgba(var(--green),0.10);
  border:1px solid rgba(var(--green),0.30);padding:5px 13px;margin:2px 0;
  clip-path:var(--card-clip)}
.phc-ctx::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;vertical-align:1px;
  background:rgb(var(--green));box-shadow:0 0 7px rgba(var(--green),0.8)}
/* Tipp-Indikator */
.phc-typing{display:inline-flex;gap:5px;align-items:center;padding:4px 2px}
.phc-typing i{width:6px;height:6px;background:rgb(var(--green));border-radius:50%;opacity:.4;animation:phcdot 1.2s infinite}
.phc-typing i:nth-child(2){animation-delay:.18s}.phc-typing i:nth-child(3){animation-delay:.36s}
@keyframes phcdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* Streaming-Caret: weicher blinkender Strich am Textende, während Tessa schreibt */
.phc-msg .b.phc-stream::after{content:"";display:inline-block;width:2px;height:1.05em;
  background:rgb(var(--green));margin-left:2px;vertical-align:-0.16em;border-radius:1px;
  animation:phccaret 1.05s ease infinite}
@keyframes phccaret{0%,45%{opacity:1}55%,100%{opacity:0}}

/* Eingabe */
.phc-input{display:flex;gap:10px;align-items:flex-end;padding:16px 18px;border-top:1px solid rgba(var(--green),0.16)}
.phc-input textarea{flex:1 1 auto;min-width:0;font-family:var(--font-body);font-size:16px;color:var(--text1);line-height:1.5;
  background:rgba(var(--green),0.04);border:1px solid rgba(var(--green),0.25);padding:12px 14px;outline:none;resize:none;
  max-height:140px;min-height:48px;transition:border-color .15s,box-shadow .15s}
.phc-input textarea::placeholder{color:var(--text3)}
.phc-input textarea:focus{border-color:rgba(var(--green),0.7);box-shadow:0 0 0 3px rgba(var(--green),0.12)}
.phc-send{font-family:var(--font-ui);font-size:14px;letter-spacing:.04em;color:#15181e;background:rgb(var(--green));
  border:none;padding:0 22px;height:48px;cursor:pointer;flex:0 0 auto;transition:box-shadow .15s,opacity .15s;
  clip-path:var(--card-clip)}
.phc-send:hover{box-shadow:0 0 22px rgba(var(--green),0.45)}
.phc-send:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
/* Mikro-Button (von diktat.js eingefuegt): quadratischer Icon-Button im Seitenstil.
   Nur der Desktop-Feld-Modus (.phc-field .phc-mic) ueberschreibt das mit Canvas-Layout. */
.phc-mic{flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--green),0.08);border:1px solid rgba(var(--green),0.30);color:rgb(var(--green));
  cursor:pointer;padding:0;transition:background .15s,box-shadow .15s,border-color .15s,color .15s;
  clip-path:var(--card-clip)}
.phc-mic svg{width:20px;height:20px;display:block}
.phc-mic:hover{background:rgba(var(--green),0.16);border-color:rgba(var(--green),0.6);box-shadow:0 0 16px rgba(var(--green),0.3)}
.phc-mic.rec{background:rgba(191,97,106,0.22);border-color:rgba(191,97,106,0.6);color:#d98a92}
.phc-mic.busy{opacity:.5;cursor:wait}
/* Schmale Schirme (unter der 1100px-Feld-Schwelle, wo die Standard-Controls greifen):
   Mikro + Senden ohne Chamfer -> einfache Rechtecke (Marlin 18.06.). */
@media(max-width:1100px){
  .phc-input .phc-send,.phc-input .phc-mic{clip-path:none!important}
}
.phc-mic-flash{font-family:var(--font-ui);font-size:12.5px;color:#d98a92;padding:8px 18px 0;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .2s}
.phc-mic-flash.show{opacity:1;max-height:60px}
.phc-err{color:#bf616a;font-family:var(--font-ui);font-size:13px;padding:0 22px 14px}
/* Honeypot: fuer Menschen unsichtbar, nicht fokussierbar; Bots fuellen es -> Server filtert */
.phc-hp{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;
  pointer-events:none;border:0;padding:0;margin:0}
.phc-note{font-family:var(--font-ui);font-size:13px;color:var(--text3);margin:16px auto 0;max-width:760px;text-align:center}
.phc-note a{color:rgb(var(--green))}

@media(max-width:760px){
  .phc-panel{min-height:60vh}
  .phc-msg{max-width:94%}
  .phc-msg .b{font-size:15px;padding:11px 14px}
  .phc-send{padding:0 18px}
  /* Eingabeleiste flach in EINER Reihe: textarea schrumpft (min-width:0), Mikro +
     Senden bleiben rechts. (textarea bleibt 16px -> iOS zoomt beim Fokus nicht rein.) */
  .phc-input{flex-wrap:nowrap;align-items:center;gap:8px}
  .phc-input textarea{flex:1 1 auto}
}

/* === Hero-Variante (phc-hero) ===========================================
   Das Modul lebt in der hcard.lead des Hero. Kein eigener Glas-Rahmen (die
   Karte ist schon Glas), kompakt: initial nur das Eingabefeld. Der Verlauf
   klappt beim ersten Senden auf (.phc-open, von chat.js gesetzt). */
.phc-hero{max-width:none;margin:22px 0 0}
.phc-hero .phc-shell{background:none;padding:0;clip-path:none}
.phc-hero .phc-panel{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  clip-path:none;min-height:auto;display:block}
.phc-hero .phc-log{display:none;max-height:0;padding:0;gap:14px}
.phc-hero.phc-open .phc-log{display:flex;max-height:44vh;padding:2px 0 18px;overflow-y:auto}
.phc-hero .phc-input{border-top:none;padding:0}
/* Eingabefeld im Hero etwas praesenter (es ist der Haupt-Call-to-Action) */
.phc-hero .phc-input textarea{min-height:52px}
@media(max-width:760px){
  .phc-hero.phc-open .phc-log{max-height:50vh}
  /* flacher Eingang (einzeiliger Placeholder „Frag mich zu Promptheus"). Steht NACH
     der 52px-Basisregel oben. textarea bleibt 16px -> kein iOS-Fokus-Zoom.
     nowrap: der Placeholder bleibt einzeilig (bricht nie haesslich um); im Vollbild
     (.phc-fs) wird wieder normal umgebrochen (mehrzeilige Eingabe). */
  .phc-hero .phc-input textarea{min-height:46px}
  .phc-hero:not(.phc-fs) .phc-input textarea{white-space:nowrap;overflow:hidden}
}
/* Sehr schmale Phones (iPhone SE, kleine Androids): „Senden" als Pfeil-Icon, damit
   die textarea breit genug bleibt und der Placeholder einzeilig passt. */
@media(max-width:384px){
  .phc-hero .phc-input{gap:6px}
  .phc-hero .phc-input textarea{padding-left:10px;padding-right:10px}
  .phc-hero .phc-input .phc-mic{width:44px}
  .phc-hero .phc-input .phc-send{font-size:0;padding:0;width:44px;display:flex;align-items:center;justify-content:center}
  .phc-hero .phc-input .phc-send::after{content:"";width:0;height:0;
    border-left:13px solid #15181e;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:2px}
}

/* === Full-Screen-Glas (phc-fs) ==========================================
   Mobile: der Hero-Chat expandiert per Expand-Button (chat-fullscreen.js) auf
   den ganzen Schirm — Glas im Seitenstil, offener Verlauf, Eingabe am Fuss. */
/* Expand-Button: nur auf Mobile sichtbar, oben rechts in der Hero-Karte */
.phc-fs-btn{display:none}
.phc-fs-close{display:none}
@media(max-width:760px){
  .phc-fs-btn{display:flex;position:absolute;top:14px;right:12px;z-index:3;
    width:34px;height:34px;align-items:center;justify-content:center;
    background:rgba(var(--green),0.08);border:1px solid rgba(var(--green),0.28);color:rgb(var(--green));
    cursor:pointer;padding:0;transition:background .15s,border-color .15s}
  .phc-fs-btn svg{width:17px;height:17px;display:block}
  .phc-fs-btn:hover,.phc-fs-btn:active{background:rgba(var(--green),0.18);border-color:rgba(var(--green),0.55)}
  /* solange das Vollbild offen ist, ist der Expand-Button (in der Karte) ueberfluessig */
  html.phc-fs-lock .phc-fs-btn{display:none}
}
/* Body-Scroll sperren, solange das Vollbild offen ist */
html.phc-fs-lock,html.phc-fs-lock body{overflow:hidden}
/* Vollbild-Overlay */
.phc-hero.phc-fs{position:fixed;inset:0;z-index:90;margin:0;max-width:none;
  background:linear-gradient(160deg,rgba(var(--green),0.10),rgba(10,14,20,0.94));
  backdrop-filter:blur(24px) saturate(1.12);-webkit-backdrop-filter:blur(24px) saturate(1.12);
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 54px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);
  animation:phcfsin .26s cubic-bezier(.2,.9,.3,1) both}
@keyframes phcfsin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.phc-fs .phc-shell{flex:1 1 auto;display:flex;min-height:0;background:none;padding:0}
.phc-fs .phc-panel{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;background:none}
/* Verlauf fuellt den Schirm, ueberschreibt die eingeklappte Hero-Regel */
.phc-fs .phc-log{display:flex!important;flex:1 1 auto;max-height:none!important;
  padding:6px 0 16px;overflow-y:auto;gap:14px}
.phc-fs .phc-msg{max-width:90%}
.phc-fs .phc-input{border-top:1px solid rgba(var(--green),0.18);padding:12px 0 0;flex:0 0 auto}
.phc-fs .phc-input textarea{min-height:50px}
/* Schliessen-Kreuz oben rechts */
.phc-fs .phc-fs-close{display:flex;position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;
  width:38px;height:38px;align-items:center;justify-content:center;border:none;cursor:pointer;z-index:2;
  background:rgba(255,255,255,0.07);color:var(--text1);
  clip-path:var(--card-clip);transition:background .15s}
.phc-fs .phc-fs-close:hover{background:rgba(191,97,106,0.5)}
.phc-fs .phc-fs-close svg{width:20px;height:20px;display:block}
/* im Vollbild ist der Expand-Button selbst ueberfluessig */
.phc-fs .phc-fs-btn{display:none}

/* === Loch-Variante (phc-loch) ============================================
   B3: dasselbe #ph-chat-Element zieht als fixed-Fenster an das angeklickte
   Loch. Blauer Durchbruch-Grund (BLUE), WhatsApp-Layout, Verlauf offen. */
.phc.phc-loch{position:fixed;z-index:60;max-width:none;margin:0;animation:phclochin .28s ease}
@keyframes phclochin{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.phc-loch .phc-shell{background:rgba(122,162,255,0.55);padding:1px;
  clip-path:var(--card-clip)}
.phc-loch .phc-panel{background:linear-gradient(160deg,rgba(46,66,118,0.74),rgba(20,30,58,0.80));
  backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15);
  clip-path:var(--card-clip);
  min-height:auto;display:flex;flex-direction:column;position:relative}
/* Verlauf im Loch immer offen (ueberschreibt die phc-hero-Collapse) */
.phc-hero.phc-loch .phc-log{display:flex;max-height:46vh;padding:20px 20px 6px;overflow-y:auto}
.phc-loch .phc-input{border-top:1px solid rgba(122,162,255,0.22);padding:14px 16px}
.phc-loch .phc-head{display:none}
.phc-loch-close{position:absolute;top:8px;right:10px;width:30px;height:30px;border:none;
  background:rgba(255,255,255,0.08);color:var(--text1);font-size:20px;line-height:1;cursor:pointer;
  clip-path:var(--card-clip);
  z-index:2;transition:background .15s}
.phc-loch-close:hover{background:rgba(191,97,106,0.55)}

/* Aus dem Hero geloest und an body gehaengt: unsichtbar, bis Tessa ein Fenster
   aufmacht (phc-tessa) oder ein Loch-Chat aktiv ist (phc-loch). */
.phc-detached:not(.phc-tessa):not(.phc-loch){display:none}

/* === Chat = buendig-rechte Nord-Spalte (phc-field) ==========================
   Flush am rechten Bildschirmrand, saubere Chamfer-Ecken links (KEINE spitzen
   Ecken), Glas im Stil der Seite. Spalte zwischen Nav (oben) und Stil-Picker
   (unten), sodass nichts ueberlappt. Ersetzt die gezackte Feld-Flaeche. */
/* #winField = Dreiecks-Flaeche des Chats (tessa-fieldwin.js), HINTER dem Chat-DOM */
#winField{position:fixed;left:0;top:0;z-index:57;pointer-events:none;display:none}
#winField.on{display:block}
.phc.phc-field{position:fixed!important;right:0!important;left:auto!important;
  top:134px!important;bottom:150px!important;width:min(420px,38vw)!important;
  max-width:none!important;height:auto!important;max-height:none!important;margin:0!important;z-index:58!important}
/* Shell transparent -> das Dreiecks-Raster von #winField zeigt durch */
.phc-field .phc-shell{height:100%!important;padding:0!important;background:none!important;
  clip-path:none!important;box-shadow:none!important}
/* Panel transparent (Marlin #27): KEIN rechteckiges Glas, das der gezackten Form
   nicht folgt. Nur die solide (weniger transparente) Nord-Dreiecksflaeche des
   #winField-Canvas liefert den Grund — sie folgt der echten Zacken-Geometrie. */
.phc-field .phc-panel{height:100%!important;background:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  clip-path:none!important;display:flex!important;flex-direction:column!important;
  min-height:0!important;overflow:hidden!important}
/* Verlauf endet klar UEBER der Eingabe-Leiste (Marlin): der Canvas-Balken (2 Reihen)
   kann bis ~Hh/2 hoeher als die DOM-Box beginnen -> Polster, damit die letzte Nachricht
   nicht hinter der Box/Leiste verschwindet. */
.phc-field .phc-log{flex:1 1 auto!important;min-height:0!important;max-height:none!important;padding-bottom:40px!important}
/* Eingabefeld/Bubbles: leichte Farbe, semitransparent (Marlin #28 — nicht ganz
   transparent, aber durchscheinend). Bot gruenlich (Tessa), Nutzer kuehl-blau. */
.phc-field .phc-input textarea{background:rgba(8,11,16,0.34)}
.phc-field .phc-msg.bot .b{background:rgba(110,140,116,0.20)}
.phc-field .phc-msg.me .b{background:rgba(120,150,190,0.22)}
.phc-field.phc-loch .phc-msg.me .b{background:rgba(122,162,255,0.26)}
/* Nachrichten ohne Chamfer-Ecken (Marlin 17.06.): gerade Kanten. */
.phc-field .phc-msg .b{clip-path:none}
/* Pro-Nachricht-Avatar weg (Marlin #26): die animierte Tessa haelt das Fenster
   schon an der Ecke + Header zeigt ihren Namen -> das kleine Icon links lag unter
   ihrem Bein und war doppelt. Bot-Blasen ruecken stattdessen buendig an. */
.phc-field .phc-msg.bot .ico{display:none}
.phc-field .phc-msg.bot{max-width:94%;margin-left:8px}
/* Erste Bot-Blase ruecken, damit sie nicht unter Tessas Bein/Fuss landet (sie sitzt
   auf der oberen linken Ecke, Beine reichen ~110px in den Chat). (Marlin #26) */
.phc-field .phc-log .phc-msg.bot:first-child{margin-left:96px;margin-top:34px}

/* === Tessa-Fenster (phc-tessa) ===========================================
   Hero-Auftritt: die animierte Tessa macht SELBST ein Fenster auf. Dasselbe
   #ph-chat-Element, fixed unter Tessa verankert (von tessa-hero.js positioniert).
   Semitransparent, der Dreiecksstruktur folgend (Chamfer), in Tessas Gruen. */
.phc.phc-tessa{position:fixed;z-index:58;max-width:none;margin:0;
  animation:phctessain .34s cubic-bezier(.2,.9,.3,1.2) both;transform-origin:top center}
@keyframes phctessain{from{opacity:0;transform:translateY(-12px) scale(.92)}to{opacity:1;transform:none}}
.phc-tessa .phc-shell{background:rgba(var(--green),0.46);padding:1px;
  clip-path:var(--card-clip);
  box-shadow:0 18px 60px rgba(0,0,0,0.45),0 0 34px rgba(var(--green),0.22)}
.phc-tessa .phc-panel{background:linear-gradient(158deg,rgba(var(--green),0.13),rgba(12,16,22,0.62));
  backdrop-filter:blur(20px) saturate(1.12);-webkit-backdrop-filter:blur(20px) saturate(1.12);
  clip-path:var(--card-clip);
  min-height:auto;display:flex;flex-direction:column;position:relative}
/* Tessa-Kopfzeile NUR im Hero-Fenster; in anderen Modi (Loch) ausgeblendet,
   sonst zeigt das injizierte phc-thead seinen Avatar ungestylt in voller Groesse. */
.phc-thead{display:none}
/* Kopfzeile: Tessa-Avatar + „Tessa“ — macht klar, dass SIE das Fenster haelt */
/* Kopfzeile: Tessa-Logo raus (die animierte Tessa sitzt schon an der Ecke, das
   doppelte Logo ueberlappte) — nur „Tessa", weiter nach rechts (Marlin #7). */
.phc-tessa .phc-thead{display:flex;align-items:center;gap:9px;padding:16px 46px 13px 64px;
  border-bottom:1px solid rgba(var(--green),0.18)}
/* Name groesser + klar rechts neben Tessas Arm (sie sitzt mit R=58 auf der linken
   Ecke, ihr rechter Arm reicht ~90px hinein) -> Header-Inhalt erst ab 108px (Marlin #26) */
.phc-tessa .phc-thead{padding-left:108px}
.phc-tessa .phc-thead .av{display:none}
.phc-tessa .phc-thead .av svg{width:100%;height:100%;display:block}
.phc-tessa .phc-thead .nm{font-family:var(--font-ui);font-size:19px;font-weight:700;color:var(--text1);letter-spacing:.03em}
.phc-tessa .phc-thead .st{margin-left:auto;font-family:var(--font-ui);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgb(var(--green));display:flex;align-items:center;gap:6px}
.phc-tessa .phc-thead .st::before{content:"";width:6px;height:6px;background:rgb(var(--green));border-radius:50%;
  box-shadow:0 0 8px rgba(var(--green),0.8);animation:phcpulse 2.4s ease-in-out infinite}
/* Verlauf: erst beim Senden auf (erbt phc-hero.phc-open) */
.phc-hero.phc-tessa .phc-log{display:none;max-height:0;padding:0 18px}
.phc-hero.phc-tessa.phc-open .phc-log{display:flex;max-height:40vh;padding:16px 18px 6px;overflow-y:auto}
.phc-tessa .phc-input{border-top:1px solid rgba(var(--green),0.16);padding:13px 16px}
.phc-tessa-close{position:absolute;top:9px;right:11px;width:26px;height:26px;border:none;
  background:rgba(255,255,255,0.07);color:var(--text2);font-size:17px;line-height:1;cursor:pointer;
  clip-path:var(--card-clip);
  z-index:3;transition:background .15s,color .15s}
.phc-tessa-close:hover{background:rgba(191,97,106,0.5);color:#fff}

/* === Bedienelemente im Feld-Fenster an den Nord-Loch-Stil angepasst ==========
   Im Nord-Durchbruch (phc-field) sollen Eingabe, Senden, Mikro, Chip + Schliessen
   ruhig in die Polar-Night-/Frost-Palette passen statt grell-gruen herauszustechen. */
/* Kontext-Chip: dezent in Snow/Frost statt leuchtend gruen */
.phc-field .phc-ctx{color:#d8dee9;background:rgba(216,222,233,0.07);border-color:rgba(216,222,233,0.18)}
.phc-field .phc-ctx::before{background:#88c0d0;box-shadow:0 0 7px rgba(136,192,208,0.7)}
/* User-Blase: kuehles Frost-Blau (Nord), hebt sich ruhig ab */
.phc-field.phc-loch .phc-msg.me .b{background:rgba(129,161,193,0.30)}
/* === Bedienelemente in den untersten Zellen (Skizze 17.06.) ==================
   Die Zell-RAEMEN (Parallelogramm-Eingabe + diagonal geteilte Mikro/Senden-Raute)
   zeichnet tessa-fieldwin.js auf den Canvas (dicke, grid-genaue Striche). Die DOM-
   Controls liegen hier nur TRANSPARENT als Inhalt/Hitbox drin. CH=88, RW=104. */
/* Control-Zeile = 2 Dreieckreihen hoch (Marlin #13–16): CH = 2*Hh ≈ 100px.
   Muss zu tessa-fieldwin.js (CH=Math.round(2*Hh), RW=L=58, SLANT≈58) passen. */
.phc-field .phc-input{position:relative;height:100px;padding:0;border-top:none;display:block}
/* Eingabe-Feld = linkes Parallelogramm ueber die volle Hoehe (transparent,
   Canvas zeichnet den Rahmen). Rechts Platz fuer die Raute (RW+SLANT ≈ 116px). */
.phc-field .phc-input textarea{position:absolute;left:34px;top:0;bottom:0;right:180px;width:auto;height:auto;
  min-height:0;max-height:none;background:none;border:none;clip-path:none;color:#e5e9f0;resize:none;
  padding:8px 6px;display:flex;align-items:center;line-height:1.4}
.phc-field .phc-input textarea::placeholder{color:rgba(216,222,233,0.5)}
.phc-field .phc-input textarea:focus{box-shadow:none}
/* Mikro = OBERES Dreieck der Raute (rechts, obere Haelfte) */
/* Mikro/Senden: kleine zentrierte Boxen, exakt auf die Raster-Zellen gesetzt von
   tessa-fieldwin.js (layoutDOM). right/top hier nur Fallback bis JS laeuft. */
.phc-field .phc-mic{position:absolute;right:70px;top:6px;width:46px;height:42px;background:none;border:none;
  clip-path:none;color:#88c0d0;display:flex;align-items:center;justify-content:center;padding:0}
.phc-field .phc-mic svg{width:20px;height:20px}
.phc-field .phc-mic:hover{background:none;box-shadow:none;color:#aee0ff}
/* Senden = UNTERES Dreieck der Raute (Play-Pfeil statt Text, untere Haelfte) */
.phc-field .phc-send{position:absolute;right:14px;bottom:6px;width:46px;height:42px;background:none!important;
  border:none!important;box-shadow:none!important;clip-path:none;font-size:0;color:#cfe0b8;
  display:flex;align-items:center;justify-content:center;padding:0}
.phc-field .phc-send::after{content:"";width:0;height:0;border-left:16px solid #cfe0b8;
  border-top:10px solid transparent;border-bottom:10px solid transparent}
.phc-field .phc-send:hover::after{border-left-color:#eaf5d8}
/* Schliessen: Nord-neutral, Hover dezent statt knallrot */
.phc-field .phc-loch-close,.phc-field .phc-tessa-close{background:rgba(216,222,233,0.08);color:#d8dee9}
.phc-field .phc-loch-close:hover,.phc-field .phc-tessa-close:hover{background:rgba(191,97,106,0.45);color:#fff}