/**





 * Glomax GPT — Full Redesign Layer v2





 * Mevcut HTML/PHP yapısına dokunmadan tam yenileme.





 * app.css üzerine zararsız biçimde bindirme yapar.





 * Tüm cihaz boyutlarıyla uyumlu: 320px → 4K





 */











/* ══════════════════════════════════════════════════════════





   TEMEL — body, html, font iyileştirmesi





══════════════════════════════════════════════════════════ */





body {





  font-feature-settings: "kern","liga","calt";





  text-rendering: optimizeLegibility;





}











/* ══════════════════════════════════════════════════════════





   TOPBAR — Temiz, minimal, kurumsal





══════════════════════════════════════════════════════════ */





.topbar {





  position: sticky;





  top: 0;





  z-index: 20;





  height: 64px;





  min-height: 64px;





  display: flex;





  align-items: center;





  justify-content: space-between;





  padding: 0 20px;





  gap: 12px;





  flex-shrink: 0;





  border-bottom: 1px solid var(--border);





  background: var(--main-bg);





  box-shadow: none;





  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;





}











/* Işık teması */





[data-theme="light"] .topbar {





  background: rgba(245,245,245,.96);





  backdrop-filter: blur(14px);





  -webkit-backdrop-filter: blur(14px);





}











/* Karanlık tema */





[data-theme="dark"] .topbar {





  background: var(--bg-page);





  backdrop-filter: blur(14px);





  -webkit-backdrop-filter: blur(14px);





}











/* Scroll sonrası daha belirgin */





.topbar.scrolled {





  border-bottom-color: var(--border2) !important;





  box-shadow: 0 2px 16px rgba(0,0,0,.07) !important;





}





[data-theme="dark"] .topbar.scrolled {





  box-shadow: 0 2px 20px rgba(0,0,0,.28) !important;





}











/* Topbar sol / sağ bölgeler */





.topbar-left {





  display: flex;





  align-items: center;





  gap: 6px;





  min-width: 0;





  flex: 1;





}





.topbar-right {





  display: flex;





  align-items: center;





  gap: 6px;





  flex-shrink: 0;





}











/* Topbar icon butonlar */





.btn-icon {





  width: 34px;





  height: 34px;





  border-radius: 8px;





  display: flex;





  align-items: center;





  justify-content: center;





  color: var(--text2);





  background: none;





  border: none;





  cursor: pointer;





  transition: background .14s, color .14s;





  flex-shrink: 0;





}





.btn-icon:hover {





  background: var(--surface2);





  color: var(--text);





}











/* Sohbet başlığı (topbar içi) */





#conv-title {





  font-size: .85rem;





  font-weight: 600;





  color: var(--text2);





  white-space: nowrap;





  overflow: hidden;





  text-overflow: ellipsis;





  max-width: 240px;





}





@media (max-width: 768px) {





  #conv-title { max-width: 130px; }





}











/* Topbar login/register butonları */





.btn-topbar-login {





  padding: 6px 14px;





  border-radius: 8px;





  font-size: .82rem;





  font-weight: 600;





  color: var(--text2);





  background: none;





  border: none;





  cursor: pointer;





  text-decoration: none;





  transition: background .14s, color .14s;





}





.btn-topbar-login:hover {





  background: var(--surface2);





  color: var(--text);





  text-decoration: none;





}





.btn-topbar-register {





  padding: 7px 16px;





  border-radius: 8px;





  font-size: .82rem;





  font-weight: 700;





  background: var(--accent-grad);





  color: #fff !important;





  box-shadow: 0 2px 10px rgba(0,0,0,.1);





  transition: opacity .18s, transform .18s, box-shadow .18s;





  text-decoration: none !important;





  display: inline-flex;





  align-items: center;





  gap: 5px;





  border: none;





  cursor: pointer;





}





.btn-topbar-register:hover {





  opacity: .9;





  transform: translateY(-1px);





  box-shadow: 0 4px 16px rgba(0,0,0,.15);





}











/* Export butonu */





.gx-export-btn {





  display: inline-flex;





  align-items: center;





  gap: 6px;





  padding: 6px 12px;





  border-radius: 8px;





  font-size: .78rem;





  font-weight: 600;





  background: var(--surface);





  border: 1px solid var(--border);





  color: var(--text2);





  cursor: pointer;





  transition: background .14s, color .14s, border-color .14s;





}





.gx-export-btn:hover {





  background: var(--surface2);





  color: var(--text);





  border-color: var(--border2);





}











/* ══════════════════════════════════════════════════════════





   DUYURU BANNER — Kurumsal stil





══════════════════════════════════════════════════════════ */





.announcement {





  padding: 8px 20px;





  font-size: .82rem;





  font-weight: 500;





  flex-shrink: 0;





}





.announcement-info    { background: var(--bg-hover); color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }





.announcement-warning { background: var(--bg-hover); color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }





.announcement-success { background: var(--bg-hover); color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }





.announcement-error   { background: rgba(239,68,68,.07); color: var(--error); border-bottom: 1px solid rgba(239,68,68,.2); }











/* ══════════════════════════════════════════════════════════





   WELCOME EKRANI — Tam yenileme





══════════════════════════════════════════════════════════ */





/* messages-container: welcome ekranında flex ile ortala */





.messages-cont#111625as(#welcome-screen) {





  display: flex !important;





  align-items: center !important;





  justify-content: center !important;





}











.welcome-screen {





  gap: 20px;





  padding: 40px 24px 32px;





  min-height: calc(100vh - 64px - 200px);





  animation: redesignFadeUp .55s cubic-bezier(.4,0,.2,1) both;





  display: flex !important;





  flex-direction: column !important;





  align-items: center !important;





  justify-content: center !important;





  text-align: center !important;





  max-width: 760px !important;





  margin-left: auto !important;





  margin-right: auto !important;





  width: 100% !important;





  box-sizing: border-box !important;





  margin-bottom: 0 !important;





}





