/**


 * GlomaxGPT — Chat Stable Layout v2.0


 * Sohbet kaymasını önler, tüm cihazlarda stabil layout sağlar.


 * EN SON yüklenmeli — tüm diğer CSS'leri override eder.


 */





/* ═══ 1. TEMEL SIFIR ═══ */


*, *::before, *::after { box-sizing: border-box !important; }


html {


  height: 100% !important;


  overflow: hidden !important;


  overscroll-behavior: none !important;


  -webkit-text-size-adjust: 100% !important;


}


body {


  margin: 0 !important; padding: 0 !important;


  height: 100dvh !important; max-height: 100dvh !important;


  overflow: hidden !important; overscroll-behavior: none !important;


  width: 100% !important;


}





/* ═══ 2. APP SHELL ═══ */


.app-with-sidebar {


  display: flex !important; flex-direction: row !important;


  width: 100% !important; height: 100dvh !important;


  max-height: 100dvh !important; overflow: hidden !important;


  position: relative !important;


}





/* ═══ 3. MAIN CONTENT ═══ */


#main, .main-content, #main-content {


  display: flex !important; flex-direction: column !important;


  flex: 1 1 0 !important; min-width: 0 !important;


  height: 100dvh !important; max-height: 100dvh !important;


  min-height: 0 !important; overflow: hidden !important;


  position: relative !important;


}





/* ═══ 4. TOPBAR ═══ */


#topbar, .topbar, header.topbar, .gx-topbar {


  flex-shrink: 0 !important; flex-grow: 0 !important;


  width: 100% !important;


  height: var(--gx-topbar-h, 56px) !important;


  min-height: var(--gx-topbar-h, 56px) !important;


  max-height: var(--gx-topbar-h, 56px) !important;


  position: relative !important; top: auto !important;


  z-index: 100 !important; overflow: hidden !important;


}





/* ═══ 5. DESKTOP SIDEBAR — Sabit genişlik, asla ezilmesin ═══ */


@media (min-width: 769px) {


  #sidebar,


  aside#sidebar,


  .sidebar,


  aside.sidebar {


    position: sticky !important;


    top: 0 !important;


    height: 100dvh !important;


    width: var(--gx-sidebar-w, 260px) !important;


    min-width: var(--gx-sidebar-w, 260px) !important;


    max-width: var(--gx-sidebar-w, 260px) !important;


    flex-shrink: 0 !important;


    flex-grow: 0 !important;


    overflow-y: auto !important;


    overflow-x: hidden !important;


    z-index: var(--z-sidebar, 400) !important;


    display: flex !important;


    flex-direction: column !important;


    transform: none !important;


    visibility: visible !important;


  }


  #sidebar.collapsed,


  aside#sidebar.collapsed,


  .sidebar.collapsed {


    width: var(--gx-sidebar-collapsed, 60px) !important;


    min-width: var(--gx-sidebar-collapsed, 60px) !important;


    max-width: var(--gx-sidebar-collapsed, 60px) !important;


  }


}





/* Sidebar iç içerik — kırılma önleme */


.sidebar-nav-item,


.sidebar-link,


.conv-item,


.sidebar a {


  min-width: 0 !important;


  white-space: nowrap !important;


  overflow: hidden !important;


  text-overflow: ellipsis !important;


}


.sidebar-nav-item {


  display: flex !important;


  align-items: center !important;


  gap: 8px !important;


  white-space: nowrap !important;


  overflow: hidden !important;


  text-overflow: ellipsis !important;


  width: 100% !important;


  box-sizing: border-box !important;


}


.sidebar-nav-item span,


.sidebar-link span,


.conv-item-text {


  overflow: hidden !important;


  text-overflow: ellipsis !important;


  white-space: nowrap !important;


  flex: 1 1 0 !important;


  min-width: 0 !important;


}


/* Sidebar iç badge'ler — küçük, büzülmesin */


.sb-badge-beta,


.sidebar-badge {


  flex-shrink: 0 !important;


  white-space: nowrap !important;


}





/* ═══ 6. CHAT AREA ═══ */


