/**

 * GlomaxGPT — GX Enhancements CSS

 * gx-enhancements.js ile eşleşen tüm bileşen stilleri

 */

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

   SIDEBAR — UPGRADE / RENEW BANNERS

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

.gx-upgrade-banner {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 12px;

  margin: 6px 10px 8px;

  border-radius: 12px;

  background: linear-gradient(135deg, rgba(80,80,80,.08) 0%, rgba(80,80,80,.08) 100%);

  border: 1px solid rgba(120,120,120,.2);

  text-decoration: none;

  color: var(--text);

  transition: all .18s;

  cursor: pointer;

}

.gx-upgrade-banner:hover {

  background: linear-gradient(135deg, rgba(100,100,100,.2) 0%, rgba(100,100,100,.16) 100%);

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

  text-decoration: none;

  transform: translateY(-1px);

}

.gx-upgrade-banner-icon {

  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;

  background: var(--accent-grad);

  display: flex; align-items: center; justify-content: center; color: #fff;

}

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

.gx-upgrade-banner-title { display: block; font-size: .8rem; font-weight: 700; color: var(--text); }

.gx-upgrade-banner-sub   { display: block; font-size: .72rem; color: var(--text3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gx-upgrade-banner-arrow { color: var(--text3); flex-shrink: 0; }

.gx-renew-banner {

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

  padding: 8px 12px; margin: 6px 10px 8px; border-radius: 10px;

  background: var(--bg-hover); border: 1px solid var(--border-subtle);

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

  text-decoration: none; transition: all .18s;

}

.gx-renew-banner:hover { background: var(--bg-active); text-decoration: none; }

.gx-renew-banner.urgent { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.2); color: var(--error); }

.gx-plan-badge-row {

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

  padding: 8px 12px 6px; margin: 0 2px;

}

.gx-plan-badge-pill {

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

  background: var(--accent-soft); color: var(--accent);

  border: 1px solid rgba(100,100,100,.2); border-radius: 20px;

  padding: 3px 10px; font-size: .72rem; font-weight: 700;

}

.gx-plan-badge-days   { font-size: .72rem; color: var(--text3); }

.gx-plan-badge-active { font-size: .72rem; color: var(--success); font-weight: 600; }

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

   TOPBAR — EXTRA BUTTONS

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

.gx-topbar-icon-btn {

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

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

  color: var(--text3); transition: all .15s; background: none; border: none; cursor: pointer;

  flex-shrink: 0;

}

.gx-topbar-icon-btn:hover { background: var(--surface2); color: var(--text); }

.gx-topbar-icon-btn.active { color: var(--accent); background: var(--accent-soft); }

.gx-font-group {

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

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

  border-radius: 8px; padding: 2px 6px;

  flex-shrink: 0;

}

.gx-topbar-mini-btn {

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

  background: none; border: none; cursor: pointer; padding: 2px 4px;

  border-radius: 4px; transition: all .12s;

  font-family: var(--font);

}

.gx-topbar-mini-btn:hover { color: var(--accent); background: var(--accent-soft); }

.gx-font-display { font-size: .72rem; color: var(--text4); padding: 0 2px; white-space: nowrap; }

.gx-session-timer {

  font-size: .72rem; color: var(--text4); font-variant-numeric: tabular-nums;

  padding: 0 6px; white-space: nowrap;

}

.gx-export-btn {

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

  padding: 6px 12px; border-radius: 8px; font-size: .78rem; font-weight: 600;

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

  cursor: pointer; transition: all .15s; white-space: nowrap;

}

.gx-export-btn:hover { background: var(--surface3); color: var(--text); }

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

   FOCUS MODE

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

body.gx-focus-mode .sidebar,

body.gx-focus-mode .topbar,

body.gx-focus-mode .input-wrapper > :not(.input-box) {

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

}

body.gx-focus-mode .mobile-page-header {

  opacity: 0.15;

  pointer-events: auto;

  transition: opacity 0.3s ease;

}

body.gx-focus-mode .mobile-page-header:hover,

body.gx-focus-mode .mobile-page-header:focus-within {

  opacity: 1;

  pointer-events: auto;

}

body.gx-focus-mode .messages-container { padding-bottom: 0 !important; }

body.gx-focus-mode .main-content { padding-top: 0 !important; }

body.gx-focus-mode #gx-focus-btn { opacity: 1 !important; pointer-events: auto !important; position: fixed; top: 12px; right: 12px; z-index: 999; background: var(--surface2); box-shadow: var(--shadow); }

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

   SMART TYPING INDICATOR

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

.gx-typing-model {

  font-size: .7rem; color: var(--text4); margin-top: 6px;

  font-style: italic;

}

.gx-typing-timer {

  font-size: .68rem; color: var(--text4); margin-left: 6px;

  font-variant-numeric: tabular-nums;

}

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

   MESSAGE META (kelime sayısı, yer imi, çeviri, sabitle)

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

.gx-msg-meta {

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

  margin-top: 4px; flex-wrap: wrap;

}

.gx-msg-words { font-size: .7rem; color: var(--text4); }

.gx-msg-bookmark-btn,

.gx-msg-translate-btn,

.gx-msg-pin-btn {

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

  width: 22px; height: 22px; border-radius: 5px;

  color: var(--text4); background: none; border: none; cursor: pointer;

  transition: all .12s;

}

.gx-msg-bookmark-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

.gx-msg-bookmark-btn.active { color: var(--text-primary); }

.gx-msg-translate-btn:hover { color: var(--accent); background: var(--accent-soft); }

.gx-msg-pin-btn:hover { color: var(--text-secondary); background: var(--bg-hover); }

.gx-msg-timestamp {

  font-size: .68rem; color: var(--text4); margin-left: auto;

  display: none; position: absolute; bottom: -18px; right: 0;

  white-space: nowrap;

}

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

   CONVERSATION INSIGHTS PANEL

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

.gx-insights-panel {

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

  border-radius: 14px; padding: 16px 18px; margin: 8px 16px 0;

  box-shadow: var(--shadow); animation: gxPanelIn .2s ease;

}

@keyframes gxPanelIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

.gx-ins-header {

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

  margin-bottom: 14px;

}

.gx-ins-header span { display: flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 700; }

.gx-ins-header button { background: none; border: none; cursor: pointer; color: var(--text3); display: flex; align-items: center; }

.gx-ins-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }

