/* ===== Indigonix AI agent family — named after blue tones =====
   Cornflower (fetch) · Indigo (compose) · Arctic (ask) · Midnight (settings).
   Picked so the four separate on BOTH hue and lightness — cyan-blue Arctic,
   truer-blue Cornflower, violet Indigo, near-black Midnight — otherwise a set
   of blues reads as one colour. All four carry white text, so each tone is
   kept deep enough to stay legible. */
:root {
  --cornflower: #3457c5; --cornflower-2: #5878e8;
  --indigo:   #43219e; --indigo-2:   #5b31c9;
  --arctic:   #1f7fb5; --arctic-2:   #2e9bd6;
  --midnight: #0b1533; --midnight-2: #18244d;
  /* Navy — Payment ajanı. Diğer mavilerin arasında koyu ama Midnight kadar
     siyah değil; setup-fatura sayısal soğukluğunu taşıyor. */
  --navy:     #1a3a72; --navy-2:     #2a5399;
}

/* Global "Arctic" help button — fixed, visible on every page */
#app-help-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 14px; font-weight: 650; color: #fff;
  background: linear-gradient(180deg, var(--arctic-2), var(--arctic));
  border: 1px solid var(--arctic); border-radius: 999px; padding: 12px 20px;
  cursor: pointer; box-shadow: 0 6px 18px rgba(31,127,181,.38), 0 1px 0 rgba(255,255,255,.15) inset;
  transition: transform .12s ease, box-shadow .12s ease;
}
#app-help-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31,127,181,.45); }
#app-help-fab:focus-visible { outline: 3px solid var(--arctic-2); outline-offset: 3px; }
@media (max-width: 640px) {
  #app-help-fab { right: 14px; bottom: 14px; padding: 11px 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { #app-help-fab { transition: none; } }

/* Manage page — Agent Indigo blob'unun içindeki minik "Hey Indigo" noktası.
   Kartlar orbital.css'te organik blob (position:absolute, animasyonlu
   border-radius) haline geliyor ve dar ekranda position:static'e düşüyor.
   Absolute konumlanma her iki modda da güvenilir değil, o yüzden dot butonun
   İLK flex çocuğu olarak duruyor: flex-column + align-items:center kendisi
   dot'u üst-orta noktaya oturtuyor. Karta basınca modal açılıyor; noktaya
   basınca sadece dinleyici aç/kapat — click wake-word.js'de durduruluyor. */
.wake-dot-corner {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.32);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
  /* mix-blend-mode üst kartta 'screen' — çocuklara geçmez ama emin olmak için
     istisna: dot renkler blendden etkilenmesin diye izole. */
  isolation: isolate;
  z-index: 2;
  flex-shrink: 0;
}
.wake-dot-corner:hover { background: rgba(255,255,255,.24); transform: scale(1.08); }
.wake-dot-corner:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wake-dot-corner.is-disabled { opacity: .35; cursor: not-allowed; }
.wake-dot-corner .wake-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.8);
  transition: background .18s ease;
}
/* Aktif: yeşil, sürekli yanıp sönüyor — Damla'nın istediği "minik yanıp sönen daire" */
.wake-dot-corner.is-on {
  background: rgba(126,255,176,.22);
  border-color: rgba(126,255,176,.65);
}
.wake-dot-corner.is-on .wake-dot {
  background: #7effb0;
  box-shadow: 0 0 0 0 rgba(126,255,176,.85);
  animation: wake-blink 1.2s ease-in-out infinite;
}
@keyframes wake-blink {
  0%,100% { box-shadow: 0 0 0 0 rgba(126,255,176,.85); opacity: 1; }
  50%     { box-shadow: 0 0 0 6px rgba(126,255,176,0);   opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .wake-dot-corner, .wake-dot-corner .wake-dot { animation: none; transition: none; }
}

/* Jarvis moduna geçmiş Indigo modalı — ajan halkasını "canlı" haline getir:
   dinlerken sürekli hafif bir titreşim, konuşurken ise mevcut .is-speaking
   dalgası devrede kalıyor. Bir simge de eklenmiyor; renk ve halka yeterli. */
.agent-scope.jarvis-mode .agent-title strong::after {
  content: " · JARVIS";
  font-size: 10px; letter-spacing: 2px; opacity: .85;
  margin-left: 6px;
}

/* Manage page — AI tool launcher cards */
.manage-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .manage-tools { grid-template-columns: 1fr; } }
.tool-btn {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; padding: 24px 22px 22px; border-radius: var(--radius-lg);
  border: 1px solid transparent; color: #fff; cursor: pointer;
  font-family: var(--font);
  box-shadow: 0 8px 22px rgba(11,20,55,.28), 0 1px 0 rgba(255,255,255,.14) inset;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Ambient orb — each card carries a soft halo tinted with the agent color,
   giving them individual identity beyond a shared gradient background. */
.tool-btn::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 65%);
  opacity: .55; pointer-events: none;
  transition: opacity .2s ease, transform .3s ease;
}
.tool-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(11,20,55,.36); }
.tool-btn:hover::after { opacity: .85; transform: scale(1.05); }
.tool-btn:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 3px; }
.tool-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; position: relative; z-index: 1; }
.tool-tag { display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.14); backdrop-filter: blur(6px);
  position: relative; z-index: 1; }
