/* =========================================================
   TossSpace Minimal Workflow UI
   Progressive disclosure + separated floating header
   Loaded last on purpose so this file owns the final UI layer.
========================================================= */

:root {
    --minimal-glass: rgba(255, 255, 255, .70);
    --minimal-glass-strong: rgba(255, 255, 255, .86);
    --minimal-line: rgba(34, 49, 82, .10);
    --minimal-line-strong: rgba(34, 49, 82, .16);
    --minimal-shadow: 0 16px 46px rgba(34, 49, 82, .10);
    --minimal-radius: 22px;
    --minimal-small-radius: 14px;
}

/* ---------------------------------------------------------
   1. HEADER — no containing header block
--------------------------------------------------------- */

.floating-site-brand,
.floating-site-actions {
    position: fixed !important;
    top: 20px !important;
    z-index: 110 !important;
    margin: 0 !important;
}

.floating-site-brand {
    left: 24px !important;
    gap: 9px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.floating-site-brand .brand-logo {
    width: 38px !important;
    height: 38px !important;
    filter: drop-shadow(0 6px 13px rgba(34, 49, 82, .12));
}

.floating-site-brand .brand-name {
    font-size: 19px !important;
    text-shadow: 0 1px 10px rgba(255, 255, 255, .72);
}

.floating-site-actions {
    right: 22px !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.floating-site-actions .header-badge {
    display: none !important;
}

.floating-site-actions .header-account-button,
.floating-site-actions .account-user-button,
.floating-site-actions .menu-trigger {
    min-height: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(255, 255, 255, .82) !important;
    background: rgba(255, 255, 255, .68) !important;
    box-shadow: 0 9px 28px rgba(34, 49, 82, .09) !important;
    backdrop-filter: blur(22px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

.floating-site-actions .menu-trigger {
    width: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
}

.site-menu-panel {
    position: fixed !important;
    top: 70px !important;
    right: 20px !important;
    left: auto !important;
    max-height: calc(100dvh - 88px) !important;
}

/* Sponsor mode must not pull the old header container back. */
@media (min-width: 1100px) {
    body.sponsored-background-active .floating-site-brand {
        left: 24px !important;
        right: auto !important;
        top: 20px !important;
    }

    body.sponsored-background-active .floating-site-actions {
        left: auto !important;
        right: 22px !important;
        top: 20px !important;
    }

    body.sponsored-background-active .site-menu-panel,
    body.sponsored-background-active[data-sponsor-side="right"] .site-menu-panel {
        top: 70px !important;
        right: 20px !important;
        left: auto !important;
        width: min(360px, calc(100vw - 40px)) !important;
    }
}

/* ---------------------------------------------------------
   2. HOME — remove decorative numbering, keep useful copy
--------------------------------------------------------- */

.home-choice-view .choice-number {
    display: none !important;
}

.home-choice-view .product-choice-card {
    grid-template-columns: auto 1fr auto !important;
}

.home-choice-foot {
    gap: 13px !important;
    opacity: .72;
}

.home-choice-foot span {
    white-space: nowrap;
}

/* ---------------------------------------------------------
   3. PRODUCT WORKSPACE — one compact glass surface
--------------------------------------------------------- */

body.route-send-active .product-hero,
body.route-room .room-create-hero,
body.route-receive .receive-create-hero {
    display: none !important;
}

body.route-send-active .page-shell,
body.route-room #roomCreateView,
body.route-receive #receiveCreateView {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

body:not(.sponsored-background-active).route-send-active .page-shell,
body:not(.sponsored-background-active).route-room #roomCreateView,
body:not(.sponsored-background-active).route-receive #receiveCreateView {
    width: min(600px, calc(100% - 32px)) !important;
    margin-top: 88px !important;
}

.send-card,
.room-create-card,
.receive-create-card {
    padding: 18px !important;
    border-radius: 24px !important;
}

.workflow-card-bar {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
}

.workflow-card-bar .workflow-product-mark {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--brand, #223152);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .10em;
}

.workflow-card-bar .workflow-product-mark i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(248, 209, 118, .23);
    font-size: 12px;
    letter-spacing: 0;
}

.workflow-card-bar .workflow-bar-spacer {
    flex: 1 1 auto;
}

.workflow-card-bar .limit-note {
    margin: 0 !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: rgba(34, 49, 82, .045) !important;
    font-size: 9px !important;
    white-space: nowrap;
}

.minimal-back-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    overflow: hidden;
    border-radius: 10px !important;
    font-size: 0 !important;
}

.minimal-back-button i {
    font-size: 11px !important;
}

.minimal-source-heading {
    display: none !important;
}

/* ---------------------------------------------------------
   4. ACCORDION STEPS
--------------------------------------------------------- */

.flow-step {
    margin: 8px 0;
    overflow: hidden;
    border: 1px solid var(--minimal-line);
    border-radius: 17px;
    background: rgba(255, 255, 255, .34);
    transition: border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.flow-step.is-open {
    border-color: rgba(34, 49, 82, .13);
    background: rgba(255, 255, 255, .48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.flow-step-toggle {
    width: 100%;
    min-height: 48px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    color: #223152;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.flow-step-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #223152;
    background: rgba(248, 209, 118, .28);
    font-size: 11px;
}

.flow-step-title {
    min-width: 0;
    font-size: 12px;
    font-weight: 860;
}

.flow-step-summary {
    max-width: 170px;
    overflow: hidden;
    color: #7b8393;
    font-size: 10px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-step-chevron {
    color: #9aa1ae;
    font-size: 9px;
    transition: transform 170ms ease;
}

.flow-step.is-open .flow-step-chevron {
    transform: rotate(180deg);
}

.flow-step-body {
    padding: 0 11px 12px;
}

.flow-step:not(.is-open) > .flow-step-body {
    display: none !important;
}

.flow-step-body > :first-child {
    margin-top: 2px !important;
}

/* Inputs stay roomy enough to tap, without looking like stacked cards. */
.flow-step .field-group,
.flow-step .room-field-wide {
    margin-top: 10px !important;
}

.flow-step input,
.flow-step select,
.flow-step textarea {
    border-color: rgba(34, 49, 82, .09) !important;
    background: rgba(255, 255, 255, .66) !important;
    box-shadow: none !important;
}

.flow-step textarea {
    min-height: 76px !important;
}

/* File drop is the main first-step action, but much shorter. */
.flow-step .drop-zone,
.flow-panel-body .drop-zone {
    min-height: 150px !important;
    margin-top: 4px !important;
    border-radius: 16px !important;
}

.flow-step .drop-icon,
.flow-panel-body .drop-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 15px !important;
}

.flow-step .drop-title,
.flow-panel-body .drop-title {
    margin-top: 8px !important;
    font-size: 13px !important;
}

.flow-step .drop-subtitle,
.flow-panel-body .drop-subtitle {
    font-size: 10px !important;
}

.file-section {
    margin-top: 9px !important;
}

.file-section-top {
    min-height: 32px;
}

/* Delivery choices become icon-led compact toggles. */
.delivery-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

.delivery-section-heading {
    margin-bottom: 8px !important;
}

.delivery-section-heading .delivery-helper {
    display: none !important;
}

.delivery-method-grid {
    gap: 8px !important;
}

.delivery-method-button {
    min-height: 54px !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
}

.delivery-method-button .delivery-method-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
}

.delivery-method-button strong {
    font-size: 11px !important;
}

.delivery-method-button small {
    display: none !important;
}

.email-delivery-panel {
    margin-top: 9px !important;
    padding: 11px !important;
    border-radius: 14px !important;
}

.email-verification-gate p {
    display: none !important;
}

.delivery-form-grid {
    gap: 8px !important;
}

.delivery-readonly {
    min-height: 42px !important;
}

.email-recipient-list {
    gap: 6px !important;
}

.send-options,
.room-create-options {
    margin-top: 8px !important;
    gap: 8px !important;
}

.privacy-note,
.account-policy-note,
.room-policy-note,
.receive-auth-note {
    min-height: 0 !important;
    margin: 7px 0 0 !important;
    padding: 6px 2px !important;
    border: 0 !important;
    color: #89909d !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
}

.privacy-note {
    justify-content: flex-start !important;
}

.send-card > .primary-button,
.room-create-card > .primary-button,
.receive-create-card > .primary-button {
    min-height: 46px !important;
    margin-top: 10px !important;
    border-radius: 14px !important;
}

.quiet-details {
    display: none !important;
}

/* ---------------------------------------------------------
   5. FOCUS MODES — while working, show only the current stage
--------------------------------------------------------- */

.send-card.workflow-focus-progress > :not(.workflow-card-bar):not(#uploadPanel):not(#errorPanel),
.send-card.workflow-focus-complete > :not(.workflow-card-bar):not(#completePanel),
.room-create-card.workflow-focus-complete > :not(.workflow-card-bar):not(#roomCreatedPanel),
.receive-create-card.workflow-focus-complete > :not(.workflow-card-bar):not(#receiveCreatedPanel) {
    display: none !important;
}

.send-card.workflow-focus-progress #uploadPanel,
.send-card.workflow-focus-complete #completePanel,
.room-create-card.workflow-focus-complete #roomCreatedPanel,
.receive-create-card.workflow-focus-complete #receiveCreatedPanel {
    margin-top: 4px !important;
}

.upload-panel,
.complete-panel,
.room-created-panel {
    border-radius: 17px !important;
    box-shadow: none !important;
}

.progress-head {
    align-items: center !important;
}

.progress-title {
    font-size: 14px !important;
}

.progress-subtitle {
    font-size: 10px !important;
}

.upload-actions {
    display: flex !important;
    gap: 8px !important;
}

.upload-actions .secondary-button,
.upload-actions .danger-button {
    min-height: 38px !important;
    flex: 1 1 0;
    margin-top: 0 !important;
}

.complete-panel .transfer-id-note,
.room-created-panel > div:nth-child(2) p {
    display: none !important;
}

.complete-actions,
.receive-created-actions {
    display: flex !important;
    gap: 8px !important;
}

.complete-actions > *,
.receive-created-actions > * {
    flex: 1 1 0;
}

/* ---------------------------------------------------------
   6. LIVE ROOM / RECEIVE — short headers + icon actions
--------------------------------------------------------- */

.room-live-card,
.receive-live-card {
    padding: 18px !important;
    border-radius: 24px !important;
}

.room-live-heading,
.receive-live-heading,
.receive-owner-heading {
    align-items: center !important;
    gap: 10px !important;
}

.room-live-heading .section-kicker,
.receive-live-heading .section-kicker,
.receive-owner-heading .section-kicker {
    margin-bottom: 2px !important;
    font-size: 8px !important;
}

.room-live-heading h1,
.receive-live-heading h1 {
    margin: 2px 0 0 !important;
    font-size: clamp(24px, 4vw, 32px) !important;
}

.room-live-heading p,
.receive-live-heading p {
    margin-top: 4px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
}

.expiry-badge {
    padding: 6px 9px !important;
    font-size: 9px !important;
    white-space: nowrap;
}

.room-meta-grid {
    margin-top: 10px !important;
    display: flex !important;
    gap: 7px !important;
}

.room-meta-grid .receiver-meta-item {
    min-width: 0 !important;
    flex: 1 1 0;
    padding: 7px 9px !important;
    border: 1px solid var(--minimal-line) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, .38) !important;
    box-shadow: none !important;
}

.room-meta-grid .receiver-meta-item:last-child {
    display: none !important;
}

.room-meta-grid .receiver-meta-item span {
    font-size: 8px !important;
}

.room-meta-grid .receiver-meta-item strong {
    margin-top: 1px !important;
    font-size: 11px !important;
}

.receive-meta-row {
    display: none !important;
}

.room-live-heading > .room-share-actions {
    margin-left: auto !important;
}

.room-share-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
}

/* Buttons can keep their text internally for old JS state updates; only icon is visible. */
.minimal-icon-button,
a.minimal-icon-button {
    position: relative !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
}

.minimal-icon-button::before {
    color: #223152;
    font-family: "Font Awesome 6 Free";
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.minimal-icon-button[data-minimal-icon="copy"]::before { content: "\f0c5"; }
.minimal-icon-button[data-minimal-icon="qr"]::before { content: "\f029"; }
.minimal-icon-button[data-minimal-icon="refresh"]::before { content: "\f2f1"; }
.minimal-icon-button[data-minimal-icon="download"]::before { content: "\f019"; }
.minimal-icon-button[data-minimal-icon="close"]::before { content: "\f00d"; }
.minimal-icon-button[data-minimal-icon="open"]::before { content: "\f35d"; }
.minimal-icon-button[data-minimal-icon="plus"]::before { content: "\2b"; }

.minimal-icon-button.danger-button::before,
.minimal-icon-button[data-minimal-icon="close"]::before {
    color: #b54848;
}

.minimal-icon-button:disabled {
    opacity: .45 !important;
}

.minimal-icon-button[data-minimal-icon="refresh"]:active::before {
    transform: rotate(90deg);
}

/* Old share strip is removed by JS after its controls move into the heading. */
.room-share-strip.minimal-consumed {
    display: none !important;
}

/* ---------------------------------------------------------
   7. COLLAPSIBLE LIVE PANELS
--------------------------------------------------------- */

.flow-panel {
    margin-top: 10px !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--minimal-line) !important;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, .40) !important;
    box-shadow: none !important;
}

.flow-panel-header {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px 6px 10px;
}

.flow-panel-toggle {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 2px;
    color: #223152;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.flow-panel-toggle .flow-panel-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    background: rgba(248, 209, 118, .24);
    font-size: 10px;
}

.flow-panel-toggle strong {
    min-width: 0;
    flex: 0 1 auto;
    font-size: 12px;
}

.flow-panel-summary {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #8a919e;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-panel-chevron {
    color: #a0a6b0;
    font-size: 8px;
    transition: transform 160ms ease;
}

.flow-panel.is-open .flow-panel-chevron {
    transform: rotate(180deg);
}

.flow-panel-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.flow-panel-body {
    padding: 0 12px 12px;
}

.flow-panel:not(.is-open) > .flow-panel-body {
    display: none !important;
}

.flow-panel .room-upload-top,
.flow-panel .room-files-heading,
.flow-panel .receive-owner-heading,
.receive-upload-box.flow-panel > .flow-panel-body > div:first-child {
    display: none !important;
}

.flow-panel .room-uploader-field {
    margin-top: 2px !important;
}

.flow-panel .primary-button {
    min-height: 44px !important;
    margin-top: 9px !important;
}

.receive-helper-copy {
    display: none !important;
}

.compact-optional {
    margin-top: 8px;
    border-top: 1px solid rgba(34, 49, 82, .07);
}

.compact-optional > summary {
    padding: 8px 1px 4px;
    color: #7c8493;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
}

.compact-optional > summary::-webkit-details-marker {
    display: none;
}

.compact-optional > summary i {
    width: 18px;
    text-align: center;
}

.compact-optional > .field-group {
    margin-top: 3px !important;
}

.compact-optional > .field-group > .field-label {
    display: none !important;
}

/* Focus on progress in live upload flows. */
.room-live-card.workflow-live-progress .room-live-heading,
.room-live-card.workflow-live-progress .room-meta-grid,
.room-live-card.workflow-live-progress .room-files-section,
.receive-live-card.workflow-live-progress .receive-live-heading,
.receive-live-card.workflow-live-progress .receive-meta-row,
.receive-live-card.workflow-live-progress .receive-owner-panel {
    display: none !important;
}

.room-live-card.workflow-live-progress .room-upload-box,
.receive-live-card.workflow-live-progress .receive-upload-box {
    margin-top: 0 !important;
}

.room-upload-box.workflow-panel-progress .flow-panel-header,
.receive-upload-box.workflow-panel-progress .flow-panel-header {
    display: none !important;
}

.room-upload-box.workflow-panel-progress .flow-panel-body > :not(#roomUploadProgressPanel):not(#roomUploadError),
.receive-upload-box.workflow-panel-progress .flow-panel-body > :not(#receiveUploadProgressPanel):not(#receiveUploadError):not(#receiveUploadComplete) {
    display: none !important;
}

/* ---------------------------------------------------------
   8. SPONSORED DESKTOP TOOL — new separated header gives room
--------------------------------------------------------- */

@media (min-width: 1100px) {
    body.sponsored-background-active
    #homeChoiceView:not(.hidden),
    body.sponsored-background-active
    #sendView:not(.hidden),
    body.sponsored-background-active
    #roomCreateView:not(.hidden),
    body.sponsored-background-active
    #roomLiveView:not(.hidden),
    body.sponsored-background-active
    #receiveCreateView:not(.hidden),
    body.sponsored-background-active
    #receiveLiveView:not(.hidden),
    body.sponsored-background-active
    #receiverView:not(.hidden) {
        max-height: calc(100svh - 74px) !important;
        padding: 12px !important;
    }

    body.sponsored-background-active .send-card,
    body.sponsored-background-active .room-create-card,
    body.sponsored-background-active .receive-create-card,
    body.sponsored-background-active .room-live-card,
    body.sponsored-background-active .receive-live-card {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.sponsored-background-active .send-card::before,
    body.sponsored-background-active .room-create-card::before,
    body.sponsored-background-active .receive-create-card::before {
        display: none !important;
    }
}

/* ---------------------------------------------------------
   9. MOBILE
--------------------------------------------------------- */

@media (max-width: 1099px) {
    .floating-site-brand,
    .floating-site-actions {
        top: 14px !important;
    }

    .floating-site-brand {
        left: 17px !important;
    }

    .floating-site-actions {
        right: 14px !important;
    }

    .floating-site-brand .brand-logo {
        width: 34px !important;
        height: 34px !important;
    }

    .floating-site-brand .brand-name {
        font-size: 17px !important;
    }

    .floating-site-actions .header-account-button,
    .floating-site-actions .account-user-button,
    .floating-site-actions .menu-trigger {
        height: 38px !important;
        min-height: 38px !important;
    }

    .site-menu-panel {
        top: 62px !important;
        right: 12px !important;
    }

    body:not(.sponsored-background-active).route-send-active .page-shell,
    body:not(.sponsored-background-active).route-room #roomCreateView,
    body:not(.sponsored-background-active).route-receive #receiveCreateView,
    body:not(.sponsored-background-active).route-room #roomLiveView,
    body:not(.sponsored-background-active).route-receive #receiveLiveView {
        margin-top: 76px !important;
    }

    .flow-step-summary {
        max-width: 112px;
    }

    .delivery-method-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .send-options,
    .room-create-options {
        grid-template-columns: 1fr !important;
    }

    .flow-step .drop-zone,
    .flow-panel-body .drop-zone {
        min-height: 132px !important;
    }

    .room-live-heading p,
    .receive-live-heading p {
        display: none !important;
    }

    .room-live-card,
    .receive-live-card,
    .send-card,
    .room-create-card,
    .receive-create-card {
        padding: 14px !important;
        border-radius: 20px !important;
    }

    .minimal-icon-button,
    a.minimal-icon-button {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }
}

@media (max-width: 520px) {
    .floating-site-brand .brand-name {
        display: inline !important;
    }

    .floating-site-actions .header-account-button {
        padding-inline: 10px !important;
    }

    .workflow-card-bar .workflow-product-mark span {
        display: none;
    }

    .workflow-card-bar .limit-note {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .flow-step-toggle {
        grid-template-columns: 30px minmax(0, 1fr) auto 14px;
    }

    .flow-step-summary {
        max-width: 94px;
    }

    .delivery-method-button {
        grid-template-columns: 34px 1fr !important;
    }

    .room-live-heading,
    .receive-live-heading {
        align-items: flex-start !important;
    }

    .room-live-heading h1,
    .receive-live-heading h1 {
        font-size: 24px !important;
    }
}

/* =========================================================
   10. POLISH FIX — raw logo + true icon centering + no overflow
   2026-08-28
========================================================= */

/* Show Logo.png itself only. Remove the legacy yellow tile/frame
   that app.css applies directly to .brand-logo. */
.floating-site-brand .brand-logo,
.modern-brand .brand-logo,
.brand.floating-site-brand .brand-logo {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain !important;
    filter: drop-shadow(0 5px 10px rgba(34, 49, 82, .10)) !important;
}

/* The old button components have their own line-height/padding rules.
   Force icon-only actions to use the geometric centre of the button,
   not the font baseline. */
.minimal-icon-button,
a.minimal-icon-button,
button.minimal-icon-button {
    box-sizing: border-box !important;
    display: inline-block !important;
    position: relative !important;
    padding: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.minimal-icon-button::before,
a.minimal-icon-button::before,
button.minimal-icon-button::before {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transform: none !important;
}

/* Disable decorative pseudo-elements inherited from older button styles. */
.minimal-icon-button::after,
a.minimal-icon-button::after,
button.minimal-icon-button::after {
    display: none !important;
    content: none !important;
}

/* Keep icon action rows vertically centred and prevent controls from
   jumping toward the top edge of their containers. */
.room-share-actions,
.flow-panel-actions,
.receive-created-actions {
    align-items: center !important;
}

.room-live-heading > .room-share-actions,
.receive-live-heading > .room-share-actions,
.receive-owner-heading > .room-share-actions {
    align-self: center !important;
}

/* Capacity text must never push outside the floating workspace. */
.workflow-card-bar {
    min-width: 0 !important;
    width: 100% !important;
}

.workflow-card-bar .workflow-bar-spacer {
    min-width: 0 !important;
}

.workflow-card-bar .limit-note {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: min(145px, 36vw) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Panel header text must yield space to icon actions instead of
   pushing the actions outside the card. */
.flow-panel-header {
    min-width: 0 !important;
}

.flow-panel-toggle {
    min-width: 0 !important;
    overflow: hidden !important;
}

.flow-panel-actions {
    flex: 0 0 auto !important;
}

@media (max-width: 520px) {
    .floating-site-brand .brand-logo,
    .modern-brand .brand-logo,
    .brand.floating-site-brand .brand-logo {
        width: 34px !important;
        height: 34px !important;
    }

    .workflow-card-bar .limit-note {
        max-width: 112px !important;
        font-size: 8px !important;
    }

    .minimal-icon-button,
    a.minimal-icon-button,
    button.minimal-icon-button {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }
}


/* =========================================================
   Minimal UI Phase 2 — live pages show one task at a time
========================================================= */

/* Live room metadata is information, not another card. */
.room-meta-grid {
    display: none !important;
}

.minimal-live-meta {
    margin-top: 7px;
    color: rgba(34, 49, 82, .58);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .01em;
}

.room-live-heading,
.receive-live-heading {
    align-items: flex-start !important;
}

.room-live-heading > div:first-child,
.receive-live-heading > div:first-child {
    min-width: 0;
}

.room-live-heading .room-share-actions {
    align-self: flex-start;
}

/* One compact action rail instead of large stacked buttons. */
.room-live-heading .minimal-icon-button,
.receive-owner-panel .minimal-icon-button,
.flow-panel-actions .minimal-icon-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 11px !important;
}

.room-live-heading .minimal-icon-button::before,
.receive-owner-panel .minimal-icon-button::before,
.flow-panel-actions .minimal-icon-button::before {
    font-size: 12px !important;
}

/* Panels are navigation rows when closed and work surfaces only when opened. */
.flow-panel {
    margin-top: 8px !important;
}

.flow-panel-header {
    min-height: 44px !important;
    padding: 5px 7px 5px 9px !important;
}

.flow-panel-toggle {
    gap: 8px !important;
    padding: 4px 1px !important;
}

.flow-panel-toggle .flow-panel-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
}

.flow-panel-body {
    padding: 0 10px 10px !important;
}

.flow-panel-summary {
    text-align: right;
}

/* Success states should feel like a result, not another large form. */
.room-created-panel {
    gap: 10px !important;
    padding: 14px !important;
}

.room-created-panel .complete-icon {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 0 !important;
}

.room-created-panel h3 {
    margin: 0 !important;
    font-size: 17px !important;
}

.room-created-panel > div:nth-child(2) p {
    display: none !important;
}

.room-created-panel .share-box {
    margin-top: 2px !important;
    padding: 9px !important;
    border-radius: 13px !important;
}

.room-created-panel .transfer-info-label {
    display: none !important;
}

.room-created-panel .share-link-row {
    gap: 7px !important;
}

.room-created-panel .share-link-input {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 10px !important;
}

.room-created-panel .share-link-row .primary-button {
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 14px !important;
}

.receive-created-actions {
    margin-top: 0 !important;
}

/* On small screens, keep action icons on one line and protect titles. */
@media (max-width: 560px) {
    .room-live-heading,
    .receive-live-heading {
        gap: 8px !important;
    }

    .room-live-heading h1,
    .receive-live-heading h1 {
        font-size: 24px !important;
    }

    .room-live-heading .room-share-actions {
        gap: 4px !important;
    }

    .room-live-heading .minimal-icon-button {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
    }
}

/* =========================================================
   Minimal UI Phase 3 — microcopy + hierarchy reduction
   Keep meaning, hide repetition, make each step feel lighter.
========================================================= */

/* The flow-step title already says Share / Invite / Send request.
   Do not repeat a full question directly underneath it. */
.flow-step .delivery-section-heading {
    display: none !important;
}

/* The product chip already identifies SEND / ROOM / RECEIVE. */
.room-live-heading .section-kicker,
.receive-live-heading .section-kicker {
    display: none !important;
}

/* Capacity is useful, the sentence around it is not. */
.workflow-card-bar .limit-note[data-compact-limit="1"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    max-width: none !important;
    padding: 5px 8px !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.workflow-card-bar .limit-note[data-compact-limit="1"]::before {
    content: "\f0c2";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 8px;
    opacity: .72;
}

/* Auto-delete becomes a quiet status chip instead of a sentence. */
.privacy-note[data-compact-privacy="1"] {
    display: inline-flex !important;
    width: auto !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 1px !important;
    white-space: nowrap !important;
}

.privacy-note[data-compact-privacy="1"] i {
    font-size: 9px;
    opacity: .72;
}

/* Plan / expiry explanation is still available, but only when asked for. */
.compact-info-note {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin: 4px 0 0 auto;
}

.compact-info-note > summary {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(34, 49, 82, .08);
    border-radius: 9px;
    color: rgba(34, 49, 82, .55);
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    list-style: none;
}

.compact-info-note > summary::-webkit-details-marker {
    display: none;
}

.compact-info-note > summary i {
    font-size: 10px;
}

.compact-info-note[open] {
    width: 100%;
}

.compact-info-note[open] > summary {
    margin-left: auto;
}

.compact-info-note > .compact-info-note-body {
    margin: 5px 0 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(34, 49, 82, .07) !important;
    border-radius: 11px !important;
    color: rgba(34, 49, 82, .58) !important;
    background: rgba(255, 255, 255, .40) !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
}

/* Optional email notes are disclosures, not permanent form height. */
.email-delivery-panel .compact-optional {
    margin-top: 7px !important;
}

.email-delivery-panel .compact-optional > summary {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 2px !important;
}

.email-delivery-panel .compact-optional:not([open]) + * {
    margin-top: 0 !important;
}

/* Field hierarchy: labels are hints, values/actions carry the visual weight. */
.flow-step .field-label,
.flow-panel .field-label {
    color: rgba(34, 49, 82, .58) !important;
    font-size: 9px !important;
    font-weight: 730 !important;
}

.flow-step input,
.flow-step select,
.flow-step textarea,
.flow-panel input,
.flow-panel select,
.flow-panel textarea {
    min-height: 42px !important;
}

/* The recipient limit is secondary metadata. */
.email-recipient-group .delivery-helper {
    font-size: 8px !important;
    opacity: .62;
}

/* Use the placeholder as the secondary instruction inside drop zones. */
.flow-step .drop-subtitle,
.flow-panel-body .drop-subtitle {
    display: none !important;
}

/* Smaller informational gaps = shorter floating workspace. */
.flow-step-body > .send-options,
.flow-step-body > .room-create-options {
    margin-top: 6px !important;
}

/* Keep essential auth guidance visible, but not as a large notice card. */
.receive-auth-note:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    background: rgba(248, 209, 118, .10) !important;
}

/* Live pages: titles and controls first, helper copy second. */
.room-live-heading > div:first-child > p:not(.section-kicker),
.receive-live-heading > div:first-child > p:not(.section-kicker) {
    margin-top: 3px !important;
    max-width: 32ch;
    color: rgba(34, 49, 82, .56) !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
}

@media (max-width: 520px) {
    .workflow-card-bar .limit-note[data-compact-limit="1"] {
        max-width: none !important;
        font-size: 8px !important;
    }

    .compact-info-note > summary {
        width: 26px;
        height: 26px;
    }
}