/* MAYTRAS Command Center v5 — HTML katmanları (WP-H3-HUD-10d)
 *
 * Plan: `docs/OPERATIONS/SAHLANIS/HUD-10-PLAN.md` §1.1 (`cc-v5.css` YOLU:
 * `dashboard/styles/` — `dashboard/css/` DEĞİL; `scripts/check-theme-contrast.js`
 * yalnız `dashboard/styles/**` tarar) ve §4 (etkileşim/katman eşlemesi).
 * Tasarım referansı: `docs/DESIGN/cc-c01-canvas/` tahtaları (Main / UzmanProfili /
 * C01 / ZoomKatmanlari / Mobil) + kabul edilen prototip
 * `docs/DESIGN/cc-hud-v4/src/cc-v4.css` (yerleşim ölçüleri: header 56 ·
 * aside 372 · dock 214; prototipin 64px sol rayı WP-H3-HUD-11'de kaldırıldı —
 * CC gömülü çalışıyor, uygulamanın kendi sidebar'ı sahnenin dışında solda).
 *
 * ------------------------------------------------------------------ *
 * SABİT RENK YOK — TEK ÇEVİRME NOKTASI
 *
 * Dosyada tek bir hex/rgb/rgba/hsl/`white`/`black` değeri yoktur. Saydamlık
 * `color-mix(in srgb, var(--…) N%, transparent)` ile üretilir (repoda yerleşik
 * desen: `c01-avatar-presence.css`, `b08-v2-commercial.css`, `theme-standard.css`).
 *
 * CC sahnesi İKİ TEMADA DA bilerek koyu lacivert kalır — bu `gtos-cc-hud.css`
 * başındaki ürün kararının (§6.8 "C01 tema uyumu" ayrı bir iş paketidir)
 * aynısıdır ve o dosyanın yerini bu dosya alacaktır. Bu yüzden aşağıdaki yerel
 * katman `--gtos-c-*` ANLAM tokenlarını değil, tema-BAĞIMSIZ ham merdiveni
 * (`--gtos-shell-ink-*`, `--gtos-gold-*`, `--gtos-emerald-400` …) kullanır:
 * açık temada siyah metin koyu zemine basılmasın diye. §6.8 geldiğinde yalnız
 * `.ccv5-stage` içindeki ~16 satır `--gtos-c-*`'a çevrilir, bileşen CSS'i hiç
 * değişmez.
 *
 * İKİ TEMA — gerçek fark: `color-scheme: dark` sahne kapsamına yazılır. Yoksa
 * AÇIK temada composer `<textarea>`'sının kaydırma çubuğu / imleç / otomatik
 * doldurma zemini tarayıcı tarafından AÇIK çizilir ve koyu panelin içinde beyaz
 * leke bırakır (`gtos-tokens.css:7-11`'de kayıtlı aynı arıza sınıfı).
 * ------------------------------------------------------------------ */

/* WP-H3-HUD-10f: `cc-v5/index.js` mount() bu kapsayıcıyı satır-içi stille
   kuruyordu (`position:relative; display:block; width:100%; margin:0;
   overflow:hidden`) — `.ccv5-stage`'in `position:absolute; inset:0` ile
   çerçevelenebilmesi için en yakın konumlanmış atanın bu kutu olması gerekir.
   Yükseklik (`height`) BURADA YOK — gerçek ölçüm (`getBoundingClientRect().top`
   üzerinden hesaplanan görünür alan) JS'te kalır, sabit bir değer uydurulmaz. */
.ccv5-root {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.ccv5-stage {
  /* --- yüzey / metin --- */
  --ccv5-void: var(--gtos-shell-ink-975);
  --ccv5-surface: var(--gtos-shell-ink-930);
  --ccv5-surface-2: var(--gtos-shell-ink-880);
  --ccv5-ink: var(--gtos-shell-tint-50);
  --ccv5-muted: var(--gtos-shell-ink-350);
  --ccv5-dim: var(--gtos-shell-ink-450);
  --ccv5-line: var(--gtos-shell-ink-800);

  /* --- vurgu --- */
  --ccv5-accent: var(--gtos-gold-500);
  --ccv5-accent-2: var(--gtos-gold-400);
  --ccv5-accent-deep: var(--gtos-bronze-600);
  --ccv5-on-accent: var(--gtos-ink-on-gold-deep);

  /* --- anlam (PSP-001 §5: anlam sabittir) --- */
  --ccv5-ok: var(--gtos-emerald-400);
  --ccv5-run: var(--gtos-amber-400);
  --ccv5-bad: var(--gtos-red-400);
  --ccv5-action: var(--gtos-sky-400);

  /* --- türetilmiş yüzeyler (yalnız color-mix, ham renk yok) --- */
  --ccv5-glass: color-mix(in srgb, var(--ccv5-surface) 74%, transparent);
  --ccv5-glass-2: color-mix(in srgb, var(--ccv5-surface-2) 62%, transparent);
  --ccv5-glass-deep: color-mix(in srgb, var(--ccv5-void) 78%, transparent);
  --ccv5-hairline: color-mix(in srgb, var(--ccv5-line) 82%, transparent);
  --ccv5-accent-line: color-mix(in srgb, var(--ccv5-accent) 34%, transparent);
  --ccv5-accent-soft: color-mix(in srgb, var(--ccv5-accent) 14%, transparent);
  --ccv5-shadow: 0 20px 60px color-mix(in srgb, var(--ccv5-void) 66%, transparent);
  --ccv5-shadow-lg: 0 30px 80px color-mix(in srgb, var(--ccv5-void) 72%, transparent);

  /* --- tipografi (tuval tahtaları = repo SSOT: Space Grotesk + Inter + mono) --- */
  --ccv5-display: var(--gtos-font-display);
  --ccv5-body: var(--gtos-font-sans);
  --ccv5-mono: var(--gtos-font-mono);

  /* --- okunabilirlik merdiveni (WP-CC-ORBIT-READABILITY-01 / WP-OKUNABILIRLIK-11PX-01) ---
     Yasin 09.10: "yazılar çok küçük, okunmuyor" — canlı ölçüm 9–10,9 px (SEVİYE, tekerlek,
     KARAKTER, Kopyala, çalışma tarzı kartları). CC'de 10 px (--gtos-text-2xs) artık yok:
     etiket 12 px, gövde 14 px, sohbet 15 px. Sahne iki temada da lacivert — tema bağımsız. */
  --ccv5-fs-label: var(--gtos-text-xs);
  --ccv5-fs-body: var(--gtos-text-sm);
  --ccv5-fs-chat: var(--gtos-text-reading);

  /* --- ölçüler (prototip v17.1) ---
     WP-H3-HUD-11: `--ccv5-rail: 64px` SİLİNDİ. Prototip tam-sayfa bir ekrandı ve
     kendi sol rayını taşıyordu; CC dashboard kabuğunun içine gömülünce bu ray
     uygulamanın 24 modüllük sidebar'ının yanında ikinci bir dikey şerit olarak
     görünüyordu (Yasin, 16.09: "sidebar içi sidebar gibi olmuş, saçma bu durum"). */
  --ccv5-header: 56px;
  --ccv5-aside: 372px;
  --ccv5-dock: 214px;

  position: absolute;
  inset: 0;
  overflow: hidden;
  color-scheme: dark;
  color: var(--ccv5-ink);
  background: var(--ccv5-void);
  font-family: var(--ccv5-body);
  font-size: var(--gtos-text-compact);
  line-height: var(--gtos-leading-tight);
  -webkit-font-smoothing: antialiased;
}

.ccv5-stage *,
.ccv5-stage *::before,
.ccv5-stage *::after {
  box-sizing: border-box;
}

/* 3B tuval — sınıf adı WP-10b `scene.js:139` ile BİREBİR aynı olmalı
   (`canvas.className = 'cc-v5-canvas'`); tire deseni bu tek yerde farklıdır. */
.cc-v5-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* HTML kabuğu tuvalin üstünde durur ama tıklamayı YUTMAZ: yalnız gerçek
   paneller `pointer-events: auto` alır (prototip index.html:11-13). */
.ccv5-app {
  position: absolute;
  inset: 0;
  display: grid;
  /* WP-H3-HUD-11: tek sütun — sol ray sütunu kalktı (header/main satırları aynı). */
  grid-template-columns: 1fr;
  grid-template-rows: var(--ccv5-header) 1fr;
  pointer-events: none;
}

/* WP-H3-HUD-10i — `.ccv5-room__panel` BU LİSTEDE DEĞİL (bilerek).
   Arıza: panel Görüşme dışındayken yalnız `opacity:0` ile saklanıyordu ama
   bu listeden `pointer-events:auto` alıyordu. `opacity:0` bir elemanı isabet
   testinden ÇIKARMAZ — panel `max-height: calc(100% - var(--gtos-space-6))`
   ile harita alanının neredeyse tamamına kadar büyüyebildiği için (sohbet
   dolduysa 6 balon + cevap sözleşmesi ızgarası), Galaksi katmanında görünmez
   bir tıklama-yutucu olarak 3B tuvali kaplıyor ve düğüm tıklaması tuvale hiç
   ulaşmıyordu. Panelin isabet davranışı artık TEK yerden gelir: kapsayıcı
   `.ccv5-room` (taban `pointer-events:none`, yalnız `[data-hud-layer='room']`
   iken `auto`). Ek güvence olarak panel Görüşme dışında `visibility:hidden`
   alır — hem isabet testinden hem sekme sırasından tamamen çıkar. */
.ccv5-header,
.ccv5-aside,
.ccv5-dock,
.ccv5-card {
  pointer-events: auto;
}

/* SOL RAIL bölümü (`.ccv5-rail`, `__mark`, `__btn`, `__spacer`) WP-H3-HUD-11'de
   tamamen kaldırıldı — DOM'da da üretilmiyor (`hud-shell.js`). */

/* ================================================================== *
 * ÜST HEADER + KIRINTI
 * ================================================================== */

.ccv5-header {
  display: flex;
  align-items: center;
  gap: var(--gtos-space-4);
  padding: 0 var(--gtos-space-5);
  background: var(--ccv5-glass-deep);
  border-bottom: 1px solid var(--ccv5-hairline);
  backdrop-filter: blur(8px);
  min-width: 0;
}

.ccv5-header__brand {
  font: var(--gtos-weight-semibold) var(--gtos-text-md) / 1.1 var(--ccv5-display);
  letter-spacing: var(--gtos-tracking-wide);
  color: var(--ccv5-accent-2);
  white-space: nowrap;
}

.ccv5-header__brand small {
  display: block;
  font: var(--gtos-weight-medium) var(--ccv5-fs-label) / 1.4 var(--ccv5-mono);
  letter-spacing: 0.18em;
  color: var(--ccv5-dim);
}

.ccv5-header__sep {
  width: 1px;
  height: 24px;
  background: var(--ccv5-hairline);
}

.ccv5-header__grow {
  flex: 1;
  min-width: 0;
}

.ccv5-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gtos-space-2);
  height: 26px;
  padding: 0 var(--gtos-space-3);
  border-radius: var(--gtos-radius-pill);
  border: 1px solid var(--ccv5-hairline);
  background: var(--ccv5-glass-2);
  color: var(--ccv5-muted);
  font-size: var(--gtos-text-xs);
  white-space: nowrap;
}

