/* ========================================
   Responsive Design - Comprehensive Mobile & Tablet
   Breakpoints: 1100 / 900 / 768 / 600 / 480 / 400
   Loaded last to override component styles
======================================== */

/* ----------------------------------------
   Large Tablets / Small Desktops (≤1100px)
---------------------------------------- */
@media (max-width: 1100px) {
    .chat-section {
        width: 320px;
    }
}

/* ----------------------------------------
   Tablets (≤900px)
---------------------------------------- */
@media (max-width: 900px) {
    .header {
        flex-wrap: nowrap;
        height: auto;
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .main-content {
        flex-direction: column;
    }

    .chat-section {
        width: 100%;
        height: 280px;
    }

    .chat-section::before {
        display: none;
    }

    .wb-toolbar {
        height: auto;
        padding: var(--space-2) var(--space-3);
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .wb-toolbar-center {
        position: static;
        transform: none;
    }

    .wb-bottom-bar {
        flex-wrap: wrap;
        height: auto;
        padding: var(--space-3);
        gap: var(--space-2);
    }

    .topic-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .flashcard {
        height: 200px;
    }

    .user-name {
        display: none;
    }

    .home-message-content {
        padding: var(--space-3) var(--space-4);
    }

    .photo-chat-minimal {
        padding: var(--space-3) var(--space-4);
    }

    .photo-chat-welcome-minimal {
        padding: var(--space-5);
    }

    .photo-chat-welcome-minimal h2 {
        font-size: 1.5rem;
    }

    .photo-chat-message .message-body {
        max-width: 85%;
    }
}

/* ----------------------------------------
   Small Tablets (≤768px)
---------------------------------------- */
@media (max-width: 768px) {
    .back-to-landing span {
        display: none;
    }

    .back-to-landing {
        padding: var(--space-2);
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }
}

/* ----------------------------------------
   Large Phones (≤600px)
---------------------------------------- */
@media (max-width: 600px) {
    .header {
        padding: var(--space-2) var(--space-3);
        min-height: 56px;
    }

    .header::after {
        display: none;
    }

    .theme-toggle,
    .history-toggle-btn {
        width: 44px;
        height: 44px;
    }

    .main-content {
        padding: 0;
    }

    .wb-canvas-container {
        margin: 0;
    }

    .wb-toolbar-divider {
        display: none;
    }

    .wb-secondary-btn span {
        display: none;
    }

    .wb-primary-btn {
        padding: var(--space-2) var(--space-4);
        font-size: 13px;
        min-height: 44px;
    }

    .wb-ghost-btn {
        padding: var(--space-2);
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }

    .wb-ghost-btn span {
        display: none;
    }

    .topic-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    .topic-btn {
        padding: var(--space-3) var(--space-2);
        min-height: 48px;
    }

    .flashcard {
        height: 180px;
    }

    .flashcard-question {
        font-size: 16px;
    }

    .home-action-btn {
        min-height: 58px;
        padding: var(--space-3);
    }

    .home-action-btn svg {
        width: 18px;
        height: 18px;
    }

    .photo-input-bar {
        border-radius: var(--radius-md);
    }

    .auth-container {
        margin: var(--space-3);
        padding: var(--space-5);
    }

    .user-menu-btn {
        padding: var(--space-1);
        min-height: 44px;
    }

    .chat-section {
        height: 320px;
    }

    .chat-header {
        padding: var(--space-3) var(--space-4);
        height: 56px;
    }

    .chat-body {
        padding: 0 var(--space-3);
    }

    .chat-input-area {
        padding: var(--space-3) 0;
    }

    #chatInput {
        padding: var(--space-3);
        font-size: 16px;
        min-height: 44px;
    }

    .send-btn {
        width: 44px;
        height: 44px;
    }

    .suggestion-chip {
        padding: var(--space-2) var(--space-3);
        font-size: 13px;
    }

    .photo-chat-minimal {
        padding: var(--space-2) var(--space-3);
    }

    .photo-chat-welcome-minimal {
        padding: var(--space-4);
    }

    .photo-chat-welcome-minimal h2 {
        font-size: 1.25rem;
    }

    .photo-chat-welcome-minimal p {
        font-size: 14px;
    }

    .photo-chat-message .message-body {
        max-width: 90%;
    }

    .photo-chat-message .message-image {
        max-width: 220px;
        max-height: 160px;
    }

    .photo-attach-btn,
    .photo-send-btn {
        width: 44px;
        height: 44px;
    }

    #photoChatInput {
        font-size: 16px;
    }

    .math-kb-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .math-kb-tab {
        padding: var(--space-1) var(--space-2);
        font-size: 9px;
    }

    .math-kb-btn {
        min-height: 38px;
    }

    .ep-lesson-suggestions {
        padding: 0 var(--space-3) var(--space-3);
    }

    .ep-lesson-suggestion-chip {
        padding: var(--space-2) var(--space-3);
    }

    .user-dropdown {
        right: -8px;
        min-width: 200px;
    }
}

