/* Visitor chat owns the viewport; only the conversation scrolls. */
.phone-shell { padding-bottom: 12px; }
.phone-shell > * { flex-shrink: 0; }
.phone-shell > .conversation { flex: 1 1 0; min-height: 0; overscroll-behavior: contain; }
.phone-shell .profile, .phone-shell .profile > div:last-child { min-width: 0; }
.phone-shell .profile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-shell button, .phone-shell label { touch-action: manipulation; }
.phone-shell .menu { max-height: calc(var(--chat-viewport-height, 100dvh) - 90px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.menu button[hidden] { display: none; }
#install-chat-dialog, #info-dialog { max-height: calc(var(--chat-viewport-height, 100dvh) - 32px); overflow: auto; overscroll-behavior: contain; }
.install-chat-icon { display: block; border-radius: 14px; margin-bottom: 16px; }
#install-chat-dialog h3 { margin: 18px 0 8px; font-size: 14px; }
#install-chat-dialog ol { padding-left: 20px; color: #c3d6cc; font-size: 13px; line-height: 1.6; }
#install-chat-dialog li + li { margin-top: 8px; }
#install-chat-dialog .install-chat-hint { color: #9db2a7; font-size: 11px; }
#install-chat-done { width: 100%; min-height: 44px; border: 1px solid #61c994; border-radius: 12px; background: #42aa75; color: white; font: inherit; cursor: pointer; }

@media (max-width: 767px), (max-width: 1100px) and (max-height: 600px), (display-mode: standalone) {
  html, body { width: 100%; height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
  body { display: block; padding: 0; background: #0b120e; }
  .phone-shell, .test-embedded .phone-shell {
    position: fixed; top: var(--chat-viewport-top, 0px); left: 0; right: 0;
    width: 100%; height: var(--chat-viewport-height, 100dvh); min-height: 0; max-height: none;
    padding: 0 env(safe-area-inset-right, 0px) max(8px, var(--chat-safe-bottom, env(safe-area-inset-bottom, 0px))) env(safe-area-inset-left, 0px);
    border: 0; border-radius: 0; box-shadow: none;
  }
  .phone-shell .topbar, .test-embedded .phone-shell .topbar { height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 14px 0; }
  .phone-shell .more { display: grid; place-items: center; width: 44px; height: 44px; text-align: center; }
  .phone-shell .menu { top: calc(58px + env(safe-area-inset-top, 0px)); max-width: calc(100vw - 28px); }
  .phone-shell > .notice, .phone-shell > .attachment-limits, .phone-shell > footer { display: none; }
  .phone-shell .conversation { padding: 16px 14px 12px; -webkit-overflow-scrolling: touch; }
  .phone-shell .message-wrap { min-width: 0; max-width: 100%; }
  .phone-shell .bubble { font-size: 15px; }
  .phone-shell .pinned-message { max-height: 76px; overflow: auto; margin-top: 8px; }
  .phone-shell .pinned-message > div { min-width: 0; }
  .phone-shell #chat-form { margin: 6px 10px 0; }
  .phone-shell #message-input, .phone-shell #visitor-name-input { font-size: 16px; }
  .phone-shell #chat-form .attachment-icon, .phone-shell #chat-form .send { width: 44px; height: 44px; }
  .phone-shell .visitor-name-prompt { gap: 7px; margin: 8px 10px 0; }
  .phone-shell .visitor-name-prompt input { grid-column: 1; }
  .phone-shell .visitor-name-prompt button { min-height: 40px; }
  .phone-shell .visitor-name-prompt strong { font-size: 12px; }
  .phone-shell .visitor-name-prompt small { font-size: 11px; }
  .phone-shell .attachment-review { flex: 0 1 auto; min-height: 0; max-height: min(180px, calc(var(--chat-viewport-height, 100dvh) * .32)); overflow: auto; margin: 6px 10px 0; }
  .phone-shell .attachment-preview { min-width: 0; flex: 0 1 45%; }
  .phone-shell .attachment-preview img, .phone-shell .attachment-preview video { max-width: 100%; }
  .phone-shell .attachment-preview audio { width: 100%; min-width: 120px; }
  .phone-shell .attachment-review-controls { min-width: 0; }
  .phone-shell .attachment-review-controls button { min-height: 36px; }
  .phone-shell .attachment-review-controls span { min-width: 0; }
  .chat-compact .phone-shell .topbar { height: calc(52px + env(safe-area-inset-top, 0px)); }
  .chat-compact .phone-shell .menu { top: calc(48px + env(safe-area-inset-top, 0px)); }
  .chat-compact .visitor-name-prompt small { display: none; }
  .chat-compact .phone-shell #chat-form { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tools message send"; gap: 3px; padding: 5px; }
  .chat-compact .phone-shell #chat-form .attachment-icon { width: 34px; height: 40px; }
  .chat-compact .phone-shell #chat-form .send { width: 38px; height: 38px; }
  .chat-compact .phone-shell #message-input { padding-inline: 4px; }
  .chat-compact .phone-shell .recording-visual { margin: 4px 10px 0; }
  .chat-compact .phone-shell .recording-status { display: none; }
}