.ccv5-chip b {
  color: var(--ccv5-ink);
  font-weight: var(--gtos-weight-semibold);
}

.ccv5-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--gtos-radius-pill);
  background: var(--ccv5-dim);
}

.ccv5-chip--live .ccv5-chip__dot {
  background: var(--ccv5-ok);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ccv5-ok) 70%, transparent);
}

.ccv5-chip--gap {
  border-color: color-mix(in srgb, var(--ccv5-run) 42%, transparent);
  color: var(--ccv5-run);
}

/* Kırıntı — `MaytrasCcHudZoom.paintCrumb()` bu düğmeleri `data-hud-layer-go`
   üzerinden bulur, etiketini `crumbTrail()`'den yazar, `disabled` ve
   `aria-current`'ı kendisi yönetir. Burada YALNIZ görünüm vardır. */
.ccv5-crumbs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  padding: 3px;
  border-radius: var(--gtos-radius-pill);
  border: 1px solid var(--ccv5-hairline);
  background: var(--ccv5-glass-2);
}

.ccv5-crumbs__sep {
  color: var(--ccv5-dim);
  font-style: normal;
}

.ccv5-crumb {
  height: 24px;
  padding: 0 var(--gtos-space-3);
  border: 0;
  border-radius: var(--gtos-radius-pill);
  background: transparent;
  color: var(--ccv5-muted);
  font: var(--gtos-weight-semibold) var(--gtos-text-xs) / 24px var(--ccv5-body);
  cursor: pointer;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccv5-crumb:hover:not(:disabled) {
  color: var(--ccv5-ink);
}

.ccv5-crumb:disabled {
  color: var(--ccv5-dim);
  cursor: default;
}

.ccv5-crumb.is-current {
  background: linear-gradient(135deg, var(--ccv5-accent-2), var(--ccv5-accent));
  color: var(--ccv5-on-accent);
}

.ccv5-btn-ghost {
  height: 30px;
  padding: 0 var(--gtos-space-3);
  border-radius: var(--gtos-radius-md);
  border: 1px solid var(--ccv5-hairline);
  background: var(--ccv5-glass-2);
  color: var(--ccv5-muted);
  font: var(--gtos-weight-semibold) var(--gtos-text-xs) / 1 var(--ccv5-body);
  cursor: pointer;
  white-space: nowrap;
}

.ccv5-btn-ghost:hover {
  color: var(--ccv5-ink);
  border-color: var(--ccv5-accent-line);
}

/* ================================================================== *
 * ANA ALAN: harita + sağ aside + alt dock
 * ================================================================== */

.ccv5-main {
  display: grid;
  grid-template-columns: 1fr var(--ccv5-aside);
  grid-template-rows: 1fr var(--ccv5-dock);
  min-width: 0;
  min-height: 0;
}

.ccv5-map {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}

/* --- seviye göstergesi + kısayol ipuçları (prototip index.html:30-33) --- */

.ccv5-level {
  position: absolute;
  left: var(--gtos-space-5);
  bottom: var(--gtos-space-4);
  display: flex;
  align-items: center;
  gap: var(--gtos-space-2);
  font: var(--gtos-weight-semibold) var(--ccv5-fs-label) / 1 var(--ccv5-mono);
  letter-spacing: 0.16em;
  color: var(--ccv5-dim);
}

.ccv5-level b {
  color: var(--ccv5-accent-2);
}

.ccv5-level__bar {
  width: 120px;
  height: 4px;
  border-radius: var(--gtos-radius-pill);
  background: var(--ccv5-line);
  overflow: hidden;
}

.ccv5-level__bar i {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: var(--gtos-radius-pill);
  background: linear-gradient(90deg, var(--ccv5-action), var(--ccv5-accent));
}

.ccv5-hints {
  position: absolute;
  right: var(--gtos-space-5);
  /* WP-CC-GALAXY-HINT-OVERLAP-01: ipucu kutusu SEVİYE satırının (alt boşluk space-4, ~12 px)
     ÜSTÜNDE ayrı bir bantta durur — eskiden aynı tabandaydı ve dar haritada (800x600,
     aside sağda) SEVİYE etiketine biniyordu. Yatay genişliğe bağlı değil: kesişim yok. */
  bottom: calc(var(--gtos-space-4) + 2rem);
  display: flex;
  gap: var(--gtos-space-3);
  font-size: var(--ccv5-fs-label);
  color: var(--ccv5-dim);
  /* WP-CC-ORBIT-READABILITY-01: 12 px'te ipuçları soldaki SEVİYE çubuğunun üstüne
     biniyordu (dar harita: 1280 px'te ~570 px). Sağda kalır, sığmazsa satır kırar. */
  max-width: max(12rem, calc(100% - 20rem));
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: var(--gtos-space-1);
  /* 3B sahnenin parlak düğümleri ipucu metninin arkasına düşüyordu (okunmuyordu). */
  padding: var(--gtos-space-1) var(--gtos-space-2);
  border-radius: var(--gtos-radius-md);
  background: var(--ccv5-glass-deep);
}

.ccv5-kbd {
  border: 1px solid var(--ccv5-hairline);
  border-radius: var(--gtos-radius-xs);
  padding: 1px 5px;
  font-family: var(--ccv5-mono);
}

/* ================================================================== *
 * SAĞ ASIDE — uzman profili (tahta: UzmanProfili.dc.html)
 * ================================================================== */

.ccv5-aside {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden auto;
  border-left: 1px solid var(--ccv5-hairline);
  background: var(--ccv5-glass);
  backdrop-filter: blur(10px);
  scrollbar-width: thin;
}

.ccv5-aside__head {
  display: flex;
  align-items: center;
  gap: var(--gtos-space-3);
  padding: var(--gtos-space-4) var(--gtos-space-4) var(--gtos-space-3);
  border-bottom: 1px solid var(--ccv5-hairline);
}

/* Dönen halka — tahtadaki `.ring` (conic-gradient); dilim oranları GERÇEK
   yetenek durumundan gelir (`--ccv5-ring-on` JS'te ölçülen orandır). */
.ccv5-avatar-ring {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: var(--gtos-radius-pill);
  background: conic-gradient(
    var(--ccv5-ring-color, var(--ccv5-accent)) 0 var(--ccv5-ring-on, 0%),
    color-mix(in srgb, var(--ccv5-line) 90%, transparent) var(--ccv5-ring-on, 0%) 100%
  );
}

.ccv5-avatar-ring__in {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: var(--gtos-radius-pill);
  background: var(--ccv5-surface);
  overflow: hidden;
  color: var(--ccv5-accent-2);
  font: var(--gtos-weight-bold) var(--gtos-text-lg) / 1 var(--ccv5-display);
}

.ccv5-avatar-ring__in img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ccv5-aside__id {
  min-width: 0;
}

.ccv5-aside__name {
  margin: 0;
  font: var(--gtos-weight-semibold) var(--gtos-text-lg) / 1.2 var(--ccv5-display);
  color: var(--ccv5-ink);
}

.ccv5-aside__role {
  color: var(--ccv5-muted);
  font-size: var(--ccv5-fs-body);
}

.ccv5-presence {
  display: inline-flex;
  align-items: center;
  gap: var(--gtos-space-2);
  margin-top: var(--gtos-space-1);
  font: var(--gtos-weight-semibold) var(--ccv5-fs-label) / 1 var(--ccv5-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ccv5-presence, var(--ccv5-muted));
}

.ccv5-presence i {
  width: 6px;
  height: 6px;
  border-radius: var(--gtos-radius-pill);
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* Ses dalgası — yalnız gerçekten konuşurken basılır (tahta §7). */
.ccv5-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}

/* WP-H2-06: `height` animasyonu her karede yerleşim tetikliyordu (60 fps kuralı) —
   çubuk tam boyda (16px) çizilir, dinlenme hali scaleY(0.3125) = eski 5px; yalnız
   transform animasyonlanır (kompozitör). Hareket kapalıyken animasyon yok → 5px kalır. */
.ccv5-wave span {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleY(0.3125);
  transform-origin: 50% 100%;
  animation: ccv5-wave 1.1s ease-in-out infinite;
}

.ccv5-wave span:nth-child(2) { animation-delay: 0.1s; }
.ccv5-wave span:nth-child(3) { animation-delay: 0.2s; }
.ccv5-wave span:nth-child(4) { animation-delay: 0.3s; }
.ccv5-wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes ccv5-wave {
  0%, 100% { transform: scaleY(0.3125); }
  50% { transform: scaleY(1); }
}

.ccv5-sec {
  padding: var(--gtos-space-3) var(--gtos-space-4);
  border-bottom: 1px solid var(--ccv5-hairline);
}

.ccv5-sec[hidden] {
  display: none;
}

.ccv5-sec__title {
  display: flex;
  justify-content: space-between;
  gap: var(--gtos-space-2);
  margin: 0 0 var(--gtos-space-2);
  font: var(--gtos-weight-semibold) var(--ccv5-fs-label) / 1.3 var(--ccv5-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ccv5-dim);
}

.ccv5-sec__title span {
  letter-spacing: var(--gtos-tracking-wide);
  color: var(--ccv5-accent);
  text-transform: none;
}

.ccv5-sec__body {
  color: var(--ccv5-ink);
  font-size: var(--ccv5-fs-body);
  line-height: var(--gtos-leading);
}

/* --- yetkinlik pilleri --- */

.ccv5-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gtos-space-1);
  margin-top: var(--gtos-space-2);
}

