/* =============================================================
   AI Positions — Mobile UX Overhaul
   Только мобильные стили (≤768px). Десктоп не затрагивается.
   @since 1.26.0
   ============================================================= */

/* ── TABLET (≤992px → ≤768px) ── */
@media (max-width: 768px) {

    /* --- Tabs: горизонтальный скролл в одну строку --- */
    .ai-positions__tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;        /* Firefox */
        -ms-overflow-style: none;     /* IE/Edge */
        gap: 6px;
        padding: 4px;
        scroll-snap-type: x mandatory;
        scroll-padding: 4px;
    }
    .ai-positions__tabs::-webkit-scrollbar {
        display: none;
    }

    .ai-positions__tab {
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    /* --- Carousel pills: горизонтальный скролл --- */
    .aip-carousel__nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
        padding: 0 4px;
        scroll-snap-type: x mandatory;
    }
    .aip-carousel__nav::-webkit-scrollbar {
        display: none;
    }
    .aip-carousel__pill {
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

/* ── MOBILE (≤576px) ── */
@media (max-width: 576px) {

    /* === TABS === */
    .ai-positions__tabs {
        background: #f0f1f3;
        border-radius: 10px;
        padding: 3px;
        margin-bottom: 0;
    }

    .ai-positions__tab {
        padding: 8px 14px;
        font-size: 12px;
        gap: 5px;
        border-radius: 7px;
    }

    .ai-positions__tab-dot {
        width: 7px;
        height: 7px;
    }

    /* === TABLE: скрыть # колонку, сузить keyword === */

    /* Скрываем колонку № */
    .ai-positions__th-num,
    .ai-positions__num {
        display: none !important;
    }

    /* Keyword: сужаем и ставим left:0 (т.к. # скрыт) */
    .ai-positions__th-kw,
    .ai-positions__kw {
        left: 0 !important;
        min-width: 90px !important;
        max-width: 90px !important;
        width: 90px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px !important;
        padding: 6px 8px 6px 10px !important;
    }

    /* Тень frozen-колонки — усиливаем для видимости */
    .ai-positions__th-kw::after,
    .ai-positions__kw::after {
        right: -8px;
        width: 8px;
        background: linear-gradient(to right, rgba(0,0,0,0.1), transparent);
    }

    /* Date колонки: компактнее */
    .ai-positions__col-date {
        min-width: 70px;
        font-size: 12px !important;
        padding: 6px 4px !important;
    }

    /* Ячейки позиций: крупнее для тач */
    .ai-positions__pos {
        font-size: 14px !important;
        padding: 8px 6px !important;
        min-width: 70px;
    }

    .ai-positions__change {
        font-size: 12px;
    }

    /* === TABLE WRAP: индикатор скролла === */
    .ai-positions__table-wrap {
        position: relative;
        max-height: 60vh;
        border-radius: 10px;
    }

    /* Gradient shadow правый край — показывает что есть контент справа */
    .ai-positions__table-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        width: 32px;
        height: 100%;
        pointer-events: none;
        z-index: 5;
        background: linear-gradient(to right, transparent, rgba(5,150,105,0.08));
    }

    /* Скрываем shadow когда дос кроллено до конца (JS добавит класс) */
    .ai-positions__table-wrap--scrolled-end::after {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Подсказка скролла */
    .ai-positions__scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 16px;
        margin-bottom: 8px;
        background: linear-gradient(135deg, rgba(5,150,105,0.06), rgba(5,150,105,0.02));
        border: 1px solid rgba(5,150,105,0.12);
        border-radius: 8px;
        font-size: 12px;
        color: #6b7280;
        animation: aipHintPulse 2s ease-in-out infinite;
        transition: opacity 0.5s ease, max-height 0.5s ease;
        overflow: hidden;
        max-height: 50px;
    }

    .ai-positions__scroll-hint--hidden {
        opacity: 0;
        max-height: 0;
        padding: 0;
        margin: 0;
        border: none;
    }

    .ai-positions__scroll-hint svg {
        flex-shrink: 0;
        color: var(--color-primary, #059669);
    }

    @keyframes aipHintPulse {
        0%, 100% { opacity: 0.7; }
        50% { opacity: 1; }
    }

    /* === FOOTER STATS: компактнее === */
    .ai-positions__foot td {
        font-size: 12px;
        padding: 4px 4px !important;
    }

    .ai-positions__foot-label {
        left: 0 !important;
        font-size: 12px !important;
        padding-left: 8px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        width: 90px !important;
    }

    .ai-positions__top10-count {
        font-size: 13px;
    }

    .ai-positions__top10-pct {
        font-size: 12px;
    }

    /* === LEGEND: компактнее в строку === */
    .ai-positions__legend {
        gap: 8px;
        margin-top: 12px;
        font-size: 12px;
        justify-content: center;
    }

    .ai-positions__legend-color {
        width: 12px;
        height: 12px;
    }

    /* === Panel === */
    .ai-positions__panel {
        padding-top: 16px;
    }

    /* === Carousel arrows === */
    .aip-carousel__arrows {
        gap: 12px;
        margin-top: 20px;
    }

    .aip-carousel__arrow {
        width: 36px;
        height: 36px;
    }

    .aip-carousel__counter {
        font-size: 14px;
    }

    /* === Keyword expand on tap (JS toggles class) === */
    .ai-positions__kw--expanded {
        max-width: none !important;
        width: auto !important;
        min-width: 90px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        z-index: 10;
        box-shadow: 4px 0 12px rgba(0,0,0,0.15);
        position: sticky;
        left: 0;
        background: #fff !important;
    }

    /* Footer sticky row fixes */
    .ai-positions__foot--top1 td,
    .ai-positions__foot--top3 td,
    .ai-positions__foot--top10 td {
        font-size: 12px;
    }
}

/* ── VERY SMALL (≤380px) ── */
@media (max-width: 380px) {

    .ai-positions__th-kw,
    .ai-positions__kw {
        min-width: 75px !important;
        max-width: 75px !important;
        width: 75px !important;
        font-size: 12px !important;
        padding: 5px 6px 5px 8px !important;
    }

    .ai-positions__foot-label {
        min-width: 75px !important;
        max-width: 75px !important;
        width: 75px !important;
    }

    .ai-positions__pos {
        min-width: 60px;
        font-size: 13px !important;
        padding: 7px 4px !important;
    }

    .ai-positions__col-date {
        min-width: 60px;
        font-size: 12px !important;
    }

    .ai-positions__tab {
        padding: 7px 10px;
        font-size: 12px;
    }

    .aip-carousel__pill {
        padding: 5px 10px;
        font-size: 12px;
    }
}