/*
 * Canonical public layout.
 * This file intentionally loads after the legacy theme so page proportions
 * stay predictable while older component styles are progressively retired.
 */

:root {
  --public-shell-max: 1440px;
  --glass-border: rgba(255, 255, 255, 0.76);
  --glass-surface: rgba(255, 255, 255, 0.74);
  --glass-solid: rgba(255, 255, 255, 0.9);
  --public-ink: #102033;
  --public-muted: #536579;
  --public-blue: #2f75d6;
}

body[data-app-view="p2p"] .page,
body[data-app-view="cloud"] .page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
}

body[data-app-view="p2p"] .header,
body[data-app-view="cloud"] .header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  width: 100%;
  height: 78px;
  margin: 0;
  padding: 0 var(--public-gutter);
  border-bottom: 1px solid rgba(91, 133, 162, 0.18);
  background: rgba(248, 252, 255, 0.68);
  box-shadow: 0 6px 24px rgba(57, 105, 139, 0.045);
  backdrop-filter: blur(24px) saturate(138%);
}

body[data-app-view="p2p"] .header .brand,
body[data-app-view="cloud"] .header .brand {
  grid-column: 1;
  justify-self: start;
  width: auto;
  min-width: 0;
  margin: 0;
  color: var(--public-ink);
  font-size: 21px;
}

body[data-app-view="p2p"] .header .brand-mark,
body[data-app-view="cloud"] .header .brand-mark {
  width: 38px;
  height: 38px;
  color: #fff;
}

body[data-app-view="p2p"] .header .brand-mark svg,
body[data-app-view="cloud"] .header .brand-mark svg {
  width: 31px;
  height: 31px;
}

body[data-app-view="p2p"] .header .app-nav,
body[data-app-view="cloud"] .header .app-nav {
  position: static;
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-self: stretch;
  gap: 42px;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body[data-app-view="p2p"] .header .app-nav-button,
body[data-app-view="cloud"] .header .app-nav-button {
  position: relative;
  width: auto;
  min-width: 84px;
  min-height: 78px;
  padding: 2px 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #465a70;
  font-size: 14px;
  font-weight: 750;
  transition: color 170ms var(--ease),
    transform 180ms var(--ease-pop),
    text-shadow 180ms var(--ease);
}

body[data-app-view="p2p"] .header .app-nav-button:hover,
body[data-app-view="cloud"] .header .app-nav-button:hover,
body[data-app-view="p2p"] .header .app-nav-button.active,
body[data-app-view="cloud"] .header .app-nav-button.active {
  background: transparent;
  color: #245fae;
  box-shadow: none;
}

body[data-app-view="p2p"] .header .app-nav-button:hover,
body[data-app-view="cloud"] .header .app-nav-button:hover {
  transform: translateY(-1px);
  text-shadow: 0 6px 16px rgba(36, 95, 174, 0.12);
}

body[data-app-view="p2p"] .header .app-nav-button:active,
body[data-app-view="cloud"] .header .app-nav-button:active {
  transform: translateY(0) scale(0.98);
}

body[data-app-view="p2p"] .header .app-nav-button.active::after,
body[data-app-view="cloud"] .header .app-nav-button.active::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 0;
  left: 4px;
  height: 3px;
  border-radius: 999px;
  background: #3977c7;
  transform-origin: center;
  animation: wd-nav-bar-pop 260ms var(--ease-pop) both;
}

.header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

body[data-app-view="p2p"] .header-actions .admin-link,
body[data-app-view="cloud"] .header-actions .admin-link,
body[data-app-view="p2p"] .header-actions .account-button,
body[data-app-view="cloud"] .header-actions .account-button {
  position: static;
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  min-height: 38px;
  margin: 0;
  border: 1px solid rgba(74, 108, 132, 0.32);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.72);
  color: #1e2f43;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 5px 18px rgba(47, 86, 116, 0.06);
}

body[data-app-view="p2p"] .header-actions .admin-link,
body[data-app-view="cloud"] .header-actions .admin-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 750;
}

body[data-app-view="p2p"] .header-actions .admin-link svg,
body[data-app-view="cloud"] .header-actions .admin-link svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #2869d8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body[data-app-view="p2p"] .header-actions .admin-link:hover,
body[data-app-view="cloud"] .header-actions .admin-link:hover,
body[data-app-view="p2p"] .header-actions .account-button:hover,
body[data-app-view="cloud"] .header-actions .account-button:hover {
  border-color: rgba(47, 117, 214, 0.48);
  background: rgba(255, 255, 255, 0.94);
  color: #245fae;
}

body[data-app-view="p2p"] .header-actions .admin-link::after,
body[data-app-view="cloud"] .header-actions .admin-link::after {
  display: none;
  content: none;
}

body[data-app-view="p2p"] .header-actions .account-avatar-button,
body[data-app-view="cloud"] .header-actions .account-avatar-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #24425f;
  box-shadow: none;
}

body[data-app-view="p2p"] .header-actions .account-avatar-button:hover,
body[data-app-view="cloud"] .header-actions .account-avatar-button:hover {
  border: 0;
  background: transparent;
}

.account-trigger-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: linear-gradient(135deg, #2879f0, #5156d8);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(45, 91, 194, 0.22);
}

.account-trigger-chevron {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #31465d;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* Quick transfer */
body[data-app-view="p2p"] .p2p-wrap {
  width: min(var(--cloud-shell-max), calc(100% - 2 * var(--public-gutter)));
  max-width: calc(100% - 48px);
  margin: 0 auto;
  padding: 0;
}

body[data-app-view="p2p"] .intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  min-height: 178px;
  margin-top: 34px;
  padding: 34px 40px;
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.67);
  box-shadow: 0 18px 54px rgba(48, 104, 144, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

body[data-app-view="p2p"] .intro-badge {
  flex: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.6);
  color: var(--accent-strong);
  padding: 10px 15px;
  font: 800 13px var(--font-mono);
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
}

body[data-app-view="p2p"] .intro h1 {
  width: min(900px, 100%);
  max-width: none;
  margin: 12px 0 9px;
  color: var(--public-ink);
  font-size: clamp(40px, 3.5vw, 50px);
  line-height: 1.04;
  letter-spacing: 0;
}

body[data-app-view="p2p"] .intro p {
  max-width: 720px;
  margin: 0;
  color: #4b6278;
  font-size: 15px;
  line-height: 1.7;
}

body[data-app-view="p2p"] .transfer-card {
  margin-top: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 24px 68px rgba(48, 104, 144, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(26px) saturate(125%);
  transition: box-shadow 360ms var(--ease),
    transform 360ms var(--ease-pop),
    background 360ms var(--ease);
}

body[data-app-view="p2p"] .transfer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 78px rgba(48, 104, 144, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.site-footer {
  display: grid;
  gap: 7px;
  width: min(1120px, calc(100% - 36px));
  margin: 20px auto 26px;
  color: rgba(43, 67, 91, 0.7);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.site-footer-primary {
  padding: 0;
  color: #536a80;
  font-weight: 700;
  text-align: center;
}

.site-footer-section {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 13px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.site-footer-section > strong {
  color: #7b8da0;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.site-footer-friends > strong {
  color: #13263a;
  font-size: inherit;
  font-weight: 800;
}

.site-footer-friends:has(.site-footer-links.hidden),
.site-footer-records:not(:has(a:not(.hidden))) {
  display: none;
}

.site-footer-links,
.site-footer-compliance,
.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
}

.site-footer-legal {
  padding-left: 13px;
  border-left: 1px solid rgba(93, 118, 143, 0.25);
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
}

.site-footer a:hover {
  color: #1769df;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .site-footer-section {
    gap: 4px 10px;
    padding: 0;
  }

  .site-footer-links,
  .site-footer-compliance,
  .site-footer-legal {
    gap: 5px 12px;
  }

  .site-footer-legal {
    width: 100%;
    padding: 2px 0 0;
    border-left: 0;
  }
}

body[data-app-view="p2p"] .sender-panel {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(420px, 1.42fr);
  gap: 18px;
  padding: 24px;
}

body[data-app-view="p2p"] .transfer-file-side {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

body[data-app-view="p2p"] .dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  min-height: 200px;
  max-width: 100%;
  margin: 0;
  padding: 24px;
  border: 1.5px dashed rgba(76, 132, 244, 0.68);
  border-radius: 16px;
  background: radial-gradient(260px 175px at 50% 38%, rgba(85, 155, 227, 0.09), transparent 72%), rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

body[data-app-view="p2p"] .dropzone:hover,
body[data-app-view="p2p"] .dropzone.drag {
  border-color: rgba(47, 117, 214, 0.72);
  background: radial-gradient(270px 185px at 50% 38%, rgba(85, 155, 227, 0.14), transparent 72%), rgba(255, 255, 255, 0.94);
}

body[data-app-view="p2p"] .upload-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(225, 237, 255, 0.98), rgba(242, 247, 255, 0.86));
  color: #2567dc;
  box-shadow: 0 12px 30px rgba(55, 112, 202, 0.1), inset 0 1px 0 #fff;
}

body[data-app-view="p2p"] .upload-mark svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body[data-app-view="p2p"] .dropzone strong {
  color: #182c40;
  font-size: 20px;
  letter-spacing: 0;
}

body[data-app-view="p2p"] .dropzone small {
  margin-top: 6px;
  color: #64768a;
  font-size: 13px;
}

body[data-app-view="p2p"] .dropzone .dropzone-support {
  margin-top: 5px;
  color: #8494a8;
  font-size: 12px;
}

body[data-app-view="p2p"] .file-list:not(:empty) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
  padding: 20px 24px 16px;
  border-top: 1px solid rgba(84, 126, 157, 0.12);
}

body[data-app-view="p2p"] .file-list:empty {
  display: none;
  margin: 0;
}

body[data-app-view="p2p"] .transfer-settings-side {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  justify-content: flex-start;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 30px rgba(48, 97, 133, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-app-view="p2p"] .settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body[data-app-view="p2p"] .settings-head h2 {
  margin: 0;
  color: var(--public-ink);
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0;
}

body[data-app-view="p2p"] .security-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  color: #158f78;
  font-size: 11px;
  font-weight: 750;
}

body[data-app-view="p2p"] .security-badge svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

body[data-app-view="p2p"] .field {
  margin-top: 22px;
}

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

body[data-app-view="p2p"] .field-label-row label {
  color: #223549;
  font-size: 13px;
  font-weight: 750;
}

body[data-app-view="p2p"] .field-label-row .inline-action {
  color: #2567d9;
  font-size: 12px;
  font-weight: 750;
}

body[data-app-view="p2p"] .password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid rgba(131, 156, 184, 0.34);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

body[data-app-view="p2p"] .transfer-settings-side input,
body[data-app-view="p2p"] .password-row .text-action {
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-app-view="p2p"] .transfer-settings-side input:focus {
  box-shadow: inset 0 0 0 2px rgba(47, 117, 214, 0.16);
}

body[data-app-view="p2p"] .password-row .text-action {
  width: auto;
  padding: 0 11px;
  color: #41617f;
  font-size: 12px;
  white-space: nowrap;
}

body[data-app-view="p2p"] .password-row .text-action + .text-action {
  border-left: 1px solid rgba(131, 156, 184, 0.2);
}

body[data-app-view="p2p"] .field-tip {
  display: block;
  margin-top: 9px;
  color: #6c7f92;
  font-size: 11.5px;
  line-height: 1.55;
}

body[data-app-view="p2p"] .wide {
  min-height: 49px;
  margin-top: 22px;
  border-radius: 9px;
  background: linear-gradient(135deg, #3885eb, #2367d5);
  color: #fff;
  font-size: 14px;
  opacity: 1;
  box-shadow: 0 13px 28px rgba(35, 103, 213, 0.2);
}

body[data-app-view="p2p"] .wide:disabled {
  background: #c1d8ed;
  color: #466580;
  opacity: 1;
  box-shadow: none;
}

body[data-app-view="p2p"] .expiry-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
  color: #708296;
  font-size: 11px;
}

body[data-app-view="p2p"] .expiry-note svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body[data-app-view="p2p"] .receiver-panel {
  min-height: 0;
  padding: 28px;
}

body[data-app-view="p2p"] .receiver-panel .transfer-settings-side {
  border: 1px solid rgba(84, 126, 157, 0.16);
  border-radius: 16px;
}

body[data-app-view="p2p"] .privacy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 20px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-app-view="p2p"] .p2p-wrap .privacy {
  max-width: none;
}

body[data-app-view="p2p"] .trust-item {
  display: flex;
  align-items: center;
  min-height: 84px;
  justify-content: flex-start;
  gap: 13px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 32px rgba(48, 98, 134, 0.08);
}

body[data-app-view="p2p"] .trust-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 50%;
  color: #2f75d6;
}

body[data-app-view="p2p"] .trust-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.85;
}

body[data-app-view="p2p"] .trust-item:nth-child(3) .trust-icon {
  background: rgba(210, 246, 238, 0.86);
  color: #14967d;
}

body[data-app-view="p2p"] .trust-item strong {
  display: block;
  font-size: 15px;
  line-height: 1.35;
}

body[data-app-view="p2p"] .trust-item small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
}

body[data-app-view="p2p"] .sponsor-card,
body[data-app-view="p2p"] footer {
  width: min(var(--cloud-shell-max), calc(100% - 2 * var(--public-gutter)));
  max-width: calc(100% - 48px);
  margin-right: auto;
  margin-left: auto;
}

body[data-app-view="p2p"] .sponsor-card {
  min-height: 82px;
  margin-top: 18px;
  padding: 13px 17px;
}

body[data-app-view="p2p"] footer {
  padding: 18px 0 24px;
}

/* Cloud */
body[data-app-view="cloud"] .cloud-hero,
body[data-app-view="cloud"] .cloud-dashboard,
body[data-app-view="cloud"] .cloud-guest,
body[data-app-view="cloud"] .sponsor-card,
body[data-app-view="cloud"] footer {
  width: min(var(--cloud-shell-max), calc(100% - (2 * var(--public-gutter))));
  margin-right: auto;
  margin-left: auto;
}

body[data-app-view="cloud"] .cloud-hero {
  min-height: 178px;
  margin-top: 34px;
  padding: 34px 40px;
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.67);
  box-shadow: 0 18px 54px rgba(48, 104, 144, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  transition: box-shadow 360ms var(--ease),
    transform 360ms var(--ease-pop),
    background 360ms var(--ease);
}

body[data-app-view="cloud"] .cloud-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 66px rgba(48, 104, 144, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body[data-app-view="cloud"] .cloud-hero h1 {
  margin: 12px 0 9px;
  color: var(--public-ink);
  font-size: clamp(40px, 3.5vw, 50px);
  line-height: 1.04;
  letter-spacing: 0;
}

body[data-app-view="cloud"] .cloud-hero p {
  max-width: 720px;
  color: #4b6278;
  font-size: 15px;
}

body[data-app-view="cloud"] .cloud-badge {
  padding: 10px 15px;
  font-size: 13px;
}

body[data-app-view="cloud"] .cloud-dashboard {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(480px, 1.42fr);
  gap: 18px;
  margin-top: 20px;
  padding: 26px;
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 24px 68px rgba(48, 104, 144, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(26px) saturate(125%);
  transition: box-shadow 360ms var(--ease),
    transform 360ms var(--ease-pop),
    background 360ms var(--ease);
}

body[data-app-view="cloud"] .cloud-dashboard:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 78px rgba(48, 104, 144, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-app-view="cloud"] .dashboard-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 4px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-app-view="cloud"] .dashboard-head p {
  color: #5f7184;
  font-size: 14px;
  font-weight: 600;
}

body[data-app-view="cloud"] .quota-card,
body[data-app-view="cloud"] .cloud-dropzone,
body[data-app-view="cloud"] .files-section {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 30px rgba(48, 97, 133, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-app-view="cloud"] .quota-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 140px;
  padding: 22px;
}

body[data-app-view="cloud"] .quota-row {
  margin-bottom: 15px;
  font-size: 14px;
}

body[data-app-view="cloud"] .quota-row strong {
  font-size: 13px;
}

body[data-app-view="cloud"] .quota-track {
  height: 10px;
}

body[data-app-view="cloud"] .quota-card small {
  margin-top: 12px;
  font-size: 12px;
}

body[data-app-view="cloud"] .cloud-dropzone {
  min-height: 140px;
  padding: 24px;
  border-style: dashed;
  border-color: rgba(74, 139, 209, 0.46);
}

body[data-app-view="cloud"] .cloud-dropzone:hover,
body[data-app-view="cloud"] .cloud-dropzone.drag {
  border-color: #2563eb;
  background: #eff5ff;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.10);
}

body[data-app-view="cloud"] .cloud-upload-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  font-size: 24px;
}

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