.ccv5-pill {
  padding: 3px var(--gtos-space-2);
  border-radius: var(--gtos-radius-pill);
  border: 1px solid var(--ccv5-hairline);
  color: var(--ccv5-muted);
  font-size: var(--ccv5-fs-label);
}

/* --- çalışma tarzı (tahta §7 "ÇALIŞMA TARZI" 2×2) --- */

.ccv5-style-grid {
  display: grid;
  /* WP-CC-ORBIT-READABILITY-01: 14 px gövdede 2×2 kart ~140 px satıra 6–7 satır kırıyordu
     (okunmaz sütun); tek sütun, kart metni tam satır genişliğinde okunur. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gtos-space-2);
}

.ccv5-style-card {
  padding: var(--gtos-space-2) var(--gtos-space-3);
  border-radius: var(--gtos-radius-md);
  background: var(--ccv5-glass-deep);
  color: var(--ccv5-muted);
  font-size: var(--ccv5-fs-body);
  line-height: var(--gtos-leading);
}

/* --- yetenek ağacı --- */

.ccv5-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ccv5-tree li {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gtos-space-2);
  padding: var(--gtos-space-1) 0;
  font-size: var(--ccv5-fs-body);
}

.ccv5-tree li + li::before {
  content: '';
  position: absolute;
  left: 10px;
  top: -8px;
  width: 1px;
  height: 14px;
  background: var(--ccv5-hairline);
}

.ccv5-tree__hex {
  justify-self: center;
  width: 14px;
  height: 16px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--ccv5-line);
}

.ccv5-tree li[data-state='on'] .ccv5-tree__hex {
  background: var(--ccv5-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ccv5-accent) 70%, transparent);
}

.ccv5-tree li[data-state='now'] .ccv5-tree__hex {
  background: var(--ccv5-run);
  animation: ccv5-pulse 1.8s ease-in-out infinite;
}

.ccv5-tree__name {
  min-width: 0;
  color: var(--ccv5-muted);
  /* WP-CC-ORBIT-READABILITY-01: 14 px'te yetenek adı ("Incoterms 2020 referansı") kapsam
     sütunu yüzünden üç noktaya kesiliyordu — ad satır kırar, kapsam kısaltılır. */
  overflow-wrap: break-word;
}

.ccv5-tree li[data-state='on'] .ccv5-tree__name,
.ccv5-tree li[data-state='now'] .ccv5-tree__name {
  color: var(--ccv5-ink);
  font-weight: var(--gtos-weight-semibold);
}

.ccv5-tree__code {
  margin-right: var(--gtos-space-1);
  font: var(--gtos-weight-semibold) var(--ccv5-fs-label) / 1 var(--ccv5-mono);
  color: var(--ccv5-dim);
}

.ccv5-tree__scope {
  font: var(--gtos-weight-medium) var(--ccv5-fs-label) / 1.3 var(--ccv5-mono);
  color: var(--ccv5-muted);
  text-align: right;
  /* WP-CC-ORBIT-READABILITY-01: üç noktayla kesilen kapsam metninin (title yok) tamamı
     okunamıyordu — 12 px'te dar sütunda satır kırar. */
  max-width: 9rem;
  overflow-wrap: break-word;
}

.ccv5-tree li[data-state='on'] .ccv5-tree__scope { color: var(--ccv5-accent-2); }
.ccv5-tree li[data-state='now'] .ccv5-tree__scope { color: var(--ccv5-run); }

@keyframes ccv5-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.88); }
}

/* --- "BU TURDA" zaman çizgisi --- */

.ccv5-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ccv5-timeline li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: var(--gtos-space-2);
  padding: 3px 0;
  font-size: var(--ccv5-fs-body);
  color: var(--ccv5-muted);
}

.ccv5-timeline__t {
  font: var(--gtos-weight-medium) var(--ccv5-fs-label) / 1.5 var(--ccv5-mono);
  color: var(--ccv5-ok);
}

.ccv5-timeline li[data-state='run'] .ccv5-timeline__t { color: var(--ccv5-run); }
.ccv5-timeline li[data-state='fail'] .ccv5-timeline__t { color: var(--ccv5-bad); }

.ccv5-timeline__d b {
  color: var(--ccv5-ink);
  font-weight: var(--gtos-weight-semibold);
}

/* --- "SON İŞLER" --- */

.ccv5-works {
  display: flex;
  flex-direction: column;
  gap: var(--gtos-space-2);
}

