/*

 * GlomaxGPT — Merkezi Mobil & Responsive CSS

 * ============================================================

 * Tüm sayfalar için tek kaynak mobil uyum dosyası.

 * Breakpoints: 1024px (tablet), 768px (mobile), 480px (small), 360px (xs)

 * ============================================================

 */

/* ══ 1. TEMEL LAYOUT — App Shell (Tüm Cihazlar) ══════════════ */

/* Body — masaüstü */

body {

  width: 100% !important;

  height: 100dvh !important;

  overflow: hidden !important;

  margin: 0 !important;

  padding: 0 !important;

}

/* App wrapper — masaüstü */

.app-with-sidebar {

  display: flex !important;

  flex-direction: row !important;

  width: 100% !important;

  height: 100dvh !important;

  overflow: hidden !important;

  flex: 1 1 0 !important;

}

/* Sidebar — masaüstü: sticky, tam yükseklik */

.app-with-sidebar > aside.sidebar,

.app-with-sidebar > .sidebar,

body > aside.sidebar,

body > .sidebar {

  position: sticky !important;

  top: 0 !important;

  height: 100dvh !important;

  align-self: flex-start !important;

  flex-shrink: 0 !important;

  overflow-y: auto !important;

  overflow-x: hidden !important;

}

/* Main content — masaüstü */

.main-content,

#main-content {

  flex: 1 1 0 !important;

  min-width: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  height: 100dvh !important;

  min-height: 0 !important;

  overflow: hidden !important;

}

/* Sidebar — masaüstü varsayılan */

.sidebar,

aside.sidebar,

nav.sidebar {

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

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

  flex-shrink: 0 !important;

  height: 100dvh !important;

  position: sticky !important;

  top: 0 !important;

  overflow-y: auto !important;

  overflow-x: hidden !important;

  display: flex !important;

  flex-direction: column !important;

  z-index: 200 !important;

}

/* Main content — masaüstü */

.main-content,

#main-content {

  flex: 1 1 0 !important;

  min-width: 0 !important;

  overflow: hidden !important;

  display: flex !important;

  flex-direction: column !important;

  height: 100dvh !important;

}

/* Sayfa içi scroll alanı */

.page-main,

.explore-main,

.settings-main,

.profile-main,

.pricing-main,

.history-main,

.images-main,

.voice-main,

.models-main,

.tools-main,

.plugins-main,

.projects-main,

.support-main,

.stats-main {

  flex: 1 1 0 !important;

  overflow-y: auto !important;

  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch !important;

  min-height: 0 !important;

}

/* ══ 2. MOBILE PAGE HEADER — her sayfada ortak ══════════════ */

