/* Digital Studio's shared components on the palette's tokens (18 Oct 2026).
   Only --ds-* tokens here; the panel and the admin take their parts from this file. */

/* ── settings: a row whose control sits under its label ─────────────────── */
.settings-item.settings-item-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

/* ── the palette picker ─────────────────────────────────────────────────── */
.ds-palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.ds-palette-card {
    appearance: none;
    display: grid;
    gap: 9px;
    padding: 8px;
    border: 1px solid var(--ds-line);
    border-radius: 12px;
    background: var(--ds-surface);
    color: var(--ds-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ds-palette-card:hover {
    border-color: var(--ds-line-strong);
    transform: translateY(-1px);
}

.ds-palette-card.is-on {
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 3px var(--ds-accent-soft);
}

.ds-palette-card:focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 2px;
}

.ds-palette-swatch {
    position: relative;
    display: block;
    height: 58px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--sw-bg);
    box-shadow: inset 0 0 0 1px rgba(var(--ds-ink-rgb), 0.08);
}

/* a panel in miniature: a card, a line of text, the accent button and its second note */
.ds-palette-swatch i {
    position: absolute;
    display: block;
    border-radius: 4px;
}

.ds-palette-swatch i:nth-child(1) { left: 10%; top: 18%; width: 52%; height: 64%; background: var(--sw-surface); }
.ds-palette-swatch i:nth-child(2) { left: 16%; top: 32%; width: 34%; height: 6px; background: var(--sw-ink); opacity: .85; }
.ds-palette-swatch i:nth-child(3) { right: 10%; bottom: 18%; width: 22%; height: 14px; background: var(--sw-accent);
    box-shadow: 0 -16px 0 -4px var(--sw-second); }

.ds-palette-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.ds-palette-split .ds-palette-swatch i:nth-child(1) { width: 60%; }

.ds-palette-name {
    display: grid;
    gap: 1px;
    padding: 0 2px 2px;
    min-width: 0;
}

.ds-palette-name strong {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.01em;
}

.ds-palette-name small {
    font-size: 11.5px;
    color: var(--ds-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── parts that sit on a picture: dark glass, white text, in every palette ─ */
.model-badge,
.gallery-agent-badge,
.gallery-video-model,
.creative-result-meta-badge,
.social-format-badge,
.result-social-format-badge,
.fullscreen-social-format-badge,
.fullscreen-info,
.creative-favorites-thumb-badge,
.lightbox-action-bar,
.edit-lightbox-action-bar,
.mask-toolbar {
    color: var(--ds-on-media);
}

/* ── the logo: "ds." in the palette's accent, the wordmark beside it ────── */
.ds-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ds-ink);
    font-weight: 850;
    font-size: 17px;
    letter-spacing: -.06em;
    white-space: nowrap;
    text-decoration: none;
}

.ds-glyph {
    width: 28px;
    height: 28px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--ds-accent);
    color: var(--ds-accent-ink);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: -.07em;
    line-height: 1;
}

.ds-logo .ds-dot {
    color: var(--ds-accent-text);
}

/* ── the sidebar: quiet, minimal (owner, 18 Oct 2026) ───────────────────── */
.sidebar {
    background: var(--ds-bg);
    border-right: 1px solid var(--ds-line);
    padding: 18px 12px;
}

.sidebar .nav-section {
    margin-bottom: 22px;
}

.sidebar .nav-section h3 {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .14em;
    color: var(--ds-muted);
    margin: 0 0 8px 12px;
}

.sidebar .nav-item {
    position: relative;
    gap: 11px;
    min-height: 40px;
    padding: 0 12px;
    margin-bottom: 2px;
    border-radius: var(--radius-btn, 10px);
    color: var(--ds-ink-2);
    font-size: 14px;
    font-weight: 550;
    letter-spacing: -.005em;
    background: transparent;
    box-shadow: none;
    transition: background .18s ease, color .18s ease;
}

.sidebar .nav-item i {
    width: 18px;
    font-size: 15px;
    color: var(--ds-muted);
    transition: color .18s ease;
}

.sidebar .nav-item:hover {
    background: rgba(var(--ds-ink-rgb), 0.05);
    color: var(--ds-ink);
}

.sidebar .nav-item:hover i {
    color: var(--ds-ink);
}

.sidebar .nav-item.active {
    background: var(--ds-accent-soft);
    color: var(--ds-ink);
    box-shadow: none;
    border-radius: var(--radius-btn, 10px);
}

.sidebar .nav-item.active i {
    color: var(--ds-accent-text);
}

/* folded: a column of icons, each 40px, the name on hover (title) */
.sidebar.collapsed {
    width: 64px;
    padding: 18px 12px;
}

.sidebar.collapsed .nav-section {
    margin-bottom: 14px;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    width: 40px;
    padding: 0;
}

.sidebar.collapsed .nav-item i {
    font-size: 16px;
}

.main-content.expanded {
    margin-left: 64px;
    width: calc(100vw - 64px);
    max-width: calc(100vw - 64px);
}

/* the counters at the foot: small and calm */
.sidebar .sidebar-footer {
    border-top: 1px solid var(--ds-line);
    padding-top: 14px;
}

.sidebar .stat-label {
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--ds-muted);
}

.sidebar .stat-value {
    font-size: 15px;
    font-weight: 650;
    color: var(--ds-ink);
    letter-spacing: -.01em;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.sidebar-toggle-header {
    border-radius: var(--radius-btn, 10px);
}

/* ── settings: a page of its own, not a modal (owner, 18 Oct 2026) ──────── */
.settings-modal-overlay.ds-settings-page {
    top: var(--header-height, 56px);
    background: var(--ds-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    align-items: stretch;
    justify-content: stretch;
    z-index: 900;
    transition: opacity .2s ease, visibility 0s .2s;
}

.settings-modal-overlay.ds-settings-page.show {
    transition: opacity .2s ease, visibility 0s;
}

.ds-settings-page .settings-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--ds-bg);
    transform: none;
}

.ds-settings-page .settings-modal-header {
    flex: none;
    justify-content: flex-start;
    gap: 18px;
    padding: 16px 32px;
    background: none;
    color: var(--ds-ink);
    border-bottom: 1px solid var(--ds-line);
}

.ds-settings-page .settings-modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.ds-settings-page .settings-modal-close {
    width: auto;
    height: 36px;
    gap: 8px;
    padding: 0 12px 0 10px;
    border: 1px solid var(--ds-line);
    border-radius: var(--radius-btn, 10px);
    background: var(--ds-surface);
    color: var(--ds-ink-2);
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
}

