/* =============================================
   RESPONSIVE.CSS — Mobile & Tablet Breakpoints
   ============================================= */

/* ---------- Tablets (< 1024px) ---------- */
@media screen and (max-width: 1024px) {
  .app-container {
    flex-direction: column;
  }
  
  .input-panel {
    width: 100%;
    min-width: unset;
    max-height: none;
    position: relative;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 20px 16px;
  }
  
  .output-panel {
    min-height: auto;
    padding: 20px;
  }
  
  .editor-window {
    max-width: 100%;
  }
  
  .editor-body {
    max-height: 50vh;
  }
}

/* ---------- Mobile (< 640px) ---------- */
@media screen and (max-width: 640px) {
  .input-panel {
    padding: 16px 12px;
    gap: 14px;
  }
  
  .settings-row {
    flex-direction: column;
    gap: 14px;
  }
  
  .control-buttons {
    flex-direction: column;
  }
  
  .btn {
    min-width: unset;
    padding: 12px 16px;
  }
  
  .output-panel {
    padding: 12px;
  }
  
  .editor-window {
    border-radius: var(--radius);
  }
  
  .editor-titlebar {
    height: 34px;
    padding: 0 10px;
  }
  
  .editor-tabs {
    height: 32px;
  }
  
  .tab {
    padding: 0 12px;
    font-size: 12px;
  }
  
  .line-number {
    width: 36px;
    min-width: 36px;
    padding-right: 10px;
    font-size: 11px;
  }
  
  .line-content {
    font-size: 12px;
  }
  
  .logo-text {
    font-size: 18px;
  }
  
  .input-group textarea {
    min-height: 150px;
    font-size: 12px;
  }
  
  /* Fullscreen adjustments */
  .app-container.fullscreen .editor-body {
    height: calc(100vh - 78px) !important;
  }
  
  .app-container.fullscreen .line-content {
    font-size: 12px;
  }
  
  .app-container.fullscreen .line-number {
    width: 32px;
    min-width: 32px;
    font-size: 10px;
    padding-right: 8px;
  }
}

/* ---------- Very small screens (< 380px) ---------- */
@media screen and (max-width: 380px) {
  .line-number {
    width: 28px;
    min-width: 28px;
    padding-right: 6px;
    font-size: 10px;
  }
  
  .line-content {
    font-size: 11px;
  }
  
  .editor-titlebar {
    height: 30px;
  }
  
  .dot {
    width: 10px;
    height: 10px;
  }
  
  .window-actions {
    display: none;
  }
}

/* ---------- Landscape Mobile ---------- */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .app-container:not(.fullscreen) {
    flex-direction: row;
  }
  
  .app-container:not(.fullscreen) .input-panel {
    width: 320px;
    min-width: 280px;
    max-height: 100vh;
    border-right: 1px solid var(--border-color);
    border-bottom: none;
    overflow-y: auto;
  }
  
  .editor-body {
    max-height: 60vh;
  }
}