/* Onaybox Live Chat Widget v1.0.1 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --olc-primary: #1e3a5f;
  --olc-accent:  #2563eb;
  --olc-border:  #dde5f0;
  --olc-text:    #0f172a;
  --olc-muted:   #64748b;
  --olc-surface: #f4f7fb;
  --olc-shadow:  0 20px 60px rgba(15,23,42,0.18);
  --olc-r:       20px;
  --olc-rsm:     12px;
  --olc-w:       370px;
  --olc-h:       540px;
}

#olc-chat-root * { box-sizing: border-box; font-family: 'Inter', sans-serif; margin: 0; }

/* LAUNCHER */
#olc-launcher {
  position: fixed; z-index: 999990;
  bottom: 24px; right: 24px;
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg,#1e3a5f,#2563eb);
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(30,58,95,.5);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  outline: none;
  animation: olcPulse 3s ease-in-out infinite;
}
@keyframes olcPulse {
  0%,100% { box-shadow: 0 6px 24px rgba(30,58,95,.5), 0 0 0 0 rgba(59,130,246,.35); }
  50%     { box-shadow: 0 6px 24px rgba(30,58,95,.5), 0 0 0 10px rgba(59,130,246,0); }
}
#olc-launcher:hover { transform: scale(1.1); animation: none; }

/* Pozisyonlar */
#olc-launcher.olc-left     { right: auto; left: 24px; }
#olc-launcher.olc-right-mid { right: 24px; bottom: 50%; transform: translateY(50%); animation: none; }
#olc-launcher.olc-left-mid  { right: auto; left: 24px; bottom: 50%; transform: translateY(50%); animation: none; }

#olc-launcher svg { width: 26px; height: 26px; fill: white; transition: opacity .2s, transform .25s; }
#olc-launcher .olc-icon-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.7); }
#olc-launcher.olc-open .olc-icon-chat  { opacity: 0; transform: rotate(90deg) scale(.7); }
#olc-launcher.olc-open .olc-icon-close { opacity: 1; transform: none; }

#olc-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; border-radius: 10px;
  background: #ef4444; border: 2px solid white;
  font-size: 10px; font-weight: 700; color: white;
  display: none; align-items: center; justify-content: center; padding: 0 4px;
}
#olc-badge.olc-visible { display: flex; }

/* WINDOW */
#olc-window {
  position: fixed; z-index: 999989;
  bottom: 100px; right: 24px;
  width: var(--olc-w); height: var(--olc-h);
  background: #fff; border-radius: var(--olc-r);
  box-shadow: var(--olc-shadow);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none;
  transform: scale(.88) translateY(16px);
  transform-origin: bottom right;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  border: 1px solid rgba(30,58,95,.08);
}
#olc-window.olc-left     { right: auto; left: 24px; transform-origin: bottom left; }
#olc-window.olc-right-mid { right: 100px; bottom: 50%; transform: translateY(50%) scale(.88); transform-origin: right center; }
#olc-window.olc-left-mid  { right: auto; left: 100px; bottom: 50%; transform: translateY(50%) scale(.88); transform-origin: left center; }
#olc-window.olc-visible               { opacity: 1; pointer-events: all; transform: scale(1) translateY(0); }
#olc-window.olc-right-mid.olc-visible { transform: translateY(50%) scale(1); }
#olc-window.olc-left-mid.olc-visible  { transform: translateY(50%) scale(1); }