@keyframes redesignFadeUp {





  from { opacity: 0; transform: translateY(20px); }





  to   { opacity: 1; transform: translateY(0); }





}











/* Logo icon */





.welcome-logo-icon {





  width: 76px; height: 76px;





  border-radius: 24px;





  background: var(--accent-grad);





  display: flex; align-items: center; justify-content: center;





  box-shadow: 0 0 0 0 rgba(100,100,100,.3), 0 12px 40px rgba(100,100,100,.25);





  animation: iconBreath 3.5s ease-in-out infinite;





  flex-shrink: 0;





}





@keyframes iconBreath {





  0%,100% { box-shadow: 0 0 0 0 rgba(100,100,100,.3), 0 12px 40px rgba(100,100,100,.25); }





  50%      { box-shadow: 0 0 0 10px rgba(100,100,100,.05), 0 16px 48px rgba(80,80,80,.2); }





}











/* Başlık — tüm cihazlarda ortada */





.welcome-title {





  font-size: clamp(28px, 4vw, 48px) !important;





  font-weight: 800 !important;





  letter-spacing: -.02em !important;





  line-height: 1.15 !important;





  background: none !important;





  -webkit-background-clip: unset !important;





  -webkit-text-fill-color: var(--text) !important;





  background-clip: unset !important;





  color: var(--text) !important;





  margin: 0 auto !important;





  text-align: center !important;





  width: 100% !important;





  display: block !important;





}





.welcome-screen h1,





.welcome-screen h1.welcome-title,





#welcome-greeting {





  font-size: clamp(28px, 4vw, 48px) !important;





  font-weight: 800 !important;





  letter-spacing: -.02em !important;





  line-height: 1.15 !important;





  margin: 0 auto !important;





  text-align: center !important;





  width: 100% !important;





  display: block !important;





  background: none !important;





  -webkit-background-clip: unset !important;





  -webkit-text-fill-color: var(--text) !important;





  background-clip: unset !important;





  color: var(--text) !important;





}





.welcome-screen h1 span {





  background: none !important;





  -webkit-background-clip: unset !important;





  -webkit-text-fill-color: var(--text) !important;





  background-clip: unset !important;





  color: var(--text) !important;





}











/* Alt yazı */





.welcome-subtitle {





  font-size: 1rem !important;





  color: var(--text3) !important;





  max-width: 520px !important;





  line-height: 1.65 !important;





  margin: 0 auto !important;





  text-align: center !important;





  width: 100% !important;





  display: block !important;


#3e73e61c


}











/* ── Suggestion kartları ── */





.suggestions-grid {





  display: grid;





  grid-template-columns: repeat(2, 1fr);





  gap: 12px;





  width: 100%;





  max-width: 580px;





}





@media (max-width: 520px) {





  .suggestions-grid { grid-template-columns: 1fr; max-width: 100%; }





}











.suggestion-card {





  display: flex; align-items: flex-start; gap: 12px;





  padding: 16px;





  background: var(--surface);





  border: 1px solid var(--border);





  border-radius: 14px;





  cursor: pointer;





  transition: all .2s cubic-bezier(.4,0,.2,1);





  text-align: left; position: relative; overflow: hidden;





}





.suggestion-card:hover {





  border-color: rgba(100,100,100,.3);





  box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(100,100,100,.1);





  transform: translateY(-3px);





  background: var(--surface2);





}





.suggestion-card:active { transform: translateY(0); }











.suggestion-card-icon {





  width: 38px; height: 38px;





  border-radius: 10px;





  display: flex; align-items: center; justify-content: center;





  flex-shrink: 0; font-size: 1.15rem;





}





.suggestion-card-title {





  font-size: .84rem; font-weight: 700;





  color: var(--text); margin-bottom: 3px;





  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;





}





.suggestion-card-desc {





  font-size: .76rem; color: var(--text3);





  line-height: 1.45;





  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;





}











/* ── Yetenek pills ── */





.welcome-caps {





  display: flex; flex-wrap: wrap;





  align-items: center; justify-content: center;





  gap: 8px; max-width: 560px;





}





.cap-pill {





  display: inline-flex; align-items: center; gap: 5px;





  padding: 5px 12px; border-radius: 100px;





  background: var(--surface); border: 1px solid var(--border);





  font-size: .75rem; color: var(--text3); font-weight: 500;





  transition: all .15s; cursor: default;





}





.cap-pill:hover {





  background: var(--accent-soft);





  border-color: rgba(100,100,100,.3);





  color: var(--accent);





}











/* ── Capability cards ── */





.capability-cards {





  grid-template-columns: repeat(2, 1fr);





  max-width: 560px;





  gap: 12px;





}





@media (min-width: 640px) {





  .capability-cards { grid-template-columns: repeat(4, 1fr); }





}





.cap-card {





  border-radius: 14px; padding: 14px 12px;





  transition: all .2s cubic-bezier(.4,0,.2,1);





}





.cap-card:hover { border-color: var(--border2); box-shadow: var(--shadow-sm); }











/* ── Guest CTA kartı ── */





.corp-card { border-radius: 16px; transition: all .2s; }





.guest-inline-cta { font-size: .8rem; color: var(--text3); line-height: 1.65; }





.guest-cta-link { color: var(--accent); font-weight: 600; text-decoration: none; }





.guest-cta-link:hover { text-decoration: underline; }











/* ── Suggestion pills ── */





.suggestion-pills { gap: 8px; max-width: 620px; }





.suggestion-pill {





  padding: 8px 16px; border-radius: 100px;





  font-size: .82rem; font-weight: 500;





  transition: all .18s cubic-bezier(.34,1.56,.64,1) !important;





}





.suggestion-pill:hover { background: var(--surface2) !important; }











/* ══════════════════════════════════════════════════════════





   MESAJLAR — Chat alanı yenileme





══════════════════════════════════════════════════════════ */





.messages-container {





  padding: 0;





}