#chat-area {


  display: flex !important; flex-direction: column !important;


  flex: 1 1 0 !important; min-height: 0 !important;


  overflow: hidden !important; position: relative !important;


  width: auto !important;


}


#chat-area.gx-hidden { display: none !important; }





/* ═══ 6. WELCOME MODU ═══ */


#chat-area.gx-no-conv { justify-content: flex-end !important; }


#chat-area.gx-no-conv #messages {


  flex: 1 1 0 !important; min-height: 0 !important;


  overflow-y: auto !important; display: flex !important;


  flex-direction: column !important; justify-content: flex-end !important;


  align-items: stretch !important; padding: 0 !important;


}


#chat-area.gx-no-conv #input-area {


  flex-shrink: 0 !important; flex-grow: 0 !important;


  max-width: 100% !important; width: 100% !important;


  margin: 0 auto !important;


  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;


}





/* ═══ 7. MESSAGES ═══ */


#messages {


  flex: 1 1 0 !important; min-height: 0 !important;


  overflow-y: auto !important; overflow-x: hidden !important;


  -webkit-overflow-scrolling: touch !important;


  overscroll-behavior-y: contain !important;


  display: flex !important; flex-direction: column !important;


  align-items: stretch !important;


  justify-content: flex-end !important;


  padding: 20px 0 16px !important;


  scroll-behavior: smooth !important;


  width: 100% !important; position: relative !important;


}


#messages.has-messages { justify-content: flex-start !important; }





/* ═══ 8. INPUT AREA ═══ */


#input-area {


  flex-shrink: 0 !important; flex-grow: 0 !important;


  position: relative !important; z-index: 20 !important;


  width: 100% !important;


  padding: 8px 16px max(16px, env(safe-area-inset-bottom, 16px)) !important;


  background: transparent !important; overflow: visible !important;


}





/* ═══ 9. MESAJ SATIRLARI — hem .msg-wrapper hem .message yapısı ═══ */


#messages > .msg-wrapper,


#messages > .message {


  flex-shrink: 0 !important; width: 100% !important;


  box-sizing: border-box !important;


  position: relative !important;


   /* Message rows use the full width of the conversation pane. */


}





/* ── .msg-wrapper (PHP render) ── */


.msg-wrapper {


  display: flex !important; max-width: 100% !important;


  margin: 0 auto !important; padding: 3px 20px !important;


  width: 100% !important; box-sizing: border-box !important;


  gap: 10px !important; align-items: flex-end !important;


}


.msg-wrapper.user  { flex-direction: row-reverse !important; align-items: flex-end !important; }


.msg-wrapper.ai, .msg-wrapper.assistant { flex-direction: row !important; align-items: flex-start !important; }





/* ── .message (JS/app.js render) ── */


.message {


  display: block !important; width: 100% !important;


  max-width: 100% !important; margin: 0 auto !important;


  box-sizing: border-box !important; padding: 2px 0 !important;


  position: relative !important;


}


.message .message-inner {


  display: flex !important; gap: 10px !important;


  width: 100% !important; box-sizing: border-box !important;


  padding: 3px 20px !important;


}


.message.user .message-inner { flex-direction: row-reverse !important; align-items: flex-end !important; }


.message.assistant .message-inner,


.message.ai .message-inner { flex-direction: row !important; align-items: flex-start !important; }





/* Avatar */


.message .message-avatar {


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


  border-radius: 50% !important; flex-shrink: 0 !important;


  display: flex !important; align-items: center !important;


  justify-content: center !important; font-size: 12px !important;


  font-weight: 700 !important; overflow: hidden !important; margin-top: 2px !important;


}