/* HEADER */
#olc-header {
  background: linear-gradient(135deg,#1e3a5f,#243f6e);
  padding: 16px 18px; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.olc-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: white; overflow: hidden; flex-shrink: 0;
}
.olc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.olc-header-info { flex: 1; }
.olc-header-name { font-size: 15px; font-weight: 700; color: white; }
.olc-header-status { font-size: 12px; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.olc-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  display: inline-block; flex-shrink: 0;
  animation: olcDot 2s ease-in-out infinite;
}
@keyframes olcDot {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
  50%     { box-shadow: 0 0 0 4px rgba(74,222,128,0); }
}
.olc-status-dot.olc-offline { background: #94a3b8; animation: none; }
.olc-header-actions { display: flex; gap: 6px; }
.olc-header-btn {
  width: 32px; height: 32px; border-radius: 8px; border: none; padding: 0;
  background: rgba(255,255,255,.12); color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.olc-header-btn:hover { background: rgba(255,255,255,.22); }
.olc-header-btn svg { width: 16px; height: 16px; fill: white; }

/* SCREENS */
.olc-screen { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.olc-screen.olc-active { display: flex; }

/* INTRO */
#olc-screen-intro {
  align-items: center; justify-content: center;
  padding: 28px 24px; text-align: center;
  background: linear-gradient(180deg,#f8faff,#fff);
  gap: 0;
}
.olc-intro-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg,#1e3a5f,#2563eb);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; box-shadow: 0 8px 24px rgba(30,58,95,.3);
}
.olc-intro-icon svg { width: 32px; height: 32px; fill: white; }
.olc-intro-title { font-size: 20px; font-weight: 700; color: var(--olc-text); margin-bottom: 8px; }
.olc-intro-subtitle { font-size: 13.5px; color: var(--olc-muted); line-height: 1.6; max-width: 260px; margin-bottom: 22px; }

/* FORM — TEMIZ TASARIM, IKON YOK */
.olc-form { width: 100%; display: flex; flex-direction: column; gap: 10px; }

#olc-chat-root .olc-input {
  width: 100% !important;
  display: block !important;
  padding: 13px 16px !important;
  border: 1.5px solid var(--olc-border) !important;
  border-radius: var(--olc-rsm) !important;
  font-size: 16px !important; /* prevents iOS zoom */
  font-family: inherit !important;
  color: var(--olc-text) !important;
  background: white !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  -webkit-text-size-adjust: 100% !important;
  touch-action: manipulation !important;
}
#olc-chat-root .olc-input:focus {
  border-color: #1e3a5f !important;
  box-shadow: 0 0 0 3px rgba(30,58,95,.1) !important;
}
#olc-chat-root .olc-input::placeholder { color: #aab4c4 !important; }
#olc-offline-msg-input { resize: none !important; min-height: 80px !important; }

.olc-btn-primary {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg,#1e3a5f,#2563eb);
  color: white; border: none; border-radius: var(--olc-rsm);
  font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
  box-shadow: 0 4px 16px rgba(30,58,95,.35); margin-top: 4px;
  transition: opacity .2s, transform .1s;
}
.olc-btn-primary:hover  { opacity: .92; }
.olc-btn-primary:active { transform: scale(.98); }

/* OFFLINE */
#olc-screen-offline {
  align-items: center; justify-content: center;
  padding: 28px 24px; gap: 10px; text-align: center;
  background: linear-gradient(180deg,#f8faff,#fff);
}
.olc-offline-icon { width: 60px; height: 60px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.olc-offline-icon svg { width: 26px; height: 26px; fill: #94a3b8; }
.olc-offline-title { font-size: 17px; font-weight: 700; color: var(--olc-text); }
.olc-offline-msg { font-size: 13px; color: var(--olc-muted); line-height: 1.6; margin-bottom: 8px; }

/* CHAT */
#olc-screen-chat { flex: 1; min-height: 0; }
#olc-messages {
  flex: 1; overflow-y: auto; padding: 16px 14px 8px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth; background: #f9fbff;
}
#olc-messages::-webkit-scrollbar { width: 4px; }
#olc-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

.olc-msg { display: flex; gap: 8px; animation: olcIn .22s ease; }
@keyframes olcIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.olc-msg.olc-from-visitor { flex-direction: row-reverse; }
.olc-msg-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #e8f0fb; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #1e3a5f;
  flex-shrink: 0; align-self: flex-end;
}
.olc-msg-body { max-width: 82%; min-width: 0; }
.olc-msg-bubble {
  padding: 10px 13px; border-radius: 16px;
  font-size: 13.5px; line-height: 1.55;
  background: white; border: 1px solid var(--olc-border);
  color: var(--olc-text);
  /* FIX: proper word wrap - prevents character-by-character breaking */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  min-width: 0;
}
.olc-from-operator .olc-msg-bubble { border-radius: 4px 16px 16px 16px; }
.olc-from-visitor  .olc-msg-bubble {
  background: linear-gradient(135deg,#1e3a5f,#2563eb);
  color: white; border-color: transparent;
  border-radius: 16px 4px 16px 16px;
}
.olc-msg-time { font-size: 10.5px; color: var(--olc-muted); margin-top: 4px; padding: 0 4px; }
.olc-from-visitor .olc-msg-time { text-align: right; }

/* Typing */
#olc-typing-indicator { display: none; gap: 8px; align-items: flex-end; padding: 0 14px 8px; }
#olc-typing-indicator.olc-visible { display: flex; }
.olc-typing-bubble { background: white; border: 1px solid var(--olc-border); border-radius: 4px 16px 16px 16px; padding: 10px 14px; display: flex; gap: 4px; align-items: center; }
.olc-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: #93a8c4; animation: olcTyp 1.2s infinite; }
.olc-typing-dot:nth-child(2) { animation-delay: .2s; }
.olc-typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes olcTyp { 0%,60%,100% { transform:none; opacity:.4; } 30% { transform:translateY(-5px); opacity:1; } }

/* INPUT AREA */
#olc-input-area { padding: 10px 14px; border-top: 1px solid var(--olc-border); background: white; flex-shrink: 0; }
#olc-input-wrap {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--olc-surface); border: 1.5px solid var(--olc-border);
  border-radius: 14px; padding: 8px 8px 8px 14px;
  transition: border-color .2s, box-shadow .2s;
}
#olc-input-wrap:focus-within { border-color: #1e3a5f; box-shadow: 0 0 0 3px rgba(30,58,95,.08); background: white; }
#olc-textarea {
  flex: 1; border: none; background: transparent; resize: none;
  font-size: 16px; /* prevents iOS zoom */
  line-height: 1.5; color: var(--olc-text);
  max-height: 100px; outline: none; font-family: inherit; padding: 0;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}
