/* Dex AI on phones (user, 2026-10-29: "get rid of the suggested chats, more streamlined, look at how Gemini or ChatGPT
   look on mobile"). A new chat is just a greeting in the middle of the screen; the ask box is one round pill pinned
   above the tab bar (--aia-tb, set by js/ai-attio-draft.js) on a new chat and in a conversation alike. Gone on phones:
   the category pills, the questions-left line, Learn more, the model label. The header's right slot is a New chat
   pencil once a chat is open (.aia-ph-new). */
@media (max-width: 767px) {
  html.aiq-phone.aia :is(#ai-starters, .ai-keynote, .ai-learn, .ai-model):not(#_):not(#_) { display: none !important; }

  /* new chat: the greeting alone, centred in the space above the ask box */
  html.aiq-phone.aia .ai-empty:not(#_) { min-height: 100%; display: flex; flex-direction: column; justify-content: center;
    padding: 0 24px calc(var(--aia-tb, 80px) + 90px) !important; max-width: none; }
  html.aiq-phone.aia .ai-hero:not(#_) { text-align: center; margin: 0; }
  html.aiq-phone.aia .ai-hero #ai-greet:not(#_):not(#_):not(#_) {   /* beats aiq-phone-attio.css hiding every main h1 under #ph-th */
    display: flex !important; flex-direction: column; align-items: center; gap: 6px; margin: 0 !important; }
  /* "more refined" (user, 2026-10-29): Gemini's two lines — the name in the sidebar's Dex gradient, a quieter question */
  html.aiq-phone.aia #ai-greet .aia-hi { font: 600 30px/36px Inter, system-ui, sans-serif; letter-spacing: -.02em;
    background: linear-gradient(100deg, #455DDC 0%, #9646EF 55%, #F73463 100%); -webkit-background-clip: text; background-clip: text;
    color: transparent; }
  html.aiq-phone.aia #ai-greet .aia-q { font: 500 18px/24px Inter, system-ui, sans-serif; letter-spacing: -.01em; color: var(--x-faint); }

  /* the ask box: a pill pinned above the tab bar, text and send on one line */
  html.aiq-phone.aia .ai-comp:not(#_) { position: fixed !important; z-index: 140; left: 12px; right: 12px;
    bottom: calc(var(--aia-tb, 80px) + 26px); margin: 0; overflow: visible !important; display: flex; align-items: flex-end; gap: 6px;
    padding: 6px 6px 6px 18px !important; border-radius: 26px !important; background: none !important; box-shadow: none !important; }
  /* ::before = the page colour behind the box down to the tab bar, so answers don't show through the gap (fades in at
     the top); ::after = the pill itself, painted over that band (a background on .ai-comp would sit under it) */
  html.aiq-phone.aia .ai-comp:not(#_)::before { content: ''; position: absolute; z-index: -1; left: -12px; right: -12px; top: -20px;
    bottom: -26px; pointer-events: none; background: linear-gradient(transparent, var(--sh-bed, var(--ph-bed)) 20px); }
  html.aiq-phone.aia .ai-comp:not(#_)::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
    background: var(--ph-card, #fff); box-shadow: inset 0 0 0 .5px rgba(15,17,21,.10), 0 1px 2px rgba(15,17,21,.04), 0 6px 24px -6px rgba(15,17,21,.10); }
  html.aiq-phone.aia[data-theme="dark"] .ai-comp:not(#_)::after { background: #2C2C2E; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.10), 0 6px 24px -6px rgba(0,0,0,.5); }
  html.aiq-phone.aia.aiq-phone .ai-comp textarea#ai-input:not(#_) { flex: 1; min-width: 0; min-height: 36px !important; max-height: 160px;
    padding: 7px 0 !important; font: 400 16px/22px Inter, system-ui, sans-serif !important; letter-spacing: -.005em; }
  html.aiq-phone.aia .ai-comp textarea#ai-input::placeholder { color: var(--ph-faint, #A0A9C0); }
  html.aiq-phone.aia .ai-comp .ai-comp-row:not(#_) { flex: none; gap: 0; }
  html.aiq-phone.aia .ai-comp :is(.ai-tkpick, .ai-sp):not(#_) { display: none !important; }
  /* send: a quiet outline arrow while empty, a solid ink circle once there's text */
  html.aiq-phone.aia .ai-send:not(#_), html.aiq-phone.aia[data-theme] .ai-send:not(#_) { width: 36px; height: 36px; border-radius: 50%; font-size: 17px;
    transition: none; }
  html.aiq-phone.aia .ai-send:disabled:not(#_), html.aiq-phone.aia[data-theme] .ai-send:disabled:not(#_) { background: transparent;
    color: var(--ph-faint, #A0A9C0); box-shadow: none; }
  /* the disclaimer only under a conversation, as ChatGPT does; a new chat stays a greeting and a box */
  html.aiq-phone.aia:not(.aia-conv) .ai-comp .ai-disclaimer:not(#_) { display: none; }
  html.aiq-phone.aia:not(.aia-conv) .ai-comp:not(#_) { bottom: calc(var(--aia-tb, 80px) + 14px); }
  html.aiq-phone.aia .ai-comp .ai-disclaimer:not(#_) { position: absolute; top: calc(100% + 7px); left: 0; right: 0; text-align: center;
    font-size: 11px; line-height: 14px; white-space: nowrap; color: var(--ph-faint, #A0A9C0); }
  html.aiq-phone.aia .ai-slash:not(#_) { top: auto; bottom: calc(100% + 8px); }

  /* conversation: room under the last answer for the pinned box; bubbles and answers at reading size */
  html.aiq-phone.aia .ai-foot:not(#_) { height: 0; padding: 0 !important; }   /* holds the (fixed) ask box in a chat: never display:none */
  html.aiq-phone.aia .ai-feed:not(#_) { padding: 16px 16px calc(var(--aia-tb, 80px) + 96px) !important; }
  html.aiq-phone.aia .ai-u:not(#_) { margin: 4px 0 22px; }
  html.aiq-phone.aia .ai-u div:not(#_) { max-width: 80%; padding: 9px 15px; border-radius: 20px 20px 6px 20px; font-size: 15px; line-height: 21px; }
  html.aiq-phone.aia .ai-md:not(#_) { font-size: 15.5px; line-height: 25px; font-weight: 400; letter-spacing: -.003em; }
  html.aiq-phone.aia .ai-a:not(#_) { margin-bottom: 30px; }
  html.aiq-phone.aia .ai-md strong:not(#_) { font-weight: 600; }

  /* .ai is already sized to the screen under the header and keeps the tab bar's room inside (the feed's padding), so the
     bar's usual 96px under <main> made the page scroll by 96px: iOS Safari then showed / hid its toolbar as you touched
     the page and the fixed tab bar jumped (user, 2026-11-01: "There are still times when the menu bar jumps") */
  html.aiq-phone.ph-drawer.ph-nb.aia .app-shell > main.ai-main-wrap:not(#_):not(#_):not(#_) { padding-bottom: 0 !important; }

  /* New chat pencil in the header, only once a chat is open (kept in the layout so the title stays centred) */
  html.aiq-phone.aia:not(.aia-conv) .aia-ph-new:not(#_) { visibility: hidden; }
}