/* Welcome screen — messages-container içinde tam ortalanmış */





.messages-container:has(#welcome-screen:not([style*="display: none"])):not(:has(.message)) {





  display: flex !important;





  flex-direction: column !important;





  align-items: center !important;





  justify-content: center !important;





}











.message {





  padding: 14px 0;





  animation: msgSlideIn .22s cubic-bezier(.4,0,.2,1);





}





@keyframes msgSlideIn {





  from { opacity: 0; transform: translateY(6px); }





  to   { opacity: 1; transform: translateY(0); }





}











.message-inner {





  max-width: 760px;





  margin-left: auto;





  margin-right: auto;





  padding: 0 20px;





  width: 100%;





}





@media (min-width: 900px) {





  .message-inner { padding: 0 24px; }





}











/* Avatar */





.message-avatar {





  width: 30px; height: 30px;





  border-radius: 9px;





  font-size: .72rem;





  margin-top: 1px;





}





.message.user .message-avatar {





  background: var(--accent-grad);





  box-shadow: 0 2px 8px rgba(100,100,100,.2);





}





.message.assistant .message-avatar {





  background: var(--accent-grad);





  box-shadow: 0 2px 8px rgba(0,0,0,.15);





}











/* User balonu */





.message.user .message-body {





  border-radius: 16px 16px 4px 16px;





  padding: 11px 15px;





  max-width: 75%;





  font-size: .9rem;





  line-height: 1.65;





}











/* Asistan içerik */





.message.assistant .message-body { flex: 1; min-width: 0; }











/* Mesaj içeriği tipografisi */





.message-content {





  font-size: .9rem;





  line-height: 1.75;





  color: var(--text2);





}





.message-content p { margin: 0 0 10px; }





.message-content p:last-child { margin-bottom: 0; }





.message-content h1,.message-content h2,.message-content h3 {





  color: var(--text); font-weight: 700;





  margin: 18px 0 8px; line-height: 1.3;





}





.message-content h1 { font-size: 1.2rem; }





.message-content h2 { font-size: 1.05rem; }





.message-content h3 { font-size: .95rem; }





.message-content ul,.message-content ol { padding-left: 20px; margin: 8px 0; }





.message-content li { margin-bottom: 4px; }





.message-content strong { color: var(--text); font-weight: 700; }





.message-content em { color: var(--text2); }





.message-content code {





  font-size: .82rem; padding: 2px 6px;





  background: var(--surface2); border-radius: 5px;





  font-family: var(--font-mono); color: var(--accent);





}











/* Mesaj sender isim */





.message-sender {





  font-size: .78rem; font-weight: 700;





  color: var(--text3); margin-bottom: 6px;





  text-transform: uppercase; letter-spacing: .04em;





}











/* Aksiyon butonları */





.message-actions {





  display: flex; gap: 2px; margin-top: 8px;





  opacity: 0; transition: opacity .15s;





}





.message:hover .message-actions { opacity: 1; }





.btn-msg-action, .msg-copy-btn, .btn-regenerate, .btn-like, .btn-dislike {





  display: inline-flex; align-items: center; gap: 4px;





  padding: 4px 8px; border-radius: 7px;





  font-size: .73rem; font-weight: 600; color: var(--text4);





  background: none; border: none; cursor: pointer;





  transition: all .12s;





}





.btn-msg-action:hover,.msg-copy-btn:hover,.btn-regenerate:hover,





.btn-like:hover,.btn-dislike:hover { background: var(--surface2); color: var(--text2); }





.btn-like.active { color: #10b981; }





.btn-dislike.active { color: #ef4444; }











/* Mesaj tarih/saat */





.message-time { font-size: .7rem; color: var(--text4); margin-left: auto; }











/* ── Kod bloğu ── */





pre {





  border-radius: 12px;





  overflow: hidden;





  border: 1px solid var(--border);





  margin: 12px 0;





}





pre code {





  font-size: .82rem !important;





  line-height: 1.7 !important;





  padding: 16px 18px !important;





  display: block;





}





.code-header {





  display: flex; align-items: center; justify-content: space-between;





  padding: 8px 16px;





  background: var(--code-header);





  border-bottom: 1px solid var(--border);





}





.code-lang { font-size: .7rem; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; }











/* ══════════════════════════════════════════════════════════





   INPUT ALANI — Yenileme





══════════════════════════════════════════════════════════ */





.input-wrapper {





  padding: 12px 20px 16px !important;





  background: var(--bg) !important;





  width: 100% !important;





  box-sizing: border-box !important;





}





[data-theme="light"] .input-wrapper {





  background: var(--bg) !important;





}











.input-area {





  max-width: 760px !important;





  margin-left: auto !important;





  margin-right: auto !important;





  width: 100% !important;





  box-sizing: border-box !important;





}











.input-box {





  border-radius: 20px !important;





  border: 1.5px solid var(--border) !important;





  background: var(--input-bg) !important;





  box-shadow: 0 2px 16px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04) !important;





  transition: border-color .2s, box-shadow .2s !important;





  width: 100% !important;





  box-sizing: border-box !important;





  overflow: hidden !important;





}





.input-box:focus-within {





  border-color: var(--border2) !important;





  box-shadow: 0 0 0 3px var(--accent-soft), 0 2px 16px rgba(0,0,0,.08) !important;





}





[data-theme="light"] .input-box {





  background: #ffffff !important;





  border-color: #e0e0e0 !important;





  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;





}





[data-theme="light"] .input-box:focus-within {





  border-color: #b0b0b0 !important;





  box-shadow: 0 0 0 3px rgba(0,0,0,.05), 0 2px 12px rgba(0,0,0,.08) !important;





}





[data-theme="dark"] .input-box {





  background: #2f2f2f !important;





  border-color: rgba(255,255,255,.12) !important;





}





[data-theme="dark"] .input-box:focus-within {





  border-color: rgba(255,255,255,.22) !important;





  box-shadow: 0 0 0 3px rgba(255,255,255,.05), 0 2px 20px rgba(0,0,0,.3) !important;





}











.input-row {





  padding: 14px 16px 4px !important;





}











#message-input {





  font-size: .9375rem !important;





  line-height: 1.6 !important;





  color: var(--text) !important;





  min-height: 28px !important;





}