@media(max-width:480px) { .gx-ins-grid { grid-template-columns: repeat(2,1fr); } }

.gx-ins-card {

  background: var(--surface2); border-radius: 10px; padding: 10px 12px; text-align: center;

}

.gx-ins-num { font-size: 1.3rem; font-weight: 800; color: var(--accent); line-height: 1.1; }

.gx-ins-label { font-size: .7rem; color: var(--text4); margin-top: 2px; }

.gx-ins-bar-wrap { margin-bottom: 12px; }

.gx-ins-bar-label { font-size: .72rem; color: var(--text3); margin-bottom: 5px; }

.gx-ins-bar { height: 8px; background: rgba(100,100,100,.2); border-radius: 4px; overflow: hidden; }

.gx-ins-bar-user { height: 100%; background: var(--accent-grad); border-radius: 4px; transition: width .6s ease; }

.gx-ins-bar-legend { display: flex; justify-content: space-between; margin-top: 4px; }

.gx-ins-legend-user { font-size: .68rem; color: var(--accent); font-weight: 600; }

.gx-ins-legend-ai   { font-size: .68rem; color: var(--text4); }

.gx-ins-footer { display: flex; justify-content: flex-end; }

.gx-ins-btn {

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

  padding: 6px 12px; border-radius: 8px; font-size: .78rem; font-weight: 600;

  background: var(--accent-soft); color: var(--accent); border: none; cursor: pointer; transition: all .15s;

}

.gx-ins-btn:hover { background: rgba(100,100,100,.2); }

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

   SMART SUGGESTION PILLS

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

.gx-smart-pill {

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

  padding: 8px 14px; border-radius: 20px; font-size: .82rem;

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

  color: var(--text2); cursor: pointer; transition: all .15s;

  animation: gxPillIn .3s ease both;

}

.gx-smart-pill:hover { background: var(--surface2); border-color: var(--border2); color: var(--text); }