body[data-app-view="cloud"] .cloud-dropzone small {
  margin-top: 5px;
  font-size: 13px;
}

body[data-app-view="cloud"] .choose-button {
  padding: 10px 16px;
  border-radius: 11px;
  font-size: 13px;
}

body[data-app-view="cloud"] .cloud-upload-queue,
body[data-app-view="cloud"] .files-section {
  grid-column: 1 / -1;
}

body[data-app-view="cloud"] .cloud-upload-queue:empty {
  display: none;
}

body[data-app-view="cloud"] .files-section {
  padding: 22px;
}

body[data-app-view="cloud"] .files-heading {
  margin-bottom: 14px;
}

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

body[data-app-view="cloud"] .empty-files {
  min-height: 118px;
  padding: 18px;
  border-radius: 15px;
}

body[data-app-view="cloud"] .empty-files span {
  font-size: 22px;
}

body[data-app-view="cloud"] .empty-files strong {
  margin-top: 5px;
  font-size: 14px;
}

body[data-app-view="cloud"] .empty-files p {
  margin-top: 4px;
}

body[data-app-view="cloud"] .sponsor-card {
  min-height: 92px;
  margin-top: 24px;
  padding: 16px 20px;
}

body[data-app-view="cloud"] footer {
  padding: 20px 0 26px;
}

body[data-app-view="cloud"] .cloud-guest {
  max-width: 820px;
}

@media (max-width: 1180px) {
  body[data-app-view="p2p"] .p2p-wrap,
  body[data-app-view="p2p"] .privacy,
  body[data-app-view="p2p"] .sponsor-card,
  body[data-app-view="p2p"] footer,
  body[data-app-view="cloud"] .cloud-hero,
  body[data-app-view="cloud"] .cloud-dashboard,
  body[data-app-view="cloud"] .cloud-guest,
  body[data-app-view="cloud"] .sponsor-card,
  body[data-app-view="cloud"] footer {
    width: calc(100% - 40px);
  }

  body[data-app-view="p2p"] .sender-panel {
    grid-template-columns: minmax(260px, 0.8fr) minmax(340px, 1.2fr);
  }

  body[data-app-view="p2p"] .trust-item {
    gap: 10px;
    padding: 12px;
  }

  body[data-app-view="p2p"] .trust-icon {
    width: 40px;
    height: 40px;
  }

  body[data-app-view="p2p"] .trust-icon svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 980px) {
  body[data-app-view="cloud"] .cloud-dashboard {
    grid-template-columns: 1fr;
  }

  body[data-app-view="p2p"] .sender-panel {
    grid-template-columns: 1fr;
  }

  body[data-app-view="p2p"] .transfer-file-side {
    grid-column: 1;
  }

  body[data-app-view="p2p"] .transfer-settings-side {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-app-view="p2p"] .privacy {
    grid-template-columns: 1fr 1fr;
  }

  body[data-app-view="p2p"] .file-list:not(:empty) {
    grid-template-columns: repeat(3, 1fr);
  }

  body[data-app-view="p2p"] .trust-item {
    min-height: 72px;
  }

  body[data-app-view="cloud"] .dashboard-head,
  body[data-app-view="cloud"] .cloud-upload-queue,
  body[data-app-view="cloud"] .files-section {
    grid-column: 1;
  }
}

@media (max-width: 760px) {
  body[data-app-view="p2p"],
  body[data-app-view="cloud"] {
    background-attachment: scroll;
  }

  body[data-app-view="p2p"] .header,
  body[data-app-view="cloud"] .header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px 12px;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 12px 14px 0 !important;
  }

  body[data-app-view="p2p"] .header .brand,
  body[data-app-view="cloud"] .header .brand {
    grid-column: 1;
    grid-row: 1;
    order: 0;
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1;
    order: 0;
  }

  body[data-app-view="p2p"] .header .app-nav,
  body[data-app-view="cloud"] .header .app-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    order: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body[data-app-view="p2p"] .header .app-nav-button,
  body[data-app-view="cloud"] .header .app-nav-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 12px 4px 11px;
  }

  body[data-app-view="p2p"] .p2p-wrap,
  body[data-app-view="p2p"] .privacy,
  body[data-app-view="p2p"] .sponsor-card,
  body[data-app-view="p2p"] footer,
  body[data-app-view="cloud"] .cloud-hero,
  body[data-app-view="cloud"] .cloud-dashboard,
  body[data-app-view="cloud"] .cloud-guest,
  body[data-app-view="cloud"] .sponsor-card,
  body[data-app-view="cloud"] footer {
    width: calc(100% - 24px) !important;
    max-width: none;
  }

  body[data-app-view="p2p"] .intro {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    margin-top: 20px;
    padding: 24px 22px;
  }

  body[data-app-view="p2p"] .intro h1 {
    font-size: 34px;
    letter-spacing: 0;
  }

  body[data-app-view="p2p"] .intro p {
    font-size: 14px;
  }

  body[data-app-view="p2p"] .transfer-card,
  body[data-app-view="cloud"] .cloud-hero,
  body[data-app-view="cloud"] .cloud-dashboard {
    border-radius: 22px;
  }

  body[data-app-view="p2p"] .transfer-file-side,
  body[data-app-view="p2p"] .transfer-settings-side {
    padding: 20px;
  }

  body[data-app-view="p2p"] .dropzone {
    min-height: 270px;
    border-radius: 18px;
  }

  body[data-app-view="p2p"] .upload-mark {
    width: 66px;
    height: 66px;
  }

  body[data-app-view="p2p"] .dropzone strong {
    font-size: 19px;
  }

  body[data-app-view="p2p"] .dropzone small {
    padding: 0 10px;
    text-align: center;
  }

  body[data-app-view="p2p"] .transfer-settings-side {
    justify-content: flex-start;
    padding-top: 26px;
  }

  body[data-app-view="p2p"] .password-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    overflow: hidden;
    border: 1px solid rgba(131, 156, 184, 0.34);
    background: rgba(255, 255, 255, 0.84);
  }

  body[data-app-view="p2p"] .password-row .text-action {
    width: auto !important;
    min-width: 48px;
    min-height: 44px;
    padding: 0 10px;
  }

  body[data-app-view="p2p"] .privacy {
    grid-template-columns: 1fr;
  }

  body[data-app-view="p2p"] .file-list:not(:empty) {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px 16px;
  }

  body[data-app-view="p2p"] .sponsor-card,
  body[data-app-view="cloud"] .sponsor-card {
    align-items: flex-start;
  }

  body[data-app-view="cloud"] .cloud-hero {
    align-items: flex-start;
    min-height: 0;
    margin-top: 20px;
    padding: 24px 22px;
  }

  body[data-app-view="cloud"] .cloud-hero h1 {
    font-size: 34px;
  }

  body[data-app-view="cloud"] .cloud-dashboard {
    gap: 14px;
    padding: 16px;
  }

  body[data-app-view="cloud"] .dashboard-head {
    align-items: flex-start;
  }

  body[data-app-view="cloud"] .cloud-dropzone {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-app-view="cloud"] .choose-button {
    margin-left: 0;
  }

  body[data-app-view="cloud"] .files-section {
    padding: 16px;
  }

  body[data-app-view="cloud"] .cloud-file-card {
    align-items: flex-start;
    flex-direction: column;
  }

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

