:root {
    --responsive-gutter: clamp(12px, 4vw, 24px);
    --touch-target: 44px;
    --shell-sidebar-width: 260px;
}

html {
    min-inline-size: 0;
    scroll-behavior: smooth;
}

body {
    min-inline-size: 0;
    overflow-x: clip;
    overflow-wrap: anywhere;
}

img,
svg,
canvas,
video {
    max-inline-size: 100%;
    block-size: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    max-inline-size: 100%;
}

:is(button, input, select, textarea, a, [role="button"], [role="menuitem"]):focus-visible {
    outline: 2px solid var(--accent-color, #58a6ff);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    .layout {
        display: block;
        min-block-size: 100dvh;
        block-size: auto;
    }

    .sidebar,
    .sidebar.collapsed {
        position: sticky;
        inset-block-start: 0;
        z-index: 90;
        width: 100% !important;
        inline-size: 100%;
        height: auto !important;
        block-size: auto;
        max-block-size: none;
        overflow-x: auto;
        overflow-y: hidden;
        border-inline-end: 0;
        border-block-end: 1px solid var(--border-color, #30363d);
    }

    .sidebar .logo,
    .sidebar.collapsed .logo {
        justify-content: space-between;
        padding: 12px var(--responsive-gutter);
        font-size: 16px;
    }

    .sidebar.collapsed .logo > span:first-child {
        display: inline;
    }

    .nav-items {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        min-inline-size: max-content;
        padding: 6px var(--responsive-gutter);
        scroll-snap-type: inline proximity;
    }

    .nav-items li,
    .sidebar.collapsed .nav-items li {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-block-size: var(--touch-target);
        padding: 10px 12px;
        border-inline-start: 0;
        border-radius: 6px;
        font-size: 14px;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .sidebar.collapsed .nav-items .icon,
    .nav-items .icon {
        inline-size: 20px;
        font-size: inherit;
    }

    .nav-items li.active {
        padding-inline-start: 12px;
        border-inline-start: 0;
        border-block-end: 2px solid var(--accent-color, #58a6ff);
    }

    #sidebar-resize-handle {
        display: none;
    }

    body.sidebar-collapsed .content,
    .content {
        margin-left: 0 !important;
        margin-inline-start: 0;
        min-inline-size: 0;
        overflow: visible;
        padding: var(--responsive-gutter);
    }

    body.density-compact .page,
    body.density-comfortable .page {
        padding: 0 !important;
    }

    .page,
    .card,
    .provider-card,
    .detail-section,
    .chat-main,
    .archive-master,
    .archive-detail {
        min-inline-size: 0;
        overflow-wrap: anywhere;
    }

    h1 {
        font-size: clamp(1.5rem, 6vw, 1.75rem);
        line-height: 1.25;
        text-wrap: balance;
    }

    h2 {
        font-size: clamp(1.25rem, 5vw, 1.375rem);
        line-height: 1.35;
        text-wrap: balance;
    }

    .subtitle {
        margin-block-end: 20px;
    }

    .card,
    .provider-card,
    .playground-input,
    .playground-output {
        padding: 16px;
    }

    .grid,
    .provider-checkboxes,
    .compare-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)) !important;
        gap: 16px;
    }

    .playground-container,
    .providers-grid,
    .compare-grid,
    .content-layout-col,
    .archive-bottom,
    #archive-content-layout.content-layout-col,
    .cheatsheet-container,
    .form-row {
        grid-template-columns: 1fr !important;
    }

    .content-layout-col > .resize-handle-vert,
    .archive-bottom > .resize-handle-vert,
    .resize-handle-vert {
        display: none !important;
    }

    .chat-layout {
        grid-template-columns: 1fr;
        block-size: auto;
        min-block-size: 0;
        margin: 0;
    }

    .chat-sessions-panel,
    .chat-settings-panel {
        max-block-size: 22rem;
    }

    .chat-main {
        min-block-size: min(70dvh, 42rem);
    }

    .chat-header,
    .chat-input-row,
    .archive-filters,
    .archive-search-row,
    .archive-pagination,
    .table-filter,
    .form-row,
    .modal-header,
    .modal-footer {
        flex-wrap: wrap;
        min-inline-size: 0;
    }

    button,
    .btn,
    input[type="button"],
    input[type="submit"],
    [role="button"] {
        min-inline-size: var(--touch-target);
        min-block-size: var(--touch-target);
    }

    .custom-header a {
        display: inline-flex;
        align-items: center;
        min-block-size: var(--touch-target);
    }

    #realtime .rt-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #realtime .rt-title,
    #realtime .rt-panel-head,
    #realtime .rt-portno {
        white-space: normal;
    }

    #realtime .rt-controls {
        flex-wrap: wrap;
        overflow: visible;
        padding: 14px;
    }

    #realtime .rt-field {
        flex: 1 1 min(100%, 12rem);
        min-inline-size: 0;
    }

    #realtime .rt-field select {
        min-inline-size: 0;
        inline-size: 100%;
    }

    #realtime .rt-portno {
        flex-basis: 100%;
        margin-inline-start: 0;
    }

    #realtime .rt-grid {
        grid-template-columns: 1fr;
    }

    #realtime .rt-panel {
        min-block-size: min(26rem, 68dvh);
    }

    #providers .unified-search-heading,
    #providers .unified-search-query,
    #providers .unified-search-providers,
    #providers .unified-search-highlights {
        flex-wrap: wrap !important;
    }

    #providers .unified-search-providers,
    #providers .unified-search-highlights {
        gap: 10px !important;
    }

    #providers .unified-search-heading span,
    #providers .unified-search-highlights span,
    #providers .unified-search-providers label {
        white-space: normal !important;
    }

    #providers #unified-search-count {
        flex-basis: 100%;
        margin-inline-start: 0 !important;
    }

    #specs .specs-layout {
        grid-template-columns: 1fr !important;
    }

    #specs .specs-filter-card {
        position: static !important;
    }

    .card,
    .modal-body,
    .modal-content {
        overflow-x: auto;
    }

    .model-table,
    .data-table,
    .api-keys-table,
    .usage-history-table,
    .options-table,
    .search-result-table {
        min-inline-size: max-content;
    }

    .modal-content {
        inline-size: calc(100% - 24px);
        max-inline-size: 56rem;
        max-block-size: calc(100dvh - 24px);
        margin: 12px;
        overflow-y: auto;
    }

    .toast {
        inset-inline: 12px;
        inset-block-start: 12px;
        max-inline-size: none;
    }

    .custom-header,
    .quick-links {
        flex-wrap: wrap;
        gap: 10px;
        padding-inline: var(--responsive-gutter);
    }

    .custom-header .links {
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    .swagger-ui {
        padding: var(--responsive-gutter);
    }

    #top-bar {
        flex-wrap: wrap;
        gap: 8px;
        white-space: normal;
    }

    #top-bar .meta {
        flex: 1 1 12rem;
        min-inline-size: 0;
    }

    #top-bar .actions {
        flex-wrap: wrap;
    }

    .content,
    .container {
        padding-inline: var(--responsive-gutter);
    }

    #post-header h1 {
        font-size: clamp(1.25rem, 6vw, 1.5rem);
        overflow-wrap: anywhere;
    }

    .comment.depth-1 { padding-inline-start: 12px; }
    .comment.depth-2 { padding-inline-start: 20px; }
    .comment.depth-3 { padding-inline-start: 28px; }
    .comment.depth-4 { padding-inline-start: 36px; }
    .comment.depth-5 { padding-inline-start: 44px; }

    #stats-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }

    .stat-card {
        min-inline-size: 0;
    }

    #input-row {
        flex-wrap: wrap;
        white-space: normal;
    }
}