#message-input::placeholder { color: var(--text4) !important; }











/* Input araçlar */





.input-actions {





  border-top: none !important;





  margin-top: 0 !important;





  padding: 6px 12px 10px !important;





  display: flex !important;





  align-items: center !important;





  flex-wrap: nowrap !important;





  gap: 4px !important;





  width: 100% !important;





  box-sizing: border-box !important;





  overflow: visible !important;





  min-width: 0 !important;





}





.input-actions-left {





  display: flex !important;





  align-items: center !important;





  gap: 4px !important;





  flex: 1 1 auto !important;





  min-width: 0 !important;





  overflow: hidden !important;





  flex-wrap: nowrap !important;





}





.input-actions-right {





  display: flex !important;





  align-items: center !important;





  gap: 4px !important;





  flex-shrink: 0 !important;





  min-width: 0 !important;





}





.btn-tool {





  width: 30px !important; height: 30px !important;





  min-width: 30px !important;





  border-radius: 7px !important;





  color: var(--text3) !important;





  transition: all .12s !important;





  flex-shrink: 0 !important;





}





.btn-tool:hover { background: var(--surface2) !important; color: var(--accent) !important; }





.btn-tool.active { background: var(--accent-soft) !important; color: var(--accent) !important; }











/* Çok küçük ekranlarda bazı ikonları gizle */





@media (max-width: 400px) {





  .btn-tool-analyze { display: none !important; }





}





@media (max-width: 360px) {





  .btn-tool-camera { display: none !important; }





}











/* Speed picker responsive */





.speed-picker-btn {





  max-width: 90px !important;





  overflow: hidden !important;





  white-space: nowrap !important;





  text-overflow: ellipsis !important;





  flex-shrink: 0 !important;





}





@media (max-width: 480px) {





  .speed-picker-btn {





    max-width: 70px !important;





    padding: 4px 7px !important;





    font-size: .72rem !important;





  }





}





@media (max-width: 360px) {





  .speed-picker-btn {





    max-width: 56px !important;





    padding: 4px 6px !important;





    font-size: .68rem !important;





  }





  #speed-picker-label { display: none !important; }





}











/* Gönder */





.btn-send {





  width: 32px !important; height: 32px !important;





  min-width: 32px !important;





  border-radius: 9px !important;





  background: var(--accent-grad) !important;





  box-shadow: 0 2px 8px rgba(100,100,100,.3) !important;





  transition: all .18s cubic-bezier(.34,1.56,.64,1) !important;





  flex-shrink: 0 !important;





}





.btn-send:hover:not(:disabled) {





  transform: scale(1.1) !important;





  box-shadow: 0 4px 16px rgba(100,100,100,.45) !important;





}





.btn-send:disabled { opacity: .35 !important; box-shadow: none !important; }











/* Durdur */





.btn-stop {





  border-radius: 9px !important;





  width: 30px !important; height: 30px !important;





}











/* Karakter sayacı */





.char-count, #char-count {





  font-size: .7rem !important; color: var(--text4) !important;





  font-variant-numeric: tabular-nums;





  min-width: 20px; text-align: right;





}











/* Input footer */





.input-footer {





  font-size: .6rem !important; color: var(--text4) !important;





  padding-top: 6px !important;





  text-align: center;





}











/* ── PWA promo banner ── */





.pwa-promo-banner {





  display: flex; align-items: center; gap: 10px;





  padding: 9px 14px; border-radius: 12px;





  background: var(--surface); border: 1px solid var(--border);





  margin-bottom: 10px; font-size: .8rem;





  animation: redesignFadeUp .4s ease both;





}





.pwa-promo-banner.hidden { display: none !important; }





.pwa-promo-icon {





  width: 32px; height: 32px; border-radius: 8px;





  background: var(--accent-grad);





  display: flex; align-items: center; justify-content: center;





  color: #fff; flex-shrink: 0;





}





.pwa-promo-text { flex: 1; min-width: 0; }





.pwa-promo-text strong { display: block; font-weight: 700; color: var(--text); font-size: .82rem; }





.pwa-promo-text span { color: var(--text3); font-size: .75rem; }





.pwa-promo-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }





.pwa-promo-install {





  padding: 5px 12px; border-radius: 7px;





  background: var(--accent-grad); color: #fff;





  font-size: .76rem; font-weight: 700; cursor: pointer;





  border: none; transition: opacity .15s;





}





.pwa-promo-install:hover { opacity: .88; }





.pwa-promo-close {





  width: 26px; height: 26px; border-radius: 6px;





  background: var(--surface2); border: none; cursor: pointer;





  display: flex; align-items: center; justify-content: center;





  color: var(--text3); transition: all .12s;





}





.pwa-promo-close:hover { background: var(--surface3); color: var(--text); }











/* ══════════════════════════════════════════════════════════





   SIDEBAR — Görsel güncelleme





══════════════════════════════════════════════════════════ */





.sidebar {





  border-right: 1px solid var(--border);





}





/* Collapsed genişlik app.css'den gelir — burada override yok */





[data-theme="light"] .sidebar {





  background: #f8f8fa;





}





[data-theme="dark"] .sidebar {





  background: var(--bg) !important;





}











/* Section label — grup başlıkları */





.sidebar-section-label {





  font-size: .67rem !important;





  font-weight: 800 !important;





  color: var(--text4) !important;





  padding: 10px 12px 3px !important;





  text-transform: uppercase !important;





  letter-spacing: .09em !important;





  user-select: none;





}





.sidebar.collapsed .sidebar-section-label { display: none !important; }











/* Sidebar nav scroll — tüm menü görünsün */





