/**

 * GlomaxGPT — Mobile Space AI Theme v3.0

 * Derin uzay · Kozmik siyah · Mor nebula · Glassmorphism

 * Gerçek HTML class'larıyla tam kapsamlı mobil tema

 */

/* ══ UZAY TOKEN'LARI ════════════════════════════════════════ */

:root {

--sp-bg: #111111;

--sp-glass:      rgba(17,17,17,.93);

--sp-surface:    rgba(255,255,255,.03);

--sp-surface2:   rgba(255,255,255,.06);

--sp-surface3:   rgba(255,255,255,.09);

--sp-violet:     #d4d4d4;

--sp-violet2:    #e0e0e0;

--sp-violet3:    #f0f0f0;

--sp-indigo:     #d4d4d4;

--sp-grad-btn:   linear-gradient(135deg,#333333 0%,#555555 100%);

--sp-glow:       0 0 24px rgba(212,212,212,.15),0 0 60px rgba(212,212,212,.08);

--sp-glow-sm:    0 0 12px rgba(212,212,212,.10);

--sp-glow-xs:    0 0 6px rgba(212,212,212,.07);

--sp-bub-bg:     rgba(46,46,46,.6);

--sp-bub-brd:    #333333;

--sp-bub-text:   #f0f0f0;

--sp-inp-bg:     #1e1e1e;

--sp-inp-brd:    #333333;

--sp-inp-focus:  #555555;

--sp-text:       #f0f0f0;

--sp-text2:      #999999;

--sp-text3:      #555555;

--sp-border:     #2e2e2e;

--sp-border2:    #444444;

--sp-topbar-h:   54px;

--sp-r-bub:      20px;

--sp-r-inp:      26px;

--sp-safe-b:     max(16px,env(safe-area-inset-bottom,16px));

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

}

[data-theme="light"] {

--sp-bg: #f5f0eb;

--sp-glass: rgba(245,240,235,.97);

--sp-surface:    rgba(58,53,48,.04);

--sp-surface2:   rgba(58,53,48,.07);

--sp-surface3:   rgba(58,53,48,.10);

--sp-inp-bg: #f0ebe5;

--sp-inp-brd: #c8c2bb;

--sp-inp-focus: #3a3530;

--sp-text:  #1a1a1a;

--sp-text2: #6b6560;

--sp-text3: #a09890;

--sp-border:  #d5cfc8;

--sp-border2: #b0aaa3;

--sp-bub-bg:   #e4dfd8;

--sp-bub-brd:  #d5cfc8;

--sp-bub-text: #1a1a1a;

}

/* ══ ANİMASYONLAR ═══════════════════════════════════════════ */

@keyframes sp-nebula {

  0%,100%{opacity:.08;transform:scale(1);}

  50%{opacity:.18;transform:scale(1.06);}

}

@keyframes sp-float-in {

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

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

}

@keyframes sp-bounce {

  0%,60%,100%{transform:translateY(0) scale(1);opacity:.45;}

  30%{transform:translateY(-8px) scale(1.2);opacity:1;}

}

/* ══ MOBİL TEMA @media 768px ════════════════════════════════ */

@media (max-width:768px) {

/* ── SAYFA ZEMİNİ ─────────────────────────────────────────── */

html,body {

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

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

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

}

body.chat-page {

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

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

  /* position:relative KALDIRILDI — stacking context sorunu yaratıyor */

}

/* Nebula efektleri: animation YOK (iOS Safari pointer-events bug), z-index: -1 */

body.chat-page::before {

  content:'' !important; position:fixed !important;

  top:-15% !important; left:-15% !important;

  width:65% !important; height:65% !important;

  background:radial-gradient(ellipse,rgba(109,40,217,.12) 0%,transparent 70%) !important;

  border-radius:50% !important; pointer-events:none !important;

  z-index:-1 !important; /* -1: her şeyin arkasında kesinlikle */

  touch-action:none !important; user-select:none !important;

}

body.chat-page::after {

  content:'' !important; position:fixed !important;

  bottom:-12% !important; right:-12% !important;

  width:55% !important; height:55% !important;

  background:radial-gradient(ellipse,rgba(59,130,246,.07) 0%,transparent 70%) !important;

  border-radius:50% !important; pointer-events:none !important;

  z-index:-1 !important;

  touch-action:none !important; user-select:none !important;

}

/* ── TOPBAR ───────────────────────────────────────────────── */

.topbar,.chat-topbar,#topbar {

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

  height:var(--sp-topbar-h) !important; min-height:var(--sp-topbar-h) !important;

  max-height:var(--sp-topbar-h) !important;

  padding:0 14px !important; padding-top:var(--sp-safe-t) !important;

  background:var(--bg) !important;

  backdrop-filter:blur(22px) saturate(180%) !important;

  -webkit-backdrop-filter:blur(22px) saturate(180%) !important;

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

  box-shadow:0 1px 0 rgba(139,92,246,.08),0 4px 24px rgba(0,0,0,.5) !important;

  position:sticky !important; top:0 !important;

  z-index:400 !important; /* input-area(500) altında, sidebar(9999) altında */

  flex-shrink:0 !important;

  pointer-events:auto !important;

}

#topbar-title,.topbar-title,#topbar-conv-title {

  position:absolute !important; left:50% !important; transform:translateX(-50%) !important;

  font-size:14px !important; font-weight:700 !important;

  background:linear-gradient(90deg,var(--sp-violet3),var(--sp-violet2),#818cf8) !important;

  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important;

  background-clip:text !important;

  white-space:nowrap !important; overflow:hidden !important;

  max-width:52% !important; pointer-events:none !important; letter-spacing:.3px !important;

}

.topbar button,.topbar .topbar-btn,#topbar button,#topbar .topbar-btn {

width: 45px !important;

height: 40px !important;

min-width:38px !important;

border-radius: 5px !important;

background: rgb(51 30 30 / 0%) !important;

border: 0px solid rgba(255,255,255,.07) !important;

color:var(--sp-text2) !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

cursor:pointer !important;

-webkit-tap-highlight-color: #00000000 !important;

touch-action:manipulation !important;

}

.topbar button:active,#topbar button:active {

  background:rgba(139,92,246,.2) !important;

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

  color:var(--sp-violet3) !important;

}

/* ── MESAJ ALANI (#messages) ──────────────────────────────── */

