/* ── CxAI Studio — Responsive Breakpoints (Enhanced) ── */

/* ── Tablet (≤1100px) ── */
@media (max-width: 1100px) {
    .settings-sidebar { display: none; }
    .workspace { grid-template-columns: 56px 1fr; }
}

/* ── Mobile-landscape / Small tablet (≤860px) ── */
@media (max-width: 860px) {
    .workspace { grid-template-columns: 1fr; }

    .nav-rail {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        top: auto;
        width: 100%;
        height: 54px;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        z-index: 200;
        border-right: none;
        border-top: 1px solid var(--border);
        padding: 0 4px;
    }

    /* Hide right accent line on mobile */
    .nav-rail::after { display: none; }

    .nav-logo { display: none; }
    .nav-footer { display: none; }
    .nav-items { flex-direction: row; gap: 4px; overflow-x: auto; padding: 0; }

    .nav-item {
        font-size: 1.15rem;
        padding: 8px 14px;
    }

    /* Active indicator: bottom bar instead of left bar */
    .nav-item.active::before {
        top: auto; bottom: 0;
        left: 50%; right: auto;
        width: 20px; height: 3px;
        transform: translateX(-50%);
        border-radius: 3px 3px 0 0;
    }

    .center { padding-bottom: 60px; } /* space for bottom nav */

    .settings-sidebar { display: none; }

    /* Flatten two-column panels */
    .raw-pair { grid-template-columns: 1fr; }
    .scenarios-grid { grid-template-columns: 1fr; }
    .mcp-grid { grid-template-columns: 1fr; }

    .models-grid { grid-template-columns: 1fr; }

    .top-bar { padding: 0 14px; height: 46px; }
}

/* ── Phone (≤480px) ── */
@media (max-width: 480px) {
    :root { --radius: 8px; }

    .top-bar h2 { font-size: .85rem; }

    .panel-content { padding: 12px; }

    .msg-bubble { max-width: 94%; }

    .chat-input-area {
        padding: 8px 10px;
    }

    .chat-input-area textarea {
        font-size: .82rem;
        padding: 9px 12px;
    }

    .log-entry {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .model-card { padding: 12px; }
    .mc-id { font-size: .78rem; }

    .scenario-item { padding: 9px 10px; }

    .mcp-tool-item { padding: 8px 10px; }

    .stat-card { padding: 10px; }
}

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