#olc-textarea::placeholder { color: #aab4c4; }
#olc-send-btn {
  width: 36px; height: 36px; border-radius: 10px; padding: 0;
  background: linear-gradient(135deg,#1e3a5f,#2563eb);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: opacity .15s, transform .1s; flex-shrink: 0;
}
#olc-send-btn:hover   { opacity: .9; }
#olc-send-btn:active  { transform: scale(.93); }
#olc-send-btn:disabled { background: #cbd5e1; cursor: not-allowed; }
#olc-send-btn svg { width: 17px; height: 17px; fill: white; }

#olc-closed-banner {
  display: none; text-align: center; padding: 10px 16px;
  background: #fef2f2; border-top: 1px solid #fecaca;
  font-size: 13px; color: #dc2626; flex-shrink: 0;
}

/* ── WELCOME POPUP ── */
.olc-welcome-popup {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: max-content;
  max-width: 250px;
  background: white;
  border-radius: 12px;
  padding: 14px 20px 14px 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.05);
  border: 1px solid #e2e8f0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 9998;
  cursor: pointer;
}
.olc-welcome-popup.olc-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.olc-welcome-popup-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s;
}
.olc-welcome-popup-close:hover { background: #f8fafc; color: #0f172a; }
.olc-welcome-popup-content {
  font-size: 13.5px;
  color: #0f172a;
  line-height: 1.45;
  font-weight: 500;
}
.olc-welcome-popup.olc-left { right: auto; left: 24px; }
.olc-welcome-popup.olc-left { right: auto; left: 24px; }
.olc-welcome-popup.olc-left-mid { right: auto; left: 24px; bottom: calc(50% + 40px); transform: translateY(10px); }
.olc-welcome-popup.olc-right-mid { right: 24px; bottom: calc(50% + 40px); transform: translateY(10px); }
.olc-welcome-popup.olc-right-mid.olc-visible { transform: translateY(0); }
.olc-welcome-popup.olc-left-mid.olc-visible { transform: translateY(0); }


/* MOBİL */
@media (max-width: 520px) {
  /* Launcher: istenilen pozisyonda kalır */
  #olc-launcher.olc-right-mid { bottom: 50% !important; right: 16px !important; transform: translateY(50%) !important; }
  #olc-launcher.olc-left-mid  { bottom: 50% !important; left: 16px !important; right: auto !important; transform: translateY(50%) !important; }
  #olc-launcher.olc-left      { left: 16px !important; right: auto !important; }

  /* Window: her zaman tam ekran */
  #olc-window {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    bottom: 0 !important; right: 0 !important; left: 0 !important; top: 0 !important;
    border-radius: 0 !important;
    transform: translateY(100%) !important;
    transform-origin: bottom center !important;
  }
  #olc-window.olc-left,
  #olc-window.olc-right-mid,
  #olc-window.olc-left-mid {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    bottom: 0 !important; right: 0 !important; left: 0 !important; top: 0 !important;
    border-radius: 0 !important;
    transform: translateY(100%) !important;
  }
  #olc-window.olc-visible,
  #olc-window.olc-left.olc-visible,
  #olc-window.olc-right-mid.olc-visible,
  #olc-window.olc-left-mid.olc-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }

  /* Input area: klavye açıldığında safe area ile uyumlu */
  #olc-input-area {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  /* Messages: klavye açıldığında scroll çalışsın */
  #olc-messages {
    -webkit-overflow-scrolling: touch;
  }

  /* Gönder butonunu daha kolay tıklanabilir yap */
  #olc-send-btn {
    width: 42px !important;
    height: 42px !important;
  }
}