.ccv5-work {
  width: 100%;
  text-align: left;
  padding: var(--gtos-space-2) var(--gtos-space-3);
  border-radius: var(--gtos-radius-md);
  border: 1px solid var(--ccv5-hairline);
  background: var(--ccv5-glass-deep);
  color: var(--ccv5-ink);
  font-size: var(--ccv5-fs-body);
  cursor: pointer;
}

.ccv5-work:hover {
  border-color: var(--ccv5-accent-line);
}

.ccv5-work small {
  display: block;
  margin-top: 2px;
  color: var(--ccv5-muted);
  font: var(--gtos-weight-medium) var(--ccv5-fs-label) / 1.4 var(--ccv5-mono);
}

.ccv5-empty {
  margin: 0;
  color: var(--ccv5-muted);
  font-size: var(--ccv5-fs-body);
}

/* --- aside eylemleri --- */

.ccv5-aside__actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gtos-space-2);
  padding: var(--gtos-space-3) var(--gtos-space-4);
}

.ccv5-btn-gold,
.ccv5-btn-line {
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--gtos-radius-md);
  font: var(--gtos-weight-semibold) var(--gtos-text-xs) / 1 var(--ccv5-body);
  cursor: pointer;
  text-align: center;
  padding: 0 var(--gtos-space-2);
}

.ccv5-btn-gold {
  border: 0;
  background: linear-gradient(135deg, var(--ccv5-accent-2), var(--ccv5-accent));
  color: var(--ccv5-on-accent);
  font-weight: var(--gtos-weight-bold);
}

.ccv5-btn-line {
  border: 1px solid var(--ccv5-accent-line);
  background: transparent;
  color: var(--ccv5-ink);
}

.ccv5-btn-gold:disabled,
.ccv5-btn-line:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ccv5-note {
  padding: 0 var(--gtos-space-4) var(--gtos-space-3);
  margin: 0;
  color: var(--ccv5-muted);
  font-size: var(--ccv5-fs-label);
  line-height: var(--gtos-leading);
}

/* ================================================================== *
 * ALT DOCK — son konuşma + composer
 * ================================================================== */

.ccv5-dock {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
  border-top: 1px solid var(--ccv5-hairline);
  background: var(--ccv5-glass-deep);
  backdrop-filter: blur(10px);
}

.ccv5-thread {
  display: flex;
  flex-direction: column;
  gap: var(--gtos-space-2);
  min-width: 0;
  padding: var(--gtos-space-3) var(--gtos-space-4);
  border-right: 1px solid var(--ccv5-hairline);
  overflow: hidden auto;
  scrollbar-width: thin;
}

.ccv5-thread__label {
  display: flex;
  justify-content: space-between;
  gap: var(--gtos-space-2);
  font: var(--gtos-weight-semibold) var(--ccv5-fs-label) / 1.3 var(--ccv5-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ccv5-dim);
}

.ccv5-msg {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--gtos-space-2);
  align-items: start;
}

.ccv5-msg__av {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--gtos-radius-pill);
  border: 1px solid var(--ccv5-hairline);
  background: var(--ccv5-surface-2);
  color: var(--ccv5-accent-2);
  font: var(--gtos-weight-bold) var(--ccv5-fs-label) / 1 var(--ccv5-display);
  overflow: hidden;
}

.ccv5-msg__av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ccv5-msg__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--gtos-space-1);
  font: var(--gtos-weight-semibold) var(--ccv5-fs-label) / 1.4 var(--ccv5-body);
  color: var(--ccv5-muted);
}

.ccv5-msg__who b {
  color: var(--ccv5-ink);
}

.ccv5-msg__body {
  margin-top: 2px;
  color: var(--ccv5-ink);
  font-size: var(--ccv5-fs-chat);
  overflow-wrap: anywhere;
}

/* WP-H2-06 (A3-b) — 2 satır önizleme YALNIZ "Devamını göster" düğmesi VARKEN uygulanır
   (hud-shell.js düğmeyi yalnız uzun/çok satırlı metne koyar ve --clamp'ı onunla birlikte
   yönetir); düğmesiz kısa mesaj dar dock'ta kırpılıp açılamaz bırakılmaz. */
.ccv5-msg__body--clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* WP-H2-06 — sohbet akışı: açılır tam metin, kopyala, araç bloğu, "yeni mesaja atla". */
.ccv5-msg__body--open {
  display: block;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* Kopyalama sonucu için görünmez (yalnız ekran okuyucu) durum bölgesi. */
.ccv5-thread__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ccv5-msg__copy,
.ccv5-msg__more,
.ccv5-thread__jump,
.ccv5-tools__sum {
  cursor: pointer;
  font: var(--gtos-weight-semibold) var(--ccv5-fs-label) / 1.4 var(--ccv5-body);
}

.ccv5-msg__copy,
.ccv5-msg__more {
  min-height: 24px;
  padding: 0 var(--gtos-space-2);
  border: 1px solid transparent;
  border-radius: var(--gtos-radius-sm);
  background: transparent;
  color: var(--ccv5-accent-2);
}

.ccv5-msg__copy {
  margin-left: auto;
}

.ccv5-msg__more {
  margin-top: 2px;
  padding-left: 0;
}

.ccv5-msg__copy:hover,
.ccv5-msg__more:hover {
  border-color: var(--ccv5-accent-line);
}

.ccv5-msg__copy:focus-visible,
.ccv5-msg__more:focus-visible,
.ccv5-thread__jump:focus-visible,
.ccv5-tools__sum:focus-visible,
.ccv5-thread:focus-visible {
  outline: 2px solid var(--ccv5-accent-2);
  outline-offset: 2px;
}

.ccv5-tools {
  margin-top: var(--gtos-space-1);
  color: var(--ccv5-muted);
  font-size: var(--ccv5-fs-label);
}

.ccv5-tools__sum {
  color: var(--ccv5-muted);
}

.ccv5-tools__list {
  margin: var(--gtos-space-1) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ccv5-tools__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--gtos-space-2);
}

.ccv5-tools__list li[data-state='fail'] .ccv5-tools__name {
  color: var(--ccv5-ink);
  font-weight: var(--gtos-weight-bold);
}

.ccv5-tools__meta {
  color: var(--ccv5-dim);
}

.ccv5-thread__jump {
  position: sticky;
  bottom: 0;
  align-self: center;
  min-height: 28px;
  padding: 0 var(--gtos-space-3);
  border: 1px solid var(--ccv5-accent-line);
  border-radius: var(--gtos-radius-pill);
  background: var(--ccv5-glass-deep);
  color: var(--ccv5-ink);
}

.ccv5-thread__jump[hidden] {
  display: none;
}

.ccv5-aside__actions > .ccv5-voice__note {
  grid-column: 1 / -1;
  padding: 0;
}

@media (pointer: coarse) {
  .ccv5-msg__copy,
  .ccv5-msg__more,
  .ccv5-thread__jump,
  .ccv5-tools__sum {
    min-height: 44px;
  }
}

/* ================================================================== *
 * WP-C01-CCV5-CHAT-EXTRAS-01 — cevap dışa aktarma düğmeleri + klasik sohbet yönlendirmesi
 *
 * Sınıflar YALNIZ sunucu bayrağı açıkken (dışa aktarma / belge) ya da eyleme açık kart varken
 * DOM'a girer; kapalıyken bu bölümün hiçbir kuralı eşleşmez (birebir eski görünüm).
 * Renkler .ccv5-msg__copy ile AYNI belirteçler (sahne iki temada da lacivert kalır) — kontrast
 * ölçümü: tests/unit/cc-v5-chat-extras.test.js. Dokunma hedefi: dokunmatik VE <768 px'te >=44 px.
 * ================================================================== */
.ccv5-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gtos-space-1) var(--gtos-space-2);
  margin-top: var(--gtos-space-1);
}

.ccv5-extras--room {
  align-self: flex-start;
  margin-top: 0;
}

.ccv5-export {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--gtos-space-1);
}

.ccv5-export__btn,
.ccv5-foot__docs {
  min-height: 28px;
  padding: 0 var(--gtos-space-3);
  border: 1px solid var(--ccv5-accent-line);
  border-radius: var(--gtos-radius-sm);
  background: transparent;
  color: var(--ccv5-accent-2);
  font: var(--gtos-weight-semibold) var(--ccv5-fs-label) / 1.4 var(--ccv5-body);
  cursor: pointer;
}

.ccv5-export__btn:hover,
.ccv5-foot__docs:hover {
  border-color: var(--ccv5-accent-2);
}

