/**
 * Поиск в стиле YouTube (светлая и тёмная тема).
 * Тема original (lo-fi) — без изменений.
 */

/* ═══ Мобилка (≤900px) ═══ */
@media (max-width: 900px) {
    html.light-theme .search-container,
    body.light-theme .search-container,
    html.dark-theme .search-container,
    body.dark-theme .search-container {
        gap: 0;
        align-items: stretch;
        overflow: hidden;
        border-radius: 40px;
        box-shadow: none;
        flex: 1 1 auto;
        min-width: 0;
    }

    html.light-theme .search-input-wrapper,
    body.light-theme .search-input-wrapper,
    html.dark-theme .search-input-wrapper,
    body.dark-theme .search-input-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
    }

    /* ── Светлая ── */
    html.light-theme .search-container,
    body.light-theme .search-container {
        border: 1px solid #ccc;
        background: #fff;
    }

    html.light-theme .search-container:focus-within,
    body.light-theme .search-container:focus-within {
        border-color: #1c62b9;
    }

    html.light-theme .search-input-wrapper input,
    body.light-theme .search-input-wrapper input {
        flex: 1 1 auto;
        min-width: 0;
        height: 40px;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 16px;
        padding-left: 14px;
        padding-right: 4px;
    }

    html.light-theme .search-input-wrapper input:focus,
    body.light-theme .search-input-wrapper input:focus {
        border: none;
        outline: none;
        box-shadow: none;
    }

    html.light-theme .search-button,
    body.light-theme .search-button {
        width: 48px;
        min-width: 48px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: none;
        border-left: 1px solid #ccc;
        border-radius: 0 40px 40px 0;
        background: #f8f8f8;
        flex-shrink: 0;
        align-self: stretch;
    }

    html.light-theme .search-button .icon-img,
    body.light-theme .search-button .icon-img {
        width: 20px;
        height: 20px;
        filter: brightness(0) saturate(100%);
        opacity: 0.72;
    }

    html.light-theme .voice-search-button,
    body.light-theme .voice-search-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #ccc;
        background: #f8f8f8;
        flex-shrink: 0;
    }

    html.light-theme .voice-search-button .icon-img,
    body.light-theme .voice-search-button .icon-img {
        width: 20px;
        height: 20px;
        filter: brightness(0) saturate(100%);
        opacity: 0.72;
    }

    /* ── Тёмная ── */
    html.dark-theme .search-container,
    body.dark-theme .search-container {
        border: 1px solid #303030;
        background: #121212;
    }

    html.dark-theme .search-container:focus-within,
    body.dark-theme .search-container:focus-within {
        border-color: #1c62b9;
    }

    html.dark-theme .search-input-wrapper input,
    body.dark-theme .search-input-wrapper input {
        flex: 1 1 auto;
        min-width: 0;
        height: 40px;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 16px;
        padding-left: 14px;
        padding-right: 4px;
    }

    html.dark-theme .search-input-wrapper input:focus,
    body.dark-theme .search-input-wrapper input:focus {
        border: none;
        outline: none;
        box-shadow: none;
    }

    html.dark-theme .search-button,
    body.dark-theme .search-button {
        width: 48px;
        min-width: 48px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: none;
        border-left: 1px solid #303030;
        border-radius: 0 40px 40px 0;
        background: #222222;
        flex-shrink: 0;
        align-self: stretch;
    }

    html.dark-theme .search-button .icon-img,
    body.dark-theme .search-button .icon-img {
        width: 20px;
        height: 20px;
        filter: brightness(0) invert(1);
        opacity: 0.92;
    }

    html.dark-theme .voice-search-button,
    body.dark-theme .voice-search-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #303030;
        background: #181818;
        flex-shrink: 0;
    }

    html.dark-theme .voice-search-button .icon-img,
    body.dark-theme .voice-search-button .icon-img {
        width: 20px;
        height: 20px;
        filter: brightness(0) invert(1);
        opacity: 0.92;
    }

    /* Не главная: свёрнутый поиск — цельная «капсула» без кнопки */
    html.light-theme body:not(.page-home) .search-container:not(.is-expanded) .search-input-wrapper input,
    body.light-theme body:not(.page-home) .search-container:not(.is-expanded) .search-input-wrapper input,
    html.dark-theme body:not(.page-home) .search-container:not(.is-expanded) .search-input-wrapper input,
    body.dark-theme body:not(.page-home) .search-container:not(.is-expanded) .search-input-wrapper input {
        border-radius: 40px;
    }

    /* Не главная: развёрнутый поиск — кнопка YouTube справа */
    html.light-theme body:not(.page-home) .header-top.search-expanded .search-container.is-expanded .search-button,
    body.light-theme body:not(.page-home) .header-top.search-expanded .search-container.is-expanded .search-button,
    html.dark-theme body:not(.page-home) .header-top.search-expanded .search-container.is-expanded .search-button,
    body.dark-theme body:not(.page-home) .header-top.search-expanded .search-container.is-expanded .search-button {
        width: 48px;
        min-width: 48px;
        opacity: 1;
        pointer-events: auto;
        overflow: visible;
        padding: 0;
        border-width: 0;
        border-left-width: 1px;
        border-left-style: solid;
    }

    html.light-theme body:not(.page-home) .header-top.search-expanded .search-container.is-expanded .search-button,
    body.light-theme body:not(.page-home) .header-top.search-expanded .search-container.is-expanded .search-button {
        border-left-color: #ccc;
    }

    html.dark-theme body:not(.page-home) .header-top.search-expanded .search-container.is-expanded .search-button,
    body.dark-theme body:not(.page-home) .header-top.search-expanded .search-container.is-expanded .search-button {
        border-left-color: #303030;
    }

    html.light-theme body:not(.page-home) .search-container.is-expanded,
    body.light-theme body:not(.page-home) .search-container.is-expanded,
    html.dark-theme body:not(.page-home) .search-container.is-expanded,
    body.dark-theme body:not(.page-home) .search-container.is-expanded {
        gap: 0;
        max-width: 100%;
    }

    html.light-theme body.page-home .search-container,
    body.light-theme body.page-home .search-container,
    html.dark-theme body.page-home .search-container,
    body.dark-theme body.page-home .search-container {
        gap: 0;
        width: 100%;
        max-width: 100%;
    }

    html.light-theme body.page-home .search-button,
    body.light-theme body.page-home .search-button,
    html.dark-theme body.page-home .search-button,
    body.dark-theme body.page-home .search-button {
        flex: 0 0 48px;
    }

    html.light-theme body.page-home .header-top.search-expanded .search-container.is-expanded .search-button,
    body.light-theme body.page-home .header-top.search-expanded .search-container.is-expanded .search-button,
    html.dark-theme body.page-home .header-top.search-expanded .search-container.is-expanded .search-button,
    body.dark-theme body.page-home .header-top.search-expanded .search-container.is-expanded .search-button {
        width: 48px;
        min-width: 48px;
        opacity: 1;
        pointer-events: auto;
        border-left-width: 1px;
        border-left-style: solid;
    }

    html.light-theme body.page-home .header-top.search-expanded .search-container.is-expanded .search-button,
    body.light-theme body.page-home .header-top.search-expanded .search-container.is-expanded .search-button {
        border-left-color: #ccc;
    }

    html.dark-theme body.page-home .header-top.search-expanded .search-container.is-expanded .search-button,
    body.dark-theme body.page-home .header-top.search-expanded .search-container.is-expanded .search-button {
        border-left-color: #303030;
    }
}

