/*

 * GlomaxGPT — ChatGPT Tarzı Sohbet UI

 * • Kullanıcı: sağda krem/sarı yuvarlak balon

 * • AI: solda şeffaf, düz metin, sıkı boşluk

 * • Input: temiz beyaz pill

 */

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

   MESAJ LİSTESİ — ChatGPT tarzı

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

/* Mesaj alanı + parent'ları şeffaf */

#messages,

#chat-messages,

.messages-container,

.chat-messages,

#chat-area,

#chat-main,

.chat-main,

#chat-body,

.chat-body,

#chat-scroll,

.chat-scroll,

#chat-inner {

  background: transparent !important;

  background-color: transparent !important;

}

/* Mesaj wrapper'ları şeffaf */

.msg-wrapper,

.message,

.message-row {

  background: transparent !important;

  background-color: transparent !important;

}

/* Tüm mesaj içerik kartları şeffaf */

.msg-content,

.msg-bubble-wrap,

.msg-card {

  background: transparent !important;

}

#messages {

  padding: 16px 0 20px !important;

  background: transparent !important;

}

/* Mesaj wrapper'ları arası boşluk — ChatGPT gibi */

#messages > .msg-wrapper,

#messages > .message {

  margin-bottom: 0 !important;

}

/* Aynı taraf ardısık — az boşluk */

#messages > .msg-wrapper + .msg-wrapper { margin-top: 2px !important; }

/* Taraf değişimi — daha fazla boşluk */

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

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

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

#messages > .msg-wrapper.ai + .msg-wrapper.user { margin-top: 20px !important; }

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

   MSG-WRAPPER — ChatGPT birebir

   Yapı: .msg-wrapper.user/.ai >

     .msg-avatar + .msg-content > .msg-bubble

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

/* Genel wrapper */

.msg-wrapper {

  display: flex !important;

  flex-direction: row !important;

  align-items: flex-end !important;

  gap: 8px !important;

  padding: 2px 16px !important;

  max-width: 760px !important;

  margin: 0 auto !important;

  width: 100% !important;

  box-sizing: border-box !important;

  background: none !important;

  border: none !important;

}

/* Kullanıcı: sağa hizalı */

.msg-wrapper.user {

  flex-direction: row-reverse !important;

  justify-content: flex-start !important;

  align-items: flex-end !important;

}

/* AI: sola hizalı (hem .ai hem .assistant class destekli) */

.msg-wrapper.ai,

.msg-wrapper.assistant {

  flex-direction: row !important;

  align-items: flex-start !important;

}

/* Avatar — ortak (mobile-chatgpt.css'in display:none override'ı sıfırla) */

.msg-wrapper .msg-avatar,

.msg-wrapper .user-avatar,

.msg-avatar {

  display: flex !important;

  width: 28px !important;

  height: 28px !important;

  min-width: 28px !important;

  border-radius: 50% !important;

  overflow: hidden !important;

  align-items: center !important;

  justify-content: center !important;

  flex-shrink: 0 !important;

  font-size: .72rem !important;

  font-weight: 700 !important;

}

/* Kullanıcı avatarı — gri daire */

.msg-avatar.user {

  background: #d9d9d9 !important;

  color: #555 !important;

  margin-bottom: 2px !important;

  border: none !important;

  box-shadow: none !important;

}

[data-theme="dark"] .msg-avatar.user {

  background: #3a3a3a !important;

  color: #ccc !important;

}

.msg-avatar.ai,

.msg-wrapper.assistant .msg-avatar {

  background-color: #ffffff !important;

  background-image: url('/assets/img/dark.png') !important;

  background-size: 65% !important;

  background-repeat: no-repeat !important;

  background-position: center !important;

  color: transparent !important;

  margin-top: 2px !important;

  border: none !important;

  box-shadow: none !important;

}

/* Dark modda: beyaz arka plan + dark.png */

[data-theme="dark"] .msg-avatar.ai,

[data-theme="dark"] .msg-wrapper.assistant .msg-avatar,

:root:not([data-theme="light"]) .msg-avatar.ai,

:root:not([data-theme="light"]) .msg-wrapper.assistant .msg-avatar {

  background-color: #ffffff !important;

  background-image: url('/assets/img/dark.png') !important;

}

/* Light modda: beyaz arka plan + dark.png */