.mobile-page-header {

  display: none !important; /* masaüstünde gizli */

  align-items: center !important;

  justify-content: space-between !important;

  padding: 0 16px !important;

  height: 52px !important;

  min-height: 52px !important;

  flex-shrink: 0 !important;

  background: var(--bg-main, var(--bg, #000000)) !important;

  border-bottom: 1px solid var(--border-subtle, var(--border, rgba(255,255,255,.11))) !important;

  position: sticky !important;

  top: 0 !important;

  z-index: 300 !important;

  width: 100% !important;

}

.mobile-page-header .mph-left,

.mobile-page-header .mph-right {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

}

.mobile-hamburger,

.mobile-header-btn {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 40px !important;

  height: 40px !important;

  border-radius: 10px !important;

  background: none !important;

  border: none !important;

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

  cursor: pointer !important;

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

  transition: background .12s !important;

}

.mobile-hamburger:hover,

.mobile-header-btn:hover {

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

}

/* Sidebar overlay — mobilde sidebar açık olduğunda arka plan karart */

.sidebar-overlay {

  display: none !important;

  position: fixed !important;

  inset: 0 !important;

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

  z-index: 9998 !important;

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

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

  opacity: 1 !important;

  transition: opacity .25s ease !important;

  cursor: pointer !important;

}

.sidebar-overlay.show,

.sidebar-overlay.active {

  display: block !important;

  opacity: 1 !important;

  pointer-events: auto !important;

}

/* ══ 3. TABLET (≤1024px) ════════════════════════════════════ */

@media (max-width: 1024px) {

  :root {

    --sidebar-width: 240px !important;

  }

  .explore-layout,

  .page-content,

  .page-container {

    padding-left: 16px !important;

    padding-right: 16px !important;

  }

  .tools-grid {

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;

  }

}

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

@media (max-width: 768px) {

  /* HTML/Body */

  html {

    overflow-x: hidden !important;

    height: 100% !important;

    max-width: 100vw !important;

    width: 100% !important;

  }

  body {

    overflow: hidden !important;

    overflow-x: hidden !important;

    height: 100dvh !important;

    flex-direction: column !important;

    display: flex !important;

    font-size: 14px !important;

    max-width: 100vw !important;

    width: 100% !important;

  }

  /* Tüm elementler kutu sınırını aşmasın */

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

    box-sizing: border-box !important;

  }

  /* Resimler, medya taşmasın */

  img, video, iframe, embed, object, svg {

    max-width: 100% !important;

  }

  /* Kod blokları yatay scroll — sayfa taşmasın */

  pre {

    overflow-x: auto !important;

    max-width: 100% !important;

    white-space: pre !important;

  }

  /* Tablo yatay scroll */

  table {

    display: block !important;

    overflow-x: auto !important;

    max-width: 100% !important;

  }

  /* body:has(.sidebar) — CSS4 desteklenmeyen tarayıcılar için fallback */

  body.explore-page,

  body.help-page,

  body.history-page,

  body.settings-page,

  body.profile-page,

  body.pricing-page,

  body.plugins-page,

  body.projects-page,

  body.stats-page,

  body.notif-page,

  body.files-page,

  body.favorites-page,

  body.prompt-page,

  body.changelog-page,

  body.shared-page,

  body.subscription-page,

  body.code-page,

  body.voice-page,

  body.images-page,

  body.tools-page,

  body.chat-page {

    flex-direction: column !important;

    height: 100dvh !important;

    overflow: hidden !important;

    display: flex !important;

  }

  /* iOS zoom önleme */

  input[type="text"],

  input[type="email"],

  input[type="password"],

  input[type="search"],

  input[type="number"],

  textarea,

  select {

    font-size: 16px !important;

  }

  /* ── App shell: ROW — sidebar fixed overlay olarak çalışır ── */

  .app-with-sidebar {

    flex-direction: row !important;

    overflow: hidden !important;

    height: 100dvh !important;

    width: 100% !important;

    display: flex !important;

    min-height: 0 !important;

    max-height: 100dvh !important;

    position: relative !important;

  }

  /* Sidebar — mobilde gizli, body'ye direkt bağlı olduğunda da çalışır */

  body > .sidebar,

  body > aside.sidebar {

    position: fixed !important;

    left: 0 !important;

    top: 0 !important;

    height: 100dvh !important;

    width: 85vw !important;

    max-width: 360px !important;

    z-index: 9999 !important;

    transform: translateX(-100%) !important;

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

  }

  body > .sidebar.open,

  body > aside.sidebar.open {

    transform: translateX(0) !important;

  }

  /* Sidebar: mobilde KESINLIKLE fixed + gizli — visibility ile FOUC önle */

  #sidebar,

  .sidebar,

  aside.sidebar,

  nav.sidebar {

    position: fixed !important;

    left: 0 !important;

    top: 0 !important;

    height: 100dvh !important;

    width: 85vw !important;

    min-width: 0 !important;

    max-width: 360px !important;

    z-index: 9999 !important;

    transform: translateX(-100%) !important;

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

    visibility: hidden !important;

    box-shadow: none !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;

    flex-shrink: 0 !important;

    align-self: auto !important;

  }

  /* Sidebar açık */

  #sidebar.open,

  .sidebar.open,

  .sidebar.show,

  body.sidebar-open #sidebar,

  body.sidebar-open .sidebar {

    transform: translateX(0) !important;

    visibility: visible !important;

    box-shadow: 4px 0 32px rgba(0,0,0,0.45) !important;

  }

  /* Mobilde sidebar varsayılan olarak gizli — FOUC önleme yeterli */

  /* Main content: mobilde tam ekran — sidebar'ın yanında değil, altında */

  .main-content,

  #main-content {

    width: 100% !important;

    max-width: 100% !important;

    flex: 1 1 0 !important;

    height: 0 !important;

    min-height: 0 !important;

    overflow: hidden !important;

    display: flex !important;

    flex-direction: column !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    min-width: 0 !important;

    position: relative !important;

    z-index: 1 !important;

  }

  /* Mobile header göster */

  .mobile-page-header {

    display: flex !important;

    flex-shrink: 0 !important;

    height: 52px !important;

    min-height: 52px !important;

    max-height: 52px !important;

  }

  /* Topbar: tüm sayfalarda görünür (inner-topbar.php ile yönetiliyor) */

  .topbar,

  .inner-topbar {

    display: flex !important;

  }

  body.chat-page .topbar {

    display: flex !important;

  }

  /* ── TÜM sayfa scroll alanları — evrensel kural ── */

  .page-main,

  #page-main,

  .explore-main,

  .settings-main,

  .profile-main,

  .pricing-main,

  .history-main,

  .images-main,

  .voice-main,

  .models-main,

  .tools-main,

  .plugins-main,

  .projects-main,

  .help-main,

  .notif-main,

  .stats-main,

  .files-main,

  .favorites-main,

  .prompt-main,

  .changelog-main,

  .shared-main,

  .subscription-main {

    flex: 1 1 0 !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;

    min-height: 0 !important;

    height: auto !important;

    max-height: none !important;

    width: 100% !important;

  }

  /* ── Chat sayfası özel ── */

  body.chat-page #messages,

  #messages {

    flex: 1 1 0 !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;

    min-height: 0 !important;

    padding-bottom: 140px !important;

  }

  body.chat-page #input-area,

  

  #input-area {

  

  flex-shrink: 0 !important;

  

  width: 100% !important;

  

  position: sticky !important;

  

  bottom: 0 !important;

  

  z-index: 50 !important;

  

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

  }

  /* ── Input toolbar mobil ── */

  .input-area {

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

  }

  .input-container {

    border-radius: 12px !important;

  }

  .input-toolbar {

    padding: 2px 4px 4px !important;

    gap: 6px !important;

    flex-wrap: nowrap !important;

    overflow-x: auto !important;

    scrollbar-width: none !important;

  }

  .input-toolbar::-webkit-scrollbar { display: none !important; }

  .input-model-pill {

    max-width: 120px !important;

    font-size: 11px !important;

    padding: 0 9px !important;

    flex-shrink: 0 !important;

  }

  .input-model-pill span {

    max-width: 90px !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

  }

  #pref-btn {

    display: none !important;

  }

  /* ── Grid'ler ── */

  .tools-grid,

  .cards-grid,

  .grid-3,

  .grid-4 {

    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;

    gap: 10px !important;

  }

  .grid-2 {

    grid-template-columns: 1fr 1fr !important;

    gap: 10px !important;

  }

  /* ── Explore sayfası ── */

  .explore-layout {

    padding: 16px 14px 80px !important;

  }

  .explore-hero {

    padding: 28px 16px 24px !important;

    margin-bottom: 24px !important;

  }

  .explore-hero h1 {

    font-size: 1.4rem !important;

  }

  .explore-hero-stats {

    gap: 20px !important;

    flex-wrap: wrap !important;

  }

  /* ── Welcome ekranı ── */

  .welcome-screen {

    padding: 24px 16px !important;

    min-height: calc(100dvh - 52px - 120px) !important;

  }

  .welcome-title,

  #welcome-title {

    font-size: 1.4rem !important;

  }

  .welcome-quick-actions {

    gap: 6px !important;

    max-width: 100% !important;

  }

  .wqa-card {

    padding: 8px 12px !important;

    font-size: 12px !important;

  }

  /* ── Modal ── */

  .modal-content,

  .modal-box {

    width: calc(100vw - 24px) !important;

    max-width: 100% !important;

    border-radius: 16px !important;

    max-height: 90dvh !important;

    overflow-y: auto !important;

  }

  /* ── Sb-more-popup ── */

  .sb-more-popup {

    position: fixed !important;

    left: 8px !important;

    right: 8px !important;

    bottom: 80px !important;

    top: auto !important;

    max-width: calc(100vw - 16px) !important;

    min-width: 0 !important;

    width: auto !important;

    max-height: 65dvh !important;

    border-radius: 20px !important;

    z-index: 9999 !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

  }

  /* ── Pref panel ── */

  .pref-panel {

    left: 10px !important;

    right: 10px !important;

    width: auto !important;

    bottom: calc(100% + 6px) !important;

  }

  /* ── Model popup ── */

  .model-popup {

    left: 50% !important;

    right: auto !important;

    transform: translateX(-50%) !important;

    max-width: min(280px, calc(100vw - 24px)) !important;

  }

  /* ── Mesajlar ── */

  .msg-wrapper {

    padding: 4px 12px !important;

  }

  .msg-wrapper.user .msg-content {

    max-width: 88% !important;

  }

  /* ── Sayfa başlıkları ── */

  h1.page-title {

    font-size: 1.4rem !important;

  }

  h2.section-title {

    font-size: 1.1rem !important;

  }

  /* ── Card ── */

  .card,

  .tool-card {

    border-radius: 12px !important;

  }

  /* ── Auth sayfaları ── */

  .auth-card {

    width: calc(100vw - 32px) !important;

    margin: 20px auto !important;

    padding: 24px 20px !important;

  }

  /* ── Pricing ── */

  .pricing-cards {

    grid-template-columns: 1fr !important;

    gap: 16px !important;

  }

  /* ── Settings ── */

  .settings-sidebar {

    width: 100% !important;

    border-right: none !important;

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

  }

  .settings-layout {

    flex-direction: column !important;

  }

  /* ── Tablo scroll — files.php ve benzeri sayfalar ── */

  .files-table,

  .daily-table,

  table:not(.no-scroll) {

    display: block !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;

    max-width: 100% !important;

    white-space: nowrap !important;

  }

  table:not(.no-scroll) th,

  table:not(.no-scroll) td {

    white-space: nowrap !important;

  }

  .table-wrap {

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;

    max-width: 100% !important;

  }

  /* ── Favorites / Files / Plugins sayfa içi düzeltme ── */

  .fav-item,

  .conv-item {

    flex-wrap: nowrap !important;

  }

  .fav-body,

  .conv-info {

    min-width: 0 !important;

    overflow: hidden !important;

  }

  .page-wrap,

  .plugins-layout,

  .history-layout,

  .fav-list {

    padding-left: 12px !important;

    padding-right: 12px !important;

  }

  /* Taşma önleme — genel */

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

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

}

