/* ============================================================
   Cebi Medya — Chainlit Tema Override

   Renk token'lari theme.json tarafindan yonetilir.
   Bu dosya SADECE layout, typografi ve komponent stillerini
   override eder. Hard-coded renkler YOKTUR — her sey
   Chainlit'in CSS custom properties sistemi uzerinden calisir.
   ============================================================ */

/* --- Font --- */
body {
  font-family: 'Inter', var(--font-sans), sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Selection rengi (cebimedya.com ile ayni gold) --- */
::selection {
  background: hsl(47 95% 54% / 0.35) !important;
  color: inherit !important;
}

/* ============================================================
   LAYOUT — ChatGPT benzeri ortalanmis kolon
   ============================================================ */

/* Ana sohbet icerik alani — ortalanmis, max-width */
main > div,
div[class*="chat-body"],
div[class*="messages-container"],
section[class*="chat"] {
  max-width: 860px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Mesaj listesi icindeki her mesaj */
div[class*="step-container"],
div[class*="message-container"] {
  max-width: 100%;
}

/* Composer (yazma alani) ayni kolon genisligi */
div[class*="composer"],
div[class*="input-container"],
footer,
div[class*="chat-input"] {
  max-width: 860px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* ============================================================
   COMPOSER — ChatGPT benzeri input bar
   ============================================================ */

/* Composer wrapper */
div[class*="composer"] {
  border-radius: 16px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: visible;
}

div[class*="composer"]:focus-within {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15);
}

/* Textarea */
div[class*="composer"] textarea {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: hsl(var(--foreground)) !important;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  min-height: 24px;
  max-height: 200px;
  padding: 12px 16px;
}

div[class*="composer"] textarea::placeholder {
  color: hsl(var(--muted-foreground)) !important;
}

/* Send butonu */
div[class*="composer"] button[class*="send"],
div[class*="composer"] button[type="submit"],
div[class*="composer"] button:has(svg[class*="send"]),
div[class*="composer"] button:last-of-type {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: none !important;
  border-radius: 10px !important;
  min-width: 36px;
  min-height: 36px;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}

div[class*="composer"] button[class*="send"]:hover,
div[class*="composer"] button[type="submit"]:hover {
  background: hsl(47 95% 46%) !important;
  transform: scale(1.03);
}

/* Composer icindeki butonlar overflow tasmasi onleme */
div[class*="composer"] > div {
  overflow: visible !important;
  display: flex;
  align-items: flex-end;
}

/* Attachment butonu */
div[class*="composer"] button[class*="attach"],
div[class*="composer"] button:first-of-type:not([type="submit"]) {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground)) !important;
}

div[class*="composer"] button[class*="attach"]:hover {
  color: hsl(var(--foreground)) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

/* Sidebar genel — net border-right */
aside,
div[data-sidebar],
nav[class*="sidebar"],
div[class*="Sidebar"],
div[class*="sidebar"] {
  background: hsl(var(--sidebar-background)) !important;
  border-right: 1px solid hsl(var(--border)) !important;
}

/* Sidebar header */
aside header,
div[class*="sidebar"] header {
  border-bottom-color: hsl(var(--sidebar-border)) !important;
}

/* --- Sidebar Toggle Butonu --- */
#sidebar-trigger-button,
button[class*="SidebarTrigger"],
button[class*="sidebar-trigger"] {
  color: hsl(var(--foreground)) !important;
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 8px !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
  opacity: 1 !important;
}

#sidebar-trigger-button:hover,
button[class*="SidebarTrigger"]:hover,
button[class*="sidebar-trigger"]:hover {
  background: hsl(var(--accent)) !important;
  border-color: hsl(var(--primary)) !important;
}

#sidebar-trigger-button:focus-visible,
button[class*="SidebarTrigger"]:focus-visible,
button[class*="sidebar-trigger"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3) !important;
  border-color: hsl(var(--primary)) !important;
}

#sidebar-trigger-button svg,
button[class*="SidebarTrigger"] svg,
button[class*="sidebar-trigger"] svg {
  width: 18px !important;
  height: 18px !important;
  color: inherit !important;
  opacity: 1 !important;
}