/* Mobile quick-transfer proportions */
@media (max-width: 760px) {
  body[data-app-view="p2p"] .header,
  body[data-app-view="cloud"] .header {
    gap: 8px 10px;
    min-height: 0 !important;
    padding: 9px 14px 0 !important;
  }

  body[data-app-view="p2p"] .header .brand,
  body[data-app-view="cloud"] .header .brand {
    gap: 8px;
    font-size: 19px;
  }

  body[data-app-view="p2p"] .header .brand-mark,
  body[data-app-view="cloud"] .header .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  body[data-app-view="p2p"] .header .brand-mark svg,
  body[data-app-view="cloud"] .header .brand-mark svg {
    width: 28px;
    height: 28px;
  }

  body[data-app-view="p2p"] .header-actions .admin-link,
  body[data-app-view="cloud"] .header-actions .admin-link {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
  }

  body[data-app-view="p2p"] .header-actions .account-avatar-button,
  body[data-app-view="cloud"] .header-actions .account-avatar-button {
    height: 38px;
    min-height: 38px;
    gap: 5px;
  }

  .account-trigger-avatar {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .account-trigger-chevron {
    width: 15px;
    height: 15px;
  }

  body[data-app-view="p2p"] .header .app-nav-button,
  body[data-app-view="cloud"] .header .app-nav-button {
    min-height: 38px;
    padding: 9px 4px 10px;
    font-size: 13px;
  }

  body[data-app-view="p2p"] .p2p-wrap {
    width: calc(100% - 16px) !important;
  }

  body[data-app-view="p2p"] .intro {
    gap: 10px;
    margin-top: 12px;
    padding: 18px 18px 17px;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(48, 104, 144, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  }

  body[data-app-view="p2p"] .intro .eyebrow {
    padding: 5px 9px;
    font-size: 11px;
  }

  body[data-app-view="p2p"] .intro h1 {
    margin: 9px 0 4px;
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.12;
  }

  body[data-app-view="p2p"] .intro p {
    max-width: 21rem;
    font-size: 12.5px;
    line-height: 1.55;
  }

  body[data-app-view="p2p"] .intro-badge {
    display: none;
  }

  body[data-app-view="p2p"] .transfer-card {
    margin-top: 12px;
    border-radius: 20px;
  }

  body[data-app-view="p2p"] .sender-panel,
  body[data-app-view="p2p"] .receiver-panel,
  body[data-app-view="p2p"] .receiver-panel.receiving {
    gap: 12px;
    padding: 12px;
  }

  body[data-app-view="p2p"] .transfer-file-side,
  body[data-app-view="p2p"] .transfer-settings-side,
  body[data-app-view="p2p"] .receiver-panel .transfer-settings-side {
    padding: 16px;
    border-radius: 16px;
  }

  body[data-app-view="p2p"] .dropzone {
    min-height: 188px;
    padding: 18px 14px;
    border-radius: 16px;
  }

  body[data-app-view="p2p"] .upload-mark {
    width: 54px;
    height: 54px;
    margin-bottom: 11px;
  }

  body[data-app-view="p2p"] .upload-mark svg {
    width: 30px;
    height: 30px;
  }

  body[data-app-view="p2p"] .dropzone strong {
    font-size: 18px;
    line-height: 1.25;
  }

  body[data-app-view="p2p"] .dropzone small {
    max-width: 19rem;
    margin-top: 5px;
    padding: 0;
    font-size: 12px;
    line-height: 1.55;
  }

  body[data-app-view="p2p"] .dropzone .dropzone-support {
    font-size: 11.5px;
  }

  body[data-app-view="p2p"] .settings-head h2 {
    font-size: 23px;
  }

  body[data-app-view="p2p"] .security-badge {
    font-size: 10.5px;
  }

  body[data-app-view="p2p"] .field {
    margin-top: 15px;
  }

  body[data-app-view="p2p"] .field-tip,
  body[data-app-view="p2p"] .expiry-note {
    font-size: 11.5px;
    line-height: 1.55;
  }

  body[data-app-view="p2p"] .wide {
    min-height: 46px;
    margin-top: 15px;
  }
}

@media (max-width: 430px) {
  body[data-app-view="p2p"] .header,
  body[data-app-view="cloud"] .header {
    padding-inline: 10px !important;
  }

  body[data-app-view="p2p"] .p2p-wrap,
  body[data-app-view="p2p"] .privacy,
  body[data-app-view="p2p"] .sponsor-card,
  body[data-app-view="p2p"] footer {
    width: calc(100% - 12px) !important;
  }

  body[data-app-view="p2p"] .intro {
    margin-top: 10px;
    padding: 16px 16px 15px;
    border-radius: 18px;
  }

  body[data-app-view="p2p"] .intro h1 {
    font-size: clamp(24px, 7.4vw, 29px);
  }

  body[data-app-view="p2p"] .transfer-card {
    margin-top: 10px;
  }

  body[data-app-view="p2p"] .sender-panel,
  body[data-app-view="p2p"] .receiver-panel,
  body[data-app-view="p2p"] .receiver-panel.receiving {
    padding: 10px;
  }

  body[data-app-view="p2p"] .dropzone {
    min-height: 176px;
  }
}

@media (max-width: 380px) {
  body[data-app-view="p2p"] .intro {
    padding: 14px;
  }

  body[data-app-view="p2p"] .intro h1 {
    font-size: 24px;
  }

  body[data-app-view="p2p"] .dropzone {
    min-height: 164px;
  }
}

@media (min-width: 431px) and (max-width: 640px) {
  body[data-app-view="p2p"] .p2p-wrap,
  body[data-app-view="p2p"] .privacy,
  body[data-app-view="p2p"] .sponsor-card,
  body[data-app-view="p2p"] footer,
  body[data-app-view="cloud"] .cloud-hero,
  body[data-app-view="cloud"] .cloud-dashboard,
  body[data-app-view="cloud"] .cloud-guest,
  body[data-app-view="cloud"] .sponsor-card,
  body[data-app-view="cloud"] footer {
    width: calc(100% - 28px) !important;
    max-width: none !important;
  }

  body[data-app-view="p2p"] .intro {
    min-height: 0;
    margin-top: 16px;
    padding: 20px 16px;
  }

  body[data-app-view="p2p"] .intro h1 {
    width: 100%;
    font-size: 31px;
    line-height: 1.12;
  }

  body[data-app-view="p2p"] .intro p {
    font-size: 13px;
  }

  body[data-app-view="p2p"] .transfer-file-side,
  body[data-app-view="p2p"] .transfer-settings-side {
    padding: 20px;
  }

  body[data-app-view="p2p"] .sender-panel {
    grid-template-columns: 1fr;
  }

  body[data-app-view="p2p"] .transfer-file-side {
    grid-column: 1;
  }

  body[data-app-view="p2p"] .transfer-settings-side {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-app-view="p2p"] .trust-item {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    min-height: 98px;
    gap: 9px;
    padding: 12px 10px;
  }

  body[data-app-view="p2p"] .trust-item strong {
    font-size: 14px;
  }

  body[data-app-view="p2p"] .trust-item small {
    font-size: 11.5px;
  }

  body[data-app-view="p2p"] .dropzone {
    min-height: 318px;
  }
}

@media (max-width: 430px) {
  body[data-app-view="p2p"] .header,
  body[data-app-view="cloud"] .header {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .header-actions {
    gap: 6px;
  }

  body[data-app-view="p2p"] .sender-panel {
    grid-template-columns: 1fr;
  }

  body[data-app-view="p2p"] .transfer-file-side {
    grid-column: 1;
  }

  body[data-app-view="p2p"] .transfer-settings-side {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-app-view="p2p"] .header-actions .admin-link,
  body[data-app-view="cloud"] .header-actions .admin-link {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-app-view="p2p"] .p2p-wrap,
  body[data-app-view="p2p"] .privacy,
  body[data-app-view="p2p"] .sponsor-card,
  body[data-app-view="p2p"] footer,
  body[data-app-view="cloud"] .cloud-hero,
  body[data-app-view="cloud"] .cloud-dashboard,
  body[data-app-view="cloud"] .cloud-guest,
  body[data-app-view="cloud"] .sponsor-card,
  body[data-app-view="cloud"] footer {
    width: calc(100% - 20px) !important;
    max-width: none;
  }

  body[data-app-view="p2p"] .intro h1 {
    font-size: 32px;
  }

  body[data-app-view="p2p"] .transfer-file-side,
  body[data-app-view="p2p"] .transfer-settings-side {
    padding: 16px;
  }

  body[data-app-view="p2p"] .settings-head h2 {
    font-size: 27px;
  }

  body[data-app-view="p2p"] .security-badge {
    font-size: 10px;
  }

  body[data-app-view="cloud"] .cloud-hero h1 {
    font-size: 31px;
  }
}

@media (max-width: 560px) {
  body[data-app-view="p2p"] .p2p-wrap,
  body[data-app-view="p2p"] .privacy,
  body[data-app-view="p2p"] .sponsor-card,
  body[data-app-view="p2p"] footer {
    width: calc(100% - 16px) !important;
  }

  body[data-app-view="p2p"] .intro {
    margin-top: 14px;
    padding: 20px 18px;
  }

  body[data-app-view="p2p"] .intro h1 {
    font-size: clamp(28px, 8.2vw, 34px);
    line-height: 1.12;
  }

  body[data-app-view="p2p"] .intro p {
    font-size: 13px;
    line-height: 1.55;
  }

  body[data-app-view="p2p"] .transfer-card {
    margin-top: 14px;
    border-radius: 20px;
  }

  body[data-app-view="p2p"] .sender-panel,
  body[data-app-view="p2p"] .receiver-panel,
  body[data-app-view="p2p"] .receiver-panel.receiving {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  body[data-app-view="p2p"] .transfer-file-side,
  body[data-app-view="p2p"] .transfer-settings-side,
  body[data-app-view="p2p"] .receiver-panel .transfer-settings-side {
    padding: 18px;
    border-radius: 16px;
  }

  body[data-app-view="p2p"] .dropzone {
    min-height: 230px;
    padding: 22px 16px;
  }

  body[data-app-view="p2p"] .settings-head {
    align-items: flex-start;
  }

  body[data-app-view="p2p"] .settings-head h2 {
    font-size: 25px;
  }

  body[data-app-view="p2p"] .field {
    margin-top: 18px;
  }

  body[data-app-view="p2p"] .wide {
    min-height: 48px;
    margin-top: 18px;
  }

  body[data-app-view="p2p"] .receiver-panel .received-files {
    margin-top: 0;
    transform: translateY(8px);
  }

  body[data-app-view="p2p"] .receiver-panel.receiving .received-files:not(:empty) {
    transform: translateY(0);
  }

  body[data-app-view="p2p"] .privacy {
    gap: 12px;
    margin-top: 16px;
  }

  body[data-app-view="p2p"] .trust-item {
    min-height: 76px;
    padding: 12px;
  }
}

@media (max-width: 380px) {
  body[data-app-view="p2p"] .p2p-wrap,
  body[data-app-view="p2p"] .privacy,
  body[data-app-view="p2p"] .sponsor-card,
  body[data-app-view="p2p"] footer {
    width: calc(100% - 10px) !important;
  }

  body[data-app-view="p2p"] .sender-panel,
  body[data-app-view="p2p"] .receiver-panel,
  body[data-app-view="p2p"] .receiver-panel.receiving {
    padding: 10px;
  }

  body[data-app-view="p2p"] .transfer-file-side,
  body[data-app-view="p2p"] .transfer-settings-side,
  body[data-app-view="p2p"] .receiver-panel .transfer-settings-side {
    padding: 14px;
  }
}

@media (max-width: 760px) {
  body[data-app-view="p2p"] .sender-panel .password-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 56px 56px !important;
    align-items: stretch !important;
  }

  body[data-app-view="p2p"] .sender-panel .password-row input {
    grid-column: auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  body[data-app-view="p2p"] .sender-panel .password-row .text-action {
    grid-column: auto !important;
    width: 56px !important;
    min-width: 56px !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   2026-07-15 UI Refresh Polish — 加载在 ui-layout 末尾，平滑过渡 & 微交互动效
   ========================================================================== */

/* 全局过渡（ui-layout 不设 transition 的元素在这里补上） */
body[data-app-view="p2p"] .header .app-nav-button,
body[data-app-view="cloud"] .header .app-nav-button {
  transition: color 170ms var(--ease),
    transform 180ms var(--ease-pop),
    text-shadow 180ms var(--ease);
}

body[data-app-view="p2p"] .header .app-nav-button.active::after,
body[data-app-view="cloud"] .header .app-nav-button.active::after {
  transition: background 180ms var(--ease), left 180ms var(--ease), right 180ms var(--ease);
}

body[data-app-view="p2p"] .header-actions .admin-link,
body[data-app-view="cloud"] .header-actions .admin-link,
body[data-app-view="p2p"] .header-actions .account-button,
body[data-app-view="cloud"] .header-actions .account-button {
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

/* P2P 信任条目 hover 提亮 */
body[data-app-view="p2p"] .trust-item {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-app-view="p2p"] .trust-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(48, 98, 134, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* P2P 拖放区 hover */
body[data-app-view="p2p"] .dropzone {
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

/* Cloud 云端卡片 hover */
body[data-app-view="cloud"] .quota-card,
body[data-app-view="cloud"] .cloud-dropzone,
body[data-app-view="cloud"] .files-section {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body[data-app-view="cloud"] .cloud-file-card {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
body[data-app-view="cloud"] .cloud-file-card:hover {
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}

/* Cloud hero hover tick */
body[data-app-view="cloud"] .cloud-hero {
  transition: box-shadow 360ms var(--ease),
    transform 360ms var(--ease-pop),
    background 360ms var(--ease);
}

/* 主按钮增强（保持 ui-layout 已有渐变，补 press） */
body[data-app-view="p2p"] .wide:not(:disabled):active,
body[data-app-view="cloud"] .wide:not(:disabled):active {
  transform: translateY(1px) scale(0.982);
}

/* 接收面板卡片 */
body[data-app-view="p2p"] .receiver-panel .transfer-settings-side {
  transition: box-shadow 260ms var(--ease),
    transform 260ms var(--ease-pop);
}

body[data-app-view="p2p"] .receiver-panel .transfer-settings-side:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(48, 104, 144, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

/* 文件条目动效 */
body[data-app-view="p2p"] .file-item {
  animation: wd-panel-pop 0.3s var(--ease-pop) both;
}

/* 进度条统一 */
body[data-app-view="p2p"] .progress i,
body[data-app-view="cloud"] .upload-progress i {
  transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 链接生成框揭示 */
body[data-app-view="p2p"] .connection-box {
  animation: wd-fade-up 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 上传队列条目 */
body[data-app-view="cloud"] .upload-row {
  animation: wd-fade-up 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 接收确认后的布局让位和看板出现：只在确认瞬间触发，不影响传输中的进度刷新 */
body[data-app-view="p2p"] .receiver-panel {
  transition: grid-template-columns 420ms cubic-bezier(0.16, 1, 0.3, 1),
    gap 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-app-view="p2p"] .receiver-panel .received-files {
  transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-app-view="p2p"] .receiver-panel.receiver-handoff-motion .transfer-settings-side {
  animation: wd-receiver-handoff-card 620ms var(--ease-pop) both;
}

body[data-app-view="p2p"] .receiver-panel.receiver-handoff-motion .receive-result-panel {
  animation: wd-receive-result-arrive 620ms var(--ease-pop) both;
}

body[data-app-view="p2p"] .receiver-panel.receiver-handoff-motion .received-file {
  animation: wd-received-file-arrive 460ms var(--ease-pop) both;
}

body[data-app-view="p2p"] .receiver-panel.receiver-handoff-motion .received-file:nth-child(1) { animation-delay: 80ms; }
body[data-app-view="p2p"] .receiver-panel.receiver-handoff-motion .received-file:nth-child(2) { animation-delay: 120ms; }
body[data-app-view="p2p"] .receiver-panel.receiver-handoff-motion .received-file:nth-child(3) { animation-delay: 160ms; }
body[data-app-view="p2p"] .receiver-panel.receiver-handoff-motion .received-file:nth-child(4) { animation-delay: 200ms; }
body[data-app-view="p2p"] .receiver-panel.receiver-handoff-motion .received-file:nth-child(5) { animation-delay: 240ms; }
body[data-app-view="p2p"] .receiver-panel.receiver-handoff-motion .received-file:nth-child(6) { animation-delay: 280ms; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body[data-app-view="p2p"] .trust-item,
  body[data-app-view="p2p"] .dropzone,
  body[data-app-view="cloud"] .cloud-file-card,
  body[data-app-view="p2p"] .wide,
  body[data-app-view="p2p"] .connection-box,
  body[data-app-view="cloud"] .upload-row,
  body[data-app-view="p2p"] .file-item {
    animation: none !important;
    transition: none !important;
  }
  body[data-app-view="p2p"] .trust-item:hover {
    transform: none;
  }
  body[data-app-view="cloud"] .cloud-file-card:hover {
    transform: none;
  }
}

.advanced-join-intro svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.advanced-share-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.advanced-share-actions .button { min-height: 40px; }

.advanced-join-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 24px 0;
  padding: 12px 14px;
  border: 1px solid #cfe1f4;
  border-radius: 8px;
  color: #265678;
  background: #f3f8fe;
}

.advanced-join-intro > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  color: #156ee8;
  background: #e5f0ff;
}

.advanced-join-intro strong,
.advanced-join-intro small { display: block; }
.advanced-join-intro strong { font-size: 14px; }
.advanced-join-intro small { margin-top: 3px; color: #778b9e; font-size: 11px; }

/* Mobile public P2P redesign: treat phone as an operation-first surface. */
@media (max-width: 760px) {
  html,
  body,
  body[data-app-view="p2p"],
  body[data-app-view="cloud"],
  body[data-app-view="p2p"] .page,
  body[data-app-view="cloud"] .page {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body[data-app-view="p2p"] .header,
  body[data-app-view="cloud"] .header {
    width: 100vw !important;
    max-width: 100vw !important;
    gap: 7px 10px !important;
    min-height: 0 !important;
    padding: 8px 12px 0 !important;
    background: rgba(242, 251, 255, 0.78);
    overflow: hidden;
  }

  body[data-app-view="p2p"] .header .brand,
  body[data-app-view="cloud"] .header .brand {
    gap: 8px;
    font-size: 18px;
  }

  body[data-app-view="p2p"] .header .brand-mark,
  body[data-app-view="cloud"] .header .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  body[data-app-view="p2p"] .header .brand-mark svg,
  body[data-app-view="cloud"] .header .brand-mark svg {
    width: 27px;
    height: 27px;
  }

  .header-actions {
    gap: 7px;
  }

  body[data-app-view="p2p"] .header-actions .admin-link,
  body[data-app-view="cloud"] .header-actions .admin-link {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
  }

  body[data-app-view="p2p"] .header-actions .account-avatar-button,
  body[data-app-view="cloud"] .header-actions .account-avatar-button {
    height: 38px;
    min-height: 38px;
    gap: 5px;
  }

  .account-trigger-avatar {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .account-trigger-chevron {
    width: 15px;
    height: 15px;
  }

  body[data-app-view="p2p"] .header .app-nav,
  body[data-app-view="cloud"] .header .app-nav {
    width: 100% !important;
    max-width: 100% !important;
    border-top: 1px solid rgba(78, 123, 156, 0.09);
    overflow: hidden;
  }

  body[data-app-view="p2p"] .header .app-nav-button,
  body[data-app-view="cloud"] .header .app-nav-button {
    min-height: 38px;
    padding: 9px 4px 10px;
    font-size: 13px;
  }

  body[data-app-view="p2p"] .p2p-wrap,
  body[data-app-view="p2p"] .privacy,
  body[data-app-view="p2p"] .sponsor-card,
  body[data-app-view="p2p"] footer {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body[data-app-view="p2p"] .intro {
    position: relative;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin-top: 10px !important;
    padding: 16px 16px 15px !important;
    border-radius: 18px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(238, 252, 250, 0.72)),
      rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 28px rgba(48, 104, 144, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  }

  body[data-app-view="p2p"] .intro .eyebrow {
    padding: 4px 8px;
    border-color: rgba(47, 117, 214, 0.26);
    background: rgba(255, 255, 255, 0.68);
    font-size: 10.5px;
  }

  body[data-app-view="p2p"] .intro h1 {
    width: 100%;
    margin: 8px 0 3px !important;
    font-size: clamp(24px, 7vw, 29px) !important;
    line-height: 1.12 !important;
  }

  body[data-app-view="p2p"] .intro p {
    max-width: 21rem;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

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

  body[data-app-view="p2p"] .transfer-card {
    width: 100% !important;
    margin-top: 10px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.5);
    overflow: hidden;
  }

  body[data-app-view="p2p"] .sender-panel,
  body[data-app-view="p2p"] .receiver-panel,
  body[data-app-view="p2p"] .receiver-panel.receiving {
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: hidden;
  }

  body[data-app-view="p2p"] .transfer-file-side,
  body[data-app-view="p2p"] .transfer-settings-side,
  body[data-app-view="p2p"] .receiver-panel .transfer-settings-side {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 15px !important;
    border-radius: 15px !important;
    overflow: hidden;
  }

  body[data-app-view="p2p"] .dropzone {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title action"
      "icon hint action";
    align-items: center !important;
    justify-content: stretch !important;
    min-height: 74px !important;
    padding: 14px !important;
    border: 1px solid rgba(76, 132, 244, 0.28) !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(236, 253, 245, 0.66)), rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 8px 22px rgba(47, 117, 214, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    text-align: left;
  }

  body[data-app-view="p2p"] .dropzone::after {
    content: "选择";
    grid-area: action;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: #2f75d6;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(47, 117, 214, 0.18);
  }

  body[data-app-view="p2p"] .upload-mark {
    grid-area: icon;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
  }

  body[data-app-view="p2p"] .upload-mark svg {
    width: 23px !important;
    height: 23px !important;
  }

  body[data-app-view="p2p"] .dropzone strong {
    grid-area: title;
    min-width: 0;
    font-size: 16px !important;
    line-height: 1.25 !important;
    color: #17314b;
  }

  body[data-app-view="p2p"] .dropzone small {
    grid-area: hint;
    max-width: 18.5rem;
    min-width: 0;
    margin-top: 3px !important;
    padding: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

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

  body[data-app-view="p2p"] .settings-head {
    align-items: center !important;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  body[data-app-view="p2p"] .settings-head h2 {
    min-width: 0;
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  body[data-app-view="p2p"] .security-badge {
    max-width: 8.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px !important;
  }

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

  body[data-app-view="p2p"] .field-label-row label,
  body[data-app-view="p2p"] .field-label-row .inline-action {
    font-size: 12px !important;
  }

  body[data-app-view="p2p"] .password-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px 48px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
  }

  body[data-app-view="p2p"] .transfer-settings-side input,
  body[data-app-view="p2p"] .password-row .text-action {
    min-height: 44px !important;
    font-size: 12.5px !important;
  }

  body[data-app-view="p2p"] .sender-panel .password-row .text-action {
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
  }

  body[data-app-view="p2p"] .field-tip,
  body[data-app-view="p2p"] .expiry-note {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  body[data-app-view="p2p"] .wide {
    min-height: 46px !important;
    margin-top: 14px !important;
    font-size: 13px !important;
  }

  body[data-app-view="p2p"] .privacy {
    gap: 10px !important;
    margin-top: 12px !important;
  }

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

@media (max-width: 430px) {
  body[data-app-view="p2p"] .header,
  body[data-app-view="cloud"] .header {
    padding-inline: 8px !important;
  }

  body[data-app-view="p2p"] .header-actions .admin-link,
  body[data-app-view="cloud"] .header-actions .admin-link {
    max-width: 90px;
    padding-inline: 10px;
  }

  body[data-app-view="p2p"] .p2p-wrap,
  body[data-app-view="p2p"] .privacy,
  body[data-app-view="p2p"] .sponsor-card,
  body[data-app-view="p2p"] footer {
    width: calc(100% - 10px) !important;
  }

  body[data-app-view="p2p"] .intro {
    padding: 14px !important;
  }

  body[data-app-view="p2p"] .intro h1 {
    font-size: clamp(23px, 7.2vw, 28px) !important;
  }

  body[data-app-view="p2p"] .dropzone {
    min-height: 72px !important;
  }
}

@media (max-width: 380px) {
  body[data-app-view="p2p"] .header .brand-name,
  body[data-app-view="cloud"] .header .brand-name {
    font-size: 17px;
  }

  body[data-app-view="p2p"] .header-actions .admin-link,
  body[data-app-view="cloud"] .header-actions .admin-link {
    max-width: 78px;
  }

  body[data-app-view="p2p"] .intro h1 {
    font-size: 22px !important;
  }

  body[data-app-view="p2p"] .dropzone {
    min-height: 70px !important;
  }
}

/* 2026-07 direct-transfer workspace */
.dropzone-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.dropzone-action {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(47, 117, 214, 0.24);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.82);
  color: #205cae;
  font: 800 12px var(--font);
  cursor: pointer;
  transition: transform 180ms var(--ease-pop), border-color 180ms var(--ease), background 180ms var(--ease);
}

.dropzone-action:hover {
  border-color: rgba(47, 117, 214, 0.52);
  background: #fff;
  transform: translateY(-1px);
}

.dropzone-action.primary {
  border-color: #2f75d6;
  background: #2f75d6;
  color: #fff;
  box-shadow: 0 8px 18px rgba(47, 117, 214, 0.16);
}

.transfer-modal {
  width: min(700px, calc(100vw - 32px));
}

.quick-invite-panel {
  display: grid;
  gap: 10px;
}

.transfer-link-actions {
  display: flex;
  gap: 8px;
}

#transferModal[data-quick-stage="transfer"] .quick-invite-panel,
#transferModal[data-quick-stage="transfer"] .transfer-status-label {
  display: none;
}

#transferModal[data-quick-stage="transfer"] .transfer-modal-body {
  padding-top: 16px;
}

.transfer-qr-panel {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(188, 210, 251, 0.85);
  border-radius: 8px;
  background: rgba(242, 248, 255, 0.78);
}

.transfer-qr-panel.hidden {
  display: none;
}

.transfer-qr {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  padding: 5px;
  border: 1px solid rgba(214, 221, 233, 0.9);
  border-radius: 6px;
  background: #fff;
}

.transfer-qr img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.transfer-qr-panel strong,
.transfer-qr-panel small {
  display: block;
}

.transfer-qr-panel strong {
  color: var(--ink);
  font-size: 14px;
}

.transfer-qr-panel small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.receive-save-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid rgba(188, 210, 251, 0.78);
  border-radius: 7px;
  background: rgba(239, 246, 255, 0.72);
}

.receive-save-target strong,
.receive-save-target small {
  display: block;
}

.receive-save-target strong {
  color: var(--ink);
  font-size: 12px;
}

.receive-save-target small {
  max-width: 260px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receive-save-target button {
  flex: none;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--accent-line);
  border-radius: 7px;
  background: #fff;
  color: var(--accent-strong);
  font: 800 11px var(--font);
  cursor: pointer;
}

body.p2p-session-active[data-app-view="p2p"] .intro {
  min-height: 116px;
  padding-block: 24px;
}

body.p2p-session-active[data-app-view="p2p"] .intro h1 {
  font-size: 38px;
}

@media (max-width: 760px) {
  body[data-app-view="p2p"] .dropzone {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title action"
      "icon hint action" !important;
    cursor: default;
  }

  body[data-app-view="p2p"] .dropzone::after {
    display: none !important;
    content: none !important;
  }

  body[data-app-view="p2p"] .dropzone-actions {
    grid-area: action;
    margin: 0;
  }

  body[data-app-view="p2p"] .dropzone-action {
    min-width: 58px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 9px;
  }

  body[data-app-view="p2p"] #chooseFolderButton {
    display: none;
  }

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

  .transfer-modal {
    top: max(8px, env(safe-area-inset-top)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: min(440px, calc(100vw - 12px)) !important;
    max-height: none !important;
  }

  .transfer-qr-panel {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 9px;
  }

  .transfer-qr {
    width: 74px;
    height: 74px;
    padding: 4px;
  }

  .transfer-qr-panel strong {
    font-size: 13px;
  }

  .transfer-qr-panel small {
    margin-top: 2px;
    font-size: 10.5px;
  }

  .receive-save-target {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .receive-save-target small {
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .transfer-qr-panel {
    display: none;
  }
}

/* 2026-07 advanced transfer workbench */
.advanced-host-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(69, 199, 157, 0.38);
  border-radius: 9px;
  background: rgba(235, 253, 247, 0.78);
  animation: wd-panel-enter 360ms var(--ease-pop) both;
}

.advanced-host-panel.hidden {
  display: none;
}

.advanced-host-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.advanced-host-summary span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(63, 167, 135, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.7);
}

.advanced-host-summary b,
.advanced-host-summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-host-summary b {
  color: #087e65;
  font-size: 13px;
}

.advanced-host-summary small {
  margin-top: 2px;
  color: #688175;
  font-size: 10.5px;
}

.advanced-host-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.advanced-host-actions .button {
  min-height: 38px;
  padding-inline: 12px;
  font-size: 11.5px;
}

.advanced-receiver-actions {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(52, 180, 139, 0.24);
}

.advanced-receiver-actions small {
  color: #667c72;
  font-size: 11px;
  line-height: 1.5;
}

.file-state {
  flex: none;
  color: #687a8e;
  font-size: 10px;
  font-weight: 800;
}

.file-state.delivered {
  color: #07906f;
}

.file-item.delivered {
  border-color: rgba(61, 194, 150, 0.28);
  background: rgba(235, 253, 247, 0.72);
}

body[data-transfer-mode="advanced"] .intro {
  min-height: 150px;
}

body[data-transfer-mode="advanced"] .sender-panel {
  grid-template-columns: minmax(350px, 0.92fr) minmax(480px, 1.4fr);
}

body[data-transfer-mode="advanced"] .dropzone {
  min-height: 176px;
}

body[data-transfer-mode="advanced"] .file-list:not(:empty) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: none;
  overflow: visible;
}

body[data-transfer-mode="advanced"] #sendStatus {
  margin-top: 14px;
}

body[data-transfer-mode="advanced"] #offerBox {
  margin-top: 14px;
}

body[data-transfer-mode="advanced"] #offerBox .room-code {
  display: none;
}

@media (max-width: 760px) {
  body[data-app-view="p2p"] .header .app-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-app-view="p2p"] .header .app-nav-button {
    width: 100%;
    min-width: 0;
    font-size: 12px !important;
  }

  body[data-transfer-mode="advanced"] .intro {
    min-height: 0;
  }

  body[data-transfer-mode="advanced"] .sender-panel {
    display: flex !important;
    flex-direction: column;
  }

  body[data-transfer-mode="advanced"] .transfer-file-side {
    order: 1;
  }

  body[data-transfer-mode="advanced"] .transfer-settings-side {
    order: 2;
  }

  body[data-transfer-mode="advanced"] .file-list:not(:empty) {
    order: 3;
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px !important;
  }

  body[data-transfer-mode="advanced"] .dropzone {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    min-height: 70px !important;
  }

  body[data-transfer-mode="advanced"] .dropzone strong {
    font-size: 14px !important;
  }

  body[data-transfer-mode="advanced"] .dropzone small {
    display: none;
  }

  body[data-transfer-mode="advanced"] .dropzone-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-transfer-mode="advanced"] .dropzone-action {
    min-width: 70px;
    min-height: 36px;
  }

  body[data-transfer-mode="advanced"] #chooseFolderButton {
    display: inline-flex;
  }

  .advanced-host-actions,
  .advanced-receiver-actions {
    grid-template-columns: 1fr;
  }

  .advanced-receiver-actions .button {
    width: 100%;
  }
}

@media (max-width: 390px) {
  body[data-app-view="p2p"] .header .app-nav-button {
    font-size: 11px !important;
  }

  body[data-transfer-mode="advanced"] .dropzone {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon title"
      "action action" !important;
  }

  body[data-transfer-mode="advanced"] .dropzone-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-top: 7px;
  }
}

/* Advanced transfer is a persistent room, not a one-shot transfer form. */
.advanced-create-fields,
.advanced-join-field {
  display: none;
}

body[data-transfer-mode="advanced"] .advanced-create-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(140px, 0.65fr);
  gap: 12px;
}

body[data-transfer-mode="advanced"] .advanced-join-field {
  display: grid;
}

body[data-transfer-mode="advanced"]:not(.advanced-room-open) .sender-panel {
  display: block !important;
}

body[data-transfer-mode="advanced"].advanced-room-join:not(.advanced-room-open) .sender-panel {
  display: none !important;
}

body[data-transfer-mode="advanced"]:not(.advanced-room-open) .sender-panel .transfer-file-side,
body[data-transfer-mode="advanced"]:not(.advanced-room-open) .sender-panel > .file-list,
body[data-transfer-mode="advanced"]:not(.advanced-room-open) #offerBox,
body[data-transfer-mode="advanced"]:not(.advanced-room-open) #advancedHostPanel {
  display: none !important;
}

body[data-transfer-mode="advanced"]:not(.advanced-room-open) .sender-panel .transfer-settings-side {
  width: min(620px, 100%);
  margin: 0 auto;
}

.advanced-room-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(520px, 2fr) minmax(250px, 0.82fr);
  min-height: min(720px, calc(100vh - 126px));
  overflow: hidden;
  border: 1px solid rgba(145, 177, 201, 0.5);
  border-radius: 8px;
  background: rgba(249, 253, 255, 0.94);
  box-shadow: 0 24px 70px rgba(25, 75, 109, 0.14);
  animation: advanced-room-enter 420ms var(--ease-pop) both;
}

.advanced-room-workspace.hidden {
  display: none;
}

body.advanced-room-open[data-transfer-mode="advanced"] .intro,
body.advanced-room-open[data-transfer-mode="advanced"] .transfer-card,
body.advanced-room-open[data-transfer-mode="advanced"] .privacy,
body.advanced-room-open[data-transfer-mode="advanced"] .sponsor-card,
body.advanced-room-open[data-transfer-mode="advanced"] .site-footer {
  display: none !important;
}

body.advanced-room-open[data-transfer-mode="advanced"] .p2p-wrap {
  width: min(1640px, calc(100vw - 36px));
  max-width: none;
  padding-top: 18px;
}

.advanced-members-column,
.advanced-share-column {
  min-width: 0;
  padding: 22px 18px;
  background: rgba(250, 253, 255, 0.92);
}

.advanced-members-column {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #dce8f0;
}

.advanced-share-column {
  border-left: 1px solid #dce8f0;
}

.advanced-room-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e1ebf2;
}

.advanced-room-icon {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, #1978ee, #2658d8);
  box-shadow: 0 8px 20px rgba(38, 93, 216, 0.22);
}

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

.advanced-room-brand strong,
.advanced-room-brand small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-room-brand strong {
  color: #10253a;
  font-size: 15px;
}

.advanced-room-brand small {
  margin-top: 4px;
  color: #61778b;
  font-size: 11px;
}

.advanced-room-brand small i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #0caf7d;
}

.advanced-member-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 21px 2px 10px;
  color: #53697c;
  font-size: 12px;
}

.advanced-member-heading span {
  min-width: 22px;
  color: #1d66dd;
  text-align: right;
}

.advanced-member-list {
  display: grid;
  align-content: start;
  gap: 6px;
}

.advanced-member {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  animation: advanced-member-enter 280ms var(--ease-pop) both;
}

.advanced-member.active {
  border-color: #c9dcff;
  background: #edf5ff;
}

.advanced-member-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: var(--member-color, #3176e8);
}

.advanced-member-main {
  min-width: 0;
}

.advanced-member-main strong,
.advanced-member-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-member-main strong {
  color: #152a3f;
  font-size: 12px;
}

.advanced-member-main small {
  margin-top: 3px;
  color: #708497;
  font-size: 10px;
}

.advanced-member-state {
  color: #0b8f69;
  font-size: 10px;
  font-weight: 700;
}

.advanced-member-state.waiting {
  color: #9a6d07;
}

.advanced-network-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #e1ebf2;
}

.advanced-network-note > span {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  color: #087e65;
  background: #e0f8ef;
}

.advanced-network-note strong,
.advanced-network-note small {
  display: block;
}

.advanced-network-note strong {
  color: #087e65;
  font-size: 11px;
}

.advanced-network-note small {
  margin-top: 2px;
  color: #708497;
  font-size: 9.5px;
  line-height: 1.4;
}

.advanced-feed-column {
  display: grid;
  min-width: 0;
  grid-template-rows: auto minmax(250px, 1fr) auto auto;
  background: #fff;
}

.advanced-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  padding: 16px 24px;
  border-bottom: 1px solid #dce8f0;
}

.advanced-feed-header strong,
.advanced-feed-header small {
  display: block;
}

.advanced-feed-header strong {
  color: #10253a;
  font-size: 18px;
}

.advanced-feed-header small {
  margin-top: 4px;
  color: #718598;
  font-size: 11px;
}

.advanced-room-badge {
  padding: 5px 9px;
  border: 1px solid #bad0ff;
  border-radius: 6px;
  color: #1c64dd;
  font-size: 10px;
  font-weight: 800;
  background: #f2f7ff;
}

.advanced-feed {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 28px;
  scrollbar-width: thin;
  scrollbar-color: #cad8e4 transparent;
}

.advanced-feed-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  color: #7a8d9e;
  text-align: center;
}

