/* ═══════════════════════════════════════════════════
   Tier — "Liquid Glass" surface layer
   Bevelled-glass shadow stack over a soft ambient light.
   Loaded last: it restyles surfaces, never structure.
   ═══════════════════════════════════════════════════ */

:root {
    /* ═══ THE LIQUID GLASS EFFECT ═══ */
    --glass-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.27),
        inset -2px -2px 0px -2px rgba(255, 255, 255, 0.24),
        inset -3px -8px 1px -6px rgba(255, 255, 255, 0.18),
        inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.24),
        inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.4),
        inset 0px 3px 4px -2px rgba(0, 0, 0, 0.4),
        inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.2),
        0px 1px 5px 0px rgba(0, 0, 0, 0.2),
        0px 6px 16px 0px rgba(0, 0, 0, 0.16);

    /* Shallower stack for small controls, where the full bevel reads as noise. */
    --glass-shadow-sm:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 1.4px 2.2px 0px -1.6px rgba(255, 255, 255, 0.24),
        inset -1.5px -1.5px 0px -1.6px rgba(255, 255, 255, 0.2),
        inset -0.3px -1px 3px 0px rgba(0, 0, 0, 0.22),
        inset 0px 2px 3px -2px rgba(0, 0, 0, 0.36),
        0px 1px 4px 0px rgba(0, 0, 0, 0.22);

    /* Montserrat is geometric and runs wide, so UI text needs slightly tighter
       tracking than the SF Pro it replaces to keep the same line rhythm. */
    --ui-font: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    --glass-fill: rgba(255, 255, 255, 0.05);
    --glass-fill-raised: rgba(255, 255, 255, 0.11);
    --glass-fill-sunken: rgba(0, 0, 0, 0.3);
    /* Tiles hold white line art, so their pane must sink away from it. */
    --glass-fill-well: rgba(0, 0, 0, 0.26);

    /* Inverted bevel: light catches the bottom edge, so the surface reads recessed. */
    --glass-well-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 2px 4px -1px rgba(0, 0, 0, 0.5),
        inset 1.5px 2px 0 -1.5px rgba(0, 0, 0, 0.4),
        inset -1.5px -2.5px 0 -1.5px rgba(255, 255, 255, 0.16),
        0 0.5px 0 0 rgba(255, 255, 255, 0.05);
    --glass-blur: blur(22px) saturate(165%);
    --glass-blur-sm: blur(10px) saturate(150%);
    --glass-press: cubic-bezier(.22, 1, .36, 1);
}

/* ─── Ambient light ───
   Glass needs something behind it. A cool key light top-left and a warm bounce
   bottom-right give the bevels a direction to catch, on an otherwise black page. */
[data-theme=dark] body.oem-body {
    background-color: var(--ui-bg);
    background-image:
        radial-gradient(125% 74% at 6% -10%, rgba(122, 152, 198, .26), transparent 64%),
        radial-gradient(105% 66% at 106% 106%, rgba(196, 152, 104, .17), transparent 68%),
        radial-gradient(150% 105% at 50% 40%, rgba(255, 255, 255, .05), transparent 76%);
    background-attachment: fixed;
    background-repeat: no-repeat
}

/* ─── Typography ─── */
.ui-page,
.ui-button,
.ui-segment,
.oem-titlebar,
.ui-modal {
    font-family: var(--ui-font)
}

.ui-page-title,
.oem-titlebar-title,
.ui-modal-title {
    letter-spacing: -.02em
}

/* ─── Spacing ───
   Cards were 12px from the edge with 24px between sections; on a black canvas the
   glass needs more room around it or the panes read as one continuous slab. */
.ui-section {
    margin-bottom: 32px
}

.ui-card,
.oem-pager {
    margin-left: 16px;
    margin-right: 16px
}

.oem-template-grid {
    gap: 12px;
    padding: 0 16px 8px
}

.oem-line-wrap {
    padding-left: 16px;
    padding-right: 16px
}

/* ─── Cards ─── */
.ui-card,
.oem-pager {
    background: var(--glass-fill);
    border: 0;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow)
}

/* ─── Modals ─── */
.ui-modal {
    background: var(--glass-fill-raised);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow)
}

.ui-overlay {
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

/* ─── Segmented control ───
   The track is a well; the moving `:after` is the glass pill. Styling
   `.ui-segment` itself is pointless — it is transparent with !important. */
.ui-segmented,
.oem-line-segmented {
    height: 38px;
    background: var(--glass-fill-sunken);
    border: 0;
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    box-shadow: var(--glass-well-shadow)
}

.oem-line-segmented:after {
    background: var(--glass-fill-raised);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    box-shadow: var(--glass-shadow-sm)
}

/* ─── Category picker ───
   A rail of pills carried no label and wrapped onto three rows, so the block read
   as decoration rather than a control. It is a row now, in the same language as
   Текст and Заливка, and the list opens in a sheet. */
.oem-collection-card {
    margin-bottom: 12px
}

.oem-collection-after {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ui-hint);
    font-weight: 600
}

