/* send_file_tcp.php — purpose-built phone layout */
@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        min-height: 100%;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        display: block !important;
        padding: 0 !important;
        background: #f5f3ff;
    }

    .container {
        width: 100% !important;
        max-width: none !important;
        min-height: 100dvh !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10px 10px calc(24px + env(safe-area-inset-bottom)) !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .header-bar {
        position: sticky !important;
        top: 0;
        z-index: 100;
        width: calc(100% + 20px);
        min-height: 0 !important;
        margin: -10px -10px 10px !important;
        padding: 10px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(14px);
        box-shadow: 0 4px 16px rgba(44, 44, 42, .09);
    }

    .header-bar > div {
        max-width: 100%;
    }

    .header-bar h1 {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    .header-bar .subtitle {
        font-size: 12px !important;
        line-height: 1.5;
    }

    .header-bar > div:last-child,
    .header-bar [style*="display: flex"],
    .header-bar [style*="display:flex"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .header-bar > div:last-child::-webkit-scrollbar {
        display: none;
    }

    .header-bar button,
    .header-bar a {
        flex: 0 0 auto;
        min-height: 40px !important;
        margin-left: 0 !important;
        padding: 8px 11px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    .main-layout {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        overflow: visible !important;
    }

    .main-left,
    .main-right,
    .main-third {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .main-left {
        order: 1;
    }

    .main-right {
        order: 2;
    }

    .main-third {
        order: 3;
    }

    .main-left #sendForm {
        order: -1;
        width: 100%;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .main-left .board-panel {
        order: 2;
    }

    .experiment-group {
        width: 100%;
        margin: 0 0 12px !important;
        padding: 12px !important;
        border: 1px solid #dedbf5 !important;
        border-radius: 14px !important;
        background: #fff;
    }

    .experiment-group > label:first-child {
        display: block;
        margin-bottom: 9px;
        font-size: 14px;
        color: #2c2c2a;
    }

    .experiment-options {
        width: 100%;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .experiment-options > div,
    .experiment-options > label {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px;
        display: flex !important;
        align-items: center !important;
        gap: 5px;
        padding: 0 !important;
    }

    .experiment-item {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px;
        padding: 10px !important;
        display: flex !important;
        align-items: center;
        gap: 9px;
        white-space: normal !important;
        line-height: 1.4;
        font-size: 13px !important;
        touch-action: manipulation;
    }

    .experiment-item input[type="radio"] {
        display: block !important;
        width: 21px !important;
        height: 21px !important;
        flex: 0 0 21px;
        margin: 0 !important;
    }

    .experiment-options a {
        flex: 0 0 38px;
        width: 38px;
        min-height: 42px;
        margin-left: 0 !important;
        display: inline-grid;
        place-items: center;
    }

    .form-group {
        width: 100%;
        margin: 0 !important;
        padding: 12px !important;
        background: #fff;
        border: 1px solid #dedbf5;
        border-radius: 14px;
    }

    .file-actions-row {
        width: 100%;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
        align-items: stretch !important;
    }

    .file-input-wrapper,
    .file-button,
    .btn-circuit,
    .btn-submit {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .file-button {
        min-height: 58px !important;
        height: auto !important;
        padding: 13px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.4;
        touch-action: manipulation;
    }

    .btn-circuit,
    .btn-submit {
        min-height: 50px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
    }

    .btn-submit {
        position: sticky;
        bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 80;
        box-shadow: 0 9px 24px rgba(83, 74, 183, .28) !important;
    }

    .status-msg {
        width: 100%;
        font-size: 14px !important;
        line-height: 1.5 !important;
        overflow-wrap: anywhere;
    }

    .file-info {
        overflow-wrap: anywhere;
    }

    #exampleFileModal > div {
        width: calc(100vw - 28px) !important;
        max-height: calc(100dvh - 28px) !important;
    }

    .board-panel,
    .na-info-panel,
    .ai-report-panel,
    .chat-panel,
    .learning-analysis-panel {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 12px !important;
        overflow: hidden !important;
        transform: none !important;
        border-width: 1px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .board-grid {
        width: 100%;
        min-width: 0;
        padding: 4px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: hidden;
    }

    .board-left,
    .board-right,
    .board-bottom-left,
    .board-bottom-right {
        width: 100%;
        min-width: 0;
    }

    .board-right {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .board-components {
        display: none !important;
    }

    .led-row,
    .na-grid,
    .debug-btns {
        max-width: 100%;
        justify-content: flex-start !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        padding-bottom: 8px;
    }

    .led,
    .na-item,
    .debug-btn {
        flex: 0 0 auto;
    }

    .keypad-grid {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .na-info-header,
    .ai-report-actions,
    .learning-analysis-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .na-info-body,
    .ai-report-body,
    .chat-messages,
    .learning-analysis-content {
        width: 100%;
        min-height: 140px !important;
        max-height: 48vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .chat-input-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .chat-input {
        width: 100% !important;
        min-height: 92px !important;
        font-size: 16px !important;
    }

    .chat-send-btn,
    .ai-report-btn,
    .learning-analysis-btn,
    #generateLearningBtn,
    #exportLearningBtn,
    #downloadTextPdfBtn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        margin: 0 !important;
    }

    .dh-float-stack {
        right: -46px !important;
        bottom: 66px !important;
        transform: scale(.6);
        transform-origin: right bottom;
    }
}

@media (max-width: 430px) {
    .experiment-group,
    .form-group,
    .board-panel,
    .na-info-panel,
    .ai-report-panel,
    .chat-panel,
    .learning-analysis-panel {
        padding: 10px !important;
    }
}