/* phone.css — iPhone portrait layout.
 * Spec: docs/superpowers/specs/2026-09-23-iphone-layout-design.md
 * The first rule hides the phone-only elements everywhere; every other rule
 * sits inside the phone media query, so desktop and iPad render as before. */

.phone-only { display: none; }

/* ---- Every page ---------------------------------------------------------- */
@media (max-width: 600px) and (orientation: portrait) {
  /* Desktop renders at 90% zoom; a phone gets full size, and 16px inputs so
   * iOS doesn't zoom in on focus. */
  :root { --ui-scale: 1; }

  /* The feature section shrink-wrapped to three cards side by side. */
  .welcome__features { grid-template-columns: 1fr; width: 100%; }

  /* Size the auth card's track to the screen, not to its content. */
  .auth { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Meeting page shell -------------------------------------------------- */
@media (max-width: 600px) and (orientation: portrait) {
  /* The body tracks the visual viewport (phone.js sets --vv-*), so the
   * composer rides on top of the iOS keyboard instead of under it. */
  body:has(.app) {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--vv-top, 0px);
    height: var(--vv-height, 100dvh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
  }
  .app {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .header {
    flex: 0 0 auto;
    min-height: 52px;
    gap: var(--space-1);
    padding: 0 var(--space-2);
  }
  #btn-meetings { order: 1; min-width: 44px; min-height: 44px; font-size: 22px; }
  .phone-title.phone-only {
    order: 2;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 0 var(--space-2);
    background: none;
    border: none;
    color: var(--color-fg-primary);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  }
  .phone-title .header__session {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: inherit;
    font-style: normal;
    font-size: inherit;
    color: inherit;
  }
  .phone-title .header__session::before { content: none; }
  .phone-title::after { content: "▾"; font-size: 12px; color: var(--color-fg-muted); }
  .header__home { order: 3; min-width: 44px; min-height: 44px; justify-content: center; }
  .header__logo, .header__brand, .header__spacer, .avatar-menu { display: none; }
  .header__new.phone-only { display: inline; font-size: 20px; line-height: 1; }

  .roster-toggle,
  .roster-resizer,
  .composer-resizer,
  .meetings-drawer__resizer,
  .roster-row__handle { display: none !important; }

  /* The participants panel leaves the page flow; the next block turns it
   * into the participants sheet. */
  .roster { display: none; }

  /* Vertical padding lives on the inner column so the transcript can shrink
   * to nothing when the keyboard is up; the composer stays whole. */
  /* Basis 0: the transcript takes only the space left over, so a long
   * meeting never squeezes the strip or banners. They shrink only when the
   * keyboard leaves too little room for the composer. */
  .transcript {
    flex: 1 1 0;
    min-height: 0;
    padding: 0 var(--space-4);
  }
  .transcript__inner { padding: var(--space-4) 0 var(--space-5); }

  /* Only the queued-message badge stays here, right above the composer. */
  .controlbar {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0 var(--space-4);
    gap: var(--space-2);
    border-top: none;
  }
  #btn-new, #btn-pause { display: none; }

  .composer {
    flex: 0 0 auto;
    min-height: 0;
    margin: var(--space-1) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
    padding: 10px var(--space-3) var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: 22px;
    background: var(--color-bg-surface);
    box-shadow: none;
  }
  .composer::before { display: none; }

  .meetings-drawer {
    padding-top: calc(var(--space-4) + env(safe-area-inset-top));
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  }
  .meetings-drawer__account.phone-only {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
  }

  .disconnected-banner,
  .signed-out-banner { padding-top: calc(var(--space-2) + env(safe-area-inset-top)); }
  /* Local mock mode only: its fixed banner would cover the whole top bar. */
  .mock-banner { position: static; }
  /* When the keyboard leaves little room, banners give up space before the
   * composer does; the composer must stay whole. */
  .mock-banner,
  .verify-banner { flex: 0 1 auto; min-height: 0; overflow: hidden; }
}

/* ---- Faces strip and sheets ---------------------------------------------- */
@media (max-width: 600px) and (orientation: portrait) {
  .faces-strip.phone-only {
    flex: 0 1 auto;  /* yields its height to the composer when the keyboard is up */
    min-height: 0;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0 var(--space-3);
    overflow-x: auto;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-fg-muted);
    font-family: var(--font-ui);
    cursor: pointer;
  }
  /* Name chips: the .chip look of the transcript's speaker labels, full
   * names, long titles cut with an ellipsis. */
  .faces-strip__face {
    position: relative;
    flex: 0 0 auto;
    max-width: 11em;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-bg-canvas);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    line-height: 28px;
  }
  .faces-strip__face--current {
    box-shadow: 0 0 0 2px var(--color-bg-canvas), 0 0 0 4px var(--color-state-active);
    animation: faces-strip-pulse 1.4s ease-in-out infinite;
  }
  .faces-strip__face--leader::before { content: "★ "; }
  .faces-strip__more { margin-left: auto; padding-left: var(--space-2); font-size: 14px; white-space: nowrap; }
  /* Scroll hint: a soft fade pinned to whichever edge has more chips beyond
   * it (phone.js toggles the classes). Overlays, not a mask, so the strip's
   * bottom border stays solid. */
  .faces-strip.phone-only::before,
  .faces-strip.phone-only::after {
    content: "";
    position: sticky;
    z-index: 1;
    flex: 0 0 28px;
    align-self: stretch;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--motion-fast-duration) var(--ease-out);
  }
  /* Sticky insets count from inside the strip's padding; pull them out to
   * the true edges. */
  .faces-strip.phone-only::before {
    left: calc(-1 * var(--space-3));
    margin-right: -28px;
    margin-left: calc(-1 * var(--space-3));
    background: linear-gradient(to right, var(--color-bg-canvas), transparent);
  }
  .faces-strip.phone-only::after {
    right: calc(-1 * var(--space-3));
    margin-left: -28px;
    margin-right: calc(-1 * var(--space-3));
    background: linear-gradient(to left, var(--color-bg-canvas), transparent);
  }
  .faces-strip--more-left.phone-only::before,
  .faces-strip--more-right.phone-only::after { opacity: 1; }
  @keyframes faces-strip-pulse {
    50% { box-shadow: 0 0 0 2px var(--color-bg-canvas), 0 0 0 6px var(--color-state-active); }
  }
  @media (prefers-reduced-motion: reduce) {
    .faces-strip__face--current { animation: none; }
  }

  .phone-scrim.phone-only {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 105;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-medium-duration) var(--ease-out);
  }
  .phone-scrim.phone-scrim--open { opacity: 1; pointer-events: auto; }

  /* The participants panel itself becomes the participants sheet. */
  .phone-sheet.phone-only,
  .roster,
  .app--roster-hidden .roster {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    max-height: calc(var(--vv-height, 100dvh) * 0.85);
    overflow-y: auto;
    padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-strong);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    transform: translateY(105%);
    visibility: hidden;
    transition: transform var(--motion-medium-duration) var(--ease-out),
                visibility 0s linear var(--motion-medium-duration);
  }
  .phone-sheet.phone-sheet--open,
  .roster.phone-sheet--open {
    transform: none;
    visibility: visible;
    transition: transform var(--motion-medium-duration) var(--ease-out);
  }
  .phone-sheet__handle.phone-only {
    display: block;
    position: relative;
    width: 44px;
    height: 20px;
    margin: 0 auto var(--space-2);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  .phone-sheet__handle::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 8px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border-strong);
  }
  .phone-sheet__title { margin: 0 0 var(--space-3); font-family: var(--font-ui); font-size: 16px; font-weight: 600; }
  .phone-sheet__body { display: flex; flex-direction: column; gap: var(--space-3); }
  .phone-sheet__body > * { margin: 0; }
  .phone-sheet__body .mode-toggle { display: flex; }
  .phone-sheet__body .mode-toggle__seg { flex: 1 1 0; min-height: 40px; }
  .phone-sheet__body .verbosity { display: flex; align-items: center; gap: var(--space-3); }
  .phone-sheet__body .verbosity__slider { flex: 1 1 auto; }
  .phone-sheet__body .transcript__tools { margin: 0; pointer-events: auto; justify-content: flex-start; }
  .phone-sheet__body .header__copy,
  .phone-sheet__body .btn-end,
  .phone-sheet__body .btn-force-end { width: 100%; min-height: 44px; font-size: 15px; }
  .roster .team-tabs__list { overflow-x: auto; flex-wrap: nowrap; }
}

