/* sanal-ofis pixel-art ofis arayüzü. Temiz, düz (flat) tasarım. */

:root {
  /* Ajan gömlek renkleri */
  --c-researcher: #378ADD;
  --c-compliance: #D4537E;
  --c-writer:     #7F77DD;
  --c-factcheck:  #BA7517;
  --c-image:      #1D9E75;
  --c-publisher:  #5F5E5A;

  /* Durum renkleri */
  --s-idle:    #B4B2A9;
  --s-working: #EF9F27;
  --s-waiting: #378ADD;
  --s-done:    #1D9E75;

  /* Yüzey / metin */
  --bg:        #EEF1F5;
  --surface:   #FFFFFF;
  --border:    #E2E6EC;
  --text:      #1F2733;
  --muted:     #6B7686;
  --primary:   #2E6FD6;

  /* Tabela */
  --sign-bg:   #0F1B2E;
  --sign-amber:#FAC775;
  --sign-green:#5DCAA5;

  /* Masa */
  --desk-top:  #9A7B4F;
  --desk-bot:  #6B5437;
  --desk-leg:  #5A4529;

  --radius: 12px;
  --mono: "SF Mono", "Menlo", "Consolas", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
code { font-family: var(--mono); background: #f0f2f5; padding: 1px 5px; border-radius: 5px; }

/* ---------- Butonlar ---------- */
.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { border-color: #cfd6df; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: #245bb5; }
.btn-ghost { background: #f6f8fb; }
.btn-publish { background: var(--s-done); border-color: var(--s-done); color: #fff; font-weight: 600; width: 100%; }
.btn-publish:hover { background: #178a64; }
/* GÖRSEL KAPISI: kapak görseli hazırlanamadığında normal yayın butonu
   PASİFTİR. Görsel dili "tıklanabilir ama işe yaramaz" değil, "şu an
   geçerli bir aksiyon değil" demeli. */
.btn:disabled, .btn.is-blocked {
  opacity: .5; cursor: not-allowed; filter: grayscale(.35);
}
.btn:disabled:hover, .btn.is-blocked:hover { border-color: var(--border); }
.btn:disabled:active, .btn.is-blocked:active { transform: none; }
/* Kapı kutusu: hata kutusundan biraz daha belirgin, aksiyonları hizalı */
.image-gate .decision-row { display: flex; gap: 8px; flex-wrap: wrap; }
.image-gate .decision-row .btn { width: auto; flex: 1 1 auto; min-width: 150px; }

/* LinkedIn link ÖNİZLEME KARTI — feed'deki kutunun sade temsili.
   Amaç: kullanıcı paylaşmadan ÖNCE "çıplak link değil, kart çıkacak"
   bilgisini görsün. */
.li-preview-card {
  display: flex; gap: 10px; align-items: stretch; margin-top: 8px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--surface);
}
.li-preview-thumb {
  flex: 0 0 84px; background: #EEF1F5; font-size: 24px; color: #7A8698;
}
/* Gerçek kapak görseli: kutuyu tam doldurur, en-boy oranı KIRPILARAK korunur
   (LinkedIn kartı da böyle davranır). */
img.li-preview-thumb { object-fit: cover; align-self: stretch; min-height: 64px; }
.li-preview-thumb-empty {
  display: flex; align-items: center; justify-content: center;
}
.li-preview-body { padding: 8px 10px; min-width: 0; }
.li-preview-title {
  font-weight: 700; font-size: 13px; color: var(--text); line-height: 1.3;
  overflow-wrap: anywhere;
}
.li-preview-desc {
  font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.li-preview-domain {
  font-size: 11px; color: var(--muted); margin-top: 4px;
  text-transform: lowercase;
}
@media (max-width: 520px) {
  .li-preview-thumb { flex-basis: 60px; font-size: 20px; }
}
.btn-icon {
  border: none; background: transparent; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer; width: 34px; height: 34px; border-radius: 8px;
}
.btn-icon:hover { background: #f0f2f5; }
.row-end { display: flex; justify-content: flex-end; margin-top: 14px; }

input[type=text], input[type=password], textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}
input:focus, textarea:focus { outline: 2px solid #cfe0fb; border-color: var(--primary); }
textarea { resize: vertical; min-height: 64px; }

/* ---------- Üst bar ---------- */
/* ---- ÜST KONTROL BANDI ---------------------------------------------------
   Tek grid. Her hücre (.tb-cell) AYNI üç satırdan oluşur ve satır
   yükseklikleri SABİTTİR: etiket 16px · kontrol --ctl-h · yardım 30px.
   Sabit satırlar sayesinde metin uzunluğu hizayı BOZAMAZ (eski flex düzende
   yardım metinleri farklı yükseklik üretip butonu havada bırakıyordu). */
.topbar {
  --ctl-h: 44px;
  display: grid; align-items: stretch; gap: 0 14px;
  grid-template-columns:
    auto minmax(360px, 1fr) minmax(180px, 220px) auto auto auto;
  grid-template-areas: "brand topic type action tools status";
  padding: 12px 18px 10px;
  background: var(--surface);
  /* Ofis sahnesinden net ayrılsın */
  border-bottom: 1px solid #D5DBE4;
  box-shadow: 0 2px 10px rgba(31,39,51,.06);
  position: sticky; top: 0; z-index: 20;
}
.tb-cell {
  display: grid; grid-template-rows: 16px var(--ctl-h) 30px;
  gap: 3px; min-width: 0;
}
.tb-brand  { grid-area: brand; }
.tb-topic  { grid-area: topic; }
.tb-type   { grid-area: type; }
.tb-action { grid-area: action; }
.tb-tools  { grid-area: tools; }
.tb-status { grid-area: status; }

.field-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  line-height: 16px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.field-hint {
  font-size: 10.5px; color: var(--muted); line-height: 1.4;
  overflow: hidden;
  /* En fazla iki satır; taşan metin kırpılır ki hiza bozulmasın */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Bandın içindeki TÜM kontroller aynı yükseklikte */
.topbar input[type=text],
.topbar select,
.topbar .btn,
.topbar .status-badge {
  height: var(--ctl-h); box-sizing: border-box;
}
.topbar input[type=text] { width: 100%; }
.brand-mini {
  display: flex; align-items: center; height: var(--ctl-h);
  font-family: var(--mono); font-weight: 700; color: var(--primary);
  white-space: nowrap; font-size: 15px;
}
#start-btn { white-space: nowrap; font-weight: 600; }
.tb-tools-row { display: flex; gap: 8px; align-items: stretch; }
.tb-tools-row .btn { white-space: nowrap; display: flex; align-items: center; }
.tb-status .status-badge {
  display: flex; align-items: center; justify-content: center;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

/* 768-1199px: iki dengeli sıra */
@media (max-width: 1199px) {
  .topbar {
    grid-template-columns: auto minmax(220px, 1fr) minmax(170px, 240px);
    grid-template-areas:
      "brand  topic  type"
      "action tools  status";
    gap: 8px 14px;
  }
  /* Durum rozeti kendi metnine göre daralır ve sağa yaslanır (sütunu
     doldurup ağır bir panel gibi görünmesin). */
  .tb-status .status-badge { width: auto; margin-left: auto; }
}

/* 767px altı: tek kolon; araçlar ve durum tek satırı paylaşır */
@media (max-width: 767px) {
  .topbar {
    --ctl-h: 42px;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand  brand"
      "topic  topic"
      "type   type"
      "action action"
      "tools  status";
    gap: 6px 10px; padding: 10px 12px 12px;
  }
  /* Tek kolonda sabit satır yüksekliğine gerek yok; metin akabilir */
  .tb-cell { grid-template-rows: auto auto auto; }
  .tb-brand .field-label, .tb-brand .field-hint,
  .tb-action .field-label, .tb-action .field-hint,
  .tb-tools .field-label, .tb-tools .field-hint,
  .tb-status .field-label, .tb-status .field-hint { display: none; }
  .tb-brand .brand-mini { height: auto; }
  .field-hint { -webkit-line-clamp: 3; }
  #start-btn { width: 100%; }
  .tb-tools-row { width: 100%; }
  .tb-tools-row .btn { flex: 1; justify-content: center; }
  .tb-status .status-badge { width: auto; max-width: 46vw; }
}
#log-btn { white-space: nowrap; }
.status-badge {
  padding: 7px 14px; border-radius: 999px;
  background: #f0f2f5; color: var(--muted);
  font-size: 13px; white-space: nowrap;
}
.status-badge.active { background: #fff2dc; color: #a5680d; }
.status-badge.done { background: #e2f6ee; color: #157a56; }

/* ---------- Akış şeridi ---------- */
.flow-strip {
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
  overflow-x: auto; padding: 9px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  font-size: 11.5px; -webkit-overflow-scrolling: touch;
}
.flow-step { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); white-space: nowrap; }
.flow-dot { width: 8px; height: 8px; border-radius: 50%; background: #d3d8df; }
.flow-step.done { color: var(--s-done); }
.flow-step.done .flow-dot { background: var(--s-done); }
.flow-step.active { color: #a5680d; font-weight: 700; }
.flow-step.active .flow-dot { background: var(--s-working); box-shadow: 0 0 0 3px rgba(239,159,39,.2); }
.flow-sep { flex: 0 0 14px; height: 1px; background: #dfe3e9; margin: 0 1px; }

/* ---------- Ofis sahnesi ---------- */
/* TEK EKRAN KURALI: ofis sahnesi tipik bir dizüstü ekranında dikey scroll
   OLMADAN görünür. Ölçek app.js'teki fitOfficeScene() ile hesaplanır; burada
   yalnız kapsayıcı hazırlanır. Öğelerin tek tek koordinatları DEĞİŞMEZ. */
.office { max-width: 1240px; margin: 0 auto; padding: 0 16px 16px; }
/* Sahnenin sarmalayıcısı: transform layout yüksekliğini DEĞİŞTİRMEDİĞİ için
   ölçek uygulandığında bu kutunun yüksekliği JS tarafından ayarlanır ve
   altındaki legend doğru akar (üst üste binme olmaz). */
.stage-fit { position: relative; }
.stage-fit > .stage { transform-origin: top center; will-change: transform; }
.stage {
  position: relative; margin-top: 10px;
  border: 1px solid #D8DDE5; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(31,39,51,.14), 0 2px 6px rgba(31,39,51,.06);
}
/* Sahne üstü ışık + köşe vinyeti: düz pixel yüzeye derinlik ve "premium"
   his katan tek katman. İçeriği etkilemesin diye pointer-events yok. */
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,246,224,.30), transparent 55%),
    radial-gradient(130% 100% at 50% 55%, transparent 58%, rgba(46,31,16,.20) 100%);
}

/* Plaza camlı duvar */
.window-wall { height: 96px; background: #C9CDBE; }
.window-wall svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }

/* Tavandan sarkan tabela: ortalı, tek renk SİYAH */
.sign-wrap { position: absolute; top: 0; left: 0; right: 0; height: 66px; display: flex; justify-content: center; z-index: 3; pointer-events: none; }
.sign {
  align-self: flex-end;
  background: #F2EFE7; border: 2px solid #11131A; border-radius: 8px;
  padding: 8px 22px; font-family: var(--mono); font-size: 18px; font-weight: 700;
  letter-spacing: 1px; color: #11131A; text-align: center;
  box-shadow: 0 6px 14px rgba(15,27,46,.28);
}
.sign-strap { position: absolute; top: 0; width: 3px; height: 22px; background: #2a2f38; }
.sign-strap.left { left: calc(50% - 78px); }
.sign-strap.right { right: calc(50% - 78px); }

/* Duvar bandı: üç bölge (sol / orta / sağ). Wrap yerine bölge mantığı — böylece
   ekran daraldıkça öğeler rastgele kırılmaz, gruplar bir arada kalır.
   Zemin: düz kahve yerine sıcak sıva + üstte tablo rayı, altta süpürgelik. */
.wall-band {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; padding: 10px 22px 8px;
  background:
    linear-gradient(180deg, #EADCC4 0%, #E3D0B2 62%, #D9C3A1 100%);
  border-top: 3px solid #C2A275;
  border-bottom: 4px solid #A9855C;
  box-shadow: inset 0 -10px 18px rgba(120,88,50,.10);
}
.wall-group { display: flex; align-items: flex-end; gap: 16px; }
.wall-group.center { flex: 1; justify-content: center; gap: 20px; }
.wall-group.right { justify-content: flex-end; }
@media (max-width: 900px) {
  .wall-band { padding: 12px 14px 8px; gap: 10px; }
  .wall-group.center { display: none; }   /* dar ekranda orta grup gizlenir */
}
@media (max-width: 560px) {
  .wall-group .decor-item.shelf, .wall-group .decor-item.hang { display: none; }
}
.decor-item svg { image-rendering: pixelated; shape-rendering: crispEdges; display: block; }
.decor-item.clock svg { width: 40px; }
.decor-item.shelf svg { width: 58px; }
.decor-item.hang svg { width: 30px; margin-bottom: 8px; }
.poster {
  display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center;
  background: #FBF4E4; border: 3px solid #2A2320; border-radius: 3px; padding: 6px 12px;
  font-family: var(--mono); font-weight: 700; font-size: 11px; color: #B03A3A; letter-spacing: 1px;
}
.poster span:nth-child(2) { color: #3E7D4F; } .poster span:nth-child(3) { color: #C96A2E; }
.todo-board {
  background: #4E7D3A; border: 3px solid #2E4A22; border-radius: 4px; padding: 6px 10px; color: #fff;
  font-size: 10.5px; min-width: 96px;
}
.todo-h { font-weight: 700; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; margin-bottom: 4px; }
.todo-l { padding-left: 14px; position: relative; line-height: 1.5; }
.todo-l::before { content: "☐"; position: absolute; left: 0; }
.todo-l.done { opacity: .75; text-decoration: line-through; }
.todo-l.done::before { content: "☑"; }

/* Ofis zemini: geniş, sakin parke. Eski dar çizgili doku "gürültülü"
   görünüyordu; artık plaka genişliği arttı, kontrast düştü ve alta doğru
   hafif bir derinlik koyulaşması var. */
/* Oda kompozisyonu: masalar ORTADA, mobilya YAN KORİDORLARDA ve alttaki
   dinlenme şeridinde durur. Eskiden dekor mutlak konumla masaların üstüne
   biniyordu (su sebili + arşiv dolabı bölge başlığını eziyordu). Artık
   .floor'un iç boşluğu dekora ayrılmış gerçek bir koridordur. */
.floor {
  position: relative;
  --gutter: 62px;      /* yan koridor genişliği (dekor buraya yerleşir) */
  --lounge: 42px;      /* alt dinlenme şeridi (koltuk, kedi, saksı) */
  background:
    repeating-linear-gradient(90deg, rgba(96,64,32,.09) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg, rgba(80,52,26,.05) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #DCC09A 0%, #D2B187 46%, #C29C6F 100%);
  padding: 12px var(--gutter) var(--lounge);
}

/* Zemin dekoru (koridorlarda ve alt şeritte, ajanların arkasında) */
.floor-decor { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fdecor { position: absolute; }
.fdecor svg { image-rendering: pixelated; shape-rendering: crispEdges; display: block; }
.fdecor.cooler { top: 14px; left: 14px; width: 26px; }
.fdecor.plant-l { top: 96px; left: 16px; width: 24px; }
.fdecor.plant-r { top: 16px; right: 16px; width: 22px; }
.fdecor.couch { bottom: 4px; right: 14px; width: 88px; opacity: .96; }
/* Duvara asılı yapışkan not (sağ koridorun üstü) */
.fdecor.note {
  font-family: "Comic Sans MS", "Segoe UI", sans-serif;
  font-size: 8px; font-weight: 700; line-height: 1.15; color: #5a4326;
  padding: 5px 4px; width: 44px; text-align: center;
  box-shadow: 1px 2px 3px rgba(60,40,20,.25);
}
.fdecor.note1 { top: 92px; right: 12px; background: #FBC7D4; transform: rotate(-5deg); }
@media (max-width: 900px) {
  .floor { --gutter: 12px; --lounge: 34px; }
  .fdecor.cooler, .fdecor.note, .fdecor.plant-l, .fdecor.plant-r { display: none; }
  .fdecor.couch { width: 62px; bottom: 2px; right: 6px; opacity: .8; }
}

/* ---- Bölgeli yerleşim ----------------------------------------------------
   Masalar artık rastgele dikey kaymalarla serpiştirilmiyor. İki bölge var:
   "Üretim hattı" (4 masa) ve "Yayın ve operasyon" (3 masa). Her bölge kendi
   halısının üstünde oturur; bu hem kompozisyonu dengeler hem de yeni
   ajanların ofise ait olduğunu görsel olarak anlatır. */
.ws-grid {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 10px;
}
.ws-zone {
  position: relative; border-radius: 16px; padding: 6px 14px 10px;
  /* Bölge, içindeki masa sayısı kadar genişler ve ORTALANIR (--slots JS'ten
     gelir). 4'lü üretim hattı geniş, 3'lü operasyon podu daha dar: kompozisyon
     kendiliğinden dengeli bir piramit oluşturur. */
  width: 100%; max-width: calc(var(--slots, 4) * 236px); margin: 0 auto;
  /* Bölge halısı: zeminden hafifçe ayrışan sıcak bir yüzey */
  background:
    linear-gradient(180deg, rgba(255,246,229,.30), rgba(120,86,48,.10));
  box-shadow: inset 0 0 0 1px rgba(120,86,48,.14),
              0 6px 16px rgba(80,52,26,.10);
}
.zone-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 2px 4px 6px; border-bottom: 1px solid rgba(120,86,48,.20);
  margin-bottom: 6px;
}
.zone-label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: #6B4E2C;
}
.zone-hint { font-size: 10.5px; color: #8A6E4A; letter-spacing: .2px; }

.zone-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px 6px; align-items: flex-end;
}
.zone-row .ws { flex: 1 1 132px; max-width: 184px; min-width: 104px; }

.ws {
  background: transparent; border: none; padding: 6px 4px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  border-radius: 14px;
  transition: transform .14s ease, background .2s, box-shadow .2s;
}
.ws:hover, .ws:focus-visible {
  transform: translateY(-3px);
  background: rgba(255,250,240,.42);
  box-shadow: 0 8px 18px rgba(80,52,26,.16);
  outline: none;
}
.ws:focus-visible { box-shadow: 0 0 0 2px var(--accent, #3E7FC7), 0 8px 18px rgba(80,52,26,.16); }
/* Çalışan ajan bariz belli olsun: sıcak parıltı halkası */
.ws.status-working { background: radial-gradient(circle at 50% 46%, rgba(239,159,39,.26), transparent 64%); }
.ws.status-working .ws-scene { filter: drop-shadow(0 0 7px rgba(239,159,39,.6)); }
/* Seni bekleyen ajan: mavi vurgulu zemin */
.ws.status-waiting { background: radial-gradient(circle at 50% 46%, rgba(55,138,221,.26), transparent 64%); }
.ws.status-done .light-pool { opacity: .55; }
.ws.status-idle .light-pool { opacity: .32; }

.ws-scene { width: 100%; max-width: 168px; }
.ws-scene svg { width: 100%; height: auto; display: block; image-rendering: pixelated; shape-rendering: crispEdges; overflow: visible; }

/* İsim plakası: ahşap zemin üstünde metin okunurluğu için yarı saydam kart.
   Eski hâlde yazılar doğrudan parkenin üstündeydi ve kontrast zayıftı. */
.ws-label {
  text-align: center; margin-top: -2px; padding: 5px 8px 6px;
  /* Genişlik masaya bağlı: uzun ajan adları (Sosyal Medya Uzmanı) plakayı
     taşırmak yerine alt satıra kırılır. */
  width: 100%; overflow-wrap: break-word;
  background: rgba(255,251,244,.86);
  border: 1px solid rgba(120,86,48,.22);
  border-top: 2px solid var(--accent, #8A6D45);
  border-radius: 9px;
  box-shadow: 0 3px 8px rgba(80,52,26,.16);
}
.ws-name { display: block; font-weight: 700; font-size: 13px; color: #33261A; line-height: 1.25; }
.ws-role { display: block; font-size: 10.5px; color: #7A6046; line-height: 1.3; margin-top: 1px; }
/* Durum satırı + önündeki durum noktası. Nokta eskiden karakterin yanında
   havada duran bir SVG karesiydi; artık isim plakasının içinde, metniyle
   birlikte okunan bir gösterge. */
.ws-status {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; font-size: 11.5px; font-weight: 700;
  color: var(--muted); letter-spacing: .1px; line-height: 1.3;
}
.ws-status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--s-idle); box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
.ws.status-working .ws-status::before { background: var(--s-working); animation: dot-pulse 1.1s ease-in-out infinite; }
.ws.status-waiting .ws-status::before { background: var(--s-waiting); animation: dot-pulse 1.1s ease-in-out infinite; }
.ws.status-done    .ws-status::before { background: var(--s-done); }
@keyframes dot-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .75; } }

@media (max-width: 900px) {
  .zone-row .ws { flex: 1 1 132px; }
  .ws-scene { max-width: 148px; }
}
@media (max-width: 560px) {
  .floor { padding: 12px 10px 18px; }
  .ws-zone { padding: 6px 6px 8px; }
  .zone-row { gap: 2px; }
  .zone-row .ws { flex: 1 1 44%; min-width: 108px; }
  .ws-name { font-size: 12px; }
  .ws-role { display: none; }   /* dar ekranda ad + durum yeterli */
}

/* Durum noktası rengi (SVG rect) */
/* (Durum noktası artık isim plakasının içinde: .ws-status::before) */

/* Dikkat işareti (! balonu) sadece waiting'de */
.attn { opacity: 0; }
.ws.status-waiting .attn { animation: attn 1.4s ease-in-out infinite; }
@keyframes attn { 0%,100% { opacity: 0; transform: translateY(2px); } 25%,60% { opacity: 1; transform: translateY(0); } }

/* ---- Karakter animasyonları (transform/opacity, hafif) ---- */
.char, .char-head, .char-arm { transform-box: fill-box; }

/* working: hafif öne eğilme + kollar klavyede + ekran ışığı */
.ws.status-working .char { animation: work-lean 1.8s ease-in-out infinite; transform-origin: center bottom; }
.ws.status-working .char-arm.left  { animation: type-l .34s ease-in-out infinite; transform-origin: center top; }
.ws.status-working .char-arm.right { animation: type-r .34s ease-in-out infinite; transform-origin: center top; }
.ws.status-working .screen { animation: flicker 1.2s steps(2) infinite; }
@keyframes work-lean { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(.4px) rotate(.6deg); } }
@keyframes type-l { 0%,100% { transform: translateY(0); } 50% { transform: translateY(.9px); } }
@keyframes type-r { 0%,100% { transform: translateY(.9px); } 50% { transform: translateY(0); } }
@keyframes flicker { 0% { opacity: .8; } 100% { opacity: 1; } }

/* idle: ara ara etrafa bakma + hafif sallanma (gecikme ajan başına farklı) */
.ws.status-idle .char { animation: idle-sway 5s ease-in-out infinite; animation-delay: var(--idle-delay, 0s); transform-origin: center bottom; }
.ws.status-idle .char-head { animation: idle-look 6.5s ease-in-out infinite; animation-delay: var(--idle-delay, 0s); transform-origin: center bottom; }
@keyframes idle-sway { 0%,88%,100% { transform: rotate(0); } 92% { transform: rotate(-1deg); } 96% { transform: rotate(1deg); } }
@keyframes idle-look { 0%,70%,100% { transform: translateX(0); } 78% { transform: translateX(-1px); } 88% { transform: translateX(1px); } }

/* waiting: hafif nabız */
.ws.status-waiting .char { animation: wait-pulse 1s ease-in-out infinite; transform-origin: center bottom; }
@keyframes wait-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* done: kısa onay hareketi (bir kez), sonra sabit */
.ws.status-done .char { animation: done-nod .7s ease 1; transform-origin: center bottom; }
@keyframes done-nod { 0% { transform: translateY(0); } 30% { transform: translateY(-2px); } 60% { transform: translateY(0); } 100% { transform: translateY(0); } }

/* ---- Kediler ---- */
.cats { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.cat { position: absolute; width: 34px; image-rendering: pixelated; }
.cat svg { width: 100%; height: auto; image-rendering: pixelated; shape-rendering: crispEdges; }
.cat-legs { transform-box: fill-box; transform-origin: center bottom; }
.cat-a { bottom: 10px; animation: roam-a 34s ease-in-out infinite; }
.cat-b { bottom: 40px; animation: roam-b 44s ease-in-out infinite; }
.cat-a .cat-legs { animation: step .28s steps(2) infinite; }
.cat-b .cat-legs { animation: step .32s steps(2) infinite; }
@keyframes step { 0% { transform: translateX(0); } 100% { transform: translateX(1px); } }
/* yürü, dur/otur, geri dön; scaleX ile yön değiştir */
@keyframes roam-a {
  0% { left: 3%; transform: scaleX(1); }
  22% { left: 62%; transform: scaleX(1); }
  30% { left: 62%; transform: scaleX(1); }        /* otur */
  32% { left: 62%; transform: scaleX(-1); }
  60% { left: 12%; transform: scaleX(-1); }
  68% { left: 12%; transform: scaleX(-1); }        /* otur */
  70% { left: 12%; transform: scaleX(1); }
  100% { left: 3%; transform: scaleX(1); }
}
@keyframes roam-b {
  0% { left: 84%; transform: scaleX(-1); }
  26% { left: 30%; transform: scaleX(-1); }
  34% { left: 30%; transform: scaleX(-1); }
  36% { left: 30%; transform: scaleX(1); }
  64% { left: 78%; transform: scaleX(1); }
  72% { left: 78%; transform: scaleX(1); }
  74% { left: 78%; transform: scaleX(-1); }
  100% { left: 84%; transform: scaleX(-1); }
}

/* ---------- Legend (iki satır: durum anahtarı + kadro) ---------- */
.legend {
  display: flex; flex-direction: column; gap: 7px; align-items: center;
  margin-top: 12px; padding: 9px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.legend-line { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; }
.legend-roster { padding-top: 7px; border-top: 1px solid var(--border); width: 100%; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.legend-swatch { width: 11px; height: 11px; border-radius: 50%; flex: none; }
/* Kadro rozetleri tıklanabilir: ajan paneline kısayol */
.legend-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 12.5px; color: var(--text);
  background: #F7F9FC; border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px 4px 9px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .05s;
}
.legend-chip:hover { background: #fff; border-color: #C3CCD8; }
.legend-chip:active { transform: translateY(1px); }

/* ---------- Karar paneli (geniş: solda okuma, sağda kararlar) ---------- */
.chat-panel {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(860px, 96vw); max-width: 96vw;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -8px 0 30px rgba(31,39,51,.14);
  display: flex; flex-direction: column; z-index: 40;
  animation: slideIn .2s ease;
}
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex: none; }
.chat-avatar { width: 40px; height: 40px; image-rendering: pixelated; }
.chat-avatar svg { width: 100%; height: 100%; image-rendering: pixelated; shape-rendering: crispEdges; }
.chat-id { flex: 1; }
.chat-name { font-weight: 600; }
.chat-role { font-size: 12px; }

/* Ana alan: masaüstünde iki sütun (okuma | kararlar), mobilde alt alta */
.chat-main { flex: 1; display: flex; min-height: 0; }
/* Okuma alanı: panelin yıldızı; geniş, ferah, rahat okunur */
.chat-body {
  flex: 1.7; min-width: 0; overflow-y: auto; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 15px; line-height: 1.65;
}
/* Karar alanı: okumadan görsel olarak ayrı; kategorili, sıkışmaz */
.chat-actions {
  flex: 1; max-width: 340px; min-width: 300px; overflow-y: auto;
  padding: 16px; border-left: 1px solid var(--border);
  background: #fafbfc; display: flex; flex-direction: column; gap: 10px;
}
.chat-main.no-actions .chat-actions { display: none; }
@media (max-width: 780px) {
  .chat-panel { width: 100vw; max-width: 100vw; }
  .chat-main { flex-direction: column; }
  .chat-body { flex: none; max-height: 55vh; }
  .chat-actions { max-width: none; min-width: 0; border-left: none; border-top: 2px solid var(--border); flex: none; }
}

/* Karar kategorileri (accordion) */
.act-group { border: 1px solid var(--border); border-radius: 10px; background: #fff; overflow: hidden; }
.act-group > summary { cursor: pointer; padding: 10px 12px; font-weight: 700; font-size: 13px; color: #2b3543; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.act-group > summary::-webkit-details-marker { display: none; }
.act-group > summary::after { content: "▾"; color: var(--muted); font-size: 11px; transition: transform .15s; }
.act-group[open] > summary::after { transform: rotate(180deg); }
.act-group > summary:hover { background: #f5f7fa; }
.act-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); }
.act-hint { font-size: 11.5px; color: var(--muted); }

.bubble { max-width: 100%; padding: 12px 15px; border-radius: 14px; font-size: 15px; line-height: 1.65; white-space: pre-wrap; }
.bubble.agent { align-self: stretch; background: #f5f7f9; border-bottom-left-radius: 4px; }
.bubble.user  { align-self: flex-end; max-width: 86%; background: #dcebff; border-bottom-right-radius: 4px; }

/* Aday kartları */
.cand-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: border-color .12s, background .12s; }
.cand-card:hover { border-color: var(--primary); background: #f7faff; }
.cand-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.cand-sum { font-size: 12.5px; color: var(--muted); }
.tr-flag { display: inline-block; font-size: 10.5px; font-weight: 700; color: #a5680d; background: #fff2dc; padding: 1px 6px; border-radius: 6px; margin-right: 6px; }

.fc-line { display: flex; gap: 8px; margin: 6px 0; }
.fc-box { flex: 1; text-align: center; padding: 8px; border-radius: 10px; font-size: 12px; }
.fc-box b { display: block; font-size: 19px; margin-bottom: 2px; }
.fc-green { background: #e2f6ee; color: #157a56; }
.fc-amber { background: #fff2dc; color: #a5680d; }
.fc-neutral { background: #f0f2f5; color: var(--muted); }
.issue-item { font-size: 12.5px; padding: 6px 9px; border-radius: 8px; background: #faf5ec; margin: 4px 0; }
.issue-item.mismatch { background: #fdecec; }
.issue-sugg { display: inline-block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: #157a56; }

/* Yönlendirmeli revizyon kontrolleri (karar panellerinde) */
.revise-controls { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.revise-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.revise-text { min-height: 54px; }
.revise-agents { display: flex; flex-wrap: wrap; gap: 6px; }
.revise-agent { flex: 1 1 auto; font-size: 12.5px; padding: 7px 8px; }
.revise-agent.sel { background: #eaf2ff; border-color: var(--primary); color: var(--primary); font-weight: 700; }
.revise-send { width: 100%; }

/* İki ajan işbirliği kontrolleri */
.collab-controls { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.collab-pairs { display: flex; flex-direction: column; gap: 6px; }
.collab-pair { text-align: left; font-size: 12.5px; padding: 8px 10px; line-height: 1.35; white-space: normal; }
.collab-free { font-size: 12.5px; }
.collab-free > summary { cursor: pointer; color: var(--primary); font-weight: 600; margin-bottom: 6px; }
.collab-selects { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.collab-selects label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); flex: 1 1 45%; }
.collab-selects select { padding: 6px; border-radius: 8px; border: 1px solid var(--border); }
.collab-text { min-height: 48px; width: 100%; }
.collab-send { width: 100%; }
.collab-again { width: 100%; }

/* Değerlendirme yargısı kartı */
.collab-verdict { border-radius: 12px; padding: 11px 13px; font-size: 13px; line-height: 1.5; border: 1px solid var(--border); }
.collab-verdict.cv-ok { background: #e2f6ee; border-color: #b6e3d0; }
.collab-verdict.cv-warn { background: #fff2dc; border-color: #f0d8a8; }
.collab-verdict.cv-neutral { background: #f0f2f5; }
.cv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cv-badge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.08); }
.collab-verdict.cv-ok .cv-badge { background: #157a56; color: #fff; }
.collab-verdict.cv-warn .cv-badge { background: #b45309; color: #fff; }
.cv-sum { color: #2b3543; }
.cv-list { margin-top: 4px; }
.cv-lbl { font-weight: 700; font-size: 11.5px; }
.cv-list ul { margin: 2px 0 0; padding-left: 18px; }
.cv-list li { font-size: 12px; }
.cv-action { margin-top: 6px; font-weight: 700; color: #157a56; font-size: 12.5px; }

/* ---------- Final ekran ---------- */
.final-screen { position: fixed; inset: 0; background: rgba(20,26,34,.5); z-index: 50; overflow-y: auto; padding: 24px; }
.final-inner {
  max-width: 1080px; margin: 0 auto; background: var(--bg);
  border-radius: 16px; display: grid; grid-template-columns: 1.7fr 1fr; gap: 0;
  overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
@media (max-width: 860px) { .final-inner { grid-template-columns: 1fr; } }

.article-preview { background: var(--surface); padding: 26px 30px; }
.article-image {
  width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, #14263f, #0f1b2e); margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #6f8299; font-size: 13px; text-align: center; padding: 12px;
}
.article-image img { width: 100%; height: 100%; object-fit: cover; }
.article-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cat-tag { background: #ecf0f6; color: var(--primary); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.article-title { font-size: 24px; font-weight: 500; line-height: 1.25; margin: 4px 0 16px; }
.article-content { font-size: 15.5px; line-height: 1.75; color: #2b3543; }
.article-content h2 { font-size: 18px; font-weight: 600; margin: 24px 0 10px; text-align: left; }
.article-content p { margin: 0 0 15px; text-align: justify; text-justify: inter-word; hyphens: auto; }
.linkedin-block { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
.li-card { background: #f7f9fc; border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin: 8px 0; }
.li-card h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.li-text { font-size: 13px; white-space: pre-wrap; line-height: 1.5; }
.copy-btn { font-size: 11px; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--border); background: #fff; cursor: pointer; }

.decision-panel { padding: 26px 22px; position: relative; }
.decision-panel h3 { margin: 0 0 14px; }
.final-close { position: absolute; top: 14px; right: 14px; }
.fc-summary { margin-bottom: 12px; }
.compliance-note { font-size: 13px; color: var(--muted); background: #f7f9fc; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; white-space: pre-wrap; max-height: 160px; overflow-y: auto; }
.decision-actions { display: flex; flex-direction: column; gap: 10px; }
.decision-row { display: flex; gap: 8px; flex-wrap: wrap; }
.decision-row .btn { flex: 1; font-size: 12.5px; padding: 8px 6px; }
.dir-target { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,26,34,.55); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
.modal-card { background: var(--surface); border-radius: 16px; padding: 26px; max-width: 400px; width: 100%; }
.modal-card h2 { margin: 0 0 8px; }
.modal-card input { margin-top: 12px; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #1f2733; color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px; z-index: 80; box-shadow: 0 8px 24px rgba(0,0,0,.25); }

/* ---------- Hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  .ws .char, .ws .char-head, .ws .char-arm, .ws .screen, .attn,
  .cat, .cat-legs, .flow-step.active .flow-dot {
    animation: none !important;
  }
  .cat-a { left: 8%; } .cat-b { left: 70%; }
}

/* ---------- Kalıcı ajan paneli ek stilleri ---------- */
.step-done { align-self: center; font-size: 12px; color: var(--muted); background: #eef1f5; border-radius: 999px; padding: 4px 12px; margin: 4px 0; }
.cand-card.selected { border-color: var(--s-done); background: #eafaf3; }
.cand-card.clickable { cursor: pointer; }
.cand-card:not(.clickable) { cursor: default; }
.chat-image { width: 100%; min-height: 120px; border-radius: 10px; background: #0f1b2e; color: #7f97b0; display: flex; align-items: center; justify-content: center; font-size: 12px; overflow: hidden; }
.chat-image img { width: 100%; height: auto; display: block; image-rendering: auto; }

/* Aday seçim butonu */
.cand-pick { margin-top: 8px; width: 100%; padding: 7px; font-size: 13px; }

/* ---------- Kayıt panosu (mantar pano) ---------- */
.log-panel {
  position: fixed; top: 0; right: 0; height: 100%;
  width: 380px; max-width: 92vw;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 60%),
    repeating-linear-gradient(45deg, rgba(120,80,40,.06) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #C99A63, #B9884E);
  border-left: 4px solid #7C5A34;
  box-shadow: -8px 0 30px rgba(31,39,51,.18);
  display: flex; flex-direction: column; z-index: 45;
  animation: slideIn .2s ease;
}
.log-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: rgba(90,64,34,.35);
  border-bottom: 2px solid #7C5A34;
}
.log-title { font-weight: 700; color: #FDF6E9; text-shadow: 0 1px 2px rgba(60,40,20,.5); }
.log-head .btn-icon { color: #FDF6E9; }
.log-body { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.log-empty { color: #FBF3E4; font-size: 13px; line-height: 1.5; background: rgba(90,64,34,.3); padding: 12px; border-radius: 8px; }

/* Her olay: mantar panoya iğnelenmiş küçük kağıt not */
.log-note {
  position: relative;
  background: #FEFBEF; border-radius: 3px;
  padding: 9px 12px 10px; padding-left: 62px;
  box-shadow: 1px 3px 5px rgba(60,40,20,.28);
  border: 1px solid #EDE2C4;
}
.log-note:nth-child(even) { transform: rotate(-.5deg); }
.log-note:nth-child(odd)  { transform: rotate(.4deg); }
.log-pin { position: absolute; top: 7px; left: 26px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #c0392b); box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.log-time { position: absolute; left: 8px; top: 20px; font-family: var(--mono); font-size: 11px; font-weight: 700; color: #8A6D45; }
.log-actor { font-weight: 700; font-size: 13px; }
.log-action { font-size: 13px; color: #4A3B27; line-height: 1.35; }
.log-detail { font-size: 11.5px; color: #7B6748; margin-top: 3px; }
@media (max-width: 480px) { .log-panel { width: 100%; } }

/* ---------- Ofis içi tıklanabilir objeler (Pano + Dosya dolabı) ---------- */
.office-obj { position: relative; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 2px; pointer-events: auto; z-index: 4; transition: transform .12s, filter .15s; }
.office-obj:hover { transform: translateY(-3px); filter: drop-shadow(0 5px 7px rgba(60,40,20,.3)); }
.office-obj:focus-visible { outline: 2px solid #2E6FD6; outline-offset: 3px; border-radius: 4px; }
.office-obj svg { image-rendering: pixelated; shape-rendering: crispEdges; display: block; }
.obj-label { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: #5A4326;
  background: rgba(255,251,239,.85); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.office-obj.board svg { width: 54px; }
/* Dolap: ızgaranın (z-index:2) ÜSTÜNDE dursun ki tıklanabilsin */
/* Arşiv dolabı: sol koridorun ALT ucunda, dinlenme şeridinin yanında durur.
   (Eskiden sol üstteydi ve bölge başlığının üstüne biniyordu.) */
.floor-obj { position: absolute; z-index: 6; }
.floor-obj.cabinet { bottom: 4px; left: 12px; width: 36px; }
.floor-obj.cabinet svg { width: 36px; }
@media (max-width: 900px) { .floor-obj.cabinet { width: 26px; bottom: 2px; left: 4px; } .floor-obj.cabinet svg { width: 26px; } }

/* ---------- Aktif iş çubuğu ---------- */
.active-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 18px; background: #FFF7E9; border-bottom: 1px solid #E7D4B8; flex-wrap: wrap;
}
.active-info { display: flex; align-items: center; gap: 9px; min-width: 0; }
.active-dot { width: 9px; height: 9px; border-radius: 50%; background: #2E6FD6; flex: none;
  box-shadow: 0 0 0 3px rgba(46,111,214,.18); }
.active-title { font-weight: 700; font-size: 13.5px; color: #3a2c1a; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.active-status { font-size: 11px; font-weight: 700; color: #fff; padding: 2px 9px; border-radius: 999px; }
.active-actions { display: flex; gap: 7px; }
.btn.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.btn.danger { color: #9A3B3B; }
.btn.danger:hover { background: #fbeaea; border-color: #e6bcbc; }
.manage-row .btn { flex: 1; font-size: 12.5px; padding: 8px 6px; }

/* ---------- Dosya dolabı paneli ---------- */
.cabinet-panel {
  position: fixed; top: 0; right: 0; height: 100%;
  width: 400px; max-width: 92vw;
  background: linear-gradient(180deg, #F4F6F9, #E8ECF1);
  border-left: 4px solid #6C7683;
  box-shadow: -8px 0 30px rgba(31,39,51,.18);
  display: flex; flex-direction: column; z-index: 46;
  animation: slideIn .2s ease;
}
.cabinet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: #6C7683; color: #fff;
}
.cabinet-title { font-weight: 700; }
.cabinet-head .btn-icon { color: #fff; }
.cabinet-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.cab-empty { color: var(--muted); font-size: 13px; line-height: 1.55; padding: 16px;
  background: #fff; border-radius: 10px; border: 1px solid var(--border); }
.cab-group-h { font-weight: 700; font-size: 12.5px; margin-bottom: 8px; letter-spacing: .3px; }
.cab-count { font-weight: 700; opacity: .7; }
.cab-file { background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.cab-file:hover { border-color: var(--primary); box-shadow: 0 3px 10px rgba(46,111,214,.12); }
.cab-file.current { border-color: #2E6FD6; background: #f5f9ff; }
.cab-file-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cab-file-title { font-weight: 700; font-size: 13.5px; color: #2b3543; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cab-badge { font-size: 10px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.cab-file-sub { font-size: 12px; color: var(--muted); margin: 3px 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-file-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); }
.cab-fc { color: #157a56; }
.cab-open { margin-left: auto; color: var(--primary); font-weight: 700; }
@media (max-width: 480px) { .cabinet-panel { width: 100%; } .active-title { max-width: 60vw; } }

/* Uyum riski uyarısı (kara liste: TR kurum olumsuz özne) — belirgin kırmızı */
.tr-risk-warn { background: #FDE8E8; border: 1px solid #B03A3A; border-left: 4px solid #B03A3A;
  color: #7C2E2A; border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 13px; }

/* Mekanik stil kontrolü uyarıları — engellemez, sadece bilgilendirir */
.style-warn { background: #FFF4DC; border: 1px solid #E0A32E; border-left: 4px solid #E0A32E;
  color: #7A5A12; border-radius: 8px; padding: 8px 12px; margin-top: 8px; font-size: 12px; }
.style-warn ul { margin: 4px 0 0 18px; padding: 0; }
.style-warn li { margin: 2px 0; }

/* Editoryal metadata özeti — kaynak/doğrulama/köken/yazar/description.
   Bilgilendiricidir; hiçbir kararı engellemez. Mevcut kart diliyle aynı. */
.meta-summary { background: #F7F5EF; border: 1px solid #DCD7C9; border-radius: 8px;
  padding: 8px 12px; margin-top: 8px; font-size: 12px; }
.meta-row { display: grid; grid-template-columns: 116px 1fr; gap: 8px;
  padding: 3px 0; align-items: start; }
.meta-row + .meta-row { border-top: 1px dashed #E3DFD2; }
.meta-key { color: #7A756A; font-weight: 600; }
.meta-val { color: #3A3730; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .meta-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Fact-check önem dereceleri: kritik kırmızı, orta amber, düşük gri */
.fc-box.fc-red { background: #FDE8E8; color: #B03A3A; }
.issue-item.sev-kritik { border-left: 4px solid #B03A3A; background: #FDF0F0; }
.issue-item.sev-orta { border-left: 4px solid #E0A32E; }
.issue-item.sev-dusuk { border-left: 4px solid #B4B2A9; opacity: 0.85; }
.sev-badge { display: inline-block; font-size: 10px; font-weight: 800; border-radius: 4px;
  padding: 1px 6px; margin-right: 6px; vertical-align: middle; }
.sev-badge.sev-kritik { background: #B03A3A; color: #fff; }
.sev-badge.sev-orta { background: #E0A32E; color: #fff; }
.sev-badge.sev-dusuk { background: #B4B2A9; color: #fff; }

/* Aday kartında haber tarihi */
.cand-date { float: right; font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 8px; }

/* Hata çubuğu: ajan hatası/zaman aşımı net görünür (sessiz takılma yok) */
.error-bar { display: flex; align-items: center; gap: 10px; margin: 4px 14px;
  background: #FDE8E8; border: 1px solid #B03A3A; border-left: 4px solid #B03A3A;
  color: #7C2E2A; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; }
/* BLOKLAMAYAN uyarı (amber): akış devam ediyor, "Yeniden dene" gösterilmez.
   Örn. derin araştırma süre bütçesine takıldı ve kısmi brifing hazırlandı. */
.error-bar.warn { background: #FFF4DC; border-color: #E0A32E;
  border-left-color: #E0A32E; color: #7A5A15; }

/* İçerik tipi seçici (konu kutusunun yanında; tipler config'ten gelir) */
#type-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}
#type-select:focus { outline: 2px solid #cfe0fb; border-color: var(--primary); }

/* Dosya dolabında içerik tipi rozeti */
.cab-type {
  font-size: 10px; font-weight: 700; color: #4a5568;
  background: #e8ecf2; border: 1px solid #cfd6e0;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none;
  margin-right: 6px;
}

/* Görev planı özeti (aktif iş çubuğunda; kısa operasyonel bilgi) */
.active-plan {
  font-size: 11px; color: var(--muted);
  background: #f0f2f5; border-radius: 999px; padding: 3px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 46vw;
}

/* ---- Proposal-first: konu alanı, tip açıklaması, öneri kartları ---- */
/* (.topic-field / .type-field kaldırıldı: üst bant artık tek grid,
   .tb-cell sabit satır yüksekliğiyle hizayı garanti ediyor — bkz "ÜST
   KONTROL BANDI". .field-label ve .field-hint tanımları da orada.) */

.prop-card { display: block; }
.prop-angle, .prop-why { font-size: 12px; color: var(--text); margin: 4px 0; }
.prop-findings { font-size: 12px; color: var(--muted); margin: 4px 0; }
.prop-findings ul { margin: 3px 0 0 16px; padding: 0; }
.prop-findings li { margin: 2px 0; }
.prop-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.prop-tag {
  font-size: 10px; font-weight: 700; color: #4a5568;
  background: #eef1f5; border: 1px solid #d7dde5;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.prop-evidence { font-size: 11px; color: var(--muted); margin-top: 5px; font-style: italic; }
.prop-pick { margin-top: 8px; }
.cand-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px #cfe0fb inset; }

.prop-form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
  border-top: 1px solid var(--border); padding-top: 10px; }
.prop-form.hidden { display: none; }
.prop-form select {
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px;
  font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text);
}
#btn-create-content { margin-top: 4px; }

/* ---------------------------------------------------------------------------
   Sosyal Medya Uzmanı paneli (yayın sonrası kişisel LinkedIn paylaşımı)
   NOT: burada hiçbir kimlik bilgisi gösterilmez; yalnızca "bağlı mı" durumu.
   --------------------------------------------------------------------------- */
.li-conn { font-size: 12.5px; line-height: 1.5; border-radius: 10px; padding: 9px 11px; margin: 8px 0; }
.li-conn.ok { background: #E9F7F1; border: 1px solid #1D9E75; border-left: 4px solid #1D9E75; }
.li-conn.warn { background: #FFF4DC; border: 1px solid #E0A32E; border-left: 4px solid #E0A32E; }

.li-options { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.li-option { display: flex; gap: 9px; align-items: flex-start; cursor: pointer;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.li-option:hover { border-color: #2A6FA8; }
.li-option.selected { border-color: #2A6FA8; box-shadow: 0 0 0 2px rgba(42,111,168,.18); background: #F5F9FD; }
.li-option input { margin-top: 3px; }
.li-option-main { flex: 1; min-width: 0; }
.li-option-head { font-weight: 700; font-size: 13px; color: #2A3B4D; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.li-tag { font-weight: 500; font-size: 11px; color: #4B6076; background: #E8EFF6; border-radius: 6px; padding: 1px 7px; }
.li-option-text { font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; margin-top: 5px; color: #33404D; }

.li-editor { margin: 10px 0; }
.li-editor textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  line-height: 1.55; padding: 10px; border: 1px solid var(--border); border-radius: 10px; resize: vertical; }
.li-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.li-meta .li-over, .li-over { color: #B03A3A; font-weight: 700; }
.li-preview { margin-top: 6px; font-size: 12px; color: var(--muted); }
.li-preview summary { cursor: pointer; }
.li-final { white-space: pre-wrap; font: inherit; font-size: 12.5px; line-height: 1.55;
  background: #F7F9FC; border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin: 6px 0; color: #2A3B4D; }
.li-final-confirm { background: #FFFDF6; border-color: #E0A32E; }
.hint-sm { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }

/* ---------------------------------------------------------------------------
   Muhasebeci paneli — ajan bazlı harcama defteri
   Bugün yalnızca gösterim; ileride bütçe uyarısı ve dönemsel rapor eklenecek.
   --------------------------------------------------------------------------- */
.acc-table { background: #F7F9FC; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.acc-head { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.acc-row { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(60px, 2fr) auto; gap: 4px 10px; align-items: center; padding: 6px 0; border-top: 1px solid #E8ECF2; }
.acc-row:first-of-type { border-top: none; }
.acc-name { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.acc-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.acc-bar { height: 8px; background: #E4E9F0; border-radius: 999px; overflow: hidden; }
.acc-bar span { display: block; height: 100%; border-radius: 999px; }
.acc-num { font-family: var(--mono); font-size: 12px; text-align: right; white-space: nowrap; }
.acc-sub { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.acc-act { padding: 6px 0; border-top: 1px solid #E8ECF2; font-size: 12.5px; }
.acc-act:first-of-type { border-top: none; }
.acc-ref { font-size: 11px; word-break: break-all; }
.acc-ref a { color: var(--primary); }

/* KISA EKRAN (yükseklik <= 860px, ör. 1366x768 dizüstü): ofis TEK EKRANA
   sığsın diye sahnenin GENEL ölçeği düşer. Yerleşim mantığı, bölge sırası,
   akış ve z-index düzeni AYNI kalır; yalnız mevcut boyut değişkenleri
   küçülür. Öğeler tek tek yeniden konumlandırılmaz, hiçbiri üst üste gelmez
   (flex satırı aynı kuralla akmaya devam eder). Böylece transform ölçeğinin
   tek başına yapması gereken küçültme azalır ve metin okunur kalır. */
@media (min-width: 900px) and (max-height: 860px) {
  .window-wall { height: 78px; }
  .wall-band { padding: 8px 20px 6px; }
  .ws-scene { max-width: 132px; }
  .zone-row .ws { max-width: 152px; min-width: 96px; }
  .ws-grid { gap: 8px; }
  .floor { --lounge: 34px; padding-top: 10px; }
  .legend { margin-top: 8px; padding: 6px 14px; gap: 5px; }
  .office { padding-bottom: 6px; }
  /* Plakalar AYNI yükseklikte olsun: uzun ad ("Sosyal Medya Uzmanı") dar
     kartta fazladan satıra taşınca .zone-row'un flex-end hizası o kartı
     komşularından yukarı itiyordu. Sabit taban yükseklik hepsini aynı
     hizaya oturtur; kimse yeniden konumlandırılmaz. */
  .ws-label { padding: 4px 6px 5px; min-height: 64px; }
  .ws-name { font-size: 11.5px; }
  .ws-role { font-size: 9.5px; }
  .ws-status { font-size: 10px; margin-top: 3px; }
}

/* ==========================================================================
   BAĞIMSIZ DOĞRULAMA kartları + revizyon diff ekranı
   ========================================================================== */
.vf-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.vf-filter { border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 3px 10px; font-size: 11.5px; cursor: pointer;
  color: var(--muted); }
.vf-filter.on { background: var(--text); color: var(--surface);
  border-color: var(--text); }
.v-card { border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 10px; padding: 10px 12px; margin: 8px 0;
  background: var(--surface); font-size: 12.5px; }
.v-card.sev-critical { border-left-color: #C43C3C; }
.v-card.sev-high { border-left-color: #D98324; }
.v-card.sev-medium { border-left-color: #C9A227; }
.v-card.sev-low, .v-card.sev-informational { border-left-color: #8FA3B8; }
.v-card.decided { opacity: 0.75; }
.v-card-head { display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; flex-wrap: wrap; }
.v-class { font-weight: 700; font-size: 11.5px; }
.v-loc { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.v-decided { color: #2E7D46; font-size: 11.5px; font-weight: 600; }
.v-claim, .v-found { margin: 4px 0; }
.v-expl { color: var(--muted); margin: 4px 0; }
.v-evidence { border-left: 3px solid var(--border); padding-left: 8px;
  margin: 6px 0; font-style: italic; color: var(--muted);
  overflow-wrap: anywhere; }
.v-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.v-actions select { max-width: 200px; }
.v-actions textarea { min-height: 52px; font-size: 12px; }
.v-actions .hidden { display: none; }
.rd-item { border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin: 8px 0; font-size: 12.5px;
  background: var(--surface); }
.rd-head { font-family: var(--f-mono); font-size: 11px; color: var(--muted);
  margin-bottom: 6px; }
.rd-old { background: rgba(196, 60, 60, 0.08); color: #A03030;
  padding: 4px 8px; border-radius: 6px; margin: 3px 0;
  text-decoration: line-through; overflow-wrap: anywhere; }
.rd-new { background: rgba(46, 125, 70, 0.10); color: #21633A;
  padding: 4px 8px; border-radius: 6px; margin: 3px 0;
  overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .v-card-head { gap: 5px; }
  .v-actions select { max-width: 100%; }
}