/* Extracted from web/index.html in the second conservative CSS split. */
/* Mobile and global reduced-motion overrides. Keep this file loaded last. */
  @media(max-width:640px){
    .remark-grid, .sticker-form{ grid-template-columns:1fr; }
    .sticker-form .wide{ grid-column:auto; }
    .emoji-panel{ bottom:calc(var(--composer-zone) + 4px); width:calc(100vw - 16px); border-radius:18px; }
  }


  @media (max-width: 520px){
    :root{
      --side-pad: 16px;
      --header-h: 56px;
      --avatar-size: 32px;
    }
    .peerpill{ padding: 0 44px; }
    .peerpill .name{ font-size: calc(18px * var(--ui-font-scale)); }
    .peerpill .status{ font-size: calc(12px * var(--ui-font-scale)); margin-top: 3px; }
    .backbtn{ left: 16px; top: calc(env(safe-area-inset-top) + 16px); width: 32px; height: 32px; }
    .backbtn svg{ width: 20px; height: 20px; }
    .header-actions{ right: 16px; top: calc(env(safe-area-inset-top) + 16px); gap: 26px; height:32px; }
    .topbtn{ width:32px; height:32px; }
    .topbtn svg{ width:22px; height:22px; }
    .topbtn.more svg{ width:20px; height:20px; }
    .avatar{ right: 16px; top: calc(env(safe-area-inset-top) + 16px); }
    .row{ margin-top: 18px; }
    .row.grouped{ margin-top: 8px; }
    .row.ai{ padding-left: 42px; }
    .bubble{ max-width: min(63vw, 520px); font-size: calc(13.5px * var(--bubble-font-multiplier)); line-height: 1.56; padding: 8px 13px 8px; }
    .meta{ font-size: calc(11px * var(--ui-font-scale)); margin-left: 8px; }
    .day{ font-size: calc(12px * var(--ui-font-scale)); }
    .new-divider{ font-size: calc(12px * var(--ui-font-scale)); margin: 14px 0 10px; }
    .composer{ gap: 5px; padding-left: 16px; padding-right: 16px; }
    .floatbtn{ width: 36px; height: 36px; }
    .floatbtn svg{ width: 20px; height: 20px; }
    .composer .field{ min-height: 42px; padding: 4px 8px 4px 12px; }
    textarea{ font-size: calc(15px * var(--ui-font-scale)); }
    .emojibtn{ width: 28px; height: 28px; }
    .emojibtn svg{ width: 22px; height: 22px; }
    .row.think{ padding-left: 42px; padding-right: 0; }
    .think-block{ width: min(63vw, 520px); max-width: min(63vw, 520px); }
    .think-block.open{ width: 100%; max-width: 100%; }
    .row.think.think-open{ padding-left: 0; padding-right: 0; }
    .think-caption{ font-size: 12.5px; letter-spacing: .07em; }
    .think-caption-star, .think-state{ font-size: 1.2em; }
    .think-body{ margin-top: 12px; }
    .think-text{ width: min(86%, 360px); font-size: 12px; line-height: 1.66; }
    .think-star svg{ width: 22px; height: 22px; }
    .profile-identity{ gap:15px; padding-bottom:14px; }
    .profile-avatar{ width:72px; height:72px; }
    .profile-name-row h3, #profileNameInput{ font-size:21px; }
    .profile-handle{ font-size:13px; }
    .profile-bio{ font-size:12.5px; }
    .settings-card{ padding:14px 15px; }
    .action-row{ padding:12px 15px; }
    .profile-scroll{ gap:22px; }
  }

  @media(max-width:640px){
    html,
    body,
    #root,
    .app{
      width:100% !important;
      max-width:100% !important;
      min-height:100dvh;
      margin:0 !important;
      padding:0 !important;
      overflow-x:hidden !important;
    }
    .service-topbar{ grid-template-columns:auto 1fr; }
    .service-status{ display:none; }
    .service-open{ display:none; }
    .service-panel,
    .service-page,
    .service-frame-wrap,
    .service-frame-shell,
    .service-frame,
    iframe{
      width:100% !important;
      max-width:100% !important;
      min-height:100% !important;
      height:100% !important;
      margin:0 !important;
      padding:0 !important;
      border:0 !important;
      border-radius:0 !important;
      box-shadow:none !important;
      outline:0 !important;
      overflow:hidden !important;
    }
    .service-page{
      position:fixed !important;
      inset:0 !important;
      width:100% !important;
      max-width:100% !important;
      height:100dvh !important;
    }
    .service-frame-wrap,
    .service-frame-shell{
      position:absolute !important;
      inset:0 !important;
    }
    .service-frame-shell iframe,
    .service-frame{
      display:block !important;
      position:absolute !important;
      inset:0 !important;
    }
    .mcp-debug-panel{ max-height:48vh; font-size:10px; }
  }

  }
  @media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
      animation: none !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    /* 通话声纹是"对方正在说话"的功能性反馈,即便系统减弱动态也保留(细窄低位移,不刺激) */
    .call-wave i{
      animation: callWave var(--dur, 1s) var(--ease-soft) var(--d, 0s) infinite alternate !important;
    }