@keyframes gxPillIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.gx-pill-icon { font-size: .95rem; }

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

   AUTO-SAVE DRAFT BANNER

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

.gx-draft-banner {

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

  padding: 7px 14px; background: var(--bg-hover); border: 1px solid var(--border-subtle);

  border-radius: 10px; font-size: .78rem; color: var(--text-secondary);

  margin: 6px 0 2px; animation: gxPanelIn .2s ease;

}

.gx-draft-banner button {

  background: none; border: none; color: var(--text-secondary); cursor: pointer;

  font-size: .72rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; transition: background .12s;

}

.gx-draft-banner button:hover { background: rgba(245,158,11,.15); }

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

   BOOKMARKS PANEL

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

.gx-bookmarks-panel {

  position: fixed; top: 60px; right: 12px; width: 320px;

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

  border-radius: 16px; box-shadow: var(--shadow-lg); z-index: 500;

  max-height: 420px; display: flex; flex-direction: column;

  animation: gxPanelIn .2s ease;

}

.gx-bk-header {

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

  padding: 14px 16px 12px; border-bottom: 1px solid var(--border);

}

.gx-bk-header span { display: flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 700; }

.gx-bk-header button { background: none; border: none; cursor: pointer; color: var(--text3); display: flex; align-items: center; }

.gx-bk-list { flex: 1; overflow-y: auto; padding: 8px 0; }

.gx-bk-item { padding: 10px 16px; border-bottom: 1px solid var(--border); transition: background .12s; cursor: pointer; }

.gx-bk-item:hover { background: var(--surface2); }

.gx-bk-text { font-size: .82rem; color: var(--text); line-height: 1.4; margin-bottom: 4px; }

.gx-bk-time { font-size: .7rem; color: var(--text4); }

.gx-bk-empty { padding: 24px; text-align: center; color: var(--text4); font-size: .82rem; }

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

   CODE CONTEXT MENU

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

.gx-code-ctx-menu {

  position: fixed; z-index: 9999;

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

  border-radius: 12px; padding: 6px; box-shadow: var(--shadow-lg);

  min-width: 180px; animation: gxPanelIn .15s ease;

}

.gx-ctx-title { font-size: .7rem; font-weight: 700; color: var(--text4); padding: 4px 10px 6px; text-transform: uppercase; letter-spacing: .05em; }

.gx-ctx-item {

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

  padding: 7px 10px; border-radius: 7px; font-size: .82rem; color: var(--text2);

  background: none; border: none; width: 100%; text-align: left; cursor: pointer; transition: all .12s;

}

.gx-ctx-item:hover { background: var(--surface2); color: var(--text); }

.gx-ctx-item.active { color: var(--accent); font-weight: 700; }

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

   INLINE TRANSLATE BOX

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

.gx-translate-box {

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

  border-radius: 12px; padding: 12px 14px; margin-top: 10px;

  animation: gxPanelIn .2s ease;

}

.gx-tr-header {

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

  font-size: .8rem; font-weight: 700; margin-bottom: 10px; color: var(--text2);

}

.gx-tr-header button { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text3); display: flex; align-items: center; }

.gx-tr-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.gx-tr-lang-btn {

  padding: 4px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600;

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

  cursor: pointer; transition: all .12s;

}

.gx-tr-lang-btn:hover { color: var(--accent); border-color: rgba(100,100,100,.3); background: var(--accent-soft); }

.gx-tr-lang-btn.active { background: var(--accent-soft); color: var(--accent); border-color: rgba(100,100,100,.3); }

.gx-tr-result { min-height: 36px; }

.gx-tr-loading { display: flex; align-items: center; gap: 7px; color: var(--text4); font-size: .82rem; }

.gx-tr-text { font-size: .85rem; color: var(--text); line-height: 1.6; margin-bottom: 8px; }

.gx-tr-copy {

  display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: .75rem; font-weight: 600;

  background: var(--accent-soft); color: var(--accent); border: none; cursor: pointer; transition: background .12s;

}

.gx-tr-copy:hover { background: rgba(100,100,100,.2); }