.ds-settings-page .settings-modal-close:hover {
    background: var(--ds-surface-2);
    color: var(--ds-ink);
    transform: none;
}

.ds-settings-page .settings-modal-body {
    flex: 1;
    height: auto;
    max-height: none;
    min-height: 0;
}

.ds-settings-page .settings-sidebar {
    width: 248px;
    flex: none;
    padding: 20px 14px;
    background: var(--ds-bg);
    border-right: 1px solid var(--ds-line);
}

.ds-settings-page .settings-nav {
    gap: 2px;
}

.ds-settings-page .settings-nav-item {
    min-height: 40px;
    padding: 0 12px;
    gap: 11px;
    border-radius: var(--radius-btn, 10px);
    color: var(--ds-ink-2);
    font-size: 14px;
    font-weight: 550;
}

.ds-settings-page .settings-nav-item i {
    width: 18px;
    color: var(--ds-muted);
}

.ds-settings-page .settings-nav-item:hover {
    background: rgba(var(--ds-ink-rgb), 0.05);
    color: var(--ds-ink);
}

.ds-settings-page .settings-nav-item.active {
    background: var(--ds-accent-soft);
    color: var(--ds-ink);
}

.ds-settings-page .settings-nav-item.active i {
    color: var(--ds-accent-text);
}

.ds-settings-page .settings-content-area {
    padding: 36px 48px 64px;
}

.ds-settings-page .settings-panel {
    max-width: 920px;
}

.ds-settings-page .settings-panel > h3 {
    font-size: 26px;
    font-weight: 560;
    letter-spacing: -.035em;
    margin-bottom: 8px;
}

.ds-settings-page .settings-panel-intro {
    color: var(--ds-muted);
    margin-bottom: 28px;
}

.ds-settings-page .settings-item {
    padding: 18px 20px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: 14px;
}

.ds-settings-page .settings-info-box {
    background: var(--ds-accent-soft);
    border-color: rgba(var(--ds-accent-rgb), 0.24);
}

@media (max-width: 760px) {
    .ds-settings-page .settings-modal-header { padding: 12px 16px; }
    .ds-settings-page .settings-modal-body { flex-direction: column; }
    .ds-settings-page .settings-sidebar { width: 100%; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--ds-line); overflow-x: auto; }
    .ds-settings-page .settings-nav { flex-direction: row; }
    .ds-settings-page .settings-nav-item { width: auto; white-space: nowrap; }
    .ds-settings-page .settings-content-area { padding: 24px 16px 48px; }
}

/* the action buttons and their grouped menus over a picture in the grid: dark glass, white icons */
.grid-item-overlay .btn-icon,
.grid-item-overlay .result-group-menu,
.gallery-item .btn-icon,
.gallery-item .upscale-btn,
.result-overlay .upscale-btn {
    color: var(--ds-on-media);
}

/* the full-screen viewer's toolbar is a surface of the palette, not glass: its icons are the ink (21 Oct) */
.fullscreen-actions .btn-icon,
.fullscreen-actions .upscale-btn {
    color: var(--ds-ink);
}

.grid-item-overlay .result-group-menu {
    background: rgba(var(--ds-media-glass-rgb), 0.82);
    border-color: rgba(var(--ds-on-media-rgb), 0.12);
}

/* ── a brand's brief as cards (PLAN-LINKTEN-MARKA rev 2) ────────────────── */
.ubp-brief-cards {
    display: grid;
    gap: 12px;
    margin: 12px 0;
}

.ubp-brief-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--ds-line);
    border-radius: 12px;
    background: var(--ds-surface);
}

.ubp-brief-card.is-off {
    opacity: .55;
}

.ubp-brief-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ubp-brief-card-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

.ubp-brief-card-scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ubp-brief-card-scope .ubp-chip,
.ubp-chip-quiet {
    appearance: none;
    border: 1px solid var(--ds-line);
    border-radius: var(--radius-chip, 999px);
    background: transparent;
    color: var(--ds-ink-2);
    font: inherit;
    font-size: 12px;
    padding: 3px 10px;
    cursor: pointer;
}

.ubp-chip-quiet {
    cursor: default;
    color: var(--ds-muted);
    white-space: nowrap;
}

.ubp-brief-card-scope .ubp-chip.is-on {
    border-color: var(--ds-accent);
    background: var(--ds-accent-soft);
    color: var(--ds-ink);
}

.ubp-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ds-muted);
    white-space: nowrap;
}

.ubp-brief-card-more summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ds-muted);
}

.ubp-brief-card-target {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

@media (max-width: 760px) {
    .ubp-brief-card-target { grid-template-columns: 1fr; }
}

.ubp-brief-preview {
    margin-top: 16px;
    padding: 14px;
    border: 1px dashed var(--ds-line-strong);
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.ubp-brief-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.ubp-brief-preview-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--ds-line);
}

.ubp-brief-line {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--ds-ink);
}

.ubp-brief-line small {
    color: var(--ds-muted);
}

.ubp-card-subtitle {
    margin-top: 22px;
}

/* ── a brand's collections bar and a non-product collection's items ─────── */
.ubp-collections {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.ubp-collection-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--ds-line);
    border-radius: var(--radius-btn, 10px);
    background: transparent;
    color: var(--ds-ink-2);
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    cursor: pointer;
}

.ubp-collection-tab small {
    color: var(--ds-muted);
    font-variant-numeric: tabular-nums;
}

.ubp-collection-tab.is-active {
    border-color: var(--ds-accent);
    background: var(--ds-accent-soft);
    color: var(--ds-ink);
}

.ubp-collection-tab.is-off {
    opacity: .55;
}

.ubp-collection-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--ds-line);
    border-radius: 12px;
    background: var(--ds-surface);
}

.ubp-collection-form .ubp-input[type="text"] {
    flex: 1;
    min-width: 180px;
}

.ubp-collection-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px 0;
}

.ubp-collection-item {
    margin: 0;
    display: grid;
    gap: 6px;
}

.ubp-collection-item img,
.ubp-collection-item .ubp-avatar {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    background: var(--ds-surface-2);
}

.ubp-collection-item figcaption {
    display: grid;
    gap: 1px;
    font-size: 13px;
}

.ubp-collection-item small {
    color: var(--ds-muted);
}

/* ── a site's lists: what it states beside what was found (rev 2 F1) ────── */
.ubp-import-report {
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--ds-line);
    border-radius: 12px;
    background: var(--ds-surface);
}

