/* mobile-fixes.css - Mobile-specific fixes for all pages */
html, body {
  min-height: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

button,
input,
select,
textarea,
.breakdown-btn,
.tool-btn,
.filter-pill,
.save-btn,
.export-btn,
#backToDashboardBtn,
.pad-btn,
.action-btn,
.cancel-btn,
.mode-btn,
.char-chip,
.icon-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure minimum touch target sizes */
@media (max-width: 850px) {
  button,
  .pad-btn,
  .action-btn,
  .cancel-btn,
  .mode-btn,
  .icon-btn {
    min-height: 40px;
  }

  /* Smooth scrolling for the control panel */
  .control-panel {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Prevent text selection on UI elements */
  .mode-btn,
  .pad-btn,
  .char-chip,
  .panel-header,
  .pad-header {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Allow text selection in the editor */
  .script-paper,
  .pro-textarea,
  .pro-input {
    -webkit-user-select: text;
    user-select: text;
  }

  /* Improve scrollbar appearance on mobile */
  .control-panel::-webkit-scrollbar,
  .editor-scroll-area::-webkit-scrollbar {
    width: 4px;
  }

  /* Fix for iOS safe area insets */
  .script-paper {
    padding-bottom: max(80px, env(safe-area-inset-bottom, 80px));
  }

  /* Prevent horizontal overflow */
  .workspace-container,
  .control-panel,
  .script-pad-container {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

@media (max-width: 768px) {
  .breakdown-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .breakdown-actions::-webkit-scrollbar {
    display: none;
  }

  .breakdown-btn {
    min-width: 130px;
  }
}