.gx-tr-error { font-size: .8rem; color: #ef4444; }

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

   PINNED CONTEXT BANNER

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

.gx-pinned-banner {

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

  padding: 8px 14px; background: rgba(80,80,80,.08);

  border: 1px solid rgba(80,80,80,.15); border-radius: 10px;

  margin: 6px 16px 0; animation: gxPanelIn .2s ease;

}

.gx-pinned-icon { color: var(--text-secondary); flex-shrink: 0; display: flex; align-items: center; }

.gx-pinned-text { flex: 1; font-size: .78rem; color: var(--text2); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gx-pinned-close { background: none; border: none; cursor: pointer; color: var(--text4); display: flex; align-items: center; flex-shrink: 0; }

.gx-pinned-close:hover { color: var(--text); }

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

   READING PROGRESS BAR

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

.gx-read-bar {

  position: fixed; bottom: 0; left: 0; height: 3px;

  background: var(--accent-grad); border-radius: 0 2px 0 0;

  width: 0; opacity: 0; z-index: 1000;

  transition: width .1s linear, opacity .3s ease;

  pointer-events: none;

}

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

   NETWORK STATUS BANNER

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

.gx-network-banner {

  position: fixed; top: 0; left: 50%; transform: translateX(-50%);

  background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-default);

  border-radius: 0 0 12px 12px; padding: 7px 18px; font-size: .78rem; font-weight: 600;

  display: flex; align-items: center; gap: 8px; z-index: 9998;

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

  transition: transform .25s ease, opacity .25s ease;

}

.gx-network-banner.hidden { transform: translateX(-50%) translateY(-100%); opacity: 0; }

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

   TAGS EDITOR

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

.gx-tags-editor {

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

  border-radius: 14px; padding: 14px 16px; margin: 8px 16px 0;

  box-shadow: var(--shadow); animation: gxPanelIn .2s ease;

}

.gx-tags-header {

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

  font-size: .85rem; font-weight: 700; margin-bottom: 12px;

}

.gx-tags-header button { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text3); display: flex; align-items: center; }

.gx-tags-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; margin-bottom: 10px; }

.gx-tag {

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

  padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600;

  background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(100,100,100,.2);

}

.gx-tag button { background: none; border: none; color: var(--accent); cursor: pointer; font-size: .85rem; line-height: 1; padding: 0 0 0 2px; }

.gx-tags-empty { font-size: .78rem; color: var(--text4); align-self: center; }

.gx-tags-input-row { display: flex; gap: 8px; }

.gx-tags-input {

  flex: 1; padding: 7px 12px; border-radius: 8px;

  border: 1px solid var(--input-border); background: var(--input-bg);

  color: var(--text); font-size: .82rem; font-family: var(--font); outline: none;

}

.gx-tags-input:focus { border-color: var(--accent); }

.gx-tags-add-btn {

  padding: 7px 14px; border-radius: 8px; font-size: .8rem; font-weight: 700;

  background: var(--accent-soft); color: var(--accent); border: none; cursor: pointer; transition: background .12s;

}

.gx-tags-add-btn:hover { background: rgba(100,100,100,.2); }

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

   SPLIT VIEW OVERLAY

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

.gx-split-overlay {

  position: fixed; inset: 0; z-index: 800;

  background: var(--main-bg); display: flex; flex-direction: column;

  animation: gxPanelIn .2s ease;

}

.gx-split-header {

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

  padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;

}

.gx-split-header span { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; }

.gx-split-header button { background: none; border: none; cursor: pointer; color: var(--text2); display: flex; align-items: center; font-size: .9rem; }

.gx-split-body {

  display: flex; flex: 1; overflow: hidden;

}

.gx-split-pane { flex: 1; overflow-y: auto; padding: 20px; }

.gx-split-pane-label { font-size: .72rem; font-weight: 700; color: var(--text4); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }

.gx-split-pane-content { font-size: .9rem; color: var(--text2); line-height: 1.7; }

.gx-split-divider { width: 1px; background: var(--border); flex-shrink: 0; }