/* New Chat butonu — ChatGPT benzeri: notr, ince border */
button[class*="new"],
button[id*="new-chat"],
a[class*="new-thread"] {
  background: transparent !important;
  color: hsl(var(--sidebar-foreground)) !important;
  border: 1px solid hsl(var(--sidebar-border)) !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: background 0.15s, border-color 0.15s;
}

button[class*="new"]:hover,
button[id*="new-chat"]:hover {
  background: hsl(var(--sidebar-accent)) !important;
  border-color: hsl(var(--sidebar-foreground) / 0.3) !important;
}

/* Sohbet listesi itemlari — notr, okunaklı */
a[class*="thread"],
div[class*="threadList"] a,
li[class*="thread"] a {
  border-radius: 8px !important;
  transition: background 0.15s !important;
  color: hsl(var(--sidebar-foreground)) !important;
  border-left: 3px solid transparent !important;
  padding-left: 10px !important;
}

a[class*="thread"]:hover,
div[class*="threadList"] a:hover {
  background: hsl(var(--sidebar-accent)) !important;
  color: hsl(var(--sidebar-accent-foreground)) !important;
}

/* Aktif sohbet — ince sari sol cizgi + hafif vurgulu bg */
a[class*="active"],
a[aria-current="page"],
li[class*="active"] a {
  background: hsl(var(--sidebar-accent)) !important;
  border-left: 3px solid hsl(var(--primary)) !important;
  color: hsl(var(--sidebar-accent-foreground)) !important;
  font-weight: 500 !important;
}

/* Sidebar icerisindeki tum buton/link metinleri — ASLA sari olmasin */
aside a,
aside button,
aside span,
aside p,
div[data-sidebar] a,
div[data-sidebar] button,
div[data-sidebar] span,
nav[class*="sidebar"] a,
nav[class*="sidebar"] button {
  color: hsl(var(--sidebar-foreground)) !important;
}