.ccv5-export__btn:focus-visible,
.ccv5-foot__docs:focus-visible {
  outline: 2px solid var(--ccv5-accent-2);
  outline-offset: 2px;
}

.ccv5-extras__note {
  color: var(--ccv5-muted);
  font-size: var(--ccv5-fs-label);
}

.ccv5-composer__foot--docs {
  flex-wrap: wrap;
  align-items: center;
}

.ccv5-foot__docs {
  min-height: 24px;
  padding: 0 var(--gtos-space-2);
  border-color: transparent;
  text-align: left;
}

@media (pointer: coarse), (max-width: 767px) {
  .ccv5-export__btn,
  .ccv5-foot__docs {
    min-height: 44px;
    min-width: 44px;
  }
}

:where(.ccv5-root[data-ccv5-arm='strip']) .ccv5-export__btn,
:where(.ccv5-root[data-ccv5-arm='strip']) .ccv5-foot__docs {
  min-height: 44px;
  min-width: 44px;
}

.ccv5-msg__key {
  margin-right: var(--gtos-space-1);
  color: var(--ccv5-accent-2);
  font-weight: var(--gtos-weight-bold);
}

.ccv5-composer {
  display: flex;
  flex-direction: column;
  gap: var(--gtos-space-2);
  min-width: 0;
  padding: var(--gtos-space-3) var(--gtos-space-4);
}

.ccv5-composer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gtos-space-1);
}

.ccv5-quickchip {
  height: 24px;
  padding: 0 var(--gtos-space-3);
  border-radius: var(--gtos-radius-pill);
  border: 1px solid var(--ccv5-hairline);
  background: transparent;
  color: var(--ccv5-muted);
  font: var(--gtos-weight-semibold) var(--ccv5-fs-label) / 1 var(--ccv5-body);
  cursor: pointer;
}

.ccv5-quickchip:hover {
  color: var(--ccv5-accent-2);
  border-color: var(--ccv5-accent-line);
}

.ccv5-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gtos-space-2);
  padding: var(--gtos-space-2);
  border: 1px solid var(--ccv5-accent-line);
  border-radius: var(--gtos-radius-lg);
  background: var(--ccv5-glass-2);
  box-shadow: 0 0 0 4px var(--ccv5-accent-soft);
}

.ccv5-box:focus-within {
  border-color: var(--ccv5-accent);
}

.ccv5-box__mic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--gtos-radius-pill);
  border: 1px solid var(--ccv5-accent-line);
  background: transparent;
  color: var(--ccv5-accent-2);
  cursor: pointer;
}

.ccv5-box__mic svg {
  width: 16px;
  height: 16px;
}

/* WP-C01-VOICE-CCV5-QUOTA-01: dikte sürerken mikrofon düğmesi dolu görünür (aria-pressed ile eşlenik). */
.ccv5-box__mic.is-listening {
  background: var(--ccv5-accent-line);
  color: var(--ccv5-ink);
}

.ccv5-box__input {
  width: 100%;
  min-height: 24px;
  max-height: 96px;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--ccv5-ink);
  font: var(--gtos-weight-normal) var(--gtos-text-sm) / 1.45 var(--ccv5-body);
  outline: none;
}

.ccv5-box__input::placeholder {
  color: var(--ccv5-dim);
}

.ccv5-box__send {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--gtos-radius-pill);
  background: linear-gradient(135deg, var(--ccv5-accent-2), var(--ccv5-accent));
  color: var(--ccv5-on-accent);
  font-weight: var(--gtos-weight-bold);
  cursor: pointer;
}

.ccv5-box__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ccv5-composer__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--gtos-space-2);
  color: var(--ccv5-dim);
  font-size: var(--ccv5-fs-label);
}

.ccv5-composer__status {
  color: var(--ccv5-run);
}

.ccv5-composer__status:empty {
  display: none;
}

/* WP-C01-CCV5-ATTACH-01 — bekleyen ek önizleme şeridi (composer üstü).
   Boşken `hidden` (UA `[hidden]` kuralı `display:flex` ile ezilmesin diye açıkça yazılır). Tek satır,
   taşan ekler YATAY kaydırılır — dock yüksekliği (--ccv5-dock) en fazla tek şerit kadar büyür.
   Renkler yalnız sahne token'larından (sahne iki temada da lacivert → kontrast tema bağımsız). */
.ccv5-attach {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gtos-space-2);
  min-width: 0;
  padding-bottom: var(--gtos-space-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.ccv5-attach[hidden] {
  display: none;
}

.ccv5-attach__item {
  display: flex;
  /* küçülmez: sığmayan ekler şeridin yatay kaydırmasına gider (aksi halde çocuklar komşuya taşar) */
  flex: 0 0 auto;
  align-items: center;
  gap: var(--gtos-space-2);
  min-width: 0;
  max-width: 240px;
  padding: var(--gtos-space-1);
  border: 1px solid var(--ccv5-accent-line);
  border-radius: var(--gtos-radius-md);
  background: var(--ccv5-glass-2);
}

.ccv5-attach__item[data-state='uploading'] {
  border-style: dashed;
  border-color: var(--ccv5-run);
}

.ccv5-attach__item[data-state='failed'] {
  border-color: var(--ccv5-bad);
}

.ccv5-attach__thumb {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 36px;
  overflow: hidden;
  border-radius: var(--gtos-radius-sm);
  background: var(--ccv5-surface);
  color: var(--ccv5-muted);
  font-size: var(--ccv5-fs-label);
  line-height: 1.1;
  text-align: center;
}

.ccv5-attach__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ccv5-attach__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.ccv5-attach__name {
  overflow: hidden;
  color: var(--ccv5-ink);
  font-size: var(--ccv5-fs-label);
  font-weight: var(--gtos-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccv5-attach__meta {
  color: var(--ccv5-muted);
  font-size: var(--ccv5-fs-label);
  white-space: nowrap;
}

.ccv5-attach__item[data-state='failed'] .ccv5-attach__meta {
  color: var(--ccv5-bad);
}

.ccv5-attach__remove {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--gtos-radius-pill);
  background: transparent;
  color: var(--ccv5-ink);
  font-size: var(--gtos-text-reading);
  line-height: 1;
  cursor: pointer;
}

.ccv5-attach__remove:hover {
  border-color: var(--ccv5-accent-line);
  background: var(--ccv5-accent-soft);
}

.ccv5-attach__remove:focus-visible {
  outline: 2px solid var(--ccv5-accent-2);
  outline-offset: 2px;
}

/* Dokunmatik / dar ekran: kaldır düğmesi >=44 px hedef (diğer composer düğmeleriyle aynı kural). */
@media (pointer: coarse), (max-width: 767px) {
  .ccv5-attach__remove {
    width: 44px;
    height: 44px;
  }

  .ccv5-attach__item {
    max-width: min(240px, 78vw);
  }
}

:where(.ccv5-root[data-ccv5-arm='strip']) .ccv5-attach__remove {
  width: 44px;
  height: 44px;
}

:where(.ccv5-root[data-ccv5-arm='strip']) .ccv5-attach__item {
  max-width: min(240px, 78vw);
}

/* ================================================================== *
 * GÖRÜŞME PANELİ (ROOM) — tahta: C01.dc.html
 * ================================================================== */

.ccv5-room {
  position: absolute;
  /* WP-H3-HUD-11: sol ray kalktı, panel alanı sahnenin sol kenarından başlar. */
  left: 0;
  right: var(--ccv5-aside);
  top: var(--ccv5-header);
  bottom: var(--ccv5-dock);
  pointer-events: none;
  z-index: var(--gtos-z-dropdown);
}

.ccv5-room__panel {
  position: absolute;
  left: 50%;
  bottom: var(--gtos-space-5);
  width: min(920px, 92%);
  max-height: calc(100% - var(--gtos-space-6));
  overflow: hidden auto;
  scrollbar-width: thin;
  transform: translate(-50%, 24px);
  opacity: 0;
  /* WP-H3-HUD-10i: görünmez panel isabet testinde DURMAZ. `visibility` geçişte
     ayrık (discrete) davranır — Görüşme'ye girerken anında `visible` olur,
     çıkarken solma bitince `hidden`'a döner; fade görünümü değişmez. */
  visibility: hidden;
  padding: var(--gtos-space-4) var(--gtos-space-5);
  border-radius: var(--gtos-radius-xl);
  border: 1px solid var(--ccv5-accent-line);
  background: var(--ccv5-glass);
  box-shadow: var(--ccv5-shadow-lg);
  backdrop-filter: blur(12px);
  transition: opacity var(--gtos-duration-base) var(--gtos-ease-out),
    transform var(--gtos-duration-base) var(--gtos-ease-out),
    visibility var(--gtos-duration-base) var(--gtos-ease-out);
}

.ccv5-stage[data-hud-layer='room'] .ccv5-room__panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.ccv5-room__who {
  display: flex;
  align-items: center;
  gap: var(--gtos-space-3);
  margin-bottom: var(--gtos-space-3);
}

.ccv5-room__who .ccv5-avatar-ring {
  width: 48px;
  height: 48px;
}

.ccv5-room__name {
  margin: 0;
  font: var(--gtos-weight-semibold) var(--gtos-text-xl) / 1.2 var(--ccv5-display);
}

.ccv5-room__role {
  color: var(--ccv5-muted);
  font-size: var(--ccv5-fs-body);
}

.ccv5-room__meta {
  margin-left: auto;
  font: var(--gtos-weight-semibold) var(--ccv5-fs-label) / 1 var(--ccv5-mono);
  letter-spacing: 0.12em;
  color: var(--ccv5-action);
  text-align: right;
}

/* Cevap sözleşmesi (Karar / Gerekçe / Belgeler / Kaynak / Sonraki adım) —
   bölümler `MaytrasC01ChatThread.parseAnswerContract()` çıktısından gelir;
   sözleşme yoksa düz metin basılır (uydurma başlık üretilmez). */
.ccv5-contract {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--gtos-space-1) var(--gtos-space-3);
  font-size: var(--ccv5-fs-body);
  line-height: var(--gtos-leading);
}

.ccv5-contract__k {
  padding-top: 3px;
  font: var(--gtos-weight-bold) var(--ccv5-fs-label) / 1.4 var(--ccv5-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ccv5-accent);
}

.ccv5-contract__v {
  color: var(--ccv5-ink);
  white-space: pre-line;
}

.ccv5-contract__v--muted {
  color: var(--ccv5-muted);
}

.ccv5-next {
  display: inline-flex;
  align-items: center;
  gap: var(--gtos-space-2);
  height: 28px;
  padding: 0 var(--gtos-space-3);
  border-radius: var(--gtos-radius-md);
  border: 1px solid var(--ccv5-accent-line);
  background: transparent;
  color: var(--ccv5-accent-2);
  font: var(--gtos-weight-semibold) var(--gtos-text-xs) / 1 var(--ccv5-body);
  cursor: pointer;
}

.ccv5-room__turns {
  display: flex;
  flex-direction: column;
  gap: var(--gtos-space-3);
  margin-bottom: var(--gtos-space-3);
}

/* Mesaj balonları — tahtadaki asimetrik köşe dili: gelen sol-üst keskin,
   giden sağ-alt keskin (konuşma yönünü köşe kesintisi işaretler). */
.ccv5-bubble {
  max-width: 78%;
  padding: var(--gtos-space-2) var(--gtos-space-3);
  border: 1px solid var(--ccv5-hairline);
  background: var(--ccv5-glass-2);
  color: var(--ccv5-ink);
  font-size: var(--ccv5-fs-chat);
  line-height: var(--gtos-leading);
  white-space: pre-line;
}

.ccv5-bubble--agent {
  align-self: flex-start;
  border-radius: var(--gtos-radius-xs) var(--gtos-radius-lg) var(--gtos-radius-lg) var(--gtos-radius-lg);
}

.ccv5-bubble--user {
  align-self: flex-end;
  border-color: color-mix(in srgb, var(--ccv5-action) 34%, transparent);
  border-radius: var(--gtos-radius-lg) var(--gtos-radius-lg) var(--gtos-radius-xs) var(--gtos-radius-lg);
}

.ccv5-handoff {
  align-self: center;
  font: var(--gtos-weight-medium) var(--ccv5-fs-label) / 1.4 var(--ccv5-mono);
  letter-spacing: 0.06em;
  color: var(--ccv5-muted);
  text-align: center;
}

/* Akış imleci — gerçek `streamingDraftText` varken basılır. */
.ccv5-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--ccv5-action);
  animation: ccv5-blink 1s steps(2, start) infinite;
}

