/* ============================================================
   CHAT FLOATING BUTTON (bottom-right, round)
============================================================ */
.chat-fab {
  position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 900;
  width: 62px; height: 62px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(13,148,136,0.45); cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.chat-fab:hover { transform: scale(1.08); box-shadow: 0 14px 36px rgba(13,148,136,0.55); }
.chat-fab .chat-fab-badge {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--color-error); color: #fff; font-size: 0.68rem; font-weight: 800; display: none; align-items: center; justify-content: center;
  border: 2px solid var(--bg-primary);
}
.chat-fab .chat-fab-badge.show { display: flex; }
.chat-fab svg.icon-close { display: none; }
.chat-fab.is-open svg.icon-chat { display: none; }
.chat-fab.is-open svg.icon-close { display: block; }

@keyframes chat-fab-pop { 0% { transform: scale(0.6); opacity:0; } 60% { transform: scale(1.05); opacity:1; } 100% { transform: scale(1); } }
.chat-fab.attention { animation: chat-fab-pop 600ms cubic-bezier(0.34,1.56,0.64,1); }

/* ============================================================
   WELCOME BUBBLE (auto-appears)
============================================================ */
.chat-welcome-bubble {
  position: fixed; bottom: 96px; right: var(--space-6); z-index: 899; max-width: 280px;
  background: var(--bg-card); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl);
  box-shadow: var(--shadow-lg); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-color);
  transform: translateY(16px) scale(0.9); opacity: 0; pointer-events: none;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}
.chat-welcome-bubble.show { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.chat-welcome-bubble .cwb-close { position:absolute; top:6px; right:8px; background:none; border:none; color: var(--text-muted); font-size: 16px; line-height:1; padding:4px; }
.chat-welcome-bubble .cwb-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.chat-welcome-bubble .cwb-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); display:flex; align-items:center; justify-content:center; color:#fff; font-size: var(--text-xs); font-weight: 800; flex-shrink:0; }
.chat-welcome-bubble .cwb-name { font-weight: 700; font-size: var(--text-sm); color: var(--text-primary); }
.chat-welcome-bubble .cwb-msg { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }
@media (max-width: 480px) { .chat-welcome-bubble { right: var(--space-4); max-width: calc(100vw - 2rem); } }

/* ============================================================
   CHAT WINDOW
============================================================ */
.chat-window {
  position: fixed; bottom: 94px; right: var(--space-6); z-index: 950; width: 360px; max-width: calc(100vw - 2rem);
  height: 520px; max-height: 70vh; background: var(--bg-primary); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(24px) scale(0.95); opacity: 0; pointer-events: none;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  border: 1px solid var(--border-color);
}
.chat-window.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.chat-header { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); color: #fff; padding: var(--space-4) var(--space-5); display:flex; align-items:center; gap: var(--space-3); }
.chat-header .ch-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-header .ch-info strong { display:block; font-size: var(--text-sm); }
.chat-header .ch-info span { font-size: 0.72rem; opacity: 0.85; display:flex; align-items:center; gap:5px; }
.chat-header .ch-info span::before { content:''; width:7px; height:7px; border-radius:50%; background:#4ADE80; display:inline-block; }

/* ===== Pre-chat form (name + phone gate) ===== */
.chat-preform { flex: 1; overflow-y: auto; padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--bg-secondary); }
.chat-preform .cpf-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-mint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.chat-preform h4 { font-size: var(--text-lg); color: var(--text-primary); margin-bottom: var(--space-2); }
.chat-preform p { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-5); }
.chat-preform .form-group { width: 100%; margin-bottom: var(--space-3); text-align: left; }
.chat-preform .form-msg { width: 100%; text-align: left; margin-top: 0; margin-bottom: var(--space-2); }
.chat-preform .btn { width: 100%; margin-top: var(--space-2); }

/* ===== "Canlı Destek Aktif" transition banner ===== */
.chat-active-banner {
  display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: var(--space-3); background: var(--bg-secondary); padding: var(--space-6);
}
.chat-active-banner.show { display: flex; }
.chat-active-banner .cab-icon {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(16,185,129,0.14); color: var(--color-success);
  display: flex; align-items: center; justify-content: center; animation: cab-pop 500ms cubic-bezier(0.34,1.56,0.64,1);
}
.chat-active-banner strong { color: var(--text-primary); font-size: var(--text-base); }
@keyframes cab-pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.chat-body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: var(--bg-secondary); }
.chat-body::-webkit-scrollbar { width: 5px; }
.chat-body::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 3px; }

.msg-row { display: flex; max-width: 82%; }
.msg-row.visitor { align-self: flex-end; }
.msg-row.admin, .msg-row.bot { align-self: flex-start; }
.msg-bubble { padding: 0.65rem 0.95rem; border-radius: var(--radius-lg); font-size: var(--text-sm); line-height: 1.45; word-wrap: break-word; }
.msg-row.visitor .msg-bubble { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); color: #fff; border-bottom-right-radius: var(--radius-sm); }
.msg-row.admin .msg-bubble, .msg-row.bot .msg-bubble { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); border-bottom-left-radius: var(--radius-sm); }
.msg-time { font-size: 0.62rem; color: var(--text-muted); margin-top: 3px; text-align: right; }

.chat-typing { display:flex; gap:4px; padding: var(--space-2) var(--space-1); }
.chat-typing span { width:6px; height:6px; border-radius:50%; background: var(--color-gray-400); animation: typing-bounce 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%,60%,100% { transform: translateY(0); opacity:.5;} 30% { transform: translateY(-5px); opacity:1;} }

.chat-input-bar { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--border-color); background: var(--bg-primary); }
.chat-input-bar input { flex: 1; border: 1.5px solid var(--border-color); background: var(--bg-secondary); border-radius: var(--radius-full); padding: 0.65rem 1rem; font-size: var(--text-sm); color: var(--text-primary); outline: none; transition: border-color var(--transition-fast); font-family: var(--font-family); }
.chat-input-bar input:focus { border-color: var(--color-primary); }
.chat-send-btn { width: 42px; height: 42px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); color: #fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: var(--transition-fast); }
.chat-send-btn:hover { transform: scale(1.08); }