/* Overlay-Modus "anruf" (aus Entwurf 2 "Edgerunners-Anruf"): quadratische CALL-Kacheln, Untertitel ohne Kasten, Protokoll stapelt sich nach oben.
   Alles haengt an #call[data-phase]. Transparent als Overlay. */
:root {
  --cyan: #7ff3ff;               /* Namen, Capri-Zeilen (wie Maine in der Vorlage) */
  --orange: #ffb35c;             /* Zeilen des Gegenuebers */
  --red: #e8433f;                /* Kachel Capri */
  --green: #4be36a;              /* Kachel du */
  --pink: #ff3b7a;
  --violet: #b79bff;
  --grey: #7b7890;
  --rim: rgba(2, 8, 14, .85);    /* duenner dunkler Rand der Schrift */
  /* kantige, schmale Sans: Bahnschrift (Windows) / DIN-aehnlich; nichts wird geladen */
  --head: "Bahnschrift", "DIN Condensed", "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", "DejaVu Sans Condensed", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace;
  --tc: var(--red);              /* Farbe der Capri-Kachel je Phase */
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: transparent;       /* Desktop-Fenster ist durchsichtig */
  overflow: hidden; color: var(--cyan);
  font: 500 17px/1.2 var(--head);
  user-select: none;
}


#call {
  --pad: clamp(16px, 5vw, 28px);
  position: relative; height: 100%; width: min(100%, 560px); margin: 0 auto;
  padding: var(--pad);
  display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}

#call[data-phase="eingehend"] { --tc: var(--pink); }
#call[data-phase="denken"]    { --tc: var(--violet); }
#call[data-phase="werkzeug"]  { --tc: #ffb02e; }
#call[data-phase="gestoert"]  { --tc: #ff1f3d; }
#call[data-phase="aufgelegt"] { --tc: var(--grey); }

/* Schrift mit duennem dunklem Rand statt Kasten */
.rim, .nm, .st, #log, .hud, .banner, .confirm, .chip {
  paint-order: stroke fill; -webkit-text-stroke: 3px var(--rim);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}

/* ---------- Kopfzeile ---------- */
.hud { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--cyan); letter-spacing: .06em; }
.hud #status { white-space: nowrap; margin-right: auto; }
.hud #status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--tc);
                       box-shadow: 0 0 8px var(--tc); animation: blink 1.2s steps(2) infinite; }
#call[data-phase="aufgelegt"] #status::before { animation: none; }
.hud time { font-variant-numeric: tabular-nums; color: #bfeff5; }
.sig { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.sig i { width: 3px; background: var(--cyan); }
.sig i:nth-child(1) { height: 4px; } .sig i:nth-child(2) { height: 7px; } .sig i:nth-child(3) { height: 10px; } .sig i:nth-child(4) { height: 13px; }
#call[data-phase="gestoert"] .sig i:nth-child(n+3), #call[data-phase="aufgelegt"] .sig i { opacity: .2; }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- Protokoll: waechst von unten, alte Zeilen laufen nach oben weg ---------- */
#log { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; overflow: hidden;
       -webkit-mask-image: linear-gradient(transparent 0, #000 38%); mask-image: linear-gradient(transparent 0, #000 38%); }
.line { display: flex; gap: 10px; max-width: 86%; align-items: flex-start; animation: einblenden .22s steps(4) both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } }
.line.capri { align-self: flex-start; }
.line.du { align-self: flex-end; flex-direction: row-reverse; text-align: right; }
.line .mk { flex: none; width: 26px; height: 26px; margin-top: 2px; border: 2px solid; position: relative;
            background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.08) 2px 3px); }