@keyframes ccv5-blink {
  to { opacity: 0.2; }
}

/* ================================================================== *
 * DİSKE YAPIŞAN KART (card.js) — 700 ms hover köprüsü
 * ================================================================== */

.ccv5-card {
  position: absolute;
  width: 258px;
  padding: var(--gtos-space-3);
  border-radius: var(--gtos-radius-lg);
  border: 1px solid var(--ccv5-accent-line);
  background: var(--ccv5-surface);
  box-shadow: var(--ccv5-shadow);
  opacity: 0;
  pointer-events: none;
  z-index: var(--gtos-z-dropdown);
  transition: opacity var(--gtos-duration-fast) var(--gtos-ease-out);
}

.ccv5-card.is-on {
  opacity: 1;
  pointer-events: auto;
}

/* Disk ile kart arasındaki görünmez köprü: imleç boşluğu geçerken
   `pointerleave` tetiklenmesin (prototip index.html:21). */
.ccv5-card::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  width: 30px;
}

.ccv5-card[data-side='right']::before { left: -30px; }
.ccv5-card[data-side='left']::before { right: -30px; }

.ccv5-card__eyebrow {
  font: var(--gtos-weight-semibold) var(--ccv5-fs-label) / 1.3 var(--ccv5-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ccv5-accent);
}

.ccv5-card__name {
  margin: 2px 0 4px;
  font: var(--gtos-weight-semibold) var(--gtos-text-sm) / 1.25 var(--ccv5-display);
  color: var(--ccv5-ink);
}

.ccv5-card__char {
  margin: 0;
  color: var(--ccv5-muted);
  font-size: var(--ccv5-fs-body);
  line-height: var(--gtos-leading);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ccv5-card__char[hidden],
.ccv5-card[hidden] {
  display: none;
}

.ccv5-card__row {
  display: flex;
  justify-content: space-between;
  gap: var(--gtos-space-2);
  padding-top: var(--gtos-space-1);
  font-size: var(--ccv5-fs-label);
  color: var(--ccv5-muted);
}

.ccv5-card__row .v {
  font-family: var(--ccv5-mono);
  color: var(--ccv5-accent-2);
}

.ccv5-card__acts {
  display: flex;
  gap: var(--gtos-space-1);
  margin-top: var(--gtos-space-2);
}

.ccv5-card__acts button {
  flex: 1;
  height: 28px;
  border-radius: var(--gtos-radius-sm);
  border: 1px solid var(--ccv5-accent-line);
  background: var(--ccv5-accent-soft);
  color: var(--ccv5-accent-2);
  font: var(--gtos-weight-semibold) var(--ccv5-fs-label) / 1 var(--ccv5-body);
  cursor: pointer;
}

.ccv5-card__acts button:hover {
  background: color-mix(in srgb, var(--ccv5-accent) 24%, transparent);
}

/* ================================================================== *
 * KATMAN GÖRÜNÜRLÜĞÜ (plan §4)
 * GALAKSİ: aside/dock minimal · YÖRÜNGE: aside genişler · GÖRÜŞME: tam panel
 * `data-hud-layer` niteliğini YALNIZ `MaytrasCcHudZoom.applyLayer()` yazar.
 * ================================================================== */

.ccv5-stage[data-hud-layer='galaxy'] .ccv5-aside__profile,
.ccv5-stage[data-hud-layer='galaxy'] .ccv5-aside__actions {
  display: none;
}

.ccv5-stage[data-hud-layer='galaxy'] .ccv5-thread {
  opacity: 0.72;
}

.ccv5-stage[data-hud-layer='room'] .ccv5-aside {
  opacity: 0.35;
}

.ccv5-stage[data-hud-layer='room'] .ccv5-room {
  pointer-events: auto;
}

.ccv5-stage[data-hud-layer='room'] .ccv5-thread {
  display: none;
}

.ccv5-stage[data-hud-layer='room'] .ccv5-dock {
  grid-template-columns: 1fr;
}

.ccv5-aside,
.ccv5-thread {
  transition: opacity var(--gtos-duration-base) var(--gtos-ease-standard);
}

/* ================================================================== *
 * FALLBACK — WebGL yok ya da <768 mobil (fallback.js)
 * `MaytrasC01Constellation.ringLayout/stripLayout` koordinat üretir.
 * ================================================================== */

/* WP-H3-HUD-12 §2 — yedek sahne `.ccv5-map` İÇİNE basılıyor
   (`index.js` → `createFallback(shell.elements.map, …)`), `.ccv5-map` ise
   `pointer-events:none` (3B tuval altta kalsın diye). Kalıtımla yedek sahne de
   isabet testinden çıkıyordu: <768 mobilde ve WebGL'siz masaüstünde HİÇBİR
   uzmana dokunulamıyordu (düğüm `click`/`keydown` dinleyicileri bağlıydı ama
   olay hiç doğmuyordu). Kabuğun `.ccv5-aside/.ccv5-dock/.ccv5-card` için
   yaptığının aynısı: bu alt ağaçta isabet testi geri açılır. */
.ccv5-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--ccv5-void);
  color: var(--ccv5-ink);
  pointer-events: auto;
  /* Dokunmatikte çift-tık yakınlaştırma gecikmesi (300 ms) olmasın. */
  touch-action: manipulation;
}