.ubp-import-report summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 13.5px;
}

.ubp-import-report table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.ubp-import-report th,
.ubp-import-report td {
    padding: 5px 6px;
    text-align: left;
    border-bottom: 1px solid var(--ds-line);
}

.ubp-import-report th {
    color: var(--ds-muted);
    font-weight: 550;
}

.ubp-import-report tr.is-short td {
    color: var(--ds-warn);
}

.ubp-import-report small {
    color: var(--ds-muted);
}

/* ── a brand filled from its sources (rev 2 F4) ─────────────────────────── */
.ubp-source-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 10px 0;
}

.ubp-source-inputs .ubp-input {
    flex: 1;
    min-width: 220px;
}

.ubp-file {
    cursor: pointer;
}

.ubp-source-list {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.ubp-source-row {
    display: grid;
    grid-template-columns: 20px 160px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--ds-line);
    border-radius: 10px;
    background: var(--ds-surface);
    cursor: pointer;
}

.ubp-source-row.is-locked {
    opacity: .6;
    cursor: default;
}

.ubp-source-field {
    display: grid;
    font-weight: 600;
    font-size: 13.5px;
}

.ubp-source-field small,
.ubp-source-value small {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--ds-muted);
}

.ubp-source-value {
    font-size: 13.5px;
    color: var(--ds-ink);
    min-width: 0;
    overflow-wrap: anywhere;
}

.ubp-source-logo {
    height: 28px;
    width: auto;
    vertical-align: middle;
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--ds-surface-2);
}

.ubp-source-thumb {
    width: 64px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 4px;
}

.ubp-source-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 4px -2px 6px;
    border-radius: 4px;
    background: var(--sw);
    box-shadow: inset 0 0 0 1px rgba(var(--ds-ink-rgb), 0.2);
}

@media (max-width: 760px) {
    .ubp-source-row { grid-template-columns: 20px 1fr; }
    .ubp-source-value { grid-column: 2; }
}

/* ============================================================================
   A phone (owner, 22 Oct: "mobilde de uygulama gibi kullanabilmeliyiz")
   ============================================================================ */

/* The card's actions on a touch screen: one "⋯" in view, its whole menu on a tap; the hover row of
   six buttons (it covered a small card's whole picture) is not used there. */
.ds-card-more {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 6;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ds-media-glass-rgb), 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ds-on-media);
    font-size: 13px;
    cursor: pointer;
}

@media (hover: none), (max-width: 760px) {
    #gridContainer .grid-item .grid-item-overlay {
        display: none !important;
    }

    #gridContainer .grid-item .ds-card-more {
        display: inline-flex;
    }

    /* the model's name is read in the viewer and the menu; on a small card it hid the picture's top */
    #gridContainer .grid-item .model-badge {
        display: none;
    }
}

@media (max-width: 768px) {
    /* The rail is off-canvas at 768 px and below (styles.css; the header's menu opens it): the content
       takes the width. Its 64 px margin stayed, the cards were squeezed and the bar centred on the wrong
       width. The same breakpoint as the rail's, or 761–768 px kept a margin for a rail that is not there. */
    .main-content,
    .main-content.expanded {
        margin-left: 0;
        width: 100vw;
        max-width: 100vw;
    }
}

@media (max-width: 760px) {

    /* The bar: centred on the screen, inside its edges and the phone's safe area. */
    #creativeModeInput {
        left: 50% !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* The Agent's strip in the bar (22 Oct): an approval takes a row of its own under the
       title — budget at the left, approve at the right; a running run's stop stays on the
       title's row as an icon. The unfolded detail may take up to half the screen. */
    #unifiedAgentCard[data-state="awaiting_approval"] .unified-agent-card-actions {
        flex: 1 0 100%;
    }

    #unifiedAgentCard[data-state="awaiting_approval"] .agent-run-footer {
        width: 100%;
    }

    /* With the approval on a row of its own the chat icon's room is kept on the title's
       row only — after its last button — so the approval row has the bar's whole width. */
    body[data-creative-folder="open"] #unifiedAgentCard[data-state="awaiting_approval"] .unified-agent-card-head {
        padding-right: 2px;
    }

    body[data-creative-folder="open"] #unifiedAgentCard[data-state="awaiting_approval"] .unified-agent-card-detail-btn:has(+ .unified-agent-card-close[hidden]),
    body[data-creative-folder="open"] #unifiedAgentCard[data-state="awaiting_approval"] .unified-agent-card-close:not([hidden]) {
        margin-right: 28px;
    }

    #unifiedAgentCard[data-state="awaiting_approval"] .agent-approve {
        margin-left: auto;
    }

    #unifiedAgentCard .agent-budget-approval label {
        display: none;
    }

    #unifiedAgentCard .agent-budget-input {
        width: 108px;
    }

    #unifiedAgentCard .agent-budget-input::before {
        content: 'Tavan';
        flex: 0 0 auto;
        color: rgba(var(--ds-ink-rgb), 0.5);
        font-size: 10.5px;
    }

    #unifiedAgentCard .agent-cancel-run:has(i) {
        width: 30px;
        padding: 0;
        justify-content: center;
    }

    #unifiedAgentCard .agent-cancel-run i + span {
        display: none;
    }

    #unifiedAgentCard .unified-agent-card-detail {
        max-height: min(50vh, 460px, var(--uac-detail-room, 50vh));
    }
}

@media (max-width: 760px) {
    /* "Yeni Proje" on a phone: a round button in the corner, not a card over the folders. */
    .creative-add-project-fixed {
        left: auto !important;
        right: 16px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        transform: none !important;
    }

    .creative-add-project-fixed .creative-add-project-btn {
        min-width: 0 !important;
        min-height: 0 !important;
        width: 54px;
        height: 54px;
        padding: 0 !important;
        border-radius: 50% !important;
        gap: 0 !important;
        font-size: 0 !important;
        background: var(--ds-accent) !important;
        color: var(--ds-accent-ink) !important;
        box-shadow: var(--ds-shadow-md);
    }

    .creative-add-project-fixed .creative-add-project-btn span,
    .creative-add-project-fixed .creative-add-project-btn .creative-add-project-label {
        display: none;
    }

    .creative-add-project-fixed .creative-add-project-btn i {
        color: var(--ds-accent-ink) !important;
        font-size: 20px;
    }

    /* A row that scrolls sideways (the brands, a folder's subfolders, a page's sections) says there is more. */
    .unified-brand-bar,
    .creative-workspace-collections,
    .ubp-nav {
        -webkit-mask-image: linear-gradient(90deg, var(--ds-ink) calc(100% - 28px), transparent);
        mask-image: linear-gradient(90deg, var(--ds-ink) calc(100% - 28px), transparent);
    }
}

