/* =========================================================
   AI IMAGE STUDIO V2 - RESULT PAGE
   File: assets/css/result.css
   ========================================================= */

.result-page {
    padding-top: 16px;
}

.header-back-button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--text);
    font-size: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

/* =========================================================
   RESULT SUCCESS
   ========================================================= */

.result-success-card {
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow);
}

.result-success-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.result-success-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    color: var(--success);
    font-size: 9px;
    font-weight: 800;
    border-radius: 999px;
    background: #effaf5;
}

.result-success-header h2 {
    margin: 10px 0 4px;
    font-size: 18px;
}

.result-success-header p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}

.result-ratio-badge {
    display: grid;
    min-width: 44px;
    height: 33px;
    padding: 0 10px;
    place-items: center;
    color: var(--text);
    font-size: 10px;
    font-weight: 800;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fafafa;
}

.result-main-image {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #eeeef5;
}

.result-main-image img {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: contain;
}

.result-preview-button {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    width: 41px;
    height: 41px;
    padding: 0;
    place-items: center;
    color: #fff;
    font-size: 17px;
    border: 0;
    border-radius: 13px;
    background: rgba(20, 19, 29, .68);
    backdrop-filter: blur(10px);
}

/* =========================================================
   RESULT INFORMATION
   ========================================================= */

.result-information-card {
    margin-top: 13px;
    padding: 13px;
    border-radius: 15px;
    background: #f8f7fc;
}

.result-information-card.negative {
    background: #fff7f7;
}

.result-information-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
}

.result-information-card.negative
.result-information-title {
    color: var(--danger);
}

.result-information-card p {
    margin: 7px 0 0;
    color: #5f5f70;
    font-size: 11px;
    line-height: 1.6;
}

.result-metadata {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 13px;
}

.result-metadata > div {
    display: flex;
    min-width: 0;
    padding: 12px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
}

.result-metadata > div > i {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--primary);
    font-size: 16px;
    border-radius: 11px;
    background: var(--primary-soft);
}

.result-metadata span {
    min-width: 0;
}

.result-metadata small,
.result-metadata strong {
    display: block;
}

.result-metadata small {
    color: var(--muted);
    font-size: 8px;
}

.result-metadata strong {
    margin-top: 3px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   ACTIONS
   ========================================================= */

.result-actions {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

.result-primary-action,
.result-secondary-action {
    display: flex;
    min-height: 45px;
    padding: 9px 10px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    border-radius: 14px;
}

.result-primary-action {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #9562ff
        );
}

.result-secondary-action {
    color: var(--text);
    border: 1px solid var(--border);
    background: #fff;
}

button.result-secondary-action {
    width: 100%;
}

/* =========================================================
   GALLERY HEADER
   ========================================================= */

.gallery-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 24px 2px 13px;
}

.gallery-heading-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.gallery-heading h2 {
    margin: 0;
    font-size: 18px;
}

.gallery-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 10px;
}

.gallery-options-button {
    display: grid;
    width: 39px;
    height: 39px;
    padding: 0;
    place-items: center;
    color: var(--text);
    font-size: 17px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}

/* =========================================================
   GALLERY GRID
   ========================================================= */

.result-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.result-gallery-grid.list-mode {
    grid-template-columns: 1fr;
}

.result-gallery-item {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 8px 22px rgba(35, 31, 65, .05);
}

.result-gallery-image {
    display: block;
    width: 100%;
    height: 178px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #eeeef5;
}

.result-gallery-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.result-gallery-image:active img {
    transform: scale(.98);
}