.message.user .message-avatar { background: var(--surface2, rgba(255,255,255,.1)) !important; color: var(--text, #e8f4ff) !important; }


.message.assistant .message-avatar, .message.ai .message-avatar { background: var(--surface2, #1e1e2e) !important; color: var(--text, #e8f4ff) !important; }


[data-theme="light"] .message.user .message-avatar { background: #e8e8e8 !important; color: #1a1a1a !important; }


[data-theme="light"] .message.assistant .message-avatar, [data-theme="light"] .message.ai .message-avatar { background: #f0f0f5 !important; color: #0f172a !important; }


.message .message-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; }





/* Gövde */


.message .message-body { flex: 1 !important; min-width: 0 !important; max-width: 100% !important; }





/* Kullanıcı mesajı içerik balonu */


.message.user .message-content {


  display: inline-block !important;


  background: rgba(255,255,255,0.10) !important;


  color: var(--text, #e8f4ff) !important;


  padding: 9px 16px !important;


  border-radius: 18px 18px 4px 18px !important;


  max-width: 82% !important;


  margin-left: auto !important;


  border: 1px solid rgba(255,255,255,0.12) !important;


  word-break: break-word !important;


  font-size: 0.9375rem !important;


  line-height: 1.65 !important;


}


[data-theme="light"] .message.user .message-content {


  background: #f0ede8 !important; color: #1a1a1a !important; border: none !important;


}





/* AI mesajı içerik */


.message.assistant .message-content,


.message.ai .message-content {


  background: none !important; border: none !important; box-shadow: none !important;


  padding: 2px 0 0 !important; color: var(--text, #e8f4ff) !important;


  font-size: 0.9375rem !important; line-height: 1.65 !important; word-break: break-word !important;


}


[data-theme="light"] .message.assistant .message-content,


[data-theme="light"] .message.ai .message-content { color: #1a1a1a !important; }





/* Aksiyon bar — her zaman flex, yatay, clear:both ezildi */


.message-actions-bar {


  display: flex !important;


  flex-direction: row !important;


  align-items: center !important;


  padding: 2px 20px 4px 62px !important;


  min-height: 28px !important;


  width: 100% !important;


  box-sizing: border-box !important;


  clear: none !important;


  float: none !important;


}


.message.user .message-actions-bar {


  padding: 2px 62px 4px 20px !important;


  justify-content: flex-end !important;


}


.message.assistant .message-actions-bar,


.message.ai .message-actions-bar {


  padding: 2px 20px 4px 62px !important;


  justify-content: flex-start !important;


}





/* Aksiyon buton grubu — daima yatay */


.message-actions,


.msg-actions,


.msg-actions-user {


  display: flex !important;


  flex-direction: row !important;


  align-items: center !important;


  gap: 2px !important;


  flex-wrap: nowrap !important;


  /* Asistan: her zaman görünür; user: hover'da */


  opacity: 1 !important;


  pointer-events: auto !important;


}





/* Msg action butonları */


.msg-action-btn {


  display: inline-flex !important;


  align-items: center !important;


  justify-content: center !important;


  background: none !important;


  border: none !important;


  cursor: pointer !important;


  color: var(--text2, rgba(255,255,255,0.38)) !important;


  padding: 5px 6px !important;


  border-radius: 6px !important;


  min-width: 28px !important;


  min-height: 28px !important;


  transition: background 0.12s, color 0.12s !important;


  flex-shrink: 0 !important;


  line-height: 1 !important;


}


.msg-action-btn:hover {


  background: var(--bg-hover, rgba(255,255,255,0.08)) !important;


  color: var(--text, #e8f4ff) !important;


}


[data-theme="light"] .msg-action-btn { color: rgba(0,0,0,0.38) !important; }


[data-theme="light"] .msg-action-btn:hover { background: rgba(0,0,0,0.06) !important; color: #1a1a1a !important; }


.msg-action-btn svg { display: block !important; flex-shrink: 0 !important; }





/* Ardışık mesaj boşlukları */


#messages > .message + .message { margin-top: 1px !important; }


#messages > .message.user + .message.assistant,


#messages > .message.assistant + .message.user { margin-top: 12px !important; }


#messages > .message:first-child { margin-top: 0 !important; }





/* Mobil mesaj */


@media (max-width: 768px) {


  .message .message-inner { padding: 3px 10px !important; }


  .message .message-actions-bar { padding-left: 48px !important; padding-right: 10px !important; }


  .message.user .message-actions-bar { padding-right: 48px !important; padding-left: 10px !important; }


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


  .message .message-avatar { width: 28px !important; height: 28px !important; min-width: 28px !important; }


  .msg-wrapper { padding: 3px 10px !important; }


  .msg-wrapper.user .msg-bubble,


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


}





/* ═══ 10. WELCOME SCREEN ═══ */


#welcome-screen, .welcome-screen { transition: opacity 0.15s ease !important; flex-shrink: 0 !important; }


#welcome-screen.gx-hidden, .welcome-screen.gx-hidden {


  display: none !important; opacity: 0 !important; pointer-events: none !important;


}





/* ═══ 11. SCROLLBAR ═══ */


#messages::-webkit-scrollbar { width: 4px !important; }


#messages::-webkit-scrollbar-track { background: transparent !important; }


#messages::-webkit-scrollbar-thumb { background: var(--border2, rgba(128,128,128,0.3)) !important; border-radius: 4px !important; }





/* ═══ 12. İÇERİK TAŞMASI ÖNLEYİCİ ═══ */


img, video, iframe, embed, object, table { max-width: 100% !important; }


pre { max-width: 100% !important; overflow-x: auto !important; white-space: pre !important; }


code { word-break: break-word !important; }





/* ═══ 13. SAFE AREA ═══ */


@supports (padding: max(0px)) {


  #input-area { padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important; }


  #chat-area.gx-no-conv #input-area { padding-bottom: max(24px, env(safe-area-inset-bottom, 24px)) !important; }


  .app-with-sidebar {


    padding-left: env(safe-area-inset-left, 0px) !important;


    padding-right: env(safe-area-inset-right, 0px) !important;


  }


}





/* ═══ 14. MOBİL (≤768px) ═══ */


@media (max-width: 768px) {


  .app-with-sidebar { flex-direction: column !important; }





  #sidebar, aside.sidebar, aside#sidebar, body > .sidebar {


    position: fixed !important; top: 0 !important; left: 0 !important;


    width: min(85vw, 300px) !important; min-width: unset !important; max-width: 300px !important;


    height: 100dvh !important; z-index: 500 !important;


    transform: translateX(-100%) !important;


    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1) !important;


    will-change: transform !important;


    overflow-y: auto !important; overflow-x: hidden !important;


  }


  body.sidebar-open #sidebar,


  body.sidebar-open aside.sidebar { transform: translateX(0) !important; }





  #main, .main-content, #main-content {


    width: 100% !important; height: 100dvh !important;


  }





  #topbar, .topbar, header.topbar {


    height: 52px !important; min-height: 52px !important; max-height: 52px !important;


  }





  #messages { padding: 12px 0 max(120px, calc(100px + env(safe-area-inset-bottom, 20px))) !important; scroll-padding-bottom: max(140px, calc(120px + env(safe-area-inset-bottom, 20px))) !important; }





  .msg-wrapper {


    max-width: 100% !important;


    padding-left: 10px !important; padding-right: 10px !important;


    gap: 8px !important;


  }





  #input-area { padding: 6px 10px max(14px, env(safe-area-inset-bottom, 14px)) !important; }





  #chat-area.gx-no-conv #input-area {


    max-width: 100% !important;


    padding-left: 10px !important; padding-right: 10px !important;


  }





  button, [role="button"], a[role="button"],


  input[type="submit"], input[type="button"] {


    min-height: 44px !important;


    touch-action: manipulation !important;


    -webkit-tap-highlight-color: transparent !important;


  }





  input, textarea, select { font-size: 16px !important; }





  .sidebar-overlay, #sidebar-overlay {


    display: none;


    position: fixed !important; inset: 0 !important;


    background: rgba(0,0,0,0.55) !important;


    z-index: 490 !important;


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


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


  }


  body.sidebar-open .sidebar-overlay,


  body.sidebar-open #sidebar-overlay { display: block !important; }





  body, html, .app-with-sidebar, #main, .main-content {


    overflow-x: hidden !important; max-width: 100vw !important;


  }


}





/* ═══ 15. TABLET (769px–1024px) ═══ */


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


  .msg-wrapper { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }


  #input-area { padding-left: 16px !important; padding-right: 16px !important; }


  #chat-area.gx-no-conv #input-area { max-width: 100% !important; }


}





/* ═══ 16. DESKTOP (≥1025px) ═══ */


@media (min-width: 1025px) {


  .msg-wrapper { max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; }


}





/* ═══ 17. GENİŞ EKRAN (≥1400px) ═══ */


@media (min-width: 1400px) {


  .msg-wrapper { max-width: 100% !important; }


}





/* ═══ 18. REDUCED MOTION ═══ */


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


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


    animation-duration: 0.01ms !important;


    animation-iteration-count: 1 !important;


    transition-duration: 0.01ms !important;


    scroll-behavior: auto !important;


  }


}