/* ═══ ПК (≥901px) ═══ */
@media (min-width: 901px) {
    html.light-theme .search-container,
    body.light-theme .search-container,
    html.dark-theme .search-container,
    body.dark-theme .search-container {
        gap: 0;
        align-items: stretch;
        overflow: hidden;
        border-radius: 40px;
        box-shadow: none;
    }

    /* ── Светлая тема ── */
    html.light-theme .search-container,
    body.light-theme .search-container {
        border: 1px solid #ccc;
        background: #fff;
    }

    html.light-theme .search-container:focus-within,
    body.light-theme .search-container:focus-within {
        border-color: #1c62b9;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    html.light-theme .search-input-wrapper,
    body.light-theme .search-input-wrapper {
        flex: 1 1 auto;
        min-width: 0;
    }

    html.light-theme .search-input-wrapper input,
    body.light-theme .search-input-wrapper input {
        height: 40px;
        border: none;
        border-radius: 40px 0 0 40px;
        background: #fff;
        box-shadow: none;
    }

    html.light-theme .search-input-wrapper input:focus,
    body.light-theme .search-input-wrapper input:focus {
        border: none;
        outline: none;
        box-shadow: none;
    }

    html.light-theme .search-button,
    body.light-theme .search-button {
        width: 64px;
        min-width: 64px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: none;
        border-left: 1px solid #ccc;
        border-radius: 0 40px 40px 0;
        background: #f8f8f8;
        flex-shrink: 0;
    }

    html.light-theme .search-button:hover,
    body.light-theme .search-button:hover {
        background: #f0f0f0;
    }

    html.light-theme .search-button .icon-img,
    body.light-theme .search-button .icon-img {
        filter: brightness(0) saturate(100%);
        opacity: 0.72;
    }

    html.light-theme .voice-search-button,
    body.light-theme .voice-search-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #ccc;
        background: #f8f8f8;
    }

    html.light-theme .voice-search-button:hover,
    body.light-theme .voice-search-button:hover {
        background: #f0f0f0;
    }

    html.light-theme .voice-search-button .icon-img,
    body.light-theme .voice-search-button .icon-img {
        filter: brightness(0) saturate(100%);
        opacity: 0.72;
    }

    /* ── Тёмная тема ── */
    html.dark-theme .search-container,
    body.dark-theme .search-container {
        border: 1px solid #303030;
        background: #121212;
    }

    html.dark-theme .search-container:focus-within,
    body.dark-theme .search-container:focus-within {
        border-color: #1c62b9;
    }

    html.dark-theme .search-input-wrapper input,
    body.dark-theme .search-input-wrapper input {
        height: 40px;
        border: none;
        border-radius: 40px 0 0 40px;
        background: #121212;
        box-shadow: none;
    }

    html.dark-theme .search-input-wrapper input:focus,
    body.dark-theme .search-input-wrapper input:focus {
        border: none;
        outline: none;
        box-shadow: none;
    }

    html.dark-theme .search-button,
    body.dark-theme .search-button {
        width: 64px;
        min-width: 64px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: none;
        border-left: 1px solid #303030;
        border-radius: 0 40px 40px 0;
        background: #222222;
        flex-shrink: 0;
    }

    html.dark-theme .search-button:hover,
    body.dark-theme .search-button:hover {
        background: #3f3f3f;
    }

    html.dark-theme .search-button .icon-img,
    body.dark-theme .search-button .icon-img {
        filter: brightness(0) invert(1);
        opacity: 0.92;
    }

    html.dark-theme .voice-search-button,
    body.dark-theme .voice-search-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #303030;
        background: #181818;
    }

    html.dark-theme .voice-search-button:hover,
    body.dark-theme .voice-search-button:hover {
        background: #272727;
    }

    html.dark-theme .voice-search-button .icon-img,
    body.dark-theme .voice-search-button .icon-img {
        filter: brightness(0) invert(1);
        opacity: 0.92;
    }
}