/* =============================================================================
   WTG LIVE CHAT
   ============================================================================= */

/* --------------------------------------------------------------------------
   Переменные (на :root чтобы работали вне .wtg-chat)
   -------------------------------------------------------------------------- */
:root {
    --chat-bg:          #161b26;
    --chat-bg-header:   #0f1520;
    --chat-bg-input:    #1a2133;
    --chat-bg-msg-auth: #1e293b;
    --chat-bg-msg-guest:#171f2d;
    --chat-bg-own:      #1a3050;
    --chat-border:      rgba(255,255,255,.07);
    --chat-accent:      #e8c96a;
    --chat-accent-rgb:  232, 201, 106;
    --chat-text:        #d1d9e6;
    --chat-muted:       #5a6a82;
    --chat-dot-live:    #3ec96a;
    --chat-radius:      0;           /* панель без скругления у краёв экрана */
    --chat-radius-msg:  10px;
    --chat-shadow:      -8px 0 40px rgba(0,0,0,.55);
    --chat-panel-w:     380px;
    --chat-z:           100000;
}

/* --------------------------------------------------------------------------
   Таб-обёртка — правый край, по центру по вертикали
   -------------------------------------------------------------------------- */
.wtg-chat {
    position:    fixed;
    right:       0;
    top:         50%;
    transform:   translateY(-50%);
    z-index:     var(--chat-z); /* 9000 — таб; backdrop=9001; панель=9002 */
    font-family: inherit;
    font-size:   14px;
    line-height: 1.4;
}
/* Панель переносится в body через JS → в root stacking context с z-index 9002 */

/* --------------------------------------------------------------------------
   Таб-кнопка
   -------------------------------------------------------------------------- */
.wtg-chat__toggle {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    width:           44px;
    padding:         18px 0;
    border-radius:   12px 0 0 12px;
    border:          1px solid rgba(var(--chat-accent-rgb), .28);
    border-right:    none;
    background:      var(--chat-bg-header);
    color:           var(--chat-accent);
    cursor:          pointer;
    box-shadow:      -4px 0 24px rgba(0,0,0,.5);
    transition:      background .2s, transform .2s, opacity .2s;
    outline:         none;
}
.wtg-chat__toggle:hover {
    background: #1a2133;
    transform:  translateX(-4px);
}
.wtg-chat__toggle:active { transform: translateX(-1px); }

/* Таб скрывается когда панель открыта (JS добавляет класс body) */
body.wtg-chat-open .wtg-chat__toggle {
    opacity:        0;
    pointer-events: none;
    transform:      translateX(10px);
}

/* Пульс при новых сообщениях */
.wtg-chat__toggle--pulse {
    animation: wtg-tab-pulse 1s ease-in-out 3;
}
@keyframes wtg-tab-pulse {
    0%,100% { transform: translateX(0);  box-shadow: -4px 0 24px rgba(0,0,0,.5); }
    30%     { transform: translateX(-8px); box-shadow: -10px 0 32px rgba(var(--chat-accent-rgb),.4); }
    60%     { transform: translateX(-4px); }
}

.wtg-chat__tab-icon { flex-shrink: 0; }

.wtg-chat__tab-label {
    writing-mode:   vertical-lr;
    transform:      rotate(180deg);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    user-select:    none;
}

/* Бейдж */
.wtg-chat__badge {
    position:      absolute;
    top:           -7px;
    left:          -7px;
    min-width:     22px;
    height:        22px;
    padding:       0 5px;
    border-radius: 11px;
    background:    #e04a4a;
    color:         #fff;
    font-size:     12px;
    font-weight:   700;
    line-height:   22px;
    text-align:    center;
    pointer-events:none;
    box-shadow:    0 2px 10px rgba(224,74,74,.55);
    animation:     wtg-badge-pop .3s cubic-bezier(.175,.885,.32,1.275);
}
.wtg-chat__badge:empty { display: none; }
@keyframes wtg-badge-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Бэкдроп
   -------------------------------------------------------------------------- */
.wtg-chat__backdrop {
    display:           none;
    position:          fixed;
    inset:             0;
    background:        rgba(0,0,0,.55);
    z-index:           calc(var(--chat-z) + 1); /* 9001 — выше таба (9000), ниже панели (9002) */
    backdrop-filter:   blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation:         wtg-fade-in .25s ease;
}
body.wtg-chat-open .wtg-chat__backdrop {
    display: block;
}
@keyframes wtg-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Панель чата — фиксирована, выезжает справа на всю высоту
   -------------------------------------------------------------------------- */