/* ══ 5. KÜÇÜK MOBİL (≤480px) ════════════════════════════════ */

@media (max-width: 480px) {

  .tools-grid {

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

    gap: 8px !important;

  }

  .grid-2 {

    grid-template-columns: 1fr !important;

  }

  .explore-hero h1 {

    font-size: 1.2rem !important;

  }

  /* Mobil: sidebar collapse butonunu gizle */

  #sidebar-collapse-btn { display: none !important; }

  .input-model-pill {

    max-width: 110px !important;

    font-size: 10px !important;

  }

  .welcome-title,

  #welcome-title {

    font-size: 1.2rem !important;

  }

  .wqa-card {

    padding: 7px 10px !important;

    font-size: 11px !important;

  }

  .msg-bubble.user {

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

  }

}

/* ══ 6. ÇOK KÜÇÜK (≤360px) ══════════════════════════════════ */

@media (max-width: 360px) {

  .tools-grid {

    grid-template-columns: 1fr 1fr !important;

  }

  .explore-layout {

    padding: 12px 10px 80px !important;

  }

  .input-model-pill {

    max-width: 90px !important;

    font-size: 9px !important;

  }

}

/* ══ 7. iOS SAFE AREA ════════════════════════════════════════ */

@supports (height: 100dvh) {

  .app-with-sidebar { min-height: 100dvh !important; }

  .sidebar { height: 100dvh !important; }

  .main-content, #main-content { height: 100dvh !important; }

}