.tool-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.tool-desc { font-size: 12.75px; line-height: 1.5; opacity: .92; margin-top: 8px; max-width: 34ch; position: relative; z-index: 1; }
.tool-cornflower { background: linear-gradient(160deg, var(--cornflower-2), var(--cornflower)); border-color: var(--cornflower); }
.tool-indigo  { background: linear-gradient(160deg, var(--indigo-2),  var(--indigo));  border-color: var(--indigo); }
.tool-arctic  { background: linear-gradient(160deg, var(--arctic-2),  var(--arctic));  border-color: var(--arctic); }
.tool-navy    { background: linear-gradient(160deg, var(--navy-2),    var(--navy));    border-color: var(--navy); }
.tool-midnight {
  background: linear-gradient(160deg, var(--midnight-2), var(--midnight));
  border-color: rgba(255,255,255,.22);
}
.manage-settings-row { display: flex; margin-top: 22px; }
.tool-btn.tool-sm { flex-direction: row; align-items: center; gap: 10px; padding: 13px 20px; }
.tool-btn.tool-sm .tool-name { font-size: 15px; }
.tool-btn.tool-sm::after { display: none; }
@media (prefers-reduced-motion: reduce) { .tool-btn, .tool-btn::after { transition: none; } }

/* ===== Agent-scoped chat modal ===== */
/* Each agent (Cornflower/Indigo/Arctic) inherits its color through --agent /
   --agent-2 tokens set on .agent-scope. Everything inside — border ring,
   header chip, waveform, feedback pills, voice buttons — reads that token
   so a single modal shell can wear any agent's identity. */
.agent-scope { --agent: var(--cornflower); --agent-2: var(--cornflower-2); }
.agent-cornflower { --agent: var(--cornflower); --agent-2: var(--cornflower-2); }
.agent-indigo     { --agent: var(--indigo);     --agent-2: var(--indigo-2); }
.agent-arctic     { --agent: var(--arctic);     --agent-2: var(--arctic-2); }
.agent-navy       { --agent: var(--navy);       --agent-2: var(--navy-2); }

/* When present, the shell recolors the modal frame in the agent's tone. */
.modal.agent-framed {
  border-color: color-mix(in srgb, var(--agent) 55%, var(--line-2));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--agent) 35%, transparent),
    0 20px 60px rgba(0,0,0,.5),
    0 0 90px -20px color-mix(in srgb, var(--agent) 60%, transparent);
}
.modal.agent-framed .modal-header {
  border-bottom-color: color-mix(in srgb, var(--agent) 30%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--agent) 14%, transparent), transparent);
  position: relative;
}
/* Signature accent — a thin gradient bar across the top edge of the header
   so the agent color reads before you've even read the title. */
.modal.agent-framed .modal-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px;
  background: linear-gradient(90deg, var(--agent-2), var(--agent), var(--agent-2));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ===== Round agent modal (.agent-round) =====
   A genuine circle, as large as the viewport allows, filled with the agent's
   own colour and rimmed by a ring that cycles the whole Indigonix palette.
   Two things had to be right for this to work at all:
     1. size the disc off the SMALLER of width/height, or a 50% radius turns
        into an ellipse the moment the viewport is short;
     2. paint the ring ABOVE the disc with its middle masked out — a negative
        z-index pseudo-element is drawn behind the disc's own background,
        which is why the ring was previously invisible. */