[data-theme="light"] .msg-avatar.ai,

[data-theme="light"] .msg-wrapper.assistant .msg-avatar {

  background-color: #f0f0f0 !important;

  background-image: url('/assets/img/dark.png') !important;

}

.msg-avatar.ai img,

.msg-avatar.ai svg,

.msg-avatar.ai span,

.msg-wrapper.assistant .msg-avatar img,

.msg-wrapper.assistant .msg-avatar svg,

.msg-wrapper.assistant .msg-avatar span,

.message-avatar .ai-avatar-favicon,

.ai-avatar-favicon,

.ai-fav-svg {

  display: none !important;

}

.msg-avatar.user img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  filter: none !important;

  border-radius: 50% !important;

  display: block !important;

}

/* JS appendMessage tarafindan olusturulan .message-avatar (AI) */

.message-avatar,

.message.assistant .message-avatar {

  width: 28px !important;

  height: 28px !important;

  min-width: 28px !important;

  border-radius: 50% !important;

  flex-shrink: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  /* Her temada: beyaz arka plan + dark.png */

  background-color: #ffffff !important;

  background-image: url('/assets/img/dark.png') !important;

  background-size: 65% !important;

  background-repeat: no-repeat !important;

  background-position: center !important;

  overflow: hidden !important;

  margin-top: 2px !important;

  border: none !important;

  box-shadow: none !important;

  color: transparent !important;

}

/* Dark modda: beyaz arka plan + dark.png */

[data-theme="dark"] .message-avatar,

[data-theme="dark"] .message.assistant .message-avatar {

  background-color: #ffffff !important;

  background-image: url('/assets/img/dark.png') !important;

}

/* Light modda: beyaz arka plan + dark.png */

[data-theme="light"] .message-avatar,

[data-theme="light"] .message.assistant .message-avatar {

  background-color: #f0f0f0 !important;

  background-image: url('/assets/img/dark.png') !important;

}

/* img.ai-logo-img varken background-image'i kapat (:has modern tarayıcılar) */

.message-avatar:has(> img.ai-logo-img),

.message.assistant .message-avatar:has(> img.ai-logo-img),

.message-avatar[data-has-logo="1"],

.message.assistant .message-avatar[data-has-logo="1"] {

  background-image: none !important;

}

/* message-avatar icindeki SVG/span gizle — ai-logo-img img'sini GIZLEME */

.message-avatar .ai-avatar-favicon,

.message-avatar > svg,

.message-avatar > span,

.message.assistant .message-avatar > *:not(img.ai-logo-img) {

  display: none !important;

}

/* ai-logo-img her zaman görünür */

.message-avatar > img.ai-logo-img,

.message.assistant .message-avatar > img.ai-logo-img {

  display: block !important;

  width: 65% !important;

  height: 65% !important;

  object-fit: contain !important;

  flex-shrink: 0 !important;

}

/* ── Typing status metni: dark temada beyaz, light temada koyu ── */

.typing-status,

.typing-status[data-state="thinking"],

.typing-status[data-state="writing"],

.typing-status[data-state="done"] {

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

  font-style: normal !important;

  font-weight: 500 !important;

}

[data-theme="dark"] .typing-status,

[data-theme="dark"] .typing-status[data-state="thinking"],

[data-theme="dark"] .typing-status[data-state="writing"],

[data-theme="dark"] .typing-status[data-state="done"],

html:not([data-theme]) .typing-status {

  color: #ffffff !important;

}

[data-theme="light"] .typing-status,

[data-theme="light"] .typing-status[data-state="thinking"],

[data-theme="light"] .typing-status[data-state="writing"],

[data-theme="light"] .typing-status[data-state="done"] {

  color: #111111 !important;

}

/* İçerik alanı */

.msg-content {

  display: flex !important;

  flex-direction: column !important;

  min-width: 0 !important;

  max-width: 100% !important;

  flex: 1 !important;

}

.msg-wrapper.user .msg-content {

  align-items: flex-end !important;

  flex: 0 0 auto !important;

  max-width: 80% !important;

}

/* AI / assistant — avatar hariç kalan alan, tam genişlik değil */

#messages .msg-wrapper.ai .msg-content,

#messages .msg-wrapper.assistant .msg-content,

.msg-wrapper.ai .msg-content,