@supports (padding-bottom: env(safe-area-inset-bottom)) {

  #input-area {

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

  }

  .mobile-page-header {

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

  }

}

/* ══ 8. PRINT ════════════════════════════════════════════════ */

@media print {

  .sidebar,

  .sidebar-overlay,

  .mobile-page-header,

  .topbar,

  .inner-topbar,

  #input-area,

  .space-orbs {

    display: none !important;

  }

  .main-content,

  .page-main {

    height: auto !important;

    overflow: visible !important;

  }

  body { overflow: visible !important; }

}

/* ══ 8b. IMAGE-GEN SAYFASI — Mobil özel ═══════════════════════ */

@media (max-width: 768px) {

  body.image-gen-page {

    overflow: hidden !important;

    height: 100dvh !important;

  }

  body.image-gen-page #main-content {

    height: 0 !important;

    flex: 1 1 0 !important;

    overflow: hidden !important;

  }

  body.image-gen-page .ig-main {

    flex: 1 1 0 !important;

    min-height: 0 !important;

    overflow: hidden !important;

    display: flex !important;

    flex-direction: column !important;

  }

  body.image-gen-page .ig-messages {

    flex: 1 1 0 !important;

    min-height: 0 !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;

    padding: 10px 0 6px !important;

  }

  body.image-gen-page .ig-input-wrapper {

    flex-shrink: 0 !important;

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

  }

  body.image-gen-page .ig-input-area {

    border-radius: 13px !important;

    max-width: 100% !important;

  }

  /* Options bar — küçük ekranda ikon + kısa etiket */

  body.image-gen-page .ig-opt-btn span,

  body.image-gen-page .ig-opt-pill span:not(.ig-gen-step-icon) {

    max-width: 52px !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

  }

  body.image-gen-page .ig-options-bar {

    gap: 2px !important;

    padding: 3px 8px 6px !important;

  }

  /* Kota pill küçük */

  body.image-gen-page .ig-quota-bar {

    padding: 3px 10px !important;

    font-size: .65rem !important;

    gap: 4px !important;

  }

  /* Mesaj satırı padding küçüt */

  body.image-gen-page .ig-msg-row {

    padding: 3px 12px !important;

  }

  /* Welcome ekranı */

  body.image-gen-page .ig-welcome h1 {

    font-size: 1.2rem !important;

  }

  body.image-gen-page .ig-welcome p {

    font-size: .82rem !important;

  }

  body.image-gen-page .ig-prompt-chips {

    flex-wrap: wrap !important;

    gap: 5px !important;

    padding: 0 12px !important;

  }

  /* Üretilen görsel kartı */

  body.image-gen-page .ig-gen-card img,

  body.image-gen-page .ig-img-result {

    max-width: 100% !important;

    height: auto !important;

  }

  /* Topbar — image-gen'de de görünür (inner-topbar.php yönetiyor) */

  body.image-gen-page .topbar,

  body.image-gen-page .inner-topbar {

    display: flex !important;

  }

  /* Mobil header: gizle (inner-topbar kullanıyoruz) */

  body.image-gen-page .mobile-page-header {

    display: none !important;

  }

  /* Dropdown — küçük ekranda tam ekrana yakın */

  body.image-gen-page .ig-dropdown {

    max-width: calc(100vw - 24px) !important;

    min-width: 180px !important;

  }

  /* Active bar küçük */

  body.image-gen-page .ig-active-bar {

    padding: 5px 10px !important;

    gap: 6px !important;

  }

  body.image-gen-page .ig-active-bar-prompt {

    font-size: .72rem !important;

  }

  body.image-gen-page .ig-active-bar-btn {

    padding: 3px 7px !important;

    font-size: .68rem !important;

  }

  body.image-gen-page .ig-active-bar-img {

    width: 30px !important;

    height: 30px !important;

  }

}

