.portrait-revision-widget { background: #fffaf3; border: 1px solid #dfd1c2; border-radius: 24px; box-shadow: 0 24px 80px #32292333; color: #322923; max-height: calc(100dvh - 32px); max-width: 520px; overflow-y: auto; overscroll-behavior: contain; padding: 32px; width: calc(100% - 28px); }
.portrait-revision-widget::backdrop { background: #17243a88; backdrop-filter: blur(4px); }
.portrait-revision-widget [hidden] { display: none !important; }
.portrait-revision-widget h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(32px, 7vw, 40px); line-height: 1.05; margin: 8px 20px 20px 0; }
.portrait-revision-widget h2:focus { outline: none; }
.portrait-revision-widget p { font-family: "Inter", Arial, sans-serif; font-size: 13px; line-height: 1.5; }
.portrait-revision-widget button { cursor: pointer; font-family: "Inter", Arial, sans-serif; }
.portrait-revision-widget button:focus-visible { outline: 3px solid #a9683d; outline-offset: 3px; }
#rw-close { position: absolute; top: 9px; right: 10px; background: transparent; border: none; color: #62564b; font-size: 28px; width: 44px; height: 44px; }
.rw-current { align-items: center; display: flex; gap: 16px; margin: 18px 0; }
.rw-current img { border-radius: 8px; height: 94px; object-fit: contain; width: 72px; background: #f2e8dc; }
.rw-current p { color: #746f6a; margin: 0; }
.rw-options { display: grid; gap: 10px; }
.rw-option { background: #fffdf9; border: 1px solid #d9c8b6; border-radius: 13px; color: #322923; padding: 15px 16px; text-align: left; width: 100%; }
.rw-option:hover { background: #f4e9dc; border-color: #a9683d; }
.rw-option strong { display: block; font-size: 14px; }
.rw-option span { color: #746f6a; display: block; font-size: 12px; line-height: 1.45; margin-top: 6px; }
.rw-secondary { background: none; border: 0; color: #62564b; font-size: 13px; min-height: 44px; padding: 8px 12px; text-decoration: underline; }
#rw-keep-current { width: 100%; }
#rw-remaining { color: #746f6a; font-size: 12px; margin: 16px 0 4px; text-align: center; }
#rw-working { text-align: center; }
.rw-variants { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.rw-variant { background: #fffdfa; border: 2px solid #e2d5c9; border-radius: 13px; color: #322923; padding: 8px; min-width: 0; }
.rw-variant[aria-pressed="true"] { border-color: #9e6540; box-shadow: 0 0 0 2px #9e654033; }
.rw-variant img { display: block; aspect-ratio: 3 / 4; object-fit: contain; width: 100%; background: #f2e8dc; }
.rw-variant span { display: block; font-size: 12px; font-weight: 600; padding: 10px 0 4px; }
#rw-confirmation { background: #f2e8dc; border-radius: 14px; bottom: -1px; box-shadow: 0 -6px 20px #32292314; margin-top: 18px; padding: 16px; position: sticky; text-align: center; }
#rw-confirmation p { margin: 0 0 10px; }
.rw-primary { background: #17243a; border: 1px solid #17243a; border-radius: 999px; color: #fff; font-size: 13px; min-height: 44px; padding: 12px 18px; }
#rw-confirm { display: block; width: 100%; margin-top: 8px; }
#rw-error-close { display: block; margin: 12px auto 0; }
body.revision-widget-open { overflow: hidden; }
@media (max-width: 560px) { .portrait-revision-widget { padding: 24px 20px 18px; } .rw-variants { gap: 9px; } .rw-variant { padding: 6px; } }

/* Same loading presentation as the first generation in maquette.html. */
      .portrait-revision-widget.is-generating {
        background: linear-gradient(145deg, #fffefa 0%, #fbf5ee 100%);
        border: 1px solid rgba(133, 96, 64, .28);
        border-radius: 30px;
        box-shadow: 0 28px 80px rgba(13, 16, 20, .42), inset 0 0 0 7px rgba(255, 255, 255, .48);
        box-sizing: border-box;
        color: #1c1a1a;
        max-width: 590px;
        min-height: 0;
        padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 38px);
        text-align: center;
        width: calc(100% - 28px);
      }
      .portrait-revision-widget.is-generating h2 {
        color: #1d1a19;
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: clamp(42px, 4.8vw, 60px);
        font-style: italic;
        letter-spacing: -.045em;
        line-height: .9;
        margin: 10px 0 0;
      }
      .portrait-revision-widget .upload-progress-heart { color: #282525; font-family: Georgia, serif; font-size: 43px; line-height: .65; margin: 13px 0 0; }
      .portrait-revision-widget .upload-progress-copy {
        color: #746f6a;
        font-family: "Inter", Arial, sans-serif;
        font-size: clamp(16px, 1.8vw, 21px);
        line-height: 1.4;
        margin: 15px auto 0;
        max-width: 430px;
      }
      .portrait-revision-widget .upload-preview-ring {
        --progress-degrees: 0deg;
        align-items: center;
        background: conic-gradient(from -1deg, #a96536 var(--progress-degrees), #eaded1 0);
        border-radius: 50%;
        box-shadow: 0 0 0 8px rgba(163, 111, 73, .08), 0 8px 26px rgba(86, 51, 27, .16);
        display: grid;
        height: clamp(168px, 19vw, 220px);
        justify-items: center;
        margin: clamp(24px, 3vw, 34px) auto 0;
        padding: 7px;
        position: relative;
        width: clamp(168px, 19vw, 220px);
      }
      .portrait-revision-widget .upload-preview-ring::before {
        background: #fffefa;
        border-radius: inherit;
        content: "";
        inset: 6px;
        position: absolute;
      }
      .portrait-revision-widget .upload-preview-ring img {
        background: #f4f0eb;
        border-radius: 50%;
        height: calc(100% - 20px);
        left: 10px;
        object-fit: contain;
        opacity: 0;
        position: absolute;
        top: 10px;
        transition: opacity .7s ease-in-out;
        width: calc(100% - 20px);
        z-index: 1;
      }
      .portrait-revision-widget .upload-preview-ring img.is-visible { opacity: 1; }
      .portrait-revision-widget .upload-steps {
        align-items: flex-start;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        list-style: none;
        margin: clamp(28px, 3.4vw, 38px) 0 0;
        padding: 0;
        position: relative;
      }
      .portrait-revision-widget .upload-step {
        color: #766f69;
        display: grid;
        font-family: "Inter", Arial, sans-serif;
        font-size: clamp(11px, 1.22vw, 14px);
        gap: 11px;
        justify-items: center;
        line-height: 1.35;
        padding: 0 6px;
        position: relative;
      }
      .portrait-revision-widget .upload-step + .upload-step::before {
        background: #d6c5b4;
        border-radius: 999px;
        content: "";
        height: 5px;
        position: absolute;
        right: calc(50% + 24px);
        top: 17px;
        width: calc(100% - 48px);
      }
      .portrait-revision-widget .upload-step + .upload-step::after {
        background: #a9683d;
        border-radius: 999px;
        box-shadow: 0 0 6px rgba(169, 104, 61, .22);
        content: "";
        height: 5px;
        position: absolute;
        right: calc(50% + 24px);
        top: 17px;
        transform: scaleX(var(--connector-progress, 0));
        transform-origin: left center;
        width: calc(100% - 48px);
      }
      .portrait-revision-widget .upload-step-icon {
        align-items: center;
        background: #f7f0e9;
        border: 3px solid #d7cabc;
        border-radius: 50%;
        box-sizing: border-box;
        color: transparent;
        display: grid;
        font-size: 15px;
        font-weight: 700;
        height: 38px;
        place-items: center;
        position: relative;
        width: 38px;
        z-index: 1;
      }
      .portrait-revision-widget .upload-step.is-done { color: #2b2928; }
      .portrait-revision-widget .upload-step.is-done .upload-step-icon { background: #a9683d; border-color: #a9683d; color: #fff; }
      .portrait-revision-widget .upload-step.is-done .upload-step-icon::before { content: "✓"; }
      .portrait-revision-widget .upload-step.is-active { color: #2b2928; }
      .portrait-revision-widget .upload-step.is-active .upload-step-icon { border-color: #a9683d; }
      .portrait-revision-widget .upload-step.is-active .upload-step-icon::after {
        animation: upload-step-spin 1s linear infinite;
        border: 3px solid transparent;
        border-radius: inherit;
        border-right-color: #a9683d;
        border-top-color: #a9683d;
        content: "";
        inset: -3px;
        position: absolute;
      }
      .portrait-revision-widget .upload-progress-note {
        align-items: center;
        background: rgba(242, 232, 220, .76);
        border-radius: 22px;
        color: #766f69;
        display: grid;
        font-family: "Inter", Arial, sans-serif;
        font-size: clamp(12px, 1.3vw, 15px);
        gap: 4px 10px;
        grid-template-columns: auto 1fr;
        justify-content: center;
        line-height: 1.4;
        margin: 31px 0 0;
        padding: 17px 20px;
        text-align: left;
      }
      .portrait-revision-widget .upload-progress-note > span { color: #b08461; font-size: 28px; grid-row: 1 / 3; }
      .portrait-revision-widget .upload-progress-note strong { color: #322923; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(18px, 1.9vw, 24px); line-height: 1; }
      .portrait-revision-widget .upload-progress-note small { font-size: inherit; }

@keyframes upload-step-spin { to { transform: rotate(1turn); } }
@media (max-width: 560px) {
  .portrait-revision-widget.is-generating { padding: 30px 20px 22px; }
  .portrait-revision-widget.is-generating h2 { font-size: clamp(38px, 11vw, 49px); margin-top: 15px; }
  .portrait-revision-widget .upload-progress-heart { font-size: 38px; margin-top: 11px; }
  .portrait-revision-widget .upload-progress-copy { font-size: 17px; max-width: 300px; }
  .portrait-revision-widget .upload-preview-ring { height: min(43vw, 184px); margin-top: 25px; width: min(43vw, 184px); }
  .portrait-revision-widget .upload-steps { margin-top: 26px; }
  .portrait-revision-widget .upload-step { font-size: 10px; gap: 8px; padding: 0 1px; }
  .portrait-revision-widget .upload-step-icon { height: 32px; width: 32px; }
  .portrait-revision-widget .upload-step + .upload-step::before,
  .portrait-revision-widget .upload-step + .upload-step::after { right: calc(50% + 20px); top: 14px; width: calc(100% - 40px); }
  .portrait-revision-widget .upload-progress-note { font-size: 10px; margin-top: 25px; padding: 14px 15px; }
  .portrait-revision-widget .upload-progress-note > span { font-size: 22px; }
  .portrait-revision-widget .upload-progress-note strong { font-size: 18px; }
}
@media (min-width: 561px) and (max-height: 800px) {
  .portrait-revision-widget.is-generating { padding: 28px 34px; }
  .portrait-revision-widget.is-generating h2 { font-size: clamp(38px, 4vw, 52px); }
  .portrait-revision-widget .upload-progress-heart { margin-top: 9px; }
  .portrait-revision-widget .upload-progress-copy { margin-top: 12px; }
  .portrait-revision-widget .upload-preview-ring { height: 180px; margin-top: 20px; width: 180px; }
  .portrait-revision-widget .upload-steps { margin-top: 24px; }
  .portrait-revision-widget .upload-progress-note { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-revision-widget .upload-preview-ring img { transition: none; }
  .portrait-revision-widget .upload-step-icon::after { animation: none; }
}