#messages {

  flex:1 1 0 !important; overflow-y:auto !important;

  /* overflow-x:clip — iOS'ta touch event'leri etkilemez, hidden yerine tercih edilir */

  overflow-x:clip !important;

  -webkit-overflow-scrolling:touch !important;

  overscroll-behavior-y:contain !important; scroll-behavior:auto !important;

  padding:10px 0 6px !important; min-height:0 !important;

  scrollbar-width:thin !important;

  scrollbar-color:rgba(139,92,246,.3) transparent !important;

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

  pointer-events:auto !important;

}

/* Chat main — flex col, mesaj + input */

#chat-main,.chat-main {

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

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

  /* overflow:hidden KALDIRILDI — iOS Safari'de position:fixed child'ların touch event almasını engelliyor */

  /* NOT: app.css'de overflow:hidden var, bunu override ediyoruz */

  overflow-x:clip !important;

  overflow-y:hidden !important;

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

}

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

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

#messages::-webkit-scrollbar-thumb{background:rgba(139,92,246,.35) !important;border-radius:2px !important;}

/* ── MESAJ WRAPPER (msg-wrapper) ──────────────────────────── */

.msg-wrapper {

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

  padding:3px 14px !important; margin:0 !important; max-width:100% !important;

  animation:sp-float-in .28s ease both !important;

}

/* Kullanıcı mesajı — sağa hizalı */

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

.msg-wrapper.user .msg-content {

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

  align-items:flex-end !important; max-width:86% !important;

}

/* Kullanıcı balonu — mor nebula */

.msg-wrapper.user .msg-bubble.user {

background:var(--sp-bub-bg) !important;

color:var(--sp-bub-text) !important;

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

border-radius:var(--sp-r-bub) var(--sp-r-bub) 4px var(--sp-r-bub) !important;

padding:11px 15px !important;

font-size:15px !important;

line-height:1.58 !important;

word-break:break-word !important;

box-shadow: 0 0px 0px rgba(109,40,217,.28),inset 0 1px 0 rgba(255,255,255,.06) !important;

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

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

max-width:100% !important;

}

/* Asistan mesajı — sola hizalı, şeffaf */

.msg-wrapper.assistant { align-items:flex-start !important; }

/* max-width ve width: gemini-chat.css'de kontrol ediliyor */

.msg-wrapper.assistant .msg-content { max-width:calc(100% - 44px) !important; width:auto !important; }

.msg-wrapper.assistant .msg-bubble.assistant {

  background:transparent !important; border:none !important;

  border-radius:0 !important; padding:4px 0 !important;

  font-size:15px !important; line-height:1.68 !important;

  color:var(--sp-text) !important; max-width:100% !important; box-shadow:none !important;

}

.msg-wrapper .msg-avatar,.msg-wrapper .user-avatar{display:none !important;}

/* Mesaj içi metin */

.message-content{font-size:15px !important;line-height:1.68 !important;color:var(--sp-text) !important;}

.message-content h1{font-size:1.3em !important;color:var(--sp-violet3) !important;}

.message-content h2{font-size:1.15em !important;color:var(--sp-text2) !important;}

.message-content h3{font-size:1.05em !important;color:var(--sp-text2) !important;}

.message-content a{color:var(--sp-text2) !important;}

.message-content table{

  display:block !important; overflow-x:auto !important;

  -webkit-overflow-scrolling:touch !important; font-size:13px !important;

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

}

.message-content th{background:rgba(109,40,217,.14) !important;color:var(--sp-violet3) !important;padding:8px !important;}

.message-content td{padding:7px 8px !important;color:var(--sp-text2) !important;}

/* Aksiyon butonları — .msg-actions / .message-actions */

.msg-actions,.message-actions {

  display:flex !important; gap:4px !important; margin-top:5px !important;

  opacity:0 !important; transition:opacity .25s !important;

}

.msg-wrapper:active .msg-actions,.msg-wrapper:active .message-actions{opacity:1 !important;}

.msg-action-btn {

  width:30px !important; height:30px !important; border-radius:8px !important;

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

  background:var(--sp-surface) !important; color:var(--sp-text2) !important;

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

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

  transition:background .15s,color .15s !important;

}

.msg-action-btn:active{background:rgba(139,92,246,.22) !important;color:var(--sp-violet3) !important;}

/* ── MESAJ GÖRSELİ (.message-attachments / .msg-att-img) ─── */

.message-attachments,.msg-attachments {

  display:flex !important; flex-wrap:wrap !important;

  gap:8px !important; margin-bottom:8px !important; order:-1 !important;

}

.msg-att-wrap{display:flex !important;flex-direction:column !important;gap:5px !important;}

.msg-att-img {

  max-width:220px !important; max-height:180px !important;

  width:auto !important; height:auto !important;

  border-radius:14px !important; display:block !important;

  cursor:pointer !important; object-fit:cover !important;

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

  box-shadow:0 4px 20px rgba(109,40,217,.3),var(--sp-glow-sm) !important;

  transition:transform .18s !important;

}

.msg-att-img:active{transform:scale(.96) !important;}

.msg-att-actions{display:flex !important;gap:5px !important;margin-top:3px !important;}

.msg-att-btn {

  font-size:11px !important; padding:4px 10px !important; border-radius:8px !important;

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

  color:var(--sp-text2) !important; text-decoration:none !important;

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

}

/* Dosya eki kartı */

.msg-attachment {

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

  padding:8px 12px !important; border-radius:12px !important;

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

  color:var(--sp-text2) !important; font-size:13px !important; max-width:220px !important;

}

.msg-att-txt{cursor:pointer !important;}

.msg-att-txt-icon{color:var(--sp-text2) !important;flex-shrink:0 !important;}

.msg-att-txt-name{display:block !important;font-size:12px !important;color:var(--sp-text) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:150px !important;}

.msg-att-txt-meta{font-size:10px !important;color:var(--sp-text3) !important;}

/* ── KOD BLOKLARI (.cgpt-code-block) ─────────────────────── */

.cgpt-code-block {

  border-radius:14px !important; overflow:hidden !important;

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

  background:rgba(4,2,16,.96) !important;

  margin:8px 0 !important; max-width:100% !important;

}

.cgpt-code-header {

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

  padding:7px 12px !important;

  background:rgba(109,40,217,.12) !important;

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

}

.cgpt-code-lang{font-size:11px !important;font-weight:600 !important;color:var(--sp-text2) !important;}

.cgpt-code-actions{display:flex !important;gap:6px !important;}