@media (max-width: 480px) {

  body.image-gen-page .ig-welcome h1 {

    font-size: 1.05rem !important;

  }

  body.image-gen-page .ig-opt-btn,

  body.image-gen-page .ig-opt-pill {

    padding: 4px 6px !important;

    font-size: .72rem !important;

    gap: 2px !important;

  }

  body.image-gen-page .ig-send-btn {

    width: 30px !important;

    height: 30px !important;

  }

}

/* ══ 9. REDUCED MOTION ═══════════════════════════════════════ */

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

  .sidebar,

  .sidebar-overlay,

  .space-orb,

  .wqa-card,

  .input-send-btn,

  .input-model-pill {

    transition: none !important;

    animation: none !important;

  }

}

/* ══ 10. MASAÜSTÜ TOPBAR — mobilde gizlenen bazı öğeler ══════ */

@media (min-width: 769px) {

  /* Mobil header masaüstünde kesinlikle gizli */

  .mobile-page-header {

    display: none !important;

  }

  /* Sidebar overlay masaüstünde gizli */

  .sidebar-overlay {

    display: none !important;

  }

  /* Topbar görünür */

  .topbar {

    display: flex !important;

  }

  /* Masaüstünde sidebar yatay - flex-direction: row */

  .app-with-sidebar {

    flex-direction: row !important;

  }

  .app-with-sidebar > aside.sidebar,

  .app-with-sidebar > .sidebar {

    position: sticky !important;

    transform: none !important;

    height: 100dvh !important;

  }

}