/* A menu has to stay readable, so it sits on an opaque base rather than the
   translucent card fill — the artwork grid behind it was showing straight through. */
.oem-picker {
    padding: 18px 0 8px;
    background:
        linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07)),
        #141417
}

.oem-picker .oem-picker-row {
    background: transparent
}

.oem-picker .ui-modal-title {
    padding: 0 22px 12px
}

.oem-picker-list {
    max-height: min(62vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain
}

.oem-picker-row {
    width: 100%;
    text-align: left
}

.oem-picker-after {
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.oem-picker-count {
    color: var(--ui-hint);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

/* Checkmark only on the active row, drawn rather than shipped as an icon font. */
.oem-picker-check {
    width: 18px;
    height: 18px;
    opacity: 0
}

.oem-picker-row--active .oem-picker-check {
    opacity: 1;
    background: currentColor;
    -webkit-mask: var(--ui-badge-svg) center / 14px no-repeat;
    mask: var(--ui-badge-svg) center / 14px no-repeat
}

.oem-picker-row--active .ui-row-title {
    font-weight: 700
}

/* ─── Icon / pager buttons ─── */
.ui-icon-button,
.oem-nav-btn {
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    box-shadow: var(--glass-shadow-sm);
    transition: transform .2s var(--glass-press), box-shadow .2s var(--glass-press)
}

.ui-icon-button:active,
.oem-nav-btn:active {
    transform: scale(.94)
}

.ui-icon-button:disabled,
.oem-nav-btn:disabled {
    box-shadow: var(--glass-shadow-sm);
    opacity: .38
}

/* ─── Buttons ─── */
.ui-button {
    box-shadow: var(--glass-shadow-sm);
    transition: transform .2s var(--glass-press), box-shadow .2s var(--glass-press), background-color .2s var(--glass-press)
}

.ui-button:active:not(:disabled) {
    transform: scale(.97)
}

.ui-button--tinted {
    background: var(--glass-fill-raised);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm)
}

/* ─── Template tiles ───
   The bevel competed with the artwork it was framing. A flat surface and a
   hairline is enough structure; selection is a white ring, matching the tabs. */
.oem-template-preview {
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none
}

.oem-template-tile--selected .oem-template-preview {
    background: rgba(255, 255, 255, .1);
    border-color: transparent;
    box-shadow: 0 0 0 2px #fff
}

/* The template's own :after ring would double the selected outline. */
.oem-template-tile--selected .oem-template-preview:after {
    border-color: transparent
}

/* ─── Bottom CTA ───
   The glass treatment stays; the fix is opacity. This bar is fixed over the
   scrolling grid, and upstream paints it rgba(255,255,255,.14), so template
   artwork slid straight through the button. The tint is layered over an opaque
   base instead of sitting on whatever happens to scroll past. */
.ui-cta:not(.ui-cta--off) > .ui-button {
    background:
        linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)),
        #101013 !important;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: -.01em;
    box-shadow: var(--glass-shadow) !important
}

.ui-cta--off > .ui-button:disabled {
    background:
        linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)),
        #101013 !important;
    color: rgba(235, 235, 245, .34) !important;
    border: 0 !important;
    box-shadow: var(--glass-shadow) !important
}

/* ─── Pager ─── */
.oem-pager {
    margin-top: 4px
}

.oem-pager .ui-row-title {
    font-weight: 700
}

/* ─── Colour swatches read as glass beads ─── */
.oem-color-swatch {
    box-shadow: var(--glass-shadow-sm)
}

/* ─── Motion budget ─── */
@media (prefers-reduced-motion: reduce) {

    .ui-icon-button,
    .oem-nav-btn,
    .ui-button,
    .oem-template-preview {
        transition: none
    }

    .ui-icon-button:active,
    .oem-nav-btn:active,
    .ui-button:active:not(:disabled) {
        transform: none
    }
}

/* Backdrop-filter is the one hard dependency; without it glass turns into flat
   grey. Fall back to opaque surfaces rather than losing contrast. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .ui-card,
    .ui-modal {
        background: var(--ui-card)
    }

    .oem-template-preview {
        background: var(--oem-tile-surface)
    }
}

/* ─── Превью в чате ───
   A custom emoji renders at the message line height, roughly 20px. Everything
   else in this app shows it at 100-500px, which is why a nickname can look great
   here and vanish in a real chat. Deliberately not scaled up. */
.oem-inline-demo {
    padding: 4px 16px 18px
}

.oem-inline-bubble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 9px 14px;
    border-radius: 16px 16px 16px 5px;
    background: #182533;
    color: #e9edf1;
    font-family: var(--ui-font);
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -.01em
}

.oem-inline-slot {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle
}

.oem-inline-slot canvas,
.oem-inline-slot img,
.oem-inline-slot svg {
    display: block;
    width: 100% !important;
    height: 100% !important
}