.wtg-chat__window {
    position:       fixed;
    top:            0;
    right:          0;
    width:          var(--chat-panel-w);
    height:         100vh;
    height:         100dvh;
    display:        flex;
    flex-direction: column;
    background:     var(--chat-bg);
    border-left:    1px solid var(--chat-border);
    box-shadow:     var(--chat-shadow);
    z-index:        calc(var(--chat-z) + 2);
    animation:      wtg-panel-in .28s cubic-bezier(.25,.46,.45,.94) forwards;
}
.wtg-chat__window[hidden] { display: none; }

@keyframes wtg-panel-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0);    }
}
@keyframes wtg-panel-out {
    from { transform: translateX(0);    }
    to   { transform: translateX(100%); }
}

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */
.wtg-chat__header {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       14px 16px 14px 20px;
    background:    var(--chat-bg-header);
    border-bottom: 1px solid var(--chat-border);
    flex-shrink:   0;
}
.wtg-chat__header-dot {
    width:         9px;
    height:        9px;
    border-radius: 50%;
    background:    var(--chat-dot-live);
    box-shadow:    0 0 7px var(--chat-dot-live);
    flex-shrink:   0;
    animation:     wtg-pulse 2s ease-in-out infinite;
}
@keyframes wtg-pulse {
    0%,100% { opacity: 1; }
    50%     { opacity: .3; }
}
.wtg-chat__header-title {
    flex:           1;
    font-weight:    700;
    font-size:      14px;
    color:          var(--chat-accent);
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Кнопка закрытия в шапке */
.wtg-chat__close {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          34px;
    flex-shrink:     0;
    border:          none;
    border-radius:   8px;
    background:      transparent;
    color:           var(--chat-muted);
    cursor:          pointer;
    transition:      background .15s, color .15s;
    margin-left:     auto;
}
.wtg-chat__close:hover {
    background: rgba(255,255,255,.07);
    color:      var(--chat-text);
}

/* --------------------------------------------------------------------------
   Сообщения
   -------------------------------------------------------------------------- */
.wtg-chat__messages {
    flex:           1;
    overflow-y:     auto;
    padding:        16px 16px 8px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    scroll-behavior:smooth;
}
.wtg-chat__messages::-webkit-scrollbar { width: 5px; }
.wtg-chat__messages::-webkit-scrollbar-track { background: transparent; }
.wtg-chat__messages::-webkit-scrollbar-thumb {
    background:    rgba(255,255,255,.1);
    border-radius: 5px;
}
.wtg-chat__messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.2);
}

/* Лоадер */
.wtg-chat__loader {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    padding:         32px 0;
    color:           var(--chat-muted);
}
.wtg-chat__loader span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background:    currentColor;
    animation:     wtg-bounce .9s ease-in-out infinite;
}
.wtg-chat__loader span:nth-child(2) { animation-delay: .15s; }
.wtg-chat__loader span:nth-child(3) { animation-delay: .30s; }
.wtg-chat__loader[hidden] { display: none; }
@keyframes wtg-bounce {
    0%,80%,100% { transform: scale(.55); opacity: .4; }
    40%          { transform: scale(1);   opacity: 1;  }
}

/* --------------------------------------------------------------------------
   Сообщение
   -------------------------------------------------------------------------- */
.wtg-chat__msg { animation: wtg-msg-in .2s ease forwards; }
@keyframes wtg-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.wtg-chat__msg-inner {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
}
.wtg-chat__msg--own .wtg-chat__msg-inner { flex-direction: row-reverse; }

/* Аватар */
.wtg-chat__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
    margin-top:    2px;
}
.wtg-chat__avatar--initials {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--color, #444);
    color:           #fff;
    font-size:       12px;
    font-weight:     700;
    user-select:     none;
}

/* Тело */
.wtg-chat__msg-body {
    flex:          1;
    min-width:     0;
    background:    var(--chat-bg-msg-guest);
    border:        1px solid var(--chat-border);
    border-radius: var(--chat-radius-msg);
    padding:       8px 12px;
}
.wtg-chat__msg--auth .wtg-chat__msg-body { background: var(--chat-bg-msg-auth); }
.wtg-chat__msg--own  .wtg-chat__msg-body {
    background:   var(--chat-bg-own);
    border-color: rgba(var(--chat-accent-rgb), .2);
}