.msg-wrapper.assistant .msg-content {

  align-items: flex-start !important;

  flex: 1 1 0 !important;

  min-width: 0 !important;

  max-width: calc(100% - 44px) !important;

  width: auto !important;

}

/* Model etiketi */

.msg-model-label {

  font-size: .72rem !important;

  color: #888 !important;

  margin-bottom: 3px !important;

  display: flex !important;

  align-items: center !important;

  gap: 4px !important;

}

/* KULLANICI BALONU — krem/sarı (ChatGPT tarzı) */

.msg-wrapper.user .msg-bubble {

  display: inline-block !important;

  background: #f0ede8 !important;

  color: #1a1a1a !important;

  padding: 9px 16px !important;

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

  font-size: .9375rem !important;

  line-height: 1.52 !important;

  word-break: break-word !important;

  border: none !important;

  box-shadow: none !important;

  white-space: pre-wrap !important;

  max-width: 100% !important;

}

/* Dark mod — tüm varyasyonları kapsa */

[data-theme="dark"] .msg-wrapper.user .msg-bubble,

:root:not([data-theme="light"]) .msg-wrapper.user .msg-bubble {

  background: #2a2a2a !important;

  color: #f0f0f0 !important;

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

}

/* Light mod */

[data-theme="light"] .msg-wrapper.user .msg-bubble {

  background: #f0ede8 !important;

  color: #1a1a1a !important;

  border: none !important;

}

/* AI BALONU — tamamen şeffaf, sadece metin (.ai ve .assistant destekli) */

.msg-wrapper.ai .msg-bubble,

.msg-wrapper.assistant .msg-bubble,

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

  background: none !important;

  padding: 2px 0 0 0 !important;

  border-radius: 0 !important;

  border: none !important;

  box-shadow: none !important;

  font-size: .9375rem !important;

  line-height: 1.72 !important;

  word-break: break-word !important;

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

  max-width: 100% !important;

  width: auto !important;

}

[data-theme="light"] .msg-wrapper.ai .msg-bubble,

[data-theme="light"] .msg-wrapper.assistant .msg-bubble {

  color: #1a1a1a !important;

}

[data-theme="dark"] .msg-wrapper.ai .msg-bubble,

[data-theme="dark"] .msg-wrapper.assistant .msg-bubble,

:root:not([data-theme="light"]) .msg-wrapper.ai .msg-bubble,

:root:not([data-theme="light"]) .msg-wrapper.assistant .msg-bubble {

  color: #dff0ff !important;

}

/* Aksiyon butonları — her zaman görünür */

.msg-actions {

  display: flex !important;

  gap: 2px !important;

  margin-top: 4px !important;

  opacity: 1 !important;

  transition: opacity .15s !important;

}

.msg-wrapper.user .msg-actions { justify-content: flex-end !important; }

.msg-action-btn {

  background: none !important;

  border: none !important;

  cursor: pointer !important;

  color: #999 !important;

  padding: 4px 5px !important;

  border-radius: 6px !important;

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

  display: inline-flex !important;

  align-items: center !important;

}

.msg-action-btn:hover {

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

  color: #333 !important;

}

[data-theme="dark"] .msg-action-btn { color: #666 !important; }

[data-theme="dark"] .msg-action-btn:hover {

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

  color: #ccc !important;

}

/* Mobil */

@media (max-width: 768px) {

  .msg-wrapper {

    padding: 2px 10px !important;

    max-width: 100% !important;

  }

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

  .msg-wrapper.user .msg-bubble {

    font-size: .9rem !important;

    padding: 8px 13px !important;

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

  }

}

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

   KULLANICI MESAJI — sağda krem balon

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

#messages .message.user .message-inner {

  flex-direction: row-reverse !important;

  align-items: flex-end !important;

  justify-content: flex-start !important;

}

#messages .message.user .message-avatar {

  display: none !important;

}

#messages .message.user .message-body {

  max-width: 72% !important;

  min-width: 0 !important;

  background: none !important;

  border-radius: 0 !important;

  padding: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-end !important;

}

/* Krem balon — ChatGPT birebir */

#messages .message.user .message-content {

  display: inline-block !important;

  background: #f0ede8 !important;

  color: #1a1a1a !important;

  padding: 9px 16px !important;

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

  font-size: .9375rem !important;

  line-height: 1.5 !important;

  word-break: break-word !important;

  border: none !important;

  box-shadow: none !important;

  max-width: 100% !important;

  white-space: pre-wrap !important;

}

