/* Responsive iPad Fixes */

/* Prevent content shifting when keyboard appears/disappears */
html,
body {
  height: 100%;
  position: fixed;
  overflow: hidden;
  width: 100%;
}

.app-container {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Fix for iOS Safari viewport height issues */
@supports (-webkit-touch-callout: none) {
  /* iOS specific override */
  .app-container {
    /* Use CSS variable for dynamic height calculation */
    height: calc(var(--vh, 1vh) * 100);
  }

  /* Prevent unwanted scrolling when keyboard is visible */
  body.keyboard-open {
    position: fixed;
    width: 100%;
  }
}

/* Ensure the input area stays at the bottom and visible above keyboard */
.input-area {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding-bottom: calc(var(--safe-area-inset-bottom) + 8px);
}

.action-buttons {
  padding-bottom: calc(var(--safe-area-inset-bottom) + 8px);
}

/* Prevent iOS momentum scrolling issues */
.diagnostic-area {
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Ensure labels position correctly relative to chart */
.radar-chart-container .labels {
  width: var(--chart-size);
  height: var(--chart-size);
  max-width: var(--chart-max-size);
  max-height: var(--chart-max-size);
}

/* Fix for incorrect top margin in Firefox and some WebKit browsers */
@supports (-moz-appearance: none) {
  .circle-container,
  .radar-chart-container .labels {
    margin-top: 0;
    top: var(--chart-top-margin);
  }
}

/* Add these to fix iOS Safari issues */
:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 20px);
  --vh: 1vh;
}

/* Fix for iOS height issues */
.app-container {
  height: 100vh; /* Fallback */
  height: calc(var(--vh, 1vh) * 100);
}

/* Bottom safe area padding for iOS devices */
.input-area {
  padding-bottom: var(--safe-area-inset-bottom);
}

/* Add these styles to your CSS file */

/* Fix for touch devices - ensure tap targets are large enough */
@media (pointer: coarse) {
  .node {
    --base-size: 14px; /* Slightly larger on touch devices for better tap targets */
  }

  .action-button,
  .sidebar-option,
  .delete-button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Specifically target iOS */
@supports (-webkit-touch-callout: none) {
  /* Fix for backdrop filter on iOS */
  .diagnosis-info {
    isolation: isolate; /* Creates a new stacking context */
  }

  /* Improved dragging for touch */
  .diagnosis-info {
    -webkit-user-select: none;
    user-select: none;
    touch-action: none; /* Disables browser handling of all panning and zooming gestures */
  }

  /* Add momentum scrolling to all scrollable areas */
  .diagnosis-info,
  .diagnostic-area,
  .prompt-area,
  .knowledge-collection {
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent iOS text size adjustment */
  body {
    -webkit-text-size-adjust: 100%;
  }
}

/* Add active states for better touch feedback */
.action-button:active,
.sidebar-option:active,
.node:active {
  opacity: 0.7;
}

/* Fix webkit appearance issues */
input,
textarea,
button {
  -webkit-appearance: none;
  border-radius: 0;
}

/* Fix for iOS sticky hover states */
@media (hover: hover) {
  .action-button:hover,
  .sidebar-option:hover,
  .node:hover {
    opacity: 0.8;
  }
}