/* Chat layout for phones. Loaded last: earlier layers stack several competing mobile rules,
   so selectors here are anchored on #page-conversation to win without !important.
   Bubbles, composer and the conversation list shared with desktop live in mc-conversations.css. */

@media (max-width:900px){
  /* The visible height without the keyboard (mc-layout.js). The workspace must follow it too: several
     sheets give it 100dvh, which on an iPhone ignores the keyboard and left the composer under it. */
  .mc-shell,.mc-shell .workspace{height:var(--app-height,100dvh);max-height:var(--app-height,100dvh)}

  /* An open conversation takes the whole screen; its ← goes back to the page you came from (mc-layout.js). */
  #app:has(#page-conversation.conversation-in-session:not([hidden])) #topbar{display:none}
  #page-conversation.conversation-in-session{padding:0 0 env(safe-area-inset-bottom,0px);gap:0}
  #app:has(#textIn:focus) #page-conversation.conversation-in-session{padding-bottom:0}

  /* Header: back · title · stop · call, in one 56px row. */
  #page-conversation.conversation-in-session .conversation-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;column-gap:6px;margin:0;padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px;background:var(--surface);border-bottom:1px solid var(--line);flex:none}
  #page-conversation.conversation-in-session .conversation-header > div:first-child{grid-column:2;grid-row:1;min-width:0}
  #page-conversation.conversation-in-session .conversation-header .eyebrow,
  #page-conversation.conversation-in-session #backToConversations{display:none}
  #page-conversation.conversation-in-session #newSess{display:none !important} /* mc-layout.css forces it with !important */
  #page-conversation.conversation-in-session .conversation-tools{display:contents}
  #page-conversation.conversation-in-session .conversation-title-line{display:flex;align-items:center;gap:2px;min-width:0;min-height:0;margin:0}
  #page-conversation.conversation-in-session #conversationTitle{margin:0;min-width:0;font-size:16px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #page-conversation.conversation-in-session #sessionDetail{margin:1px 0 0;font-size:11.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #page-conversation.conversation-in-session #conversationActionsButton{flex:none;width:34px;height:34px;min-height:34px;padding:0}
  #page-conversation.conversation-in-session #toggleHistory{grid-column:1;grid-row:1;width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;font-size:0;justify-content:center}
  #page-conversation.conversation-in-session #toggleHistory > *{display:none}
  #page-conversation.conversation-in-session #toggleHistory::before{content:'←';font-size:22px;line-height:1;color:var(--ink)}
  #page-conversation.conversation-in-session #cancelRun{grid-column:3;grid-row:1;min-height:36px;padding:6px 12px;font-size:0}
  #page-conversation.conversation-in-session #cancelRun::before{content:'■ Parar';font-size:12px}
  #page-conversation.conversation-in-session #startBtn{grid-column:4;grid-row:1;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;justify-content:center;gap:0}
  #page-conversation.conversation-in-session #startBtn > span:not(.voice-icon){display:none}

  /* Messages fill everything between header and composer. */
  #page-conversation.conversation-in-session .chat-workspace{flex:1 1 auto;min-height:0;margin:0;gap:0}
  #page-conversation.conversation-in-session .chat-panel{flex:1 1 auto;min-height:0;border:0;border-radius:0;box-shadow:none}
  #page-conversation.conversation-in-session #chat{flex:1 1 auto;min-height:0;padding:12px 10px 8px;overscroll-behavior:contain}
  #page-conversation .msg.user{max-width:85%}
  #page-conversation .msg.nico{max-width:94%}
  #page-conversation .code-block pre,#page-conversation .message-table{max-width:100%;overflow-x:auto}

  #page-conversation.conversation-in-session .load-older,
  #page-conversation.conversation-in-session .jump-latest{align-self:center;margin:6px auto;min-height:36px;font-size:12px}
  #page-conversation.conversation-in-session .pending-queue,
  #page-conversation.conversation-in-session .queue-paused,
  #page-conversation.conversation-in-session .execution-issue{margin:0;padding:6px 12px;font-size:12px;max-height:22dvh;overflow:auto}

  #page-conversation.conversation-in-session #messageForm{width:auto;margin:0 8px 8px}
  #page-conversation.conversation-in-session:has(.msg.is-streaming) #status{display:none}

  /* The conversation list opens over the whole chat. */
  #page-conversation.conversation-in-session.history-open .conversation-list-panel{width:100%;max-width:none;border-radius:0;border:0}
}