/*
 * YunDi mobile application surface
 * Desktop layout intentionally stays in styles.css and ui-layout.css.
 */

.mobile-app-bar {
  display: none;
}

.advanced-mobile-room-summary,
.advanced-mobile-subpage-head,
.advanced-mobile-join-back,
.avatar-settings-card {
  display: none;
}

/* Account avatar editor is shared by desktop and mobile. */
.settings-modal .avatar-settings-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.avatar-settings-preview {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #1769e8, #0ca88a);
  background-position: center;
  background-size: cover;
  font-size: 24px;
  font-weight: 850;
}

.avatar-settings-card strong,
.avatar-settings-card small {
  display: block;
}

.avatar-settings-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.avatar-settings-picker {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid #c9d8e6;
  border-radius: 13px;
  color: #1769e8;
  background: #eef5ff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.avatar-crop-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #cbddec;
  border-radius: 18px;
  background: #f7fbfe;
}

.avatar-crop-panel.hidden {
  display: none;
}

.avatar-crop-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.avatar-crop-heading strong,
.avatar-crop-heading small {
  display: block;
}

.avatar-crop-heading small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.avatar-crop-stage {
  position: relative;
  width: min(280px, 72vw);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: #dce9f3;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.95), 0 12px 32px rgba(30, 77, 112, 0.16);
  touch-action: none;
}

.avatar-crop-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.avatar-crop-stage canvas.dragging {
  cursor: grabbing;
}

.avatar-crop-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(23, 105, 232, 0.3);
}

.avatar-crop-zoom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.avatar-crop-zoom input {
  width: 100%;
  accent-color: #1769e8;
}

.avatar-crop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.avatar-crop-actions .button {
  min-height: 44px;
  border-radius: 13px;
}

.mobile-profile-avatar.has-image,
.account-avatar.has-image,
.account-trigger-avatar.has-image,
.avatar-settings-preview.has-image {
  color: transparent !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: cover !important;
}