.advanced-feed-empty > span {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  place-items: center;
  border: 1px dashed #9cc1ef;
  border-radius: 50%;
  color: #2772df;
  font-size: 24px;
  background: #f2f8ff;
}

.advanced-feed-empty strong {
  color: #40566a;
  font-size: 14px;
}

.advanced-feed-empty small {
  margin-top: 6px;
  font-size: 11px;
}

.advanced-feed-event {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  animation: advanced-message-enter 340ms var(--ease-pop) both;
}

.advanced-feed-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: var(--member-color, #3176e8);
}

.advanced-feed-message {
  min-width: 0;
}

.advanced-feed-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 1px 0 7px;
}

.advanced-feed-meta strong {
  color: #1b3044;
  font-size: 12px;
}

.advanced-feed-meta time {
  color: #8798a8;
  font-size: 10px;
}

.advanced-file-group {
  display: grid;
  gap: 7px;
}

.advanced-file-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 64px;
  padding: 8px 11px;
  border: 1px solid #d8e3ec;
  border-radius: 7px;
  background: #fff;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.advanced-file-card.active {
  border-color: #9dc2ff;
  background: #f5f9ff;
}

.advanced-file-card.removed {
  opacity: 0.55;
}

.advanced-file-art {
  display: grid;
  width: 42px;
  height: 46px;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  background: var(--file-color, #2675e8);
}

.advanced-file-main {
  min-width: 0;
}

.advanced-file-main strong,
.advanced-file-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-file-main strong {
  color: #172b3f;
  font-size: 12px;
}

.advanced-file-main small {
  margin-top: 4px;
  color: #728597;
  font-size: 10px;
}

.advanced-file-progress {
  width: 138px;
  color: #2a68d9;
  font-size: 10px;
  font-weight: 800;
  text-align: right;
}

.advanced-file-progress span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-file-progress i {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 3px;
  background: #e6edf4;
}

.advanced-file-progress i::after {
  display: block;
  width: var(--file-progress, 0%);
  height: 100%;
  border-radius: inherit;
  content: "";
  background: #2570e7;
  transition: width 160ms linear;
}

.advanced-live-transfer {
  max-height: 300px;
  overflow-y: auto;
  padding: 14px 24px;
  border-top: 1px solid #e0eaf1;
  background: #f8fbfe;
}

.advanced-live-transfer.hidden {
  display: none;
}

.advanced-live-transfer .status-box,
.advanced-live-transfer .received-files {
  margin: 0;
}

.advanced-live-transfer .status-box + .received-files {
  margin-top: 10px;
}

.advanced-composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  padding: 14px 24px;
  border-top: 1px solid #dce8f0;
  background: #fff;
}