.ccv5-fallback__note {
  margin: 0;
  padding: var(--gtos-space-2) var(--gtos-space-4);
  color: var(--ccv5-muted);
  font-size: var(--ccv5-fs-label);
  border-bottom: 1px solid var(--ccv5-hairline);
}

.ccv5-fallback__scene {
  flex: 1;
  min-height: 0;
  display: block;
  width: 100%;
}

/* WP-H3-HUD-12 §2 düzeltmesi (2026-09-16) — kaydırma kabı artık `<svg>`'nin
   KENDİSİ DEĞİL, onu saran `.ccv5-fallback__scene-wrap` (`fallback.js`
   `sceneHost`). Sahne artık `draw()`'da GERÇEK piksel genişlik/yükseklik
   alıyor (viewBox'a sığdırma yok); bu kap o gerçek genişliği kırpıp yatay
   kaydırır — düğümler küçülmek yerine kabın dışına taşar. */
.ccv5-fallback--strip .ccv5-fallback__scene-wrap {
  flex: 0 0 120px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.ccv5-fallback--strip .ccv5-fallback__scene {
  flex: none;
  display: block;
  width: auto;
  height: 120px;
}

/* Düğümün kendisi de açıkça `auto`: ileride `.ccv5-map` kuralı kopyalanır ya da
   yedek sahne başka bir kapsayıcıya taşınırsa tık yine çalışsın. Dokunma hedefi
   ≥44 px: yarıçap `fallback.js` `stripLayout({nodeR:22})` ile veriliyor VE
   strip modunda `<svg>` gerçek piksel `width`/`height` alıyor (`draw()`) —
   viewBox artık kabın dar genişliğine SIĞDIRILMIYOR (WP-H3-HUD-12 §2 canlı
   kanıtla düzeltildi: Playwright 390px mobilde ölçülen gerçek çap 16,7 px'ti,
   nedeni `preserveAspectRatio="xMinYMid meet"`in 850+ birimlik şeridi 390 px'e
   ölçeklemesiydi). */
.ccv5-fb-core,
.ccv5-fb-node {
  fill: var(--ccv5-surface-2);
  stroke: var(--ccv5-line);
  stroke-width: 1.4;
  cursor: pointer;
  pointer-events: auto;
}

.ccv5-fb-node:focus-visible,
.ccv5-fb-core:focus-visible {
  outline: 2px solid var(--ccv5-accent-2);
  outline-offset: 2px;
}

.ccv5-fb-core {
  fill: var(--ccv5-accent-deep);
  stroke: var(--ccv5-accent);
}

.ccv5-fb-node[data-state='listening'],
.ccv5-fb-node[data-state='thinking'] {
  stroke: var(--ccv5-run);
}

.ccv5-fb-node[data-state='speaking'],
.ccv5-fb-node[data-state='answering'] {
  stroke: var(--ccv5-ok);
}

.ccv5-fb-node.is-focus,
.ccv5-fb-core.is-focus {
  stroke: var(--ccv5-accent-2);
  stroke-width: 2.4;
}

.ccv5-fb-spoke {
  fill: none;
  stroke: var(--ccv5-line);
  stroke-width: 1.1;
}

.ccv5-fb-label {
  fill: var(--ccv5-muted);
  font: var(--gtos-weight-medium) var(--ccv5-fs-label) / 1 var(--ccv5-body);
  text-anchor: middle;
}

.ccv5-fb-label.is-focus {
  fill: var(--ccv5-ink);
  font-weight: var(--gtos-weight-semibold);
}

.ccv5-fb-initial {
  fill: var(--ccv5-ink);
  font: var(--gtos-weight-semibold) var(--gtos-text-xs) / 1 var(--ccv5-display);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

/* Mobil alt çekmece (tahta: Mobil.dc.html tutamacı) */
.ccv5-sheet {
  border-top: 1px solid var(--ccv5-hairline);
  background: var(--ccv5-surface);
}

.ccv5-sheet__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gtos-space-2);
  width: 100%;
  /* Dokunma hedefi ≥44 px (WP-H3-HUD-12 §2 — mobil yedek sahnenin tek
     çekmece kolu; 2×space-2 dolgu tek başına 44'e ulaşmıyordu). */
  min-height: 44px;
  padding: var(--gtos-space-2);
  border: 0;
  background: transparent;
  color: var(--ccv5-muted);
  font: var(--gtos-weight-semibold) var(--ccv5-fs-label) / 1 var(--ccv5-body);
  cursor: pointer;
}

.ccv5-sheet__handle::before {
  content: '';
  width: 36px;
  height: 4px;
  border-radius: var(--gtos-radius-pill);
  background: var(--ccv5-line);
}

.ccv5-sheet__body {
  max-height: 46vh;
  overflow: hidden auto;
  scrollbar-width: thin;
}

/* WP-H3-HUD-15 — mobil çekmece uzman profilini (`.ccv5-aside`) taşır
   (`index.js` `mountFallback`). <768'de `.ccv5-aside { display:none }` kuralı
   (özgüllük 0-1-0) bu seçiciyle (0-2-0) çekmece İÇİNDE geçersiz kılınır;
   masaüstü yan-panel süslemesi (kenar çizgisi, cam arka plan, grid yeri)
   çekmecede anlamsız olduğu için sıfırlanır. */
.ccv5-sheet__body .ccv5-aside {
  display: flex;
  grid-column: auto;
  grid-row: auto;
  overflow: visible;
  border-left: 0;
  background: transparent;
  backdrop-filter: none;
}

/* Strip modunda çekmece açıkken içerik (not + 120px şerit + tutamaç + 46vh
   gövde) harita hücresini aşabilir; taşan kısım erişilebilir kalsın. */
.ccv5-fallback--strip {
  min-height: 0;
  overflow-y: auto;
}

.ccv5-sheet[data-open='false'] .ccv5-sheet__body {
  display: none;
}

/* ================================================================== *
 * DUYARLI DAVRANIŞ
 * ================================================================== */

/* 768–1023: yan panel daralır, dock tek sütuna iner (kalite kademesi
   `focus-pass.js` tarafında; burada yalnız yerleşim). */
