/* models-menu.css — the two-level company model picker and the "Bring your
   own model" form (js/models-menu.js). Loaded before phone.css so the
   375px bottom-sheet override there — the last, most specific hard phone
   rule in the chain — always wins. Uses only app.css's existing theme
   tokens; no colours are hard-coded here. */

/* -------- company rows (level 1) -------- */

.model-menu-company {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  min-height: 44px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
}
.model-menu-company:hover { background: var(--bg-sunken); }
.model-menu-company.is-open { background: var(--accent-soft); }

.mm-key-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border-strong);
}
.mm-key-dot.is-on {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.mm-company-name { font-weight: 600; flex: 1 1 auto; }
.mm-company-note {
  font-size: 10.5px;
  color: var(--text-faint);
  white-space: nowrap;
}

.mm-chevron {
  flex-shrink: 0;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}
.model-menu-company.is-open .mm-chevron { transform: rotate(90deg); }

/* -------- submenu (level 2 — the company's exactly-three models) -------- */

.model-menu-submenu {
  margin: 2px 0 6px 14px;
  padding-left: 8px;
  border-left: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.model-menu-submenu-item { min-height: 44px; }

/* -------- inline key entry, scoped under the pressed model row -------- */

.model-menu-key-form {
  margin: 4px 0 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.mm-key-form-note {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0 0 6px;
  line-height: 1.4;
}

/* -------- BYOM row + form -------- */

.model-menu-byom-form {
  margin: 2px 0 8px;
  padding: 10px 10px 12px;
  border-left: 2px solid var(--border);
  border-radius: var(--radius-sm);
}

.mm-byom-lead {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.mm-byom-conditions {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.55;
}

.mm-byom-hint {
  font-size: 10.5px;
  color: var(--text-faint);
  margin: 4px 0 10px;
  line-height: 1.5;
}
.mm-byom-hint code {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-sunken);
  padding: 1px 4px;
  border-radius: 4px;
}

.mm-byom-stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}
.mm-byom-stage {
  font-size: 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  color: var(--text-muted);
}
.mm-byom-arrow { color: var(--text-faint); font-size: 11px; }

.mm-byom-current {
  font-size: 11.5px;
  color: var(--text);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  margin: 0 0 10px;
}

.mm-byom-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.mm-byom-label input { margin-top: 4px; }

.mm-byom-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 4px 0 10px;
  line-height: 1.4;
  cursor: pointer;
}
.mm-byom-checkbox input { margin-top: 2px; flex-shrink: 0; }

/* -------- "Local · later" — greyed out, unselectable (owner's brief,
   2026-09-26: local models are out of this build; keep them visible at the
   bottom of the menu, greyed, never removed from the folder or the code
   path). .model-menu-item-disabled is a <div>, not a <button> — no click
   handler is ever wired to it, so cursor/opacity are the only states that
   matter; :hover/:focus never need styling because nothing can hover-focus
   a non-interactive row via keyboard, and a mouse hover getting no
   highlight is itself part of "not selectable". -------- */

.model-menu-item-disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  font-size: 13px;
  opacity: 0.5;
  cursor: not-allowed;
  user-select: none;
}
.model-menu-item-disabled .mm-note { font-size: 10.5px; color: var(--text-faint); }

/* -------- menu width for the wider two-level content -------- */

.model-menu.models-menu-v2 { min-width: 300px; max-width: 92vw; }

/* -------- 375px: the submenu behaves as a bottom sheet, 44px rows -------- */

@media (max-width: 480px) {
  .model-menu.models-menu-v2 {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    /* An explicit top + height, not top:auto/bottom stretching: measured
       in testing, a fixed-position box here with both top and bottom set
       and height:auto did not stretch to fill the gap between them (used
       height resolved to a few px instead of the expected ~600px) — an
       explicit calc() height sidesteps that resolution entirely. */
    top: 22vh !important;
    bottom: auto !important;
    height: calc(78vh - 8px - env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
  .model-menu-company,
  .model-menu-item,
  .model-menu-item-disabled,
  .model-menu-submenu-item {
    min-height: 44px !important;
  }
  .model-menu-submenu {
    margin-left: 6px;
    padding-left: 6px;
  }
}