/* Sidebar grup basliklari (Yesterday, Today vb.) */
aside h3,
aside h4,
div[data-sidebar] h3,
div[data-sidebar] h4,
div[class*="threadList"] h3,
div[class*="threadList"] h4 {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* --- Thread item icindeki gradient overlay (garip sekil/renk blogu) --- */
/* Chainlit, thread basliklarinin sagina 40px gradient koyar.
   sidebar-background ile uyumsuzlukta gorsel artifact olusturur.
   Kaldiriyoruz — truncate zaten overflow'u halleder. */
[data-sidebar] button[data-active] > div:last-of-type:not(#thread-options),
aside li button > div[class*="absolute"]:not(#thread-options),
aside li a > div > button > div[class*="absolute"]:not(#thread-options) {
  background: none !important;
  background-image: none !important;
}

/* Thread item icindeki "..." menu container — hover'da gorunsun,
   aksi halde tamamen gizle (ghost artifact onleme) */
[data-sidebar] #thread-options,
aside #thread-options {
  opacity: 0 !important;
  background: hsl(var(--sidebar-accent)) !important;
  color: hsl(var(--muted-foreground)) !important;
  transition: opacity 0.15s !important;
}

/* Hover'da goster */
[data-sidebar] li:hover #thread-options,
aside li:hover #thread-options,
[data-sidebar] button:hover > * > #thread-options {
  opacity: 1 !important;
}

/* "No threads found" kutusu */
div[class*="empty"],
div[class*="no-thread"],
p[class*="empty"] {
  color: hsl(var(--muted-foreground)) !important;
  background: hsl(var(--sidebar-accent)) !important;
  border-radius: 8px;
}

/* --- Sidebar: Tailwind'in text-sidebar-primary override'i --- */
/* Chainlit compiled CSS'inde .text-sidebar-primary = sarı olabilir.
   Sidebar icindeki TUM text-* class'lari notr renk kullanmali. */
aside [class*="text-sidebar-primary"],
[data-sidebar] [class*="text-sidebar-primary"] {
  color: hsl(var(--sidebar-foreground)) !important;
}

/* SidebarMenuButton aktif state — Tailwind data-[active=true] */
aside button[data-active="true"],
[data-sidebar] button[data-active="true"] {
  background: hsl(var(--sidebar-accent)) !important;
  color: hsl(var(--sidebar-accent-foreground)) !important;
  font-weight: 500 !important;
}

/* SidebarMenuButton icindeki span'lar — notr renk */
aside button span,
aside button .truncate,
[data-sidebar] button span,
[data-sidebar] button .truncate {
  color: inherit !important;
}

/* SidebarGroupLabel — "Today", "Yesterday" vb. */
aside [class*="SidebarGroupLabel"],
[data-sidebar] [class*="SidebarGroupLabel"],
aside [data-sidebar-group-label],
[data-sidebar] [data-sidebar-group-label] {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding-top: 12px !important;
}

/* User menu / footer — notr */
aside footer,
aside footer button,
aside footer span,
[data-sidebar] footer,
[data-sidebar] footer button {
  color: hsl(var(--sidebar-foreground)) !important;
}

/* ============================================================
   BUTONLAR (genel)
   ============================================================ */

button[class*="primary"],
button[type="submit"]:not(div[class*="composer"] button) {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: background 0.15s;
}

button[class*="primary"]:hover {
  background: hsl(47 95% 46%) !important;
}

/* Login butonlari */
form button[type="submit"] {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 10px 24px !important;
  transition: background 0.15s, box-shadow 0.15s;
}

form button[type="submit"]:hover {
  background: hsl(47 95% 46%) !important;
  box-shadow: 0 0 20px -5px hsl(47 95% 54% / 0.4);
}

/* ============================================================
   MESAJLAR
   ============================================================ */

/* Mesaj containerlar */
div[class*="step-container"] {
  border-radius: 12px !important;
}

/* ============================================================
   HEADER
   ============================================================ */

header,
div[class*="header"] {
  border-bottom-color: hsl(var(--border)) !important;
}

/* Logo boyutlandirma */
img[class*="logo"],
img[alt*="logo"],
img[alt*="Logo"],
header img {
  max-height: 44px !important;
  width: auto !important;
}

/* ============================================================
   MARKDOWN / WELCOME SCREEN
   ============================================================ */

/* Markdown basliklari — primary renk */
div[class*="markdown"] h1,
div[class*="markdown"] h2,
div[class*="markdown"] h3 {
  color: hsl(var(--primary)) !important;
  font-weight: 700;
}

div[class*="markdown"] h1 {
  font-size: 1.5rem;
}

div[class*="markdown"] h2 {
  font-size: 1.25rem;
}

div[class*="markdown"] h3 {
  font-size: 1.1rem;
}

/* Markdown strong */
div[class*="markdown"] strong {
  color: hsl(var(--foreground)) !important;
  font-weight: 600;
}

/* Blockquote */
div[class*="markdown"] blockquote {
  border-left: 3px solid hsl(var(--primary)) !important;
  padding-left: 12px;
  color: hsl(var(--muted-foreground)) !important;
}

/* ============================================================
   TOOL CALL / CHAIN OF THOUGHT
   ============================================================ */

details,
div[class*="tool"],
div[class*="chainOfThought"] {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 8px !important;
  background: hsl(var(--card)) !important;
}

details summary {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.875rem;
}

/* ============================================================
   CODE BLOCKS
   ============================================================ */

pre:not(.hljs) {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 8px !important;
}

code:not(.hljs):not(pre code) {
  background: hsl(var(--muted)) !important;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.875em;
}

/* ============================================================
   LINKS
   ============================================================ */

a:not(aside a):not(nav a):not(header a) {
  color: hsl(var(--primary)) !important;
  text-decoration: none;
}

a:not(aside a):not(nav a):not(header a):hover {
  text-decoration: underline;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: hsl(var(--border));
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-foreground));
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

/* Login form container */
div[class*="auth"] img,
div[class*="login"] img,
form img {
  max-height: 56px !important;
  width: auto !important;
  margin-bottom: 12px;
}

/* Login input'lari */
form input[type="text"],
form input[type="password"] {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 10px !important;
  color: hsl(var(--foreground)) !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  transition: border-color 0.2s;
}

form input[type="text"]:focus,
form input[type="password"]:focus {
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15) !important;
  outline: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  main > div,
  div[class*="chat-body"],
  div[class*="messages-container"],
  div[class*="composer"],
  div[class*="input-container"],
  footer,
  div[class*="chat-input"] {
    padding-left: 12px;
    padding-right: 12px;
    max-width: 100%;
  }
}