.advanced-composer-copy strong,
.advanced-composer-copy small {
  display: block;
}

.advanced-composer-copy strong {
  color: #1a3044;
  font-size: 12px;
}

.advanced-composer-copy small {
  margin-top: 3px;
  color: #76899b;
  font-size: 10px;
}

.advanced-composer-actions {
  display: flex;
  gap: 8px;
}

.advanced-composer-actions .button {
  min-height: 38px;
  padding: 0 14px;
  font-size: 11px;
}

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

.advanced-share-head strong {
  color: #13283d;
  font-size: 14px;
}

.advanced-share-head small {
  margin-top: 5px;
  color: #718598;
  font-size: 10px;
  line-height: 1.5;
}

.advanced-share-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #ccdbe7;
  border-radius: 7px;
  background: #fff;
}

.advanced-share-link input {
  width: 100%;
  min-width: 0;
  height: 39px;
  padding: 0 10px;
  overflow: hidden;
  border: 0;
  outline: 0;
  color: #475d70;
  font-size: 10px;
  text-overflow: ellipsis;
  background: transparent;
}

.advanced-share-link button {
  min-width: 54px;
  border: 0;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  background: #236be2;
  cursor: pointer;
}

.advanced-share-qr {
  display: grid;
  min-height: 178px;
  margin: 18px 0;
  place-items: center;
  border-block: 1px solid #e1ebf2;
}

.advanced-share-qr img {
  width: 142px;
  height: 142px;
  image-rendering: pixelated;
}

.advanced-room-facts {
  display: grid;
  gap: 10px;
}

.advanced-room-facts span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.advanced-room-facts small {
  color: #788b9b;
  font-size: 10px;
}

.advanced-room-facts b,
.advanced-room-facts button {
  max-width: 150px;
  overflow: hidden;
  border: 0;
  color: #263d50;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
}

.advanced-room-facts button {
  padding: 4px 0;
  color: #1d65db;
  cursor: pointer;
}

.advanced-room-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e1ebf2;
}

.advanced-room-actions .button {
  min-height: 39px;
  padding: 0 8px;
  font-size: 10.5px;
}

body[data-room-role="peer"] #advancedCloseRoom {
  display: none;
}

body[data-room-role="host"] #advancedLeaveRoom {
  display: none;
}

body[data-room-role="host"] .advanced-room-actions {
  grid-template-columns: 1fr;
}