.cgpt-code-btn,.cgpt-copy-btn {

  font-size:11px !important; padding:3px 10px !important; border-radius:6px !important;

  background:rgba(139,92,246,.15) !important; border:1px solid var(--sp-border2) !important;

  color:var(--sp-violet3) !important; cursor:pointer !important;

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

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

  transition:background .15s !important;

}

.cgpt-code-btn:active{background:rgba(139,92,246,.3) !important;}

.cgpt-code-block pre {

  margin:0 !important; padding:14px !important; overflow-x:auto !important;

  -webkit-overflow-scrolling:touch !important; font-size:13px !important;

  scrollbar-width:thin !important; scrollbar-color:rgba(139,92,246,.2) transparent !important;

}

/* ── INPUT ALANI (#input-area) ────────────────────────────── */

#input-area,.input-area {

  flex-shrink:0 !important;

  position:fixed !important;

  bottom:0 !important; left:0 !important; right:0 !important;

  z-index:500 !important;

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

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

  border-top:1px solid var(--border, rgba(64,180,255,0.15)) !important;

  pointer-events:auto !important;

  touch-action:manipulation !important;

  width:100% !important;

  box-sizing:border-box !important;

  display:flex !important;

  flex-direction:column !important;

}

/* iOS: input-area içindeki tüm butonlar tıklanabilir */

#input-area button,

#input-area a,

#input-area [role="button"],

.input-area button,

.input-area a {

  pointer-events: auto !important;

  touch-action: manipulation !important;

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

  cursor: pointer !important;

}

/* gx-plus-btn: iOS minimum 44px touch target */

#input-area .gx-plus-btn,

#input-area .itb-add-btn,

#input-area #input-add-btn,

.gx-plus-btn,

.itb-add-btn,

#input-add-btn {

  min-height: 44px !important;

  min-width: 44px !important;

  width: 44px !important;

  height: 44px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  pointer-events: auto !important;

  touch-action: manipulation !important;

  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;

  position: relative !important;

  z-index: 9999 !important;

  cursor: pointer !important;

  /* iOS Safari: tıklanabilir alan için */

  -webkit-appearance: none !important;

  appearance: none !important;

  user-select: none !important;

  -webkit-user-select: none !important;

}

/* input-add-wrap: overflow visible — buton kırpılmasın */

#input-add-wrap,

.input-add-wrap,

.gx-add-side {

  position: relative !important;

  z-index: 9999 !important;

  overflow: visible !important;

  pointer-events: auto !important;

}

#chat-input-container,

.input-container,.composer-box,#input-container {

  background: var(--input-bg, #060d1a) !important;

  border: 1.5px solid var(--border, rgba(64,180,255,0.20)) !important;

  border-radius: 20px !important;

  overflow: visible !important;

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

  width:100% !important;

  box-sizing:border-box !important;

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

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

  pointer-events:auto !important;

  touch-action:manipulation !important;

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

  width:100% !important;

}

.input-container:focus-within,.composer-box:focus-within {

  border-top-color: inherit !important;

  box-shadow: none !important;

}

#attachments-preview {

  display:flex !important; flex-wrap:wrap !important;

  gap:8px !important; padding:10px 16px 4px !important;

}

#attachments-preview:empty{display:none !important;padding:0 !important;}

/* Görsel önizleme — kart (genel) */

.attach-preview,.att-preview-item {

  position:relative !important; display:inline-flex !important;

  flex-direction:column !important; align-items:center !important;

  gap:4px !important; padding:0 !important;

  background:transparent !important;

  border:none !important;

  border-radius:12px !important; font-size:11px !important;

  color:var(--sp-text2) !important;

  max-width:90px !important;

  overflow:visible !important;

}

/* Görsel önizleme thumbnail — daha büyük ve görünür */

.attach-preview img,.att-preview-item img {

  width:72px !important; height:72px !important;

  object-fit:cover !important; border-radius:10px !important; flex-shrink:0 !important;

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

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

}

.attach-preview span,.att-preview-item span,

.att-preview-name {

  overflow:hidden !important; text-overflow:ellipsis !important;

  white-space:nowrap !important; max-width:80px !important;

  font-size:10px !important; color:var(--sp-text3) !important;

  display:block !important;

}

/* Kaldır butonu — thumbnail içinde sağ üst, küçük ve hizalı */

.attach-remove,.att-remove-btn,.att-remove {

  position:absolute !important; top:4px !important; right:4px !important;

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

  background:rgba(0,0,0,0.60) !important; color:#fff !important;

  border:none !important; cursor:pointer !important;

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

  justify-content:center !important; -webkit-tap-highlight-color:transparent !important;

  z-index:5 !important; touch-action:manipulation !important;

  opacity:1 !important; padding:0 !important; line-height:1 !important;

  transition:background .13s, transform .12s !important;

}

.attach-remove:active,.att-remove-btn:active,.att-remove:active {

  background:#ef4444 !important;

  transform:scale(0.9) !important;

}

/* Textarea satırı */

.input-textarea-row,.composer-textarea-row {

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

  padding:10px 16px 6px !important; gap:8px !important;

}

#message-input,textarea#message-input {

  flex:1 !important; background:transparent !important;

  border:none !important; outline:none !important; resize:none !important;

  color:var(--sp-text) !important; font-size:16px !important; line-height:1.55 !important;

  min-height:24px !important; max-height:200px !important;

  overflow-y:auto !important; scrollbar-width:none !important;

  font-family:inherit !important; -webkit-font-smoothing:antialiased !important;

  caret-color:var(--sp-text2) !important;

  padding:0 !important; margin:0 !important; box-shadow:none !important;

  pointer-events:auto !important; touch-action:manipulation !important;

  -webkit-user-select:text !important; user-select:text !important;

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

}

#message-input::placeholder{color:var(--sp-text3) !important;opacity:1 !important;}

#message-input::-webkit-scrollbar{display:none !important;}

.input-toolbar,.composer-toolbar {

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

  padding:4px 16px 10px !important; gap:2px !important;

  flex-wrap:nowrap !important; overflow-x:auto !important; scrollbar-width:none !important;

}

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

.input-toolbar button,.input-toolbar-btn,.composer-toolbar button {

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

  border-radius:50% !important; background:transparent !important; border:none !important;

  color:var(--sp-text2) !important; cursor:pointer !important;

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

  -webkit-tap-highlight-color:transparent !important; touch-action:manipulation !important;

  transition:background .15s,color .15s !important; flex-shrink:0 !important;

}

.input-toolbar button:active,.input-toolbar-btn:active {

  background:rgba(139,92,246,.18) !important; color:var(--sp-violet3) !important;

}

