/* Web-specific styles: Settings modal shell */
/* Base styles are in ../shared/styles.css */
/* Form-internal styles are injected by shared/settings.js */

/* ============================================================
   Context Menu
   ============================================================ */

#context-menu {
  position: fixed;
  z-index: 999;
  background: var(--md-surface-container-solid);
  border-radius: var(--md-shape-md);
  padding: 4px 0;
  min-width: 160px;
  box-shadow: 0 2px 6px 2px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.28);
  font-family: 'Roboto Flex', sans-serif;
  font-size: 14px;
  overflow: hidden;
}

#context-menu.hidden { display: none; }

#context-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#context-menu li {
  padding: 10px 16px;
  cursor: pointer;
  color: var(--md-on-surface);
  user-select: none;
  transition: background var(--md-motion-duration-short) var(--md-motion-easing-standard);
}

#context-menu li:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

/* ============================================================
   Settings Modal Shell (M3 Expressive)
   ============================================================ */

#settings-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--md-motion-duration-medium, 300ms) var(--md-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
              visibility var(--md-motion-duration-medium, 300ms);
}

#settings-overlay.visible {
  opacity: 1;
  visibility: visible;
}

#settings-panel {
  background: var(--md-surface-container-solid);
  border-radius: var(--md-shape-xl, 28px);
  width: 680px;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-family: 'Roboto Flex', sans-serif;
  box-shadow: var(--md-elevation-3);
  transform: scale(0.92);
  opacity: 0;
  transition: transform var(--md-motion-duration-medium, 300ms) var(--md-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),
              opacity var(--md-motion-duration-medium, 300ms) var(--md-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

#settings-overlay.visible #settings-panel {
  transform: scale(1);
  opacity: 1;
}

#settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--md-outline-variant);
  font: var(--md-typescale-title-medium, 500 16px/24px 'Roboto Flex', sans-serif);
  color: var(--md-on-surface);
}

/* ============================================================
   Settings panel responsive: full-width on mobile, scrollable
   with sticky footer
   ============================================================ */

@media (max-width: 767px) {
  #settings-panel {
    width: calc(100vw - 32px);
    border-radius: var(--md-shape-lg, 16px);
  }
}


#settings-container {
  --settings-input-bg: rgba(0, 0, 0, 0.2);
  --settings-btn-active-color: #000000;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.theme-light #settings-container {
  --settings-btn-active-color: #ffffff;
}