/* ══ 11. EXPLORE SAYFASI — sidebar + content yatay ══════════ */

@media (min-width: 769px) {

  .app-with-sidebar {

    flex-direction: row !important;

  }

  .sidebar {

    transform: none !important;

  }

  .main-content,

  #main-content {

    margin-left: 0 !important;

  }

}

/* ══ 12. PWA / UYGULAMA MODU — Dokunma & Genel ══════════════ */

/* Dokunma highlight kaldır */

* { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }

/* Yazı seçimine izin ver */

p, span, h1, h2, h3, h4, h5, h6, li, td, th,

.msg-content, .msg-bubble, code, pre {

  -webkit-user-select: text; user-select: text;

}

/* Butonlarda seçimi engelle, hızlı dokunma */

button, a, .btn, .sidebar-item, .conv-item,

.tb-model-btn, .input-btn, .wqa-card,

.mobile-hamburger, .sidebar-icon-btn {

  -webkit-user-select: none;

  user-select: none;

  touch-action: manipulation;

}

/* Dokunma geri bildirimi */

button:active, a:active, .btn:active,

.wqa-card:active, .conv-item:active {

  opacity: 0.75;

  transform: scale(0.98);

  transition: opacity 0.08s, transform 0.08s;

}

/* ── PWA standalone modu ── */

@media (display-mode: standalone),

       (display-mode: window-controls-overlay) {

  body {

    padding-top: env(safe-area-inset-top, 0px);

    overscroll-behavior-y: none !important;

  }

  #topbar, .topbar, .inner-topbar, .mobile-page-header {

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

    height: calc(48px + env(safe-area-inset-top, 0px)) !important;

    min-height: calc(48px + env(safe-area-inset-top, 0px)) !important;

  }

  #input-area, .ig-input-wrapper, #work-input-area {

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

  }

  .sidebar-bottom, .sb-user-area {

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

  }

  html, body { height: 100dvh !important; overflow: hidden !important; }

}

/* ── Mobil uygulama kalitesi ── */

