/* Поле «Мессенджер»: выбор мессенджера кнопкой внутри поля (mu-plugins/gw-messenger-field.php).
   Цвета — токены скина Signature (--gwpf-*); без скина (тема «GoldenWhale 2», дверь dev)
   работают запасные значения из той же палитры. */

.gw-msgr {
    --msgr-gold: var(--gwpf-gold, #d6a55a);
    --msgr-gold-2: var(--gwpf-gold-2, #e9c98a);
    --msgr-text: var(--gwpf-text, #f3efe7);
    --msgr-text-2: var(--gwpf-text-2, #b8b2a7);
    --msgr-text-3: var(--gwpf-text-3, #968f84);
    --msgr-line: var(--gwpf-line, rgba(255, 255, 255, .07));
    --msgr-line-gold: var(--gwpf-line-gold, rgba(214, 165, 90, .30));
    --msgr-pop: var(--gwpf-s2, #141312);
    --msgr-ease: var(--gwpf-ease, cubic-bezier(.2, .7, .2, 1));
    --msgr-btn-w: 136px;            /* JS ставит точную ширину кнопки */
    position: relative;
    container-type: inline-size;
    width: 100%;
}

.gw-msgr > input.gw-msgr-input {
    width: 100%;
    padding-right: calc(var(--msgr-btn-w) + 18px) !important;
}

/* ── кнопка ─────────────────────────────────────────────────────────── */
.gw-msgr-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    bottom: 7px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 62%;
    margin: 0;
    padding: 0 10px 0 11px;
    border: 1px solid var(--msgr-line);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
    color: var(--msgr-text-2);
    font: 500 13px/1 var(--gwpf-sans, inherit);
    letter-spacing: .01em;
    cursor: pointer;
    transition: border-color .2s var(--msgr-ease), color .2s var(--msgr-ease), background .2s var(--msgr-ease);
    -webkit-tap-highlight-color: transparent;
}
.gw-msgr-btn:hover,
.gw-msgr.is-open .gw-msgr-btn {
    border-color: var(--msgr-line-gold);
    color: var(--msgr-text);
    background: linear-gradient(180deg, rgba(214, 165, 90, .10), rgba(214, 165, 90, .03));
}
.gw-msgr-btn:focus-visible {
    outline: none;
    border-color: var(--msgr-line-gold);
    box-shadow: 0 0 0 3px rgba(214, 165, 90, .18);
}
.gw-msgr-btn .gw-msgr-ico {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--msgr-gold-2);
}
.gw-msgr-btn .gw-msgr-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.gw-msgr-chev {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    margin-left: auto;
    color: var(--msgr-text-3);
    transition: transform .22s var(--msgr-ease), color .2s var(--msgr-ease);
}
.gw-msgr.is-open .gw-msgr-chev {
    transform: rotate(180deg);
    color: var(--msgr-gold);
}

.gw-msgr-ico svg,
.gw-msgr-chev svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* ── список ─────────────────────────────────────────────────────────── */
.gw-msgr-list {
    position: absolute;
    z-index: 60;
    top: calc(100% + 8px);
    right: 0;
    width: min(264px, 100%);
    min-width: 220px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--msgr-line);
    border-radius: 14px;
    background: var(--msgr-pop);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .04) inset;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .18s var(--msgr-ease), transform .22s var(--msgr-ease), visibility 0s linear .22s;
}
.gw-msgr.is-open .gw-msgr-list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s var(--msgr-ease), transform .22s var(--msgr-ease), visibility 0s;
}
.gw-msgr.is-up .gw-msgr-list {
    top: auto;
    bottom: calc(100% + 8px);
    transform-origin: bottom right;
}

.gw-msgr-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--msgr-text);
    cursor: pointer;
    transition: background .15s var(--msgr-ease);
}
.gw-msgr-opt + .gw-msgr-opt {
    margin-top: 2px;
}
.gw-msgr-opt.is-active {
    background: rgba(255, 255, 255, .045);
}
.gw-msgr-opt[aria-selected='true'] {
    background: rgba(214, 165, 90, .09);
}

.gw-msgr-opt .gw-msgr-ico {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid var(--msgr-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .025);
    color: var(--msgr-text-2);
    transition: color .15s var(--msgr-ease), border-color .15s var(--msgr-ease);
}
.gw-msgr-opt .gw-msgr-ico svg {
    width: 15px;
    height: 15px;
}
.gw-msgr-opt.is-active .gw-msgr-ico,
.gw-msgr-opt[aria-selected='true'] .gw-msgr-ico {
    color: var(--msgr-gold-2);
    border-color: var(--msgr-line-gold);
}

.gw-msgr-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.gw-msgr-txt b {
    font: 500 14px/1.15 var(--gwpf-sans, inherit);
    color: var(--msgr-text);
}
.gw-msgr-txt small {
    font: 400 12px/1.2 var(--gwpf-sans, inherit);
    color: var(--msgr-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gw-msgr-check {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin-left: auto;
    color: var(--msgr-gold);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s var(--msgr-ease), transform .2s var(--msgr-ease);
}
.gw-msgr-check svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.gw-msgr-opt[aria-selected='true'] .gw-msgr-check {
    opacity: 1;
    transform: none;
}

/* Вендорная подсказка поля (info_window) всплывает на фокус и легла бы поверх списка. */
.js_window_wrap:has(.gw-msgr.is-open) .info_window {
    display: none !important;
}

/* Узкая колонка (сетка персданных в две колонки, телефон): в кнопке только значок. */
@container (max-width: 300px) {
    .gw-msgr-btn .gw-msgr-name {
        display: none;
    }
    .gw-msgr-list {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gw-msgr-btn,
    .gw-msgr-chev,
    .gw-msgr-list,
    .gw-msgr-opt,
    .gw-msgr-check {
        transition: none;
    }
}