/* Customer content follows its natural height; only long lists scroll. */

.sms-list { align-content:start; grid-auto-rows:max-content; }
.sms-item { align-content:start; grid-auto-rows:max-content; }
.sms-body { align-self:start; }

@media(min-width:761px) {
 .content.list-content:has(#inbox-message-panel .data-panel) { display:block; block-size:auto; }
 .content.list-content:has(#inbox-message-panel .data-panel) > #inbox-message-panel {
  display:block; flex:none; min-height:0;
 }
 #inbox-message-panel .data-panel { display:block; flex:none; min-height:0; }
 #inbox-message-panel .message-scroll {
  flex:none; min-height:0; max-height:calc(100dvh - var(--header-height) - 240px);
 }
}

@media(min-width:901px) {
 .content.list-content:has(.numbers-workspace) { display:block; block-size:auto; }
 .content.list-content > .numbers-workspace { flex:none; min-height:0; grid-template-rows:auto; }
 .numbers-picker {
  display:flex; flex-direction:column; max-height:calc(100dvh - var(--header-height) - 140px);
  top:calc(var(--header-height) + 20px);
 }
 .numbers-picker .numbers-choices { flex:0 1 auto; min-height:0; max-height:none; overflow-y:auto; }
 .number-detail-panel { align-self:start; }
}

/* Wide desktops place the current task beside its codes instead of centering
   two small sections inside a wide card. The laptop and phone order stays intact. */
@media(min-width:1440px) {
 .content.list-content:has(.numbers-workspace) { max-width:1440px; }
 .numbers-workspace { grid-template-columns:240px minmax(0,1fr); }
 .number-receive-stage .stage-main { max-width:none; margin:0; text-align:left; padding:0; min-width:0; }
 .number-receive-stage .stage-main h2 { margin:0 0 9px; }
 .number-receive-stage .stage-main p { max-width:none; margin:6px 0 10px; }
 .number-receive-stage .stage-main > .stage-illustration { margin:0 0 10px; }
 .number-receive-stage .ready-phone { justify-content:flex-start; }
 /* Existing renderers put center alignment inline on these action rows. */
 .number-receive-stage .stage-main > .button-row { justify-content:flex-start !important; }
 .number-receive-stage .code-panel-inline { min-width:0; max-width:none; margin:0; align-self:start; }
 .number-receive-stage:has(> .code-panel-inline) {
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,1fr); gap:14px 20px; align-items:start;
 }
 .number-receive-stage:has(> .code-panel-inline) > .stage-steps { grid-column:1 / -1; grid-row:1; margin:0; }
 .number-receive-stage:has(> .code-panel-inline) > .stage-main { grid-column:1; grid-row:2; }
 .number-receive-stage:has(> .code-panel-inline) > .code-panel-inline { grid-column:2; grid-row:2; }
 .number-receive-stage:has(> .code-panel-inline) > .number-ready-note { grid-column:1 / -1; grid-row:3; }
 /* During an active window the same code panel is inside the state renderer. */
 .number-receive-stage .stage-main:has(> .code-panel-inline) {
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,1fr);
  grid-template-rows:repeat(6,max-content); gap:0 20px; align-items:start;
 }
 .number-receive-stage .stage-main:has(> .code-panel-inline) > :not(.code-panel-inline) { grid-column:1; }
 .number-receive-stage .stage-main:has(> .code-panel-inline) > .code-panel-inline { grid-column:2; grid-row:1 / span 6; }
 .number-receive-stage .stage-main:has(> .code-panel-inline) > .button-row { grid-column:1 / -1; margin-top:12px; }
}