.modal.agent-round {
  --disc: min(780px, 92vw, 86vh);
  /* Insets that keep a rectangular chat inside a round disc.
     A circle of diameter D contains a square of side D/sqrt(2) = 0.707D,
     so 14.65% off each edge is the safe vertical band for the whole stack.
     Horizontally the rim is only that tight near the top and bottom, so the
     header/footer take the full inset while the thread — sitting at the
     circle's widest point — only needs ~9%.
     These MUST be calc() off --disc, not percentages: percentage padding
     resolves against the backdrop's width, not the disc's, which is what
     let the title, input row and buttons spill past the rim before. */
  --rim-v:    calc(var(--disc) * 0.164);
  --rim-edge: calc(var(--disc) * 0.170);
  --rim-mid:  calc(var(--disc) * 0.125);
  width: var(--disc); height: var(--disc);
  max-width: none; max-height: none;
  padding: var(--rim-v) 0;
  border-radius: 50%;
  position: relative;
  border: none;
  overflow: visible;
  color: #fff;
  /* Agent-tinted interior: opening Indigo genuinely reads violet, Cornflower
     blue, Arctic cyan. The light source sits top-left so the disc looks lit
     rather than flat-filled, and the far rim settles deep enough that white
     text holds contrast in BOTH the light and dark app themes. */
  background:
    radial-gradient(118% 118% at 26% 12%,
      color-mix(in srgb, var(--agent-2) 68%, #0b1020) 0%,
      color-mix(in srgb, var(--agent) 58%, #0b1020) 34%,
      color-mix(in srgb, var(--agent) 34%, #070a16) 68%,
      color-mix(in srgb, var(--agent) 18%, #05070f) 100%);
  box-shadow:
    0 0 70px -6px color-mix(in srgb, var(--agent) 60%, transparent),
    0 30px 90px rgba(0,0,0,.55);
}
/* The flowing ring — Cornflower -> Indigo -> Arctic -> Midnight -> round again,
   the same regardless of which agent is open, so it always reads as the whole
   family in motion. */
.modal.agent-round::before {
  content: ""; position: absolute; inset: -12px; z-index: 4;
  pointer-events: none;
  border-radius: 50%;
  padding: 12px;
  background: conic-gradient(
    from var(--ring-angle, 0deg),
    var(--cornflower-2),
    var(--cornflower),
    var(--indigo-2),
    var(--indigo),
    var(--navy-2),
    var(--navy),
    var(--arctic),
    var(--arctic-2),
    var(--midnight-2),
    var(--cornflower-2)
  );
  /* Cut the middle out so only the rim band paints. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  /* İki animasyon üst üste: renkler dönüyor (ring-spin), rim
     genişliği ve konumu hafifçe salınıyor (ring-dance) — mekanik
     bir dönüş yerine nefes alan bir kenar hissi. Süreler asal:
     kombinasyon 12s'de tekrar etmesin, kenar aynı şekilde iki kez
     dans etmesin. */
  animation:
    ring-spin 12s linear infinite,
    ring-dance 4.7s ease-in-out infinite;
}
@keyframes ring-dance {
  0%, 100% { inset: -12px; padding: 12px; filter: brightness(1); }
  25%      { inset: -16px; padding: 14px; filter: brightness(1.18); }
  50%      { inset: -10px; padding: 10px; filter: brightness(1.05); }
  75%      { inset: -18px; padding: 15px; filter: brightness(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .modal.agent-round::before { animation: none; }
}
/* Outer bloom — breathes slowly so the disc feels alive while idle. */
.modal.agent-round::after {
  content: ""; position: absolute; inset: -70px; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--agent) 55%, transparent) 52%,
    transparent 76%);
  opacity: .55;
  pointer-events: none;
  animation: halo-breathe 6s ease-in-out infinite;
}
@keyframes halo-breathe {
  0%, 100% { opacity: .42; transform: scale(1); }
  50%      { opacity: .7;  transform: scale(1.05); }
}
@property --ring-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes ring-spin {
  to { --ring-angle: 360deg; }
}

/* ---- Fitting a rectangular chat inside a circle ----
   Percentage padding keeps the content within the disc's inscribed area at
   every size. The header and footer sit near the rim where the circle is
   narrow, so they get ~15% side padding; the thread sits at the widest point
   and only needs ~9%. */
.modal.agent-round .modal-header {
  border: none; background: transparent;
  padding: 0 var(--rim-edge) 10px;
}
.modal.agent-round .modal-header::before { display: none; }
.modal.agent-round .modal-title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  color: #fff;
}
.modal.agent-round .modal-close {
  width: 34px; height: 34px; border-radius: 50%;
  flex: none;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  display: grid; place-items: center;
  transition: background .15s ease, transform .12s ease;
}
.modal.agent-round .modal-close:hover {
  background: rgba(255,255,255,.28); transform: rotate(90deg);
}
/* Only ONE scroll region inside the disc — the thread. */
.modal.agent-round .modal-body {
  padding: 0 var(--rim-mid);
  border-radius: 0;
  background: transparent;
  overflow: visible;
  display: flex; flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.modal.agent-round .agent-scope {
  display: flex; flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.modal.agent-round .agent-header,
.modal.agent-round .ai-chat-input-row { flex: 0 0 auto; }
.modal.agent-round .ai-chat-thread {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  overflow-wrap: anywhere;
}
/* Firefox only. Chrome also supports `scrollbar-width` now, and when it is
   set the engine draws its OWN thin scrollbar — complete with stepper arrows
   — and ignores every ::-webkit-scrollbar rule below. Fencing the standard
   properties behind "no ::-webkit-scrollbar support" keeps Firefox tidy while
   letting Chromium use the 6px arrow-less rail we actually want. */
@supports not selector(::-webkit-scrollbar) {
  .modal.agent-round .ai-chat-thread,
  .modal.agent-round .table-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.34) transparent;
  }
}
.modal.agent-round .ai-chat-thread::-webkit-scrollbar { width: 6px; height: 6px; }
.modal.agent-round .ai-chat-thread::-webkit-scrollbar-track { background: transparent; }
.modal.agent-round .ai-chat-thread::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.3); border-radius: 3px;
}
.modal.agent-round .ai-chat-thread::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.5);
}
.modal.agent-round .table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.modal.agent-round .table-wrap::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.3); border-radius: 3px;
}
/* Kill the stepper arrows. Styling only the track and thumb leaves Windows
   Chrome drawing its default up/down buttons at each end of the rail, which
   is the chunky look the thin 6px thumb was meant to replace. */
