/* Values measured from supplied Figma frames; wx-u scales a 390px sample as a unit. */
.wx-preview {
  --wx-base: 390;
  --wx-bg: #fff;
  --wx-chat-bg: #ededed;
  --wx-secondary-bg: rgba(0,0,0,.05);
  --wx-fg: rgba(0,0,0,.9);
  --wx-fg-secondary: rgba(0,0,0,.55);
  --wx-fg-tertiary: rgba(0,0,0,.3);
  --wx-line: rgba(0,0,0,.1);
  --wx-brand: #07c160;
  --wx-negative: #fa5151;
  width: 390px; max-width: 100%; min-width: 0; flex: 0 1 390px;
  container-type: inline-size; border-radius: 18px; overflow: hidden;
  outline: 1px solid rgba(0,0,0,.08); box-shadow: 0 12px 28px -20px #182a21;
}
.wx-preview.narrow { --wx-base: 360; width: 360px; flex-basis: 360px; }
.wx-screen {
  --wx-u: calc(100cqw / var(--wx-base));
  width: 100%; height: calc(844 * var(--wx-u)); display: flex; flex-direction: column;
  background: var(--wx-bg); color: var(--wx-fg); overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: calc(17 * var(--wx-u)); line-height: 1.4; text-align: left;
}
.wx-screen * { box-sizing: border-box; }
.wx-screen p,.wx-screen h3 { margin: 0; }
.wx-asset { display: block; object-fit: contain; flex-shrink: 0; width: 100%; height: 100%; }
.wx-status { display: flex; flex: 0 0 calc(47 * var(--wx-u)); height: calc(47 * var(--wx-u)); align-items: flex-start; justify-content: space-between; padding: calc(13 * var(--wx-u)) calc(27 * var(--wx-u)) 0; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600; letter-spacing: calc(-.408 * var(--wx-u)); line-height: calc(22 * var(--wx-u)); }
.wx-status-icons { width: calc(77.4 * var(--wx-u)); height: calc(13 * var(--wx-u)); margin-top: calc(4 * var(--wx-u)); }
.wx-nav { height: calc(44 * var(--wx-u)); flex: 0 0 calc(44 * var(--wx-u)); display: grid; grid-template-columns: calc(44 * var(--wx-u)) 1fr calc(44 * var(--wx-u)); align-items: center; }
.wx-nav strong { font-size: calc(17 * var(--wx-u)); text-align: center; font-weight: 500; }
.wx-nav-side { display: flex; justify-content: center; }
.wx-back { width: calc(12 * var(--wx-u)); height: calc(24 * var(--wx-u)); }
.wx-more { width: calc(24 * var(--wx-u)); height: calc(24 * var(--wx-u)); }
.wx-home-indicator { flex: 0 0 calc(34 * var(--wx-u)); height: calc(34 * var(--wx-u)); display: flex; justify-content: center; align-items: flex-end; padding-bottom: calc(9 * var(--wx-u)); }
.wx-home-indicator span { width: calc(134 * var(--wx-u)); height: calc(5 * var(--wx-u)); background: var(--wx-fg); border-radius: 100px; }

