/* =========================================================
   Kahkeshan Live Chat Widget
   ========================================================= */
:root {
    --kch-green:        #0F8A4D;
    --kch-green-deep:   #0A4D32;
    --kch-green-soft:   #e7f5ee;
    --kch-text:         #0f172a;
    --kch-muted:        #64748b;
    --kch-border:       #e7eaee;
    --kch-bg:           #f6f7f9;
    --kch-card:         #ffffff;
    --kch-shadow:       0 12px 40px rgba(10, 77, 50, .18), 0 2px 6px rgba(15, 23, 42, .08);
    --kch-radius:       18px;
}

.kch-root, .kch-root * { box-sizing: border-box; font-family: inherit; }

/* ---- Floating launcher button (bottom-right for RTL look on Persian sites) ---- */
.kch-launcher {
    position: fixed;
    bottom: 22px;
    inset-inline-start: 22px;       /* RTL: right side, LTR: left side */
    z-index: 2147483600;
    width: 60px; height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--kch-green) 0%, var(--kch-green-deep) 100%);
    color: #fff;
    box-shadow: var(--kch-shadow);
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s ease, box-shadow .18s ease;
}
.kch-launcher:hover { transform: translateY(-2px) scale(1.04); }
.kch-launcher:active { transform: scale(.97); }
.kch-launcher svg { width: 28px; height: 28px; }

.kch-launcher .kch-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(15, 138, 77, .55);
    animation: kch-pulse 2.2s infinite;
    pointer-events: none;
}
@keyframes kch-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(15, 138, 77, .55); }
    70%  { box-shadow: 0 0 0 18px rgba(15, 138, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 138, 77, 0); }
}

.kch-badge-dot {
    position: absolute; top: 4px; inset-inline-end: 4px;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: #ef4444; color: #fff;
    border-radius: 999px; border: 2px solid #fff;
    font-size: 11px; font-weight: 800;
    display: none; align-items: center; justify-content: center;
}
.kch-launcher.has-unread .kch-badge-dot { display: flex; }

/* ---- Panel ---- */
.kch-panel {
    position: fixed;
    bottom: 96px;
    inset-inline-start: 22px;
    z-index: 2147483600;
    width: 360px;
    max-width: calc(100vw - 24px);
    height: 540px;
    max-height: calc(100vh - 130px);
    background: var(--kch-card);
    border-radius: var(--kch-radius);
    box-shadow: var(--kch-shadow);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px) scale(.96);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
}
.kch-panel.is-open { display: flex; opacity: 1; transform: none; }