/* ═══ 19. YATAY TAŞMA KİLİDİ ═══ */


html, body, .app-with-sidebar, #main, .main-content, #main-content, #chat-area, #messages {


  max-width: 100vw !important; overflow-x: hidden !important;


}





/* ═══ 20. DESKTOP TOPBAR DÜZELTME ═══ */


@media (min-width: 769px) {


  /* Topbar her zaman tek satır, flex row */


  #topbar, .topbar, header.topbar {


    display: flex !important;


    flex-direction: row !important;


    align-items: center !important;


    justify-content: space-between !important;


    overflow: visible !important;


    padding: 0 16px !important;


    gap: 8px !important;


  }





  /* topbar-left ve topbar-right yan yana */


  .topbar-left {


    display: flex !important;


    flex-direction: row !important;


    align-items: center !important;


    gap: 6px !important;


    flex-shrink: 0 !important;


    min-width: 0 !important;


  }





  .topbar-center {


    display: flex !important;


    flex-direction: row !important;


    align-items: center !important;


    justify-content: center !important;


    flex: 1 1 0 !important;


    min-width: 0 !important;


  }





  .topbar-right {


    display: flex !important;


    flex-direction: row !important;


    align-items: center !important;


    gap: 4px !important;


    flex-shrink: 0 !important;


    flex-wrap: nowrap !important;


  }





  /* gx-session-timer — topbar içinde yatay, satır içi */


  .gx-session-timer {


    display: inline-flex !important;


    align-items: center !important;


    flex-shrink: 0 !important;


    white-space: nowrap !important;


  }





  /* gx-font-group — topbar içinde yatay */


  .gx-font-group {


    display: inline-flex !important;


    flex-direction: row !important;


    align-items: center !important;


    flex-shrink: 0 !important;


  }


}