.modal.agent-round .ai-chat-thread::-webkit-scrollbar-button,
.modal.agent-round .table-wrap::-webkit-scrollbar-button {
  display: none; width: 0; height: 0;
}
.modal.agent-round .ai-chat-thread::-webkit-scrollbar-corner,
.modal.agent-round .table-wrap::-webkit-scrollbar-corner {
  background: transparent;
}
.modal.agent-round .modal-footer {
  border: none; background: transparent; border-radius: 0;
  padding: 10px var(--rim-edge) 0;
  flex: 0 0 auto;
}
/* Reclaim vertical room inside the inscribed square — the disc's own rim
   padding already separates these rows from the edge. */
.modal.agent-round .agent-header { padding: 0 0 10px; margin-bottom: 10px; }
.modal.agent-round .ai-chat-input-row { margin-top: 10px; padding-top: 10px; }

/* ---- Legibility on the tinted disc ----
   The disc is a deep agent colour in both app themes, so everything inside
   switches to a glass-on-colour treatment rather than the app's usual
   surface tokens, which would turn muddy against it. */
.modal.agent-round .ai-msg.ai {
  background: rgba(6,9,22,.44);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.95);
}
.modal.agent-round .ai-msg.staff {
  background: rgba(255,255,255,.17);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.modal.agent-round .ai-chat-input-row {
  border-top-color: rgba(255,255,255,.18);
}
.modal.agent-round .ai-chat-input-row input {
  background: rgba(6,9,22,.46);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.modal.agent-round .ai-chat-input-row input::placeholder { color: rgba(255,255,255,.5); }
.modal.agent-round .ai-chat-input-row input:focus { border-color: rgba(255,255,255,.55); }
.modal.agent-round .agent-header {
  border-bottom-color: rgba(255,255,255,.2);
}
.modal.agent-round .agent-chip {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.26);
  color: #fff;
}
.modal.agent-round .agent-chip .dot {
  background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.24);
}
.modal.agent-round .agent-title { color: rgba(255,255,255,.72); }
.modal.agent-round .agent-title strong { color: #fff; }
.modal.agent-round .agent-wave span { background: rgba(255,255,255,.9); }
.modal.agent-round .voice-btn {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}
.modal.agent-round .voice-btn:hover:not(:disabled) { background: rgba(255,255,255,.26); }
.modal.agent-round .btn-ghost {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
}
.modal.agent-round .btn-ghost:hover { background: rgba(255,255,255,.24); }
.modal.agent-round .text-muted,
.modal.agent-round .fs-11, .modal.agent-round .fs-13 { color: rgba(255,255,255,.7); }
.modal.agent-round table.data th { color: rgba(255,255,255,.66); border-color: rgba(255,255,255,.18); }
.modal.agent-round table.data td { color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.12); }
.modal.agent-round .card { background: rgba(6,9,22,.4); border-color: rgba(255,255,255,.16); }