/* Header */
.kch-head {
    background: linear-gradient(135deg, var(--kch-green) 0%, var(--kch-green-deep) 100%);
    color: #fff;
    padding: 16px 18px;
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
}
.kch-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; color: #fff;
    border: 2px solid rgba(255,255,255,.35);
    flex-shrink: 0;
}
.kch-head-text { flex: 1; min-width: 0; line-height: 1.4; }
.kch-head-title { font-weight: 800; font-size: 14px; }
.kch-head-sub  { font-size: 11px; opacity: .85; display: flex; align-items: center; gap: 5px; }
.kch-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.3); display: inline-block; }
.kch-close {
    border: none; background: rgba(255,255,255,.18); color: #fff;
    width: 32px; height: 32px; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.kch-close:hover { background: rgba(255,255,255,.32); }

/* Body */
.kch-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    background: var(--kch-bg);
    display: flex; flex-direction: column; gap: 8px;
    scrollbar-width: thin;
}
.kch-body::-webkit-scrollbar { width: 6px; }
.kch-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* Pre-chat form */
.kch-form-intro {
    background: #fff; border-radius: 14px; padding: 18px 16px;
    border: 1px solid var(--kch-border);
    text-align: center;
}
.kch-form-intro h3 { font-size: 15px; font-weight: 800; color: var(--kch-text); margin: 0 0 4px; }
.kch-form-intro p  { font-size: 12px; color: var(--kch-muted); margin: 0 0 14px; line-height: 1.7; }
.kch-form-intro input {
    width: 100%; padding: 11px 14px;
    border: 1px solid var(--kch-border); border-radius: 10px;
    font-size: 13px; font-family: inherit;
    margin-bottom: 8px;
    background: var(--kch-bg);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.kch-form-intro input:focus { outline: none; border-color: var(--kch-green); background: #fff; box-shadow: 0 0 0 3px rgba(15,138,77,.13); }
.kch-form-intro button {
    width: 100%; padding: 11px;
    background: linear-gradient(135deg, var(--kch-green), var(--kch-green-deep));
    color: #fff; border: none; border-radius: 10px;
    font-weight: 800; font-size: 13px; cursor: pointer;
    margin-top: 4px;
    transition: transform .12s;
}
.kch-form-intro button:hover { transform: translateY(-1px); }

/* Message bubbles */
.kch-msg { display: flex; max-width: 100%; }
.kch-msg-visitor { justify-content: flex-end; }
.kch-msg-admin, .kch-msg-system { justify-content: flex-start; }

.kch-bubble {
    max-width: 80%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.75;
    word-wrap: break-word;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
}
.kch-msg-visitor .kch-bubble {
    background: linear-gradient(135deg, var(--kch-green), var(--kch-green-deep));
    color: #fff;
    border-bottom-right-radius: 4px;
}
.kch-msg-admin .kch-bubble {
    background: #fff;
    color: var(--kch-text);
    border: 1px solid var(--kch-border);
    border-bottom-left-radius: 4px;
}
.kch-time {
    font-size: 10px;
    opacity: .65;
    margin-top: 3px;
    display: block;
    text-align: end;
}
.kch-msg-system .kch-bubble {
    background: var(--kch-green-soft);
    color: var(--kch-green-deep);
    font-size: 12px;
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0 auto;
    text-align: center;
    border: none;
    box-shadow: none;
}
.kch-msg-system { justify-content: center; }

/* Typing indicator */
.kch-typing { display: none; padding: 4px 0; align-items: center; gap: 6px; color: var(--kch-muted); font-size: 11px; }
.kch-typing.is-on { display: flex; }
.kch-typing-dots span { display: inline-block; width: 5px; height: 5px; background: var(--kch-muted); border-radius: 50%; margin: 0 1px; animation: kch-typing-anim 1.2s infinite; }
.kch-typing-dots span:nth-child(2) { animation-delay: .2s; }
.kch-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes kch-typing-anim { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Footer / input */
.kch-foot {
    border-top: 1px solid var(--kch-border);
    background: #fff;
    padding: 10px;
    display: flex; gap: 8px; align-items: flex-end;
    flex-shrink: 0;
}
.kch-input {
    flex: 1;
    border: 1px solid var(--kch-border);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px; font-family: inherit;
    resize: none;
    min-height: 40px; max-height: 100px;
    background: var(--kch-bg);
    transition: border-color .15s, background .15s, box-shadow .15s;
    line-height: 1.6;
}
.kch-input:focus { outline: none; border-color: var(--kch-green); background: #fff; box-shadow: 0 0 0 3px rgba(15,138,77,.12); }
.kch-send {
    width: 40px; height: 40px;
    border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--kch-green), var(--kch-green-deep));
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .12s, opacity .15s;
    flex-shrink: 0;
}
.kch-send:hover { transform: scale(1.06); }
.kch-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.kch-brand {
    font-size: 10px; color: var(--kch-muted);
    text-align: center; padding: 6px 0;
    background: #fff; border-top: 1px solid var(--kch-border);
    flex-shrink: 0;
}

/* Mobile fullscreen-ish */
@media (max-width: 480px) {
    .kch-panel {
        inset-inline-start: 8px;
        inset-inline-end: 8px;
        bottom: 88px;
        width: auto;
        height: calc(100vh - 110px);
    }
    .kch-launcher { width: 54px; height: 54px; bottom: 16px; inset-inline-start: 16px; }
}

/* CSAT rating block */
.kch-csat {
    background: #fff;
    border: 1px solid var(--kch-border);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    margin: 4px 0;
}
.kch-csat-q { font-size: 13px; color: var(--kch-text); font-weight: 800; margin: 0 0 8px; }
.kch-stars { display: inline-flex; gap: 4px; font-size: 26px; margin-bottom: 10px; cursor: pointer; }
.kch-stars span { color: #d1d5db; transition: transform .12s, color .12s; user-select: none; }
.kch-stars span:hover, .kch-stars span.on { color: #fbbf24; transform: scale(1.1); }
.kch-csat textarea {
    width: 100%; padding: 8px 10px; border-radius: 10px;
    border: 1px solid var(--kch-border); font-family: inherit; font-size: 12px;
    resize: none; min-height: 50px; margin-bottom: 8px; background: var(--kch-bg);
}
.kch-csat button {
    background: linear-gradient(135deg, var(--kch-green), var(--kch-green-deep));
    color: #fff; border: none; padding: 8px 18px;
    border-radius: 10px; font-weight: 800; font-size: 12px; cursor: pointer;
}
.kch-csat-thanks { font-size: 13px; color: var(--kch-green-deep); padding: 14px; text-align: center; }

/* RTL text alignment for Persian */
html[dir="rtl"] .kch-time { text-align: left; }
html[dir="ltr"] .kch-time { text-align: right; }