/* ---- Composer ------------------------------------------------------------ */
@media (max-width: 600px) and (orientation: portrait) {
  /* Fixed values, not --composer-input-height: a desktop drag must not pin
   * the phone's box. The cap is half the visible screen above the keyboard. */
  .composer__input {
    display: block;
    min-height: 24px;
    max-height: calc(var(--vv-height, 100dvh) * 0.5);
    font-size: 16px;
    line-height: 24px;
    overflow-y: auto;
  }
  .composer__bar.phone-only {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
  }
  .composer__status {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--color-fg-muted);
  }
  /* The desktop label pushes itself right; on the phone it leads the row. */
  .composer__status > * { margin-left: 0; }
  .composer__status .pacing { overflow: hidden; text-overflow: ellipsis; }
  .composer__action {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-bg-inset);
    color: var(--color-bg-canvas);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
  }
  .composer__action:disabled { opacity: 0.4; cursor: default; }
  /* Start / Resume: a labeled pill, not a circle. */
  .composer__action[data-mode="start"] {
    width: auto;
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
  }
}

/* ---- Model picker and dialogs as bottom sheets --------------------------- */
@media (max-width: 600px) and (orientation: portrait) {
  .roster-row__line2 { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }

  /* !important beats the left/top that positionModelMenu() sets inline. */
  .model-menu {
    left: 0 !important;
    top: auto !important;
    right: 0;
    bottom: 0;
    width: auto;
    height: calc(var(--vv-height, 100dvh) - var(--space-5));
    max-height: none;
    border-radius: 16px 16px 0 0;
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  }
  .model-menu__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

  .dialog,
  .dialog--wide {
    width: 100vw;
    max-width: 100vw;
    max-height: 90dvh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---- Fixes from the branch review ---------------------------------------- */
@media (max-width: 600px) and (orientation: portrait) {
  /* The end-of-meeting proposal: on the desktop it floats over the
   * transcript. On a phone it becomes its own opaque row at the top of the
   * page (the body is a flex column; app.js appends it last), text on one
   * line and the two buttons on the next. */
  .end-prompt-banner {
    position: static;
    order: -1;
    flex: 0 0 auto;
    flex-wrap: wrap;
    min-width: 0;
    max-width: none;
    margin: 0;          /* .banner's -32px side margins are for in-transcript banners */
    transform: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--color-bg-surface-elevated);
  }
  .end-prompt-banner__text { flex: 1 1 calc(100% - 40px); }
  .end-prompt-banner__btn--cancel { margin-left: auto; }

  /* iOS zooms in on any focused field under 16px and never zooms back out. */
  .model-menu__filter,
  .dialog__input,
  .auth__field input,
  .auth__input { font-size: 16px; }
}

/* ---- Outside phone portrait ---------------------------------------------- */
/* viewport-fit=cover (needed for the phone layout) stops iOS keeping content
 * clear of the notch in landscape; put that back. env() is 0 on desktop and
 * iPad, so their pixels don't change. */
@media (orientation: landscape) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}