/* ----------------------------------------
   Phones (≤480px)
---------------------------------------- */
@media (max-width: 480px) {
    .header {
        padding: var(--space-2);
        gap: var(--space-2);
    }

    .back-to-landing {
        padding: var(--space-2);
    }

    .theme-toggle,
    .history-toggle-btn {
        width: 44px;
        height: 44px;
    }

    .header-right {
        gap: var(--space-1);
    }

    .home-message-avatar {
        width: 32px;
        height: 32px;
    }

    .home-message-content {
        padding: var(--space-3);
        font-size: 13px;
        border-radius: var(--radius-lg);
    }

    .home-message-image {
        max-width: 220px;
    }

    .wb-toolbar {
        padding: var(--space-1) var(--space-2);
    }

    .wb-tool-btn {
        width: 36px;
        height: 36px;
    }

    .wb-bottom-bar {
        padding: var(--space-2);
    }

    .wb-primary-btn {
        padding: var(--space-2) var(--space-3);
        font-size: 12px;
    }

    .flashcard-rating {
        gap: var(--space-1);
        flex-wrap: wrap;
        justify-content: center;
    }

    .rating-btn {
        padding: var(--space-2) var(--space-3);
        min-width: 60px;
        font-size: 12px;
    }

    .flashcard-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-btn {
        padding: var(--space-2) var(--space-3);
        font-size: 13px;
    }

    .nav-kbd {
        display: none;
    }

    .flip-instruction kbd {
        display: none;
    }

    .fc-card-count {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .fc-card-count-options {
        justify-content: center;
    }

    .summary-actions {
        flex-direction: column;
    }

    .quiz-actions {
        flex-direction: column;
    }

    .quiz-submit-btn,
    .quiz-next-btn {
        width: 100%;
    }

    .quiz-option {
        padding: var(--space-3);
    }

    .quiz-score-circle {
        width: 120px;
        height: 120px;
    }

    .quiz-score-number {
        font-size: 40px;
    }

    .ep-lesson-actions {
        flex-direction: column;
    }

    .ep-lesson-more-btn,
    .ep-lesson-finish-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .ep-lesson-input-bar input {
        font-size: 16px;
        min-height: 44px;
    }

    .ep-lesson-send-btn {
        width: 44px;
        height: 44px;
    }

    .sum-source-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: var(--space-1);
    }

    .sum-source-tabs::-webkit-scrollbar {
        display: none;
    }

    .sum-source-tab {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0 var(--space-3);
        font-size: 12px;
    }

    .sum-pill {
        min-height: 40px;
        padding: 0 var(--space-3);
    }

    .sum-generate-btn {
        min-height: 52px;
        font-size: 14px;
    }

    .sum-action-btn {
        min-height: 44px;
        padding: 0 var(--space-3);
        font-size: 12px;
    }

    .sum-card {
        padding: var(--space-4);
        border-radius: 16px;
    }

    .sum-textarea {
        min-height: 200px;
        padding: var(--space-4);
        font-size: 16px;
    }

    .sum-url-input {
        font-size: 16px;
        min-height: 48px;
    }

    .sum-output-card {
        min-height: 320px;
    }

    .sum-output-placeholder,
    .sum-loading-dots {
        min-height: 200px;
        padding: var(--space-6) var(--space-4);
    }

    .math-kb-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .math-kb-btn {
        min-height: 40px;
        font-size: 14px;
    }

    .math-kb-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .chat-section {
        height: 260px;
    }

    .home-plus-dropdown {
        left: 0;
        right: 0;
        min-width: auto;
    }
}

/* ----------------------------------------
   Ultra-small screens (≤400px)
---------------------------------------- */
@media (max-width: 400px) {
    .header {
        padding: var(--space-1) var(--space-2);
    }

    .home-actions {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    .home-action-btn {
        min-height: 52px;
        padding: var(--space-2) var(--space-3);
    }

    .home-action-btn svg {
        width: 18px;
        height: 18px;
    }

    .home-action-btn span {
        font-size: 12px;
    }

    .grade-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .subject-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quiz-subject-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ep-grade-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .flashcard-question {
        font-size: 15px;
    }

    .flashcard-answer {
        font-size: 0.8rem;
    }

    .flashcard-front,
    .flashcard-back {
        padding: var(--space-4);
    }

    .rating-btn {
        min-width: 52px;
        padding: var(--space-2);
    }

    .rating-btn .rating-label {
        font-size: 10px;
    }
}

/* ----------------------------------------
   Touch-device optimizations
---------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .home-action-btn:hover,
    .wb-tool-btn:hover,
    .wb-color-btn:hover,
    .nav-btn:hover:not(:disabled),
    .rating-btn:hover,
    .suggestion-chip:hover,
    .grade-btn:hover,
    .subject-btn:hover,
    .quiz-option:hover:not(.disabled),
    .ep-plan-card:hover,
    .ep-path-node:hover,
    .ep-subject-btn:hover,
    .ep-grade-btn:hover {
        transform: none;
    }

    .home-action-btn::after {
        display: none;
    }

    .session-delete-btn {
        opacity: 1;
    }
}

/* ----------------------------------------
   Landscape phone adjustments
---------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    .home-container {
        min-height: auto;
        padding: var(--space-3) var(--space-4);
    }

    .home-welcome {
        margin-bottom: var(--space-4);
    }

    .home-welcome h1 {
        font-size: 1.5rem;
    }

    .home-hero {
        padding: var(--space-4);
    }

    .flashcard,
    .flashcard-inner,
    .flashcard-front,
    .flashcard-back {
        min-height: 200px;
    }

    .chat-section {
        height: 200px;
    }

    .auth-container {
        padding: var(--space-4);
    }

    .auth-header {
        margin-bottom: var(--space-4);
    }
}