/* The list owns scrolling. Header, attachments and composer keep their size. */
.message-workspace.has-thread {grid-template-rows:minmax(0,1fr)}
.message-thread-pane .chat-panel {min-height:0!important}
.chat-panel #chat-compose {align-items:center}
.chat-panel #chat-compose textarea {max-height:120px;overflow-y:auto;display:block}
.chat-panel #chat-compose [data-chat-send] {min-width:44px;min-height:46px}
/* Reserve a real lazy-image box before its intrinsic dimensions are available. */
.chat-panel .chat-image {width:min(260px,55vw)}
/* Input-only floor. Leave root typography, browser zoom and PC UI untouched.
   Also cover landscape phones whose CSS width exceeds the usual breakpoint. */
@media (max-width:800px), (max-width:1100px) and (pointer:coarse) {
  html:has(body.chat-active .message-workspace.has-thread) {overflow:hidden}
  body.chat-active:has(.message-workspace.has-thread) .page-wrap>.page-footer {display:none!important}
  body.chat-active .message-workspace.has-thread {
    position:fixed;left:20px;right:20px;top:var(--chat-workspace-top,90px);
    width:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  }
  body.chat-active .message-workspace.has-thread>.message-list-pane {display:none}
  :is(input:not([type=hidden]):not([type=range]):not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=file]):not([type=color]):not([type=image]),textarea,select,[contenteditable=""],[contenteditable="true"],[contenteditable="plaintext-only"]) {
    font-size:max(16px,1em)!important;
    min-width:0;
    max-width:100%;
    scroll-margin-block:12px;
  }
  #chat-compose textarea {padding-block:calc(10px * var(--ui-space-scale, 1))}
  .voice-chat-panel #voice-message {padding-block:calc(8px * var(--ui-space-scale, 1))}
  /* This is visibility only; no keyboard padding or body scroll lock is added. */
  :root[data-mobile-keyboard] .mobile-navigation {visibility:hidden;pointer-events:none}

  /* Only a popup containing the current input gets VisualViewport dimensions. */
  :is(dialog,.voice-sheet)[data-input-viewport] {
    position:fixed!important;
    top:var(--input-viewport-top)!important;
    bottom:auto!important;
    margin-block:0!important;
    min-height:0!important;
    max-height:var(--input-viewport-height)!important;
    max-width:calc(100% - 16px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-bottom:max(16px,env(safe-area-inset-bottom,0px));
  }
  #dialog[data-input-viewport] {display:flex;flex-direction:column;overflow:hidden!important}
  #dialog[data-input-viewport] #dialog-content {
    flex:1 1 auto;min-height:0;max-height:100%;overflow-y:auto!important;overscroll-behavior:contain;
  }
  #dialog[data-input-viewport] #dialog-content>h2:first-child,
  [data-input-viewport] .voice-sheet-heading {
    position:sticky;top:0;z-index:2;background:var(--ds-surface);padding-right:calc(32px * var(--ui-space-scale, 1));
  }
  #dialog[data-input-viewport] #dialog-close {z-index:3}
  :is(#v3-room-create,#voice-room-settings)[data-input-viewport] {display:flex;flex-direction:column;overflow:hidden}
  :is(#v3-room-create,#voice-room-settings)[data-input-viewport]>form {min-height:0;overflow-y:auto;overscroll-behavior:contain}
  :root[data-mobile-keyboard] .chat-panel {min-height:0!important}
  :root[data-mobile-keyboard] .message-thread-pane {min-height:0}
  body.chat-keyboard .message-workspace.has-thread {
    position:fixed;z-index:90;left:0;right:0;
    top:var(--mobile-input-top,0px);margin:0;width:auto;border-radius:0;
    height:var(--mobile-input-height,100dvh);min-height:0;
  }
  body.chat-keyboard .message-thread-pane .chat-panel {padding-bottom:max(8px,env(safe-area-inset-bottom,0px))!important}
  :root[data-mobile-keyboard] #main[data-room-focus] {
    top:var(--mobile-input-top);bottom:auto;height:var(--mobile-input-height);
  }
  :root[data-mobile-keyboard] #main[data-room-focus] .voice-room {height:100%;min-height:0}
  :root[data-mobile-keyboard] .voice-room .voice-stage {flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  :root[data-mobile-keyboard] .voice-room .voice-chat-panel {flex:1 0 100px}
  /* On a short visual viewport, keep the conversation header and send control
     reachable. Attachment tools return as soon as the keyboard closes. */
  :is(:root[data-mobile-keyboard-compact],body:has(.message-workspace[data-chat-compact])) .message-thread-pane .dm-thread-header {
    display:flex;flex-wrap:nowrap;min-height:44px;padding:calc(4px * var(--ui-space-scale, 1)) calc(8px * var(--ui-space-scale, 1))!important;gap:calc(6px * var(--ui-space-scale, 1));
  }
  :is(:root[data-mobile-keyboard-compact],body:has(.message-workspace[data-chat-compact])) .dm-thread-person {flex:1;min-width:0}
  :is(:root[data-mobile-keyboard-compact],body:has(.message-workspace[data-chat-compact])) .dm-thread-person h1 {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  :is(:root[data-mobile-keyboard-compact],body:has(.message-workspace[data-chat-compact])) .dm-thread-actions {flex-shrink:0;width:auto;margin-left:auto;padding-top:0;border-top:0}
  :is(:root[data-mobile-keyboard-compact],body:has(.message-workspace[data-chat-compact])) .chat-panel {padding:calc(6px * var(--ui-space-scale, 1))!important}
  :is(:root[data-mobile-keyboard-compact],body:has(.message-workspace[data-chat-compact])) .chat-attachment-tools,
  :is(:root[data-mobile-keyboard-compact],body:has(.message-workspace[data-chat-compact])) #chat-connection {display:none}
  :is(:root[data-mobile-keyboard-compact],body:has(.message-workspace[data-chat-compact])) #chat-compose {margin-top:0;padding-top:calc(4px * var(--ui-space-scale, 1))}
  :is(:root[data-mobile-keyboard-compact],body:has(.message-workspace[data-chat-compact])) #chat-log {padding-block:0}
}