/* phone-polish.css — WormGPT */

@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .app-frame { max-width: 100vw; overflow-x: hidden; }

  /* ---------------- Header ---------------------------------
     Allow the action row to wrap to a second line and let the
     header GROW to fit it. Clipping here is what made buttons
     disappear on narrow phones.                                */
  .chat-header {
    height: auto !important;
    max-height: none !important;
    min-height: 56px !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 8px 12px !important;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    gap: 6px !important;
  }
  .chat-header > div { min-width: 0; gap: 6px !important; }
  .chat-header button,
  .chat-header a { flex: 0 0 auto !important; min-width: 40px !important; min-height: 40px !important; }
  .chat-header button svg,
  .chat-header a svg { flex: 0 0 auto; width: 20px; height: 20px; }

  /* model picker: shrink the label instead of pushing buttons off screen */
  .focused-model-trigger { min-width: 0; max-width: 58vw; padding: 6px 10px !important; gap: 7px !important; }
  .focused-model-trigger > span:not(.model-trigger-emblem) {
    min-width: 0; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .focused-model-trigger svg { flex: 0 0 auto; }

  /* composer */
  .composer-shell { padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
  .chat-composer { max-width: 100% !important; }
  .chat-composer button { min-width: 40px !important; min-height: 40px !important; }
  .chat-composer textarea { font-size: 16px !important; } /* stops iOS zoom-on-focus */
  [data-zy-composer="1"] { border-radius: 20px !important; }

  /* sidebar drawer */
  .chat-sidebar { width: min(88vw, 330px) !important; max-width: 88vw !important; }
  .chat-sidebar > div { width: 100% !important; }
  .chat-sidebar button { min-height: 40px; }

  /* account actions (sidebar footer) */
  .account-actions, .account-action, .account-trigger { min-height: 42px; }

  /* content / welcome */
  .chat-content { padding-left: 16px !important; padding-right: 16px !important; }
  .welcome-title { font-size: 25px !important; }
  .welcome-subtitle { font-size: 15px !important; margin-bottom: 24px !important; }

  /* menus / sheets never overflow the phone */
  .focused-model-menu { max-height: 82vh; max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 20px 20px 0 0 !important; }
}

@media (max-width: 560px) {
  .chat-header { padding-left: 8px !important; padding-right: 8px !important; }
  .welcome-questions { grid-template-columns: 1fr !important; }
  .chat-content { padding-left: 12px !important; padding-right: 12px !important; }
  .focused-model-trigger { max-width: 62vw; }
}

@media (max-width: 480px) {
  .focused-model-trigger > span:not(.model-trigger-emblem) { display: none; }
  .focused-model-trigger { max-width: none; }
}

@media (max-width: 400px) {
  .chat-header button, .chat-header a { min-width: 38px !important; min-height: 38px !important; }
  .chat-header svg { width: 19px; height: 19px; }
  .focused-model-trigger { padding: 6px 8px !important; }
}

/* landscape phones: keep header from eating the screen */
@media (max-height: 460px) and (max-width: 900px) {
  .chat-header { min-height: 48px !important; padding: 6px 10px !important; }
  .composer-shell { padding-top: 6px !important; padding-bottom: 8px !important; }
}

/* Injected "download the app" button */
.wg-dl {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--zy-text, #f4f4f3);
  border: 1px solid rgba(var(--zy-veil, 255, 255, 255), 0.12);
  background: linear-gradient(135deg, rgba(11, 87, 208, 0.18), rgba(77, 144, 254, 0.06));
  border-radius: 12px; padding: 10px 12px; margin-top: 10px;
  font-family: inherit; transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.wg-dl:hover, .wg-dl:active {
  border-color: rgba(77, 144, 254, 0.55);
  background: linear-gradient(135deg, rgba(11, 87, 208, 0.28), rgba(77, 144, 254, 0.12));
}
.wg-dl:active { transform: scale(.985); }
.wg-dl-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #0b57d0, #4d90fe);
  box-shadow: 0 6px 18px rgba(11, 87, 208, 0.35);
}
.wg-dl-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.wg-dl-txt strong { font-size: 13.5px; font-weight: 700; color: var(--zy-text, #f4f4f3); }
.wg-dl-txt small { font-size: 10.5px; color: #9a9a99; }
.wg-dl-welcome { margin: 18px auto 4px; max-width: 340px; justify-content: center; }