/* ============================================================================
   A card's versions (owner, 22 Oct: "the area is right, but far too big — a small label on the
   picture, and on hover it opens, not covering the picture")
   ============================================================================ */

/* At rest one small chip under the model's name; the card's hover, a keyboard focus or a click on the
   chip opens a narrow column under it at the card's left edge (~51 px wide: well under a third of a
   card); its thumbnails scroll when the card is short, and on a short card revert and compare sit side
   by side. The space it stands in lets clicks through. A phone, or a card too short for the column,
   opens it as a small row beside the card (below). */
.ds-versions {
    position: absolute;
    top: 8px;
    left: 8px;
    bottom: 8px;
    z-index: 5;
    width: 64px;
    container: ds-versions / size;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
}

.model-badge ~ .ds-versions {
    top: 32px;
}

.ds-versions > * {
    pointer-events: auto;
}

.ds-versions-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px 0 7px;
    border: 1px solid rgba(var(--ds-on-media-rgb), 0.14);
    border-radius: 999px;
    background: rgba(var(--ds-media-glass-rgb), 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ds-on-media);
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ds-versions-chip i {
    font-size: 9.5px;
    opacity: 0.85;
}

.ds-versions-chip small {
    margin-left: -3px;
    font-size: 10px;
    font-weight: 500;
    opacity: 0.62;
}

.ds-versions-chip:hover,
.ds-versions.is-open .ds-versions-chip {
    background: rgba(var(--ds-media-glass-rgb), 0.88);
}

.ds-versions-chip:focus-visible,
.ds-versions-thumb:focus-visible,
.ds-versions-btn:focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 2px;
}

.ds-versions-tray {
    display: none;
    flex: 0 1 auto;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border: 1px solid rgba(var(--ds-on-media-rgb), 0.12);
    border-radius: 12px;
    background: rgba(var(--ds-media-glass-rgb), 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(var(--ds-media-glass-rgb), 0.28);
}

.ds-versions.is-open .ds-versions-tray,
.ds-versions:not(.is-dismissed):has(:focus-visible) .ds-versions-tray {
    display: flex;
    animation: ds-versions-in 0.14s ease-out;
}

/* a mouse opens it with the card's hover; a phone or a narrow window only with the chip */
@media (hover: hover) and (min-width: 761px) {
    .grid-item:hover .ds-versions-tray,
    .carousel-item:hover .ds-versions-tray {
        display: flex;
        animation: ds-versions-in 0.14s ease-out;
    }
}

@keyframes ds-versions-in {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
}

.ds-versions-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 40px;
    flex: 0 1 auto;
    padding: 3px;
    overflow-y: auto;
    scrollbar-width: none;
}

.ds-versions-list::-webkit-scrollbar {
    display: none;
}

.ds-versions-thumb {
    position: relative;
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(var(--ds-on-media-rgb), 0.08);
    cursor: pointer;
}

.ds-versions-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.15s ease;
}

.ds-versions-thumb:hover img {
    transform: scale(1.06);
}

.ds-versions-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 1px solid rgba(var(--ds-on-media-rgb), 0.3);
    border-radius: inherit;
    pointer-events: none;
}

.ds-versions-thumb.original::before {
    border-style: dashed;
    border-color: rgba(var(--ds-on-media-rgb), 0.75);
}

.ds-versions-thumb.active::before {
    border: 2px solid var(--ds-accent);
}

.ds-versions-num {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 2;
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    border-radius: 999px;
    background: rgba(var(--ds-media-glass-rgb), 0.8);
    color: var(--ds-on-media);
    font-size: 9px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

.ds-versions-thumb.active .ds-versions-num {
    background: var(--ds-accent);
    color: var(--ds-accent-ink);
}

.ds-versions-actions {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 5px;
    border-top: 1px solid rgba(var(--ds-on-media-rgb), 0.14);
}

.ds-versions-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--ds-on-media-rgb), 0.1);
    color: var(--ds-on-media);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ds-versions-btn:hover {
    background: rgba(var(--ds-on-media-rgb), 0.22);
}

.ds-versions-btn.is-undo:hover {
    background: rgba(var(--ds-danger-rgb), 0.22);
    color: var(--ds-danger);
}

/* a short card (six columns): one thumbnail in view, revert and compare in a row */
@container ds-versions (max-height: 170px) {
    .ds-versions-actions {
        flex-direction: row;
    }

    .ds-versions-btn {
        width: 24px;
        height: 24px;
    }
}

@media (hover: none), (max-width: 760px) {
    /* the model's name is hidden on a phone's card (above): the chip takes its corner */
    #gridContainer .grid-item .ds-versions {
        top: 6px;
        left: 6px;
        bottom: 6px;
    }

    .ds-versions-chip {
        height: 24px;
    }

    .ds-versions-chip small {
        display: none;
    }
}

/* a card too short even for that (a wide picture in six columns): no column in it — the chip opens
   the row beside the card, as on a phone (_studio_render.js: the same 112 px) */
@container ds-versions (max-height: 111px) {
    .ds-versions-tray {
        display: none !important;
    }
}

/* the phone's row: on the page under the card (a menu, as the card's "⋯" opens one) */
.ds-versions-popover {
    position: fixed;
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100vw - 16px);
    padding: 5px;
    border: 1px solid rgba(var(--ds-on-media-rgb), 0.12);
    border-radius: 14px;
    background: rgba(var(--ds-media-glass-rgb), 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 26px rgba(var(--ds-media-glass-rgb), 0.35);
    animation: ds-versions-in 0.14s ease-out;
}

.ds-versions-popover .ds-versions-list {
    flex-direction: row;
    min-height: 0;
    max-width: calc(100vw - 110px);
    overflow-x: auto;
    overflow-y: hidden;
}

.ds-versions-popover .ds-versions-thumb {
    width: 38px;
    height: 38px;
}

.ds-versions-popover .ds-versions-actions {
    flex-direction: row;
    padding: 0 0 0 6px;
    border-top: 0;
    border-left: 1px solid rgba(var(--ds-on-media-rgb), 0.14);
}

.ds-versions-popover .ds-versions-btn {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .ds-versions-tray,
    .ds-versions.is-open .ds-versions-tray,
    .ds-versions-popover {
        animation: none !important;
    }
}