/* Package selection is one accessible control over the entire card. */
.usage-package:has(.usage-package-select) { padding:0; }
.usage-workspace-options .usage-package > .usage-package-select {
 display:flex; flex-direction:column; align-items:flex-start; width:100%; min-height:0;
 gap:0; padding:18px 15px; border:0; border-radius:inherit; background:transparent;
 color:var(--ink); font:inherit; text-align:left;
}
.usage-package-select:focus-visible { outline:3px solid #bca135; outline-offset:-3px; }
.usage-package-select:not(:disabled):hover { background:#fffaf0; }
.usage-package.is-selected .usage-package-select:not(:disabled):hover { background:#fff9df; }
.usage-package-select:disabled { cursor:not-allowed; opacity:.62; }
.usage-package-title { font-size:1.18rem; font-weight:700; line-height:1.35; }
.usage-package-select .usage-price { display:block; margin:15px 0 12px; }
.usage-package-select > .small { margin:0 0 18px; font-size:.79rem; line-height:1.6; }
.usage-package-cta { width:100%; margin-top:auto; }

/* Order numbers stay visible and selectable independently of the order link. */
.usage-order-reference {
 display:flex; align-items:center; gap:10px; min-width:0; margin:10px 0;
 padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--soft);
}
.usage-order-reference > span { display:grid; gap:4px; flex:1; min-width:0; color:var(--muted); font-size:.72rem; }
.usage-order-reference code { color:var(--ink); font-size:.73rem; line-height:1.45; overflow-wrap:anywhere; user-select:all; }
.usage-order-reference .usage-order-copy { flex:none; min-height:34px; padding:7px 11px; font-size:.74rem; }
.usage-history-record { border-bottom:1px solid var(--line); }
.usage-history-record:last-child { border-bottom:0; }
.usage-history-record > .usage-history-item { border-bottom:0; }
.usage-history-record > .usage-order-reference { margin:0 0 13px; }
.checkout-summary .usage-order-reference { flex:0 0 100%; width:100%; }

/* Display the original uploaded image, including its branding and recipient. */
.usage-checkout-content .manual-payment-qr.usage-payment-original {
 --payment-image-height:clamp(205px,calc(100dvh - 465px),335px);
 width:min(300px,100%); gap:8px; padding:10px;
}
.usage-payment-amount {
 display:grid; grid-template-columns:auto auto; justify-content:center; align-items:baseline;
 column-gap:7px; width:100%; padding:3px 8px; border-radius:8px; background:#1677ff; color:#fff;
}
.usage-payment-amount > span { font-size:.72rem; font-weight:600; line-height:1.3; }
.usage-payment-amount > strong { font-size:1.6rem; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.usage-checkout-content .usage-payment-original .alipay-qr-slot {
 display:block; width:100%; height:auto; max-width:100%; background:transparent; overflow:visible;
}
.usage-payment-image-button {
 display:grid; place-items:center; width:100%; min-height:0; margin:0; padding:0;
 border:0; border-radius:8px; background:transparent; cursor:zoom-in;
}
.usage-payment-image-button:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.usage-checkout-content .usage-payment-original .alipay-qr-slot img {
 display:block; width:auto; height:auto; max-width:100%; max-height:var(--payment-image-height);
 margin:0; padding:0; border:0; border-radius:8px; object-fit:contain;
}
.customer-dialog.usage-payment-image-dialog {
 width:min(800px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:hidden;
}
.usage-payment-image-dialog[open] { display:flex; flex-direction:column; }
.usage-payment-image-dialog .dialog-heading { flex:none; }
.usage-payment-image-dialog .dialog-content { min-height:0; overflow:auto; padding:16px; }
.usage-payment-image-preview { display:grid; place-items:center; gap:10px; min-width:0; }
.usage-payment-image-preview > .usage-payment-amount { width:min(380px,100%); }
.usage-payment-image-preview > .usage-payment-amount > strong { font-size:1.85rem; }
.usage-payment-image-preview img {
 display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 255px);
 object-fit:contain; border-radius:8px;
}
.usage-payment-original > .usage-payment-image-caption { margin:0; font-size:.7rem; line-height:1.4; }

@media(min-width:761px) {
 .checkout-payment-layout {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,.9fr); align-items:start; gap:12px;
 }
 .checkout-payment-info,.checkout-payment-image { min-width:0; }
 .usage-checkout-panel .checkout-payment-layout .checkout-summary { gap:4px 7px; }
 .usage-checkout-panel .checkout-payment-layout .checkout-summary h2 { font-size:.95rem; }
 .usage-checkout-panel .checkout-payment-layout .usage-final-price { margin:3px 0; font-size:2rem; }
 .usage-checkout-panel .checkout-payment-layout .usage-order-reference { gap:6px; margin:8px 0; padding:7px 8px; }
 .usage-checkout-panel .checkout-payment-layout .usage-order-reference code { font-size:.67rem; }
 .usage-checkout-panel .checkout-payment-layout .usage-order-copy { padding:6px 8px; min-height:32px; }
 .usage-checkout-panel .checkout-payment-layout .usage-exact-amount { margin:0 0 10px; padding:8px 9px; font-size:.79rem; }
 .usage-checkout-panel .checkout-payment-image .manual-payment-qr.usage-payment-original {
  --payment-image-height:clamp(165px,calc(100dvh - 485px),285px);
  width:100%; margin:0; padding:7px; gap:6px;
 }
 .usage-checkout-panel .checkout-payment-image .usage-payment-original > .button { min-height:32px; padding:6px 10px; font-size:.73rem; }
 .usage-checkout-panel .checkout-scroll:has(.checkout-payment-layout) .checkout-metadata { margin-top:10px; padding-top:9px; }
}

@media(max-width:760px) {
 .usage-workspace-options .usage-package > .usage-package-select { padding:15px 12px; }
 .usage-package-title { font-size:1rem; }
 .usage-package-select > .small { font-size:.72rem; margin-bottom:14px; }
 .usage-order-reference { gap:8px; margin:8px 0; padding:8px 9px; }
 .usage-order-reference code { font-size:.68rem; }
 .usage-order-reference .usage-order-copy { min-height:36px; padding:7px 9px; }
 .usage-checkout-content .manual-payment-qr.usage-payment-original {
  --payment-image-height:clamp(145px,calc(100dvh - 485px),215px);
  width:min(260px,100%); padding:7px; gap:6px;
 }
 .usage-checkout-sheet .checkout-scroll:has(.checkout-payment-layout) { padding:11px 16px; }
 .usage-checkout-sheet .checkout-payment-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,.85fr); gap:8px 12px; align-items:start; }
 .usage-checkout-sheet .checkout-payment-info { display:contents; }
 .usage-checkout-sheet .checkout-payment-info > .checkout-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-column:1 / -1; gap:3px 8px; }
 .usage-checkout-sheet .checkout-payment-info > .checkout-summary > .badge { justify-self:start; align-self:center; }
 .usage-checkout-sheet .checkout-payment-info > .checkout-summary h2 { margin:0; font-size:.87rem; align-self:center; }
 .usage-checkout-sheet .checkout-payment-info > .checkout-summary .usage-price-breakdown { grid-column:1 / -1; margin:0; font-size:.69rem; }
 .usage-checkout-sheet .checkout-payment-info > .checkout-summary .usage-final-price { grid-column:1 / -1; margin:0; font-size:1.9rem; }
 .usage-checkout-sheet .checkout-payment-info > .checkout-summary .usage-order-reference { grid-column:1 / -1; margin:4px 0; padding:6px 8px; }
 .usage-checkout-sheet .checkout-payment-info > .checkout-summary .usage-order-reference > span { gap:2px; }
 .usage-checkout-sheet .checkout-payment-info > .checkout-summary .usage-order-copy { min-height:36px; }
 .usage-checkout-sheet .checkout-payment-info > .checkout-payment-instructions { display:flex; flex-direction:column; grid-column:1; grid-row:2; gap:12px; }
 .usage-checkout-sheet .checkout-payment-instructions > .usage-exact-amount { margin:0; padding:8px; font-size:.79rem; line-height:1.45; }
 .usage-checkout-sheet .checkout-payment-instructions > .usage-payment-step { align-items:flex-start; margin:0; font-size:.77rem; line-height:1.45; }
 .usage-checkout-sheet .checkout-payment-image { grid-column:2; grid-row:2; min-width:0; }
 .usage-checkout-sheet .checkout-payment-image .manual-payment-qr.usage-payment-original { width:100%; margin:0; }
 .usage-checkout-sheet .checkout-payment-image .usage-payment-original > .button { min-height:36px; padding:7px 9px; font-size:.7rem; }
 .usage-checkout-sheet .checkout-payment-layout:has(.usage-paid-receipt,.usage-submit-pending,.notice,form) { display:block; }
 .usage-checkout-sheet .checkout-payment-layout:has(.usage-paid-receipt,.usage-submit-pending,.notice,form) .checkout-payment-info { display:block; }
 .usage-checkout-sheet .checkout-payment-layout:has(.usage-paid-receipt,.usage-submit-pending,.notice,form) .checkout-payment-image { width:min(220px,100%); margin:8px auto 0; }
 .usage-checkout-sheet .checkout-scroll:has(.checkout-payment-layout) .checkout-metadata { margin-top:8px; padding-top:7px; }
 .usage-checkout-sheet .checkout-actions > .button:not(.ghost) { flex:1 1 110px; padding:8px 10px; font-size:.78rem; }
 .usage-checkout-sheet .checkout-actions > .button.ghost { flex:0 0 auto; min-height:44px; padding:8px 10px; font-size:.75rem; }
 .usage-checkout-sheet .usage-after-payment { flex-wrap:wrap; gap:3px 8px; font-size:.79rem; }
 .usage-checkout-sheet .usage-after-payment small { flex:0 0 100%; margin-left:0; font-size:.67rem; line-height:1.3; }
 .customer-dialog.usage-payment-image-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); }
 .usage-payment-image-dialog .dialog-content { padding:12px; }
 .usage-payment-image-preview img { max-height:calc(100dvh - 235px); }
}