/* ==========================================================================
   СТРЕКОЗА FM — ретро-приёмник в стиле Windows XP Luna / WMP 9
   Никаких скруглений: border-radius: 0 везде, как в остальном проекте.
   ========================================================================== */

.xp-radio-widget,
.xp-radio-widget * {
    border-radius: 0 !important;
    box-sizing: border-box;
    font-family: Tahoma, "MS Sans Serif", sans-serif;
}

.xp-radio-widget {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 320px;
    z-index: 9500;
    background: var(--xp-bg-gray, #ece9d8);
    border: 2px solid var(--xp-window-border, #003db3);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.45);
    user-select: none;
}

/* --- Заголовок окна --- */
.xp-radio-titlebar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 3px 0 6px;
    cursor: move;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    background: var(--xp-blue-gradient, linear-gradient(to bottom, #538ef2 0%, #245edb 10%, #0e44b8 100%));
    border-bottom: 1px solid #003c74;
}

.xp-radio-tb-icon { font-size: 12px; }

.xp-radio-tb-text {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.xp-radio-tb-buttons { display: flex; gap: 2px; }

.xp-radio-tb-btn {
    width: 18px;
    height: 17px;
    padding: 0;
    line-height: 15px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(to bottom, #4d8ce8 0%, #1c4fc4 100%);
    border: 1px solid #0b3ea8;
    border-top-color: #7ba7ee;
    border-left-color: #7ba7ee;
}

.xp-radio-tb-btn:hover { background: linear-gradient(to bottom, #6ea3ee 0%, #2a60d8 100%); }
.xp-radio-tb-close { background: linear-gradient(to bottom, #e88a6a 0%, #c33c19 100%); border-color: #a33116; }
.xp-radio-tb-close:hover { background: linear-gradient(to bottom, #f3a184 0%, #d54e2a 100%); }

.xp-radio-widget.collapsed .xp-radio-body { display: none; }

/* --- Экран приёмника --- */
.xp-radio-body { padding: 6px; }

.xp-radio-screen {
    position: relative;
    padding: 7px 8px 8px;
    color: #8fffb0;
    background: linear-gradient(180deg, #0a2a1c 0%, #05160f 60%, #0a2a1c 100%);
    border: 2px inset #b6b0a0;
    box-shadow: inset 0 0 14px rgba(0, 255, 128, 0.12);
}

.xp-radio-screen-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.xp-radio-live {
    color: #6d8c7c;
    font-weight: bold;
}

.xp-radio-widget.live .xp-radio-live {
    color: #ff5a4a;
    text-shadow: 0 0 6px rgba(255, 60, 40, 0.7);
    animation: xp-radio-blink 1.6s steps(1, end) infinite;
}

@keyframes xp-radio-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.35; } }

.xp-radio-listeners { color: #6ee0a0; font-size: 10px; }

/* Бегущая строка с названием трека */
.xp-radio-marquee-box {
    overflow: hidden;
    height: 18px;
    margin-bottom: 5px;
}

.xp-radio-marquee {
    display: inline-block;
    white-space: nowrap;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    text-shadow: 0 0 5px rgba(120, 255, 170, 0.55);
}

.xp-radio-marquee.scroll { animation: xp-radio-scroll 14s linear infinite; }

@keyframes xp-radio-scroll {
    0% { transform: translateX(0); }
    12% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Индикатор уровня: чисто декоративный, но оживляет панель */
.xp-radio-vu {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 22px;
    margin-bottom: 6px;
    opacity: 0.35;
}

.xp-radio-vu i {
    flex: 1;
    height: 20%;
    background: linear-gradient(to top, #1f7a4a 0%, #6dff9f 100%);
}

.xp-radio-widget.is-playing .xp-radio-vu { opacity: 1; }

.xp-radio-widget.is-playing .xp-radio-vu i {
    animation: xp-radio-vu 0.9s ease-in-out infinite alternate;
}

@keyframes xp-radio-vu {
    0% { height: 15%; }
    50% { height: 65%; }
    100% { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .xp-radio-vu i,
    .xp-radio-marquee.scroll,
    .xp-radio-widget.live .xp-radio-live { animation: none !important; }
}

.xp-radio-progress {
    height: 6px;
    background: #06120c;
    border: 1px solid #1d4a34;
}

.xp-radio-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(to right, #2e9c63, #7dffb4);
    transition: width 0.9s linear;
}

.xp-radio-timeline {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 10px;
    color: #74d59b;
}

.xp-radio-timeline span:last-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Оверлей «нажмите, чтобы включить звук» */
.xp-radio-connect-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    text-align: center;
    background: rgba(4, 18, 12, 0.92);
}

.xp-radio-connect-hint { font-size: 10px; color: #7fc7a0; }

.xp-radio-speaking {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: bold;
    color: #fff3c4;
    background: rgba(180, 90, 0, 0.85);
}

/* --- Панели кнопок --- */
.xp-radio-controls,
.xp-radio-hostbar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.xp-radio-hostbar {
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid #b6b0a0;
}

.xp-radio-btn {
    min-width: 26px;
    height: 24px;
    padding: 0 6px;
    font-size: 12px;
    cursor: pointer;
    color: #000;
    background: linear-gradient(to bottom, #fdfdfd 0%, #e3e0d3 45%, #d2cec0 100%);
    border: 1px solid #7f7a6e;
    border-top-color: #fff;
    border-left-color: #fff;
}

.xp-radio-btn:hover { background: linear-gradient(to bottom, #fff 0%, #f0eee4 45%, #ddd9cc 100%); }
.xp-radio-btn:active { border-color: #fff #7f7a6e #7f7a6e #fff; }
.xp-radio-btn.active { background: linear-gradient(to bottom, #cfd8ea 0%, #aab9d8 100%); }
.xp-radio-btn-stop { color: #8b1a1a; font-weight: bold; }

.xp-radio-volume {
    flex: 1;
    min-width: 60px;
    height: 18px;
    accent-color: #245edb;
}

/* Кнопка «зажми и говори» */
.xp-radio-ptt {
    flex: 1 1 100%;
    height: 34px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    touch-action: none;               /* палец на кнопке не скроллит страницу */
    -webkit-user-select: none;
    user-select: none;
    background: linear-gradient(to bottom, #7ea9f0 0%, #2a5fd0 50%, #123f9e 100%);
    border: 1px solid #0b357f;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.xp-radio-ptt.recording {
    background: linear-gradient(to bottom, #ff8a70 0%, #e03b1c 50%, #b32a10 100%);
    border-color: #8f2109;
    animation: xp-radio-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes xp-radio-pulse {
    from { box-shadow: 0 0 0 rgba(255, 60, 30, 0.6); }
    to { box-shadow: 0 0 12px rgba(255, 60, 30, 0.85); }
}

/* --- Чат эфира --- */
.xp-radio-chat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #b6b0a0;
}

.xp-radio-chat-list {
    height: 150px;
    overflow-y: auto;
    padding: 4px 5px;
    font-size: 11px;
    line-height: 1.45;
    background: #fff;
    border: 2px inset #d4d0c8;
    overscroll-behavior: contain;
}

.xp-radio-chat-row { margin-bottom: 2px; word-break: break-word; }
.xp-radio-chat-name { font-weight: bold; color: var(--xp-blue-dark, #0e44b8); }
.xp-radio-chat-name.host { color: #b35c00; }
.xp-radio-chat-text { color: #000; }

.xp-radio-chat-system {
    margin: 3px 0;
    padding: 2px 4px;
    font-style: italic;
    color: #555;
    background: #f3f1e6;
    border-left: 3px solid #a9a48f;
}

.xp-radio-chat-form { display: flex; gap: 4px; }
.xp-radio-chat-form .input-field { flex: 1; min-width: 0; font-size: 12px; padding: 4px; }
.xp-radio-chat-form .btn { padding: 4px 10px; }

/* ==========================================================================
   ВКЛАДКА «РАДИО» НА СТРАНИЦЕ СООБЩЕСТВА
   ========================================================================== */

.radio-studio { padding: 4px 2px; }

.radio-studio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 6px;
    border-bottom: 1px solid #c9c4b2;
}

.radio-studio-title { font-size: 13px; font-weight: bold; color: var(--xp-blue-dark, #0e44b8); }

.radio-studio-status {
    padding: 2px 8px;
    font-size: 11px;
    color: #555;
    background: #f1efe7;
    border: 1px solid #c9c4b2;
}

.radio-studio-status.on {
    color: #fff;
    font-weight: bold;
    background: linear-gradient(to bottom, #e05a3c, #b82f14);
    border-color: #8f2109;
}

.radio-studio-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.radio-title-input { flex: 1; min-width: 180px; font-size: 12px; padding: 4px; }

.radio-box-title {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.radio-upload-box {
    padding: 8px;
    background: #f1efe7;
    border: 2px inset #fff;
}

.radio-upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 6px;
    align-items: center;
}

.radio-upload-grid .input-field { font-size: 12px; padding: 4px; min-width: 0; }
.radio-upload-hint { margin-top: 5px; font-size: 10px; color: #666; }

.radio-playlist { background: #fff; border: 2px inset #d4d0c8; }

.radio-track-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 12px;
    border-bottom: 1px solid #e6e4da;
}

.radio-track-row.now { background: #e8f0ff; }
.radio-track-num { width: 22px; flex-shrink: 0; text-align: center; color: #666; font-size: 11px; }
.radio-track-row.now .radio-track-num { color: #0e44b8; font-weight: bold; }

.radio-track-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.radio-badge-comm {
    margin-left: 6px;
    padding: 1px 4px;
    font-size: 9px;
    color: #fff;
    background: #7a8fbe;
}

.radio-track-tools { display: flex; gap: 3px; flex-shrink: 0; }

.radio-mini-btn {
    width: 24px;
    height: 22px;
    font-size: 11px;
    cursor: pointer;
    background: linear-gradient(to bottom, #fdfdfd, #ddd9cc);
    border: 1px solid #8b8676;
}

.radio-mini-btn.danger { color: #b3170f; }
.radio-mini-btn:active { border-color: #fff #8b8676 #8b8676 #fff; }

.radio-empty { padding: 18px; text-align: center; font-size: 12px; color: #666; }

.radio-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: bold;
    background: #ece9d8;
    border-bottom: 1px solid #c9c4b2;
}

/* Плашка «В ЭФИРЕ» в шапке сообщества */
.comm-live-badge {
    margin-left: 5px;
    background: linear-gradient(to bottom, #e05a3c, #b82f14) !important;
    border-color: #8f2109 !important;
}

.comm-live-badge .live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    background: #fff;
    animation: xp-radio-blink 1.4s steps(1, end) infinite;
}

/* ==========================================================================
   МОБИЛЬНАЯ РАСКЛАДКА
   ========================================================================== */

@media screen and (max-width: 768px) {
    .xp-radio-widget.mobile,
    .xp-radio-widget {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        border-width: 2px 0 0 0;
        box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.4);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .xp-radio-titlebar { height: 30px; cursor: default; font-size: 12px; }
    .xp-radio-tb-btn { width: 30px; height: 24px; font-size: 12px; }

    /* Свёрнутый виджет превращается в тонкую полоску над таббаром */
    .xp-radio-widget.collapsed { border-top-width: 2px; }

    .xp-radio-body { padding: 6px 8px 8px; }
    .xp-radio-marquee-box { height: 20px; }
    .xp-radio-marquee { font-size: 14px; line-height: 20px; }
    .xp-radio-vu { height: 18px; }

    /* Пальцем — по крупным целям */
    .xp-radio-btn { min-width: 40px; height: 34px; font-size: 14px; }
    .xp-radio-volume { height: 28px; }
    .xp-radio-ptt { height: 46px; font-size: 13px; }
    .xp-radio-chat-list { height: 32vh; font-size: 12px; }
    .xp-radio-chat-form .input-field { font-size: 16px; }  /* < 16px = iOS зумит форму */

    .radio-upload-grid { grid-template-columns: 1fr; }
    .radio-upload-grid .input-field,
    .radio-upload-grid .btn { width: 100%; font-size: 16px; padding: 8px; }

    .radio-studio-actions .btn,
    .radio-title-input { width: 100%; }
    .radio-studio-actions { flex-direction: column; align-items: stretch; }

    .radio-track-row { padding: 9px 8px; font-size: 13px; }
    .radio-mini-btn { width: 34px; height: 30px; font-size: 13px; }
    .radio-track-name { white-space: normal; }
}

/* Очень узкие экраны (320–360px) */
@media screen and (max-width: 360px) {
    .xp-radio-marquee { font-size: 12px; }
    .xp-radio-btn { min-width: 34px; padding: 0 4px; }
}

/* ==========================================================================
   ОКНО «РАБОТА ПРИ ВЫКЛЮЧЕННОМ ЭКРАНЕ» (PowerMode из keepalive.js)
   ========================================================================== */

.pm-help-modal { max-height: 88vh; overflow-y: auto; }
.pm-help-modal * { border-radius: 0 !important; }

.pm-help-note {
    padding: 7px 9px;
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #444;
    background: #ffffe1;
    border: 1px solid #b8b393;
}

.pm-help-warn {
    padding: 7px 9px;
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #6b2a00;
    background: #ffe9d6;
    border: 1px solid #d09a6a;
}

.pm-help-list {
    margin: 0 0 10px;
    padding-left: 20px;
    font-size: 12px;
    line-height: 1.6;
    color: #222;
}

.pm-help-list li { margin-bottom: 6px; }

.pm-help-report {
    padding: 7px 9px;
    margin-bottom: 8px;
    background: #fff;
    border: 2px inset #d4d0c8;
    font-size: 11px;
}

.pm-help-line.ok { color: #1c6b32; }
.pm-help-line.no { color: #b3170f; }

.pm-help-hint {
    margin-top: 5px;
    font-size: 10px;
    color: #666;
    line-height: 1.5;
}

@media screen and (max-width: 768px) {
    .pm-help-list { font-size: 13px; }
    .pm-help-modal .btn { padding: 10px; font-size: 15px; }
}