/* Kaynaklar: the brand memory index (phase 1) — filters, role headings. */
.ubp-mem-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 12px;
}

.ubp-mem-filters .ubp-chip {
    appearance: none;
    border: 1px solid var(--ds-line);
    border-radius: var(--radius-chip, 999px);
    background: transparent;
    color: var(--ds-ink-2);
    font: inherit;
    font-size: 12px;
    padding: 3px 10px;
    cursor: pointer;
}

.ubp-mem-filters .ubp-chip.is-on {
    border-color: var(--ds-accent);
    background: var(--ds-accent-soft);
    color: var(--ds-ink);
}

.ubp-mem-sub,
.ubp-mem-role {
    margin: 16px 0 6px;
    font-size: 13px;
    color: var(--ds-ink);
}

.ubp-mem-role {
    font-weight: 500;
    color: var(--ds-muted);
}

.ubp-mem-sub small,
.ubp-mem-role small {
    color: var(--ds-muted);
}

/* Kaynaklar phase 2–3: a row with its overrides, folded category groups, learned entries. */
.ubp-mem-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ubp-mem-row > .ubp-item {
    flex: 1 1 auto;
    min-width: 0;
}

.ubp-mem-row.is-archived {
    opacity: 0.6;
}

.ubp-mem-acts {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.ubp-mem-acts .ubp-mini {
    max-width: 140px;
}

.ubp-mem-acts [aria-pressed="true"] {
    color: var(--ds-accent);
}

.ubp-mem-pin {
    font-size: 10px;
    color: var(--ds-accent);
}

.ubp-mem-cat.is-folded .ubp-mem-cat-body {
    display: none;
}

.ubp-mem-learned {
    padding: 6px 0;
    border-bottom: 1px solid var(--ds-line);
}

.ubp-mem-learned > .ubp-person-name {
    flex: 1 1 auto;
    min-width: 0;
}

.ubp-mem-learned.is-asked {
    border-left: 2px solid var(--ds-accent);
    padding-left: 8px;
}

.ubp-mem-reads .ubp-link {
    font: inherit;
}

@media (max-width: 640px) {
    .ubp-mem-row {
        flex-wrap: wrap;
    }

    .ubp-mem-acts {
        width: 100%;
        justify-content: flex-end;
    }
}

/* mobile folder grid (25 Oct) ---------------------------------------------------------------
   The Creative folder's picture grid on a phone: tap opens (after the double-tap window), a double
   tap selects, then a tap toggles; "⋯" top right is its own target; the small select control sits
   bottom right and shows only on selected cards; two fingers change the columns. */

.ds-card-select {
    display: none;
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 6;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1.5px solid rgba(var(--ds-on-media-rgb), 0.85);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ds-media-glass-rgb), 0.42);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: transparent;
    font-size: 11px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* the hit area is 40 px: a padding ring around the 24 px circle */
.ds-card-select::before {
    content: "";
    position: absolute;
    inset: -8px;
}

.ds-card-select[aria-pressed="true"] {
    border-color: var(--ds-on-media);
    background: var(--ds-accent);
    color: var(--ds-accent-ink);
}

@media (hover: none), (max-width: 760px) {
    [data-app-mode="creative"] .grid-container {
        gap: 8px;
        padding: 8px 8px 120px 8px;
    }

    [data-app-mode="creative"] .grid-container .grid-item {
        border-radius: 8px;
    }

    #gridContainer .grid-item .ds-card-more {
        width: 32px;
        height: 32px;
        top: 5px;
        right: 5px;
    }

    /* hidden unless the card is selected */
    #gridContainer .grid-item.creative-selected .ds-card-select {
        display: inline-flex;
        right: 6px;
        bottom: 6px;
    }

    /* the tick moves into the select control: the old one sat over the "⋯" */
    [data-app-mode="creative"] .grid-container .grid-item.creative-selected::before {
        display: none;
    }

    /* two fingers change the columns; the page itself does not zoom (nor on a double tap) */
    #gridContainer {
        touch-action: pan-y;
    }

    /* the rows slide to their new size while a pinch goes on */
    #gridContainer.is-pinching .grid-item {
        transition: width 0.18s ease, height 0.18s ease, flex-basis 0.18s ease,
            max-width 0.18s ease, min-height 0.18s ease;
    }
}

/* the drag image for pictures dragged to the bar: a small stack and a count, not the card */
.creative-drag-preview.ds-drag-ghost {
    display: block;
    width: 60px;
    height: 60px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.ds-drag-ghost-stack {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
}

.ds-drag-ghost-stack > span:not(.ds-drag-ghost-face) {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: var(--ds-surface-2);
    border: 1px solid var(--ds-line-strong);
}

.ds-drag-ghost-stack > span:nth-child(1) {
    transform: translate(8px, 8px);
    opacity: 0.55;
}

.ds-drag-ghost-stack > span:nth-child(2) {
    transform: translate(4px, 4px);
    opacity: 0.8;
}

.ds-drag-ghost-face {
    position: absolute;
    inset: 0;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--ds-surface-2);
    border: 1px solid var(--ds-line-strong);
    box-shadow: var(--ds-shadow-md);
}

.ds-drag-ghost-count {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ds-accent);
    color: var(--ds-accent-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    #gridContainer.is-pinching .grid-item {
        transition: none;
    }
}
/* end mobile folder grid (25 Oct) */

/* mobile chrome (25 Oct): the picture viewer's bar and stage on a phone */
.fullscreen-actions .fs-menu-wrap { display: none; }
.fullscreen-inline-edit .fs-tools-wrap { display: none; }