@media (max-width: 768px) {

  body {

    overscroll-behavior-y: none !important;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

  }

  #messages, .page-main { overscroll-behavior-y: contain !important; }

  #input-area { position: sticky !important; bottom: 0 !important; z-index: 100 !important; }

  /* Min dokunma hedefi 44px (Apple HIG) */

  button, .btn, .sidebar-icon-btn,

  .mobile-hamburger, .mobile-header-btn, .conv-item, .input-btn {

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

  }

  .btn-icon, .msg-action-btn, .tb-search-nav {

    padding: 8px !important; min-height: 36px !important; min-width: 36px !important;

  }

  /* iOS zoom önle */

  #message-input, textarea,

  input[type="text"], input[type="search"],

  input[type="email"], input[type="password"] {

    font-size: 16px !important;

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

  }

  /* Sidebar scrollbar gizle */

  #sidebar::-webkit-scrollbar, .sidebar::-webkit-scrollbar {

    display: none !important; width: 0 !important;

  }

  /* Dropdown — mobilde tam genişlik, sheet stili */

  .tb-model-menu, .model-popup {

    left: 8px !important; right: 8px !important;

    width: calc(100vw - 16px) !important;

    max-width: calc(100vw - 16px) !important;

    transform: none !important;

    border-radius: 16px !important;

    max-height: 55dvh !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

  }

  /* Modal — bottom sheet stili */

  .modal, .modal-overlay { align-items: flex-end !important; }

  .modal-content, .modal-box {

    border-radius: 20px 20px 0 0 !important;

    max-height: 90dvh !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

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

  }

}

/* ── iOS safe area (notch / dynamic island / home indicator) ── */

@supports (padding-top: env(safe-area-inset-top)) {

  @media (max-width: 768px) {

    .topbar, #topbar, .inner-topbar {

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

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

    }

    #input-area, .ig-input-wrapper {

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

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

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

    }

    .sidebar-bottom, .sb-user-area, .sb-footer {

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

      margin-bottom: 0 !important;

    }

  }

}

/* ── Bottom sheet slide-up animasyonu ── */

@keyframes slideUpSheet {

  from { transform: translateY(100%); opacity: 0; }

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

}

/* ── PWA Install Banner — input alanının hemen üstünde inline ── */

#pwa-install-banner {

  display: none;

  /* Inline yerleşim — fixed değil */

  margin: 0 12px 8px;

  background: var(--surface, #141414);

  border: 1px solid var(--border, rgba(255,255,255,.12));

  border-radius: 14px;

  padding: 10px 14px;

  flex-shrink: 0;

  align-items: center;

  gap: 10px;

  overflow: hidden;

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

}

#pwa-install-banner.show { display: flex; }

@keyframes pwaSlideDown {

  from { opacity: 0; transform: translateY(-8px); max-height: 0; }

  to   { opacity: 1; transform: translateY(0);    max-height: 80px; }

}

.pwa-banner-icon {

  width: 36px; height: 36px;

  border-radius: 9px;

  flex-shrink: 0;

  object-fit: cover;

}

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

.pwa-banner-title {

  font-size: .83rem;

  font-weight: 600;

  color: var(--text, #fff);

  margin-bottom: 1px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.pwa-banner-sub {

  font-size: .72rem;

  color: var(--text2, #aaa);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.pwa-banner-install {

  padding: 7px 14px;

  background: var(--accent, #00d4ff);

  color: #000;

  border: none;

  border-radius: 9px;

  font-size: .79rem;

  font-weight: 700;

  cursor: pointer;

  white-space: nowrap;

  flex-shrink: 0;

  font-family: inherit;

  touch-action: manipulation;

  transition: opacity .15s;

}

.pwa-banner-install:hover { opacity: .85; }

.pwa-banner-close {

  background: none;

  border: none;

  color: var(--text2, #aaa);

  cursor: pointer;

  padding: 4px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 6px;

  transition: background .12s;

}

.pwa-banner-close:hover { background: var(--surface2, rgba(255,255,255,.08)); }