@media (max-width: 640px) {
  /* On a phone a full circle wastes too much of a small screen — relax to a
     tall rounded capsule so the chat stays usable. */
  .modal.agent-round {
    /* width:100%, not 94vw — the backdrop already carries 24px of padding, so
       a viewport-relative width overflows its right edge on a narrow screen. */
    width: 100%; height: auto; max-height: 88vh;
    border-radius: 34px;
    padding: 0;
    --rim-edge: 22px;
    --rim-mid: 22px;
  }
  .modal.agent-round::before,
  .modal.agent-round::after { border-radius: 40px; }
  .modal.agent-round .modal-header { padding: 20px var(--rim-edge) 12px; }
  .modal.agent-round .modal-body { padding: 0 var(--rim-mid) 8px; }
  .modal.agent-round .modal-footer { padding: 10px var(--rim-edge) 20px; }
  .modal.agent-round .ai-chat-thread { min-height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .modal.agent-round::before,
  .modal.agent-round::after { animation: none; }
}

/* Agent identity chip in the modal header */
.agent-header {
  display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px;
  border-bottom: 1px dashed color-mix(in srgb, var(--agent) 22%, var(--line));
  margin-bottom: 14px;
}
.agent-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--agent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--agent) 35%, transparent);
  font-size: 12px; font-weight: 600; color: var(--text-0); letter-spacing: .01em;
}
.agent-chip .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--agent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent) 30%, transparent);
}
.agent-scope.is-speaking .agent-chip .dot { animation: agent-dot-pulse 1.1s ease-in-out infinite; }
@keyframes agent-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent) 30%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--agent) 10%, transparent); }
}

/* Live waveform — five bars that idle flat and dance when .is-speaking is
   toggled on. The signature moment of the chat: it makes the agent feel
   present while ElevenLabs is talking back. */
.agent-wave {
  display: inline-flex; align-items: flex-end; gap: 3px; height: 22px;
  padding: 0 4px; opacity: .35; transition: opacity .2s ease;
}
.agent-wave span {
  display: block; width: 3px; height: 4px; border-radius: 2px;
  background: linear-gradient(180deg, var(--agent-2), var(--agent));
  transition: height .2s ease;
}
.agent-scope.is-speaking .agent-wave { opacity: 1; }
.agent-scope.is-speaking .agent-wave span {
  animation: agent-wave-bounce 900ms ease-in-out infinite;
}
.agent-scope.is-speaking .agent-wave span:nth-child(1) { animation-delay: -.9s; }
.agent-scope.is-speaking .agent-wave span:nth-child(2) { animation-delay: -.7s; }
.agent-scope.is-speaking .agent-wave span:nth-child(3) { animation-delay: -.5s; }
.agent-scope.is-speaking .agent-wave span:nth-child(4) { animation-delay: -.3s; }
.agent-scope.is-speaking .agent-wave span:nth-child(5) { animation-delay: -.1s; }
@keyframes agent-wave-bounce {
  0%, 100% { height: 4px; }
  50%      { height: 20px; }
}
.agent-title { font-size: 13px; color: var(--text-2); margin-left: auto; }
.agent-title strong { color: var(--text-0); font-weight: 600; }

/* ===== "Düşünüyor" göstergesi — akan veri =====
   Static "AI thinking..." text feels frozen during long local-model runs.
   Instead: a labeled row of pulsing dots, four skeleton bars that shimmer
   left→right with the agent color, and a fake data-stream line that
   rotates through parse/search/match/summarize steps. Everything reads as
   "data is flowing through the agent" without pretending to show real
   internals. */