.gx-split-selected-a { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* Split butonu msg-actions içinde */

.gx-split-btn { color: var(--text3); }

.gx-split-btn:hover { color: var(--accent); background: var(--accent-soft) !important; }

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

   COLLAPSED SIDEBAR — Banner gizleme

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

.sidebar.collapsed .gx-upgrade-banner,

.sidebar.collapsed .gx-renew-banner,

.sidebar.collapsed .gx-plan-badge-row { display: none; }

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

   MOBILE RESPONSIVE

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

@media (max-width: 768px) {

  .gx-bookmarks-panel { left: 12px; right: 12px; width: auto; }

  .gx-font-group, .gx-session-timer { display: none; }

  .gx-split-body { flex-direction: column; }

  .gx-split-divider { width: auto; height: 1px; }

  .gx-topbar-icon-btn:not(#gx-focus-btn):not(#gx-insights-btn) { display: none; }

}

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

   PRINT — gx bileşenleri yazdırma için gizle

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

@media print {

  .gx-upgrade-banner, .gx-renew-banner, .gx-plan-badge-row,

  .gx-bookmarks-panel, .gx-insights-panel, .gx-tags-editor,

  .gx-network-banner, .gx-read-bar, .gx-pinned-banner,

  .gx-draft-banner, .gx-session-timer, .gx-font-group { display: none !important; }

}

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

   REDUCED MOTION

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

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

  .gx-smart-pill, .gx-upgrade-banner, .gx-insights-panel,

  .gx-bookmarks-panel, .gx-translate-box, .gx-tags-editor,

  .gx-split-overlay, .gx-pinned-banner { animation: none !important; }

}

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

   DRAG & DROP OVERLAY

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

@keyframes gxDropFadeIn {

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

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

}

#gx-drop-overlay {

  position: fixed;

  inset: 0;

  z-index: 9990;

  background: rgba(124, 58, 237, .15);

  backdrop-filter: blur(2px);

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

  border: 3px dashed rgba(124, 58, 237, .6);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 16px;

  pointer-events: none;

  animation: gxDropFadeIn .15s ease;

}

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

   MESAJ DÜZENLEME (editUserMessage)

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

.msg-edit-wrap {

  display: flex;

  flex-direction: column;

  gap: 6px;

  width: 100%;

}