@media (max-width: 760px) {
  .advanced-mobile-room-copy {
    display: block !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #8996a5 !important;
    background: transparent !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  .advanced-mobile-room-copy::before {
    display: none !important;
  }

  .advanced-mobile-room-actions button,
  .advanced-mobile-room-actions button:first-child {
    border-color: #d7e2ec !important;
    color: #28445f !important;
    background: #f8fafc !important;
  }

  .advanced-mobile-room-actions button:active {
    border-color: #bcd4fb !important;
    color: #145dcf !important;
    background: #edf5ff !important;
  }

  body[data-route-view="advanced"] .advanced-feed {
    position: relative;
    padding-bottom: 26px !important;
    scroll-padding-bottom: 26px !important;
  }

  .advanced-room-workspace:not([data-mobile-panel]) .advanced-feed-column,
  .advanced-room-workspace[data-mobile-panel="feed"] .advanced-feed-column {
    grid-template-rows: minmax(0, 1fr) auto auto !important;
  }

  body[data-route-view="advanced"] .advanced-feed-event:last-child {
    margin-bottom: 0 !important;
    scroll-margin-bottom: 24px;
  }

  body[data-route-view="advanced"] .advanced-composer {
    position: relative !important;
    bottom: auto !important;
    z-index: 2;
    flex: none;
  }

  body[data-route-view="advanced"] .advanced-composer-actions {
    grid-template-columns: repeat(2, 84px) !important;
    gap: 6px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.attachment {
    width: 84px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.attachment svg {
    width: 15px !important;
    height: 15px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.attachment span {
    font-size: 11px !important;
  }

  .toast {
    right: auto !important;
    left: 50% !important;
    z-index: 1500 !important;
    width: max-content !important;
    max-width: min(280px, calc(100vw - 40px)) !important;
    padding: 10px 16px !important;
    transform: translate(-50%, 18px) !important;
    text-align: center;
    white-space: normal;
  }

  .toast.show {
    transform: translate(-50%, 0) !important;
  }

  body[data-route-view="advanced"] .toast {
    bottom: calc(var(--app-tab-height) + env(safe-area-inset-bottom, 0px) + 116px) !important;
  }

  .settings-modal .avatar-settings-card {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px;
  }

  .avatar-settings-preview {
    width: 58px;
    height: 58px;
  }

  .avatar-settings-picker {
    min-height: 36px;
    padding: 0 11px;
    border-radius: 11px;
    font-size: 11px;
  }

  .avatar-crop-panel {
    padding: 15px;
  }

  .avatar-crop-stage {
    width: min(230px, 68vw);
  }
}

/* Advanced room media actions must stay in one row on the mobile composer. */
@media (max-width: 760px) {
  body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-actions {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button.attachment {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 0 6px !important;
  }
}

/* Advanced room live video: compact app-style controls and stable media cards. */
@media (max-width: 760px) {
  body[data-route-view="advanced"] .advanced-composer-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.attachment {
    width: auto !important;
    min-width: 0 !important;
  }

  body[data-route-view="advanced"] .advanced-video-bubble {
    width: 100%;
    border-radius: 14px;
  }

  body[data-route-view="advanced"] .advanced-video-stage {
    aspect-ratio: 4 / 3;
  }

  body[data-route-view="advanced"] .advanced-video-footer {
    min-height: 40px;
    padding: 6px 9px;
    font-size: 11px;
  }

  body[data-route-view="advanced"] .advanced-video-footer button {
    min-height: 29px;
    padding-inline: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .advanced-video-live::before {
    animation: none;
  }
}

/* Mobile viewport contract: fixed chrome, one scroll owner per screen. */
@media (max-width: 760px) {
  :root {
    --app-header-height: 54px;
    --mobile-header-height: 54px;
    --app-tab-height: 64px;
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
  }

  body .page,
  .page {
    box-sizing: border-box !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: var(--app-header-height) 0 calc(var(--app-tab-height) + env(safe-area-inset-bottom, 0px)) !important;
  }

  body .page > header.header,
  .page > .header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 90 !important;
    box-sizing: border-box !important;
    height: var(--app-header-height) !important;
    min-height: var(--app-header-height) !important;
    padding: 0 14px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 1px 0 rgba(203, 216, 228, 0.92) !important;
  }

  .page > .header .brand {
    gap: 8px !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }

  .page > .header .brand-mark {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 13px rgba(23, 105, 232, 0.2) !important;
  }

  .mobile-bottom-nav {
    z-index: 90 !important;
    box-sizing: border-box !important;
    min-height: var(--app-tab-height) !important;
    padding: 3px 5px calc(3px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-bottom-nav .app-nav-button {
    min-height: 56px !important;
    gap: 1px !important;
    padding: 3px 1px 1px !important;
  }

  .mobile-bottom-nav .app-nav-button svg {
    width: 22px !important;
    height: 22px !important;
  }

  .mobile-bottom-nav .app-nav-button span {
    font-size: 9.5px !important;
  }

  /* Quick transfer is the mobile portal: one strong action, then trust signals. */
  body[data-route-view="p2p"] #viewP2p {
    min-height: auto !important;
    padding: 0 !important;
  }

  body[data-route-view="p2p"] .p2p-wrap {
    min-height: auto !important;
    padding: 12px 12px 18px !important;
  }

  body[data-route-view="p2p"] .transfer-card {
    padding: 0 !important;
  }

  body[data-route-view="p2p"] .transfer-file-side,
  body[data-route-view="p2p"] .transfer-settings-side,
  body[data-route-view="p2p"] .received-files {
    border-radius: 16px !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] .transfer-file-side {
    padding: 18px 16px !important;
    border: 1px solid #c9dcf2 !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 92% 0%, rgba(23, 105, 232, 0.12), transparent 38%),
      linear-gradient(145deg, #ffffff 0%, #eef7ff 100%) !important;
    box-shadow: 0 12px 30px rgba(35, 73, 112, 0.1) !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone {
    min-height: 166px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone::before {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 11px !important;
    border-radius: 15px !important;
    font-size: 22px !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone > strong {
    font-size: 20px !important;
    text-align: center !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone > small {
    margin-top: 4px !important;
    font-size: 11px !important;
    text-align: center !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"] .dropzone-actions {
    margin-top: 14px !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"] .dropzone-action {
    min-height: 44px !important;
    border-radius: 13px !important;
  }

  body[data-route-view="p2p"] .trust-grid {
    gap: 9px !important;
    margin-top: 12px !important;
  }

  body[data-route-view="p2p"] .trust-item {
    min-height: 72px !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
  }

  body[data-route-view="p2p"] .trust-icon {
    width: 34px !important;
    height: 34px !important;
  }

  body[data-route-view="p2p"] .receiver-panel:not(.hidden) {
    padding-top: 0 !important;
  }

  body[data-route-view="p2p"] .receiver-form {
    position: relative;
    overflow: hidden;
    border-radius: 18px !important;
  }

  body[data-route-view="p2p"] .receiver-form::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #1769e8, #24c998);
    content: "";
  }

  body[data-route-view="p2p"] .receiver-form h2 {
    font-size: 21px !important;
  }

  /* Advanced transfer owns the viewport; only the active room panel scrolls. */
  body[data-route-view="advanced"] {
    overflow: hidden !important;
  }

  body[data-route-view="advanced"] .page {
    overflow: hidden !important;
  }

  body[data-route-view="advanced"] #viewP2p,
  body[data-route-view="advanced"] .p2p-wrap {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  body[data-route-view="advanced"] .transfer-card {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-route-view="advanced"] .advanced-room-workspace,
  body[data-route-view="advanced"] .advanced-room-workspace.is-lobby {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  body[data-route-view="advanced"] .advanced-mobile-room-summary {
    flex: none;
    margin: 8px 10px 6px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .advanced-mobile-room-icon {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    border-radius: 11px !important;
  }

  .advanced-mobile-room-icon svg {
    width: 19px !important;
    height: 19px !important;
  }

  .advanced-mobile-room-title h1 {
    font-size: 17px !important;
  }

  .advanced-mobile-room-copy {
    margin-top: 2px !important;
    font-size: 9.5px !important;
  }

  .advanced-mobile-room-actions {
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .advanced-mobile-room-actions button {
    display: flex !important;
    min-height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 5px 8px !important;
    border-radius: 11px !important;
    text-align: center !important;
  }

  .advanced-mobile-room-actions svg {
    width: 16px !important;
    height: 16px !important;
  }

  .advanced-mobile-room-actions b {
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body[data-route-view="advanced"] .advanced-mobile-tabs {
    flex: none;
    min-height: 36px !important;
    padding: 0 12px !important;
  }

  body[data-route-view="advanced"] .advanced-mobile-tab {
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  body[data-route-view="advanced"] .advanced-feed-column {
    display: grid !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  body[data-route-view="advanced"] .advanced-feed-header,
  body[data-route-view="advanced"] .advanced-live-transfer {
    display: none !important;
  }

  body[data-route-view="advanced"] .advanced-feed {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 12px 12px 18px !important;
    scroll-padding-bottom: 18px !important;
    scrollbar-width: none;
    touch-action: pan-y;
  }

  body[data-route-view="advanced"] .advanced-feed::-webkit-scrollbar {
    display: none;
  }

  body[data-route-view="advanced"] .advanced-composer {
    position: relative !important;
    bottom: auto !important;
    z-index: 4 !important;
    flex: none !important;
    gap: 6px !important;
    padding: 8px 10px 7px !important;
    border-radius: 14px 14px 0 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -8px 22px rgba(27, 59, 90, 0.08) !important;
  }

  body[data-route-view="advanced"] .advanced-composer-row {
    grid-template-columns: minmax(0, 1fr) 62px !important;
    gap: 6px !important;
  }

  body[data-route-view="advanced"] .advanced-message-input textarea {
    min-height: 40px !important;
    max-height: 76px !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.send {
    width: 62px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-actions {
    grid-template-columns: repeat(2, 78px) !important;
    gap: 5px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.attachment {
    width: 78px !important;
    min-height: 31px !important;
    padding: 0 7px !important;
    border-radius: 10px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.attachment svg {
    width: 14px !important;
    height: 14px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.attachment span {
    font-size: 10.5px !important;
  }

  .advanced-room-workspace[data-mobile-panel="members"] .advanced-members-column,
  .advanced-room-workspace[data-mobile-panel="info"] .advanced-share-column {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

/* 2026-07 mobile viewport pass: fixed app chrome and one-scroll-region workspaces. */
@media (max-width: 760px) {
  :root {
    --app-header-height: 54px;
    --mobile-header-height: 54px;
    --app-tab-height: 64px;
    --mobile-nav-height: 64px;
  }

  body,
  body[data-app-view],
  body[data-route-view] {
    padding-bottom: calc(var(--app-tab-height) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .page {
    min-height: 100dvh !important;
    padding-top: var(--app-header-height) !important;
  }

  body .page > header.header,
  .page > .header,
  body[data-route-view="advanced"] .header {
    position: fixed !important;
    top: 0 !important;
    right: 0;
    left: 0;
    z-index: 80;
    height: var(--app-header-height) !important;
    min-height: var(--app-header-height) !important;
    padding: 0 14px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 1px 0 rgba(205, 219, 231, 0.92) !important;
  }

  .page > .header .brand {
    gap: 8px !important;
    font-size: 19px !important;
  }

  .page > .header .brand-mark {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 13px rgba(23, 105, 232, 0.2) !important;
  }

  .mobile-bottom-nav {
    min-height: var(--app-tab-height) !important;
    padding: 3px 6px calc(3px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-bottom-nav .app-nav-button {
    min-height: 54px !important;
    gap: 1px !important;
    padding-block: 3px 1px !important;
  }

  .mobile-bottom-nav .app-nav-button svg {
    width: 22px !important;
    height: 22px !important;
  }

  .mobile-bottom-nav .app-nav-button span {
    font-size: 9.5px !important;
  }

  /* Quick transfer is a compact, app-like task flow on phones. */
  body[data-route-view="p2p"] .p2p-wrap {
    padding: 0 0 14px !important;
  }

  body[data-route-view="p2p"] .transfer-card {
    padding: 12px !important;
  }

  body[data-route-view="p2p"] .sender-panel,
  body[data-route-view="p2p"] .receiver-panel,
  body[data-route-view="p2p"] .receiver-panel.receiving {
    gap: 10px !important;
  }

  body[data-route-view="p2p"] .transfer-file-side,
  body[data-route-view="p2p"] .transfer-settings-side,
  body[data-route-view="p2p"] .received-files {
    padding: 15px !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 22px rgba(28, 65, 99, 0.07) !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] .transfer-file-side {
    padding: 16px !important;
    border-color: #c9daeb !important;
    background: #eef6ff !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone {
    min-height: 178px !important;
    justify-content: center;
    padding: 4px !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone::before {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 11px !important;
    border-radius: 13px !important;
    font-size: 23px !important;
    box-shadow: 0 8px 18px rgba(23, 105, 232, 0.2) !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone > strong {
    font-size: 20px !important;
    text-align: center !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone > small {
    margin-top: 4px !important;
    font-size: 11px !important;
    text-align: center !important;
  }

  body[data-route-view="p2p"] .dropzone-actions {
    margin-top: 12px !important;
  }

  body[data-route-view="p2p"] .dropzone-action {
    min-height: 44px !important;
    border-radius: 12px !important;
  }

  body[data-route-view="p2p"] .settings-head {
    min-height: 40px;
  }

  body[data-route-view="p2p"] .settings-head h2,
  body[data-route-view="p2p"] .receiver-panel .settings-head h2 {
    font-size: 18px !important;
  }

  body[data-route-view="p2p"] #createOffer,
  body[data-route-view="p2p"] #createAnswer {
    min-height: 48px !important;
    border-radius: 12px !important;
  }

  body[data-route-view="p2p"][data-quick-panel="receiver"] .transfer-settings-side {
    border-top: 3px solid var(--app-blue) !important;
  }

  body[data-route-view="p2p"][data-quick-panel="receiver"] .settings-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: var(--app-blue);
    background: var(--app-blue-soft);
  }

  /* Advanced transfer owns the viewport; only its active content panel scrolls. */
  body[data-route-view="advanced"] {
    height: 100dvh;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body[data-route-view="advanced"] .page {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-route-view="advanced"] #viewP2p,
  body[data-route-view="advanced"] .p2p-wrap {
    height: calc(100dvh - var(--app-header-height) - var(--app-tab-height) - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-route-view="advanced"] .advanced-room-workspace,
  body[data-route-view="advanced"] .advanced-room-workspace.is-lobby {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body[data-route-view="advanced"] .advanced-mobile-room-summary {
    margin: 8px 10px 6px !important;
    padding: 10px !important;
    border-radius: 15px !important;
  }

  .advanced-mobile-room-title {
    gap: 9px !important;
  }

  .advanced-mobile-room-icon {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 11px !important;
  }

  .advanced-mobile-room-title h1 {
    font-size: 17px !important;
  }

  .advanced-mobile-room-copy {
    margin-top: 2px !important;
    font-size: 9.5px !important;
  }

  .advanced-mobile-room-actions {
    gap: 7px !important;
    margin-top: 8px !important;
  }

  .advanced-mobile-room-actions button {
    display: flex !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    border-radius: 11px !important;
    text-align: center !important;
  }

  .advanced-mobile-room-actions svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px;
  }

  .advanced-mobile-room-actions b {
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body[data-route-view="advanced"] .advanced-mobile-tabs {
    min-height: 40px !important;
    padding-inline: 10px !important;
  }

  body[data-route-view="advanced"] .advanced-mobile-tabs button {
    min-height: 40px !important;
    gap: 5px !important;
    font-size: 11px !important;
  }

  body[data-route-view="advanced"] .advanced-mobile-tabs svg {
    width: 16px !important;
    height: 16px !important;
  }

  body[data-route-view="advanced"] .advanced-members-column,
  body[data-route-view="advanced"] .advanced-feed-column,
  body[data-route-view="advanced"] .advanced-share-column {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .advanced-room-workspace:not([data-mobile-panel]) .advanced-feed-column,
  .advanced-room-workspace[data-mobile-panel="feed"] .advanced-feed-column {
    height: 100%;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    overflow: hidden !important;
  }

  body[data-route-view="advanced"] .advanced-feed {
    height: 100%;
    min-height: 0 !important;
    padding: 12px 10px 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: none;
    touch-action: pan-y;
  }

  body[data-route-view="advanced"] .advanced-feed::-webkit-scrollbar {
    display: none;
  }

  body[data-route-view="advanced"] .advanced-live-transfer {
    flex: none;
    max-height: min(116px, 18dvh) !important;
  }

  body[data-route-view="advanced"] .advanced-composer {
    position: relative !important;
    z-index: 4;
    flex: none;
    gap: 6px !important;
    padding: 8px 10px !important;
    border-radius: 0 !important;
    box-shadow: 0 -8px 22px rgba(27, 59, 90, 0.07) !important;
    overscroll-behavior: none;
  }

  body[data-route-view="advanced"] .advanced-message-input textarea {
    min-height: 42px !important;
    max-height: 78px !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-row {
    grid-template-columns: minmax(0, 1fr) 62px !important;
    gap: 7px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.send {
    width: 62px !important;
    min-height: 42px !important;
    border-radius: 13px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-actions {
    grid-template-columns: repeat(2, 76px) !important;
    gap: 5px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.attachment {
    width: 76px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
  }
}

.file-actions .icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

@media (max-width: 760px) {
  :root {
    --app-header-height: 58px;
    --app-tab-height: 70px;
    --app-bg: #f2f6fa;
    --app-surface: #ffffff;
    --app-surface-soft: #f7f9fc;
    --app-border: #dce5ee;
    --app-text: #14263a;
    --app-muted: #6f8093;
    --app-blue: #1769e8;
    --app-blue-soft: #eaf3ff;
    --app-green: #07966d;
    --app-green-soft: #e8f8f2;
    --app-red: #dc3d47;
    --app-shadow: 0 8px 24px rgba(30, 63, 94, 0.08);
  }

  html {
    background: var(--app-bg);
    scroll-padding-bottom: calc(var(--app-tab-height) + 20px);
  }

  body,
  body[data-app-view],
  body[data-route-view] {
    min-width: 320px;
    padding-bottom: calc(var(--app-tab-height) + env(safe-area-inset-bottom, 0px)) !important;
    color: var(--app-text);
    background: var(--app-bg) !important;
    background-image: none !important;
    background-attachment: scroll !important;
  }

  body::before,
  body::after {
    display: none !important;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
    letter-spacing: 0;
  }

  button,
  a,
  label {
    -webkit-tap-highlight-color: transparent;
  }

  .page {
    width: 100% !important;
    min-height: 100dvh;
    padding: 0 !important;
  }

  .page > .header {
    position: sticky !important;
    top: 0;
    z-index: 60;
    display: flex !important;
    width: 100% !important;
    height: var(--app-header-height) !important;
    min-height: var(--app-header-height) !important;
    align-items: center;
    justify-content: flex-start !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(210, 222, 232, 0.9) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
  }

  .page > .header .brand {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0;
    align-items: center;
    gap: 9px !important;
    color: var(--app-text);
    font-size: 20px !important;
    font-weight: 850;
  }

  .page > .header .brand-mark {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    box-shadow: 0 5px 14px rgba(23, 105, 232, 0.2);
  }

  body[data-app-view] .page > .header .app-nav,
  .page > .header .header-actions,
  .site-footer,
  .sponsor-card,
  .privacy {
    display: none !important;
  }

  .site-announcement {
    width: calc(100% - 24px) !important;
    margin: 10px auto 0 !important;
    border-radius: 12px !important;
    font-size: 12px;
  }

  .mobile-app-bar {
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px 12px;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface);
  }

  .mobile-app-bar > div {
    min-width: 0;
  }

  .mobile-app-bar h1 {
    margin: 0;
    font-size: 23px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .mobile-app-bar p {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--app-muted);
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-encryption-state {
    display: inline-flex;
    min-height: 30px;
    flex: none;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border: 1px solid #bfe8da;
    border-radius: 999px;
    color: var(--app-green);
    background: var(--app-green-soft);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
  }

  .mobile-encryption-state svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
  }

  .mobile-bottom-nav {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 70;
    display: grid !important;
    min-height: var(--app-tab-height) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(207, 219, 230, 0.94) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 -8px 24px rgba(28, 57, 87, 0.07) !important;
    backdrop-filter: blur(20px) saturate(145%);
  }

  .mobile-bottom-nav .app-nav-button {
    position: relative;
    display: grid !important;
    min-width: 0;
    min-height: 58px !important;
    place-items: center;
    align-content: center;
    gap: 2px !important;
    padding: 4px 1px 2px !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #7c8999 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: color 160ms ease, transform 160ms ease !important;
  }

  .mobile-bottom-nav .app-nav-button::before {
    position: absolute;
    top: 1px;
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: transparent;
    content: "";
  }

  .mobile-bottom-nav .app-nav-button::after {
    display: none !important;
  }

  .mobile-bottom-nav .app-nav-button svg {
    width: 24px !important;
    height: 24px !important;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
  }

  .mobile-bottom-nav .app-nav-button span {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px !important;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-bottom-nav .app-nav-button.active {
    color: var(--app-blue) !important;
    background: transparent !important;
  }

  .mobile-bottom-nav .app-nav-button.active::before {
    background: var(--app-blue);
  }

  .mobile-bottom-nav .app-nav-button.active svg {
    transform: none !important;
  }

  .mobile-bottom-nav .app-nav-button:active {
    transform: scale(0.92);
  }

  .toast {
    right: 14px !important;
    bottom: calc(var(--app-tab-height) + env(safe-area-inset-bottom, 0px) + 14px) !important;
    left: 14px !important;
    width: auto !important;
    border-radius: 12px !important;
  }

  /* Quick transfer */
  body[data-route-view="p2p"] #viewP2p,
  body[data-route-view="p2p"] .p2p-wrap {
    width: 100% !important;
  }

  body[data-route-view="p2p"] .p2p-wrap {
    padding: 0 0 18px !important;
  }

  body[data-route-view="p2p"] .intro {
    display: none !important;
  }

  body[data-route-view="p2p"] .transfer-card {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body[data-route-view="p2p"] .sender-panel,
  body[data-route-view="p2p"] .receiver-panel,
  body[data-route-view="p2p"] .receiver-panel.receiving {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body[data-route-view="p2p"] .sender-panel.hidden,
  body[data-route-view="p2p"] .receiver-panel.hidden {
    display: none !important;
  }

  body[data-route-view="p2p"] .transfer-file-side,
  body[data-route-view="p2p"] .transfer-settings-side,
  body[data-route-view="p2p"] .received-files {
    width: 100% !important;
    padding: 16px !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 18px !important;
    background: var(--app-surface) !important;
    box-shadow: var(--app-shadow) !important;
    backdrop-filter: none !important;
  }

  body[data-route-view="p2p"] .transfer-file-side {
    order: 1;
  }

  body[data-route-view="p2p"] #sender > .file-list {
    order: 2;
  }

  body[data-route-view="p2p"] #sender > .transfer-settings-side {
    order: 3;
  }

  body[data-route-view="p2p"][data-selected-files="0"] #sender > .transfer-settings-side,
  body[data-route-view="p2p"][data-selected-files="0"] #sender > .file-list {
    display: none !important;
  }

  body[data-app-view="p2p"][data-route-view="p2p"] #viewP2p #sender #dropzone {
    display: flex !important;
    min-height: 0 !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    padding: 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body[data-app-view="p2p"][data-route-view="p2p"] #viewP2p #sender .upload-mark {
    display: none !important;
  }

  body[data-app-view="p2p"][data-route-view="p2p"] #viewP2p #sender .dropzone strong {
    width: 100%;
    color: var(--app-text);
    font-size: 18px !important;
    line-height: 1.35;
    text-align: left;
  }

  body[data-app-view="p2p"][data-route-view="p2p"] #viewP2p #sender .dropzone > small {
    display: block !important;
    max-width: none;
    margin-top: 5px;
    color: var(--app-muted);
    font-size: 12px;
    line-height: 1.55;
    text-align: left;
  }

  body[data-app-view="p2p"][data-route-view="p2p"] #viewP2p #sender .dropzone > .dropzone-support {
    display: none !important;
  }

  body[data-app-view="p2p"][data-route-view="p2p"] #viewP2p #sender .dropzone-actions {
    display: grid !important;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 9px !important;
    margin-top: 13px !important;
  }

  body[data-app-view="p2p"][data-route-view="p2p"] #viewP2p #sender #chooseFolderButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  body[data-app-view="p2p"][data-route-view="p2p"] .dropzone-action {
    min-width: 0;
    min-height: 48px !important;
    padding: 0 10px !important;
    border: 1px solid #cddae6 !important;
    border-radius: 13px !important;
    color: #27415b !important;
    background: var(--app-surface-soft) !important;
    font-size: 13px !important;
    font-weight: 750;
    box-shadow: none !important;
  }

  body[data-app-view="p2p"][data-route-view="p2p"] .dropzone-action.primary {
    border-color: var(--app-blue) !important;
    color: #fff !important;
    background: var(--app-blue) !important;
  }

  body[data-route-view="p2p"] .dropzone-action:active,
  body[data-route-view="p2p"] .button:active {
    transform: scale(0.97);
  }

  body[data-route-view="p2p"][data-selected-files]:not([data-selected-files="0"]) .dropzone {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    padding: 0 !important;
  }

  body[data-route-view="p2p"][data-selected-files]:not([data-selected-files="0"]) .upload-mark,
  body[data-route-view="p2p"][data-selected-files]:not([data-selected-files="0"]) .dropzone > strong,
  body[data-route-view="p2p"][data-selected-files]:not([data-selected-files="0"]) .dropzone > small {
    display: none !important;
  }

  body[data-route-view="p2p"][data-selected-files]:not([data-selected-files="0"]) .dropzone-actions {
    margin-top: 0 !important;
  }

  body[data-route-view="p2p"] #sender > .file-list:not(:empty) {
    display: grid !important;
    width: 100%;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  body[data-route-view="p2p"] .file-item {
    display: grid !important;
    min-width: 0;
    min-height: 66px;
    grid-template-columns: 8px minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 9px;
    padding: 11px 12px !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 14px !important;
    background: var(--app-surface) !important;
    box-shadow: none !important;
  }

  body[data-route-view="p2p"] .file-item .file-dot {
    grid-row: 1 / span 2;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--app-green);
  }

  body[data-route-view="p2p"] .file-item .file-name {
    grid-column: 2;
    overflow: hidden;
    color: var(--app-text);
    font-size: 13px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-route-view="p2p"] .file-item .file-type,
  body[data-route-view="p2p"] .file-item .file-size {
    color: var(--app-muted);
    font-size: 10px;
  }

  body[data-route-view="p2p"] .file-item .file-type {
    grid-column: 2;
    grid-row: 2;
  }

  body[data-route-view="p2p"] .file-item .file-size {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  body[data-route-view="p2p"] .file-item .remove-file {
    grid-column: 4;
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    color: #748497;
    background: #f1f4f7;
    font-size: 20px;
  }

  body[data-route-view="p2p"] .file-tooltip,
  body[data-route-view="p2p"] .file-state {
    display: none !important;
  }

  body[data-route-view="p2p"] .settings-head {
    align-items: center;
  }

  body[data-route-view="p2p"] .settings-head h2 {
    font-size: 19px !important;
  }

  body[data-route-view="p2p"] .security-badge {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
  }

  body[data-route-view="p2p"] .field {
    margin-top: 14px !important;
  }

  body[data-route-view="p2p"] .field-label-row {
    margin-bottom: 7px;
  }

  body[data-route-view="p2p"] .field label,
  body[data-route-view="p2p"] .field-label-row label {
    color: #334b63;
    font-size: 12px;
    font-weight: 750;
  }

  body[data-route-view="p2p"] .inline-action {
    color: var(--app-blue);
    font-size: 12px;
    font-weight: 750;
  }

  body[data-route-view="p2p"] .password-row {
    display: grid !important;
    min-height: 50px;
    grid-template-columns: minmax(0, 1fr) auto !important;
    overflow: hidden;
    border: 1px solid #cfdce7 !important;
    border-radius: 13px !important;
    background: #fff !important;
  }

  body[data-route-view="p2p"] .password-row input {
    min-width: 0;
    min-height: 48px;
    padding: 0 13px !important;
    border: 0 !important;
    font-size: 14px !important;
  }

  body[data-route-view="p2p"] #toggleSendPass {
    display: none !important;
  }

  body[data-route-view="p2p"] .password-row .compact-action {
    min-width: 58px;
    min-height: 48px;
    border: 0 !important;
    border-left: 1px solid #d8e2eb !important;
    border-radius: 0 !important;
    color: var(--app-blue);
    background: #f8fbff;
    font-size: 12px;
    font-weight: 750;
  }

  body[data-route-view="p2p"] .field-tip,
  body[data-route-view="p2p"] .expiry-note {
    margin-top: 8px;
    color: var(--app-muted);
    font-size: 10px;
    line-height: 1.45;
  }

  body[data-route-view="p2p"] #createOffer,
  body[data-route-view="p2p"] #createAnswer {
    min-height: 50px !important;
    margin-top: 16px;
    border-radius: 13px !important;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(23, 105, 232, 0.17) !important;
  }

  body[data-route-view="p2p"] #createOffer:disabled {
    box-shadow: none !important;
  }

  body[data-route-view="p2p"] .receiver-panel .settings-head h2 {
    font-size: 21px !important;
  }

  body[data-route-view="p2p"] .receiver-panel .settings-head > div > span {
    color: var(--app-muted);
    font-size: 11px;
  }

  body[data-route-view="p2p"] .room-input,
  body[data-route-view="p2p"] .receiver-panel .field > input {
    min-height: 50px !important;
    border-radius: 13px !important;
  }

  body[data-route-view="p2p"] .connection-box,
  body[data-route-view="p2p"] .status-box {
    border-radius: 14px !important;
  }

  body[data-route-view="p2p"] .received-files {
    margin: 0 !important;
  }

  body[data-route-view="p2p"] .received-files:empty {
    display: none !important;
  }

  /* Quick-transfer modal is a native bottom sheet on phones. */
  .transfer-modal-scrim,
  .confirm-modal-scrim,
  .advanced-join-scrim,
  .settings-modal-scrim {
    background: rgba(15, 28, 42, 0.52) !important;
    backdrop-filter: blur(4px);
  }

  .transfer-modal {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 18px) !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -18px 48px rgba(15, 36, 58, 0.24) !important;
  }

  .transfer-modal-head {
    min-height: 58px !important;
    padding: 16px 18px 12px !important;
    border-bottom: 1px solid var(--app-border);
  }

  .transfer-modal-head h2 {
    font-size: 18px !important;
  }

  .transfer-modal-body {
    padding: 16px !important;
    overscroll-behavior: contain;
  }

  .transfer-qr-panel {
    display: none !important;
  }

  .transfer-code {
    min-height: 52px;
    border-radius: 13px !important;
    font-size: 24px !important;
  }

  .transfer-link-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .transfer-link-row input,
  .transfer-link-row button {
    min-height: 46px !important;
  }

  .transfer-modal-actions {
    position: sticky;
    bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff;
  }

  .confirm-modal,
  .settings-modal,
  .advanced-join-modal {
    border-radius: 22px !important;
  }

  /* Advanced transfer: one full-screen room, not compressed desktop columns. */
  body[data-route-view="advanced"] #mobileTransferAppBar,
  body[data-route-view="advanced"] .intro,
  body[data-route-view="advanced"] .transfer-card {
    display: none !important;
  }

  body[data-route-view="advanced"] .p2p-wrap {
    width: 100% !important;
    padding: 0 !important;
  }

  body[data-route-view="advanced"] .advanced-room-workspace,
  body[data-route-view="advanced"] .advanced-room-workspace.is-lobby {
    display: flex !important;
    width: 100% !important;
    min-height: calc(100dvh - var(--app-header-height) - var(--app-tab-height)) !important;
    max-height: calc(100dvh - var(--app-header-height) - var(--app-tab-height)) !important;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--app-bg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body[data-route-view="advanced"] .advanced-room-workspace.hidden {
    display: none !important;
  }

  .advanced-mobile-tabs {
    order: 1;
    display: grid !important;
    min-height: 48px;
    flex: none;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
    background: #fff !important;
  }

  .advanced-mobile-tabs button {
    position: relative;
    display: flex;
    min-height: 48px !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    color: #778799 !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 750;
  }

  .advanced-mobile-tabs button::after {
    position: absolute;
    right: 28%;
    bottom: 0;
    left: 28%;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: transparent;
    content: "";
  }

  .advanced-mobile-tabs button.active {
    color: var(--app-blue) !important;
  }

  .advanced-mobile-tabs button.active::after {
    background: var(--app-blue);
  }

  .advanced-mobile-tabs svg {
    width: 18px;
    height: 18px;
  }

  body[data-route-view="advanced"] .advanced-members-column,
  body[data-route-view="advanced"] .advanced-feed-column,
  body[data-route-view="advanced"] .advanced-share-column {
    order: 2;
    width: 100% !important;
    min-height: 0;
    flex: 1 1 auto;
    border: 0 !important;
    background: var(--app-bg) !important;
  }

  .advanced-room-workspace:not([data-mobile-panel]) .advanced-members-column,
  .advanced-room-workspace:not([data-mobile-panel]) .advanced-share-column,
  .advanced-room-workspace[data-mobile-panel="feed"] .advanced-members-column,
  .advanced-room-workspace[data-mobile-panel="feed"] .advanced-share-column,
  .advanced-room-workspace[data-mobile-panel="members"] .advanced-feed-column,
  .advanced-room-workspace[data-mobile-panel="members"] .advanced-share-column,
  .advanced-room-workspace[data-mobile-panel="info"] .advanced-members-column,
  .advanced-room-workspace[data-mobile-panel="info"] .advanced-feed-column {
    display: none !important;
  }

  .advanced-room-workspace:not([data-mobile-panel]) .advanced-feed-column,
  .advanced-room-workspace[data-mobile-panel="feed"] .advanced-feed-column {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  }

  .advanced-room-workspace[data-mobile-panel="members"] .advanced-members-column {
    display: flex !important;
    overflow-y: auto !important;
    padding: 16px !important;
    overscroll-behavior: contain;
  }

  .advanced-room-workspace[data-mobile-panel="info"] .advanced-share-column {
    display: block !important;
    overflow-y: auto !important;
    padding: 16px 16px calc(var(--app-tab-height) + env(safe-area-inset-bottom, 0px) + 24px) !important;
    overscroll-behavior: contain;
  }

  body[data-route-view="advanced"] .advanced-feed-header {
    min-height: 66px !important;
    padding: 11px 15px !important;
    border-bottom: 1px solid var(--app-border) !important;
    background: #fff !important;
  }

  body[data-route-view="advanced"] .advanced-feed-header strong {
    font-size: 17px !important;
  }

  body[data-route-view="advanced"] .advanced-feed-header small {
    display: block;
    max-width: 245px;
    margin-top: 3px;
    overflow: hidden;
    color: var(--app-muted);
    font-size: 10px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-route-view="advanced"] .advanced-room-badge {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
  }

  body[data-route-view="advanced"] .advanced-feed {
    min-height: 0 !important;
    padding: 14px 12px 20px !important;
    overflow-y: auto !important;
    background: #f3f6f9 !important;
    overscroll-behavior: contain;
  }

  body[data-route-view="advanced"] .advanced-feed-empty {
    min-height: 0 !important;
    margin: 8px 0 0 !important;
    padding: 22px 18px !important;
    border: 1px dashed #cbd8e4;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
  }

  body[data-route-view="advanced"] .advanced-feed-empty > span {
    width: 42px;
    height: 42px;
  }

  body[data-route-view="advanced"] .advanced-feed-empty strong {
    margin-top: 9px;
    font-size: 15px;
  }

  body[data-route-view="advanced"] .advanced-feed-empty small {
    margin-top: 4px;
    font-size: 11px;
  }

  body[data-route-view="advanced"] .advanced-feed-event {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  body[data-route-view="advanced"] .advanced-feed-event.is-own {
    grid-template-columns: minmax(0, 1fr) 34px !important;
  }

  body[data-route-view="advanced"] .advanced-feed-avatar {
    width: 34px !important;
    height: 34px !important;
  }

  body[data-route-view="advanced"] .advanced-text-bubble,
  body[data-route-view="advanced"] .advanced-file-card {
    border-radius: 14px !important;
    box-shadow: 0 3px 10px rgba(26, 55, 84, 0.05);
  }

  body[data-route-view="advanced"] .advanced-file-card {
    min-height: 66px !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  body[data-route-view="advanced"] .advanced-file-progress {
    grid-column: 1 / -1;
  }

  body[data-route-view="advanced"] .advanced-live-transfer {
    max-height: 132px !important;
    padding: 8px 12px !important;
    overflow-y: auto !important;
    border-top: 1px solid var(--app-border) !important;
    background: #fff !important;
  }

  body[data-route-view="advanced"] .advanced-composer {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 120px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    align-self: end !important;
    align-content: start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 9px 12px 10px !important;
    border: 0 !important;
    border-top: 1px solid var(--app-border) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body[data-route-view="advanced"] .advanced-message-input {
    width: 100%;
    height: auto !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  body[data-route-view="advanced"] .advanced-message-input textarea {
    width: 100%;
    min-height: 44px !important;
    max-height: 92px !important;
    padding: 11px 13px !important;
    border: 1px solid #cedbe6 !important;
    border-radius: 13px !important;
    background: #f8fafc !important;
    font-size: 14px !important;
    line-height: 1.45;
  }

  body[data-route-view="advanced"] .advanced-composer-actions {
    display: grid !important;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button {
    display: inline-flex !important;
    min-width: 0 !important;
    min-height: 43px !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px !important;
    border: 1px solid #cfdbe6 !important;
    border-radius: 12px !important;
    color: #324c66 !important;
    background: #f8fafc !important;
    box-shadow: none !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.send {
    border-color: var(--app-blue) !important;
    color: #fff !important;
    background: var(--app-blue) !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button span {
    display: inline !important;
    font-size: 12px;
    font-weight: 750;
  }

  body[data-route-view="advanced"] .advanced-composer-button svg {
    width: 17px;
    height: 17px;
  }

  body[data-route-view="advanced"] .advanced-room-brand {
    padding: 0 0 15px !important;
    border-bottom: 1px solid var(--app-border);
  }

  body[data-route-view="advanced"] .advanced-create-room-button {
    min-height: 48px;
    margin-top: 14px;
    border-radius: 13px !important;
  }

  body[data-route-view="advanced"] .advanced-member-heading {
    margin-top: 18px !important;
  }

  body[data-route-view="advanced"] .advanced-member-list {
    display: grid;
    gap: 8px;
    overflow: visible !important;
  }

  body[data-route-view="advanced"] .advanced-member {
    min-height: 64px !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    padding: 10px 12px !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  body[data-route-view="advanced"] .advanced-member-avatar {
    width: 42px !important;
    height: 42px !important;
  }

  body[data-route-view="advanced"] .advanced-network-note {
    margin-top: 16px !important;
    border-radius: 14px !important;
  }

  body[data-route-view="advanced"] .advanced-invite-panel {
    padding: 0 0 12px !important;
  }

  body[data-route-view="advanced"] .advanced-room-settings,
  body[data-route-view="advanced"] .advanced-share-link,
  body[data-route-view="advanced"] .advanced-share-qr,
  body[data-route-view="advanced"] .advanced-room-facts {
    border-radius: 14px !important;
  }

  body[data-route-view="advanced"] .advanced-share-qr {
    min-height: 180px !important;
  }

  body[data-route-view="advanced"] .advanced-room-actions {
    grid-template-columns: 1fr !important;
  }

  body[data-route-view="advanced"] .advanced-share-column .advanced-room-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 14px !important;
    padding: 12px 0 4px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(248, 252, 255, 0.96) 28%, rgba(248, 252, 255, 0.98));
  }

  .advanced-join-modal {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #fff !important;
  }

  .advanced-join-modal header {
    padding: 18px 18px 12px !important;
  }

  .advanced-join-form {
    padding: 8px 18px 18px !important;
  }

  .advanced-join-form input {
    min-height: 50px !important;
    border-radius: 13px !important;
  }

  .advanced-join-modal footer {
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Cloud application */
  body[data-app-view="cloud"] #viewCloud {
    width: 100% !important;
    padding: 0 0 18px !important;
  }

  body[data-app-view="cloud"] .cloud-hero {
    display: none !important;
  }

  body[data-app-view="cloud"] .cloud-dashboard,
  body[data-app-view="cloud"] .cloud-guest {
    width: auto !important;
    margin: 14px !important;
  }

  body[data-app-view="cloud"] .cloud-dashboard {
    display: grid !important;
    gap: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body[data-app-view="cloud"] .cloud-dashboard.hidden {
    display: none !important;
  }

  body[data-app-view="cloud"] .dashboard-head {
    display: none !important;
  }

  body[data-app-view="cloud"] .quota-card,
  body[data-app-view="cloud"] .cloud-dropzone,
  body[data-app-view="cloud"] .cloud-upload-queue:not(:empty),
  body[data-app-view="cloud"] .files-section,
  body[data-app-view="cloud"] .cloud-guest {
    border: 1px solid var(--app-border) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: var(--app-shadow) !important;
    backdrop-filter: none !important;
  }

  body[data-app-view="cloud"] .quota-card {
    padding: 18px !important;
  }

  body[data-app-view="cloud"] .quota-row strong {
    color: var(--app-blue);
    font-size: 18px !important;
  }

  body[data-app-view="cloud"] .quota-track {
    height: 8px;
    margin-top: 12px;
    border-radius: 4px;
    background: #e9eff5;
  }

  body[data-app-view="cloud"] .cloud-dropzone {
    display: grid !important;
    min-height: 96px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 12px !important;
    padding: 15px !important;
  }

  body[data-app-view="cloud"] .cloud-upload-icon {
    display: grid;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    place-items: center;
    border-radius: 14px !important;
    color: var(--app-blue);
    background: var(--app-blue-soft);
  }

  body[data-app-view="cloud"] .cloud-dropzone span strong,
  body[data-app-view="cloud"] .cloud-dropzone span small {
    display: block;
  }

  body[data-app-view="cloud"] .cloud-dropzone span strong {
    font-size: 14px;
  }

  body[data-app-view="cloud"] .cloud-dropzone span small {
    margin-top: 3px;
    overflow: hidden;
    color: var(--app-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-app-view="cloud"] .choose-button {
    display: inline-flex;
    min-height: 42px !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    color: #fff;
    background: var(--app-blue);
    font-size: 11px;
    font-weight: 750;
  }

  body[data-app-view="cloud"] .files-section {
    padding: 15px 12px !important;
  }

  body[data-app-view="cloud"] .files-heading {
    padding: 0 3px 12px !important;
  }

  body[data-app-view="cloud"] .files-heading h3 {
    font-size: 17px;
  }

  body[data-app-view="cloud"] .cloud-file-list {
    display: grid;
    gap: 1px !important;
    overflow: hidden;
    border: 1px solid #e2e9f0;
    border-radius: 14px !important;
    background: #e2e9f0;
  }

  body[data-app-view="cloud"] .cloud-file-card {
    display: grid !important;
    min-height: 76px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 8px;
    padding: 11px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body[data-app-view="cloud"] .file-main {
    min-width: 0;
  }

  body[data-app-view="cloud"] .file-main strong,
  body[data-app-view="cloud"] .file-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-app-view="cloud"] .file-actions {
    width: auto !important;
  }

  body[data-app-view="cloud"] .file-actions .icon-button {
    min-height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 10px;
  }

  body[data-app-view="cloud"] .cloud-guest {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  body[data-app-view="cloud"] .cloud-guest-points,
  body[data-app-view="cloud"] .cloud-guest-actions {
    grid-column: 1 / -1;
  }

  /* Profile application */
  body[data-app-view="profile"] #viewProfile {
    width: 100% !important;
  }

  .mobile-profile-shell {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 14px 18px !important;
  }

  .mobile-section-header {
    margin: 0 -14px 14px !important;
    padding: 15px 16px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .mobile-section-header .section-kicker {
    display: none !important;
  }

  .mobile-section-header h1 {
    margin: 0 !important;
    font-size: 23px !important;
    font-weight: 850;
  }

  .mobile-section-header p {
    margin-top: 4px !important;
    color: var(--app-muted);
    font-size: 12px !important;
  }

  .mobile-profile-guest,
  .mobile-profile-card,
  .mobile-profile-actions,
  .mobile-profile-recents,
  .mobile-profile-menu {
    border: 1px solid var(--app-border) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: var(--app-shadow) !important;
    backdrop-filter: none !important;
  }

  .mobile-profile-guest {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 13px !important;
    margin-top: 0 !important;
    padding: 18px !important;
  }

  .mobile-profile-guest.hidden {
    display: none !important;
  }

  .mobile-profile-guest-mark {
    width: 54px !important;
    height: 54px !important;
    border-radius: 17px !important;
    background: var(--app-blue) !important;
    box-shadow: 0 8px 18px rgba(23, 105, 232, 0.18) !important;
  }

  .mobile-profile-guest h2 {
    font-size: 18px !important;
  }

  .mobile-profile-guest p {
    color: var(--app-muted);
    font-size: 11px !important;
    line-height: 1.5;
  }

  .mobile-profile-auth-actions {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px;
  }

  .mobile-profile-auth-actions .button {
    min-height: 46px;
    border-radius: 12px !important;
  }

  .mobile-profile-card,
  .mobile-profile-actions,
  .mobile-profile-recents {
    margin-top: 12px !important;
    padding: 17px !important;
  }

  .mobile-profile-avatar {
    width: 60px !important;
    height: 60px !important;
    border: 0 !important;
    background: var(--app-blue) !important;
    box-shadow: none !important;
  }

  .mobile-profile-identity h2 {
    font-size: 20px !important;
  }

  .mobile-profile-edit {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: var(--app-surface-soft) !important;
  }

  .mobile-profile-stats {
    margin-top: 18px !important;
    padding-top: 17px !important;
  }

  .mobile-profile-stats b {
    font-size: 18px !important;
  }

  .mobile-profile-actions h2,
  .mobile-profile-section-head h2 {
    font-size: 17px !important;
  }

  .mobile-profile-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  .mobile-profile-action-grid button {
    min-width: 0;
    min-height: 96px !important;
    padding: 8px 3px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--app-surface-soft) !important;
    box-shadow: none !important;
  }

  .mobile-profile-action-grid button > span {
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
  }

  .mobile-profile-action-grid button b {
    font-size: 12px !important;
  }

  .mobile-profile-action-grid button small {
    display: none;
  }

  .mobile-profile-recent-list {
    margin-top: 12px !important;
    border-radius: 13px !important;
  }

  .mobile-profile-recent-item {
    min-height: 64px !important;
  }

  .mobile-profile-menu {
    margin-top: 12px !important;
    overflow: hidden;
  }

  .mobile-profile-menu button {
    min-height: 64px !important;
    padding: 11px 16px !important;
    border-bottom: 1px solid #e5ebf1 !important;
  }

  .mobile-profile-menu button span {
    font-size: 14px !important;
  }

  .mobile-profile-menu button small {
    color: var(--app-muted);
    font-size: 10px !important;
  }

  .mobile-profile-menu button i {
    color: #8a98a8;
  }

  /* Shared motion language */
  .app-view:not(.hidden) .mobile-app-bar,
  .app-view:not(.hidden) .mobile-section-header,
  .app-view:not(.hidden) .transfer-card,
  .app-view:not(.hidden) .cloud-dashboard,
  .app-view:not(.hidden) .mobile-profile-shell,
  .advanced-room-workspace:not(.hidden) {
    animation: app-page-enter 220ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
  }

  @keyframes app-page-enter {
    from {
      opacity: 0;
      transform: translateY(5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 370px) {
  .mobile-app-bar {
    min-height: 70px;
    padding-inline: 13px;
  }

  .mobile-app-bar h1,
  .mobile-section-header h1 {
    font-size: 21px !important;
  }

  body[data-route-view="p2p"] .transfer-card,
  .mobile-profile-shell {
    padding-inline: 10px !important;
  }

  body[data-route-view="p2p"] .dropzone-actions {
    grid-template-columns: 1fr !important;
  }

  body[data-app-view="cloud"] .cloud-dashboard,
  body[data-app-view="cloud"] .cloud-guest {
    margin-inline: 10px !important;
  }

  body[data-app-view="cloud"] .cloud-dropzone {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  body[data-app-view="cloud"] .choose-button {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .mobile-profile-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .app-view:not(.hidden) .mobile-app-bar,
  .app-view:not(.hidden) .mobile-section-header,
  .app-view:not(.hidden) .transfer-card,
  .app-view:not(.hidden) .cloud-dashboard,
  .app-view:not(.hidden) .mobile-profile-shell,
  .advanced-room-workspace:not(.hidden) {
    animation: none !important;
  }

  .mobile-bottom-nav .app-nav-button,
  body[data-route-view="p2p"] .dropzone-action,
  body[data-route-view="advanced"] .advanced-composer-button {
    transition: none !important;
  }
}

/* 2026-07 mobile product pass: fixed room context, compact cloud tools and robust sheets. */
@media (max-width: 760px) {
  :root {
    --app-header-height: 74px;
    --mobile-header-height: 74px;
  }

  body .page > header.header,
  .page > .header {
    height: var(--app-header-height) !important;
    min-height: var(--app-header-height) !important;
    padding: 0 18px !important;
  }

  .page > .header .brand {
    gap: 11px !important;
    font-size: 23px !important;
  }

  .page > .header .brand-mark {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(23, 105, 232, 0.25);
  }

  .page > .header .brand-name {
    line-height: 1;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"] #mobileTransferAppBar {
    display: none !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"] .transfer-card {
    padding-top: 16px !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] .transfer-file-side {
    padding: 20px 18px !important;
    border-color: #ccdaea !important;
    background: linear-gradient(150deg, #fff 0%, #f7fbff 100%) !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone::before {
    display: grid;
    width: 50px;
    height: 50px;
    margin-bottom: 14px;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: var(--app-blue);
    box-shadow: 0 10px 22px rgba(23, 105, 232, 0.2);
    content: "↑";
    font-size: 25px;
    font-weight: 800;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone > strong {
    font-size: 21px !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone > small {
    max-width: 290px;
    font-size: 13px;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"] .dropzone-action {
    min-height: 52px !important;
    border-radius: 14px !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"] .privacy {
    display: grid !important;
    width: auto !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 14px 16px !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"] .trust-item {
    min-height: 76px !important;
    padding: 14px !important;
    border: 1px solid rgba(207, 219, 230, 0.85) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 10px 28px rgba(31, 74, 110, 0.08) !important;
    backdrop-filter: blur(16px) saturate(140%);
  }

  body[data-route-view="p2p"][data-quick-panel="sender"] .trust-item strong {
    font-size: 15px !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"] .trust-item small {
    margin-top: 4px;
    font-size: 11px !important;
  }

  /* The room header and primary actions stay fixed while message/member tabs change. */
  body[data-route-view="advanced"] .advanced-mobile-room-summary {
    order: 0;
    display: block;
    flex: none;
    margin: 12px 12px 10px;
    padding: 16px;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--app-shadow);
  }

  .advanced-mobile-room-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
  }

  .advanced-mobile-room-icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: var(--app-blue);
  }

  .advanced-mobile-room-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .advanced-mobile-room-title > div {
    min-width: 0;
  }

  .advanced-mobile-room-title h1 {
    margin: 0;
    overflow: hidden;
    color: var(--app-text);
    font-size: 19px;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .advanced-mobile-room-title p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 5px 0 0;
    color: var(--app-green);
    font-size: 12px;
    font-weight: 750;
  }

  .advanced-mobile-room-title p i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16bd88;
    box-shadow: 0 0 0 4px rgba(22, 189, 136, 0.12);
  }

  .advanced-mobile-room-copy {
    margin: 11px 0 0;
    color: var(--app-muted);
    font-size: 11px;
    line-height: 1.45;
  }

  .advanced-mobile-room-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 13px;
  }

  .advanced-mobile-room-actions button {
    display: grid;
    min-width: 0;
    min-height: 72px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid #d7e2ec;
    border-radius: 14px;
    color: #28445f;
    background: #f8fafc;
    text-align: left;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
  }

  .advanced-mobile-room-actions button:first-child {
    border-color: #bcd4fb;
    color: #145dcf;
    background: #f3f8ff;
  }

  .advanced-mobile-room-actions button:active {
    transform: scale(0.97);
  }

  .advanced-mobile-room-actions svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .advanced-mobile-room-actions span,
  .advanced-mobile-room-actions b,
  .advanced-mobile-room-actions small {
    display: block;
    min-width: 0;
  }

  .advanced-mobile-room-actions b {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .advanced-mobile-room-actions small {
    margin-top: 3px;
    overflow: hidden;
    color: #7b8b9b;
    font-size: 9px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .advanced-mobile-room-actions i {
    color: #8796a5;
    font-size: 20px;
    font-style: normal;
  }

  body[data-route-view="advanced"] .advanced-mobile-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  body[data-route-view="advanced"] .advanced-feed-header,
  body[data-route-view="advanced"] .advanced-room-brand,
  body[data-route-view="advanced"] .advanced-create-room-button {
    display: none !important;
  }

  body[data-route-view="advanced"] .advanced-room-workspace[data-mobile-panel="info"] .advanced-mobile-room-summary,
  body[data-route-view="advanced"] .advanced-room-workspace[data-mobile-panel="info"] .advanced-mobile-tabs {
    display: none !important;
  }

  body[data-route-view="advanced"] .advanced-mobile-subpage-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -16px -16px 16px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.96);
  }

  .advanced-mobile-subpage-head button,
  .advanced-mobile-join-back {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    color: var(--app-text);
    background: #f8fafc;
  }

  .advanced-mobile-subpage-head button span,
  .advanced-mobile-join-back span {
    margin-top: -2px;
    font-size: 30px;
    line-height: 1;
  }

  .advanced-mobile-subpage-head strong,
  .advanced-mobile-subpage-head small {
    display: block;
  }

  .advanced-mobile-subpage-head strong {
    font-size: 17px;
  }

  .advanced-mobile-subpage-head small {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: 10px;
  }

  body[data-route-view="advanced"] .advanced-room-workspace[data-mobile-panel="members"] .advanced-members-column {
    padding-top: 14px !important;
  }

  /* Join is a mobile page, not a floating dialog. */
  body[data-route-view="advanced"] .advanced-join-scrim {
    display: none !important;
  }

  body[data-route-view="advanced"] .advanced-join-modal {
    z-index: 65 !important;
    top: var(--app-header-height) !important;
    right: 0 !important;
    bottom: calc(var(--app-tab-height) + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    display: flex;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    flex-direction: column;
    transform: none !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--app-bg) !important;
    box-shadow: none !important;
    animation: mobile-subpage-in 210ms ease both !important;
  }

  body[data-route-view="advanced"] .advanced-join-modal.hidden {
    display: none !important;
  }

  body[data-route-view="advanced"] .advanced-join-modal > header {
    justify-content: flex-start;
    padding: 14px 16px !important;
    background: #fff;
  }

  body[data-route-view="advanced"] .advanced-join-modal > header > div {
    min-width: 0;
    flex: 1;
  }

  body[data-route-view="advanced"] .advanced-join-modal > header .advanced-mobile-join-back {
    display: grid !important;
  }

  body[data-route-view="advanced"] .advanced-join-modal > header #advancedCloseJoin {
    display: none !important;
  }

  body[data-route-view="advanced"] .advanced-join-form {
    width: calc(100% - 28px);
    margin: 14px auto 0 !important;
    padding: 18px !important;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--app-shadow);
  }

  body[data-route-view="advanced"] .advanced-join-modal > footer {
    width: calc(100% - 28px);
    margin: 16px auto 14px;
    padding: 14px 0 0 !important;
    border: 0 !important;
    background: transparent;
  }

  body[data-route-view="advanced"] .advanced-join-modal > footer .button {
    min-height: 50px;
    border-radius: 13px !important;
  }

  /* Cloud login state and compact file tools. */
  body[data-app-view="cloud"] .cloud-guest.hidden,
  body[data-app-view="cloud"] .cloud-dashboard.hidden {
    display: none !important;
  }

  body[data-app-view="cloud"] .cloud-file-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  body[data-app-view="cloud"] .file-actions {
    display: flex !important;
    width: 100% !important;
    justify-content: flex-end;
    gap: 7px !important;
  }

  body[data-app-view="cloud"] .file-actions .icon-button {
    display: inline-grid !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid #d9e3ec !important;
    border-radius: 11px !important;
    color: #46617a;
    background: #f8fafc;
  }

  body[data-app-view="cloud"] .file-actions .icon-button.danger {
    border-color: #f1d3d6 !important;
    color: var(--app-red) !important;
    background: #fff8f8 !important;
  }

  body[data-app-view="cloud"] .file-actions .icon-button svg {
    width: 18px;
    height: 18px;
  }

  body[data-app-view="cloud"] .file-actions .icon-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .mobile-bottom-nav .app-nav-button {
    outline: none !important;
  }

  .mobile-bottom-nav .app-nav-button:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }

  .mobile-bottom-nav .app-nav-button:focus-visible {
    outline: 2px solid rgba(23, 105, 232, 0.32) !important;
    outline-offset: -5px;
  }

  /* Confirm/info prompts remain fully visible above app navigation. */
  .confirm-modal-scrim {
    z-index: 1400 !important;
  }

  .confirm-modal {
    z-index: 1401 !important;
    top: 50% !important;
    right: 16px !important;
    bottom: auto !important;
    left: 16px !important;
    display: block;
    width: auto !important;
    max-width: 430px !important;
    max-height: calc(100dvh - 120px) !important;
    margin: 0 auto;
    padding: 22px 18px 18px !important;
    transform: translateY(-50%) !important;
    overflow-y: auto;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 22px 60px rgba(14, 35, 55, 0.28) !important;
  }

  .confirm-modal.hidden {
    display: none !important;
  }

  .confirm-modal[data-tone="info"] {
    border-color: #c8ddfc !important;
  }

  .confirm-modal[data-tone="info"] .confirm-modal-icon {
    color: var(--app-blue);
    background: var(--app-blue-soft);
  }

  .confirm-modal.info-only .confirm-modal-actions {
    grid-template-columns: 1fr;
  }

  .confirm-modal.info-only #confirmModalOk {
    border-color: var(--app-blue);
    background: var(--app-blue);
  }

  .confirm-modal-actions .button {
    min-width: 0 !important;
    min-height: 48px;
    border-radius: 13px !important;
  }

  /* Account settings is an intentional, scroll-safe full-height sheet. */
  .settings-modal-scrim {
    z-index: 1300 !important;
  }

  .settings-modal {
    z-index: 1301 !important;
    top: var(--app-header-height) !important;
    right: 0 !important;
    bottom: calc(var(--app-tab-height) + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    width: 100% !important;
    max-height: none !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--app-bg) !important;
    box-shadow: none !important;
  }

  .settings-modal-head {
    padding: 15px 16px 13px !important;
    background: #fff;
  }

  .settings-modal-head h2 {
    font-size: 19px !important;
    letter-spacing: 0 !important;
  }

  .settings-modal-head p {
    font-size: 11px !important;
  }

  .settings-modal-body {
    gap: 12px !important;
    padding: 14px !important;
  }

  .settings-modal-body form,
  .settings-modal-body .drawer-actions {
    padding: 16px !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 17px !important;
    background: #fff !important;
  }

  .settings-modal-body .text-action {
    min-height: 46px;
    border-radius: 12px !important;
  }

  /* Final mobile polish: consistent app chrome, compact room context, safer prompts. */
  body .page > header.header,
  .page > .header {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 16px !important;
  }

  .page > .header .brand {
    gap: 10px !important;
    font-size: 22px !important;
  }

  .page > .header .brand-mark {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 14px !important;
  }

  body[data-route-view="p2p"] #mobileTransferAppBar,
  body[data-app-view="cloud"] .mobile-cloud-app-bar,
  body[data-app-view="profile"] .mobile-section-header {
    display: none !important;
  }

  body[data-app-view="profile"] .mobile-profile-shell {
    padding-top: 14px !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"] .transfer-card {
    padding-top: 14px !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] .transfer-file-side {
    padding: 22px 18px !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 92% 6%, rgba(23, 105, 232, 0.13), transparent 34%),
      linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(238, 248, 255, 0.98)) !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone {
    min-height: 218px !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone::before {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    content: "↑" !important;
    box-shadow: 0 12px 26px rgba(23, 105, 232, 0.22) !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"][data-selected-files="0"] #dropzone > strong {
    font-size: 23px !important;
    font-weight: 880 !important;
  }

  body[data-route-view="p2p"][data-quick-panel="sender"] .dropzone-action {
    min-height: 50px !important;
    border-radius: 16px !important;
  }

  body[data-route-view="advanced"] .advanced-mobile-room-summary {
    margin: 10px 12px 8px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .advanced-mobile-room-title {
    gap: 10px !important;
  }

  .advanced-mobile-room-icon {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    border-radius: 13px !important;
  }

  .advanced-mobile-room-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .advanced-mobile-room-meta {
    min-width: 0;
    flex: 1;
  }

  .advanced-mobile-room-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
  }

  .advanced-mobile-room-title h1 {
    flex: 0 1 auto;
    font-size: 18px !important;
  }

  .advanced-mobile-room-title p {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(7, 150, 109, 0.09);
    font-size: 10px !important;
    white-space: nowrap;
  }

  .advanced-mobile-room-title p i {
    width: 6px !important;
    height: 6px !important;
    box-shadow: none !important;
  }

  .advanced-mobile-room-copy {
    margin: 4px 0 0 !important;
    font-size: 11px !important;
  }

  .advanced-mobile-room-actions {
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .advanced-mobile-room-actions button {
    min-height: 48px !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 8px 10px !important;
    border-radius: 15px !important;
  }

  .advanced-mobile-room-actions svg {
    width: 20px !important;
    height: 20px !important;
  }

  .advanced-mobile-room-actions b {
    font-size: 12px !important;
  }

  .advanced-mobile-room-actions small,
  .advanced-mobile-room-actions i {
    display: none !important;
  }

  body[data-route-view="advanced"] .advanced-feed-column {
    min-height: 0 !important;
  }

  body[data-route-view="advanced"] .advanced-feed {
    min-height: 0 !important;
    padding-bottom: 18px !important;
    scroll-padding-bottom: 150px;
  }

  body[data-route-view="advanced"] .advanced-feed-event:last-child {
    margin-bottom: 8px !important;
  }

  body[data-route-view="advanced"] .advanced-composer {
    max-height: none !important;
    gap: 8px !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 18px 18px 0 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 -12px 28px rgba(27, 59, 90, 0.09) !important;
  }

  body[data-route-view="advanced"] .advanced-composer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 8px;
    align-items: end;
  }

  body[data-route-view="advanced"] .advanced-message-input textarea {
    min-height: 46px !important;
    max-height: 92px !important;
    padding: 12px 14px !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(208, 221, 232, 0.7) !important;
  }

  body[data-route-view="advanced"] .advanced-composer-actions {
    grid-template-columns: repeat(2, 104px) !important;
    justify-content: flex-start !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button {
    min-height: 42px !important;
    border-radius: 15px !important;
    background: rgba(248, 251, 255, 0.94) !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.send {
    width: 70px;
    min-height: 46px !important;
    border-radius: 17px !important;
    box-shadow: 0 10px 18px rgba(23, 105, 232, 0.18) !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.send svg {
    display: none;
  }

  body[data-route-view="advanced"] .advanced-composer-button.attachment {
    width: 104px;
  }

  .avatar-settings-card {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 16px !important;
    border: 1px solid var(--app-border);
    border-radius: 17px;
    background: #fff;
  }

  .avatar-settings-preview {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    color: #fff;
    background: var(--app-blue);
    background-position: center;
    background-size: cover;
    font-size: 24px;
    font-weight: 850;
  }

  .avatar-settings-card strong,
  .avatar-settings-card small {
    display: block;
  }

  .avatar-settings-card small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 11px;
    line-height: 1.45;
  }

  .avatar-settings-picker {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #cbd8e5;
    border-radius: 13px;
    color: var(--app-blue);
    background: var(--app-blue-soft);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  .settings-modal-body .background-form {
    display: none !important;
  }

  .mobile-profile-avatar.has-image,
  .account-avatar.has-image,
  .account-trigger-avatar.has-image,
  .avatar-settings-preview.has-image {
    color: transparent !important;
    background-color: transparent !important;
    background-position: center !important;
    background-size: cover !important;
  }

  .confirm-modal {
    width: min(430px, calc(100vw - 30px)) !important;
    padding: 22px 18px 18px !important;
  }

  .confirm-modal-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .confirm-modal.info-only .confirm-modal-actions {
    grid-template-columns: 1fr !important;
  }

  @keyframes mobile-subpage-in {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
  }
}

@media (max-width: 760px) {
  .advanced-mobile-room-copy {
    display: block !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #8996a5 !important;
    background: transparent !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  .advanced-mobile-room-copy::before {
    display: none !important;
  }

  .advanced-mobile-room-actions button,
  .advanced-mobile-room-actions button:first-child {
    border-color: #d7e2ec !important;
    color: #28445f !important;
    background: #f8fafc !important;
  }

  .advanced-mobile-room-actions button:active {
    border-color: #bcd4fb !important;
    color: #145dcf !important;
    background: #edf5ff !important;
  }

  body[data-route-view="advanced"] .advanced-feed {
    position: relative;
    padding-bottom: 26px !important;
    scroll-padding-bottom: 26px !important;
  }

  .advanced-room-workspace:not([data-mobile-panel]) .advanced-feed-column,
  .advanced-room-workspace[data-mobile-panel="feed"] .advanced-feed-column {
    grid-template-rows: minmax(0, 1fr) auto auto !important;
  }

  body[data-route-view="advanced"] .advanced-feed-event:last-child {
    margin-bottom: 0 !important;
    scroll-margin-bottom: 24px;
  }

  body[data-route-view="advanced"] .advanced-composer {
    position: relative !important;
    bottom: auto !important;
    z-index: 2;
    flex: none;
  }

  body[data-route-view="advanced"] .advanced-composer-actions {
    grid-template-columns: repeat(2, 84px) !important;
    gap: 6px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.attachment {
    width: 84px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.attachment svg {
    width: 15px !important;
    height: 15px !important;
  }

  body[data-route-view="advanced"] .advanced-composer-button.attachment span {
    font-size: 11px !important;
  }

  .toast {
    right: auto !important;
    left: 50% !important;
    z-index: 1500 !important;
    width: max-content !important;
    max-width: min(280px, calc(100vw - 40px)) !important;
    padding: 10px 16px !important;
    transform: translate(-50%, 18px) !important;
    text-align: center;
    white-space: normal;
  }

  .toast.show {
    transform: translate(-50%, 0) !important;
  }

  .settings-modal .avatar-settings-card {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px;
  }

  .avatar-settings-preview {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
  }

  .avatar-settings-picker {
    min-height: 36px;
    padding: 0 11px;
    border-radius: 11px;
    font-size: 11px;
  }

  .avatar-crop-panel {
    padding: 15px;
  }

  .avatar-crop-stage {
    width: min(230px, 68vw);
  }
}