@media (max-width: 768px) {
    /* the stage: the picture between a thin top row (the version pills) and the bar, edge to edge */
    .fullscreen-modal .fullscreen-content:not(.has-prompt-info) {
        padding: calc(52px + env(safe-area-inset-top, 0px)) 0 calc(80px + env(safe-area-inset-bottom, 0px));
    }

    .fullscreen-modal .fullscreen-content:not(.has-prompt-info) #fullscreenImageArea,
    .fullscreen-modal .fullscreen-content:not(.has-prompt-info) .fullscreen-img-wrapper {
        width: 100%;
        max-width: 100%;
    }

    /* a picture narrower than the screen (a tall one) stands in the middle */
    .fullscreen-modal .fullscreen-content:not(.has-prompt-info) .fullscreen-img-wrapper {
        text-align: center;
    }

    /* the picture's own box, not a letterboxed one: the rounded corners sit on it in every aspect
       (25 Oct: a 9:16 picture showed square ones) */
    .fullscreen-modal .fullscreen-content:not(.has-prompt-info) #fullscreenImg {
        width: auto;
        height: auto;
        border-radius: 12px;
        max-width: 100%;
        max-height: calc(100vh - 140px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 140px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        object-fit: contain;
    }

    .fullscreen-modal .fullscreen-close {
        top: calc(8px + env(safe-area-inset-top, 0px));
        right: 8px;
        width: 40px;
        height: 40px;
    }

    .fullscreen-modal .fullscreen-nav {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        opacity: 0.85;
    }

    .fullscreen-modal .fullscreen-prev { left: 6px; }
    .fullscreen-modal .fullscreen-next { right: 6px; }

    /* the bar (26 Oct): the desktop's pill — edit, perspective, download, share | 2x 4x — centred,
       never wider than the screen; the zoom buttons and the fullscreen toggle are the fingers' */
    .fullscreen-modal .fullscreen-actions {
        left: 50% !important;
        right: auto !important;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        transform: translateX(-50%) !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px);
        height: 52px;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 4px;
        padding: 6px 8px;
        box-sizing: border-box;
    }

    .fullscreen-modal .fullscreen-normal-actions {
        gap: 4px;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .fullscreen-modal .fullscreen-normal-actions > #fullscreenZoomOut,
    .fullscreen-modal .fullscreen-normal-actions > #fullscreenZoomIn,
    .fullscreen-modal .fullscreen-normal-actions > #fullscreenResetZoom,
    .fullscreen-modal .fullscreen-normal-actions > .fullscreen-divider:first-of-type {
        display: none !important;
    }

    .fullscreen-modal .fullscreen-normal-actions > .fullscreen-divider { margin: 0 4px; flex: 0 0 1px; }
    .fullscreen-modal .fullscreen-normal-actions > * { flex-shrink: 0; }

    /* 2x | 4x as one segmented control */
    .fullscreen-modal .fs-upscale-seg {
        gap: 0;
        padding: 2px;
        border-radius: 999px;
        background: rgba(var(--ds-ink-rgb), 0.06);
    }

    .fullscreen-modal .fs-upscale-seg .upscale-btn {
        width: 34px;
        height: 32px;
        background: transparent !important;
        border-radius: 999px;
    }

    .fullscreen-modal .fs-upscale-seg .upscale-btn + .upscale-btn { box-shadow: inset 1px 0 0 rgba(var(--ds-ink-rgb), 0.12) !important; }

    /* "⋯" holds what a picture rarely has; with nothing in it, it is not there */
    .fullscreen-modal .fullscreen-actions .fs-menu-wrap { display: block; position: relative; }
    .fullscreen-modal .fullscreen-actions .fs-menu-wrap.is-empty { display: none; }

    .fs-menu-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--ds-muted);
        font: inherit;
        cursor: pointer;
    }

    .fs-menu-trigger.is-open { background: rgba(var(--ds-accent-rgb), 0.2); color: var(--ds-ink); }

    .fs-menu {
        position: absolute;
        bottom: calc(100% + 14px);
        right: 0;
        min-width: 220px;
        max-width: calc(100vw - 16px);
        padding: 6px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: var(--ds-surface);
        border: 1px solid rgba(var(--ds-ink-rgb), 0.1);
        border-radius: 16px;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
        z-index: 10030;
    }

    .fs-menu[hidden] { display: none; }

    /* a row per action, its name from the button's own title */
    .fullscreen-actions .fs-menu .btn-icon {
        width: 100%;
        height: 44px;
        min-height: 44px;
        justify-content: flex-start;
        gap: 12px;
        padding: 0 12px;
        margin: 0 !important;
        border-radius: 12px;
        background: transparent !important;
        color: var(--ds-ink) !important;
        font-size: 0.9rem;
        box-shadow: none !important;
        transform: none !important;
    }

    .fullscreen-actions .fs-menu .btn-icon:hover { background: rgba(var(--ds-ink-rgb), 0.08) !important; }
    .fullscreen-actions .fs-menu .btn-icon::after { content: attr(title); font-weight: 500; white-space: nowrap; text-align: left; }
    .fullscreen-actions .fs-menu .btn-icon i { width: 20px; text-align: center; }
    .fullscreen-actions .fs-menu .btn-icon span { display: none; }

    /* the edit bar (26 Oct): Araçlar | the field | send | ✕, the width of the screen, above the keyboard */
    .fullscreen-modal .fullscreen-actions.is-editing {
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
        width: auto !important;
        max-width: none;
    }

    .fullscreen-modal .fullscreen-inline-edit {
        gap: 6px;
        padding: 0 !important;
        min-width: 0;
        justify-content: flex-start !important;
    }

    .fullscreen-modal .fullscreen-inline-edit > .fs-edit-divider { display: none; }
    .fullscreen-modal .fullscreen-inline-edit .fs-tools-wrap { display: block; position: relative; flex: 0 0 auto; }

    .fullscreen-modal .fullscreen-inline-input {
        flex: 1 1 auto;
        min-width: 0 !important;
        max-width: none !important;
        width: 0;
        height: 38px;
        padding: 0 14px;
        border-radius: 999px;
        background: rgba(var(--ds-ink-rgb), 0.08);
    }

    .fullscreen-modal .fullscreen-inline-send,
    .fullscreen-modal .fullscreen-inline-cancel { width: 38px; height: 38px; }

    .fs-tools-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: none;
        border-radius: 50%;
        background: rgba(var(--ds-ink-rgb), 0.08);
        color: var(--ds-ink);
        cursor: pointer;
    }

    .fs-tools-trigger.is-open { background: rgba(var(--ds-accent-rgb), 0.2); }

    .fs-tools-sheet {
        position: absolute;
        bottom: calc(100% + 14px);
        left: -2px;
        width: min(260px, calc(100vw - 24px));
        padding: 6px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: var(--ds-surface);
        border: 1px solid rgba(var(--ds-ink-rgb), 0.12);
        border-radius: 16px;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
        z-index: 10030;
    }

    .fs-tools-sheet[hidden] { display: none; }

    /* a row per tool, its name from data-fs-label */
    .fs-tools-sheet > .fs-edit-perspective-btn,
    .fs-tools-sheet > .fs-edit-tool-btn {
        width: 100%;
        height: 44px;
        border-radius: 12px;
        justify-content: flex-start;
        gap: 12px;
        padding: 0 12px;
        color: var(--ds-ink);
        font-size: 0.9rem;
    }

    .fs-tools-sheet > .fs-edit-tool-btn.hidden { display: none !important; }
    .fs-tools-sheet > [data-fs-label]::after { content: attr(data-fs-label); font-weight: 500; white-space: nowrap; }
    .fs-tools-sheet > #fsSmartEditToggle.active::after { content: attr(data-fs-label) " · açık"; }
    .fs-tools-sheet > [data-fs-label] i { width: 20px; text-align: center; }

    .fs-tools-sheet > .fs-edit-model-selector { display: block; }
    .fs-tools-sheet .fs-edit-model-btn {
        width: 100%;
        height: 44px;
        border-radius: 12px;
        padding: 0 12px;
        gap: 12px;
        font-size: 0.9rem;
        background: rgba(var(--ds-ink-rgb), 0.06);
    }

    .fs-tools-sheet .fs-edit-model-btn i:first-child { width: 20px; text-align: center; }
    .fs-tools-sheet .fs-edit-model-name { max-width: none; flex: 1 1 auto; text-align: left; }

    /* the model list opens inside the sheet, under its button, and scrolls */
    .fs-tools-sheet .fs-edit-model-dropdown {
        position: static;
        min-width: 0;
        max-height: min(40vh, 280px);
        overflow-y: auto;
        margin-top: 4px;
        padding: 4px 0;
        background: var(--ds-bg);
        border: 1px solid rgba(var(--ds-ink-rgb), 0.1);
        box-shadow: none;
        -webkit-overflow-scrolling: touch;
    }

    .fs-tools-sheet .fs-edit-model-option { color: var(--ds-ink); }
    .fs-tools-sheet .fs-edit-model-option .model-capability-icons { color: var(--ds-muted); }

    /* the keyboard is up: the bar rides on it (utils/keyboard-inset.js) */
    html.ds-keyboard-open .fullscreen-modal .fullscreen-actions {
        bottom: calc(8px + var(--ds-keyboard-inset, 0px)) !important;
    }

    /* the zoom chip clears the bar while the chrome is in view */
    .fullscreen-modal .fullscreen-zoom-indicator {
        right: 12px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .fullscreen-modal:not(.is-chrome-hidden) .fullscreen-zoom-indicator {
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    .fullscreen-modal .fs-versions { max-width: calc(100vw - 24px); }
}

/* the narrowest phones (320–360): the same row, a little tighter */
@media (max-width: 360px) {
    .fullscreen-modal .fullscreen-actions { padding: 6px; gap: 2px; }
    .fullscreen-modal .fullscreen-normal-actions { gap: 2px; }
    .fullscreen-modal .fullscreen-normal-actions > .btn-icon:not(.edit-action):not(.upscale-btn),
    .fullscreen-modal .fs-menu-trigger { width: 34px; height: 34px; }
    .fullscreen-modal .fullscreen-normal-actions > .edit-action { margin: 0 2px; }
    .fullscreen-modal .fs-upscale-seg .upscale-btn { width: 32px; }
    .fullscreen-modal .fullscreen-inline-edit { gap: 4px; }
}

/* A phone: no arrows (a swipe turns the picture) and no ✕ (a swipe down or Back closes it). */
@media (max-width: 768px) and (pointer: coarse) {
    .fullscreen-modal .fullscreen-nav,
    .fullscreen-modal .fullscreen-close {
        display: none !important;
    }
}
/* end mobile chrome (25 Oct) */

/* photos viewer (26 Oct): chrome that a tap hides, version pills, the compare chain — every width */
.fullscreen-modal .fs-upscale-seg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fullscreen-modal .fullscreen-close,
.fullscreen-modal .fullscreen-nav {
    transition: opacity 0.18s ease, visibility 0s linear 0s, background 0.3s ease, transform 0.3s ease;
}

.fullscreen-modal .fullscreen-actions,
.fullscreen-modal .fullscreen-info,
.fullscreen-modal .fullscreen-edit-history,
.fullscreen-modal .fullscreen-social-format-badge,
.fullscreen-modal .fs-versions {
    transition: opacity 0.18s ease, visibility 0s linear 0s;
}

.fullscreen-modal.is-chrome-hidden :is(.fullscreen-close, .fullscreen-nav, .fullscreen-actions, .fullscreen-info,
    .fullscreen-edit-history, .fullscreen-social-format-badge, .fs-versions),
.fullscreen-modal.is-dismissing :is(.fullscreen-close, .fullscreen-nav, .fullscreen-actions, .fullscreen-info,
    .fullscreen-edit-history, .fullscreen-social-format-badge, .fs-versions) {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none !important;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

/* the version pills: v1 v2 v3, the one on show in the accent, then "Karşılaştır" */
.fs-versions {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10003;
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100vw - 160px);
    padding: 4px;
    border-radius: 999px;
    background: var(--ds-surface);
    border: 1px solid rgba(var(--ds-ink-rgb), 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

.fs-versions[hidden] { display: none; }

.fs-versions-pills {
    display: flex;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
}

.fs-versions-pills::-webkit-scrollbar { display: none; }

.fs-version-pill {
    flex: 0 0 auto;
    min-width: 36px;
    height: 30px;
    padding: 0 10px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--ds-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.fs-version-pill:hover { background: rgba(var(--ds-ink-rgb), 0.08); color: var(--ds-ink); }
.fs-version-pill.is-current { background: var(--ds-accent); color: var(--ds-accent-ink); }

.fs-version-compare {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-left: 2px;
    border: none;
    border-radius: 50%;
    background: rgba(var(--ds-ink-rgb), 0.08);
    color: var(--ds-ink);
    cursor: pointer;
    font-size: 0.8rem;
}

.fs-version-compare:hover { background: rgba(var(--ds-ink-rgb), 0.16); }

.fs-version-pill:focus-visible,
.fs-version-compare:focus-visible,
.fs-compare-close:focus-visible,
.fs-compare-frame:focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 2px;
}

/* the compare chain */
.fs-compare {
    position: absolute;
    inset: 0;
    z-index: 10040;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgb(var(--ds-media-glass-rgb));
    opacity: 0;
    transition: opacity 0.18s ease;
}

.fs-compare.is-open { opacity: 1; }

.fs-compare-top {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.fs-compare-labels {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--ds-surface);
    border: 1px solid rgba(var(--ds-ink-rgb), 0.12);
    color: var(--ds-ink);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fs-compare-sep { color: var(--ds-muted); font-weight: 400; }

.fs-compare-close {
    position: absolute;
    right: max(12px, env(safe-area-inset-right, 0px));
    top: 0;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(var(--ds-ink-rgb), 0.12);
    border-radius: 50%;
    background: var(--ds-surface);
    color: var(--ds-ink);
    cursor: pointer;
    pointer-events: auto;
}

.fs-compare-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.fs-compare-frame {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: ew-resize;
    outline: none;
}

.fs-compare-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}

.fs-compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 2px;
    z-index: 20;
    background: var(--ds-on-media);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
    will-change: transform;
    pointer-events: none;
}

.fs-compare-handle {
    position: absolute;
    top: 50%;
    left: 1px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ds-surface);
    color: var(--ds-ink);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    font-size: 0.85rem;
    transform: translate(-50%, -50%);
}

.fs-compare-frame.is-dragging .fs-compare-handle { background: var(--ds-accent); color: var(--ds-accent-ink); }

.fs-compare-steps {
    display: flex;
    gap: 6px;
}

.fs-compare-steps i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(var(--ds-on-media-rgb), 0.3);
    transition: background 0.15s ease, transform 0.15s ease;
}