.sidebar-nav {





  overflow-y: visible;





  overflow-x: hidden;





  flex: 0 0 auto !important;





  padding-bottom: 4px !important;





}





.sidebar-conversations {





  flex: 1 1 0 !important;





  max-height: none !important;





}











/* Sidebar nav item — daha temiz */





.sidebar-nav-item {





  border-radius: 8px !important;





  font-size: .84rem !important;





  padding: 8px 10px !important;





  transition: all .12s !important;





}





.sidebar-nav-item:hover {





  background: var(--sidebar-hover) !important;





  color: var(--text) !important;





}





.sidebar-nav-item.active {





  background: var(--sidebar-active) !important;





  color: var(--text) !important;





  font-weight: 700 !important;





}











/* Divider */





.sidebar-nav-divider {





  height: 1px !important;





  background: var(--border) !important;





  margin: 4px 8px !important;





}











/* Sub item girintisi */





.sidebar-nav-sub { padding-left: 26px !important; }











/* Badge'ler */





.sidebar-item-badge {





  font-size: .62rem !important; font-weight: 700 !important;





  padding: 1px 6px !important; border-radius: 100px !important;





  flex-shrink: 0;





}





.sidebar-badge-new   { background: var(--bg-hover) !important; color: var(--text-secondary) !important; }





.sidebar-badge-pro   { background: var(--bg-hover) !important; color: var(--accent) !important; }





.sidebar-badge-admin { background: var(--bg-hover) !important; color: var(--text-secondary) !important; }











/* Status dot */





.sidebar-status-dot {





  width: 7px !important; height: 7px !important; border-radius: 50% !important;





  background: var(--accent) !important; flex-shrink: 0;





  box-shadow: 0 0 0 2px var(--border-subtle) !important;





  animation: statusPulseRD 2.5s infinite !important;





}





@keyframes statusPulseRD {





  0%,100% { box-shadow: 0 0 0 2px var(--border-subtle); }





  50%      { box-shadow: 0 0 0 4px transparent; }





}











/* Sidebar footer */





.sidebar-footer {





  border-top: 1px solid var(--border) !important;





  padding: 10px !important;





}











/* ══════════════════════════════════════════════════════════





   SIDEBAR — Yeni Veri Widget'ları





══════════════════════════════════════════════════════════ */











/* ── Bildirim badge ── */





.sidebar-notif-badge {





  display: inline-flex; align-items: center; justify-content: center;





  min-width: 18px; height: 18px; padding: 0 5px;





  border-radius: 20px; font-size: .6rem; font-weight: 800;





  background: var(--error); color: #fff; flex-shrink: 0;





  line-height: 1; letter-spacing: 0;





  animation: sbNotifPop .3s cubic-bezier(.34,1.56,.64,1);





}





@keyframes sbNotifPop {





  from { transform: scale(0); opacity: 0; }





  to   { transform: scale(1); opacity: 1; }





}











/* ── Sayaç chip (dosya vb.) ── */





.sidebar-count-chip {





  display: inline-flex; align-items: center; justify-content: center;





  min-width: 18px; height: 16px; padding: 0 5px;





  border-radius: 10px; font-size: .6rem; font-weight: 700;





  background: var(--surface3); color: var(--text3); flex-shrink: 0;





}











/* ── Mini İstatistik Widget ── */





.sb-stats-widget {





  margin: 4px 4px 2px;





  background: var(--surface2);





  border: 1px solid var(--border);





  border-radius: 10px;





  padding: 8px 10px;





  transition: border-color .15s;





}





.sb-stats-widget:hover { border-color: var(--border2); }











.sb-stats-row {





  display: flex; gap: 2px;





}





.sb-stat-item {





  flex: 1; display: flex; flex-direction: column; align-items: center;





  gap: 2px; padding: 5px 4px; border-radius: 7px;





  text-decoration: none; transition: background .12s;





  cursor: pointer;





}





.sb-stat-item:hover { background: var(--sidebar-hover); text-decoration: none; }





.sb-stat-item svg { color: var(--text4); flex-shrink: 0; }





.sb-stat-val {





  font-size: .78rem; font-weight: 800; color: var(--text);





  line-height: 1;





}





.sb-stat-lbl {





  font-size: .6rem; color: var(--text4); font-weight: 600;





  text-transform: uppercase; letter-spacing: .04em;





}











.sb-token-row {





  display: flex; align-items: center; gap: 4px;





  margin-top: 6px; padding-top: 6px;





  border-top: 1px solid var(--border);





  font-size: .67rem; color: var(--text4);





}





.sb-token-row svg { flex-shrink: 0; color: var(--accent); }





.sb-token-sep { color: var(--border2); }











/* ── Son Sohbetler ── */





.sb-recent-section {





  margin: 4px 4px 2px;





  background: var(--surface2);





  border: 1px solid var(--border);





  border-radius: 10px;





  overflow: hidden;





}





.sb-recent-header {





  display: flex; align-items: center; justify-content: space-between;





  padding: 6px 10px 4px;





  font-size: .65rem; font-weight: 800; color: var(--text4);





  text-transform: uppercase; letter-spacing: .07em;





}





.sb-recent-all {





  font-size: .65rem; font-weight: 600; color: var(--accent);





  text-decoration: none; opacity: .8;





}





.sb-recent-all:hover { opacity: 1; text-decoration: none; }











.sb-recent-item {





  display: flex; align-items: center; gap: 7px;





  padding: 5px 10px; text-decoration: none;





  transition: background .1s;





  border-top: 1px solid var(--border);





}





.sb-recent-item:first-of-type { border-top: none; }





.sb-recent-item:hover { background: var(--sidebar-hover); text-decoration: none; }





.sb-recent-item svg { flex-shrink: 0; color: var(--text4); }





.sb-recent-title {





  flex: 1; font-size: .75rem; color: var(--text2); font-weight: 500;





  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;





}





.sb-recent-time {





  font-size: .62rem; color: var(--text4); flex-shrink: 0; white-space: nowrap;





}