.input-model-pill,.model-pill,#model-pill {

  height:28px !important; padding:0 12px !important;

  border-radius:20px !important; font-size:12px !important; font-weight:600 !important;

  max-width:120px !important; flex-shrink:0 !important;

  background:rgba(139,92,246,.12) !important;

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

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

}

#send-btn,.send-btn {

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

  border-radius:50% !important; background:var(--sp-grad-btn) !important;

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

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

  cursor:pointer !important; flex-shrink:0 !important;

  transition:opacity .15s,transform .12s,box-shadow .15s !important;

  -webkit-tap-highlight-color:transparent !important; margin-left:auto !important;

  box-shadow:0 2px 12px rgba(124,58,237,.5) !important;

  pointer-events:auto !important; touch-action:manipulation !important;

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

}

#send-btn:disabled,.send-btn:disabled{opacity:.3 !important;box-shadow:none !important;}

#send-btn:active:not(:disabled){transform:scale(.9) !important;box-shadow:var(--sp-glow-sm) !important;}

/* Toolbar butonları — kesinlikle tıklanabilir */

.input-toolbar,.composer-toolbar,

.input-textarea-row,.composer-textarea-row {

  pointer-events:auto !important; touch-action:manipulation !important;

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

}

/* ── SIDEBAR ───────────────────────────────────────────────── */

.sidebar,#sidebar,aside.sidebar {

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

  width:82% !important; max-width:310px !important;

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

  /* transform'da !important YOK — JS inline style ile açılıp kapanır */

  transform:translateX(-100%);

  transition:transform .3s cubic-bezier(.4,0,.2,1) !important;

  overflow-y:auto !important; -webkit-overflow-scrolling:touch !important;

  background:var(--bg) !important;

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

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

  box-shadow:4px 0 40px rgba(109,40,217,.25) !important;

  pointer-events:auto !important;

  will-change:transform !important;

}

/* CSS class ile açık state — JS setProperty yerine classList kullanan senaryolar için */

.sidebar.open,

#sidebar.open,

aside.sidebar.open,

.sidebar.sidebar-open,

body.sidebar-open .sidebar,

body.sidebar-open #sidebar {

  transform:translateX(0) !important;

}

/* Sidebar overlay */

#sidebar-overlay,.sidebar-overlay {

  position:fixed !important; inset:0 !important; z-index:9998 !important;

  background:rgba(0,0,0,.65) !important;

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

  pointer-events:auto !important;

}

.conv-item {

  padding:10px 14px !important; border-radius:10px !important;

  font-size:14px !important; min-height:44px !important;

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

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

  color:var(--sp-text2) !important; transition:background .15s !important;

}

.conv-item:active,.conv-item.active{background:rgba(109,40,217,.15) !important;color:var(--sp-text) !important;}

/* ── WELCOME ───────────────────────────────────────────────── */

#welcome,#welcome-screen,.welcome-screen {

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

  align-items:center !important; justify-content:flex-start !important;

  padding:48px 20px 120px !important; text-align:center !important;

  overflow-y:auto !important; flex:1 !important; position:relative !important; z-index:1 !important;

}

.welcome-prompts,.suggest-prompts {

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

  gap:10px !important; width:100% !important; max-width:400px !important; margin-top:24px !important;

}

.welcome-prompt-card,.suggest-card {

  padding:14px 12px !important; border-radius:16px !important;

  font-size:13px !important; line-height:1.45 !important; text-align:left !important;

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

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

  color:var(--sp-text2) !important; transition:background .18s,border-color .18s !important;

}

.welcome-prompt-card:active,.suggest-card:active {

  background:rgba(109,40,217,.18) !important; border-color:rgba(139,92,246,.45) !important;

}

/* ── TYPING ────────────────────────────────────────────────── */

.typing-indicator{display:flex !important;align-items:center !important;gap:5px !important;padding:12px 14px !important;}

.typing-dot {

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

  background:var(--sp-violet) !important;

  animation:sp-bounce .9s ease-in-out infinite !important;

  box-shadow:0 0 6px rgba(139,92,246,.6) !important;

}

.typing-dot:nth-child(2){animation-delay:.18s !important;background:var(--sp-violet) !important;}

.typing-dot:nth-child(3){animation-delay:.36s !important;background:var(--sp-indigo) !important;}

/* ── SCROLL-TO-BOTTOM ─────────────────────────────────────── */

#scroll-bottom-btn,.scroll-bottom-btn {

  position:fixed !important; bottom:calc(var(--sp-safe-b) + 90px) !important;

  left:50% !important; transform:translateX(-50%) !important; z-index:80 !important;

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

  background:var(--sp-inp-bg) !important; border:1px solid var(--sp-border2) !important;

  color:var(--sp-text2) !important;

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

  box-shadow:0 2px 16px rgba(109,40,217,.4),var(--sp-glow-sm) !important;

  backdrop-filter:blur(12px) !important; -webkit-tap-highlight-color:transparent !important;

}

/* ── TOAST ─────────────────────────────────────────────────── */

#toast-container{bottom:calc(var(--sp-safe-b) + 80px) !important;width:calc(100% - 32px) !important;max-width:340px !important;}

.toast{width:100% !important;max-width:340px !important;font-size:14px !important;background:var(--bg) !important;border:1px solid var(--sp-border2) !important;backdrop-filter:blur(16px) !important;color:var(--sp-text) !important;box-shadow:var(--sp-glow-sm) !important;}

.toast.success{background:rgba(16,185,129,.15) !important;border-color:rgba(16,185,129,.4) !important;}

.toast.error{background:rgba(239,68,68,.15) !important;border-color:rgba(239,68,68,.4) !important;}

.toast.info{background:rgba(139,92,246,.15) !important;border-color:rgba(139,92,246,.45) !important;}

/* ── MISC ──────────────────────────────────────────────────── */

#topbar-tabs,.topbar-tabs{display:none !important;}

.chat-main,#chat-main{padding:0 !important;}

#voice-btn,.voice-btn{width:36px !important;height:36px !important;border-radius:50% !important;color:var(--sp-text2) !important;}

.msg-sources{margin-top:8px !important;}