.fs-compare-steps i.is-on { background: var(--ds-accent); transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
    .fullscreen-modal.is-chrome-hidden :is(.fullscreen-close, .fullscreen-nav, .fullscreen-actions, .fullscreen-info,
        .fullscreen-edit-history, .fullscreen-social-format-badge, .fs-versions),
    .fs-compare {
        transition: none;
    }
}
/* end photos viewer (26 Oct) */

/* mobile follow-ups (25 Oct): header at a finger's size, the notch in landscape, solid panels */

/* The header's "⋯" menu holds download, 2x and 4x on a phone; on a wide screen it does not exist. */
.header-more-wrap { display: none; }

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    /* every header tool is a 40px target; the glyphs keep their size, the padding is the difference */
    .header .ds-tools .btn-icon,
    .header .ds-tools .btn-icon.upscale-btn {
        width: 40px;
        height: 40px;
    }

    .header .ds-tools .grid-selector { padding: 2px; gap: 0; }

    /* a 40px button whose circle stays 24px: the colour is painted on the content box only */
    .header .ds-tools .grid-option {
        width: 40px;
        height: 40px;
        padding: 8px;
        box-sizing: border-box;
        background-clip: content-box;
    }

    .theme-toggle.ds-theme-switch {
        height: 40px;
        padding: 8px 6px;
        box-sizing: border-box;
    }

    .header .user-avatar,
    .header .sidebar-toggle-header,
    .header .processing-modal-toggle {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 768px) {
    .header-more-wrap { display: block; position: relative; flex: 0 0 auto; }

    .header .header-controls { gap: 2px; min-width: 0; }
    .header .ds-tools { gap: 0; }
    .header .header-content { gap: 4px; }

    .header-more-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: 230px;
        max-width: calc(100vw - 16px);
        padding: 6px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: var(--ds-surface);
        border: 1px solid rgba(var(--ds-ink-rgb), 0.18);
        border-radius: 16px;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
        z-index: 1010;
    }

    .header-more-menu[hidden] { display: none; }

    .header-more-btn.is-open { background: rgba(var(--ds-accent-rgb), 0.2); }

    /* a row per tool, its name from the button's own title (as in the viewer's menus) */
    .header .header-more-menu .btn-icon,
    .header .header-more-menu .btn-icon.upscale-btn {
        width: 100%;
        height: 44px;
        justify-content: flex-start;
        gap: 12px;
        padding: 0 12px;
        border-radius: 12px;
        background: transparent;
        color: var(--ds-ink);
        font-size: 0.9rem;
    }

    .header .header-more-menu .btn-icon:hover { background: rgba(var(--ds-ink-rgb), 0.08); }
    .header .header-more-menu .btn-icon::after { content: attr(title); font-weight: 500; white-space: nowrap; }
    .header .header-more-menu .btn-icon i { width: 20px; text-align: center; }
    .header .header-more-menu .btn-icon .badge-scale { font-weight: 700; width: 20px; text-align: center; }
}

