/* ═══════════════════════════════════════════
   Telegram Chat Widget – widget.css
═══════════════════════════════════════════ */

/* ─── FLOAT BUTTON ─────────────────────── */
.tcw-float-btn {
    position: fixed;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* ── BOTTOM positions ── */
.tcw-float-btn[data-position="bottom-right"] { bottom: 20px; right: 20px; }
.tcw-float-btn[data-position="bottom-left"]  { bottom: 20px; left:  20px; }

/* ── MIDDLE positions (vertically centred on side) ── */
.tcw-float-btn[data-position="middle-right"] {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 12px 0 0 12px;
    box-shadow: -3px 0 14px rgba(0,0,0,.2);
}
.tcw-float-btn[data-position="middle-left"] {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0 12px 12px 0;
    box-shadow: 3px 0 14px rgba(0,0,0,.2);
}

.tcw-float-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.tcw-float-btn[data-position="middle-right"]:hover { transform: translateY(-50%) scale(1.08); }
.tcw-float-btn[data-position="middle-left"]:hover  { transform: translateY(-50%) scale(1.08); }
.tcw-float-btn svg { width: 30px; height: 30px; fill: #fff; pointer-events: none; }
.tcw-float-btn.open { background: #e74c3c !important; box-shadow: 0 4px 14px rgba(231,76,60,.4) !important; }


/* ─── CHAT WINDOW ───────────────────────── */
.tcw-window {
    position: fixed;
    width: 340px;
    max-width: calc(100vw - 30px);
    height: 490px;
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,.18);
    display: none;
    flex-direction: column;
    z-index: 99998;
    overflow: hidden;
    animation: tcwSlideIn .28s ease;
}
.tcw-window.active { display: flex; }

.tcw-window[data-position="bottom-right"] { bottom: 90px; right: 20px; }
.tcw-window[data-position="bottom-left"]  { bottom: 90px; left:  20px; }
.tcw-window[data-position="middle-right"] { right: 68px;  top: 50%; transform: translateY(-50%); bottom: auto; animation: tcwSlideInSide .28s ease; }
.tcw-window[data-position="middle-left"]  { left:  68px;  top: 50%; transform: translateY(-50%); bottom: auto; animation: tcwSlideInSide .28s ease; }

@keyframes tcwSlideIn     { from { opacity:0; transform: translateY(16px) scale(.97); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes tcwSlideInSide { from { opacity:0; transform: translateY(-50%) scale(.95); } to { opacity:1; transform: translateY(-50%) scale(1); } }


/* ─── HEADER ────────────────────────────── */
.tcw-header { padding: 18px 20px; color:#fff; display:flex; align-items:center; gap:12px; flex-shrink:0; }
.tcw-header-icon { width:38px; height:38px; background:rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tcw-header-icon svg { width:22px; height:22px; fill:#fff; }
.tcw-header-text h3 { font-size:15px; font-weight:700; margin:0; }
.tcw-header-text p  { font-size:12px; opacity:.85; margin:0; }


/* ─── BODY ──────────────────────────────── */
.tcw-body    { flex:1; padding:16px; overflow-y:auto; background:#f5f6f7; }
.tcw-message { background:#fff; padding:14px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.07); }
.tcw-msg-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.tcw-avatar  { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; flex-shrink:0; }
.tcw-msg-name { font-weight:700; font-size:14px; color:#222; }
.tcw-msg-text { font-size:13px; line-height:1.55; color:#555; }
.tcw-info-box { color:#fff; padding:10px 14px; border-radius:8px; margin-top:10px; font-size:13px; display:flex; align-items:center; gap:8px; }
.tcw-info-box svg { width:18px; height:18px; fill:#fff; flex-shrink:0; }


/* ─── FOOTER ────────────────────────────── */
.tcw-footer { padding:12px 14px; background:#fff; border-top:1px solid #eee; flex-shrink:0; }
.tcw-input-wrap { display:flex; gap:8px; }
.tcw-input { flex:1; padding:11px 14px; border:2px solid #ddd; border-radius:22px; font-size:13px; outline:none; transition:border-color .2s; font-family:inherit; }
.tcw-input:focus { border-color:#0088cc; }
.tcw-send { width:42px; height:42px; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s; flex-shrink:0; }
.tcw-send:hover { transform:scale(1.08); }
.tcw-send svg { width:18px; height:18px; fill:#fff; pointer-events:none; }


/* ─── AUTO-POPUP BUBBLE ─────────────────── */
/*
   FIX: clean flex row – icon | text | close-btn
   pointer-events:none on icon+text so ONLY the wrapper
   or the close button handle clicks (no overlap issues).
*/
.tcw-popup {
    position: fixed;
    color: #fff;
    border-radius: 50px;
    box-shadow: 0 4px 22px rgba(0,0,0,.22);
    display: none;
    align-items: center;
    gap: 10px;
    z-index: 99997;
    cursor: pointer;
    max-width: 300px;
    min-width: 180px;
    padding: 12px 14px;
    user-select: none;
}

.tcw-popup[data-position="bottom-right"] { bottom: 100px; right: 20px; }
.tcw-popup[data-position="bottom-left"]  { bottom: 100px; left:  20px; }
.tcw-popup[data-position="middle-right"] { right: 72px; top: calc(50% - 90px); bottom: auto; }
.tcw-popup[data-position="middle-left"]  { left:  72px; top: calc(50% - 90px); bottom: auto; }

.tcw-popup.active {
    display: flex;
    animation: tcwPopIn .4s ease forwards, tcwBounce .9s ease .5s;
}
.tcw-popup:hover { filter: brightness(1.07); }

@keyframes tcwPopIn   { from { opacity:0; transform:scale(.82) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes tcwBounce  { 0%,100%{transform:translateY(0)} 35%{transform:translateY(-9px)} 65%{transform:translateY(-4px)} }

.tcw-popup-icon { width:34px; height:34px; background:rgba(255,255,255,.22); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; pointer-events:none; }
.tcw-popup-icon svg { width:19px; height:19px; fill:#fff; }
.tcw-popup-text { font-size:14px; font-weight:500; line-height:1.35; flex:1; pointer-events:none; }

/* Close – sits at end of row, handles its own click via stopPropagation */
.tcw-popup-close {
    width:26px; height:26px;
    background:rgba(255,255,255,.28);
    border:none; border-radius:50%;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:background .18s, transform .18s;
    padding:0;
}
.tcw-popup-close:hover { background:rgba(255,255,255,.48); transform:rotate(90deg); }
.tcw-popup-close svg   { width:13px; height:13px; fill:#fff; pointer-events:none; }


/* ─── MOBILE ────────────────────────────── */
@media (max-width: 520px) {
    .tcw-float-btn[data-position="bottom-right"] { right:12px; bottom:12px; }
    .tcw-float-btn[data-position="bottom-left"]  { left:12px;  bottom:12px; }

    .tcw-window[data-position="bottom-right"],
    .tcw-window[data-position="bottom-left"] { width:calc(100vw - 20px); right:10px; left:10px; bottom:78px; height:calc(100vh - 108px); }

    .tcw-popup[data-position="bottom-right"] { right:12px; bottom:82px; max-width:calc(100vw - 28px); }
    .tcw-popup[data-position="bottom-left"]  { left:12px;  bottom:82px; max-width:calc(100vw - 28px); }

    /* middle → snap to bottom-right style on mobile */
    .tcw-float-btn[data-position="middle-right"] { right:0; bottom:80px; top:auto; transform:none; border-radius:12px 0 0 12px; }
    .tcw-float-btn[data-position="middle-left"]  { left:0;  bottom:80px; top:auto; transform:none; border-radius:0 12px 12px 0; }
    .tcw-window[data-position="middle-right"],
    .tcw-window[data-position="middle-left"]  { right:10px; left:10px; width:calc(100vw - 20px); top:auto; bottom:140px; transform:none; height:calc(100vh - 170px); animation:tcwSlideIn .28s ease; }
    .tcw-popup[data-position="middle-right"],
    .tcw-popup[data-position="middle-left"]   { right:10px; left:10px; top:auto; bottom:210px; transform:none; max-width:calc(100vw - 28px); }
}