/* TIP mobile field shell.
   Phone scope is intentionally limited to monitoring and test archive routes.
   Desktop engineering navigation and layouts remain unchanged above 900px. */
.tip-mobile-nav-toggle,
.tip-mobile-nav-close,
.tip-mobile-nav-scrim,
.tip-mobile-nav-label,
.tip-mobile-filter-toggle,
.tip-mobile-filter-close,
.tip-mobile-filter-scrim,
.tip-mobile-channel-toggle,
.tip-mobile-channel-close,
.tip-mobile-channel-scrim,
.tip-test-run-mobile-list,
.tip-test-detail-mobile-tab-picker,
.tip-mobile-action-label,
.tip-test-run-chart-pan-hint {
    display: none;
}

/* Blazor Server circuit feedback. This is especially important on phones where
   Wi-Fi/cellular hand-offs are common. The framework owns the state classes; the
   UI doesn't start a second data request or discard any chart state. */
.tip-reconnect-modal {
    position: fixed;
    z-index: 1400;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 18px max(14px, env(safe-area-inset-left));
    pointer-events: auto;
    background: linear-gradient(180deg, rgba(2, 6, 23, .54), rgba(2, 6, 23, .16));
    backdrop-filter: blur(2px);
}

.tip-reconnect-modal.components-reconnect-show,
.tip-reconnect-modal.components-reconnect-retrying,
.tip-reconnect-modal.components-reconnect-failed,
.tip-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.tip-reconnect-modal.components-reconnect-hide {
    display: none;
}

.tip-reconnect-card {
    display: flex;
    width: min(520px, 100%);
    min-height: 76px;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(103, 232, 249, .38);
    border-radius: 16px;
    color: #e2e8f0;
    pointer-events: auto;
    background: rgba(15, 23, 42, .97);
    box-shadow: 0 20px 55px rgba(2, 6, 23, .4), inset 0 1px rgba(255, 255, 255, .05);
}

.tip-reconnect-signal {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    padding: 9px;
    border-radius: 12px;
    color: #22d3ee;
    background: rgba(8, 145, 178, .15);
}

.tip-reconnect-signal span {
    width: 4px;
    border-radius: 4px;
    background: currentColor;
    animation: tip-reconnect-pulse .9s ease-in-out infinite alternate;
}

.tip-reconnect-signal span:nth-child(1) { height: 9px; }
.tip-reconnect-signal span:nth-child(2) { height: 16px; animation-delay: .13s; }
.tip-reconnect-signal span:nth-child(3) { height: 23px; animation-delay: .26s; }

.tip-reconnect-state {
    display: none;
    min-width: 0;
    flex: 1;
    gap: 3px;
}

.components-reconnect-show .tip-reconnect-attempting,
.components-reconnect-retrying .tip-reconnect-attempting,
.components-reconnect-failed .tip-reconnect-failed,
.components-reconnect-rejected .tip-reconnect-rejected {
    display: flex;
    flex-direction: column;
}

.tip-reconnect-state strong {
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.35;
}

.tip-reconnect-state > span {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.45;
}

.tip-reconnect-state button {
    min-height: 44px;
    align-self: flex-start;
    margin-top: 8px;
    padding: 0 16px;
    border: 1px solid rgba(103, 232, 249, .48);
    border-radius: 10px;
    color: #cffafe;
    font-size: 13px;
    font-weight: 800;
    background: rgba(8, 145, 178, .24);
}

.components-reconnect-failed .tip-reconnect-signal,
.components-reconnect-rejected .tip-reconnect-signal {
    color: #fbbf24;
    background: rgba(245, 158, 11, .15);
}

