/* index/firmwareload.css */
#firmwareSection .fw-select, 
#firmwareSection .fw-input { 
    width: 100%; 
    padding: 12px; 
    font-size: 16px; 
    border: 1px solid var(--border-color, #ccc); 
    border-radius: 5px; 
    box-sizing: border-box; 
}
#firmwareSection .fw-select { margin-bottom: 15px; outline: none; }

#firmwareSection .info-box { background: #f8f9fa; padding: 15px; border-radius: 5px; margin-bottom: 15px; border: 1px solid var(--border-color, #e5e7eb); }
#firmwareSection .tag { display: inline-block; background: var(--primary-main, #007bff); color: white; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; }

#statusOutput { 
    height: 300px; 
    overflow-y: auto; 
    background: #1e1e1e; 
    color: #00ff00; 
    padding: 10px; 
    font-family: monospace; 
    white-space: pre-wrap; 
    word-wrap: break-word; /* ป้องกันข้อความยาวทะลุกล่อง */
    border-radius: 5px; 
    margin-bottom: 15px;
    font-size: 14px;
}

#firmwareSection .btn-connect { background: #007bff; color: white; margin-bottom: 10px; width: 100%; padding: 12px 15px; font-weight: bold; cursor: pointer; border: none; border-radius: 5px; font-size: 16px; box-sizing: border-box; transition: 0.2s; }
#firmwareSection .btn-connect.connected { background: #dc3545; }
#firmwareSection .btn-flash { background: #28a745; color: white; width: 100%; padding: 12px 15px; font-weight: bold; cursor: pointer; border: none; border-radius: 5px; font-size: 16px; box-sizing: border-box; transition: 0.2s; }
#firmwareSection .btn-send { background: #ffc107; color: black; padding: 12px 15px; font-weight: bold; cursor: pointer; border: none; border-radius: 5px; font-size: 16px; box-sizing: border-box; transition: 0.2s; }

#firmwareSection button:disabled { background: #ccc !important; cursor: not-allowed; color: #666; }

.serial-input-group { display: flex; gap: 10px; }
.serial-input-group .fw-input { flex: 1; margin-bottom: 0; }

/* Code Display Section */
.code-toggle-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    cursor: pointer; 
    user-select: none;
}
.code-display-area { 
    font-size: 14px !important; 
    border-radius: 5px !important;
}

/* Override ให้ข้อความชิดขอบพอดีเมื่อใช้ Prism */
pre[class*="language-"] {
    margin: 0 !important;
}

/* ========================================= */
/* CSS สำหรับหน้าจอมือถือ (กว้างไม่เกิน 600px) */
/* ========================================= */
@media (max-width: 600px) {
    #statusOutput { height: 250px; font-size: 12px; } /* ลดย่อขนาดกล่องข้อความลงนิดหน่อย */
    
    /* เปลี่ยนจากแนวนอนเป็นแนวตั้งให้เต็มจอ */
    .serial-input-group { flex-direction: column; }
    #firmwareSection .btn-send { width: 100%; /* ขยายปุ่ม Send ให้กว้างเต็มจอเพื่อให้กดง่าย */ }
}