.result-gallery-information {
    display: flex;
    min-width: 0;
    padding: 10px 8px 7px 11px;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.result-gallery-information > div {
    min-width: 0;
}

.result-gallery-information strong,
.result-gallery-information small {
    display: block;
}

.result-gallery-information strong {
    font-size: 11px;
}

.result-gallery-information small {
    margin-top: 3px;
    overflow: hidden;
    color: var(--muted);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-gallery-menu {
    display: grid;
    flex: 0 0 auto;
    width: 31px;
    height: 31px;
    padding: 0;
    place-items: center;
    color: var(--muted);
    border: 0;
    border-radius: 10px;
    background: transparent;
}

.result-gallery-size {
    padding: 0 11px 10px;
    color: #aaaabb;
    font-size: 8px;
}

/* =========================================================
   LIST MODE
   ========================================================= */

.result-gallery-grid.list-mode
.result-gallery-item {
    display: grid;
    grid-template-columns: 105px 1fr;
    min-height: 105px;
}

.result-gallery-grid.list-mode
.result-gallery-image {
    width: 105px;
    height: 105px;
}

.result-gallery-grid.list-mode
.result-gallery-information {
    padding: 15px 10px;
}

.result-gallery-grid.list-mode
.result-gallery-size {
    position: absolute;
    left: 116px;
    bottom: 14px;
    padding: 0;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty-result-card {
    padding: 38px 24px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 23px;
    background: #fff;
    box-shadow: var(--shadow);
}

.empty-result-icon {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    place-items: center;
    color: var(--primary);
    font-size: 29px;
    border-radius: 24px;
    background: var(--primary-soft);
}

.empty-result-card h3 {
    margin: 0 0 7px;
    font-size: 16px;
}

.empty-result-card p {
    max-width: 260px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

.empty-result-button {
    display: inline-flex;
    margin-top: 18px;
    padding: 11px 17px;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    border-radius: 13px;
    background: var(--primary);
}

/* =========================================================
   PREVIEW MODAL
   ========================================================= */

.result-preview-modal {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: flex;
    visibility: hidden;
    opacity: 0;
    flex-direction: column;
    background: #111119;
    transition: .22s ease;
}

.result-preview-modal.open {
    visibility: visible;
    opacity: 1;
}

.result-preview-header {
    display: flex;
    min-height: 68px;
    padding:
        max(13px, env(safe-area-inset-top))
        17px
        10px;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.result-preview-header button {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    color: #fff;
    font-size: 18px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: rgba(255,255,255,.08);
}

.result-preview-body {
    display: grid;
    flex: 1;
    padding: 15px;
    place-items: center;
    overflow: auto;
}

.result-preview-body img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 115px);
    object-fit: contain;
}

/* =========================================================
   ACTION SHEET
   ========================================================= */

.gallery-action-overlay {
    position: fixed;
    z-index: 140;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    background: rgba(18, 17, 29, .52);
    backdrop-filter: blur(4px);
    transition: .25s ease;
}

.gallery-action-overlay.open {
    visibility: visible;
    opacity: 1;
}

.gallery-action-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 150;
    padding:
        10px
        18px
        calc(22px + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
    background: #fff;
    box-shadow:
        0 -20px 50px rgba(25, 22, 45, .2);
    transform: translateY(105%);
    transition:
        transform .32s
        cubic-bezier(.25, .8, .25, 1);
}

.gallery-action-sheet.open {
    transform: translateY(0);
}

.gallery-action-title {
    display: flex;
    margin-bottom: 17px;
    padding-bottom: 15px;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid var(--border);
}

.gallery-action-title img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 14px;
}

.gallery-action-title strong,
.gallery-action-title small {
    display: block;
}

.gallery-action-title strong {
    font-size: 14px;
}

.gallery-action-title small {
    max-width: 260px;
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-action-list {
    display: grid;
    gap: 4px;
}

.gallery-action-list button,
.gallery-action-list a {
    display: flex;
    width: 100%;
    min-height: 58px;
    padding: 9px 8px;
    align-items: center;
    gap: 12px;
    color: var(--text);
    text-align: left;
    border: 0;
    border-radius: 14px;
    background: transparent;
}

.gallery-action-list > * > i {
    display: grid;
    flex: 0 0 auto;
    width: 39px;
    height: 39px;
    place-items: center;
    color: var(--primary);
    font-size: 17px;
    border-radius: 12px;
    background: var(--primary-soft);
}

.gallery-action-list strong,
.gallery-action-list small {
    display: block;
}

.gallery-action-list strong {
    font-size: 12px;
}

.gallery-action-list small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

.gallery-action-list .danger-action {
    color: var(--danger);
}

.gallery-action-list
.danger-action > i {
    color: var(--danger);
    background: #fff0f1;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 580px) {
    .gallery-action-sheet {
        right: auto;
        bottom: 24px;
        left: 50%;
        width: 520px;
        border-radius: 28px 28px 30px 30px;
        transform:
            translate(-50%, 105%);
    }

    .gallery-action-sheet.open {
        transform:
            translate(-50%, 0);
    }

    .result-preview-modal {
        right: auto;
        left: 50%;
        width: 520px;
        transform: translateX(-50%);
    }
}

@media (max-width: 390px) {
    .result-actions {
        grid-template-columns: 1fr;
    }

    .result-metadata {
        grid-template-columns: 1fr;
    }

    .result-gallery-image {
        height: 155px;
    }
}