[data-theme="dark"] #messages .message.user .message-content {

  background: #2a2a32 !important;

  color: #c4c5c7 !important;

}

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

  background: #f0ede8 !important;

  color: #1a1a1a !important;

}

/* Kullanıcı aksiyon bar — hover'da görünür */

#messages .message.user .message-actions-bar {

  display: flex !important;

  justify-content: flex-end !important;

  padding: 1px 2px 0 !important;

  opacity: 1 !important;

  gap: 2px !important;

}

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

   AI MESAJI — sol, şeffaf, sıkı

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

#messages .message.assistant .message-inner {

  flex-direction: row !important;

  align-items: flex-start !important;

}

/* Avatar — küçük yuvarlak */

#messages .message.assistant .message-avatar {
  display: flex !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin-top: 0px !important;
  background: var(--bg)  !important;
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

#messages .message.assistant .message-body {

  flex: 1 !important;

  min-width: 0 !important;

  padding: 0 !important;

  background: none !important;

  border-radius: 0 !important;

}

/* AI içerik — şeffaf, sade */

#messages .message.assistant .message-content {

  background: none !important;

  padding: 0 !important;

  border-radius: 0 !important;

  border: none !important;

  box-shadow: none !important;

  font-size: .8375rem !important;

  line-height: 1.72 !important;

}

[data-theme="light"] #messages .message.assistant .message-content {

  color: #1a1a1a !important;

}

[data-theme="dark"] #messages .message.assistant .message-content {

  color: #ececec !important;

}

#messages .message.assistant .msg-content-card {

  background: none !important;

  border: none !important;

  box-shadow: none !important;

  padding: 0 !important;

}

/* AI aksiyon bar — her zaman görünür */

#messages .message.assistant .message-actions-bar {

  padding: 4px 0 0 0 !important;

  opacity: 1 !important;

  display: flex !important;

  gap: 2px !important;

  align-items: center !important;

}

/* Aksiyon butonları — sade ikon */

#messages .message-actions-bar button,

#messages .message-actions-bar .msg-action-btn {

  background: none !important;

  border: none !important;

  cursor: pointer !important;

  color: #888 !important;

  padding: 4px 5px !important;

  border-radius: 6px !important;

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

  font-size: .78rem !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 3px !important;

}

#messages .message-actions-bar button:hover {

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

  color: #333 !important;

}

[data-theme="dark"] #messages .message-actions-bar button {

  color: #666 !important;

}

[data-theme="dark"] #messages .message-actions-bar button:hover {

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

  color: #ccc !important;

}

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

   INPUT ALANI — ChatGPT Pill

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

#input-area {

  background: transparent !important;

  border-top: none !important;

  border: none !important;

  padding: 0 16px 12px !important;

  position: relative !important;

}

/* Tüm input area çizgilerini kaldır — mobile-chatgpt.css override'ları ezer */

body #input-area,

body .input-area,

html body #input-area,

html body .input-area {

  border-top: none !important;

  border: none !important;

  box-shadow: none !important;

  outline: none !important;

}

body #input-area::before,

body #input-area::after,

body .input-area::before,

body .input-area::after {

  display: none !important;

  border: none !important;

}

/* Ana pill */

#chat-input-container,

#input-area .input-container {

  max-width: 700px !important;

  margin: 0 auto !important;

  border-radius: 28px !important;

  overflow: visible !important;

  position: relative !important;

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

  transition: box-shadow .2s !important;

  background: #fff !important;

  border: none !important;

}

[data-theme="dark"] #chat-input-container,

[data-theme="dark"] #input-area .input-container {

  background: #2a2a32 !important;

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

}

#chat-input-container:focus-within,

#input-area .input-container:focus-within {

  box-shadow: none !important;

}

[data-theme="dark"] #chat-input-container:focus-within {

  box-shadow: none !important;

}

/* Attachment önizleme */

#attachments-preview {

  display: none !important;

  flex-wrap: wrap !important;

  gap: 6px !important;

  padding: 8px 12px 0 !important;

}

#attachments-preview:not(:empty) { display: flex !important; }

/* gx-bar-row: yatay tek satı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;

    padding: 0px 0px 0px 0px !important;

    gap: 4px !important;

    min-height: 48px !important;

}

/* Sol + */