/* ── Model chip ── */





.sb-model-chip {





  display: flex; align-items: center; gap: 6px;





  margin: 4px 4px 2px; padding: 5px 10px;





  background: var(--surface2); border: 1px solid var(--border);





  border-radius: 8px; font-size: .68rem; color: var(--text3);





  overflow: hidden;





}





.sb-model-chip svg { flex-shrink: 0; color: var(--accent); }





.sb-model-chip strong { color: var(--text2); font-weight: 700; }





.sb-model-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }











/* ── Günlük Kullanım Çubuğu ── */





.sb-usage-block {





  margin: 6px 4px 4px;





  padding: 8px 10px;





  background: var(--surface2);





  border: 1px solid var(--border);





  border-radius: 10px;





}





.sb-usage-header {





  display: flex; align-items: center; justify-content: space-between;





  margin-bottom: 6px;





}





.sb-usage-label {





  display: flex; align-items: center; gap: 4px;





  font-size: .67rem; font-weight: 700; color: var(--text3);





  text-transform: uppercase; letter-spacing: .05em;





}





.sb-usage-label svg { color: var(--accent); }





.sb-usage-nums {





  font-size: .67rem; font-weight: 700; color: var(--text2);





  font-variant-numeric: tabular-nums;





}





.sb-usage-track {





  height: 5px; background: var(--sidebar-active);





  border-radius: 4px; overflow: hidden;





}





.sb-usage-fill {





  height: 100%; border-radius: 4px;





  transition: width .6s cubic-bezier(.4,0,.2,1);





}





.sb-usage-warn {





  display: flex; align-items: center; gap: 4px;





  margin-top: 5px; font-size: .63rem; color: #ef4444; font-weight: 600;





}





.sb-usage-warn svg { flex-shrink: 0; }











/* ── Hızlı Eylemler ── */





.sb-quick-actions {





  display: flex; gap: 4px;





  margin: 4px 4px 6px; padding: 0;





}





.sb-quick-btn {





  flex: 1; display: flex; flex-direction: column; align-items: center;





  gap: 3px; padding: 6px 4px; border-radius: 8px;





  background: var(--surface2); border: 1px solid var(--border);





  text-decoration: none; transition: all .15s; cursor: pointer;





}





.sb-quick-btn:hover {





  background: var(--sidebar-hover); border-color: var(--border2);





  text-decoration: none; transform: translateY(-1px);





}





.sb-quick-btn svg { color: var(--accent); flex-shrink: 0; }





.sb-quick-btn span {





  font-size: .6rem; font-weight: 700; color: var(--text3);





  text-transform: uppercase; letter-spacing: .04em;





}











/* ── Collapsed sidebar — yeni widget'ları gizle ── */





.sidebar.collapsed .sb-stats-widget,





.sidebar.collapsed .sb-recent-section,





.sidebar.collapsed .sb-model-chip,





.sidebar.collapsed .sb-usage-block,





.sidebar.collapsed .sb-quick-actions { display: none; }











/* ── Mobile ── */





@media (max-width: 768px) {





  .sb-stats-widget, .sb-recent-section,





  .sb-model-chip, .sb-usage-block { margin: 3px 2px 2px; }





  .sb-quick-actions { margin: 3px 2px 4px; }





}











/* User avatar */





.user-avatar {





  border-radius: 18px !important;





  background: #4f4f4f !important;





}











/* Sohbet item */





.conv-item {





  border-radius: 8px !important;





  font-size: .83rem !important;





  padding: 6px 9px !important;





  transition: background .12s !important;





}





.conv-item.active { background: var(--sidebar-active) !important; }





.conv-item-text { font-size: .83rem !important; }











/* Sidebar arama kutusu */





.sidebar-search-wrap { padding: 3px 10px 5px !important; }





.sidebar-search {





  border-radius: 9px !important;





  background: var(--surface2) !important;





  border: 1px solid transparent !important;





  transition: border-color .15s !important;





  margin: 0 !important;





}





.sidebar-search:focus-within { border-color: var(--border2) !important; }











/* Grup toggle chevron */





.sidebar-group-toggle { color: var(--text2) !important; }





.sidebar-group-toggle.active { color: var(--text) !important; }











/* Sidebar tema ikonunu güncelle */





#sidebar-theme-icon { color: var(--text3); }











/* ══════════════════════════════════════════════════════════





   MODAL PENCERELER — Genel güncelleme





══════════════════════════════════════════════════════════ */





.modal-box {





  border-radius: 18px !important;





  background: var(--surface) !important;





  border: 1px solid var(--border2) !important;





  box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08) !important;





  overflow: hidden;





}





[data-theme="dark"] .modal-box {





  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.3) !important;





}





.modal-header {





  border-bottom: 1px solid var(--border) !important;





  padding: 18px 22px 14px !important;





  display: flex; align-items: center; justify-content: space-between;





}





.modal-header h3 { font-size: .98rem !important; font-weight: 800 !important; }





.modal-header button { color: var(--text3); transition: color .12s; }





.modal-header button:hover { color: var(--text); }





.modal-body { padding: 18px 22px !important; }





.modal-footer {





  border-top: 1px solid var(--border) !important;





  padding: 14px 22px !important;





  display: flex; align-items: center; justify-content: flex-end; gap: 10px;





}





.modal-overlay { background: rgba(0,0,0,.4) !important; backdrop-filter: blur(5px) !important; }











/* ══════════════════════════════════════════════════════════





   BUTONLAR — Genel sistem





══════════════════════════════════════════════════════════ */





.btn-primary {





  background: var(--accent-grad) !important;





  color: #fff !important; border: none !important;





  border-radius: 9px !important;





  font-weight: 700 !important;





  box-shadow: 0 2px 10px rgba(100,100,100,.25) !important;





  transition: all .18s !important;





}





.btn-primary:hover { opacity: .88 !important; }