.ai-msg.ai-thinking-flow {
  width: 100%;
  max-width: 100%;
  background: color-mix(in srgb, var(--agent) 8%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--agent) 25%, var(--line));
  padding: 12px 14px;
}
.thinking-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-1);
  margin-bottom: 10px;
}
.thinking-label .thinking-text {
  margin-left: 4px; color: color-mix(in srgb, var(--agent) 30%, var(--text-0));
  font-weight: 600; letter-spacing: .01em;
}
.thinking-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--agent-2);
  animation: thinking-dot 1.1s ease-in-out infinite;
}
.thinking-dot:nth-child(2) { animation-delay: .18s; }
.thinking-dot:nth-child(3) { animation-delay: .36s; }
@keyframes thinking-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: .4; }
  40%           { transform: scale(1);   opacity: 1;   }
}
.thinking-lines {
  display: flex; flex-direction: column; gap: 7px;
  margin-bottom: 10px;
}
.thinking-lines .tl {
  display: block; height: 8px; border-radius: 4px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--agent) 12%, transparent) 0%,
      color-mix(in srgb, var(--agent) 45%, transparent) 30%,
      color-mix(in srgb, var(--agent-2) 65%, transparent) 50%,
      color-mix(in srgb, var(--agent) 45%, transparent) 70%,
      color-mix(in srgb, var(--agent) 12%, transparent) 100%);
  background-size: 220% 100%;
  animation: thinking-shimmer 1.6s linear infinite;
}
.thinking-lines .tl-1 { width: 92%; }
.thinking-lines .tl-2 { width: 76%; animation-delay: .15s; }
.thinking-lines .tl-3 { width: 88%; animation-delay: .3s;  }
.thinking-lines .tl-4 { width: 64%; animation-delay: .45s; }
@keyframes thinking-shimmer {
  from { background-position: 220% 0; }
  to   { background-position: -20% 0; }
}
.thinking-stream {
  font-family: var(--mono, ui-monospace, 'SF Mono', Consolas, monospace);
  font-size: 11.5px;
  color: color-mix(in srgb, var(--agent-2) 60%, var(--text-2));
  border-top: 1px dashed color-mix(in srgb, var(--agent) 25%, var(--line));
  padding-top: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .01em;
}
.thinking-stream.is-refresh { animation: stream-slide .45s ease-out; }
@keyframes stream-slide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@media (prefers-reduced-motion: reduce) {
  .thinking-dot,
  .thinking-lines .tl,
  .thinking-stream.is-refresh { animation: none; }
  .thinking-lines .tl { background-position: 50% 0; }
}

/* Speaking halo — a soft ambient glow behind the thread while TTS plays.
   MUST exclude the modal itself: the shell puts .agent-scope on BOTH the
   modal (so the header inherits --agent) and the inner chat div, and the
   modal's ::before is already the rotating ring. Without :not(.modal) the
   halo's `opacity: 0` and `height: 120px` land on that same pseudo-element
   and erase the ring completely. `is-speaking` is only ever set on the
   inner div, so restricting the halo to it costs nothing. */
.agent-scope { position: relative; }
.agent-scope:not(.modal)::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 120px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--agent) 22%, transparent), transparent 70%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.agent-scope:not(.modal).is-speaking::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .agent-scope.is-speaking .agent-wave span,
  .agent-scope.is-speaking .agent-chip .dot { animation: none; }
  .agent-scope.is-speaking .agent-wave span { height: 12px; }
}

/* Indigonix hexagon mark used as a nav icon */
.nav-icon-mark { display: inline-flex; width: 15px; height: 15px; }
.nav-icon-mark svg { width: 100%; height: 100%; }

/* Phase tabs */
.phase-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.phase-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-1); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s; }
.phase-tab:hover { border-color: var(--brand-border); color: var(--text-0); }
.phase-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.phase-count { font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: var(--bg-3); color: var(--text-2); font-variant-numeric: tabular-nums; }
.phase-tab.active .phase-count { background: rgba(255,255,255,.22); color: #fff; }

.topbar-left { margin-right: auto; }
.topbar-right { display: flex; align-items: center; gap: 10px; }