.gx-add-side {

  flex-shrink: 0 !important;

  display: block !important;

  position: relative !important;

  overflow: visible !important;

}

.input-add-wrap {

  position: relative !important;

  overflow: visible !important;

}

.gx-plus-btn, .itb-add-btn {

  width: 32px !important;

  height: 32px !important;

  min-width: 32px !important;

  border-radius: 50% !important;

  background: none !important;

  border: none !important;

  cursor: pointer !important;

  color: #666 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 0 !important;

  flex-shrink: 0 !important;

  transition: background .12s !important;

}

.gx-plus-btn:hover { background: rgba(0,0,0,.07) !important; }

[data-theme="dark"] .gx-plus-btn { color: #aaa !important; }

[data-theme="dark"] .gx-plus-btn:hover { background: rgba(255,255,255,.08) !important; }

/* Textarea */

#message-input {

  flex: 1 1 auto !important;

  min-width: 0 !important;

  width: 0 !important;

  background: transparent !important;

  border: none !important;

  outline: none !important;

  resize: none !important;

  font-size: .9375rem !important;

  line-height: 1.5 !important;

  color: #1a1a1a !important;

  min-height: 24px !important;

  max-height: 200px !important;

  font-family: inherit !important;

  box-shadow: none !important;

  padding: 6px 8px !important;

  overflow-y: auto !important;

  scrollbar-width: none !important;

  display: block !important;

}

#main #message-input,

#chat-input-container #message-input {

  padding: 6px 8px !important;

  width: 0 !important;

  flex: 1 1 auto !important;

}

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

[data-theme="dark"] #message-input { color: #f0f0f2 !important; }

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

#message-input::placeholder { color: #bbb !important; font-size: .9rem !important; }

/* SaÄŸ grup */

.gx-bar-right {

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  flex-shrink: 0 !important;

  gap: 6px !important;

  overflow: visible !important;

  position: relative !important;

}

/* Model wrap */

#chat-model-wrap {

  position: relative !important;

  flex-shrink: 0 !important;

  overflow: visible !important;

}

/* Model pill */

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

  display: inline-flex !important;

  align-items: center !important;

  gap: 4px !important;

  background: transparent !important;

  border: 1.5px solid rgba(0,0,0,.16) !important;

  border-radius: 20px !important;

  padding: 4px 10px !important;

  font-size: .78rem !important;

  font-weight: 500 !important;

  color: #444 !important;

  cursor: pointer !important;

  white-space: nowrap !important;

  flex-shrink: 0 !important;

  max-width: 140px !important;

  overflow: hidden !important;

  transition: background .12s !important;

}

.itb-model-pill:hover { background: rgba(0,0,0,.04) !important; }

[data-theme="dark"] .itb-model-pill,

[data-theme="dark"] #input-model-pill {

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

  color: #ccc !important;

}

.itb-model-pill span, #input-model-label {

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: nowrap !important;

  max-width: 90px !important;

  font-size: .78rem !important;

}

/* Send butonu — ChatGPT sarı */

#btn-send, .input-send-btn.input-send-inline {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 34px !important;

  height: 34px !important;

  min-width: 34px !important;

  border-radius: 50% !important;

  background: linear-gradient(
160deg, #04c1cc, #732ced) !important;

  color: #fff !important;

  border: none !important;

  cursor: pointer !important;

  padding: 0 !important;

  flex-shrink: 0 !important;

  transition: transform .12s, opacity .12s !important;

  box-shadow: none !important;

  margin: 0 !important;

}

#btn-send:hover:not(:disabled) { transform: scale(1.07) !important; }

#btn-send:disabled, .input-send-btn.input-send-inline:disabled {

  background: rgba(180,180,180,.35) !important;

  color: rgba(80,80,80,.5) !important;

  cursor: not-allowed !important;

}

[data-theme="dark"] #btn-send:disabled {

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

  color: rgba(255,255,255,.2) !important;

}

/* Eski yapı gizle */

#chat-input-container .input-toolbar { display: none !important; }

#chat-input-container .input-textarea-row { display: none !important; }

/* Ses butonu gizle (desktop) */

#voice-btn, #work-voice-btn, .input-mic-btn { display: none !important; }

/* Mobil mikrofon butonu — gx-chat-ux-v2.js tarafından eklenir */

