/* ============================================================
   RESPONSIVE.CSS — Aturan untuk layar kecil (non-core)
   ============================================================ */
@media (max-width: 768px) {
  .execute-btn {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  #mainExecuteBtn { padding: 12px !important; font-size: 14px !important; }
  .execute-btn.secondary { padding: 6px 12px !important; font-size: 11px !important; }

  #threeCanvas {
    height: 220px !important;
  }
  .viz-footer { font-size: 8px !important; padding: 4px 8px !important; }
  .viz-header { padding: 8px 12px !important; font-size: 11px !important; }

  .chat-messages {
    height: 220px !important;
    font-size: 10px !important;
    padding: 8px !important;
  }
  .user-message, .ai-message, .agent-message {
    padding: 6px 10px !important;
    font-size: 10px !important;
    max-width: 85% !important;
  }

  .cache-stats { font-size: 8px !important; padding: 2px 6px !important; }
  .toast { font-size: 10px !important; padding: 5px 10px !important; }

  .history-item {
    padding: 8px !important;
    margin-bottom: 8px !important;
    border-radius: var(--radius-xs) !important;
  }
  .result-container {
    padding: 10px !important;
    border-radius: var(--radius-xs) !important;
  }
  .card h2 {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 480px) {
  #threeCanvas {
    height: 180px !important;
  }
  .chat-messages {
    height: 180px !important;
  }
  .toast {
    font-size: 10px !important;
    padding: 5px 10px !important;
  }
  .card h2 {
    font-size: 12px !important;
  }
}

@media (min-width: 769px) {
  #threeCanvas {
    height: 350px !important;
  }
}