@media (max-width: 1180px) {
  .ccv5-stage {
    --ccv5-aside: 300px;
    /* WP-CC-ORBIT-READABILITY-01: tek sütun dock'ta 15 px sohbet gövdesi + 12 px çipler
       240 px'te konuşma alanını tek mesaj satırına indiriyordu. Kamera iç boşluğu bu
       değişkenden okunur (hud-shell.js px('--ccv5-dock')) — sahne kendini yeniden çerçeveler. */
    --ccv5-dock: 264px;
  }

  /* WP-CC-ORBIT-READABILITY-01: 300 px aside'da kapsam sütunu (≤9rem) yetenek adına
     ~85 px bırakıyordu ("Incoterm-s" kelime içinden kırılıyordu) — kapsam adın altına iner. */
  .ccv5-tree li {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .ccv5-tree__scope {
    grid-column: 2;
    max-width: none;
    text-align: left;
  }

  .ccv5-dock {
    grid-template-columns: 1fr;
  }

  .ccv5-thread {
    border-right: 0;
    border-bottom: 1px solid var(--ccv5-hairline);
  }

  /* WP-H3-HUD-10j (B5): ~1024px'te header/kırıntı sahne dışına taşıyordu
     (yatay kaydırma gerektiriyordu). Düşük öncelikli süs elemanları (eyebrow,
     ayraç, uzman sayısı meta'sı) gizlenir, kırıntı düğmeleri sıkışır — ama
     "Merkeze dön" HİÇBİR ZAMAN küçültülmez/gizlenmez, her zaman tıklanabilir
     kalır (görev kısıtı). */
  .ccv5-header {
    gap: var(--gtos-space-2);
    padding: 0 var(--gtos-space-3);
  }

  .ccv5-header__brand small,
  .ccv5-header__sep,
  .ccv5-chip > span {
    display: none;
  }

  .ccv5-crumbs {
    gap: 0;
  }

  .ccv5-crumb {
    max-width: 5.5rem;
    padding: 0 var(--gtos-space-2);
  }

  .ccv5-btn-ghost {
    flex: 0 0 auto;
  }

  /* WP-H3-HUD-10j (B6): görüşme paneli bu genişlikte fazla dardı (balonlar
     3-4 kelimede sarıyordu) — panel biraz genişler, balon oranı büyür ve
     panel iç boşluğu daralır, satır başına gerçek karakter alanı artar. */
  .ccv5-room__panel {
    width: min(920px, 96%);
    padding: var(--gtos-space-3) var(--gtos-space-4);
  }

  .ccv5-bubble {
    max-width: 92%;
  }
}

/* <768: 3B kurulmaz (fallback.js mobil dalı) — kabuk tek sütun. */
@media (max-width: 767px) {
  .ccv5-stage {
    --ccv5-aside: 0px;
  }

  .ccv5-aside,
  .ccv5-hints,
  .ccv5-level {
    display: none;
  }

  /* `.ccv5-app` zaten tek sütun (WP-H3-HUD-11) — mobilde ayrıca ezmeye gerek yok. */

  .ccv5-main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .ccv5-room {
    left: 0;
    right: 0;
  }

  .ccv5-box__send {
    width: 44px;
    height: 44px;
  }
}

/* WP-CC-V5-RESIZE-MODE-01 — şerit yerleşimi medya sorgusuna DEĞİL açık kola
   bağlı. Kol kararı `fallback.js` görünüm izleyicisinden gelir (≤768'de mobil,
   mobilden çıkış >792 — histerezis) ve `index.js` şerit kolunda köke
   `data-ccv5-arm="strip"` yazar. Yukarıdaki `max-width:767px` bloğu 768 px'i
   ve 769–792 bandını kapsamıyordu: şerit açıkken aside çekmeceye taşınmış,
   sağda 300 px'lik boş sütun + `.ccv5-room {right}` + ipucu/seviye görünür
   kalıyordu. Kurallar yukarıdakilerle BİREBİR aynı; `:where()` özgüllüğü
   eklemez (0,1,0) — böylece `.ccv5-sheet__body .ccv5-aside {display:flex}`
   (çekmecedeki profil) yine kazanır, medya bloğuyla aynı kaskad sonucu. */
:where(.ccv5-root[data-ccv5-arm='strip']) .ccv5-stage {
  --ccv5-aside: 0px;
}

:where(.ccv5-root[data-ccv5-arm='strip']) .ccv5-aside,
:where(.ccv5-root[data-ccv5-arm='strip']) .ccv5-hints,
:where(.ccv5-root[data-ccv5-arm='strip']) .ccv5-level {
  display: none;
}

:where(.ccv5-root[data-ccv5-arm='strip']) .ccv5-main {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}

:where(.ccv5-root[data-ccv5-arm='strip']) .ccv5-room {
  left: 0;
  right: 0;
}

:where(.ccv5-root[data-ccv5-arm='strip']) .ccv5-box__send {
  width: 44px;
  height: 44px;
}

/* Hareket azaltma: panel geçişleri ANLIK (plan §4). */
@media (prefers-reduced-motion: reduce) {
  .ccv5-room__panel,
  .ccv5-card,
  .ccv5-aside,
  .ccv5-thread {
    transition: none;
  }

  .ccv5-wave span,
  .ccv5-cursor,
  .ccv5-tree li[data-state='now'] .ccv5-tree__hex {
    animation: none;
  }
}

/* ================================================================== *
 * WP-H3-HUD-10j-B4 — UYGULAMA TİPOGRAFİSİNE KARŞI ÖZGÜLLÜK KALKANI
 *
 * Arıza (canlı ölçüm, açık tema, damga 20260926-r1): aside'daki uzman adı
 * `<h3 class="ccv5-aside__name">` koyu lacivert zeminde slate-900 tonunda (computed) koyu
 * metin — çiziliyordu. Sahne gömülü çalıştığı için uygulamanın genel başlık/
 * paragraf kuralları buraya da eşleşiyor ve ID özgüllüğüyle bu dosyadaki tek
 * sınıflı kuralları eziyor:
 *   - `gtos-theme-platform.css`  `#maytras-app .main-content h1..h4`  (1,1,1)
 *                                `#maytras-app .main-content p`       (1,1,1)
 *   - `gtos-design-grammar.css`  `#maytras-app .main-content h3/h4`   (1,1,1)
 *                                `#maytras-app p`                     (1,0,1)
 * Bu kurallar açık temada koyu metin rengi (ve h4 için BÜYÜK HARF + mikro
 * punto) basıyor. Sahne İKİ TEMADA DA lacivert kalır (dosya başı karar), bu
 * yüzden sahne içindeki başlık/paragraflar kendi `--ccv5-*` değerlerine
 * `#maytras-app .ccv5-root .X` (1,2,0) ile geri döndürülür — genel h/p
 * kurallarına dokunulmaz. Değerler yukarıdaki sınıf kurallarının AYNISI;
 * sınıf kuralının hiç tanımlamadığı özellikler (letter-spacing, text-transform,
 * font-family/line-height) `inherit` ile genel kuralın basmasından kurtarılır.
 * `.ccv5-root` sahnenin kalıcı kabı (index.js mount) — fallback/kart dahil
 * tüm sahne DOM'u onun içindedir.
 * ================================================================== */

#maytras-app .ccv5-root .ccv5-aside__name,
#maytras-app .ccv5-root .ccv5-room__name,
#maytras-app .ccv5-root .ccv5-card__name {
  color: var(--ccv5-ink);
  letter-spacing: inherit;
  text-transform: inherit;
}

#maytras-app .ccv5-root .ccv5-aside__name {
  font: var(--gtos-weight-semibold) var(--gtos-text-lg) / 1.2 var(--ccv5-display);
}

#maytras-app .ccv5-root .ccv5-room__name {
  font: var(--gtos-weight-semibold) var(--gtos-text-xl) / 1.2 var(--ccv5-display);
}

#maytras-app .ccv5-root .ccv5-card__name {
  font: var(--gtos-weight-semibold) var(--gtos-text-sm) / 1.25 var(--ccv5-display);
}

#maytras-app .ccv5-root .ccv5-empty,
#maytras-app .ccv5-root .ccv5-note,
#maytras-app .ccv5-root .ccv5-card__char,
#maytras-app .ccv5-root .ccv5-fallback__note {
  color: var(--ccv5-muted);
  font-family: inherit;
}

#maytras-app .ccv5-root .ccv5-empty {
  font-size: var(--ccv5-fs-body);
  line-height: inherit;
}

#maytras-app .ccv5-root .ccv5-note,
#maytras-app .ccv5-root .ccv5-card__char {
  font-size: var(--ccv5-fs-label);
  line-height: var(--gtos-leading);
}

/* WP-CC-ORBIT-READABILITY-01: kart karakter metni gövde boyunda (14 px); dipnot 12 px. */
#maytras-app .ccv5-root .ccv5-card__char {
  font-size: var(--ccv5-fs-body);
}

/* WP-CC-ORBIT-READABILITY-01: uygulamanın genel `#maytras-app small` kuralı
   (gtos-design-grammar.css; özgüllük 1,0,1) CC'deki iki <small>'ı 11 px sans + açık temada
   koyu gri metne çekiyordu — CC etiket merdivenine (12 px mono) ve sahne rengine döner. */
#maytras-app .ccv5-root .ccv5-header__brand small {
  font: var(--gtos-weight-medium) var(--ccv5-fs-label) / 1.4 var(--ccv5-mono);
  color: var(--ccv5-dim);
}

#maytras-app .ccv5-root .ccv5-work small {
  font: var(--gtos-weight-medium) var(--ccv5-fs-label) / 1.4 var(--ccv5-mono);
  color: var(--ccv5-muted);
}

#maytras-app .ccv5-root .ccv5-fallback__note {
  font-size: var(--ccv5-fs-label);
  line-height: inherit;
}