@keyframes tip-reconnect-pulse {
    from { opacity: .35; transform: scaleY(.58); }
    to { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 900px) {
    html.tip-mobile-nav-lock,
    html.tip-mobile-nav-lock body,
    html.tip-mobile-filter-lock,
    html.tip-mobile-filter-lock body,
    html.tip-mobile-channel-lock,
    html.tip-mobile-channel-lock body {
        overflow: hidden;
    }

    .tip-app-frame {
        display: block !important;
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* Dar ekranda kabuk tek sütuna düşer ve yukarıdaki `display: block !important`
       yüzünden masaüstündeki yükseklik kilidi tutunamaz — kilit açık kalırsa
       `overflow: hidden` içeriği KESER. Pano ekranları burada kilidi bırakır, uzun
       liste sayfa olarak kayar; bu dar ekranda zaten doğru davranış. Workspace
       (`--board` taşımaz) kilitli kalır: sohbet giriş kutusu ekranda durmalı. */
    .tip-app-shell--board.tip-app-shell--fixed,
    .tip-app-shell--board .tip-app-frame--fixed {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    .tip-app-shell--board .tip-app-frame--fixed .tip-content-column,
    .tip-app-shell--board .tip-main--fixed {
        overflow: visible;
    }

    .tip-app-shell--board .tip-screen-stations {
        display: block;
    }

    .tip-app-shell--board .tip-screen-stations .tip-station-column {
        max-height: none;
    }

    .tip-content-column {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .tip-topbar {
        position: sticky;
        top: 0;
        min-height: 56px;
        padding-top: max(8px, env(safe-area-inset-top)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
        padding-bottom: 8px !important;
        padding-left: max(12px, env(safe-area-inset-left)) !important;
    }

    .tip-topbar-leading {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 10px;
    }

    .tip-topbar-title {
        max-width: min(48vw, 280px);
        color: var(--tip-text-primary) !important;
        font-size: 13px;
        font-weight: 700;
    }

    /* The persistent AI entry has no utility classes of its own. Bound it here
       so its SVG cannot inherit the browser's oversized default dimensions. */
    .tip-topbar-ai {
        display: grid;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        place-items: center;
        border: 1px solid var(--tip-accent-border);
        border-radius: 12px;
        color: var(--tip-accent);
        background: var(--tip-accent-soft);
    }

    .tip-topbar-ai svg {
        width: 22px;
        height: 22px;
    }

    .tip-topbar-ai span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .tip-mobile-nav-toggle,
    .tip-mobile-nav-close,
    .tip-mobile-filter-close {
        display: grid;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        place-items: center;
        border: 1px solid var(--tip-accent-border);
        border-radius: 12px;
        color: var(--tip-accent);
        background: var(--tip-accent-soft);
    }

    .tip-mobile-nav-toggle svg,
    .tip-mobile-nav-close svg,
    .tip-mobile-filter-close svg {
        width: 21px;
        height: 21px;
    }

    .tip-user-name,
    .tip-user-chevron {
        display: none;
    }

    .tip-user-trigger {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 4px !important;
    }

    .tip-user-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .tip-user-menu {
        position: fixed !important;
        top: calc(56px + env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right)) !important;
        width: min(18rem, calc(100vw - 24px)) !important;
        margin-top: 6px !important;
    }

    .tip-main {
        padding: 12px !important;
    }

    .main-sidebar,
    .main-sidebar.sidebar-collapsed {
        position: fixed !important;
        z-index: 90;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(320px, calc(100vw - 48px));
        min-height: 0 !important;
        height: 100vh;
        height: 100dvh;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        visibility: hidden;
        transform: translateX(-104%);
        transition: transform .2s ease, visibility 0s linear .2s;
        box-shadow: 24px 0 60px rgba(2, 6, 23, .35);
    }

    .tip-app-shell.tip-mobile-nav-open .main-sidebar {
        visibility: visible;
        transform: translateX(0);
        transition-delay: 0s;
    }

    .tip-mobile-nav-scrim {
        position: fixed;
        z-index: 80;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        opacity: 0;
        pointer-events: none;
        background: rgba(2, 6, 23, .58);
        backdrop-filter: blur(2px);
        transition: opacity .18s ease;
    }

    .tip-app-shell.tip-mobile-nav-open .tip-mobile-nav-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    .main-sidebar .tip-sidebar-brand,
    .main-sidebar.sidebar-collapsed .tip-sidebar-brand {
        min-height: 72px;
        justify-content: flex-start;
        padding: 12px 10px 12px 14px;
    }

    .main-sidebar.sidebar-collapsed .sidebar-title,
    .main-sidebar.sidebar-collapsed .sidebar-text,
    .main-sidebar.sidebar-collapsed .sidebar-version {
        display: inline;
    }

    .main-sidebar.sidebar-collapsed .sidebar-link {
        justify-content: flex-start;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .main-sidebar.sidebar-collapsed .sidebar-link > span {
        justify-content: flex-start;
    }

    .main-sidebar.sidebar-collapsed .sidebar-link svg {
        margin-right: .5rem;
    }

    .tip-mobile-nav-close {
        margin-left: auto;
        color: #cbd5e1;
        border-color: rgba(148, 163, 184, .24);
        background: rgba(148, 163, 184, .09);
    }

    .tip-sidebar-toggle,
    .tip-sidebar-guide,
    .tip-sidebar-nav > :not(.mobile-nav-primary):not(.tip-mobile-nav-label) {
        display: none !important;
    }

    .tip-mobile-nav-label {
        display: block;
        padding: 12px 16px 6px;
        color: #67e8f9;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .13em;
        text-transform: uppercase;
    }

    .tip-sidebar .mobile-nav-primary {
        min-height: 48px;
        display: flex !important;
        align-items: center;
        font-size: 15px;
    }

    .tip-sidebar-footer {
        padding: 12px 16px !important;
    }

    /* Test archive: filters become a drawer and rows become touch cards. */
    .tip-test-runs-workbench {
        position: relative;
        display: block !important;
        height: auto !important;
        min-height: calc(100dvh - 80px);
        overflow: visible;
        border-radius: 12px;
    }

    .tip-test-runs-workbench .tip-workbench-content {
        min-width: 0;
        min-height: calc(100dvh - 80px);
        overflow: visible !important;
    }

    .tip-test-runs-workbench .tip-workbench-toolbar {
        position: sticky;
        z-index: 20;
        top: calc(56px + env(safe-area-inset-top));
        padding: 10px !important;
        border-radius: 12px 12px 0 0;
    }

    .tip-test-run-toolbar-row {
        align-items: stretch !important;
        flex-direction: column;
        gap: 10px;
    }

    .tip-test-run-toolbar-title {
        min-width: 0;
    }

    .tip-test-run-toolbar-title h1 {
        min-width: 0;
        overflow: hidden;
        font-size: 16px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tip-mobile-filter-toggle {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        gap: 7px;
        padding: 0 12px;
        border: 1px solid var(--tip-accent-border);
        border-radius: 10px;
        color: var(--tip-accent);
        background: var(--tip-accent-soft);
        font-size: 12px;
        font-weight: 800;
    }

    .tip-mobile-filter-toggle svg {
        width: 18px;
        height: 18px;
    }

    .tip-test-run-toolbar-actions {
        width: 100%;
        align-items: stretch !important;
        flex-wrap: wrap;
    }

    .tip-test-run-toolbar-actions > button {
        min-height: 44px;
    }

    .tip-test-run-export,
    .tip-test-run-refresh {
        flex: 1 1 132px;
    }

    .tip-test-runs-workbench .tip-workbench-body {
        overflow: visible !important;
        padding: 10px !important;
    }

    .tip-test-runs-workbench .tip-filter-rack {
        position: fixed;
        z-index: 110;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(360px, calc(100vw - 32px)) !important;
        min-width: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        visibility: hidden;
        transform: translateX(-104%);
        transition: transform .2s ease, visibility 0s linear .2s;
        box-shadow: 24px 0 60px rgba(2, 6, 23, .3);
    }

    .tip-test-runs-workbench.mobile-filter-open .tip-filter-rack {
        visibility: visible;
        transform: translateX(0);
        transition-delay: 0s;
    }

    .tip-test-runs-workbench.mobile-filter-open {
        z-index: 80;
    }

    .tip-mobile-filter-scrim {
        position: fixed;
        z-index: 100;
        inset: 0;
        display: block;
        padding: 0;
        border: 0;
        opacity: 0;
        pointer-events: none;
        background: rgba(2, 6, 23, .58);
        transition: opacity .18s ease;
    }

    .tip-test-runs-workbench.mobile-filter-open .tip-mobile-filter-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    .tip-filter-rack-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .tip-mobile-filter-close {
        color: var(--tip-text-secondary);
        border-color: var(--tip-border);
        background: var(--tip-surface-muted);
    }

    .tip-filter-rack .accordion-section > button,
    .tip-filter-apply button,
    .tip-filter-recall button {
        min-height: 44px;
    }

    .tip-data-toolbar,
    .tip-test-runs-workbench .tip-data-ledger {
        display: none;
    }

    .tip-test-run-mobile-list {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .tip-test-run-mobile-card {
        position: relative;
        min-width: 0;
        padding: 13px;
        border: 1px solid var(--tip-border);
        border-radius: 13px;
        color: var(--tip-text-primary);
        background: var(--tip-surface);
        box-shadow: var(--tip-shadow-sm);
    }

    .tip-test-run-mobile-card::before {
        content: "";
        position: absolute;
        top: 13px;
        bottom: 13px;
        left: 0;
        width: 3px;
        border-radius: 0 999px 999px 0;
        background: var(--tip-border-strong);
    }

    .tip-test-run-mobile-card.is-selected {
        border-color: var(--tip-accent-border);
        box-shadow: 0 0 0 2px var(--tip-accent-soft), var(--tip-shadow-sm);
    }

    .tip-test-run-mobile-card.is-selected::before {
        background: var(--tip-accent);
    }

    .tip-test-run-mobile-card-head,
    .tip-test-run-mobile-select,
    .tip-test-run-mobile-meta,
    .tip-test-run-mobile-actions {
        display: flex;
        align-items: center;
    }

    .tip-test-run-mobile-card-head {
        justify-content: space-between;
        gap: 10px;
    }

    .tip-test-run-mobile-select {
        min-height: 32px;
        gap: 8px;
        color: var(--tip-text-muted);
        font-family: var(--tip-font-utility);
        font-size: 12px;
        font-weight: 700;
    }

    .tip-test-run-mobile-status,
    .tip-test-run-mobile-meta > span {
        padding: 4px 8px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
    }

    .tip-test-run-mobile-title {
        display: block;
        margin: 9px 0 10px;
        overflow-wrap: anywhere;
        color: var(--tip-text-primary);
        font-size: 15px;
        font-weight: 800;
        line-height: 1.3;
        text-decoration: none;
    }

    .tip-test-run-mobile-primary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        padding: 10px;
        border-radius: 10px;
        background: var(--tip-surface-subtle);
    }

    .tip-test-run-mobile-primary div {
        min-width: 0;
    }

    .tip-test-run-mobile-primary span,
    .tip-test-run-mobile-details dt {
        display: block;
        margin-bottom: 2px;
        color: var(--tip-text-muted);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .tip-test-run-mobile-primary strong {
        display: block;
        overflow: hidden;
        color: var(--tip-text-primary);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tip-test-run-mobile-meta {
        min-height: 36px;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 8px;
    }

    .tip-test-run-mobile-meta > span:first-child {
        color: var(--tip-text-secondary);
        background: var(--tip-surface-muted);
    }

    .tip-test-run-mobile-details {
        margin-top: 4px;
        border-top: 1px solid var(--tip-border);
    }

    .tip-test-run-mobile-details summary {
        min-height: 42px;
        display: flex;
        align-items: center;
        color: var(--tip-text-secondary);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

    .tip-test-run-mobile-details dl {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px 12px;
        padding: 0 0 10px;
    }

    .tip-test-run-mobile-details dd {
        overflow-wrap: anywhere;
        color: var(--tip-text-secondary);
        font-size: 12px;
    }

    .tip-test-run-mobile-actions {
        justify-content: flex-end;
        gap: 7px;
        padding-top: 9px;
        border-top: 1px solid var(--tip-border);
    }

    .tip-test-run-mobile-actions a,
    .tip-test-run-mobile-actions button {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        border: 1px solid var(--tip-border);
        border-radius: 9px;
        font-size: 11px;
        font-weight: 800;
        text-decoration: none;
    }

    .tip-test-run-mobile-open {
        margin-right: auto;
        color: #ffffff;
        border-color: var(--tip-accent) !important;
        background: var(--tip-accent);
    }

    .tip-test-run-mobile-edit {
        color: var(--tip-ok);
        background: var(--tip-surface);
    }

    .tip-test-run-mobile-delete {
        color: var(--tip-danger);
        background: var(--tip-surface);
    }

    .tip-pagination {
        padding: 12px !important;
    }

    .tip-pagination-layout,
    .tip-pagination > div {
        align-items: stretch !important;
        flex-direction: column;
        gap: 10px;
    }

    .tip-pagination-controls,
    .tip-pagination > div > [role="group"] {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px !important;
    }

    .tip-pagination-controls > *,
    .tip-pagination > div > [role="group"] > * {
        min-width: 0;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .tip-pagination-controls .tip-pagination-current,
    .tip-pagination > div > [role="group"] .tip-pagination-current {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* Test detail: the high-density identity strip and tabs remain readable;
       channel selection moves into a drawer while the chart keeps the viewport. */
    .tip-test-run-header {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 10px;
        padding: 12px !important;
        scroll-margin-top: calc(64px + env(safe-area-inset-top));
    }

    .tip-test-run-header-identity {
        width: 100%;
        min-width: 0;
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: 6px !important;
    }

    .tip-test-run-header-identity h1 {
        width: 100%;
        font-size: 17px !important;
    }

    .tip-test-run-header-identity > span {
        max-width: 100% !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tip-test-run-header-identity > .tip-test-run-name {
        width: 100%;
        overflow: visible;
        color: var(--tip-text-primary);
        font-weight: 700;
        line-height: 1.35;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
    }

    .tip-test-run-header-identity > .tip-test-run-date {
        color: var(--tip-text-secondary);
        font-variant-numeric: tabular-nums;
    }

    .tip-test-run-header-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
        gap: 8px !important;
    }

    .tip-test-run-header-actions > :is(a, button) {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding-right: 10px !important;
        padding-left: 10px !important;
        font-weight: 700;
        white-space: nowrap;
    }

    .tip-mobile-action-label {
        display: inline;
    }

    .tip-test-detail-tabs {
        display: grid !important;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px !important;
        padding: 8px !important;
        overflow: visible;
    }

    .tip-test-detail-mobile-tab-picker {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        color: var(--tip-text-secondary);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .tip-test-detail-mobile-tab-picker select {
        width: 100%;
        min-height: 44px;
        padding: 0 36px 0 12px;
        border: 1px solid var(--tip-accent-border);
        border-radius: 10px;
        color: var(--tip-text-primary);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: normal;
        text-transform: none;
        background: var(--tip-surface);
    }

    .tip-test-detail-tabs > .tip-test-detail-tab-button {
        display: none;
    }

    .tip-test-detail-tabs > .tip-metrics-calculation-status {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 0 !important;
    }

    .tip-metrics-calculation-status button {
        min-height: 42px;
    }

    .tip-test-summary-tab,
    .tip-test-phases-tab {
        padding: 12px !important;
    }

    .tip-test-summary-header,
    .tip-test-phases-header,
    .tip-ypt-summary-header {
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: 10px;
    }

    .tip-test-summary-header > button,
    .tip-ypt-summary-header > button {
        min-height: 42px;
    }

    .tip-test-summary-tab .grid {
        gap: 10px !important;
    }

    .tip-test-summary-tab .text-xl {
        font-size: 1rem !important;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .tip-test-phases-controls {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 6px 14px !important;
    }

    .tip-test-phases-controls label {
        min-height: 42px;
    }

    .tip-ypt-summary-header > div {
        min-width: 0;
        flex-wrap: wrap;
    }

    .tip-ypt-table-wrap {
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .tip-ypt-table-wrap table {
        min-width: 620px;
    }

    .tip-test-detail-graph {
        padding: 0 !important;
    }

    .tip-mobile-channel-toggle {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 13px;
        border: 1px solid var(--tip-accent-border);
        border-radius: 10px;
        color: var(--tip-accent);
        background: var(--tip-accent-soft);
        font-size: 12px;
        font-weight: 800;
    }

    .tip-mobile-channel-toggle svg {
        width: 19px;
        height: 19px;
    }

    .tip-test-detail-chart-layout {
        position: relative;
        display: block !important;
        height: max(560px, calc(100dvh - 118px)) !important;
        min-height: 560px;
    }

    .tip-test-detail-chart-layout > .tip-test-run-chart {
        width: 100%;
        height: 100%;
        min-width: 0;
    }

    .tip-test-run-chart-panel {
        padding: 9px !important;
        overflow-x: visible !important;
    }

    .tip-test-run-chart-toolbar {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 8px;
    }

    .tip-test-run-chart-toolbar > :last-child {
        width: 100%;
        min-height: 42px;
        overflow-x: auto;
        justify-content: flex-start;
    }

    /* Multiple independent value axes must not consume the whole phone width.
       Keep a readable plotting canvas and expose it through a native horizontal
       viewport. ECharts still receives and renders every source point. */
    .tip-test-run-chart-viewport {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
    }

    .tip-test-run-chart-canvas {
        width: max(100%, 760px);
        min-width: 760px;
    }

    .tip-test-run-chart-canvas #channelChart {
        touch-action: pan-x pan-y;
    }

    .tip-test-run-chart-pan-hint {
        position: absolute;
        z-index: 4;
        right: auto;
        bottom: 54px;
        left: 10px;
        display: block;
        max-width: 250px;
        padding: 6px 9px;
        border: 1px solid rgba(14, 116, 144, .24);
        border-radius: 999px;
        color: #155e75;
        pointer-events: none;
        font-size: 11px;
        font-weight: 700;
        background: rgba(236, 254, 255, .92);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
    }

    /* Fallback containment for the floating assistant launcher. Its scoped
       stylesheet remains authoritative; these guards prevent an unbounded SVG
       if a stale local build temporarily misses the scoped CSS asset. */
    .tip-ai-root:not(.is-workspace) {
        display: none !important;
        position: fixed !important;
        z-index: 120 !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        left: auto !important;
    }

    .tip-ai-root:not(.is-workspace) .tip-ai-launcher {
        display: grid;
        width: 48px;
        height: 48px;
        padding: 7px !important;
        place-items: center;
        overflow: hidden;
        border-radius: 14px;
    }

    .tip-ai-root:not(.is-workspace) .tip-ai-launcher-icon,
    .tip-ai-root:not(.is-workspace) .tip-ai-launcher-icon svg {
        width: 26px;
        height: 26px;
    }

    .tip-ai-root:not(.is-workspace) .tip-ai-launcher-label {
        display: none;
    }

    .tip-test-detail-chart-layout .test-detail-sidebar,
    .tip-test-detail-chart-layout .test-detail-sidebar.sidebar-collapsed {
        position: fixed;
        z-index: 110;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(360px, calc(100vw - 32px));
        height: 100vh;
        height: 100dvh;
        max-height: none !important;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        visibility: hidden;
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-104%);
        transition: transform .2s ease, visibility 0s linear .2s;
        background: var(--tip-canvas);
        box-shadow: 24px 0 60px rgba(2, 6, 23, .3);
    }

    .tip-screen-test-detail.mobile-channels-open .test-detail-sidebar {
        visibility: visible;
        transform: translateX(0);
        transition-delay: 0s;
    }

    .tip-screen-test-detail.mobile-channels-open,
    .tip-screen-test-comparison.mobile-channels-open {
        position: relative;
        z-index: 80;
    }

    .tip-test-detail-chart-layout .test-detail-sidebar > [data-sidebar-toggle] {
        display: none;
    }

    .tip-test-detail-chart-layout .test-detail-sidebar .sidebar-content,
    .tip-test-detail-chart-layout .test-detail-sidebar.sidebar-collapsed .sidebar-content {
        min-height: 0;
        opacity: 1;
        pointer-events: auto;
    }

    .tip-test-detail-chart-layout .test-detail-sidebar .sidebar-content > div {
        width: 100% !important;
    }

    .tip-mobile-channel-close {
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        padding: 0 14px;
        border: 0;
        border-bottom: 1px solid var(--tip-border);
        color: var(--tip-text-primary);
        background: var(--tip-surface);
        font-size: 13px;
        font-weight: 800;
    }

    .tip-mobile-channel-close svg {
        width: 21px;
        height: 21px;
    }

    .tip-channel-stat-grid,
    .test-detail-sidebar .grid.grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px 10px !important;
    }

    .tip-channel-stat-grid > div,
    .test-detail-sidebar .grid.grid-cols-4 > div {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .tip-mobile-channel-scrim {
        position: fixed;
        z-index: 100;
        inset: 0;
        display: block;
        padding: 0;
        border: 0;
        opacity: 0;
        pointer-events: none;
        background: rgba(2, 6, 23, .58);
        transition: opacity .18s ease;
    }

    .tip-screen-test-detail.mobile-channels-open .tip-mobile-channel-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    /* Comparison keeps every selected series on the chart. Only its navigation
       density changes: test/channel selection becomes an immediate JS drawer. */
    .tip-comparison-header {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 10px;
    }

    .tip-comparison-title {
        width: 100%;
        min-width: 0;
    }

    .tip-comparison-title h1 {
        min-width: 0;
        font-size: 18px !important;
        line-height: 1.3;
    }

    .tip-comparison-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .tip-comparison-actions > :is(a, button, span) {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tip-comparison-summary-track {
        scroll-snap-type: inline proximity;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .tip-comparison-summary-card {
        width: min(82vw, 288px) !important;
        scroll-snap-align: start;
    }

    .tip-comparison-tabs {
        min-height: 50px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        -webkit-overflow-scrolling: touch;
    }

    .tip-comparison-tabs > button {
        min-height: 42px;
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .tip-comparison-chart-layout {
        position: relative;
        display: block !important;
    }

    .tip-comparison-chart-column {
        width: 100%;
    }

    .tip-comparison-chart-panel {
        width: 100%;
        height: max(560px, calc(100dvh - 120px)) !important;
        min-height: 560px;
        padding: 9px !important;
    }

    .tip-comparison-chart-layout .test-detail-sidebar,
    .tip-comparison-chart-layout .test-detail-sidebar.sidebar-collapsed {
        position: fixed;
        z-index: 110;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(360px, calc(100vw - 32px));
        height: 100vh;
        height: 100dvh;
        max-height: none !important;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        visibility: hidden;
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-104%);
        transition: transform .2s ease, visibility 0s linear .2s;
        background: var(--tip-canvas);
        box-shadow: 24px 0 60px rgba(2, 6, 23, .3);
    }

    .tip-screen-test-comparison.mobile-channels-open .test-detail-sidebar {
        visibility: visible;
        transform: translateX(0);
        transition-delay: 0s;
    }

    .tip-comparison-chart-layout .test-detail-sidebar > [data-sidebar-toggle] {
        display: none;
    }

    .tip-comparison-chart-layout .test-detail-sidebar .sidebar-content,
    .tip-comparison-chart-layout .test-detail-sidebar.sidebar-collapsed .sidebar-content {
        min-height: 0;
        opacity: 1;
        pointer-events: auto;
    }

    .tip-comparison-chart-layout .test-detail-sidebar .sidebar-content > div {
        width: 100% !important;
    }

    .tip-screen-test-comparison.mobile-channels-open .tip-mobile-channel-scrim {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 420px) {
    .tip-topbar-title {
        max-width: 34vw;
    }

    .tip-test-run-mobile-primary,
    .tip-test-run-mobile-details dl {
        grid-template-columns: 1fr;
    }

    .tip-test-run-mobile-actions {
        flex-wrap: wrap;
    }

    .tip-test-run-mobile-actions a,
    .tip-test-run-mobile-actions button {
        flex: 1 1 30%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-sidebar,
    .tip-mobile-nav-scrim,
    .tip-filter-rack,
    .tip-mobile-filter-scrim,
    .test-detail-sidebar,
    .tip-mobile-channel-scrim,
    .tip-reconnect-signal span {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}