/* Chat: grey canvas, white pinned information, compact avatar/bubble rhythm. */
.wx-chat { background: var(--wx-chat-bg); }
.wx-tip-wrap { flex: 0 0 auto; padding: calc(6 * var(--wx-u)) calc(8 * var(--wx-u)) calc(8 * var(--wx-u)); border-bottom: calc(.5 * var(--wx-u)) solid var(--wx-line); }
.wx-tip { display: flex; gap: calc(8 * var(--wx-u)); align-items: flex-start; background: #fff; border-radius: calc(8 * var(--wx-u)); padding: calc(12 * var(--wx-u)) calc(16 * var(--wx-u)); }
.wx-tip.fixed { height: calc(48 * var(--wx-u)); overflow: hidden; }
.wx-tip.grow,.wx-tip.reflow { height: auto; min-height: calc(48 * var(--wx-u)); }
.wx-tip-icon { width: calc(24 * var(--wx-u)); height: calc(24 * var(--wx-u)); }
.wx-tip-text { flex: 1; min-width: 0; font-size: calc(14 * var(--wx-u)); line-height: 1.4; overflow-wrap: anywhere; }
.wx-chat.stress .wx-tip-text { font-size: calc(18 * var(--wx-u)); }
.wx-tip.small-font .wx-tip-text { font-size: calc(11 * var(--wx-u)); }
.wx-tip.reflow { display: block; }
.wx-tip.reflow .wx-tip-icon { margin-bottom: calc(8 * var(--wx-u)); }
.wx-messages { flex: 1; min-height: 0; overflow-y: auto; padding: calc(16 * var(--wx-u)) calc(12 * var(--wx-u)); scrollbar-width: thin; }
.wx-time { font-size: calc(12 * var(--wx-u)); color: var(--wx-fg-tertiary); text-align: center; padding-bottom: calc(18 * var(--wx-u)); }
.wx-message { display: flex; gap: calc(12 * var(--wx-u)); align-items: flex-start; margin-bottom: calc(16 * var(--wx-u)); }
.wx-message.own { flex-direction: row-reverse; }
.wx-avatar { width: calc(40 * var(--wx-u)); height: calc(40 * var(--wx-u)); border-radius: calc(4 * var(--wx-u)); object-fit: cover; }
.wx-message-content { max-width: calc(270 * var(--wx-u)); min-width: 0; }
.wx-sender { display: block; color: var(--wx-fg-secondary); font-size: calc(12 * var(--wx-u)); margin: calc(-2 * var(--wx-u)) 0 calc(5 * var(--wx-u)); }
.wx-bubble { position: relative; background: #fff; border-radius: calc(4 * var(--wx-u)); padding: calc(8 * var(--wx-u)) calc(12 * var(--wx-u)); overflow-wrap: anywhere; }
.wx-bubble > span { position: relative; }
.wx-bubble-tail { position: absolute; left: calc(-6 * var(--wx-u)); top: calc(9 * var(--wx-u)); width: calc(26 * var(--wx-u)); height: calc(22 * var(--wx-u)); }
.own .wx-bubble { background: #95ec69; }
.own .wx-bubble-tail { left: auto; right: calc(-6 * var(--wx-u)); transform: rotate(180deg); }
.wx-chat-toolbar { flex: 0 0 calc(91 * var(--wx-u)); height: calc(91 * var(--wx-u)); background: rgba(246,246,246,.82); border-top: calc(.5 * var(--wx-u)) solid var(--wx-line); }
.wx-compose { height: calc(57 * var(--wx-u)); display: flex; align-items: flex-start; gap: calc(8 * var(--wx-u)); padding: calc(8 * var(--wx-u)); }
.wx-compose-icon { width: calc(32 * var(--wx-u)); height: calc(32 * var(--wx-u)); margin-top: calc(4 * var(--wx-u)); }
.wx-compose-input { flex: 1; min-width: 0; height: calc(40 * var(--wx-u)); border-radius: calc(4 * var(--wx-u)); background: #fff; }

/* Files: a clear identity block and a separate, quiet action area. */
.wx-file-main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: calc(96 * var(--wx-u)) calc(32 * var(--wx-u)) calc(62 * var(--wx-u)); }
.wx-file-heading { text-align: center; }
.wx-file-icon { width: calc(64 * var(--wx-u)); height: calc(64 * var(--wx-u)); margin: 0 auto calc(32 * var(--wx-u)); }
.wx-file-heading h3 { font-size: calc(22 * var(--wx-u)); line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
.wx-file-heading > p { margin-top: calc(16 * var(--wx-u)); font-size: calc(17 * var(--wx-u)); line-height: 1.6; }
.wx-file-bottom { margin-top: auto; padding-top: calc(32 * var(--wx-u)); }
.wx-file-actions { display: flex; gap: calc(8 * var(--wx-u)); align-items: stretch; }
.wx-file-actions.row { flex-direction: row; }
.wx-file-actions.stack { flex-direction: column; gap: calc(16 * var(--wx-u)); align-items: center; }
.wx-button { display: flex; justify-content: center; align-items: center; gap: calc(4 * var(--wx-u)); border: 0; border-radius: calc(8 * var(--wx-u)); padding: calc(12 * var(--wx-u)) calc(16 * var(--wx-u)); min-height: calc(48 * var(--wx-u)); min-width: 0; line-height: 1.4; font-size: calc(17 * var(--wx-u)); font-weight: 500; text-align: center; }
.wx-button.primary { color: #fff; background: var(--wx-brand); }
.wx-button.secondary { color: var(--wx-fg); background: var(--wx-secondary-bg); }
.wx-button.negative { color: #fff; background: var(--wx-negative); }
.wx-button-icon { width: calc(20 * var(--wx-u)); height: calc(20 * var(--wx-u)); }
.wx-file-actions.row .wx-button { flex: 1; }
/* Keep width independent of the height mode so long copy can actually wrap. */
.wx-file-actions.stack .wx-button { width: min(100%,calc(184 * var(--wx-u))); flex-shrink: 0; }
.wx-button > span { min-width: 0; }
.wx-file-actions.fixed .wx-button { height: calc(48 * var(--wx-u)); }
.wx-file-actions.fixed .wx-button > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-file-actions.flexible .wx-button { height: auto; }
.wx-file-actions.flexible .wx-button > span { white-space: normal; overflow-wrap: anywhere; }

/* Cleanup: variable explanation and stable decisions are separate layout concerns. */
.wx-clean-icon { flex: 0 0 auto; width: calc(64 * var(--wx-u)); height: calc(64 * var(--wx-u)); margin: calc(32 * var(--wx-u)) auto; }
.wx-clean-layout { flex: 1; min-height: 0; margin: 0 calc(32 * var(--wx-u)) calc(24 * var(--wx-u)); }
.wx-clean-layout.flow { display: block; overflow-y: auto; }
.wx-clean-layout.separate { display: flex; flex-direction: column; }
.wx-clean-copy { font-size: calc(17 * var(--wx-u)); line-height: 1.6; }
.wx-cleanup.stress .wx-clean-copy { font-size: calc(20 * var(--wx-u)); }
.wx-cleanup .wx-clean-copy.small-font { font-size: calc(12 * var(--wx-u)); }
.wx-clean-copy h3 { font-size: calc(22 * var(--wx-u)); line-height: 1.4; font-weight: 500; text-align: center; margin-bottom: calc(24 * var(--wx-u)); }
.wx-clean-text p + p { margin-top: calc(16 * var(--wx-u)); }
.wx-clean-layout.separate .wx-clean-copy { flex: 1; min-height: 0; overflow-y: auto; padding-right: calc(4 * var(--wx-u)); scrollbar-width: thin; }
.wx-clean-actions { flex-shrink: 0; padding-top: calc(24 * var(--wx-u)); padding-bottom: calc(16 * var(--wx-u)); text-align: center; }
.wx-clean-warning { color: var(--wx-fg); font-size: calc(17 * var(--wx-u)); line-height: 1.6; text-align: left; }
.wx-clean-estimate { font-size: calc(14 * var(--wx-u)); color: var(--wx-fg-secondary); margin-top: calc(24 * var(--wx-u)) !important; }
.wx-clean-actions .wx-button { min-width: calc(184 * var(--wx-u)); max-width: min(100%,calc(280 * var(--wx-u))); margin: calc(12 * var(--wx-u)) auto 0; }
.wx-read-full { color: #576b95; background: none; border: 0; font-size: calc(17 * var(--wx-u)); padding: calc(10 * var(--wx-u)) 0; text-align: left; min-height: calc(44 * var(--wx-u)); }
.compare-column .wx-preview { margin: 0 auto; }
.source-reference { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.source-reference a { color: var(--ink); }
.case-origin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 18px 14px; font-size: 11px; color: #738266; }
.case-origin .text-button { font-size: 11px; min-height: 32px; }
.wx-screen button:focus-visible { outline: 2px solid #576b95; outline-offset: 2px; }

/* The legacy cases now use the same fixed phone canvas as every other case. */
.phone-preview-screen > .wx-preview {--wx-base:390;width:390px;height:844px;max-width:none;flex:none;border-radius:0;outline:0;box-shadow:none;}
.phone-preview-screen > .wx-preview > .wx-screen {--wx-u:1px;width:390px;height:844px;}