/* Modal */
.modal-overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: var(--z-modal);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--spacing-md);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--transition-base), visibility var(--transition-base);
    }
    
    .modal-overlay.visible {
      opacity: 1;
      visibility: visible;
    }
    
    .modal {
      background-color: var(--color-bg-secondary);
      border: 2px solid var(--color-border);
      border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
      width: 95%;
      max-width: 400px;
      max-height: 90vh;
      overflow-y: auto;
      transform: scale(0.95);
      transition: transform var(--transition-base);
    }
    
    .modal-overlay.visible .modal {
      transform: scale(1);
    }
    
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--spacing-md);
      border-bottom: 1px solid var(--color-border-light);
    }
    
    .modal-title {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
    }
    
    .modal-body {
      padding: var(--spacing-md);
    }
    
    .modal-footer {
      display: flex;
      gap: var(--spacing-sm);
      justify-content: flex-end;
      padding: var(--spacing-md);
      border-top: 1px solid var(--color-border-light);
    }

    /* Text input modal - move up to avoid keyboard on mobile */
    #text-input-modal .modal {
      margin-top: -150px;
    }