.gx-mobile-mic { display: none !important; }

/* Disclaimer */

#ai-disclaimer-bar, #guest-disclaimer {

  max-width: 100% !important;

  margin: 0 auto !important;

  padding: 0px 0px 0 !important;

  font-size: .71rem !important;

  color: #bbb !important;

  text-align: center !important;

}

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

   + MENÜSÜ

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

.input-add-menu {

  display: none;

  position: fixed;

  left: 0;

  bottom: 65px;

  top: auto;

  right: auto;

  background: #fff;

  border: 1px solid rgba(0,0,0,.1);

  border-radius: 14px;

  padding: 6px;

  z-index: 999999;

  box-shadow: 0 6px 24px rgba(0,0,0,.13);

  min-width: 260px;

  max-height: 70vh;

  overflow-y: auto;

}

[data-theme="dark"] .input-add-menu {

  background: #1e1e28;

  border-color: rgba(255,255,255,.1);

  box-shadow: 0 8px 32px rgba(0,0,0,.45);

}

.input-add-menu.open { display: block; }

.iam-section-label {

  font-size: .63rem !important;

  font-weight: 700 !important;

  color: #aaa !important;

  text-transform: uppercase !important;

  letter-spacing: .06em !important;

  padding: 5px 10px 2px !important;

}

.iam-divider {

  height: 1px !important;

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

  margin: 3px 6px !important;

}

[data-theme="dark"] .iam-divider { background: rgba(255,255,255,.07) !important; }

.input-add-item {

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  padding: 8px 10px !important;

  border-radius: 9px !important;

  border: none !important;

  background: none !important;

  cursor: pointer !important;

  font-size: .875rem !important;

  color: #222 !important;

  width: 100% !important;

  text-align: left !important;

  transition: background .1s !important;

  font-family: inherit !important;

}

.input-add-item:hover { background: rgba(0,0,0,.05) !important; }

[data-theme="dark"] .input-add-item { color: #ddd !important; }

[data-theme="dark"] .input-add-item:hover { background: rgba(255,255,255,.06) !important; }

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

   MOBÄ°L

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

@media (max-width: 768px) {

  #messages .message-inner {

    padding: 0px 0px !important;

    max-width: 100% !important;

  }

  #messages .message.user .message-body { max-width: 84% !important; }

  #messages .message.user .message-content {

    font-size: .9rem !important;

    padding: 8px 13px !important;

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

  }

  #input-area {

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

    display: flex !important;

    flex-direction: column !important;

    gap: 4px !important;

  }

  #chat-input-container, #input-area .input-container {

    border-radius: 22px !important;

    max-width: 100% !important;

    margin: 0 !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }

  /* gx-bar-row: grid override — index.php'deki grid kuralıyla uyumlu */

  .gx-bar-row {

    padding: 6px 8px !important;

    gap: 0 !important;

    min-height: 48px !important;

  }

  .itb-model-pill span, #input-model-label {

    max-width: 52px !important;

    font-size: .7rem !important;

  }

  .itb-model-pill, #input-model-pill { padding: 4px 7px !important; max-width: 95px !important; }

  #btn-send, .input-send-btn.input-send-inline {

    width: 32px !important;

    height: 32px !important;

    min-width: 32px !important;

  }

  #message-input { font-size: 16px !important; }

}

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

   GÖRSEL YÜKLEME ÖNİZLEME — ChatGPT tarzı

   Input kutusunun üstünde büyük thumbnail

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

/* Önizleme alanı — input container içinde textarea'nın üstünde */

.input-attachments,

#attachments-preview,

#work-attachments-preview {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 8px !important;

  padding: 10px 14px 6px !important;

  align-items: flex-start !important;

}

.input-attachments:empty,

#attachments-preview:empty,

#work-attachments-preview:empty {

  display: none !important;

  padding: 0 !important;

}

/* Görsel önizleme kartı — büyük thumbnail */

#attachments-preview .att-preview-item,

#work-attachments-preview .att-preview-item {

  position: relative !important;

  display: inline-flex !important;

  flex-direction: column !important;

  align-items: center !important;

  gap: 4px !important;

  background: transparent !important;

  border: none !important;

  padding: 0 !important;

  max-width: 100px !important;

}

/* Görsel thumbnail — büyük ve belirgin */