/* Panels over pictures read on a solid ground on a phone (25 Oct): the palette's surface, a firmer
   border; the desktop keeps its glass. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .compact-select-menu,
    .model-options-menu,
    .result-group-menu,
    .grid-item-overlay .result-group-menu,
    .creative-context-menu,
    .user-dropdown,
    .fullscreen-info,
    .fullscreen-edit-history,
    .fullscreen-close,
    .fullscreen-nav {
        background: var(--ds-surface);
        border: 1px solid rgba(var(--ds-ink-rgb), 0.2);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .fullscreen-info,
    .fullscreen-close,
    .fullscreen-nav { color: var(--ds-ink); }

    .fullscreen-modal .fullscreen-actions,
    .fullscreen-modal .fs-menu {
        background: var(--ds-surface) !important;
        border-color: rgba(var(--ds-ink-rgb), 0.2) !important;
    }

    .creative-action-bar-v2 {
        background: var(--ds-surface) !important;
        border-color: rgba(var(--ds-ink-rgb), 0.2) !important;
    }
}

/* The notch in landscape (25 Oct): the header, the bar and the viewer's bars stand inside the safe
   area at the sides. */
@media (orientation: landscape) and (max-height: 600px) {
    .header .header-content {
        padding-left: max(var(--spacing-md), env(safe-area-inset-left, 0px));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right, 0px));
    }

    /* the bar is centred on the safe area, not on the screen */
    #creativeModeInput {
        max-width: min(900px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
        margin-left: calc((env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) / 2);
    }

    /* a wide landscape phone keeps the desktop viewer: its buttons clear the notch (the bar is centred) */
    .fullscreen-modal .fullscreen-close { right: max(20px, env(safe-area-inset-right, 0px)); }
    .fullscreen-modal .fullscreen-prev { left: max(20px, env(safe-area-inset-left, 0px)); }
    .fullscreen-modal .fullscreen-next { right: max(20px, env(safe-area-inset-right, 0px)); }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 768px) {
    .fullscreen-modal .fullscreen-close { right: max(8px, env(safe-area-inset-right, 0px)); }
    .fullscreen-modal .fullscreen-prev { left: max(6px, env(safe-area-inset-left, 0px)); }
    .fullscreen-modal .fullscreen-next { right: max(6px, env(safe-area-inset-right, 0px)); }

    .fullscreen-modal .fullscreen-actions {
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        max-width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    }

    .fullscreen-modal .fullscreen-edit-history {
        max-width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    }
}
/* end mobile follow-ups (25 Oct) */