.msg-edit-ta {

  width: 100%;

  min-height: 60px;

  background: var(--surface1, #1a1a2e);

  border: 1px solid var(--accent, #7c3aed);

  border-radius: 8px;

  padding: 8px 10px;

  color: var(--text1, #ececec);

  font-size: .875rem;

  font-family: inherit;

  resize: vertical;

  outline: none;

  line-height: 1.6;

  box-sizing: border-box;

}

.msg-edit-ta:focus {

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

  box-shadow: 0 0 0 2px rgba(124, 58, 237, .15);

}

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

   UPLOAD PROGRESS TOAST

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

.gx-upload-toast {

  position: fixed;

  bottom: 90px;

  right: 20px;

  z-index: 9995;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 14px;

  background: var(--surface, #1a1a2e);

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

  border-radius: 12px;

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

  min-width: 240px;

  max-width: 340px;

  opacity: 0;

  transform: translateY(8px);

  transition: opacity .25s ease, transform .25s ease;

  pointer-events: none;

}

.gx-upload-toast.visible {

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

}

.gx-upload-toast.done   { border-color: rgba(34,197,94,.3); }

.gx-upload-toast.error  { border-color: rgba(239,68,68,.3); }

.gx-upload-icon {

  width: 32px; height: 32px;

  border-radius: 8px;

  background: rgba(124,58,237,.15);

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

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

  flex-shrink: 0;

}

.gx-upload-info { flex: 1; min-width: 0; }

.gx-upload-name {

  font-size: .78rem;

  font-weight: 600;

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

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.gx-upload-size {

  font-size: .7rem;

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

  font-weight: 400;

}

.gx-upload-status {

  font-size: .72rem;

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

  margin-top: 2px;

}

.gx-upload-bar {

  height: 3px;

  background: var(--border, rgba(255,255,255,.1));

  border-radius: 2px;

  overflow: hidden;

  margin-top: 5px;

}

.gx-upload-bar-fill {

  height: 100%;

  width: 0%;

  background: var(--accent, #7c3aed);

  border-radius: 2px;

  transition: width .4s ease;

}

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

   GUEST LIMIT BANNER

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

#guest-limit-banner {

  margin: 12px 16px;

  border-radius: 14px;

  background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(37,99,235,.08));

  border: 1px solid rgba(124,58,237,.2);

  overflow: hidden;

}

.glb-inner {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 16px;

  flex-wrap: wrap;

}

.glb-inner.glb-reset {

  background: rgba(34,197,94,.06);

  border-color: rgba(34,197,94,.2);

}

.glb-icon {

  font-size: 1.4rem;

  flex-shrink: 0;

}

.glb-content { flex: 1; min-width: 0; }

.glb-title {

  font-size: .85rem;

  font-weight: 700;

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

}

.glb-sub {

  font-size: .75rem;

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

  margin-top: 2px;

}

.glb-countdown {

  font-weight: 700;

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

  font-variant-numeric: tabular-nums;

}

.glb-actions {

  display: flex;

  gap: 8px;

  flex-shrink: 0;

}

.glb-btn {

  padding: 7px 14px;

  border-radius: 8px;

  font-size: .78rem;

  font-weight: 600;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  transition: all .15s;

}

.glb-btn-pri {

  background: linear-gradient(135deg, #7c3aed, #2563eb);

  color: #fff;

}

.glb-btn-pri:hover { opacity: .9; text-decoration: none; }

.glb-btn-sec {

  background: var(--surface2, rgba(255,255,255,.06));

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

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

}

.glb-btn-sec:hover { background: var(--surface3, rgba(255,255,255,.1)); text-decoration: none; }

.glb-close {

  background: none;

  border: none;

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

  cursor: pointer;

  font-size: 1rem;

  padding: 4px;

  margin-left: auto;

}

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

   SEARCH INDICATOR (web arama göstergesi)

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

.gx-search-indicator {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 8px 12px;

  margin: 4px 0;

  border-radius: 10px;

  background: var(--surface2, rgba(255,255,255,.04));

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

  font-size: .78rem;

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

  max-width: 480px;

  transition: all .3s;

}

.gx-search-indicator.done {

  border-color: rgba(34,197,94,.2);

  background: rgba(34,197,94,.04);

}

.gx-search-globe svg {

  animation: gxSpinSlow 2s linear infinite;

}

.gx-search-indicator.done .gx-search-globe svg {

  animation: none;

}

@keyframes gxSpinSlow {

  from { transform: rotate(0deg); }

  to   { transform: rotate(360deg); }

}

.gx-search-favicons {

  display: flex;

  align-items: center;

  gap: 2px;

}

.gx-fav-img {

  width: 14px;

  height: 14px;

  border-radius: 3px;

  object-fit: cover;

}

.gx-search-text {

  flex: 1;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.gx-search-pulse {

  width: 6px; height: 6px;

  border-radius: 50%;

  background: var(--accent, #7c3aed);

  animation: gxPulse 1.2s ease-in-out infinite;

  flex-shrink: 0;

}

.gx-search-indicator.done .gx-search-pulse { display: none; }

@keyframes gxPulse {

  0%, 100% { opacity: .3; transform: scale(.8); }

  50%       { opacity: 1;  transform: scale(1.2); }

}

.gx-think-step {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 5px 10px;

  font-size: .74rem;

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

  margin: 2px 0;

}

.gx-think-step-dot {

  width: 5px; height: 5px;

  border-radius: 50%;

  background: var(--accent, #7c3aed);

  animation: gxPulse 1s ease-in-out infinite;

}

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

   SHOW PREV VERSION BUTTON

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

.show-prev-version-btn {

  font-size: .72rem;

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

  cursor: pointer;

  padding: 4px 0;

  display: flex;

  align-items: center;

  gap: 4px;

  margin-bottom: 8px;

  transition: color .15s;

}

.show-prev-version-btn:hover { color: var(--accent, #7c3aed); }

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

   PRINT — ek bileşenler

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

@media print {

  #gx-drop-overlay, .gx-upload-toast, #guest-limit-banner,

  .gx-search-indicator, .gx-think-step { display: none !important; }

}