#attachments-preview .att-preview-item img,

#work-attachments-preview .att-preview-item img {

  width: 90px !important;

  height: 90px !important;

  object-fit: cover !important;

  border-radius: 10px !important;

  border: 2px solid rgba(255,255,255,.15) !important;

  cursor: pointer !important;

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

  display: block !important;

}

[data-theme="light"] #attachments-preview .att-preview-item img,

[data-theme="light"] #work-attachments-preview .att-preview-item img {

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

}

#attachments-preview .att-preview-item img:hover,

#work-attachments-preview .att-preview-item img:hover {

  transform: scale(1.04) !important;

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

}

/* Dosya adı — thumbnail altında küçük metin */

#attachments-preview .att-preview-name,

#work-attachments-preview .att-preview-name {

  font-size: .68rem !important;

  color: var(--text2, #7ab0d8) !important;

  max-width: 90px !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  text-align: center !important;

}

/* Kaldır butonu — thumbnail sağ üst köşesi */

#attachments-preview .att-remove,

#work-attachments-preview .att-remove {

  position: absolute !important;

  top: 4px !important;

  right: 4px !important;

  width: 16px !important;

  height: 16px !important;

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

  color: #fff !important;

  border-radius: 50% !important;

  border: none !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  z-index: 4 !important;

  opacity: 1 !important;

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

  padding: 0 !important;

  line-height: 1 !important;

}

#attachments-preview .att-remove:hover,

#work-attachments-preview .att-remove:hover {

  background: #ef4444 !important;

  transform: scale(1.15) !important;

}

#attachments-preview .att-preview-item:hover .att-remove,

#work-attachments-preview .att-preview-item:hover .att-remove {

  opacity: 1 !important;

}

/* Mobilde daha küçük thumbnail */

@media (max-width: 480px) {

  #attachments-preview .att-preview-item img,

  #work-attachments-preview .att-preview-item img {

    width: 64px !important;

    height: 64px !important;

  }

  #attachments-preview .att-preview-item,

  #work-attachments-preview .att-preview-item {

    max-width: 70px !important;

  }

}

/* ── Mesaj içi resimler ── */

.gx-msg-img {

  max-width: 100%;

  max-height: 480px;

  border-radius: 12px;

  display: block;

  cursor: zoom-in;

  object-fit: cover;

  margin: 6px 0;

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

  transition: transform .2s ease, box-shadow .2s ease;

}

.gx-msg-img:hover {

  transform: scale(1.01);

  box-shadow: 0 8px 32px rgba(0,0,0,.35);

}

/* ── Çoklu resim: yan yana grid ── */

.gx-img-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin: 8px 0;

}

.gx-img-grid .gx-msg-img {

  flex: 1 1 calc(50% - 4px);

  min-width: 120px;

  max-width: calc(50% - 4px);

  max-height: 280px;

  margin: 0;

}

@media (max-width: 480px) {

  .gx-img-grid .gx-msg-img {

    flex: 1 1 100%;

    max-width: 100%;

    max-height: 240px;

  }

}

/* ── message-actions-bar — her zaman görünür (app.css display:none override) ── */

#messages .message-actions-bar,

#messages .message.user .message-actions-bar,

#messages .message.assistant .message-actions-bar {

  display: flex !important;

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;

  flex-wrap: wrap !important;

  gap: 2px !important;

}

/* ── msg-act-btn: her zaman görünür, flex-wrap ile sığdır ── */

#messages .message-actions-bar .msg-act-btn,

#messages .message-actions-bar button {

  opacity: 1 !important;

  pointer-events: auto !important;

  flex-shrink: 0 !important;

}

/* ── Mobil: icon-only mod, tam genişliğe sığdır ── */

@media (max-width: 640px) {

  #messages .message-actions-bar {

    flex-wrap: wrap !important;

    gap: 1px !important;

    padding: 4px 0 !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }

  #messages .message.assistant .message-actions-bar {

    padding-left: 0 !important;

  }

  #messages .message-actions-bar .msg-act-btn,

  #messages .message-actions-bar button {

    padding: 5px 7px !important;

    min-width: 30px !important;

    justify-content: center !important;

    flex: 1 !important;

    max-width: 44px !important;

  }

  #messages .message-actions-bar .msg-act-btn span,

  #messages .message-actions-bar button span {

    display: none !important;

  }

  #messages .message-actions-bar .msg-act-divider {

    display: none !important;

  }

}