.msg-sources-toggle{

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

  padding:5px 12px !important; border-radius:20px !important; font-size:12px !important;

  background:rgba(139,92,246,.1) !important; border:1px solid var(--sp-border) !important;

  color:var(--sp-text2, var(--text2, #a0a0b8)) !important; cursor:pointer !important;

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

}

.msg-source-card {

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

  padding:8px 10px !important; border-radius:10px !important;

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

  text-decoration:none !important; color:var(--sp-text2) !important; font-size:12px !important;

}

/* ── İÇ SAYFALARDA TOPBAR'I ZORLA GÖSTER ─────────────────── */

/* mobile.css: .topbar:not(.force-show):not(.chat-topbar){display:none} kuralını ezip geç */

body:not(.chat-page) .topbar,

body:not(.chat-page) #topbar {

  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  height:54px !important;

  min-height:54px !important;

  max-height:54px !important;

  padding:0 14px !important;

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

  background:var(--bg) !important;

  backdrop-filter:blur(22px) saturate(180%) !important;

  -webkit-backdrop-filter:blur(22px) saturate(180%) !important;

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

  box-shadow:0 1px 0 rgba(139,92,246,.08),0 4px 24px rgba(0,0,0,.45) !important;

  position:sticky !important;

  top:0 !important;

  z-index:400 !important;

  flex-shrink:0 !important;

  pointer-events:auto !important;

  width:100% !important;

}

/* Topbar ortasındaki site adı / başlık */

body:not(.chat-page) .topbar .topbar-center,

body:not(.chat-page) #topbar .topbar-center,

body:not(.chat-page) .topbar .tb-site-name,

body:not(.chat-page) .topbar h1 {

  font-size:14px !important;

  font-weight:700 !important;

  background:linear-gradient(90deg,var(--sp-violet3),var(--sp-violet2),#818cf8) !important;

  -webkit-background-clip:text !important;

  -webkit-text-fill-color:transparent !important;

  background-clip:text !important;

}

/* Sidebar toggle (hamburger) butonu — iç sayfalarda */

.sidebar-toggle-mobile {

  display:flex !important;

  width:38px !important;

  height:38px !important;

  border-radius:12px !important;

  background:var(--sp-surface) !important;

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

  color:var(--sp-text2) !important;

  align-items:center !important;

  justify-content:center !important;

  cursor:pointer !important;

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

  touch-action:manipulation !important;

  transition:background .15s,color .15s !important;

  pointer-events:auto !important;

  flex-shrink:0 !important;

}

.sidebar-toggle-mobile:active {

  background:rgba(139,92,246,.22) !important;

  color:var(--sp-violet3) !important;

}

/* inner-topbar içindeki butonlar */

body:not(.chat-page) .topbar .btn-icon,

body:not(.chat-page) #topbar .btn-icon {

  width:36px !important;

  height:36px !important;

  border-radius:12px !important;

  background:var(--sp-surface) !important;

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

  color:var(--sp-text2) !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

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

  touch-action:manipulation !important;

}

body:not(.chat-page) .topbar .btn-icon:active {

  background:rgba(139,92,246,.22) !important;

  color:var(--sp-violet3) !important;

}

/* ── İÇ SAYFA ARKA PLAN & HEADER ─────────────────────────── */

body.explore-page,body.history-page,body.settings-page,

body.profile-page,body.pricing-page,body.models-page,

body.tools-page,body.notif-page,body.help-page,

body.files-page,body.favorites-page,body.prompt-page,

body.changelog-page,body.subscription-page,body.code-page,

body.voice-page,body.images-page,body.image-gen-page,

body.projects-page,body.stats-page,body.plugins-page {

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

}

.app-with-sidebar {

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

  display:flex !important;

  flex-direction:column !important;

  height:100dvh !important;

  overflow:hidden !important;

}

.main-content,#main-content {

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

  display:flex !important;

  flex-direction:column !important;

  flex:1 1 0 !important;

  min-height:0 !important;

  overflow-x:hidden !important;

  overflow-y:hidden !important; /* scroll alt elemana (.explore-main vb.) devredilir */

}

.explore-main,.settings-main,.profile-main,.pricing-main,

.history-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,.voice-main,.images-main,

.code-main,.page-main,#page-main {

background: var(--bg);

scrollbar-width:thin !important;

scrollbar-color:rgba(139,92,246,.3) transparent !important;

}

/* Mobile header */

.mobile-page-header {

  background:var(--bg) !important;

  backdrop-filter:blur(22px) saturate(180%) !important;

  -webkit-backdrop-filter:blur(22px) saturate(180%) !important;

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

  box-shadow:0 1px 0 rgba(139,92,246,.08),0 4px 24px rgba(0,0,0,.45) !important;

  z-index:400 !important;

}

.mobile-page-header .mph-title,

.mobile-page-header h1,

.mobile-page-header .page-title {

  font-size:14px !important; font-weight:700 !important;

  background:linear-gradient(90deg,var(--sp-violet3),var(--sp-violet2),#818cf8) !important;

  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important;

  background-clip:text !important;

}

.mobile-hamburger,.mobile-header-btn {

  width:38px !important; height:38px !important; border-radius:12px !important;

  background:var(--sp-surface) !important;

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

  color:var(--sp-text2) !important;

  -webkit-tap-highlight-color:transparent !important; touch-action:manipulation !important;

  transition:background .15s,color .15s !important;

}

.mobile-hamburger:active,.mobile-header-btn:active {

  background:rgba(139,92,246,.22) !important; color:var(--sp-violet3) !important;

}

/* Kartlar */

.settings-section,.conv-item,.tool-card,.model-card,

.plugin-card,.project-card,.stat-card,.file-item,

.fav-item,.prompt-card,.notif-item,.help-item,

.explore-card,.pricing-card,.subscription-card,

.profile-card,.history-card {

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

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

  border-radius:14px !important;

  transition:background .18s,border-color .18s !important;

}

.conv-item:hover,.tool-card:hover,.model-card:hover,

.prompt-card:hover,.notif-item:hover,.file-item:hover {

  background:rgba(139,92,246,.07) !important;

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

}

/* Butonlar */

.btn-sm,.btn-icon,.btn-outline {

  border-color:var(--sp-border) !important; background:var(--sp-surface) !important;

  color:var(--sp-text2) !important; -webkit-tap-highlight-color:transparent !important;

}

.btn-sm:active { background:rgba(139,92,246,.2) !important; color:var(--sp-violet3) !important; }

.btn-primary,.btn-sm.primary {

  background:var(--sp-grad-btn) !important; border-color:transparent !important;

  color:#fff !important; box-shadow:0 2px 12px rgba(124,58,237,.4) !important;

}

/* Form */

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

input[type="search"],input[type="number"],select {

background: rgb(10 8 28 / 0%) !important;

border-color:var(--sp-inp-brd) !important;

color:var(--sp-text) !important;

border-radius:10px !important;

}

input:focus,select:focus {

  border-color:var(--sp-inp-focus) !important;

  box-shadow:0 0 0 3px rgba(139,92,246,.15) !important; outline:none !important;

}

input::placeholder { color:var(--sp-text3) !important; }

} /* end @media 768px */