/* ═══ 21. DESKTOP — Welcome screen ortası ═══ */


@media (min-width: 769px) {


  #welcome-screen, .welcome-screen {


    display: flex !important;


    flex-direction: column !important;


    align-items: center !important;


    justify-content: center !important;


    width: 100% !important;


    max-width: 700px !important;


    margin: 0 auto !important;


    padding: 40px 20px 24px !important;


    box-sizing: border-box !important;


    flex-shrink: 0 !important;


  }


}





/* ═══ 22. DESKTOP — Input alanı sabit genişlik ═══ */


@media (min-width: 769px) {


  #input-area {


    padding-left: 0 !important;


    padding-right: 0 !important;


    display: flex !important;


    flex-direction: column !important;


    align-items: center !important;


  }





  /* chat-input-container ve gx-bar-row ortalanmış */


  #chat-input-container,


  .gx-bar-row,


  .gx-composer-wrap,


  .gx-gemini-bar .gx-bar-row {


    max-width: 100% !important;


    width: 100% !important;


    margin-left: auto !important;


    margin-right: auto !important;


    box-sizing: border-box !important;


  }





  #ai-disclaimer-bar,


  .ai-disclaimer-bar,


  #gx-quota-status-bar {


    max-width: 100% !important;


    width: 100% !important;


    margin-left: auto !important;


    margin-right: auto !important;


    text-align: center !important;


  }


}