/* ── Sesli okuma: aktif durumda buton vurgusu ── */

#messages .message-actions-bar .msg-act-btn.speaking {

  color: #3b82f6 !important;

  border-color: rgba(59,130,246,.3) !important;

  background: rgba(59,130,246,.08) !important;

}

/* ── Mobil: dark/light tema renk uyumu ── */

@media (max-width: 640px) {

  [data-theme="dark"] #messages .message-actions-bar .msg-act-btn,
  [data-theme="dark"] #messages .message-actions-bar button {
    color: rgba(255,255,255,.75) !important;
  }

  [data-theme="dark"] #messages .message-actions-bar .msg-act-btn:hover,
  [data-theme="dark"] #messages .message-actions-bar button:hover {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
  }

  [data-theme="light"] #messages .message-actions-bar .msg-act-btn,
  [data-theme="light"] #messages .message-actions-bar button {
    color: rgba(0,0,0,.65) !important;
  }

  [data-theme="light"] #messages .message-actions-bar .msg-act-btn:hover,
  [data-theme="light"] #messages .message-actions-bar button:hover {
    background: rgba(0,0,0,.08) !important;
    color: #000 !important;
  }

}

/* Mobilde att-remove hover çalışmaz — her zaman görünür olsun */

@media (max-width: 768px) {

  #attachments-preview .att-remove,

  #work-attachments-preview .att-remove {

    opacity: 1 !important;

    touch-action: manipulation !important;

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

  }

}

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

   MOBİL MİKROFON BUTONU — sadece mobilde görünür

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

@media (max-width: 768px) {

  /* gx-bar-row yüksekliğini düşür */

  .gx-bar-row {

    min-height: 40px !important;

  }

  /* Mobil mic butonu aktif et */

  .gx-mobile-mic {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 34px !important;

    height: 34px !important;

    min-width: 34px !important;

    border-radius: 50% !important;

    border: none !important;

    background: none !important;

    color: var(--text3, #888) !important;

    cursor: pointer !important;

    flex-shrink: 0 !important;

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

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

    touch-action: manipulation !important;

  }

  .gx-mobile-mic:active {

    background: rgba(124,58,237,.12) !important;

    color: var(--accent, #7c3aed) !important;

  }

  /* Kayıt aktifken kırmızı nabız efekti */

  .gx-mobile-mic.recording {

    color: #ef4444 !important;

    animation: gx-mic-pulse 1.2s ease-in-out infinite !important;

  }

  @keyframes gx-mic-pulse {

    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }

    60%  { box-shadow: 0 0 0 8px rgba(239,68,68,0); }

    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }

  }

  /* ── Ses dalgası / eko efekti — ses gelince oynasın ── */

  .gx-mic-wave {

    display: none;

    align-items: center;

    gap: 2px;

    height: 20px;

    margin-left: 4px;

  }

  .gx-mobile-mic.recording .gx-mic-wave { display: flex !important; }

  .gx-mobile-mic.recording .gx-mic-icon { display: none !important; }

  .gx-mic-wave-bar {

    width: 3px;

    border-radius: 3px;

    background: #ef4444;

    transform-origin: bottom;

    animation: gx-wave-idle .9s ease-in-out infinite alternate;

  }

  .gx-mic-wave-bar:nth-child(1) { height: 6px;  animation-delay: 0s; }

  .gx-mic-wave-bar:nth-child(2) { height: 10px; animation-delay: .12s; }

  .gx-mic-wave-bar:nth-child(3) { height: 14px; animation-delay: .24s; }

  .gx-mic-wave-bar:nth-child(4) { height: 10px; animation-delay: .36s; }

  .gx-mic-wave-bar:nth-child(5) { height: 6px;  animation-delay: .48s; }

  /* Ses gelince daha aktif animasyon */

  .gx-mobile-mic.recording.active-sound .gx-mic-wave-bar {

    animation-name: gx-wave-active !important;

    animation-duration: .35s !important;

  }

  @keyframes gx-wave-idle {

    from { transform: scaleY(.4); opacity: .5; }

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

  }

  @keyframes gx-wave-active {

    from { transform: scaleY(.5);  opacity: .7; }

    to   { transform: scaleY(1.8); opacity: 1; }

  }

}