/* ══ İÇ SAYFA DETAY STİLLERİ — @media bağımsız ═══════════ */

@media(max-width:768px){

/* Tarih sayfası */

.conv-icon{background:rgba(139,92,246,.12) !important;color:var(--sp-text2) !important;}

.conv-title{color:var(--sp-text) !important;}

.conv-meta{color:var(--sp-text3) !important;}

.conv-btn{border-color:var(--sp-border) !important;color:var(--sp-text2) !important;background:transparent !important;}

.conv-btn:active{background:rgba(139,92,246,.15) !important;color:var(--sp-violet3) !important;}

.search-bar input{background:rgba(10,8,28,.8) !important;border-color:var(--sp-border) !important;color:var(--sp-text) !important;border-radius:12px !important;}

.pagination{flex-wrap:wrap !important;gap:6px !important;}

.page-btn{border-color:var(--sp-border) !important;background:var(--sp-surface) !important;color:var(--sp-text2) !important;border-radius:8px !important;min-height:36px !important;}

.page-btn.active,.page-btn:active{background:rgba(139,92,246,.2) !important;border-color:var(--sp-border2) !important;color:var(--sp-violet3) !important;}

/* Keşfet */

.explore-hero{background:radial-gradient(ellipse at 50% 0%,rgba(109,40,217,.18) 0%,transparent 70%) !important;}

.tool-card{padding:14px !important;}

.tool-card-icon{border-radius:12px !important;border:1px solid var(--sp-border) !important;}

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

.prompt-card-header h3{color:var(--sp-text) !important;font-size:13px !important;}

.prompt-card p{color:var(--sp-text2) !important;font-size:12px !important;}

.prompt-card-footer span{color:var(--sp-text2) !important;}

.category-name{color:var(--sp-text) !important;font-size:14px !important;font-weight:600 !important;}

/* Ayarlar */

.settings-row{border-color:var(--sp-border) !important;}

.settings-row-info strong{color:var(--sp-text) !important;}

.settings-row-info span{color:var(--sp-text2) !important;}

.settings-section-header{background:transparent !important;border-color:var(--sp-border) !important;}

.settings-section-header h2{color:var(--sp-text) !important;}

.toggle-slider{background:rgba(255,255,255,.12) !important;}

input:checked + .toggle-slider{background:var(--sp-violet) !important;}

.theme-option{border-color:var(--sp-border) !important;background:var(--sp-surface) !important;color:var(--sp-text2) !important;}

.theme-option.selected{border-color:var(--sp-violet) !important;background:rgba(139,92,246,.12) !important;}

.danger-zone{border-color:rgba(239,68,68,.3) !important;}

.alert-success{background:rgba(16,185,129,.1) !important;border-color:rgba(16,185,129,.2) !important;color:#6ee7b7 !important;}

.alert-error{background:rgba(239,68,68,.1) !important;border-color:rgba(239,68,68,.2) !important;color:#fca5a5 !important;}

/* Profil */

.profile-hero-avatar{border-color:var(--sp-border2) !important;box-shadow:0 4px 20px rgba(139,92,246,.25) !important;}

.profile-hero-name{color:var(--sp-text) !important;}

.profile-hero-email{color:var(--sp-text2) !important;}

.verified-badge{background:rgba(16,185,129,.1) !important;color:#10b981 !important;border-color:rgba(16,185,129,.2) !important;}

/* Bildirimler */

.notif-item.unread{background:rgba(139,92,246,.06) !important;border-color:rgba(139,92,246,.2) !important;}

.notif-dot{background:var(--sp-violet) !important;box-shadow:0 0 6px rgba(139,92,246,.6) !important;}

/* FAB */

.fab,.scroll-top-btn{background:var(--sp-grad-btn) !important;box-shadow:0 4px 16px rgba(124,58,237,.45) !important;border:none !important;color:#fff !important;}

/* Genel text */

h1,h2,h3,h4{color: var(--text-primary) !important;}

p,span,label,li{color:var(--sp-text2);}

a{color: var(--text1) !important;}

a:hover{color:var(--sp-violet3) !important;}

/* Divider */

hr{border-color:var(--sp-border) !important;}

/* Badge */

.badge,.tag,.chip{background:rgba(139,92,246,.15) !important;border:1px solid var(--sp-border) !important;color:var(--sp-violet3) !important;border-radius:20px !important;}

}

/* ══ KÜÇÜK EKRANLAR ════════════════════════════════════════ */

@media(max-width:480px){

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

  .msg-wrapper.user .msg-content{max-width:92% !important;}

  .msg-att-img{max-width:185px !important;max-height:155px !important;}

  .welcome-prompts{grid-template-columns:1fr !important;}

  :root{--sp-topbar-h:50px;--sp-r-bub:17px;}

  /* chat-fix-modern.css override'larını ezip geç */

  #input-area,.input-area{

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

    width:100% !important;

    box-sizing:border-box !important;

    display:flex !important;

    flex-direction:column !important;

  }

  #chat-input-container,

  .input-container,.composer-box,#input-container{

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

    margin:0 !important;

    border-radius:20px !important;

    box-sizing:border-box !important;

    display:flex !important;

    flex-direction:column !important;

  }

  /* gx-bar-row: yatay flex, textarea görünür */

  .gx-bar-row {

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    flex-wrap:nowrap !important;

    width:100% !important;

    box-sizing:border-box !important;

    min-height:48px !important;

    padding:6px 8px 6px 6px !important;

    background:transparent !important;

  }

}

@media(max-width:360px){

  .msg-wrapper{padding:2px 8px !important;}

  .input-model-pill,.model-pill{display:none !important;}

  #topbar-title,.topbar-title{max-width:44% !important;}

  #chat-input-container,

  .input-container,.composer-box{

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

    border-radius:16px !important;

  }

}

/* ══ iOS Safari PWA ════════════════════════════════════════ */

@supports(-webkit-touch-callout:none){

  @media(max-width:768px){

    #input-area,.input-area{

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

    }

    body{height:-webkit-fill-available !important;}

    .sidebar,#sidebar{height:-webkit-fill-available !important;}

  }

}

/* ══ Global Uzay ═══════════════════════════════════════════ */

body.chat-page{background: var(--bg);}

::selection{background:rgba(139,92,246,.35) !important;color:#fff !important;}

::-webkit-scrollbar{width:3px !important;height:3px !important;}

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

::-webkit-scrollbar-thumb{background:rgba(139,92,246,.3) !important;border-radius:2px !important;}

/* ══ MOBİL KRİTİK DÜZELTMELER ═══════════════════════════════

   Aşağıdaki kurallar spesifik sorunları kaynağında düzeltir.

   Genel override değil, hedefli fix'ler.

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

@media (max-width: 768px) {

/* ── 1. Mesaj aksiyonları: .touched class ile görünür ── */

/* JS touchstart ile .touched ekleniyor, dokunulunca aksiyonlar görünür kalır */

.message.touched .message-actions,

.message.touched .msg-actions,

.msg-wrapper.touched .message-actions,

.msg-wrapper.touched .msg-actions {

  opacity: 1 !important;

  pointer-events: auto !important;

}

/* ── 2. Mesajlar kesinlikle iç içe geçmesin ── */

/* Her mesaj bağımsız flow item — position:static zorunlu */

#messages > .message,

#messages > .msg-wrapper {

  position: static !important;

  float: none !important;

  clear: both !important;

  flex-shrink: 0 !important;

  width: 100% !important;

  box-sizing: border-box !important;

  min-height: 0 !important;

  overflow: visible !important;

}

/* İki mesaj sistemi arası geçiş margin — tutarlı boşluk */

#messages > .message + .msg-wrapper,

#messages > .msg-wrapper + .message {

  margin-top: 12px !important;

}

