/*
  File role: VOGO chat (rag-ai) — the menu button's long-press pop-up (.font-pop, rag-ai.js) as a full-screen sheet
  on the phone (user, 24.10.2026: "meniul din dreapta sus să fie full screen pe mobil și să arate adaptat pentru
  mobil"). On the laptop nothing changes: the head is hidden and the pop-up keeps its place under the button.
  The head (title + X) is added by font-pop-mobile.js. The chat's tokens give the light and the dark theme.
  @file_version 1.0.0
*/
.font-pop-head { display: none; }

@media (max-width: 600px) {
  /* The whole screen; !important because rag-ai.js places the pop-up with inline top / right under the button. */
  .font-pop {
    inset: 0 !important; top: 0 !important; right: 0 !important; left: 0 !important; bottom: 0 !important;
    width: auto; max-width: none; border: 0; border-radius: 0; box-shadow: none; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bg);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* The head: the title on the left, the X in the top-right corner (code-writing rule 13), stays on top. */
  .font-pop-head {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
    min-height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 8px 0 18px;
    background: var(--panel); border-bottom: 1px solid var(--line);
  }
  .font-pop-head h2 { flex: 1; margin: 0; font-size: 18px; font-weight: 700; color: var(--fg); }
  .font-pop .font-pop-head .font-pop-x {
    flex: none; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius);
    font-size: 26px; font-weight: 400; line-height: 1; color: var(--fg);
  }

  /* Rows as the cards of a mobile app: on the panel colour, spaced, bigger touch targets. */
  .font-pop-row { background: var(--panel); }
  .font-pop .font-pop-row button { min-height: 56px; height: auto; font-size: 15px; }
  .font-pop-bar button { min-height: 64px; }
  .font-pop .font-pop-row:not(.font-pop-bar):not(.font-pop-head) { border-top: 1px solid var(--line); }
  /* A row with a single option reads as a list row: aligned left, its icon before the text. */
  .font-pop .font-pop-row > button:only-child {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 20px; text-align: left;
  }
  /* The opened lists (todos, FOI) take the full width, without their own scroll. */
  .font-pop .font-pop-todos { max-width: none; max-height: none; background: var(--panel); }
  .font-pop .font-pop-todos button.font-pop-todo-item { min-height: 52px; padding: 10px 20px; font-size: 15px; }
  /* The voice group's sub-options, indented under their head. */
  .font-pop .font-pop-voice-item button { min-height: 52px; }
}