/* Приветственное сообщение от команды */
.wtg-chat__msg--welcome .wtg-chat__msg-body {
    background:   linear-gradient(135deg, #1a2c1a, #1e3b1e);
    border-color: rgba(62,201,106,.25);
}

.wtg-chat__msg-name {
    display:       block;
    font-size:     12px;
    font-weight:   700;
    color:         var(--chat-accent);
    margin-bottom: 3px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.wtg-chat__msg--guest .wtg-chat__msg-name   { color: #7ab1d8; }
.wtg-chat__msg--welcome .wtg-chat__msg-name { color: #3ec96a; }

.wtg-chat__msg-text {
    margin:      0;
    color:       var(--chat-text);
    font-size:   14px;
    word-break:  break-word;
    white-space: pre-wrap;
    line-height: 1.5;
}
.wtg-chat__msg--welcome .wtg-chat__msg-text { color: #c8e6c9; }

.wtg-chat__msg-time {
    font-size:   11px;
    color:       var(--chat-muted);
    flex-shrink: 0;
    margin-top:  16px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Форма
   -------------------------------------------------------------------------- */
.wtg-chat__form {
    flex-shrink:    0;
    padding:        12px 16px 16px;
    border-top:     1px solid var(--chat-border);
    background:     var(--chat-bg-header);
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

/* Кнопки авторизации */
.wtg-chat__auth-btns {
    display: flex;
    gap:     8px;
}
.wtg-chat__auth-btn {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    padding:         9px 12px;
    border-radius:   9px;
    border:          1px solid var(--chat-border);
    background:      var(--chat-bg-input);
    color:           var(--chat-text);
    font-size:       13px;
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    transition:      background .2s, border-color .2s;
    white-space:     nowrap;
    line-height:     1;
}
.wtg-chat__auth-btn--google:hover {
    background:   rgba(66,133,244,.15);
    border-color: rgba(66,133,244,.4);
    color:        #fff;
}
.wtg-chat__auth-btn--yandex:hover {
    background:   rgba(252,63,29,.15);
    border-color: rgba(252,63,29,.4);
    color:        #fff;
}

.wtg-chat__auth-divider {
    display:     flex;
    align-items: center;
    gap:         10px;
    color:       var(--chat-muted);
    font-size:   12px;
}
.wtg-chat__auth-divider::before,
.wtg-chat__auth-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--chat-border);
}

.wtg-chat__name-input {
    width:         100%;
    background:    var(--chat-bg-input);
    border:        1px solid var(--chat-border);
    border-radius: 9px;
    padding:       9px 14px;
    color:         var(--chat-text);
    font-size:     14px;
    outline:       none;
    transition:    border-color .2s;
    box-sizing:    border-box;
}
.wtg-chat__name-input::placeholder { color: var(--chat-muted); }
.wtg-chat__name-input:focus        { border-color: rgba(var(--chat-accent-rgb), .5); }

.wtg-chat__input-row {
    display:     flex;
    align-items: flex-end;
    gap:         10px;
}

.wtg-chat__textarea {
    flex:          1;
    min-height:    40px;
    max-height:    140px;
    background:    var(--chat-bg-input);
    border:        1px solid var(--chat-border);
    border-radius: 9px;
    padding:       10px 14px;
    color:         var(--chat-text);
    font-size:     14px;
    font-family:   inherit;
    resize:        none;
    outline:       none;
    overflow-y:    auto;
    transition:    border-color .2s;
    box-sizing:    border-box;
    line-height:   1.5;
}
.wtg-chat__textarea::placeholder { color: var(--chat-muted); }
.wtg-chat__textarea:focus        { border-color: rgba(var(--chat-accent-rgb), .45); }

.wtg-chat__send-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    flex-shrink:     0;
    border:          none;
    border-radius:   9px;
    background:      var(--chat-accent);
    color:           #111;
    cursor:          pointer;
    transition:      background .2s, transform .15s, opacity .2s;
}
.wtg-chat__send-btn:hover    { background: #f0d978; transform: scale(1.06); }
.wtg-chat__send-btn:active   { transform: scale(.93); }
.wtg-chat__send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.wtg-chat__error {
    font-size:   13px;
    color:       #e07070;
    padding-top: 2px;
}
.wtg-chat__error[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Мобилка: полный экран
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .wtg-chat__window {
        width:  100%;
        left:   0;
        right:  0;
    }
    /* Бэкдроп не нужен на полном экране */
    body.wtg-chat-open .wtg-chat__backdrop { display: none; }

    /* 16px — iOS Safari не зумирует инпуты при фокусе */
    .wtg-chat__textarea,
    .wtg-chat__name-input {
        font-size: 16px;
    }
}