#messages > .message + .message,

#messages > .msg-wrapper + .msg-wrapper {

  margin-top: 2px !important;

}

/* Kullanıcı→AI ve AI→kullanıcı geçişlerde biraz daha boşluk */

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

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

#messages > .msg-wrapper.user + .msg-wrapper.ai,

#messages > .msg-wrapper.user + .msg-wrapper.assistant,

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

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

#messages > .msg-wrapper.ai + .msg-wrapper.user,

#messages > .msg-wrapper.assistant + .msg-wrapper.user {

  margin-top: 14px !important;

}

/* Mesaj içeriği taşmasın */

.message-content,

.msg-bubble,

.msg-content {

  overflow-wrap: anywhere !important;

  word-break: break-word !important;

  max-width: 100% !important;

  min-width: 0 !important;

}

/* Kod bloğu yatay scroll kendi içinde */

.message-content pre,

.msg-bubble pre,

.cgpt-code-block pre {

  overflow-x: auto !important;

  max-width: 100% !important;

  white-space: pre !important;

}

/* ── 3. Chat ana layout — flex column, taşma yok ── */

#chat-area,

.chat-area {

  display: flex !important;

  flex-direction: column !important;

  flex: 1 1 0 !important;

  min-height: 0 !important;

  overflow: hidden !important;

  width: 100% !important;

}

/* ── 4. #messages scroll container — sadece dikey scroll ── */

#messages {

  flex: 1 1 0 !important;

  overflow-y: auto !important;

  overflow-x: hidden !important;

  width: 100% !important;

  max-width: 100% !important;

  box-sizing: border-box !important;

  /* Composer için alt boşluk — safe-area dahil */

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

}

/* ── 5. Input area — fixed bottom ── */

#input-area,

.input-area {

  flex-shrink: 0 !important;

  flex-grow: 0 !important;

  position: fixed !important;

  bottom: 0 !important;

  left: 0 !important;

  right: 0 !important;

  width: 100% !important;

  max-width: 100% !important;

  box-sizing: border-box !important;

  z-index: 500 !important;

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

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

  display: flex !important;

  flex-direction: column !important;

}

/* ── 6. Textarea büyüme — uzun metinde layout bozulmasın ── */

#message-input,

textarea#message-input {

  min-height: 24px !important;

  max-height: 160px !important;

  overflow-y: auto !important;

  overflow-x: hidden !important;

  resize: none !important;

  width: 100% !important;

  box-sizing: border-box !important;

  word-break: break-word !important;

}

/* ── gx-bar-row içindeki textarea — flex-1, görünür ── */

.gx-bar-row #message-input,

.gx-bar-row textarea#message-input {

  flex: 1 1 auto !important;

  min-width: 0 !important;

  width: 0 !important;

  min-height: 24px !important;

  max-height: 160px !important;

  padding: 6px 8px !important;

  background: transparent !important;

  border: none !important;

  border-radius: 0 !important;

  outline: none !important;

  resize: none !important;

  box-shadow: none !important;

  font-size: 16px !important;

  line-height: 1.5 !important;

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

  display: block !important;

  overflow-y: auto !important;

  overflow-x: hidden !important;

  -webkit-appearance: none !important;

}

[data-theme="dark"] .gx-bar-row #message-input,

[data-theme="dark"] .gx-bar-row textarea#message-input {

  color: #f0f0f2 !important;

}

[data-theme="light"] .gx-bar-row #message-input,

[data-theme="light"] .gx-bar-row textarea#message-input {

  color: #1a1a2e !important;

}

.gx-bar-row #message-input::placeholder,

.gx-bar-row textarea#message-input::placeholder {

  color: #888 !important;

  opacity: 1 !important;

}

[data-theme="dark"] .gx-bar-row #message-input::placeholder {

  color: #aaa !important;

  opacity: 1 !important;

}

/* ── 7. Görseller taşmasın — tüm mesaj görselleri ── */

#messages img,

.message-content img,

.msg-bubble img,

.msg-att-img {

  max-width: 100% !important;

  height: auto !important;

}

/* ── 8. Tablo taşmasın — mesaj içi tablolar ── */

.message-content table,

.msg-bubble table {

  display: block !important;

  overflow-x: auto !important;

  -webkit-overflow-scrolling: touch !important;

  max-width: 100% !important;

  width: auto !important;

}

/* ── 9. Typing indicator — #messages içinde bağımsız ── */

.message.typing-indicator-msg,

[id^="typing-"] {

  position: static !important;

  flex-shrink: 0 !important;

  width: 100% !important;

}

/* ── 10. Welcome screen — #messages içinde düzgün hizalanma ── */

#welcome-screen,

.welcome-screen,

#messages .welcome-screen,

#messages #welcome-screen {

  position: static !important;

  flex-shrink: 0 !important;

  width: 100% !important;

  box-sizing: border-box !important;

  padding: 32px 16px 24px !important;

  /* Yatay scroll engellensin */

  overflow-x: hidden !important;

}