@media (max-width: 540px) {
    .content,
    .container {
        padding-inline: 12px;
    }

    .card,
    .provider-card,
    .playground-input,
    .playground-output,
    .login-container,
    #url-form {
        padding: 14px;
    }

    .grid,
    .provider-checkboxes,
    .compare-grid {
        grid-template-columns: 1fr !important;
    }

    .chat-header,
    .chat-input-row,
    .archive-search-row,
    .table-filter,
    .form-row,
    .modal-footer,
    #input-row {
        align-items: stretch;
        flex-direction: column;
    }

    :is(.btn, button, input[type="submit"], input[type="button"]) {
        min-block-size: var(--touch-target);
    }

    .table-filter input,
    .archive-search-row input,
    #input-url {
        inline-size: 100%;
    }

    #btn-submit {
        inline-size: 100%;
    }

    .login-container {
        margin: 12px;
    }

    .login-header h1 {
        font-size: 22px;
    }

    .custom-header h1 {
        font-size: 18px;
    }

    .swagger-ui .opblock .opblock-summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #top-bar .actions {
        inline-size: 100%;
    }

    #top-bar .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    #footer-info {
        text-align: start;
        overflow-wrap: anywhere;
    }

    .history-item {
        align-items: flex-start;
        gap: 8px;
    }

    .history-item .meta-text {
        font-size: 10px;
    }
}