/* ── Cebi AI Ads — Chainlit UI Özelleştirmeleri ─────────────────────────── */

/* Primary renk: Çebi Medya altın (#F2C52A = HSL 47 88% 56%)
   --primary değişkeni gönder butonu, profil avatarı ve tüm primary elementleri etkiler */
:root,
.dark {
  --primary: 47 88% 56%;
  --primary-foreground: 0 0% 0%;
}

/* Gönder butonu arka planını zorla (bazı Chainlit versiyonlarında inline stil override eder) */
button[aria-label="Send message"],
button[aria-label="Mesaj gönder"] {
  background-color: hsl(47, 88%, 56%) !important;
  color: #000 !important;
}

button[aria-label="Send message"]:hover,
button[aria-label="Mesaj gönder"]:hover {
  background-color: hsl(47, 88%, 48%) !important;
}

/* Profil avatar arka planı — Chainlit bg-primary sınıfından geliyor,
   --primary override yeterli, ama ek güvence için: */
.bg-primary {
  background-color: hsl(47, 88%, 56%) !important;
}
.text-primary-foreground {
  color: #000 !important;
}

/* README sekmesini gizle — kullanıcı yönlendirmemek için kaldırıldı.
   Chainlit React versiyonu button[aria-label*="readme"] kullanır. */
a[href$="/readme"],
a[href*="readme"],
nav a[href$="/readme"],
button[aria-label*="Readme" i],
button[aria-label*="readme" i],
[data-testid*="readme" i],
[role="dialog"] [aria-label*="readme" i] {
  display: none !important;
}

/* Faz 36e.13 — Header link iconları (cebimedya.com favicon) küçük olsun.
   Chainlit default img boyutu büyük; favicon 16x16 olmalı. */
a[href*="cebimedya.com"] img,
header a[target="_blank"] img[src*="favicon" i],
header a[target="_blank"] img[src*="cebimedya" i],
nav a[target="_blank"] img[src*="favicon" i] {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  object-fit: contain !important;
}

/* Watermark (altta çıkan uyarı metni) daha soluk göster */
.text-muted-foreground.text-xs.italic {
  opacity: 0.6;
}

/* Faz 36e.13 — Welcome/empty state Cebi Medya logosu küçült.
   Chainlit React empty state'inde framework default ~h-32 (128px) çok büyük.
   Geniş selector: src URL "logo" içeren tüm img'leri + bilinen Chainlit class
   pattern'lerini kapsar. Sidebar logo'sunu (small) korur — small selectorlar
   #user-nav-button img, header img zaten zaten <40px.
   En geniş kural: chat boş alanındaki büyük logo'ları kapsa. */
img[src*="logo_dark"],
img[src*="logo_light"],
img[src*="/logo."],
img[src$="logo.svg"],
img[src$="logo.png"],
img[alt="Cebi AI Ads" i],
img[alt*="logo" i],
.welcome-screen img,
.welcome img,
[class*="WelcomeScreen"] img,
[class*="welcome-message"] img,
.hero img,
.assistant-logo,
#root main img:not([alt="avatar" i]):not([alt*="user" i]) {
  max-height: 64px !important;
  width: auto !important;
  height: auto !important;
}

/* Profil avatarı / küçük header iconları için override'ı geri al */
#user-nav-button img,
[role="menuitem"] img,
header img,
.MuiAvatar-root img {
  max-height: none !important;
}

/* ── Kenar çubuğu widget'ları: entegrasyon kartları + kredi göstergesi ── */
#cebi-sidebar-widgets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;            /* thread listesinin altına yapışsın (flex-column'da) */
  padding: 10px 10px 8px;
  border-top: 1px solid hsl(var(--border, 0 0% 80%) / 0.6);
  font-size: 12px;
  color: hsl(var(--foreground, 0 0% 15%));
  /* Faz 36e.41 — Sticky pin: JS aside'a appendChild eder; scroll-area-viewport'a
   * yanlışlıkla düşse bile thread'lerin altında kaybolmasın. */
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: hsl(var(--background, 0 0% 100%));
}