.btn-secondary {





  background: var(--surface2) !important;





  color: var(--text) !important;





  border: 1px solid var(--border) !important;





  border-radius: 9px !important; font-weight: 600 !important;





  transition: all .15s !important;





}





.btn-secondary:hover { background: var(--surface3) !important; border-color: var(--border2) !important; }











.form-input, .form-select, .form-textarea {





  border-radius: 9px !important;





  border: 1.5px solid var(--input-border) !important;





  background: var(--input-bg) !important;





  padding: 9px 13px !important;





  font-size: .88rem !important;





  transition: border-color .15s, box-shadow .15s !important;





}





.form-input:focus, .form-select:focus, .form-textarea:focus {





  border-color: var(--accent) !important;





  box-shadow: 0 0 0 3px rgba(100,100,100,.09) !important;





  outline: none !important;





}











/* ══════════════════════════════════════════════════════════





   TOAST — Bildirimler





══════════════════════════════════════════════════════════ */





#toast-container {





  position: fixed !important;





  bottom: 80px !important; right: 18px !important;





  z-index: 9999 !important;





  display: flex !important; flex-direction: column !important; gap: 8px !important;





  pointer-events: none !important;





}





@media (max-width: 600px) {





  #toast-container { bottom: 90px !important; right: 10px !important; left: 10px !important; }





}





.toast {





  display: flex !important; align-items: center !important; gap: 10px !important;





  padding: 11px 16px !important;





  border-radius: 12px !important;





  background: var(--surface) !important;





  border: 1px solid var(--border2) !important;





  box-shadow: 0 8px 32px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08) !important;





  font-size: .82rem !important; font-weight: 600 !important; color: var(--text) !important;





  pointer-events: auto !important;





  max-width: 340px !important; min-width: 200px !important;





  animation: toastRD .28s cubic-bezier(.34,1.56,.64,1) both !important;





  backdrop-filter: blur(10px);





}





@keyframes toastRD {





  from { opacity: 0; transform: translateY(10px) scale(.94); }





  to   { opacity: 1; transform: translateY(0) scale(1); }





}





.toast.success { border-left: 3px solid var(--success) !important; }





.toast.error   { border-left: 3px solid var(--error) !important; }





.toast.info    { border-left: 3px solid var(--border-control) !important; }





.toast.warning { border-left: 3px solid var(--warning) !important; }











/* ══════════════════════════════════════════════════════════





   UPGRADE MODAL — Pro teşvik





══════════════════════════════════════════════════════════ */





.upgrade-modal-icon {





  width: 64px; height: 64px; border-radius: 18px;





  background: var(--accent-grad);





  display: flex; align-items: center; justify-content: center;





  margin: 0 auto 18px; color: #fff;





  box-shadow: 0 8px 24px rgba(100,100,100,.3);





}











/* ══════════════════════════════════════════════════════════





   GENEL SCROLLBAR





══════════════════════════════════════════════════════════ */





* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }





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





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





::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }





::-webkit-scrollbar-thumb:hover { background: var(--text4); }











/* ══════════════════════════════════════════════════════════





   SEÇİM RENGİ





══════════════════════════════════════════════════════════ */





::selection { background: rgba(100,100,100,.18); color: inherit; }











/* ══════════════════════════════════════════════════════════





   FOCUS RING — Erişilebilirlik





══════════════════════════════════════════════════════════ */





:focus-visible {





  outline: 2px solid var(--accent);





  outline-offset: 2px;





  border-radius: 6px;





}











/* ══════════════════════════════════════════════════════════





   MOBILE PAGE HEADER





══════════════════════════════════════════════════════════ */





.mobile-page-header {





  background: var(--main-bg) !important;





  border-bottom: 1px solid var(--border) !important;





  box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;





}





[data-theme="light"] .mobile-page-header {





  background: rgba(255,255,255,.95) !important;





  backdrop-filter: blur(12px) !important;





  -webkit-backdrop-filter: blur(12px) !important;





}











/* ══════════════════════════════════════════════════════════





   MOBILE — 768px ve altı





══════════════════════════════════════════════════════════ */





@media (max-width: 768px) {





  /* Mobilde topbar gizle — mobile-page-header üstleniyor */





  .topbar {





    display: none !important;





  }





  /* mobile-page-header göster */





  .mobile-page-header {





    display: flex !important;





  }











  /* Welcome ekranı mobil — tam ortalama */





  .welcome-screen {





    padding: 20px 16px 20px !important;





    gap: 14px !important;





    text-align: center !important;





    align-items: center !important;





    width: 100% !important;





    box-sizing: border-box !important;





  }





  .welcome-title,





  .welcome-screen h1,





  .welcome-screen h1.welcome-title,





  #welcome-greeting {





    font-size: clamp(22px, 6vw, 32px) !important;





    text-align: center !important;





    width: 100% !important;





    margin-left: auto !important;





    margin-right: auto !important;





  }





  .welcome-subtitle {





    text-align: center !important;





    width: 100% !important;





    margin-left: auto !important;





    margin-right: auto !important;





  }











  .suggestions-grid { grid-template-columns: 1fr !important; gap: 10px !important; }





  .message-inner  { padding: 0 12px !important; }





  .message.user .message-body { max-width: 88% !important; }





  .input-wrapper  { padding: 8px 10px 14px !important; width: 100% !important; box-sizing: border-box !important; }





  .input-area     { max-width: 100% !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; }





  .input-box      { width: 100% !important; box-sizing: border-box !important; border-radius: 16px !important; }





}











/* ══════════════════════════════════════════════════════════





   ÇOK KÜÇÜK — 380px altı





══════════════════════════════════════════════════════════ */





@media (max-width: 380px) {





  .welcome-title,





  .welcome-screen h1,





  #welcome-greeting {





    font-size: 1.35rem !important;





    text-align: center !important;





    width: 100% !important;





  }





  .suggestion-card { padding: 12px !important; }





  .cap-pill { font-size: .7rem !important; padding: 4px 9px !important; }





}