/* ── 11. Yatay scroll kesinlikle engelle ── */

html,

body,

#main,

.main-content,

#main-content,

.app-with-sidebar,

#chat-area,

#messages,

.msg-wrapper,

.message,

.message-inner,

.message-body,

.message-content,

.msg-bubble,

.topbar,

.topbar-inner,

#welcome-screen,

.welcome-suggest-grid {

  overflow-x: hidden !important;

  max-width: 100vw !important;

  width: 100% !important;

  box-sizing: border-box !important;

}

/* input-area ve gx-bar-row: overflow visible — + menüsü ve touch event'ler için */

#input-area,

.input-container,

#chat-input-container,

.gx-bar-row,

.gx-bar-right {

  overflow: visible !important;

  max-width: 100vw !important;

  width: 100% !important;

  box-sizing: border-box !important;

}

/* Kod blokları yatay scroll yapabilir */

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

  overflow-x: auto !important;

  max-width: 100% !important;

  white-space: pre !important;

}

/* Resimler taşmasın */

img, video, iframe {

  max-width: 100% !important;

  height: auto;

}

/* Tablo yatay scroll */

table, .msg-bubble table {

  display: block !important;

  overflow-x: auto !important;

  max-width: 100% !important;

}

/* ── 12. Double-tap zoom önleme + iOS touch fix — input butonları ── */

#btn-send,

#send-btn,

.send-btn,

#input-add-btn,

.input-add-btn,

.msg-action-btn,

.input-toolbar button,

.gx-plus-btn,

.itb-add-btn,

.gx-add-side,

.input-add-wrap {

  touch-action: manipulation !important;

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

  pointer-events: auto !important;

}

/* iOS: input-add-wrap ve gx-add-side z-index ve overflow */

.input-add-wrap,

.gx-add-side {

  position: relative !important;

  overflow: visible !important;

  z-index: 10 !important;

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

}

/* iOS: gx-plus-btn / itb-add-btn tıklanabilir */

.gx-plus-btn,

.itb-add-btn,

#input-add-btn {

  position: relative !important;

  z-index: 11 !important;

  cursor: pointer !important;

  pointer-events: auto !important;

  -webkit-appearance: none !important;

  appearance: none !important;

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

}

/* ── 13. Sidebar overlay — tıklanabilir ── */

#sidebar-overlay,

.sidebar-overlay {

  cursor: pointer !important;

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

}

/* ── 14. Input toolbar — butonlar birbirine girmesin ── */

.input-toolbar,

.composer-toolbar {

  flex-wrap: nowrap !important;

  overflow-x: auto !important;

  overflow-y: hidden !important;

  scrollbar-width: none !important;

  gap: 4px !important;

  align-items: center !important;

}

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

/* ── 15. Add menu — ekrandan taşmasın ── */

.input-add-menu {

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

  max-height: 65dvh !important;

  overflow-y: auto !important;

-webkit-overflow-scrolling: touch !important;

  z-index: 999999 !important;

  touch-action: manipulation !important;

}
  /* Profil avatar butonu */

  .mph-avatar-btn {

    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 50% !important;

    width: 32px !important;

    height: 32px !important;

    flex-shrink: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: transparent !important;

    border: none !important;

  }

  .mph-avatar-img {

    border-radius: 50% !important;

    object-fit: cover !important;

    width: 32px !important;

    height: 32px !important;

    display: block !important;

  }

  .mph-avatar-initial {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 32px !important;

    height: 32px !important;

    border-radius: 50% !important;

    background: linear-gradient(135deg, #1a6fff, #7b2fff) !important;

    color: #fff !important;

    font-size: .8rem !important;

    font-weight: 700 !important;

    flex-shrink: 0 !important;

  }

  /* Bildirim butonu dot */

  .mph-notif-dot {

    position: absolute !important;

    top: 4px !important;

    right: 4px !important;

    width: 8px !important;

    height: 8px !important;

    border-radius: 50% !important;

    background: #ef4444 !important;

    border: 2px solid var(--bg, #000000) !important;

    display: block !important;

  }

} /* end @media 768px mobile fixes */

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

   iOS Safari Touch Fix — butonlar basılmıyor sorunu

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

/* iOS Safari'de tıklanabilir elementlerin touch event alması için */

button,

a,

[role="button"],

.btn,

.btn-icon,

.mobile-header-btn,

.mobile-hamburger,

.mobile-page-header-logo,

.gx-fab-main,

.gx-fab-item-btn,

.tb-model-btn,

.tb-notif-btn,

.tb-more-btn,

.tb-user-avatar-btn,

.mph-notif-btn,

.mph-avatar-btn {

  cursor: pointer;

  -webkit-tap-highlight-color: rgba(0,0,0,0);

  touch-action: manipulation;

}

/* iOS'ta position:fixed elementlerin touch alması — will-change KULLANMA (stacking context bozar) */

#gx-fab,

.gx-fab-main {

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

}

/* Mobile header: pointer-events kesinlikle auto */

.mobile-page-header,

#mobile-page-header {

  pointer-events: auto !important;

  position: sticky !important;

  top: 0 !important;

  z-index: 10000 !important;

}

.mobile-page-header *,

#mobile-page-header * {

  pointer-events: auto !important;

}

/* iOS'ta input alanı üzerindeki elementlerin touch alması */

#input-area,

.input-area,

#chat-input-container {

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

  pointer-events: auto !important;

}

/* Tüm butonlar iOS'ta tıklanabilir */

button,

a[href],

[role="button"] {

  pointer-events: auto !important;

}

/* ── Safari topbar fix: her zaman görünür ── */

@media (max-width: 768px) {

  .topbar,
  #topbar,
  header.topbar,
  header#topbar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

}

/* ── Model pill (itb-model-pill) — mobilde tıklanabilir ── */

.itb-model-pill,
#input-model-pill,
#chat-model-wrap .itb-model-pill {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 12 !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ── Mobil bildirim butonu: tıklanabilir + badge görünür ── */

.mph-notif-btn,
#mobile-notif-btn {
  position: relative !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  z-index: 10 !important;
  overflow: visible !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.mph-notif-dot {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 20px !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
  background: #ef4444 !important;
  color: #fff !important;
  line-height: 1 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* chat-model-wrap ve gx-bar-right — tıklamayı geçirsin */

#chat-model-wrap,
.gx-bar-right {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  position: relative !important;
  z-index: 12 !important;
  overflow: visible !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}