/* html { overflow: hidden } position:fixed öğelerini kesiyor */
html { overflow: visible !important; }

/* ══════════════════════════════════════════════════════════
   KULLANICI WIDGET
══════════════════════════════════════════════════════════ */
.chat-float-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto !important;
    max-width: fit-content;
    padding: 13px 22px;
    background: linear-gradient(135deg, #0b6d7a, #0e8a9a);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(11,109,122,.5);
    transition: all .2s;
}
.chat-float-btn:hover {
    background: linear-gradient(135deg, #095e6a, #0b6d7a);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(11,109,122,.55);
}

.chat-widget {
    position: fixed;
    bottom: 90px;
    right: 28px;
    z-index: 9991;
    width: 370px;
    height: 540px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: chatSlideIn .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes chatSlideIn {
    from { opacity:0; transform:translateY(24px) scale(.97); }
    to   { opacity:1; transform:translateY(0)    scale(1); }
}

.chat-widget-header {
    background: linear-gradient(135deg, #0b6d7a, #0e8a9a);
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.chat-widget-header .chat-title { font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; }
.chat-close-btn {
    background: rgba(255,255,255,.15);
    border: none; color:#fff;
    width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .15s; font-size:13px;
}
.chat-close-btn:hover { background:rgba(255,255,255,.28); }

.chat-form-step {
    padding: 20px 18px 16px;
    flex: 1; overflow-y:auto;
    display:flex; flex-direction:column;
}
.chat-intro {
    font-size:13px; color:#64748b; margin-bottom:16px; line-height:1.6;
    padding:10px 12px; background:#f0f9fa; border-radius:10px;
    border-left:3px solid #0b6d7a;
}
.chat-form-step .form-label { font-size:12.5px; font-weight:600; color:#374151; margin-bottom:4px; }
.chat-form-step .form-control {
    font-size:13px; border-radius:8px;
    border:1.5px solid #e5e7eb; padding:8px 12px; transition:border-color .15s;
}
.chat-form-step .form-control:focus { border-color:#0b6d7a; box-shadow:0 0 0 3px rgba(11,109,122,.12); }
.btn-start-chat {
    width:100%; background:linear-gradient(135deg,#0b6d7a,#0e8a9a);
    color:#fff; border:none; border-radius:10px;
    padding:12px; font-size:14px; font-weight:700;
    cursor:pointer; margin-top:auto; transition:all .2s;
}
.btn-start-chat:hover { background:linear-gradient(135deg,#095e6a,#0b6d7a); transform:translateY(-1px); }
.btn-start-chat:disabled { opacity:.6; cursor:not-allowed; transform:none; }

.chat-active-step { flex:1; display:flex; flex-direction:column; min-height:0; background:#f8fafc; }

/* ── Mesajlar — margin tekniği ile hizalama ─────────────── */
.chat-messages {
    flex:1; overflow-y:auto;
    padding:14px 14px 8px;
    display:flex; flex-direction:column;
    align-items: flex-start;
    gap:6px; scroll-behavior:smooth;
}
.chat-messages::-webkit-scrollbar { width:4px; }
.chat-messages::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }

.chat-msg {
    max-width:80%;
    padding:9px 13px; border-radius:14px;
    font-size:13px; line-height:1.5; word-break:break-word;
}
/* Kullanıcı mesajı — SAĞ */
.chat-msg.msg-me {
    align-self: flex-end;
    background: linear-gradient(135deg,#0b6d7a,#0e8a9a);
    color:#fff; border-bottom-right-radius:4px;
}
/* Admin mesajı — SOL */
.chat-msg.msg-other {
    align-self: flex-start;
    background:#fff; color:#1e293b;
    border-bottom-left-radius:4px;
    box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.chat-msg .msg-meta { font-size:10px; margin-top:3px; opacity:.65; }
.chat-msg.msg-me    .msg-meta { text-align:right; color:rgba(255,255,255,.8); }
.chat-msg.msg-other .msg-meta { text-align:left; color:#94a3b8; }

.chat-system-msg {
    text-align:center; font-size:11px; color:#94a3b8;
    display:flex; align-items:center; gap:6px;
}
.chat-system-msg::before,.chat-system-msg::after { content:''; flex:1; height:1px; background:#e2e8f0; }

.chat-input-area {
    padding:10px 12px; border-top:1px solid #e2e8f0;
    display:flex; gap:8px; align-items:flex-end;
    flex-shrink:0; background:#fff;
}
.chat-input-area textarea {
    flex:1; border:1.5px solid #e5e7eb; border-radius:10px;
    padding:8px 12px; font-size:13px; resize:none;
    max-height:80px; outline:none; transition:border-color .15s; font-family:inherit;
}
.chat-input-area textarea:focus { border-color:#0b6d7a; }
.chat-send-btn {
    background:linear-gradient(135deg,#0b6d7a,#0e8a9a);
    color:#fff; border:none; border-radius:10px;
    width:38px; height:38px; display:flex;
    align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0; transition:all .2s;
}
.chat-send-btn:hover { transform:scale(1.05); }
.chat-send-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }

.chat-status-bar {
    font-size:11.5px; padding:5px 14px;
    flex-shrink:0; display:flex; align-items:center; gap:5px;
    background:#fff; border-top:1px solid #f1f5f9;
}
.chat-status-bar::before { content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.chat-status-bar.waiting { color:#d97706; }
.chat-status-bar.waiting::before { background:#f59e0b; animation:dot-pulse 1.5s infinite; }
.chat-status-bar.active  { color:#059669; }
.chat-status-bar.active::before  { background:#10b981; }
.chat-status-bar.closed  { color:#dc2626; }
.chat-status-bar.closed::before  { background:#ef4444; }
@keyframes dot-pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

@media (max-width:420px) {
    .chat-widget { right:0; bottom:0; width:100vw; height:100dvh; border-radius:16px 16px 0 0; }
    .chat-float-btn { right:16px; bottom:16px; }
}


/* ══════════════════════════════════════════════════════════
   ADMİN PANEL — mesaj baloncukları
══════════════════════════════════════════════════════════ */
.adm-msg {
    max-width: 72%;
    padding: 9px 14px; border-radius:14px;
    font-size:13px; line-height:1.5; word-break:break-word;
    position:relative;
}
/* Admin kendi mesajı — SAĞ */
.adm-msg.from-admin {
    align-self: flex-end;
    background: linear-gradient(135deg,#0b6d7a,#0d8090);
    color:#fff; border-bottom-right-radius:4px;
}
/* Kullanıcı mesajı — SOL */
.adm-msg.from-user {
    align-self: flex-start;
    background:#fff; color:#1e293b;
    border-bottom-left-radius:4px;
    box-shadow:0 1px 6px rgba(0,0,0,.09);
}
.adm-msg .adm-msg-meta { font-size:10px; margin-top:3px; opacity:.6; }
.adm-msg.from-admin .adm-msg-meta { text-align:right; color:rgba(255,255,255,.75); }
.adm-msg.from-user  .adm-msg-meta { text-align:left;  color:#94a3b8; }

.adm-system-msg {
    text-align:center; font-size:11px; color:#94a3b8;
    display:flex; align-items:center; gap:6px; margin:4px 0;
}
.adm-system-msg::before,.adm-system-msg::after { content:''; flex:1; height:1px; background:#e2e8f0; }