/* ══════════════════════════════════════════════════════════





   TABLET — 769–1024px





══════════════════════════════════════════════════════════ */





@media (min-width: 769px) and (max-width: 1024px) {





  .suggestions-grid { max-width: 520px !important; }





  .message-inner { padding: 0 24px !important; }





}











/* ══════════════════════════════════════════════════════════





   BÜYÜK EKRAN — 1440px+





══════════════════════════════════════════════════════════ */





@media (min-width: 1440px) {





  .suggestions-grid { max-width: 640px !important; }





  .message-inner { max-width: 760px !important; padding: 0 24px !important; }





  .input-wrapper { padding: 12px 24px 22px !important; width: 100% !important; box-sizing: border-box !important; }





  .input-area    { max-width: 760px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; }





  .input-box     { width: 100% !important; box-sizing: border-box !important; }





}











/* ══════════════════════════════════════════════════════════





   PRINT





══════════════════════════════════════════════════════════ */





@media print {





  .sidebar, .topbar, .input-wrapper, .mobile-page-header,





  .message-actions, #toast-container, .pwa-promo-banner { display: none !important; }





  .message { page-break-inside: avoid; }





  .message-content { color: #000 !important; font-size: 11pt !important; }





}











/* ══════════════════════════════════════════════════════════





   REDUCED MOTION





══════════════════════════════════════════════════════════ */





@media (prefers-reduced-motion: reduce) {





  *, *::before, *::after {





    animation-duration: .01ms !important;





    transition-duration: .01ms !important;





  }





}











/* ══════════════════════════════════════════════════════════





   SIDEBAR — Drop-down gruplar, sticky nav, infinite scroll





   (redesign.css katmanı — sidebar.php içindeki stilleri tamamlar)





══════════════════════════════════════════════════════════ */











/* Sidebar'ın flex yapısını güçlendir */





.sidebar {





  display: flex !important;





  flex-direction: column !important;





  overflow: hidden !important;





}











/* Sticky nav — logo/top alanının hemen altında sabit kalır */





.sidebar-sticky-nav {





  position: sticky;





  top: 0;





  z-index: 10;





  flex-shrink: 0;





  background: var(--sidebar-bg, var(--surface));





  border-bottom: 1px solid var(--border);





  padding: 2px 4px 4px;





}











/* Nav — sadece içeriği kadar yer kaplar */





.sidebar-nav {





  flex: 0 0 auto !important;





  overflow-y: visible !important;





  overflow-x: hidden;





  max-height: none !important;





  min-height: 0 !important;





  padding: 2px 4px 0 !important;





}











/* Sohbet listesi — kalan alanı doldurur, sonsuz kaydırma */





.sidebar-conversations {





  flex: 1 1 0 !important;





  min-height: 60px !important;





  overflow-y: auto !important;





  overflow-x: hidden !important;





  border-top: 1px solid var(--border);





  scrollbar-width: thin;





  scrollbar-color: var(--border2) transparent;





}





.sidebar-conversations::-webkit-scrollbar { width: 4px; }





.sidebar-conversations::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }











/* Sohbet listesi başlığı */





.conv-list-header {





  display: flex;





  align-items: center;





  justify-content: space-between;





  padding: 6px 12px 4px;





  font-size: .63rem;





  font-weight: 800;





  color: var(--text4);





  text-transform: uppercase;





  letter-spacing: .07em;





  position: sticky;





  top: 0;





  background: var(--sidebar-bg, var(--surface));





  z-index: 2;





  border-bottom: 1px solid var(--border);





}





.conv-list-header a {





  font-size: .63rem;





  font-weight: 600;





  color: var(--accent);





  text-decoration: none;





  opacity: .8;





}





.conv-list-header a:hover { opacity: 1; }











/* Grup etiketi (conv-group-label) — sohbet listesi içinde */





.sidebar-conversations .conv-group-label {





  font-size: .63rem;





  font-weight: 800;





  color: var(--text4);





  padding: 8px 12px 3px;





  text-transform: uppercase;





  letter-spacing: .07em;





  user-select: none;





  position: sticky;





  top: 28px; /* conv-list-header yüksekliği kadar */





  background: var(--sidebar-bg, var(--surface));





  z-index: 1;





}











/* Drop-down grup header — aktif durumda accent rengi */





.sb-group-header[aria-expanded="true"] {





  color: var(--text);





}





.sb-group-header[aria-expanded="true"] .sb-group-icon svg {





  stroke: var(--accent);





}











/* Sonsuz kaydırma yükleme göstergesi */





.conv-infinite-loader {





  display: flex;





  align-items: center;





  justify-content: center;





  gap: 5px;





  padding: 10px 12px;





  font-size: .72rem;





  color: var(--text4);





}





.conv-infinite-loader .typing-dot {





  width: 5px;





  height: 5px;





  border-radius: 50%;





  background: var(--text4);





  animation: convDotBounce .8s infinite alternate;





}





.conv-infinite-loader .typing-dot:nth-child(2) { animation-delay: .15s; }





.conv-infinite-loader .typing-dot:nth-child(3) { animation-delay: .3s; }





@keyframes convDotBounce {





  from { opacity: .3; transform: translateY(0); }





  to   { opacity: 1;  transform: translateY(-3px); }





}











/* Collapsed sidebar — sohbet listesini gizle */





.sidebar.collapsed .sidebar-conversations { display: none !important; }





.sidebar.collapsed .sidebar-sticky-nav .sidebar-nav-item span { display: none; }





.sidebar.collapsed .sidebar-sticky-nav .sidebar-nav-item { justify-content: center; padding: 8px 0; }











/* Küçük ekranlarda nav yüksekliğini azalt */





@media (max-width: 768px) {





  .sidebar-nav {





    max-height: 30vh;





  }





}





@media (max-height: 600px) {





  .sidebar-nav {





    max-height: 20vh;





  }





}