/* ============================================================
   Textmolt Mobile Shell Layer — R2-s01 U3 / W2
   Phone-only rules live here; system.css remains the final override layer.
   ============================================================ */

@media (max-width: 640px) and (pointer: coarse) {
  html.kb-open #app {
    height: var(--tm-vvh, 100dvh);
    max-height: var(--tm-vvh, 100dvh);
  }

  html.kb-open .composer-container {
    padding-bottom: 0;
  }

  .header {
    transition: transform var(--tm-dur-normal) var(--tm-ease-out);
  }

  body.header-retracted .header {
    transform: translateY(-100%);
    transition-timing-function: var(--tm-ease-in);
  }

  html[data-motion="reduced"] .header {
    transition-duration: var(--tm-dur-instant);
  }

  .header-menu-btn,
  .header-logo-btn,
  .header-avatar-btn,
  .send-btn,
  .voice-btn,
  #btn-tool-upload {
    min-width: calc(var(--tm-space-6) + var(--tm-space-3));
    min-height: calc(var(--tm-space-6) + var(--tm-space-3));
  }

  .send-btn.active {
    width: calc(var(--tm-space-6) + var(--tm-space-3));
    height: calc(var(--tm-space-6) + var(--tm-space-3));
    min-width: calc(var(--tm-space-6) + var(--tm-space-3));
    min-height: calc(var(--tm-space-6) + var(--tm-space-3));
  }

  #btn-clear-input {
    position: relative;
  }

  #btn-clear-input::after {
    content: "";
    position: absolute;
    inset: calc(var(--tm-space-3) * -1);
  }

  .floating-toolbar button {
    min-height: calc(var(--tm-space-6) + var(--tm-space-3));
  }

  .header-logo-btn,
  .header-menu-btn,
  .upgrade-pill,
  .header-actions-group {
    border-color: var(--tm-border-soft);
    box-shadow: var(--tm-shadow-2), var(--tm-glass-highlight);
  }

  #btn-tool-upload {
    display: inline-flex;
    flex-shrink: 0;
  }

  .composer-left-controls,
  .composer-input-wrapper {
    gap: var(--tm-space-1);
  }

  /* U8c：撤 left/right !important 覆盖——它会打掉 JS 的 composer 居中定位
     （宽度被 max-width 截断时盒子左锚 = 用户手机实测「面板偏左」的触屏层根因）。
     全宽诉求由 JS width 计算承担（composer 宽 - 24，含窄屏）。 */

  .command-palette-inner {
    max-height: min(40vh, calc(var(--tm-vvh, 100dvh) * 0.5));
  }

  .context-menu {
    min-width: min(280px, calc(100vw - (var(--tm-space-3) * 2)));
  }

  #toast-region {
    /* 让过 64px 顶栏：s01 视觉终检发现 safe-top+12 会压住顶栏药丸 */
    top: calc(var(--tm-safe-top) + var(--header-height, 64px) + var(--tm-space-2));
  }

  .chat {
    padding-left: var(--tm-space-3);
    padding-right: var(--tm-space-3);
  }

  .message-ai .message-bubble {
    max-width: calc(100% - var(--tm-space-3));
    margin-right: var(--tm-space-3);
  }

  .message-user .message-bubble {
    max-width: 86%;
  }
}

@media (max-width: 640px) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .header {
    transition-duration: var(--tm-dur-instant);
  }
}