.line .mk::after { content: ""; position: absolute; inset: 4px; border: 2px solid; border-right-color: transparent; border-radius: 50%; }
.line.capri .mk { color: var(--red); background-color: rgba(232, 67, 63, .3); }
.line.du .mk { color: var(--green); background-color: rgba(75, 227, 106, .25); }
.line .tx { margin: 0; font-size: 21px; line-height: 1.12; }
.line.capri .tx { color: var(--cyan); }
.line.du .tx { color: var(--orange); }
.line .tx span.now { color: #fff; }
.line .tx.pending::after { content: "▌"; animation: blink .8s steps(2) infinite; }
.line.sys { align-self: flex-start; gap: 8px; font: 14px var(--mono); color: #ffcb7a; align-items: baseline; max-width: 100%; letter-spacing: .02em; }
.line.sys::before { content: "▸"; }
.line.sys.done { color: #8ea4a8; }
.line.sys.done::before { content: "✓"; color: var(--green); }
.line.sys .tx { font: inherit; color: inherit; }

/* ---------- Rueckfrage / Freigabe ---------- */
.confirm { align-self: flex-start; max-width: 92%; padding: 10px 14px 10px 16px; border-left: 3px solid #ffb02e;
           background: linear-gradient(90deg, rgba(255, 176, 46, .2), rgba(255, 176, 46, .04));
           -webkit-text-stroke: 0; animation: einblenden .25s steps(4) both; }
.confirm b { color: #ffb02e; font-size: 15px; letter-spacing: .06em; }
.confirm p { margin: 4px 0; font-size: 20px; color: #fff3d8; }
.confirm .yn { display: flex; gap: 10px; margin-top: 8px; pointer-events: auto; }
.confirm[hidden] { display: none; }

/* ---------- Knoepfe ---------- */
.chip { font: inherit; font-size: 17px; padding: 10px 18px; border: 2px solid; background: rgba(0,0,0,.35); cursor: pointer;
        -webkit-text-stroke: 0; letter-spacing: .04em; }
.chip.decline { color: #ff7a7a; border-color: var(--red); }
.chip.accept { color: #8dffa5; border-color: var(--green); background: rgba(75, 227, 106, .16); }
.chip:focus-visible, #mute:focus-visible, #gear:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- Kacheln ---------- */
.tiles { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.side { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.side.du { align-items: flex-end; }
.nm { font-size: 20px; color: var(--cyan); letter-spacing: .04em; }
.st { margin: 0; min-height: 17px; font-size: 14px; color: var(--cyan); letter-spacing: .05em; }

.tile {
  --tint: var(--red); --lv: 0; --tilt: 9deg;
  position: relative; overflow: hidden; border: 2px solid var(--tint); isolation: isolate;
  background: color-mix(in srgb, var(--tint) 28%, rgba(10, 14, 18, .35));
  box-shadow: 0 0 14px color-mix(in srgb, var(--tint) 55%, transparent), inset 0 0 22px color-mix(in srgb, var(--tint) 40%, transparent);
  transform: perspective(520px) rotateY(var(--tilt)) rotateX(2deg); transform-origin: left center;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.tile.red { --tint: var(--tc); width: clamp(132px, 38vw, 188px); aspect-ratio: 1; }
.tile.green { --tint: var(--green); --tilt: -9deg; width: clamp(72px, 20vw, 96px); aspect-ratio: 1; transform-origin: right center; }
.holo { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .55;
        background:
          repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 4px),
          repeating-linear-gradient(90deg, color-mix(in srgb, var(--tint) 35%, transparent) 0 1px, transparent 1px 8px); }
.scan { position: absolute; left: 0; right: 0; height: 28%; z-index: 3; pointer-events: none; top: -30%;
        background: linear-gradient(transparent, color-mix(in srgb, var(--tint) 55%, #fff 10%), transparent); opacity: .35;
        animation: scan 3.6s linear infinite; }
@keyframes scan { to { top: 110%; } }

.tile .call { position: absolute; z-index: 5; left: 0; right: 0; bottom: 6%; text-align: center; font-size: 18px; font-weight: 700;
              letter-spacing: .08em; color: #fff; paint-order: stroke fill; -webkit-text-stroke: 3px var(--rim); opacity: .0; }
.tile.green .call { bottom: auto; top: 50%; transform: translateY(-50%); font-size: 20px; opacity: 1; }
#call[data-phase="eingehend"] .tile.red .call { bottom: auto; top: 50%; transform: translateY(-50%); font-size: 30px; opacity: 1; animation: blink .7s steps(2) infinite; }

/* Ring: zwei Boegen, Laenge folgt dem Pegel (JS), Drehung je Phase */
.ring { position: absolute; inset: 3%; width: 94%; height: 94%; z-index: 4; pointer-events: none; overflow: visible;
        filter: drop-shadow(0 0 3px var(--tint)); }
.arc { fill: none; stroke: var(--tint); stroke-width: 5; stroke-linecap: butt; transform-origin: 50% 50%; opacity: .95; }
.arc.a1 { transform: rotate(-70deg); }
.arc.a2 { transform: rotate(110deg); stroke: color-mix(in srgb, var(--tint) 70%, #fff); stroke-width: 3.2; }
.tile.green .arc { stroke-width: 6; }
#call[data-phase="eingehend"] .tile.red .ring { animation: spin 1.1s linear infinite; }
#call[data-phase="denken"] .tile.red .ring { animation: spin 2.4s linear infinite; }
#call[data-phase="werkzeug"] .tile.red .ring { animation: spin 3.4s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Avatar: Kopf und Schultern im Kachelausschnitt */
#avatar { position: absolute; z-index: 1; width: 175%; aspect-ratio: 1; left: -37.5%; top: -21%; }
#frame, .ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
                 -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 3px, rgba(0,0,0,.7) 3px 4px);
                         mask-image: repeating-linear-gradient(0deg, #000 0 3px, rgba(0,0,0,.7) 3px 4px);
                 transition: filter .3s, opacity .3s; }
#frame { filter: saturate(1.05) drop-shadow(0 0 1px var(--tint)); }
.ghost { opacity: 0; mix-blend-mode: screen; }
.g-r { filter: brightness(0) saturate(100%) invert(30%) sepia(95%) saturate(4000%) hue-rotate(320deg); }
.g-c { filter: brightness(0) saturate(100%) invert(85%) sepia(60%) saturate(900%) hue-rotate(125deg); }
#avatar.glitch-shift #frame { transform: translate(var(--gx), var(--gy)); }
#avatar.glitch-split .g-r { opacity: .85; transform: translate(var(--gx), 0); }
#avatar.glitch-split .g-c { opacity: .85; transform: translate(calc(var(--gx) * -1), 0); }
#avatar.glitch-slice #frame { clip-path: inset(18% 0 46% 0); transform: translateX(var(--gx)); }
#avatar:has(> svg) { width: 100%; left: 0; top: 0; }
#avatar > svg { position: absolute; left: 10%; top: 6%; width: 80%; height: 88%; overflow: visible; }
#avatar svg ~ #placeholder { display: none; }
.chip:disabled { opacity: .45; cursor: default; }
#placeholder { position: absolute; left: 36%; top: 12%; width: 28%; aspect-ratio: .7; border-radius: 50% 50% 20% 20%;
               background: radial-gradient(circle at 50% 30%, #fff, var(--tint) 40%, transparent 75%); opacity: .6; }

#call[data-phase="eingehend"] #avatar { filter: blur(4px) brightness(.5); }
#call[data-phase="denken"] #frame { filter: hue-rotate(-14deg) saturate(.8) drop-shadow(0 0 4px var(--violet)); }
#call[data-phase="aufgelegt"] .tile { filter: grayscale(1) brightness(.55); }
#call[data-phase="aufgelegt"] .tile .ring, #call[data-phase="aufgelegt"] .scan { display: none; }
#call[data-phase="eingehend"] .tile.red { animation: ruf .7s steps(2) infinite; }
@keyframes ruf { 50% { box-shadow: 0 0 26px var(--tint), inset 0 0 30px var(--tint); background: color-mix(in srgb, var(--tint) 45%, rgba(10,14,18,.35)); } }
#call[data-phase="gestoert"] .tile.red { animation: jitter .24s steps(2) infinite; }
@keyframes jitter { 25% { transform: perspective(520px) rotateY(9deg) translate(-3px, 1px); } 75% { transform: perspective(520px) rotateY(9deg) translate(3px, -1px); } }
#call.connecting .tile { animation: aufbau .9s steps(9) both; }
@keyframes aufbau { 0% { clip-path: inset(48% 0 48% 0); opacity: .3; } 40% { clip-path: inset(10% 0 60% 0); opacity: 1; } 55% { clip-path: inset(0); } 70% { opacity: .4; } 100% { clip-path: inset(0); opacity: 1; } }
#call[data-phase="eingehend"] .tile.green { opacity: .35; }

/* ---------- Hinweise ---------- */
.banner { position: absolute; left: 0; right: 0; top: 34%; z-index: 6; text-align: center; display: none; flex-direction: column; gap: 4px;
          pointer-events: none; padding: 14px 0; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .78) 20%, rgba(0, 0, 0, .78) 80%, transparent); }
.banner b { font-size: 30px; letter-spacing: .08em; }
.banner span { font-size: 15px; color: var(--cyan); }
#call[data-phase="gestoert"] .banner { display: flex; color: #ff4a62; animation: jitter2 .3s steps(2) infinite; }
#call[data-phase="aufgelegt"] #log { opacity: .5; }
#call[data-phase="aufgelegt"] .banner { display: flex; color: #c9c6d6; }
@keyframes jitter2 { 50% { transform: translateX(3px); opacity: .85; } }

@media (prefers-reduced-motion: reduce) {
  .scan, .tile, .ring, .line, .banner, #status::before, .call { animation: none !important; }
}

/* ---------- Overlay: Stumm, Einstellungen, Tippen, Fehlerzeilen ---------- */
.hud { position: relative; z-index: 7; }
.hud button { font: inherit; font-size: 13px; color: var(--cyan); background: transparent; border: 1px solid transparent; padding: 2px 8px;
              cursor: pointer; opacity: 0; transition: opacity .2s; paint-order: stroke fill; -webkit-text-stroke: 3px var(--rim); }
.hud button:focus-visible { opacity: 1; }
#call:hover .hud button, #mute.on { opacity: 1; }
#mute.on { color: #ff7a8a; border-color: #ff5a78; }
#gear { font-size: 0; width: 22px; height: 22px; padding: 0; border: 0; position: relative; }
#gear::before { content: "⚙"; font-size: 17px; line-height: 22px; }
.line.sys.err { color: #ff7a8a; }
.line.sys.err::before { content: "✖"; }
.line.sys.note { color: #8ea4a8; }
#typing { margin: 0; }
#input { width: 100%; font: inherit; font-size: 17px; color: var(--cyan); padding: 8px 12px; background: rgba(2, 8, 14, .8);
         border: 2px solid var(--cyan); outline: none; }
#input::placeholder { color: #5d8a92; }