#cebi-sidebar-widgets .cebi-cards-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin-bottom: 6px;
}

#cebi-sidebar-widgets .cebi-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

#cebi-sidebar-widgets .cebi-card {
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 8px;
  border-radius: 8px;
  border: 1px solid hsl(var(--border, 0 0% 80%) / 0.7);
  background: hsl(var(--muted, 0 0% 96%) / 0.5);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}
#cebi-sidebar-widgets .cebi-card:hover {
  background: hsl(var(--accent, 47 88% 56%) / 0.18);
  border-color: hsl(var(--primary, 47 88% 56%) / 0.6);
}
#cebi-sidebar-widgets .cebi-card-disabled,
#cebi-sidebar-widgets .cebi-card-disabled:hover {
  cursor: not-allowed;
  opacity: 0.5;
  background: hsl(var(--muted, 0 0% 96%) / 0.3);
  border-color: hsl(var(--border, 0 0% 80%) / 0.5);
}
#cebi-sidebar-widgets .cebi-card-title {
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
#cebi-sidebar-widgets .cebi-card-sub {
  font-size: 11px;
  opacity: 0.75;
}

/* Alt panel (servis listesi) */
#cebi-sidebar-widgets .cebi-subpanel {
  margin-top: 8px;
  border: 1px solid hsl(var(--border, 0 0% 80%) / 0.7);
  border-radius: 8px;
  background: hsl(var(--muted, 0 0% 96%) / 0.55);
  overflow: hidden;
}
#cebi-sidebar-widgets .cebi-subpanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid hsl(var(--border, 0 0% 80%) / 0.5);
}
#cebi-sidebar-widgets .cebi-subpanel-close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.7;
}
#cebi-sidebar-widgets .cebi-subpanel-close:hover { opacity: 1; }
#cebi-sidebar-widgets .cebi-subpanel-body {
  padding: 4px 8px 6px;
  max-height: 240px;
  overflow-y: auto;
}
#cebi-sidebar-widgets .cebi-svc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}
#cebi-sidebar-widgets .cebi-svc-main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#cebi-sidebar-widgets .cebi-svc-main span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cebi-sidebar-widgets .cebi-svc-state {
  font-size: 11px;
  opacity: 0.7;
  white-space: nowrap;
}
#cebi-sidebar-widgets .cebi-svc-sub {
  font-size: 10px;
  opacity: 0.6;
  padding: 0 0 3px 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cebi-sidebar-widgets .cebi-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
#cebi-sidebar-widgets .cebi-dot.on { background: #22c55e; }
#cebi-sidebar-widgets .cebi-dot.off { background: #9ca3af; }
#cebi-sidebar-widgets .cebi-subpanel-foot {
  padding: 6px 8px;
  border-top: 1px solid hsl(var(--border, 0 0% 80%) / 0.5);
  text-align: right;
}
#cebi-sidebar-widgets .cebi-manage-link {
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--primary, 47 88% 56%));
  text-decoration: none;
  cursor: pointer;
}
#cebi-sidebar-widgets .cebi-manage-link:hover { text-decoration: underline; }

/* Kredi göstergesi (en alt) */
#cebi-sidebar-widgets .cebi-credit-pill {
  display: block;
  margin-top: 2px;
  padding: 7px 10px;
  border-radius: 8px;
  background: hsl(var(--accent, 47 88% 56%) / 0.16);
  border: 1px solid hsl(var(--primary, 47 88% 56%) / 0.4);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s ease;
}
#cebi-sidebar-widgets .cebi-credit-pill:hover {
  background: hsl(var(--accent, 47 88% 56%) / 0.3);
}

/* Faz 36e.41 — Widget'lar HER EKRANDA kapalı (masaüstü + mobil). JS'te
 * ensureWidgets her zaman null döner; bu CSS şeridi defense-in-depth (cache'den
 * eski JS gelirse de gizler). */
#cebi-sidebar-widgets { display: none !important; }