@keyframes advanced-room-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes advanced-member-enter {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes advanced-message-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1180px) {
  .advanced-room-workspace {
    grid-template-columns: 210px minmax(480px, 1fr);
  }

  .advanced-share-column {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.2fr) auto;
    align-items: center;
    gap: 18px;
    border-top: 1px solid #dce8f0;
    border-left: 0;
  }

  .advanced-share-link {
    margin-top: 0;
  }

  .advanced-share-qr {
    display: none;
  }

  .advanced-room-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 760px) {
  body[data-transfer-mode="advanced"] .advanced-create-fields {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.advanced-room-open[data-transfer-mode="advanced"] .p2p-wrap {
    width: 100%;
    padding: 0;
  }

  .advanced-room-workspace {
    grid-template-columns: 1fr;
    min-height: calc(100dvh - 104px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .advanced-members-column {
    display: block;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid #dce8f0;
  }

  .advanced-room-brand {
    padding-bottom: 11px;
  }

  .advanced-room-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  .advanced-member-heading {
    margin: 11px 0 7px;
  }

  .advanced-member-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }

  .advanced-member {
    flex: 0 0 auto;
    grid-template-columns: 30px auto;
    min-height: 40px;
    padding: 5px 8px;
  }

  .advanced-member-avatar {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .advanced-member-state {
    display: none;
  }

  .advanced-network-note {
    display: none;
  }

  .advanced-feed-column {
    min-height: 520px;
    grid-template-rows: auto minmax(230px, 1fr) auto auto;
  }

  .advanced-feed-header {
    min-height: 62px;
    padding: 11px 15px;
  }

  .advanced-feed-header strong {
    font-size: 15px;
  }

  .advanced-feed {
    padding: 15px 12px;
  }

  .advanced-feed-event {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 7px;
    margin-bottom: 16px;
  }

  .advanced-feed-avatar {
    width: 31px;
    height: 31px;
    font-size: 11px;
  }

  .advanced-file-card {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 58px;
    padding: 7px 8px;
  }

  .advanced-file-art {
    width: 36px;
    height: 40px;
    font-size: 9px;
  }

  .advanced-file-progress {
    grid-column: 2;
    width: 100%;
    margin-top: -3px;
    text-align: left;
  }

  .advanced-composer {
    padding: 11px 12px;
  }

  .advanced-composer-copy {
    display: none;
  }

  .advanced-composer-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .advanced-live-transfer {
    max-height: 360px;
    padding: 10px 12px;
  }

  .advanced-share-column {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }

  .advanced-share-link {
    order: 1;
  }

  .advanced-room-facts {
    order: 2;
    grid-template-columns: 1fr 1fr;
  }

  .advanced-room-actions {
    order: 3;
  }

  .advanced-share-head,
  .advanced-share-qr {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .advanced-room-workspace,
  .advanced-member,
  .advanced-feed-event {
    animation: none;
  }
}

/* Advanced transfer room application */
body[data-transfer-mode="advanced"] .intro,
body[data-transfer-mode="advanced"] .transfer-card,
body[data-transfer-mode="advanced"] .privacy,
body[data-transfer-mode="advanced"] .sponsor-card,
body[data-transfer-mode="advanced"] .site-footer {
  display: none !important;
}

body[data-transfer-mode="advanced"] .p2p-wrap {
  width: min(1680px, calc(100vw - 36px));
  max-width: none;
  padding-top: 18px;
}

body[data-transfer-mode="advanced"] .advanced-room-workspace {
  display: grid;
}

body:not([data-transfer-mode="advanced"]) .advanced-room-workspace {
  display: none !important;
}

.advanced-room-workspace {
  grid-template-columns: minmax(250px, 0.76fr) minmax(580px, 1.95fr) minmax(290px, 0.88fr);
  min-height: min(760px, calc(100dvh - 128px));
  scroll-margin-top: 96px;
}

.advanced-create-room-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 43px;
  margin-top: 18px;
  border: 1px solid #1e6ee4;
  border-radius: 7px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  background: #2775e8;
  box-shadow: 0 8px 18px rgba(39, 117, 232, 0.18);
  cursor: pointer;
}

.advanced-create-room-button span {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.advanced-room-brand strong {
  font-size: 17px;
}

.advanced-room-brand small,
.advanced-member-heading {
  font-size: 13px;
}

.advanced-member-main strong {
  font-size: 14px;
}

.advanced-member-main small,
.advanced-member-state {
  font-size: 12px;
}

.advanced-network-note strong {
  font-size: 13px;
}

.advanced-network-note small {
  font-size: 11.5px;
}

.advanced-member-empty {
  padding: 16px 6px;
  color: #7b8e9f;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.advanced-feed-header strong {
  font-size: 20px;
}

.advanced-feed-header small {
  font-size: 13px;
}

.advanced-room-badge {
  font-size: 12px;
}

.advanced-room-lobby {
  display: grid;
  align-content: center;
  grid-template-columns: minmax(220px, 0.85fr) minmax(280px, 1fr);
  gap: 42px;
  min-height: 500px;
  padding: 44px 56px;
  background: #fff;
}

.advanced-room-lobby.hidden {
  display: none;
}

.advanced-lobby-copy {
  align-self: center;
}

.advanced-lobby-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: 31px;
  background: #2875e8;
  box-shadow: 0 12px 26px rgba(40, 117, 232, 0.2);
}

.advanced-lobby-copy strong {
  display: block;
  color: #10253a;
  font-size: 26px;
  line-height: 1.3;
}

.advanced-lobby-copy p {
  margin: 12px 0 0;
  color: #64798c;
  font-size: 15px;
  line-height: 1.75;
}

.advanced-lobby-form,
.advanced-join-form {
  display: grid;
  align-content: center;
  gap: 9px;
}

.advanced-lobby-form label,
.advanced-join-form label {
  margin-top: 4px;
  color: #354c60;
  font-size: 13px;
  font-weight: 750;
}

.advanced-lobby-form input,
.advanced-join-form input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #cbd9e5;
  border-radius: 7px;
  outline: 0;
  color: #152a3f;
  font-size: 14px;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.advanced-lobby-form input:focus,
.advanced-join-form input:focus {
  border-color: #4b8cea;
  box-shadow: 0 0 0 3px rgba(44, 119, 232, 0.12);
}

.advanced-code-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #cbd9e5;
  border-radius: 7px;
}

.advanced-code-input:focus-within {
  border-color: #4b8cea;
  box-shadow: 0 0 0 3px rgba(44, 119, 232, 0.12);
}

.advanced-code-input input {
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  letter-spacing: 0;
}

.advanced-code-input button {
  min-width: 76px;
  border: 0;
  border-left: 1px solid #d7e1e9;
  color: #1e67dc;
  font-size: 13px;
  font-weight: 750;
  background: #f5f9ff;
  cursor: pointer;
}

.advanced-lobby-form > .button,
.advanced-join-form > .button {
  min-height: 45px;
  margin-top: 8px;
  font-size: 14px;
}

.advanced-room-workspace.is-lobby .advanced-feed,
.advanced-room-workspace.is-lobby .advanced-live-transfer,
.advanced-room-workspace.is-lobby .advanced-composer {
  display: none !important;
}

.advanced-room-workspace.is-lobby .advanced-feed-column {
  grid-template-rows: auto minmax(0, 1fr);
}

.advanced-feed {
  padding: 24px 30px;
}

.advanced-feed-event {
  width: min(88%, 560px);
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
  margin-bottom: 22px;
}

.advanced-feed-event.is-own {
  grid-template-columns: minmax(0, 1fr) 40px;
  margin-left: auto;
}

.advanced-feed-event.is-own .advanced-feed-avatar {
  grid-column: 2;
  grid-row: 1;
}

.advanced-feed-event.is-own .advanced-feed-message {
  grid-column: 1;
  grid-row: 1;
}

.advanced-feed-event.is-own .advanced-feed-meta {
  justify-content: flex-end;
}

.advanced-feed-avatar {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

.advanced-feed-meta strong {
  font-size: 14px;
}

.advanced-feed-meta time {
  font-size: 12px;
}

.advanced-file-group {
  justify-items: start;
}

.advanced-feed-event.is-own .advanced-file-group {
  justify-items: end;
}

.advanced-file-card {
  width: min(100%, 470px);
  grid-template-columns: 46px minmax(0, 1fr) minmax(110px, auto);
  min-height: 70px;
  padding: 10px 12px;
  box-shadow: 0 4px 14px rgba(28, 63, 91, 0.06);
}

.advanced-feed-event.is-own .advanced-file-card {
  border-color: #bcd3fb;
  background: #edf5ff;
}

.advanced-file-main strong {
  font-size: 14px;
}

.advanced-file-main small {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  font-size: 12px;
}

.advanced-file-main small b {
  color: #2670df;
  font-weight: 750;
}

.advanced-file-progress {
  width: 122px;
  font-size: 12px;
}

.advanced-file-progress button,
.advanced-file-progress a {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.advanced-composer-copy strong {
  font-size: 14px;
}

.advanced-composer-copy small {
  font-size: 12px;
}

.advanced-composer-actions .button {
  min-height: 41px;
  font-size: 13px;
}

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

.advanced-share-head small,
.advanced-share-link input,
.advanced-share-link button,
.advanced-room-facts small,
.advanced-room-facts b,
.advanced-room-facts button,
.advanced-room-actions .button {
  font-size: 12px;
}

.advanced-join-panel,
.advanced-invite-panel {
  min-width: 0;
}

.advanced-join-form {
  margin-top: 22px;
}

.advanced-room-actions {
  grid-template-columns: 1fr;
}

body[data-room-role="peer"] #advancedCloseRoom,
body[data-room-role="host"] #advancedLeaveRoom {
  display: none;
}

@media (max-width: 1180px) {
  .advanced-room-workspace {
    grid-template-columns: 230px minmax(520px, 1fr);
  }

  .advanced-room-workspace.is-lobby .advanced-share-column {
    grid-column: auto;
    display: block;
    border-top: 0;
    border-left: 1px solid #dce8f0;
  }

  .advanced-room-workspace.is-lobby {
    grid-template-columns: minmax(220px, 0.7fr) minmax(500px, 1.7fr) minmax(280px, 0.9fr);
  }
}

@media (max-width: 920px) {
  .advanced-room-workspace,
  .advanced-room-workspace.is-lobby {
    grid-template-columns: 1fr;
  }

  .advanced-room-workspace.is-lobby .advanced-members-column {
    display: none;
  }

  .advanced-room-workspace.is-lobby .advanced-share-column {
    grid-column: auto;
    border-top: 1px solid #dce8f0;
    border-left: 0;
  }

  .advanced-room-lobby {
    min-height: 430px;
  }
}

/* Advanced room chat composer and shell alignment. */
body[data-transfer-mode="advanced"] .p2p-wrap,
body.advanced-room-open[data-transfer-mode="advanced"] .p2p-wrap {
  width: min(1480px, calc(100vw - 48px));
  max-width: none;
  padding-top: 24px;
}

.advanced-room-workspace {
  grid-template-columns: minmax(232px, 0.72fr) minmax(540px, 1.95fr) minmax(272px, 0.86fr);
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 24px 68px rgba(48, 104, 144, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.advanced-feed-column {
  grid-template-rows: auto minmax(250px, 1fr) auto auto;
}

.advanced-text-bubble {
  width: fit-content;
  max-width: min(100%, 460px);
  padding: 11px 14px;
  border: 1px solid rgba(194, 213, 227, 0.9);
  border-radius: 5px 8px 8px 8px;
  color: #183047;
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 16px rgba(29, 67, 95, 0.07);
}

.advanced-feed-event.is-own .advanced-text-bubble {
  margin-left: auto;
  border-color: rgba(139, 203, 171, 0.78);
  border-radius: 8px 5px 8px 8px;
  background: #dff7e8;
}

.advanced-composer {
  align-items: flex-end;
  gap: 10px;
  min-height: 82px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.82);
}

.advanced-message-input {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 4px 5px 4px 13px;
  border: 1px solid rgba(183, 204, 219, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.advanced-message-input:focus-within {
  border-color: #5e98e8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(44, 119, 232, 0.11);
}

.advanced-message-input textarea {
  width: 100%;
  min-height: 38px;
  max-height: 124px;
  padding: 9px 0 7px;
  overflow-y: auto;
  border: 0;
  outline: 0;
  resize: none;
  color: #152b40;
  font: 14px/1.55 var(--font-sans);
  letter-spacing: 0;
  background: transparent;
  scrollbar-width: thin;
}

.advanced-message-input textarea::placeholder {
  color: #8a9bab;
}

.advanced-composer-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

.advanced-composer-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid #c9d9e5;
  border-radius: 8px;
  color: #355269;
  font: 750 13px/1 var(--font-sans);
  letter-spacing: 0;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms var(--ease-pop);
}

.advanced-composer-button:hover:not(:disabled) {
  border-color: #91b8e8;
  color: #1764d7;
  background: #f2f7ff;
  transform: translateY(-1px);
}

.advanced-composer-button:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.advanced-composer-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.advanced-composer-button.send {
  min-width: 88px;
  border-color: #2670df;
  color: #fff;
  background: #2c75e6;
  box-shadow: 0 7px 16px rgba(44, 117, 230, 0.2);
}

.advanced-composer-button.send:hover:not(:disabled) {
  border-color: #1d64d2;
  color: #fff;
  background: #2169d9;
}

.advanced-composer-button:disabled {
  border-color: #d9e2e9;
  color: #98a8b6;
  background: #eef3f6;
  box-shadow: none;
  cursor: default;
}

@media (max-width: 1180px) and (min-width: 921px) {
  body[data-transfer-mode="advanced"] .p2p-wrap,
  body.advanced-room-open[data-transfer-mode="advanced"] .p2p-wrap {
    width: calc(100vw - 32px);
  }

  .advanced-room-workspace {
    grid-template-columns: 224px minmax(500px, 1fr);
  }
}

@media (max-width: 920px) {
  body[data-transfer-mode="advanced"] .p2p-wrap,
  body.advanced-room-open[data-transfer-mode="advanced"] .p2p-wrap {
    width: calc(100% - 24px);
    padding-top: 14px;
  }

  .advanced-room-workspace {
    border-radius: 22px;
  }

  .advanced-composer {
    position: sticky;
    z-index: 3;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 11px 12px max(11px, env(safe-area-inset-bottom));
  }

  .advanced-message-input {
    width: 100%;
  }

  .advanced-composer-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1.15fr;
  }

  .advanced-composer-button {
    width: 100%;
    min-height: 42px;
    padding: 0 8px;
  }
}

@media (max-width: 760px) {
  body[data-transfer-mode="advanced"] .p2p-wrap,
  body.advanced-room-open[data-transfer-mode="advanced"] .p2p-wrap {
    width: calc(100% - 12px);
    padding: 8px 0 14px;
  }

  .advanced-room-workspace {
    min-height: calc(100dvh - 112px);
    border-radius: 20px;
  }

  .advanced-feed-event,
  .advanced-feed-event.is-own {
    width: 96%;
  }

  .advanced-text-bubble {
    max-width: 100%;
    font-size: 13.5px;
  }

  .advanced-composer-button span {
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  body[data-transfer-mode="advanced"] .p2p-wrap {
    width: 100%;
    padding: 0;
  }

  .advanced-room-workspace {
    min-height: calc(100dvh - 102px);
  }

  .advanced-create-room-button {
    display: none;
  }

  .advanced-room-brand strong {
    font-size: 16px;
  }

  .advanced-feed-header strong {
    font-size: 17px;
  }

  .advanced-feed-header small {
    font-size: 12px;
  }

  .advanced-room-lobby {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
    padding: 28px 20px;
  }

  .advanced-lobby-copy {
    text-align: center;
  }

  .advanced-lobby-icon {
    margin: 0 auto 14px;
  }

  .advanced-lobby-copy strong {
    font-size: 22px;
  }

  .advanced-lobby-copy p {
    font-size: 14px;
  }

  .advanced-feed {
    padding: 18px 11px;
  }

  .advanced-feed-event,
  .advanced-feed-event.is-own {
    width: 92%;
    grid-template-columns: 33px minmax(0, 1fr);
    gap: 7px;
  }

  .advanced-feed-event.is-own {
    grid-template-columns: minmax(0, 1fr) 33px;
  }

  .advanced-feed-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .advanced-file-card {
    width: 100%;
    grid-template-columns: 39px minmax(0, 1fr);
    padding: 9px;
  }

  .advanced-file-art {
    width: 39px;
    height: 43px;
  }

  .advanced-file-main strong {
    font-size: 13px;
  }

  .advanced-file-main small {
    font-size: 11px;
  }

  .advanced-file-progress {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 2px;
    text-align: right;
  }

  .advanced-file-progress i {
    margin-top: 6px;
  }

  .advanced-share-column {
    display: block;
    padding: 18px 16px;
  }

  .advanced-share-head {
    display: block;
  }

  .advanced-join-form {
    margin-top: 14px;
  }

  .advanced-invite-panel .advanced-share-qr {
    display: none;
  }

  .advanced-room-facts {
    margin-top: 16px;
  }

  .advanced-room-actions {
    grid-template-columns: 1fr;
  }
}

/* Advanced rooms open immediately and keep room controls in a dedicated side panel. */
.advanced-room-starting {
  display: grid;
  min-height: 500px;
  place-items: center;
  align-content: center;
  gap: 9px;
  color: #718598;
  text-align: center;
  background: #fff;
}

.advanced-room-starting.hidden {
  display: none;
}

.advanced-room-starting strong {
  color: #243c52;
  font-size: 18px;
}

.advanced-room-starting small {
  font-size: 13px;
}

.advanced-starting-spinner {
  width: 34px;
  height: 34px;
  margin-bottom: 7px;
  border: 3px solid #dceaff;
  border-top-color: #2875e8;
  border-radius: 50%;
  animation: advanced-room-spin 800ms linear infinite;
}

.advanced-room-workspace.is-starting .advanced-feed,
.advanced-room-workspace.is-starting .advanced-live-transfer,
.advanced-room-workspace.is-starting .advanced-composer {
  display: none !important;
}

.advanced-room-workspace.is-starting .advanced-feed-column {
  grid-template-rows: auto minmax(0, 1fr);
}

.advanced-room-settings {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e1ebf2;
}

.advanced-room-settings label {
  color: #42596d;
  font-size: 12px;
  font-weight: 750;
}

.advanced-room-settings input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ccdbe7;
  border-radius: 7px;
  outline: 0;
  color: #173047;
  font-size: 13px;
  background: #fff;
}

.advanced-room-settings input:focus {
  border-color: #4b8cea;
  box-shadow: 0 0 0 3px rgba(44, 119, 232, 0.12);
}

.advanced-room-settings input[readonly] {
  color: #64798c;
  background: #f5f8fb;
}

.advanced-room-settings .advanced-code-input {
  border: 0;
}

.advanced-room-settings .advanced-code-input input {
  border: 1px solid #ccdbe7;
  border-radius: 7px 0 0 7px;
}

.advanced-room-settings .advanced-code-input button {
  border: 1px solid #ccdbe7;
  border-left: 0;
  border-radius: 0 7px 7px 0;
}

.advanced-room-settings .button {
  min-height: 39px;
  margin-top: 4px;
  font-size: 12px;
}

.advanced-room-settings-tip {
  color: #7a8d9e;
  font-size: 10.5px;
  line-height: 1.55;
}

body[data-room-role="peer"] .advanced-owner-only {
  display: none !important;
}

body.advanced-join-modal-open {
  overflow: hidden;
}

.advanced-join-scrim {
  position: fixed;
  z-index: 1200;
  inset: 0;
  background: rgba(15, 35, 52, 0.5);
  backdrop-filter: blur(5px);
  animation: advanced-scrim-in 180ms ease both;
}

.advanced-join-scrim.hidden,
.advanced-join-modal.hidden {
  display: none;
}

.advanced-join-modal {
  position: fixed;
  z-index: 1201;
  top: 50%;
  left: 50%;
  width: min(430px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid rgba(170, 191, 208, 0.72);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(18, 49, 72, 0.26);
  transform: translate(-50%, -50%);
  animation: advanced-join-modal-in 260ms var(--ease-pop) both;
}

.advanced-join-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 21px 16px;
  border-bottom: 1px solid #e1ebf2;
}

.advanced-join-modal > header strong,
.advanced-join-modal > header small {
  display: block;
}

.advanced-join-modal > header strong {
  color: #142b40;
  font-size: 18px;
}

.advanced-join-modal > header small {
  margin-top: 5px;
  color: #74889a;
  font-size: 12px;
}

.advanced-join-modal > header .icon-button {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 6px;
  color: #61778a;
  font-size: 19px;
}

.advanced-join-modal .advanced-join-form {
  gap: 9px;
  margin: 0;
  padding: 18px 21px;
}

.advanced-join-modal > footer {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 9px;
  padding: 14px 21px 20px;
  border-top: 1px solid #eef3f6;
}

.advanced-join-modal > footer .button {
  min-height: 43px;
}

@keyframes advanced-room-spin {
  to { transform: rotate(360deg); }
}

@keyframes advanced-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes advanced-join-modal-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 760px) {
  .advanced-create-room-button {
    display: flex;
    min-height: 40px;
    margin-top: 11px;
  }

  .advanced-room-starting {
    min-height: 360px;
  }

  .advanced-room-settings {
    order: 0;
    margin-top: 0;
  }

  .advanced-share-link {
    order: 1;
  }

  .advanced-invite-panel .advanced-share-qr {
    display: grid;
    order: 2;
    min-height: 150px;
    margin: 8px 0;
  }

  .advanced-invite-panel .advanced-share-head {
    display: block;
  }

  .advanced-share-qr img {
    width: 128px;
    height: 128px;
  }

  .advanced-room-facts {
    order: 3;
  }

  .advanced-room-actions {
    order: 4;
  }

  .advanced-join-modal {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100dvh - 68px);
    border-radius: 8px 8px 0 0;
    transform: none;
    animation-name: advanced-join-sheet-in;
  }

  .advanced-join-modal > header,
  .advanced-join-modal .advanced-join-form,
  .advanced-join-modal > footer {
    padding-inline: 17px;
  }
}

@keyframes advanced-join-sheet-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Keep advanced rooms glassy and bounded while the activity feed scrolls independently. */
.advanced-room-workspace {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(236, 248, 252, 0.48);
  box-shadow: 0 26px 72px rgba(25, 75, 109, 0.16);
  backdrop-filter: blur(24px) saturate(138%);
}

.advanced-members-column,
.advanced-share-column {
  background: rgba(255, 255, 255, 0.67);
  backdrop-filter: blur(18px) saturate(128%);
}

.advanced-feed-column {
  min-height: 0;
  background: rgba(255, 255, 255, 0.56);
}

.advanced-feed-header,
.advanced-composer {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(126%);
}

.advanced-feed {
  scrollbar-gutter: stable;
}

@media (min-width: 921px) {
  .advanced-room-workspace {
    height: clamp(620px, calc(100dvh - 128px), 800px);
    min-height: 620px;
    max-height: 800px;
  }

  .advanced-members-column,
  .advanced-share-column {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(127, 157, 179, 0.5) transparent;
  }

  .advanced-feed-column {
    height: 100%;
    overflow: hidden;
  }

  .advanced-feed {
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 920px) {
  .advanced-room-workspace {
    height: auto;
    max-height: none;
  }

  .advanced-feed-column {
    height: min(70dvh, 680px);
    min-height: 500px;
    overflow: hidden;
  }

  .advanced-feed {
    min-height: 0;
    overflow-y: auto;
  }
}

@media (max-width: 760px) {
  .advanced-feed-column {
    height: min(72dvh, 640px);
    min-height: 480px;
  }
}

/* Final responsive contract for the advanced room. */
@media (max-width: 920px) {
  .advanced-room-workspace,
  .advanced-room-workspace.is-lobby {
    grid-template-columns: minmax(0, 1fr);
  }

  .advanced-composer-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

@media (max-width: 760px) {
  body[data-transfer-mode="advanced"] .p2p-wrap,
  body.advanced-room-open[data-transfer-mode="advanced"] .p2p-wrap {
    width: calc(100% - 12px);
    padding: 8px 0 14px;
  }

  .advanced-room-workspace {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(48, 104, 144, 0.13);
  }

  .advanced-members-column {
    min-width: 0;
  }

  .advanced-member-list {
    max-width: 100%;
  }

  .advanced-feed-column {
    width: 100%;
    min-width: 0;
  }

  .advanced-composer-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .advanced-composer-button {
    min-width: 0;
  }
}

/* The page footer sizing rules must not constrain the room message composer. */
body[data-app-view="p2p"] .advanced-composer {
  display: grid;
  width: 100% !important;
  max-width: none !important;
  min-height: 0;
  margin: 0;
  padding: 14px 18px 16px;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  box-sizing: border-box;
  border-top: 1px solid rgba(188, 210, 225, 0.76);
  background: rgba(250, 253, 255, 0.82);
  box-shadow: 0 -8px 24px rgba(41, 91, 126, 0.04);
  backdrop-filter: blur(18px) saturate(130%);
}

body[data-app-view="p2p"] .advanced-message-input {
  width: 100%;
  min-height: 58px;
  padding: 5px 13px;
  box-sizing: border-box;
  border-color: rgba(174, 199, 217, 0.92);
  background: rgba(255, 255, 255, 0.9);
}

body[data-app-view="p2p"] .advanced-message-input textarea {
  min-height: 46px;
  padding: 10px 0 8px;
  font-size: 14px;
}

body[data-app-view="p2p"] .advanced-composer-actions {
  width: 100%;
  justify-content: flex-end;
}

body[data-app-view="p2p"] .advanced-composer-button {
  min-height: 40px;
  padding-inline: 15px;
}

body[data-app-view="p2p"] .advanced-composer-button.send {
  min-width: 96px;
}

@media (max-width: 920px) {
  body[data-app-view="p2p"] .advanced-composer {
    position: sticky;
    z-index: 3;
    bottom: 0;
    padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  }

  body[data-app-view="p2p"] .advanced-composer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
  }

  body[data-app-view="p2p"] .advanced-composer-button {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }
}

/* Advanced transfer: immersive three-panel glass room. */
body.advanced-room-open[data-transfer-mode="advanced"] .p2p-wrap {
  width: min(1540px, calc(100vw - 40px));
  padding: 18px 0 24px;
}

body[data-transfer-mode="advanced"] .advanced-room-workspace {
  height: clamp(600px, calc(100dvh - 118px), 920px);
  min-height: 600px;
  max-height: 920px;
  padding: 16px;
  gap: 16px;
  grid-template-columns: minmax(260px, 0.72fr) minmax(600px, 1.9fr) minmax(310px, 0.84fr);
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 24px 68px rgba(48, 104, 144, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(26px) saturate(125%);
}

body[data-transfer-mode="advanced"] .advanced-members-column,
body[data-transfer-mode="advanced"] .advanced-feed-column,
body[data-transfer-mode="advanced"] .advanced-share-column {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 30px rgba(48, 97, 133, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: none;
}

body[data-transfer-mode="advanced"] .advanced-members-column {
  padding: 24px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.84);
}

body[data-transfer-mode="advanced"] .advanced-member-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

body[data-transfer-mode="advanced"] .advanced-room-brand,
body[data-transfer-mode="advanced"] .advanced-network-note {
  border-color: rgba(184, 210, 225, 0.62);
}

body[data-transfer-mode="advanced"] .advanced-feed-column {
  height: 100%;
  grid-template-rows: auto minmax(250px, 1fr) auto auto;
  background: rgba(255, 255, 255, 0.78);
}

body[data-transfer-mode="advanced"] .advanced-feed-header {
  min-height: 96px;
  padding: 21px 28px;
  border-bottom: 1px solid rgba(183, 210, 226, 0.54);
  background: transparent;
  backdrop-filter: none;
}

body[data-transfer-mode="advanced"] .advanced-feed-header strong {
  font-size: 23px;
}

body[data-transfer-mode="advanced"] .advanced-feed-header small {
  margin-top: 6px;
  font-size: 13px;
}

body[data-transfer-mode="advanced"] .advanced-feed {
  padding: 24px 28px 18px;
  background: transparent;
  scrollbar-color: rgba(118, 154, 178, 0.5) transparent;
  scrollbar-gutter: stable;
}

body[data-transfer-mode="advanced"] .advanced-feed-empty {
  min-height: 100%;
}

body[data-transfer-mode="advanced"] .advanced-feed-empty > span {
  background: rgba(244, 250, 255, 0.68);
}

body[data-transfer-mode="advanced"] .advanced-live-transfer {
  margin: 0 20px 10px;
  padding: 12px;
  border: 1px solid rgba(183, 210, 226, 0.66);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer {
  position: relative;
  width: auto !important;
  max-width: none !important;
  min-height: 82px;
  margin: 0;
  padding: 14px 24px 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 0;
  border-top: 1px solid rgba(175, 204, 222, 0.5);
  border-radius: 0;
  background: rgba(247, 252, 255, 0.72);
  box-shadow: 0 -10px 28px rgba(45, 94, 128, 0.045);
  backdrop-filter: none;
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-message-input {
  min-height: 52px;
  padding: 0 17px;
  align-items: center;
  border-color: rgba(155, 187, 209, 0.72);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 14px rgba(48, 97, 133, 0.045), inset 0 1px 2px rgba(41, 83, 111, 0.025);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 200ms ease, transform 200ms var(--ease-pop);
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-message-input:focus-within {
  border-color: rgba(44, 117, 230, 0.82);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 0 4px rgba(44, 117, 230, 0.085), 0 8px 18px rgba(44, 99, 153, 0.08);
  transform: translateY(-1px);
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-message-input textarea {
  display: block;
  min-height: 46px;
  max-height: 110px;
  margin: 0;
  padding: 11px 0 9px;
  border: 0 !important;
  border-radius: 0;
  outline: 0;
  color: #18324a;
  font-size: 15px;
  line-height: 1.55;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none;
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-message-input textarea:focus {
  border: 0 !important;
  outline: 0;
  box-shadow: none !important;
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-message-input textarea::placeholder {
  color: #8296a8;
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-actions {
  width: auto;
  align-self: center;
  gap: 8px;
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button {
  position: relative;
  min-width: 86px;
  min-height: 50px;
  padding: 0 15px;
  gap: 7px;
  border-color: rgba(156, 188, 211, 0.78);
  border-radius: 16px;
  color: #31516a;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 15px rgba(48, 97, 133, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  animation: advanced-action-arrive 380ms var(--ease-pop) both;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 200ms ease, transform 200ms var(--ease-pop);
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button:nth-child(2) {
  animation-delay: 45ms;
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button:nth-child(3) {
  animation-delay: 90ms;
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button:nth-child(4) {
  animation-delay: 135ms;
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
  transition: transform 200ms var(--ease-pop);
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button.attachment span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button.attachment:hover:not(:disabled) {
  border-color: rgba(61, 128, 219, 0.58);
  color: #1f68ce;
  background: rgba(243, 249, 255, 0.98);
  box-shadow: 0 10px 22px rgba(48, 103, 158, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-2px) scale(1.025);
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button.attachment:hover:not(:disabled) svg {
  transform: translateY(-1px) rotate(-3deg);
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.965);
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button.video.active {
  border-color: rgba(225, 92, 92, 0.55);
  color: #c83f3f;
  background: rgba(255, 244, 244, 0.96);
}

.advanced-video-bubble {
  width: min(100%, 470px);
  overflow: hidden;
  border: 1px solid rgba(180, 205, 223, 0.88);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(27, 67, 99, 0.1);
}

.advanced-feed-event.is-own .advanced-video-bubble {
  margin-left: auto;
  border-color: rgba(134, 188, 232, 0.88);
}

.advanced-video-stage {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  color: #d7e5ef;
  background: #172634;
}

.advanced-video-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #172634;
}

.advanced-video-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: #c4d5e1;
  background: linear-gradient(145deg, #1b3143, #142330);
}

.advanced-video-placeholder svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.advanced-video-placeholder span {
  font-size: 12px;
}

.advanced-video-live {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  color: #fff;
  background: #e44949;
  font-size: 11px;
  font-weight: 750;
}

.advanced-video-live::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: advanced-video-pulse 1.5s ease-in-out infinite;
}

.advanced-video-footer {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  color: #50677a;
  font-size: 12px;
}

.advanced-video-footer button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #efb4b4;
  border-radius: 8px;
  color: #c83939;
  background: #fff7f7;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.advanced-video-bubble.is-ended .advanced-video-stage video {
  display: none;
}

.advanced-video-bubble.is-ended .advanced-video-placeholder {
  color: #8fa1af;
  background: #eef3f6;
}

@keyframes advanced-video-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button.send {
  min-width: 90px;
  min-height: 50px;
  padding: 0 18px;
  gap: 7px;
  border-color: #246cdb;
  color: #fff;
  background: #2c75e6;
  box-shadow: 0 9px 20px rgba(44, 117, 230, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button.send:hover:not(:disabled) {
  border-color: #1f65cf;
  color: #fff;
  background: #2169d9;
  box-shadow: 0 13px 26px rgba(38, 106, 216, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transform: translateY(-2px) scale(1.03);
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button.send:hover:not(:disabled) svg {
  transform: translate(2px, -2px) rotate(-4deg);
}

body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button.send:disabled {
  border-color: rgba(151, 178, 198, 0.7);
  color: #6f8495;
  background: rgba(232, 240, 246, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  opacity: 1;
}

@keyframes advanced-action-arrive {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
  68% {
    opacity: 1;
    transform: translateY(-1px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button {
    animation: none;
  }
}

body[data-transfer-mode="advanced"] .advanced-share-column {
  padding: 24px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 1px solid rgba(255, 255, 255, 0.84);
  scrollbar-width: thin;
}

body[data-transfer-mode="advanced"] .advanced-share-link,
body[data-transfer-mode="advanced"] .advanced-code-input,
body[data-transfer-mode="advanced"] .advanced-room-settings > input {
  border-color: rgba(177, 203, 220, 0.76);
  background: rgba(255, 255, 255, 0.7);
}

.advanced-room-moderation {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(185, 207, 222, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
}

.advanced-moderation-head {
  display: grid;
  gap: 2px;
  margin-bottom: 2px;
}

.advanced-moderation-head strong {
  color: #19354b;
  font-size: 13px;
}

.advanced-moderation-head small {
  color: #74899a;
  font-size: 10.5px;
}

.advanced-policy-toggle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.advanced-policy-toggle:hover {
  background: rgba(234, 244, 252, 0.8);
}

.advanced-policy-toggle:active {
  transform: translateY(1px);
}

.advanced-policy-toggle span,
.advanced-policy-toggle b,
.advanced-policy-toggle small {
  display: block;
  min-width: 0;
}

.advanced-policy-toggle b {
  color: #274359;
  font-size: 12px;
}

.advanced-policy-toggle small {
  margin-top: 2px;
  color: #7b8e9d;
  font-size: 10px;
  line-height: 1.4;
}

.advanced-policy-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.advanced-policy-toggle i {
  position: relative;
  width: 38px;
  height: 22px;
  border: 1px solid #bfd0dc;
  border-radius: 999px;
  background: #dce6ed;
  transition: border-color 180ms ease, background 180ms ease;
}

.advanced-policy-toggle i::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(37, 71, 95, 0.22);
  content: "";
  transition: transform 180ms ease;
}

.advanced-policy-toggle input:checked + i {
  border-color: #2476e7;
  background: #2476e7;
}

.advanced-policy-toggle input:checked + i::after {
  transform: translateX(16px);
}

.advanced-policy-toggle input:focus-visible + i {
  outline: 3px solid rgba(36, 118, 231, 0.2);
  outline-offset: 2px;
}

.advanced-member-tools {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.advanced-member-tools button {
  padding: 2px 5px;
  border: 0;
  border-radius: 5px;
  color: #be3f4a;
  font-size: 10px;
  font-weight: 700;
  background: transparent;
  cursor: pointer;
}

.advanced-member-tools button:hover {
  background: #fff0f1;
}

.advanced-composer.is-publishing-locked {
  border-color: rgba(192, 205, 215, 0.8);
}

.advanced-composer.is-publishing-locked .advanced-message-input,
.advanced-composer.is-publishing-locked .advanced-composer-button:disabled {
  opacity: 0.72;
}

@media (max-width: 760px) {
  .advanced-room-moderation {
    margin: 12px 0;
    padding: 10px;
    border-radius: 12px;
  }

  .advanced-policy-toggle {
    min-height: 48px;
  }

  body[data-transfer-mode="advanced"] .advanced-member-tools {
    align-items: end;
  }
}

body[data-transfer-mode="advanced"] .advanced-share-qr,
body[data-transfer-mode="advanced"] .advanced-room-actions {
  border-color: rgba(184, 210, 225, 0.58);
}

@media (max-width: 1360px) and (min-width: 1181px) {
  body.advanced-room-open[data-transfer-mode="advanced"] .p2p-wrap {
    width: calc(100vw - 28px);
  }

  body[data-transfer-mode="advanced"] .advanced-room-workspace {
    padding: 12px;
    gap: 12px;
    grid-template-columns: minmax(230px, 0.7fr) minmax(540px, 1.8fr) minmax(280px, 0.82fr);
  }
}

@media (max-width: 1180px) and (min-width: 921px) {
  body[data-transfer-mode="advanced"] .advanced-room-workspace {
    height: auto;
    min-height: 720px;
    max-height: none;
    padding: 12px;
    gap: 12px;
    grid-template-columns: 240px minmax(0, 1fr);
  }

  body[data-transfer-mode="advanced"] .advanced-members-column,
  body[data-transfer-mode="advanced"] .advanced-feed-column {
    height: 720px;
  }

  body[data-transfer-mode="advanced"] .advanced-share-column {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(280px, 1.15fr) auto;
    gap: 18px;
    border: 1px solid rgba(255, 255, 255, 0.72);
  }
}

@media (max-width: 920px) {
  body.advanced-room-open[data-transfer-mode="advanced"] .p2p-wrap {
    width: calc(100% - 16px);
    padding: 10px 0 18px;
  }

  body[data-transfer-mode="advanced"] .advanced-room-workspace,
  body[data-transfer-mode="advanced"] .advanced-room-workspace.is-lobby {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 8px;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
    border-radius: 22px;
  }

  body[data-transfer-mode="advanced"] .advanced-members-column,
  body[data-transfer-mode="advanced"] .advanced-feed-column,
  body[data-transfer-mode="advanced"] .advanced-share-column {
    width: 100%;
    height: auto;
    border-radius: 17px;
  }

  body[data-transfer-mode="advanced"] .advanced-members-column {
    max-height: 280px;
  }

  body[data-transfer-mode="advanced"] .advanced-feed-column {
    height: min(72dvh, 680px);
    min-height: 520px;
  }

  body[data-transfer-mode="advanced"] .advanced-share-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid rgba(255, 255, 255, 0.72);
  }

  body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer {
    position: sticky;
    bottom: 0;
    margin: 0;
    padding: 12px;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1.05fr 0.95fr 1.15fr;
    justify-content: end;
  }

  body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer-button.send {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  body.advanced-room-open[data-transfer-mode="advanced"] .p2p-wrap {
    width: calc(100% - 8px);
    padding-top: 6px;
  }

  body[data-transfer-mode="advanced"] .advanced-room-workspace,
  body[data-transfer-mode="advanced"] .advanced-room-workspace.is-lobby {
    padding: 6px;
    gap: 8px;
    border-radius: 20px;
  }

  body[data-transfer-mode="advanced"] .advanced-members-column {
    padding: 14px;
  }

  body[data-transfer-mode="advanced"] .advanced-feed-header {
    min-height: 68px;
    padding: 13px 15px;
  }

  body[data-transfer-mode="advanced"] .advanced-feed-header strong {
    font-size: 17px;
  }

  body[data-transfer-mode="advanced"] .advanced-feed {
    padding: 16px 12px;
  }

  body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer {
    margin-inline: 0;
  }

  body[data-transfer-mode="advanced"] .advanced-share-column {
    padding: 14px;
  }
}

/* ==========================================================================
   2026-07-29 mobile application shell
   The desktop workspace remains unchanged. Mobile uses its own navigation,
   information hierarchy and touch-first layouts instead of shrinking desktop.
   ========================================================================== */

.mobile-bottom-nav,
.advanced-mobile-tabs {
  display: none;
}

.mobile-profile-shell {
  width: min(100% - 32px, 980px);
  margin: 24px auto 48px;
}

.mobile-section-header,
.mobile-profile-guest,
.mobile-profile-card,
.mobile-profile-actions,
.mobile-profile-recents,
.mobile-profile-menu {
  border: 1px solid rgba(190, 213, 230, 0.72);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 42px rgba(31, 79, 118, 0.1);
  backdrop-filter: blur(22px) saturate(135%);
}

.mobile-section-header {
  padding: 28px;
  border-radius: 20px;
}

.mobile-section-header h1 {
  margin-top: 4px;
  font-size: 34px;
}

.mobile-section-header p {
  margin-top: 5px;
  color: #667b91;
}

.mobile-profile-guest {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding: 24px;
  border-radius: 20px;
}

.mobile-profile-guest-mark {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #2f83f7, #2457db 58%, #10b981);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.22);
}

.mobile-profile-guest-mark svg,
.mobile-profile-edit svg,
.mobile-profile-action-grid svg,
.mobile-bottom-nav svg,
.advanced-mobile-tabs svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.mobile-profile-guest-mark svg {
  width: 31px;
}

.mobile-profile-guest h2,
.mobile-profile-actions h2,
.mobile-profile-section-head h2 {
  font-size: 18px;
}

.mobile-profile-guest p,
.mobile-profile-section-head span {
  margin-top: 4px;
  color: #718399;
  font-size: 13px;
}

.mobile-profile-auth-actions {
  display: flex;
  gap: 8px;
}

.mobile-profile-card,
.mobile-profile-actions,
.mobile-profile-recents,
.mobile-profile-menu {
  margin-top: 16px;
  border-radius: 20px;
}

.mobile-profile-card {
  padding: 24px;
}

.mobile-profile-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.mobile-profile-avatar {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 4px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  font-weight: 850;
  background: linear-gradient(145deg, #3183f4, #2255d8 56%, #13af83);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.22);
}

.mobile-profile-identity h2 {
  font-size: 22px;
}

.mobile-profile-identity p {
  margin-top: 3px;
  overflow: hidden;
  color: #718399;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-profile-edit {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #d7e3ee;
  border-radius: 14px;
  color: #266de3;
  background: rgba(248, 252, 255, 0.88);
  cursor: pointer;
}

.mobile-profile-edit svg {
  width: 20px;
}

.mobile-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(198, 216, 230, 0.72);
}

.mobile-profile-stats span {
  min-width: 0;
  text-align: center;
}

.mobile-profile-stats span + span {
  border-left: 1px solid rgba(207, 221, 232, 0.78);
}

.mobile-profile-stats b,
.mobile-profile-stats small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-profile-stats b {
  color: #19334d;
  font-size: 20px;
}

.mobile-profile-stats small {
  margin-top: 3px;
  color: #788a9c;
  font-size: 11px;
}

.mobile-profile-actions,
.mobile-profile-recents {
  padding: 22px;
}

.mobile-profile-action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.mobile-profile-action-grid button {
  display: grid;
  min-width: 0;
  min-height: 112px;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 1px solid #dce6ef;
  border-radius: 16px;
  color: #21384e;
  background: rgba(250, 253, 255, 0.86);
  cursor: pointer;
  transition: transform 180ms var(--ease-pop), border-color 180ms ease, box-shadow 180ms ease;
}

.mobile-profile-action-grid button:active {
  transform: scale(0.96);
}

.mobile-profile-action-grid button > span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 2px;
  place-items: center;
  border-radius: 14px;
}

.mobile-profile-action-grid button > span.blue { color: #2f72e8; background: #edf5ff; }
.mobile-profile-action-grid button > span.green { color: #0f9a72; background: #eafaf4; }
.mobile-profile-action-grid button > span.amber { color: #dd8708; background: #fff7e6; }
.mobile-profile-action-grid button > span.violet { color: #7456d8; background: #f4efff; }
.mobile-profile-action-grid svg { width: 22px; }
.mobile-profile-action-grid b { font-size: 13px; }
.mobile-profile-action-grid small { color: #8796a7; font-size: 10px; }

.mobile-profile-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mobile-profile-recent-list {
  display: grid;
  gap: 1px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #e0e8f0;
  border-radius: 14px;
  background: #e0e8f0;
}

.mobile-profile-recent-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.94);
}

.mobile-profile-recent-item > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  color: #276be0;
  font-size: 9px;
  font-weight: 900;
  background: #edf5ff;
}

.mobile-profile-recent-item strong,
.mobile-profile-recent-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-profile-recent-item strong { color: #1a3147; font-size: 13px; }
.mobile-profile-recent-item small { margin-top: 3px; color: #8191a2; font-size: 10px; }
.mobile-profile-recent-item > b { color: #8a98a8; font-size: 10px; white-space: nowrap; }
.mobile-profile-recent-item > b.success { color: #0a956d; }
.mobile-profile-recent-empty { margin-top: 18px; color: #8998a8; font-size: 12px; text-align: center; }

.mobile-profile-menu {
  overflow: hidden;
}

.mobile-profile-menu button {
  display: grid;
  width: 100%;
  min-height: 72px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 12px 20px;
  border: 0;
  border-bottom: 1px solid rgba(218, 229, 238, 0.86);
  color: #20374d;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.mobile-profile-menu button:last-child { border-bottom: 0; }
.mobile-profile-menu button span { font-size: 14px; font-weight: 750; }
.mobile-profile-menu button small { grid-column: 1; margin-top: 2px; color: #8292a3; font-size: 10px; }
.mobile-profile-menu button i { grid-column: 2; grid-row: 1 / span 2; color: #8b9aaa; font-size: 24px; font-style: normal; }
.mobile-profile-menu button.danger span,
.mobile-profile-menu button.danger i { color: #dc3c43; }

@media (max-width: 760px) {
  :root {
    --mobile-header-height: 60px;
    --mobile-nav-height: 72px;
  }

  html {
    scroll-padding-bottom: calc(var(--mobile-nav-height) + 18px);
  }

  body {
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 14px);
  }

  body[data-app-view="p2p"],
  body[data-app-view="advanced"],
  body[data-app-view="cloud"],
  body[data-app-view="profile"] {
    background-color: #ecf7fd;
    background-attachment: scroll;
  }

  .page {
    width: 100%;
    min-height: 100dvh;
  }

  .header {
    position: sticky !important;
    top: 0;
    z-index: 48;
    display: flex !important;
    width: 100% !important;
    height: var(--mobile-header-height) !important;
    min-height: var(--mobile-header-height) !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-bottom: 1px solid rgba(183, 208, 226, 0.62) !important;
    background: rgba(245, 252, 255, 0.88) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    box-shadow: 0 6px 22px rgba(47, 92, 126, 0.07) !important;
  }

  .header .brand {
    grid-column: auto !important;
    grid-row: auto !important;
    gap: 9px !important;
    font-size: 20px !important;
  }

  .header .brand-mark {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
  }

  .header .app-nav,
  .header .header-actions {
    display: none !important;
  }

  .mobile-bottom-nav {
    position: fixed;
    right: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 54;
    display: grid;
    min-height: var(--mobile-nav-height);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 7px 5px calc(7px + env(safe-area-inset-bottom, 0px));
    border: 1px solid rgba(202, 218, 231, 0.82);
    border-radius: 20px;
    background: rgba(252, 254, 255, 0.92);
    box-shadow: 0 14px 36px rgba(31, 64, 96, 0.18);
    backdrop-filter: blur(26px) saturate(150%);
  }

  .mobile-bottom-nav .app-nav-button {
    display: grid;
    min-width: 0;
    min-height: 56px;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 3px 1px;
    border: 0;
    border-radius: 14px;
    color: #7a8799;
    background: transparent;
    box-shadow: none;
  }

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

  .mobile-bottom-nav .app-nav-button svg {
    width: 25px;
    height: 25px;
    transition: transform 220ms var(--ease-pop);
  }

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

  .mobile-bottom-nav .app-nav-button.active {
    color: #1769e8;
    background: #edf5ff;
  }

  .mobile-bottom-nav .app-nav-button.active svg {
    transform: translateY(-1px) scale(1.08);
  }

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

  .site-announcement {
    width: calc(100% - 20px);
    margin: 8px auto 0;
  }

  .site-footer,
  .sponsor-card {
    display: none !important;
  }

  .toast {
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 20px);
  }

  /* Quick transfer */
  body[data-route-view="p2p"] .p2p-wrap {
    width: 100% !important;
    padding: 10px 10px 20px;
  }

  body[data-route-view="p2p"] .intro {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 16px 17px;
    border-radius: 18px;
  }

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

  body[data-route-view="p2p"] .intro h1 {
    margin: 0;
    font-size: 25px;
    line-height: 1.2;
  }

  body[data-route-view="p2p"] .intro p {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.5;
  }

  body[data-route-view="p2p"] .intro-badge {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 10px;
    padding: 5px 9px;
    font-size: 10px;
  }

  body[data-route-view="p2p"] .transfer-card {
    margin-top: 10px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-route-view="p2p"] .sender-panel,
  body[data-route-view="p2p"] .receiver-panel,
  body[data-route-view="p2p"] .receiver-panel.receiving {
    display: grid;
    gap: 10px;
    padding: 0;
    background: transparent;
  }

  body[data-route-view="p2p"] .transfer-file-side,
  body[data-route-view="p2p"] .transfer-settings-side,
  body[data-route-view="p2p"] .receiver-panel .transfer-settings-side,
  body[data-route-view="p2p"] .received-files {
    padding: 16px;
    border: 1px solid rgba(198, 218, 232, 0.78);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 12px 34px rgba(34, 83, 120, 0.08);
    backdrop-filter: blur(22px) saturate(135%);
  }

  body[data-route-view="p2p"] .dropzone {
    min-height: 150px;
    padding: 16px 14px;
    border: 1px dashed #91baf4;
    border-radius: 16px;
    background: rgba(244, 249, 255, 0.82);
  }

  body[data-route-view="p2p"] .upload-mark {
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
  }

  body[data-route-view="p2p"] .dropzone strong {
    font-size: 17px;
  }

  body[data-route-view="p2p"] .dropzone > small {
    display: none;
  }

  body[data-route-view="p2p"] .dropzone-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 13px;
  }

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

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

  body[data-route-view="p2p"] .file-list:not(:empty) {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 10px 0 0;
  }

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

  body[data-route-view="p2p"] .password-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    border-radius: 12px;
  }

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

  /* Cloud mobile application page */
  body[data-app-view="cloud"] #viewCloud {
    width: 100%;
    padding: 10px 10px 22px;
  }

  body[data-app-view="cloud"] .cloud-hero {
    width: 100% !important;
    min-height: 0;
    margin: 0;
    padding: 17px;
    border-radius: 18px;
  }

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

  body[data-app-view="cloud"] .cloud-hero h1 {
    font-size: 25px;
  }

  body[data-app-view="cloud"] .cloud-hero p {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.5;
  }

  body[data-app-view="cloud"] .cloud-badge {
    align-self: flex-start;
    margin-top: 10px;
    padding: 5px 9px;
    font-size: 10px;
  }

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

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

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

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

  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 {
    border: 1px solid rgba(198, 218, 232, 0.8);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 34px rgba(34, 83, 120, 0.08);
    backdrop-filter: blur(22px) saturate(135%);
  }

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

  body[data-app-view="cloud"] .quota-row strong {
    color: #1769e8;
    font-size: 18px;
  }

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

  body[data-app-view="cloud"] .cloud-upload-icon {
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 15px;
  }

  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"] .choose-button {
    min-height: 40px;
    margin: 0;
    padding: 0 13px;
    border-radius: 12px;
  }

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

  body[data-app-view="cloud"] .files-heading {
    padding: 0 4px 10px;
  }

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

  body[data-app-view="cloud"] .cloud-file-card {
    display: grid;
    min-height: 78px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 11px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.96);
  }

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

  body[data-app-view="cloud"] .file-main > div {
    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;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body[data-app-view="cloud"] .file-actions .icon-button {
    min-height: 34px;
    padding-inline: 9px;
    font-size: 10px;
  }

  body[data-app-view="cloud"] .cloud-guest {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 20px;
    border-radius: 18px;
  }

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

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

  .mobile-profile-shell {
    width: 100%;
    margin: 0;
    padding: 10px 10px 24px;
  }

  .mobile-section-header,
  .mobile-profile-guest,
  .mobile-profile-card,
  .mobile-profile-actions,
  .mobile-profile-recents,
  .mobile-profile-menu {
    border-radius: 18px;
  }

  .mobile-section-header {
    padding: 17px;
  }

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

  .mobile-section-header h1 {
    margin: 0;
    font-size: 25px;
  }

  .mobile-section-header p {
    font-size: 12px;
  }

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

  .mobile-profile-guest-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .mobile-profile-auth-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .mobile-profile-card,
  .mobile-profile-actions,
  .mobile-profile-recents {
    padding: 17px;
  }

  .mobile-profile-action-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .mobile-profile-action-grid button {
    min-height: 98px;
  }

  .mobile-profile-menu button {
    min-height: 68px;
    padding-inline: 17px;
  }

  /* Advanced room becomes a native three-tab mobile workspace. */
  body[data-route-view="advanced"] .header {
    position: sticky !important;
  }

  body.advanced-room-open[data-transfer-mode="advanced"] .p2p-wrap {
    width: 100% !important;
    padding: 8px 8px 16px;
  }

  body[data-transfer-mode="advanced"] .advanced-room-workspace,
  body[data-transfer-mode="advanced"] .advanced-room-workspace.is-lobby {
    display: flex;
    width: 100%;
    min-height: calc(100dvh - var(--mobile-header-height) - var(--mobile-nav-height) - 34px);
    max-height: calc(100dvh - var(--mobile-header-height) - var(--mobile-nav-height) - 34px);
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(191, 213, 230, 0.82);
    border-radius: 18px;
    background: rgba(250, 253, 255, 0.91);
    box-shadow: 0 16px 42px rgba(31, 78, 113, 0.12);
    backdrop-filter: blur(24px) saturate(138%);
  }

  body[data-transfer-mode="advanced"] .advanced-room-workspace.hidden {
    display: none;
  }

  .advanced-mobile-tabs {
    display: grid;
    flex: none;
    grid-template-columns: repeat(3, 1fr);
    padding: 6px;
    border-bottom: 1px solid rgba(204, 220, 232, 0.82);
    background: rgba(248, 252, 255, 0.9);
  }

  .advanced-mobile-tabs button {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 12px;
    color: #78899a;
    background: transparent;
    font-size: 12px;
    font-weight: 750;
  }

  .advanced-mobile-tabs button.active {
    color: #1769e8;
    background: #eaf3ff;
  }

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

  body[data-transfer-mode="advanced"] .advanced-members-column,
  body[data-transfer-mode="advanced"] .advanced-feed-column,
  body[data-transfer-mode="advanced"] .advanced-share-column {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    border: 0;
    background: transparent;
  }

  .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[data-mobile-panel="members"] .advanced-members-column {
    display: flex !important;
    overflow-y: auto;
    padding: 16px;
  }

  .advanced-room-workspace[data-mobile-panel="info"] .advanced-share-column {
    display: block !important;
    overflow-y: auto;
    padding: 17px;
  }

  .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;
  }

  body[data-transfer-mode="advanced"] .advanced-feed-header {
    min-height: 66px;
    padding: 12px 14px;
  }

  body[data-transfer-mode="advanced"] .advanced-feed-header strong {
    font-size: 17px;
  }

  body[data-transfer-mode="advanced"] .advanced-feed-header small {
    max-width: 240px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-transfer-mode="advanced"] .advanced-feed {
    min-height: 0;
    padding: 14px 11px;
  }

  body[data-transfer-mode="advanced"] .advanced-feed-event {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }

  body[data-transfer-mode="advanced"] .advanced-feed-avatar {
    width: 32px;
    height: 32px;
  }

  body[data-transfer-mode="advanced"] .advanced-file-card {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 64px;
    border-radius: 13px;
  }

  body[data-transfer-mode="advanced"] .advanced-file-progress {
    grid-column: 1 / -1;
    width: 100%;
  }

  body[data-transfer-mode="advanced"] .advanced-live-transfer {
    max-height: 150px;
    padding: 9px 11px;
  }

  body[data-app-view="p2p"][data-transfer-mode="advanced"] .advanced-composer {
    min-height: 64px;
    gap: 7px;
    margin: 0;
    padding: 8px 9px;
    border-radius: 0;
  }

  body[data-transfer-mode="advanced"] .advanced-message-input {
    min-width: 0;
  }

  body[data-transfer-mode="advanced"] .advanced-composer-actions {
    flex: none;
    gap: 5px;
  }

  body[data-transfer-mode="advanced"] .advanced-composer-button {
    min-width: 42px;
    min-height: 42px;
    padding: 0 9px;
    border-radius: 13px;
  }

  body[data-transfer-mode="advanced"] .advanced-composer-button span {
    display: none;
  }

  body[data-transfer-mode="advanced"] .advanced-room-brand {
    padding-bottom: 14px;
  }

  body[data-transfer-mode="advanced"] .advanced-member-heading {
    margin-top: 16px;
  }

  body[data-transfer-mode="advanced"] .advanced-member-list {
    display: grid;
    gap: 6px;
    overflow: visible;
  }

  body[data-transfer-mode="advanced"] .advanced-member {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    min-height: 62px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.68);
  }

  body[data-transfer-mode="advanced"] .advanced-member-avatar {
    width: 40px;
    height: 40px;
  }

  body[data-transfer-mode="advanced"] .advanced-network-note {
    margin-top: 18px;
  }

  body[data-transfer-mode="advanced"] .advanced-share-qr {
    min-height: 168px;
  }

  body[data-transfer-mode="advanced"] .advanced-room-actions {
    grid-template-columns: 1fr;
  }

  .settings-modal {
    z-index: 72;
  }

  .settings-modal-scrim {
    z-index: 71;
  }
}

@media (max-width: 390px) {
  .mobile-bottom-nav {
    right: 5px;
    bottom: 5px;
    left: 5px;
    border-radius: 18px;
  }

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

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

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

  body[data-app-view="cloud"] .choose-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .mobile-profile-stats b {
    font-size: 17px;
  }

  .mobile-profile-action-grid button {
    min-height: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav .app-nav-button,
  .mobile-profile-action-grid button {
    transition: none;
  }
}