* {box-sizing:border-box;}
    html, body {min-height:100%;}

    body {margin:0; background:radial-gradient(circle at 10% 10%, rgba(10,132,255,.08), transparent 30rem),
        var(--page); color:#1c1c1e; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}

    button, input, select, textarea {font:inherit;}
    .generator-app-shell {max-width:1460px; margin:0 auto; padding:24px 16px 70px;}

    .generator-studio-card {background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.07); border-radius:20px; box-shadow:0 10px 35px rgba(0,0,0,.06);}

    .generator-preview-sticky {position:sticky; top:18px;}

    .generator-avatar-stack .generator-avatar:first-child {margin-left:0;}

.generator-group-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.generator-group-chevron {
    display: block;
    width: 5px;
    height: auto;
    object-fit: contain;
    margin-top: 3px;
}

    .generator-chat-scroll::-webkit-scrollbar {display:none;}
    .generator-chat-date {text-align:center; font-size:11px; font-weight:600; color:#8e8e93; margin:6px 0 16px;}

    .generator-message-row.generator-mine {justify-content:flex-end;}
    .generator-message-row.generator-theirs {justify-content:flex-start;}

    .generator-avatar img {width:100%; height:100%; object-fit:cover; display:block;}

    .generator-message-row.generator-mine .generator-message-column {display:flex; flex-direction:column; align-items:flex-end;}
    .generator-message-row.generator-theirs .generator-message-column {display:flex; flex-direction:column; align-items:flex-start;}

    .generator-message-row.generator-mine .generator-bubble:not(.generator-has-media)::after {content:""; position:absolute; right:-5px; bottom:0; width:10px; height:12px; background:var(--ios-blue); border-bottom-left-radius:10px; transform:skewX(0deg); z-index:-1;}

    .generator-bubble.generator-has-media {padding:3px; overflow:hidden; background:transparent;}

    .generator-bubble.generator-has-media.generator-has-text {padding:2px; overflow:hidden;}
 
    .generator-reaction-wrap {position:relative; display:inline-block;}

    .generator-typing-row {width:100%; display:flex; align-items:flex-end; gap:5px; margin-top:8px; animation:typingRowIn .16s ease both;}

    .generator-typing-row.generator-mine {justify-content:flex-end;}
    .generator-typing-row.generator-theirs {justify-content:flex-start;}

    .generator-typing-row.generator-mine .generator-typing-bubble {background:var(--ios-blue);}

    .generator-typing-dot {width:7px; height:7px; border-radius:50%; background:#8e8e93; animation:typingBounce 1s infinite ease-in-out;}

    .generator-typing-row.generator-mine .generator-typing-dot {background:rgba(255,255,255,.88);}
    .generator-typing-dot:nth-child(2) {animation-delay:.14s;}
    .generator-typing-dot:nth-child(3) {animation-delay:.28s;}

    @keyframes typingBounce {
      0%, 60%, 100% { transform: translateY(0); opacity: .55; }
      30% { transform: translateY(-4px); opacity: 1; }
    }

    @keyframes typingRowIn {
      from { opacity: 0; transform: translateY(8px) scale(.96); }
      to { opacity: 1; transform: none; }
    }

    .generator-audio-bubble.generator-voice-animating .generator-waveform i {animation:voicePulse .56s ease-in-out infinite alternate; animation-delay:calc(var(--bar-index, 0) * -35ms); transform-origin:center;}

    @keyframes voicePulse {
      from { transform: scaleY(.55); opacity: .62; }
      to { transform: scaleY(1.12); opacity: 1; }
    }

    .generator-admin-reaction-select {width:72px; flex:0 0 72px; padding-left:7px; padding-right:24px;}

    .generator-media-caption {margin:0; padding:8px 9px 6px; border-radius:14px 14px 0 0;}

    .generator-mine .generator-media-caption {background:var(--ios-blue); color:#fff;}
    .generator-theirs .generator-media-caption {background:var(--ios-gray); color:#111;}

    .generator-message-media {display:block; width:min(250px, 100%); max-height:260px; object-fit:cover; border-radius:16px; background:#111;}

    video.generator-message-media {aspect-ratio:4 / 3;}

    .generator-mine .generator-audio-bubble {background:var(--ios-blue); color:#fff;}
    .generator-theirs .generator-audio-bubble {background:var(--ios-gray); color:#111;}

    .generator-audio-play {width:28px; height:28px; border-radius:50%; border:0; display:grid; place-items:center; background:rgba(255,255,255,.25); color:inherit; flex:0 0 auto;}

    .generator-theirs .generator-audio-play {background:rgba(0,0,0,.08);}

.generator-waveform {
    display: flex;
    flex: 0 0 auto;
    align-items: center;

    width: 94px;
    height: 26px;

    gap: 2px;
    opacity: .9;
}

.generator-waveform i {
    display: block;
    flex: 0 0 2px;

    width: 2px;
    border-radius: 2px;
    background: currentColor;
}

    .generator-audio-time {font-size:10px; opacity:.75; min-width:28px; text-align:right;}

    .generator-control-card {border:1px solid #e5e5ea; border-radius:16px; padding:16px; background:#fff;}

    .generator-control-card + .generator-control-card {margin-top:14px;}

    .generator-help-text {color:#7b7b80; font-size:.84rem;}

    .generator-participant-item,
    .generator-message-admin-item {display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid #f0f0f2;}

    .generator-participant-item:last-child,
    .generator-message-admin-item:last-child {border-bottom:0;}

    .generator-participant-meta,
    .generator-message-admin-meta {min-width:0; flex:1 1 auto;}

    .generator-participant-name {font-weight:700;}
    .generator-message-admin-text {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.88rem;}

    .generator-message-admin-sender {font-size:.72rem; color:#8e8e93; font-weight:700;}

    .generator-emoji-panel {display:none; grid-template-columns:repeat(8, 1fr); gap:4px; padding:8px; background:#f7f7fa; border:1px solid #e5e5ea; border-radius:12px; margin-top:8px;}

    .generator-emoji-panel.generator-open {display:grid;}

    .generator-emoji-btn {border:0; background:transparent; font-size:22px; border-radius:8px; padding:3px;}

    .generator-emoji-btn:hover {background:#e9e9ef;}

    .generator-media-selected {display:none; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:#f4f4f7; font-size:.82rem; margin-top:8px;}

    .generator-media-selected.generator-show {display:flex;}
    .generator-root .progress {height:10px; border-radius:10px;}
    .generator-export-note {font-size:.78rem; color:#77777c;}
    .generator-export-format {font-size:.78rem; color:#0a7a32; font-weight:700;}
    .generator-btn-soft {background:#f2f2f7; border-color:#e5e5ea; color:#1c1c1e;}
    .generator-btn-soft:hover {background:#e9e9ef; color:#111;}

    .generator-range-value {min-width:64px; text-align:right; font-size:.82rem; color:#6c757d; font-variant-numeric:tabular-nums;}

    .generator-root .form-range {accent-color:var(--ios-blue);}

    #exportCanvas {position:fixed; left:-10000px; top:-10000px; width:720px; height:1280px; pointer-events:none;}

    .generator-toast-zone {position:fixed; right:18px; bottom:18px; z-index:3000; display:grid; gap:8px; max-width:min(360px, calc(100vw - 36px));}

    .generator-app-toast {background:rgba(28,28,30,.94); color:#fff; padding:10px 13px; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.25); font-size:.88rem; animation:toastIn .18s ease both;}

    @keyframes toastIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: none; }
    }

    @media (max-width: 991.98px) {
      .generator-preview-sticky {position:static;}
      .generator-phone-stage {min-height:0; padding:10px 0 20px;}
    }

    @media (max-width: 460px) {
      :root {--phone-w:min(390px, calc(100vw - 30px)); --phone-h:calc(var(--phone-w) * 2.1641);}
      .generator-app-shell {padding-left:8px; padding-right:8px;}
      .generator-studio-card {border-radius:14px;}
      .generator-emoji-panel {grid-template-columns:repeat(7, 1fr);}
    }

    /* 03. iPhone preview and iOS fidelity */

    .generator-iphone::before,
    .generator-iphone::after {content:""; position:absolute; z-index:-1; background:linear-gradient(180deg, #4a4a4d, #1d1d1f); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}

    .generator-iphone::before {left:-13px; top:140px; width:4px; height:76px; border-radius:3px 0 0 3px; box-shadow:0 92px 0 #2a2a2d,
        0 156px 0 #2a2a2d;}

    .generator-iphone::after {right:-13px; top:185px; width:4px; height:118px; border-radius:0 3px 3px 0;}

    .generator-iphone-screen {width:100%; height:100%; position:relative; background:#fff; overflow:hidden; display:flex; flex-direction:column; border-radius:42px;}

    .generator-dynamic-island {position:absolute; left:50%; transform:translateX(-50%); z-index:5; top:8px; width:122px; height:34px; border-radius:22px; background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),
        0 1px 1px rgba(255,255,255,.04); transition:width .24s cubic-bezier(.2,.8,.2,1), height .24s cubic-bezier(.2,.8,.2,1);}

    .generator-dynamic-island::before {content:""; position:absolute; width:8px; height:8px; right:10px; top:50%; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle at 38% 34%, #183b48 0 18%, #08161d 31%, #020506 70%); box-shadow:0 0 0 1px rgba(45,92,112,.22);}

    .generator-dynamic-island::after {content:""; position:absolute; width:4px; height:4px; left:12px; top:8px; border-radius:50%; background:rgba(255,255,255,.06); filter:blur(.2px);}

    .generator-iphone.generator-preview-active .generator-dynamic-island {width:146px; height:36px;}

    .generator-iphone.generator-export-active .generator-dynamic-island {width:154px; height:36px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),
        0 0 0 1px rgba(255,59,48,.08);}

    .generator-avatar-stack .generator-avatar {margin-left:-8px; box-shadow:0 1px 2px rgba(0,0,0,.06);}

    .generator-message-row.generator-play-hidden {pointer-events:none; opacity:0; transform:translateY(9px) scale(.94);}

    .generator-message-row.generator-play-visible {opacity:1; transform:none; animation:iosMessagePop .24s cubic-bezier(.2,.92,.24,1.18) both;}

    @keyframes iosMessagePop {
      0% { opacity: 0; transform: translateY(9px) scale(.94); }
      70% { opacity: 1; transform: translateY(-1px) scale(1.01); }
      100% { opacity: 1; transform: none; }
    }

    .generator-avatar-spacer {width:24px; height:1px; flex:0 0 24px;}

    /* Tails only on the last bubble of a sender run, like iMessage. */
    .generator-message-row .generator-bubble:not(.generator-has-media)::before,
    .generator-message-row .generator-bubble:not(.generator-has-media)::after {content:none;}

    .generator-message-row.generator-mine.generator-last-in-run .generator-bubble:not(.generator-has-media)::before {content:""; position:absolute; z-index:-1; right:-7px; bottom:0; width:18px; height:18px; background:var(--ios-blue); border-bottom-left-radius:15px 13px;}

    .generator-message-row.generator-mine.generator-last-in-run .generator-bubble:not(.generator-has-media)::after {content:""; position:absolute; z-index:-1; right:-10px; bottom:-3px; width:10px; height:30px; background:#fff; border-bottom-left-radius:10px;}

    .generator-typing-bubble {padding:0 13px; display:flex; align-items:center; justify-content:center; gap:4px; background:var(--ios-gray); min-width:60px; height:40px; border-radius:20px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.018);}

    .generator-audio-bubble {padding:10px 12px; display:flex; gap:10px; align-items:center; border-radius:20px;}

    .generator-home-indicator {position:absolute; left:50%; transform:translateX(-50%); border-radius:4px; z-index:10; height:5px; width:134px; bottom:7px; background:#000;}

    .generator-media-volume-note {font-size:.76rem; color:#6c757d;}



    .generator-phone-stage-video,
    .generator-phone-stage-overlay {position:absolute; inset:0; border-radius:32px; pointer-events:none;}

    .generator-phone-stage.generator-has-video .generator-phone-stage-video {display:block;}

    .generator-wifi-icon::before,

    .generator-header-action-icon,
    .generator-plus-circle-icon {display:grid; place-items:center; padding:0; background:transparent;}

    .generator-ui-png-icon {display:block; user-select:none; pointer-events:none; object-fit:contain;}

    .generator-composer-mic {position:relative; width:20px; height:20px; display:inline-grid; place-items:center; margin-left:auto; border-radius:50%; background:transparent; color:#8f9198; font-size:0;}

    .generator-voice-reader-label {font-weight:700; min-width:84px; display:flex; align-items:center; gap:8px;}

    .generator-voice-reader-label .generator-avatar-mini {width:26px; height:26px; border-radius:50%; overflow:hidden; display:inline-grid; place-items:center; font-size:11px; color:#fff; background:#9ca3af; flex:0 0 auto;}

    .generator-voice-reader-label .generator-avatar-mini img {width:100%; height:100%; object-fit:cover;}

    .generator-voice-reader-row select {min-width:0;}

    /* ===== V5 iOS fidelity ===== */
    :root {--ios-green:#34c759; --ios-gray:#e9e9eb; --ios-text:#111111; --ios-muted:#8e8e93; --panel:#ffffff; --page:#f2f2f7; --danger:#ff3b30; --phone-w:390px; --phone-h:844px; --ios-blue:#0a84ff; --ios-header-gray:#f1f2f4; --ios-received:#e9e9eb;}

    .generator-status-bar,
    .generator-conversation-header {background:var(--ios-header-gray)!important;}

    .generator-conversation-header {flex:0 0 94px; display:grid; position:relative; z-index:2; -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px); background:#f1f2f4f5; border-bottom:1px solid #dfe1e6; height:92px; flex-basis:70px; border-bottom-color:#dcdee3; grid-template-columns:52px 1fr 52px;}

    .generator-header-action {border:0; background:transparent; color:var(--ios-blue); line-height:1; min-width:44px; min-height:44px; font-size:34px; font-weight:300; transform:translateY(-1px); width:52px; height:52px; padding:0; display:grid; place-items:center;}

    .generator-ui-back-icon {width:10px; height:auto;}

    .generator-ui-camera-icon {width:27px; height:auto;}

    .generator-status-icons {display:flex; align-items:center; color:#5b5e66; gap:6px;}

    .generator-battery-icon,
    .generator-wifi-icon,

    .generator-group-head {min-width:0; text-align:center; padding-top:1px;}

    .generator-avatar-stack {position:relative; display:flex; justify-content:center; align-items:center; height:43px; margin-bottom:1px;}

    .generator-group-title {line-height:16px; max-width:250px; margin:0 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em; color:#242529; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; font-size:12px; font-weight:600;}

    .generator-chat-scroll {flex:1 1 auto; min-height:0; overscroll-behavior:contain; scrollbar-width:none; padding-left:9px; padding-right:9px; overflow-y:auto!important; overflow-x:hidden; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; padding:8px 9px 24px; background:#fff; touch-action:pan-y;}

    .generator-message-row {width:100%; display:flex; align-items:flex-end; transform-origin:50% 100%; transition:opacity .18s cubic-bezier(.2,.8,.2,1),
        transform .22s cubic-bezier(.2,.9,.2,1); margin-top:2px; gap:5px;}

    .generator-message-row.generator-new-sender {margin-top:10px;}

    .generator-message-column {max-width:70%;}

    .generator-bubble {position:relative; display:inline-block; max-width:100%; overflow-wrap:anywhere; white-space:pre-wrap; border-radius:18px; padding:7px 11px 8px; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; font-size:15px; line-height:19px; letter-spacing:-.01em;}

    .generator-mine .generator-bubble {color:#fff; border-bottom-right-radius:18px; background:#0a84ff;}

    .generator-theirs .generator-bubble {border-bottom-left-radius:18px; background:#e9e9eb; color:#121316;}

    .generator-sender-name {font-size:10px; line-height:13px; margin:0 10px 3px; color:#8d8f96; margin-bottom:2px;}

    .generator-message-row.generator-mine .generator-tapback-badge {right:8px;}

    .generator-message-row.generator-theirs .generator-tapback-badge {left:8px;}

    .generator-plus-circle {border-radius:50%; color:#fff; font-size:23px; line-height:25px; display:grid; place-items:center; padding:0; background:transparent; border:0; width:31px; height:31px;}

    .generator-ui-plus-icon {width:31px; height:31px;}

    .generator-composer-field {border:1px solid #c7c7cc; flex:1 1 auto; display:flex; align-items:center; padding:0 8px 0 11px; font-size:15px; min-width:0; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.5); height:30px; border-radius:18px; border-color:#d9dbe0; color:#8e8e93; padding-left:12px;}

    .generator-ui-mic-icon {width:12px; height:auto;}

    .generator-v5-capture-note {border:1px solid #d8e8ff; background:#f4f8ff; border-radius:12px; padding:10px 12px; color:#355070; font-size:.84rem; line-height:1.4;}

    .generator-voice-reader-panel {display:grid; gap:8px;}

    .generator-voice-reader-row {display:grid; gap:10px; align-items:center; border:1px solid #e7e8ec; grid-template-columns:minmax(105px, auto) minmax(0, 1fr) auto; padding:9px 10px; border-radius:13px; background:#fafbfc;}

    @media (max-width: 575.98px) {
      .generator-voice-reader-row {grid-template-columns:1fr;}
    }

    /* 06. Video composition and background */
    .generator-v6-editor-block {padding:14px; border:1px solid #e3e5ea; border-radius:16px; background:linear-gradient(180deg, #fbfcfd, #f7f8fa);}

    .generator-v6-editor-title {margin-bottom:12px; color:#1c1c1e; font-size:.92rem; font-weight:800;}

    .generator-phone-stage {display:flex; align-items:flex-start; justify-content:center; padding:18px 8px; position:relative; border-radius:36px; isolation:isolate; background:linear-gradient(180deg, #f4f5f7 0%, #e9ecf1 100%); --bg-x:50%; --bg-y:50%; --bg-zoom:1; --bg-blur:0px; --bg-darkness:0; overflow:hidden;}

    .generator-phone-stage-video {display:none; z-index:0; inset:-36px; width:calc(100% + 72px); height:calc(100% + 72px); object-fit:cover; object-position:var(--bg-x) var(--bg-y); transform-origin:center center; transform:scale(var(--bg-zoom)); filter:blur(var(--bg-blur)); transition:transform .12s ease, filter .12s ease, object-position .12s ease;}

    .generator-phone-stage-overlay {z-index:1; inset:0; border-radius:32px; background:#000; opacity:var(--bg-darkness); transition:opacity .12s ease;}

    .generator-phone-stage.generator-has-video .generator-phone-stage-overlay {opacity:var(--bg-darkness);}

    @media (max-width: 575.98px) {
      .generator-v6-editor-block {padding:12px;}
    }

    /* 07. Actions and status icons */

    .generator-status-icons-png {display:flex; align-items:center; justify-content:flex-end; gap:2px; min-width:78px;}

    .generator-status-png {display:block; object-fit:contain; user-select:none; pointer-events:none;}

    .generator-status-signal-png {width:18px; height:10px;}
    .generator-status-wifi-png {width:17px; height:10px;}
    .generator-status-battery-png {width:25px; height:10px;}

    .generator-studio-card.generator-preview-sticky {background:transparent; border:0; box-shadow:none;}

    .generator-studio-card.generator-preview-sticky .generator-phone-stage {box-shadow:0 10px 35px rgba(0,0,0,.06);}

    /* 08. Reactions and message alignment */
    .generator-iphone {width:var(--phone-w); height:var(--phone-h); border-radius:52px; background:#fff; flex:0 0 auto; overflow:visible; border:9px solid #0a0a0b; outline:1px solid rgba(255,255,255,.28); box-shadow:0 30px 80px rgba(0,0,0,.28),
        0 0 0 1px rgba(0,0,0,.4),
        inset 0 0 0 1px rgba(255,255,255,.16); position:relative; z-index:2; transform-origin:top center; will-change:transform; transition:transform .12s ease; --tapback-overlap:4px;}

    .generator-reaction-wrap.generator-has-reaction {padding-bottom:18px!important;}

    .generator-tapback-badge {position:absolute; display:grid; place-items:center; border-radius:999px; line-height:1; z-index:4; min-width:29px; height:24px; padding:0 6px; border:2px solid #fff; background:#f2f2f7; font-size:13px; bottom:calc(var(--tapback-overlap) - 6px)!important;}

    /* Avatar aligned with reactions */
    .generator-message-row.generator-theirs.generator-has-reaction > .generator-avatar,
    .generator-message-row.generator-theirs.generator-has-reaction > .generator-avatar-spacer {margin-bottom:18px;}

    .generator-message-row.generator-theirs.generator-has-reaction > .generator-avatar {align-self:flex-end;}

    /* 09. Final interface rules */
    .generator-status-bar {flex:0 0 48px; position:relative; display:flex; align-items:center; justify-content:space-between; font-weight:700; z-index:3; height:50px; flex-basis:50px; padding:10px 24px 0 36px; font-size:14px; letter-spacing:-.015em; -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); background:#f1f2f4f5; border-radius:50px 50px 0 0;}

    .generator-composer {flex:0 0 75px; padding:9px 9px 18px; display:flex; align-items:center; gap:7px; -webkit-backdrop-filter:saturate(180%) blur(18px); height:76px; padding-left:10px; padding-right:10px; border-radius:0 0 50px 50px;}

    .generator-avatar,
    .generator-avatar-stack .generator-avatar {border:0;}

    .generator-avatar {width:30px; height:30px; font-weight:400; border-radius:50%; object-fit:cover; flex:0 0 auto; display:inline-grid; place-items:center; color:#fff; font-size:11px; font-weight:800; overflow:hidden; user-select:none; background:linear-gradient(180deg,#d9d9de 0%,#7d7d83 100%);}

    .generator-message-row.generator-theirs.generator-last-in-run .generator-bubble:not(.generator-has-media) {position:relative; z-index:3; isolation:isolate; overflow:visible;}

    .generator-message-row.generator-theirs.generator-last-in-run .generator-bubble:not(.generator-has-media)::before {content:""; position:absolute; z-index:2; left:-7px; bottom:0; width:18px; height:18px; background:var(--ios-gray); border-bottom-right-radius:15px 13px;}

    .generator-message-row.generator-theirs.generator-last-in-run .generator-bubble:not(.generator-has-media)::after {content:""; position:absolute; z-index:2; left:-10px; bottom:-1px; width:10px; height:30px; background:#fff; border-bottom-right-radius:10px;}

    .generator-preview-actions-wrap {display:flex; justify-content:center; margin-top:14px; background:transparent;}

    .generator-preview-actions-grid {width:min(100%, 820px); display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 auto; background:transparent;}

    .generator-preview-action-box {border-radius:0; flex:0 1 190px; padding:0; border:0; background:transparent; box-shadow:none;}

    .generator-step-disclosure {padding:0; overflow:hidden;}

    .generator-step-summary::-webkit-details-marker {display:none;}

    .generator-step-summary::after {content:"⌄"; margin-left:auto; color:#7b7d84; font-size:22px; line-height:1; transition:transform .16s ease;}

    .generator-step-disclosure[open] > .generator-step-summary::after {transform:rotate(180deg);}

    .generator-step-summary-title {flex:1 1 auto;}

    .generator-step-body {padding:0 18px 18px;}

    @media (max-width: 575.98px) {
      .generator-preview-actions-grid {display:grid; grid-template-columns:1fr; width:100%;}

      .generator-preview-action-box {width:100%;}
    }

    .generator-image-media-bubble {width:fit-content; max-width:240px;}

    .generator-image-media-bubble .generator-message-media {width:auto; max-width:236px; height:auto; max-height:300px; object-fit:contain;}

    .generator-participant-actions {display:flex; flex-direction:column; align-items:stretch; gap:6px; flex:0 0 auto;}

    .generator-step-summary {min-height:58px; padding:16px 18px; display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; user-select:none; font-weight:800; position:relative;}

    .generator-step-drag-handle {width:28px; height:28px; display:inline-grid; place-items:center; flex:0 0 28px; border-radius:8px; color:#8b8d94; font-size:18px; font-weight:900; line-height:1; cursor:grab; touch-action:none; user-select:none;}

    .generator-step-drag-handle:hover {background:#f2f2f7; color:#45464c;}

    .generator-step-drag-handle:active {cursor:grabbing;}

    .generator-step-drag-ghost {opacity:.38;}

    .generator-step-drag-chosen {box-shadow:0 12px 32px rgba(0,0,0,.13);}

    .generator-step-dragging {opacity:.95;}

    @media (max-width: 575.98px) {
      .generator-participant-item {align-items:flex-start;}

      .generator-participant-actions {width:100%; flex-direction:row; margin-top:6px;}
    }

    .generator-participant-color-picker {display:flex; align-items:center; gap:10px; min-height:38px;}

    .generator-avatar-color-input {width:34px; height:34px; flex:0 0 34px; padding:0; border:2px solid #fff; border-radius:50%; background:transparent; box-shadow:0 0 0 1px rgba(0,0,0,.16); cursor:pointer; overflow:hidden; appearance:none; -webkit-appearance:none;}

    .generator-avatar-color-input::-webkit-color-swatch-wrapper {padding:0;}

    .generator-avatar-color-input::-webkit-color-swatch {border:0; border-radius:50%;}

    .generator-avatar-color-input::-moz-color-swatch {border:0; border-radius:50%;}

    .generator-avatar-color-input:focus-visible {outline:3px solid rgba(10,132,255,.32); outline-offset:2px;}

    .generator-message-row.generator-mine.generator-last-in-run
    .generator-bubble:not(.generator-has-media) {position:relative; z-index:0; isolation:isolate; overflow:visible;}

    .generator-message-row.generator-theirs > .generator-avatar {position:relative; z-index:4;}

/* 10. PrankShit page, SEO, FAQ and examples */
body {
    background:
        radial-gradient(circle at 12% 10%, rgba(7, 133, 175, .10), transparent 30rem),
        #f2f2f7;
}

.ps-iphone-generator-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.35rem, 3vw, 2.35rem);
    color: #fff;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, .97), rgba(7, 133, 175, .94) 55%, rgba(0, 0, 0, .98));
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.ps-iphone-generator-hero-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    right: -90px;
    top: -150px;
    border-radius: 50%;
    background: rgba(50, 182, 223, .24);
    filter: blur(10px);
    pointer-events: none;
}

.ps-iphone-generator-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.ps-iphone-generator-h1 {
    max-width: 850px;
    margin: 0;
    color: #fff;
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.ps-iphone-generator-hero-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .6rem;
}

.ps-iphone-generator-hero .generator-btn-soft {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
}

.ps-iphone-generator-hero .generator-btn-soft:hover {
    color: #fff;
    background: rgba(255, 255, 255, .18);
}

.ps-generator-seo-section {
    position: relative;
    overflow: hidden;
    margin: 0 auto clamp(3rem, 7vw, 5.5rem);
    padding: clamp(1.5rem, 4vw, 3rem);
    background: #fff;
    border: 1px solid rgba(7, 133, 175, .13);
    border-radius: 26px;
    box-shadow: 0 16px 45px rgba(9, 47, 65, .08);
}

.ps-generator-seo-section::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    content: "";
    background: linear-gradient(180deg, #0785af, #32b6df);
}

.ps-generator-seo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .8rem;
    color: #0785af;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ps-generator-seo-section h2,
.ps-generator-seo-section h3 {
    color: #101820;
    font-weight: 900;
    letter-spacing: -.025em;
}

.ps-generator-seo-section h2 {
    margin-bottom: 1rem;
    font-size: clamp(1.55rem, 3vw, 2.3rem);
}

.ps-generator-seo-section h3 {
    margin: 1.65rem 0 .7rem;
    font-size: 1.15rem;
}

.ps-generator-seo-section p {
    max-width: 980px;
    margin-bottom: .9rem;
    color: #4c5963;
    font-size: .98rem;
    line-height: 1.8;
}

.ps-generator-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1.4rem;
}

.ps-generator-feature {
    padding: 1rem;
    background: linear-gradient(145deg, #f7fbfd, #fff);
    border: 1px solid rgba(7, 133, 175, .12);
    border-radius: 16px;
}

.ps-generator-feature strong {
    display: block;
    margin-bottom: .35rem;
    color: #0785af;
}

.ps-generator-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1rem;
}

.ps-generator-related-links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .5rem .8rem;
    color: #075d79;
    background: #eef9fc;
    border: 1px solid rgba(7, 133, 175, .14);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
}

.ps-generator-related-links a:hover {
    color: #fff;
    background: #0785af;
}

@media (max-width: 767.98px) {
    .ps-iphone-generator-hero-content {
        align-items: stretch;
        flex-direction: column;
    }

    .ps-iphone-generator-hero-actions {
        width: 100%;
    }

    .ps-iphone-generator-hero-actions .btn {
        flex: 1 1 150px;
    }

    .ps-generator-feature-grid {
        grid-template-columns: 1fr;
    }
}

.ps-generator-models {
    margin-top: 2rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(7, 133, 175, .12);
}

.ps-generator-models-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ps-generator-models-head p {
    margin: 0;
}

.ps-model-carousel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(7, 133, 175, .14);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 0, rgba(50, 182, 223, .14), transparent 45%),
        #f7fbfd;
}

.ps-model-carousel-viewport {
    overflow: hidden;
}

.ps-model-carousel-track {
    display: flex;
    transition: transform .32s ease;
    will-change: transform;
}

.ps-model-carousel-slide {
    display: grid;
    flex: 0 0 100%;
    min-width: 100%;
    place-items: center;
    padding: clamp(1rem, 4vw, 2rem);
}

.ps-model-carousel-slide img {
    display: block;
    width: auto;
    max-width: 100%;
    height: min(620px, 72vh);
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .16);
}

.ps-model-carousel-button {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #fff;
    background: rgba(0, 0, 0, .72);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    place-items: center;
    transform: translateY(-50%);
}

.ps-model-carousel-button:hover,
.ps-model-carousel-button:focus-visible {
    background: #0785af;
}

.ps-model-carousel-prev {
    left: .8rem;
}

.ps-model-carousel-next {
    right: .8rem;
}

.ps-model-carousel-dots {
    display: flex;
    justify-content: center;
    gap: .45rem;
    padding: .85rem 1rem 1rem;
}

.ps-model-carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    background: #b8c5cb;
    border: 0;
    border-radius: 50%;
}

.ps-model-carousel-dot[aria-current="true"] {
    width: 24px;
    background: #0785af;
    border-radius: 999px;
}

.ps-model-carousel-empty {
    padding: 2rem;
    color: #59666d;
    text-align: center;
    background: #f7fbfd;
    border: 1px dashed rgba(7, 133, 175, .3);
    border-radius: 18px;
}

.ps-generator-faq {
    margin-top: 2rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(7, 133, 175, .12);
}

.ps-generator-faq details {
    overflow: hidden;
    margin-top: .7rem;
    background: #f8fbfc;
    border: 1px solid rgba(7, 133, 175, .12);
    border-radius: 14px;
}

.ps-generator-faq summary {
    padding: 1rem 1.1rem;
    color: #101820;
    cursor: pointer;
    font-weight: 850;
}

.ps-generator-faq details p {
    margin: 0;
    padding: 0 1.1rem 1.1rem;
}

@media (max-width: 767.98px) {
    .ps-generator-models-head {
        align-items: stretch;
        flex-direction: column;
    }

    .ps-model-carousel-slide img {
        height: min(520px, 68vh);
    }

    .ps-model-carousel-button {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ps-model-carousel-track {
        transition: none;
    }
}

.ps-model-carousel-image-button {
    position: relative;
    display: block;
    max-width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 18px;
    cursor: zoom-in;
}

.ps-model-carousel-image-button:focus-visible {
    outline: 3px solid rgba(7, 133, 175, .35);
    outline-offset: 4px;
}

.ps-model-carousel-zoom {
    position: absolute;
    right: .8rem;
    bottom: .8rem;
    display: grid;
    width: 38px;
    height: 38px;
    color: #fff;
    background: rgba(0, 0, 0, .72);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    place-items: center;
    pointer-events: none;
}

.ps-model-carousel-caption {
    width: min(760px, 100%);
    margin-top: 1rem;
    text-align: center;
}

.ps-model-carousel-caption strong {
    display: block;
    color: #101820;
    font-size: 1rem;
    font-weight: 900;
}

.ps-model-carousel-caption p {
    max-width: 720px;
    margin: .4rem auto 0;
    color: #5c6970;
    font-size: .9rem;
    line-height: 1.6;
}

.ps-model-lightbox {
    position: fixed;
    z-index: 11000;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(.8rem, 3vw, 2rem);
}

.ps-model-lightbox.is-open {
    display: flex;
}

.ps-model-lightbox-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(0, 0, 0, .88);
    border: 0;
}

.ps-model-lightbox-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(1100px, 100%);
    max-height: calc(100vh - 2rem);
    align-items: center;
    justify-content: center;
}

.ps-model-lightbox-content {
    display: flex;
    width: min(900px, calc(100% - 110px));
    max-height: calc(100vh - 2rem);
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ps-model-lightbox-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 170px);
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .45);
}

.ps-model-lightbox-copy {
    width: min(760px, 100%);
    padding: .9rem 1rem 0;
    color: #fff;
    text-align: center;
}

.ps-model-lightbox-copy strong {
    display: block;
    font-size: 1rem;
    font-weight: 900;
}

.ps-model-lightbox-copy p {
    margin: .35rem 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: .88rem;
    line-height: 1.55;
}

.ps-model-lightbox-close,
.ps-model-lightbox-nav {
    position: absolute;
    z-index: 2;
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    color: #fff;
    background: rgba(18, 18, 18, .82);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    place-items: center;
}

.ps-model-lightbox-close:hover,
.ps-model-lightbox-close:focus-visible,
.ps-model-lightbox-nav:hover,
.ps-model-lightbox-nav:focus-visible {
    background: #0785af;
}

.ps-model-lightbox-close {
    top: 0;
    right: 0;
}

.ps-model-lightbox-prev {
    left: 0;
}

.ps-model-lightbox-next {
    right: 0;
}

body.ps-model-lightbox-open {
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .ps-model-lightbox {
        padding: .65rem;
    }

    .ps-model-lightbox-dialog {
        width: 100%;
    }

    .ps-model-lightbox-content {
        width: 100%;
        padding: 3.3rem 0 3.2rem;
    }

    .ps-model-lightbox-image {
        max-height: calc(100vh - 200px);
    }

    .ps-model-lightbox-close,
    .ps-model-lightbox-nav {
        width: 42px;
        height: 42px;
    }

    .ps-model-lightbox-close {
        top: .2rem;
        right: .2rem;
    }

    .ps-model-lightbox-prev {
        bottom: .1rem;
        left: calc(50% - 52px);
        top: auto;
    }

    .ps-model-lightbox-next {
        right: calc(50% - 52px);
        bottom: .1rem;
        top: auto;
    }
}


#phoneTime {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}




.generator-avatar-stack .generator-avatar {
    display: grid;
    place-items: center;

    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    text-align: center;

    padding: 0;
}



.generator-avatar-stack .generator-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}




.generator-avatar {
    display: grid;
    place-items: center;

    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    line-height: 1;
    text-align: center;
    padding: 0;
	font-weight:500;
}


/* 11. AI quick generation */
.generator-ai-panel {
    display: grid;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    border: 1px solid #dce9f8;
    border-radius: 16px;
}

.generator-ai-section {
    min-width: 0;
}

.generator-ai-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.generator-ai-title {
    min-width: 0;
    color: #1c1c1e;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.3;
}

.generator-ai-info-btn {
    display: inline-grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    padding: 0;
    color: #0a84ff;
    background: #fff;
    border: 1px solid rgba(10, 132, 255, .35);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    place-items: center;
    cursor: pointer;
}

.generator-ai-info-btn:hover,
.generator-ai-info-btn:focus-visible,
.generator-ai-info-btn[aria-expanded="true"] {
    color: #fff;
    background: #0a84ff;
    border-color: #0a84ff;
    outline: none;
}

.generator-ai-info-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(10, 132, 255, .2);
}

.generator-ai-help-panel {
    margin: 0 0 10px;
    padding: 10px 12px;
    color: #355070;
    background: #fff;
    border: 1px solid #d8e8ff;
    border-radius: 12px;
    font-size: .82rem;
    line-height: 1.5;
}

.generator-ai-help-panel[hidden] {
    display: none;
}

.generator-ai-status {
    min-height: 20px;
    color: #5f6368;
    font-size: .82rem;
    line-height: 1.45;
}

.generator-ai-divider {
    height: 1px;
    margin: 18px 0;
    background: #e5e5ea;
}

#aiApiKeyInput {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

#aiProgressWrap {
    height: 10px;
}

@media (max-width: 575.98px) {
    .generator-ai-panel {
        padding: 12px;
    }

    .generator-ai-title-row {
        align-items: flex-start;
    }

    #aiApiKeyInput {
        min-width: 0;
    }
}


/* 12. Flat iPhone mode and draggable message order */

#iphonePreview.generator-frameless,
#iphonePreview[data-frame-mode="flat"] {
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

#iphonePreview.generator-frameless::before,
#iphonePreview.generator-frameless::after,
#iphonePreview[data-frame-mode="flat"]::before,
#iphonePreview[data-frame-mode="flat"]::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
}

#iphonePreview.generator-frameless .generator-iphone-screen,
#iphonePreview[data-frame-mode="flat"] .generator-iphone-screen {
    border-radius: 0 !important;
}

#iphonePreview.generator-frameless .generator-dynamic-island,
#iphonePreview[data-frame-mode="flat"] .generator-dynamic-island {
    display: none !important;
}

#iphonePreview.generator-frameless .generator-status-bar,
#iphonePreview[data-frame-mode="flat"] .generator-status-bar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #f1f2f4f5 !important;
    background-color: #f1f2f4f5 !important;
    border-radius: 0 !important;
}

.generator-phone-frame-toggle {
    padding: 12px 13px;
    border: 1px solid #e3e5ea;
    border-radius: 13px;
    background: #fff;
}

.generator-message-admin-scroll {
    max-height: min(52vh, 520px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 4px;
}

.generator-message-admin-scroll::-webkit-scrollbar {
    width: 9px;
}

.generator-message-admin-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.generator-message-admin-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 110, .24);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.generator-message-admin-item {
    position: relative;
}

.generator-message-drag-handle {
    width: 32px;
    height: 38px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #8b8d94;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -5px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.generator-message-drag-handle:hover,
.generator-message-drag-handle:focus-visible {
    color: #34363b;
    background: #f2f2f7;
    outline: 0;
}

.generator-message-drag-handle:active {
    cursor: grabbing;
}

.generator-message-admin-ghost {
    opacity: .35;
    background: #eef5ff;
}

.generator-message-admin-chosen {
    background: #f7faff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.generator-message-admin-dragging {
    opacity: .95;
}

.generator-message-delete-btn {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .generator-message-admin-scroll {
        max-height: 58vh;
    }

    .generator-message-admin-item {
        gap: 7px;
    }

    .generator-admin-reaction-select {
        width: 62px;
        flex-basis: 62px;
    }
}


.ps-generator-donation {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 8px;
}

.ps-generator-donation-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 13px;

    min-width: 270px;
    min-height: 64px;
    padding: 10px 18px;

    color: #fff;
    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            #2b1b00 0%,
            #8b6508 28%,
            #d4af37 52%,
            #8b6508 72%,
            #2b1b00 100%
        );

    border: 1px solid #d4af37;
    border-radius: 18px;

    box-shadow:
        0 10px 28px rgba(125, 89, 10, .26),
        inset 0 1px 0 rgba(255, 255, 255, .28);

    overflow: hidden;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.ps-generator-donation-button::before {
    position: absolute;
    inset: 0;
    content: "";

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, .22) 45%,
            transparent 70%
        );

    transform: translateX(-120%);
    transition: transform .55s ease;
    pointer-events: none;
}

.ps-generator-donation-button:hover {
    color: #fff;
    text-decoration: none;

    transform: translateY(-2px);

    box-shadow:
        0 15px 35px rgba(125, 89, 10, .34),
        inset 0 1px 0 rgba(255, 255, 255, .3);

    filter: brightness(1.06);
}

.ps-generator-donation-button:hover::before {
    transform: translateX(120%);
}

.ps-generator-donation-button:focus-visible {
    outline: 3px solid rgba(212, 175, 55, .4);
    outline-offset: 3px;
}

.ps-generator-donation-icon {
    position: relative;
    z-index: 1;

    display: grid;
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    color: #2d1d00;
    background: linear-gradient(
        145deg,
        #fff0a6,
        #d4af37
    );

    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 13px;

    place-items: center;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        0 5px 12px rgba(0, 0, 0, .18);
}

.ps-generator-donation-copy {
    position: relative;
    z-index: 1;

    display: flex;
    min-width: 0;
    flex: 1;

    flex-direction: column;
    align-items: flex-start;

    line-height: 1.15;
}

.ps-generator-donation-copy strong {
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .01em;
}

.ps-generator-donation-copy small {
    margin-top: 4px;

    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 600;
}

.ps-generator-donation-arrow {
    position: relative;
    z-index: 1;

    margin-left: auto;

    color: #ffe8a3;
    font-size: 18px;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .ps-generator-donation-button {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ps-generator-donation-button,
    .ps-generator-donation-button::before {
        transition: none;
    }

    .ps-generator-donation-button:hover {
        transform: none;
    }
}

/* 13. Editable participants and compact text bubbles */

.generator-participant-name-input {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 3px 6px;
    color: #1c1c1e;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font-weight: 700;
    line-height: 1.25;
}

.generator-participant-name-input:hover {
    background: #f7f7fa;
    border-color: #e5e5ea;
}

.generator-participant-name-input:focus {
    background: #fff;
    border-color: #0a84ff;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, .14);
    outline: 0;
}

.generator-reaction-wrap {
    width: fit-content;
    max-width: 100%;
}

.generator-bubble:not(.generator-has-media) {
    width: fit-content;
    min-width: 0;
    max-width: 100%;
}

.generator-bubble-text {
    display: inline;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

/* 14. PRANKSHIT watermark unlock */

.generator-chat-scroll.generator-prankshit-watermarked {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #fff !important;
}

.generator-chat-scroll.generator-prankshit-watermarked > :not(.generator-prankshit-watermark-layer) {
    position: relative;
    z-index: 1;
}

.generator-prankshit-watermark-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}

.generator-prankshit-watermark {
    position: absolute;
    left: 50%;
    color: rgba(215, 0, 21, .30);
    font-size: clamp(26px, 2.2vw, 34px);
    font-weight: 900;
    font-style: italic;
    letter-spacing: .24em;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    opacity: 1;
}

.generator-delete-prankshit-step {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(64, 196, 121, .55);
    border-radius: 22px;
    background:
        linear-gradient(135deg,
            rgba(18, 58, 35, .98) 0%,
            rgba(27, 106, 61, .98) 18%,
            rgba(130, 255, 181, .92) 50%,
            rgba(31, 118, 68, .98) 78%,
            rgba(12, 48, 28, .98) 100%);
    box-shadow:
        0 18px 40px rgba(9, 61, 31, .22),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -1px 0 rgba(0, 0, 0, .12);
}

.generator-delete-prankshit-step::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 21px;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .28) 0%,
            rgba(255, 255, 255, .08) 26%,
            rgba(255, 255, 255, 0) 45%,
            rgba(0, 0, 0, .10) 100%);
}

.generator-delete-prankshit-step::after {
    content: "";
    position: absolute;
    top: -26%;
    left: -18%;
    width: 46%;
    height: 180%;
    transform: rotate(24deg);
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .20) 45%,
        rgba(255, 255, 255, 0) 100%);
    opacity: .9;
}

.generator-delete-prankshit-summary {
    position: relative;
    z-index: 1;
    justify-content: center;
    min-height: 68px;
    padding: 18px 54px 18px 24px;
    text-align: center;
    background: transparent;
}

.generator-delete-prankshit-summary::after {
    right: 18px;
    color: rgba(255, 255, 255, .96);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

.generator-delete-prankshit-summary .generator-step-summary-title {
    flex: 0 1 auto;
    margin: 0 auto;
    color: #f7fff9;
    font-size: 1.02rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, .18),
        0 2px 8px rgba(0, 0, 0, .18);
}

.generator-delete-prankshit-body {
    position: relative;
    z-index: 1;
    padding-top: 6px;
    text-align: center;
    color: #f5fff8;
    background: rgba(255, 255, 255, .08);
    border-top: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px) saturate(140%);
}

.generator-delete-prankshit-body .generator-help-text {
    margin-bottom: 14px !important;
    color: rgba(247, 255, 250, .96);
    font-weight: 700;
}

.generator-unlock-code-wrap {
    width: min(100%, 500px);
    margin: 0 auto;
}

.generator-unlock-code-group {
    width: 100%;
    gap: 10px;
}

.generator-unlock-code-group .form-control {
    min-height: 48px;
    text-align: center;
    color: #123b24;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow:
        inset 0 1px 2px rgba(10, 22, 15, .06),
        0 10px 22px rgba(7, 41, 20, .10);
}

.generator-unlock-code-group .form-control:focus {
    border-color: rgba(222, 255, 235, .92);
    box-shadow:
        0 0 0 4px rgba(193, 255, 214, .20),
        inset 0 1px 2px rgba(10, 22, 15, .06);
}

.generator-unlock-code-group .btn {
    min-width: 132px;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, .34);
    background:
        linear-gradient(135deg,
            rgba(15, 68, 39, .98) 0%,
            rgba(42, 150, 88, .98) 55%,
            rgba(18, 88, 50, .98) 100%);
    color: #fff;
    font-weight: 800;
    letter-spacing: .04em;
    box-shadow:
        0 10px 22px rgba(8, 56, 28, .18),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}

.generator-unlock-code-group .btn:hover,
.generator-unlock-code-group .btn:focus {
    color: #fff;
    background:
        linear-gradient(135deg,
            rgba(17, 76, 43, .98) 0%,
            rgba(50, 166, 98, .98) 55%,
            rgba(22, 102, 58, .98) 100%);
}

.generator-unlock-code-group .btn:disabled {
    opacity: .75;
    cursor: wait;
}

.generator-unlock-code-status {
    min-height: 22px;
    margin-top: 12px;
    color: rgba(241, 255, 247, .88);
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}

.generator-unlock-code-status.generator-unlock-success {
    color: #d8ffe6;
}

.generator-unlock-code-status.generator-unlock-error {
    color: #ffe3e0;
}



/* 15. Fixed watermark viewport, icon library actions and metallic unlock */

.generator-iphone-screen {
    position: relative;
}

.generator-chat-scroll.generator-prankshit-watermarked {
    background: transparent !important;
    background-color: transparent !important;
}

.generator-prankshit-watermark-layer {
    pointer-events: none !important;
}

.generator-library-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.generator-library-action-btn {
    display: inline-grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    place-items: center;
    border-radius: 13px;
}

.generator-library-action-btn svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.generator-delete-prankshit-step {
    color: #07140b;
    background:
        linear-gradient(
            135deg,
            #4b7f5a 0%,
            #9ed8ad 17%,
            #d9f4df 34%,
            #76b98b 51%,
            #d1eed8 67%,
            #639d73 84%,
            #345d40 100%
        ) !important;
}

.generator-delete-prankshit-step::before {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .52) 0%,
            rgba(255, 255, 255, .16) 31%,
            rgba(255, 255, 255, 0) 52%,
            rgba(0, 0, 0, .08) 100%
        ) !important;
}

.generator-delete-prankshit-summary .generator-step-summary-title {
    color: #050b07 !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .46),
        0 1px 3px rgba(0, 0, 0, .10) !important;
}

.generator-delete-prankshit-summary::after {
    color: #050b07 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35) !important;
}

.generator-delete-prankshit-body,
.generator-delete-prankshit-body .generator-help-text,
.generator-unlock-code-status {
    color: #07140b !important;
    text-shadow: none !important;
}

.generator-unlock-code-status.generator-unlock-success {
    color: #064d20 !important;
}

.generator-unlock-code-status.generator-unlock-error {
    color: #7a1010 !important;
}

.generator-unlock-code-group .btn {
    color: #061109 !important;
    background:
        linear-gradient(
            135deg,
            #d6f3de 0%,
            #77bb8b 50%,
            #c9ead2 100%
        ) !important;
    border-color: rgba(17, 71, 35, .36) !important;
}