/* ===========================================================================
   The app's phone tab bar + its sheets (templates/shared/_mobile_dock.html)

   Under 1024px every signed-in page has the same fixed bar: home, chat, create,
   agents, menu. Desktop has the sidebar instead (app_shell.css) and reuses the
   sheets as a centred dialog. Motion is transform/opacity only and switched
   off under prefers-reduced-motion.
   =========================================================================== */

:root {
    --mdock-h: 68px;          /* bar height, without the safe-area inset */
    --mdock-gap: 10px;        /* distance from the bottom edge */
}

/* ── The bar ─────────────────────────────────────────────────────────── */
.mdock {
    position: fixed;
    inset-inline: 12px;
    bottom: calc(var(--mdock-gap) + env(safe-area-inset-bottom));
    /* Under any page overlay (storage's drawers and menus start at 79) but
       over the page itself and its toasts. */
    z-index: 75;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.mdock-bar {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    width: 100%;
    max-width: 460px;
    height: var(--mdock-h);
    padding: 0 6px 8px;
    border-radius: 26px;
    background: rgb(var(--color-bg-rgb) / .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-strong);
    box-shadow: 0 14px 30px -10px rgb(0 0 0 / .6);
}
[data-theme="light"] .mdock-bar { box-shadow: 0 10px 26px -10px rgb(14 17 22 / .22); }

.mdock-tab,
.mdock-fab {
    -webkit-tap-highlight-color: transparent;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
}
.mdock-tab:focus-visible,
.mdock-fab:focus-visible { outline: none; }
.mdock-tab:focus-visible .mdock-ico,
.mdock-fab:focus-visible .mdock-fab-btn { box-shadow: 0 0 0 2px rgb(var(--primary-rgb) / .8); }

.mdock-ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    transition: transform .18s ease;
}
.mdock-ico svg { width: 22px; height: 22px; }
.mdock-ico img { width: 20px; height: 20px; }
.mdock-t {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

/* You are here: a small mark on the bar's top edge, the same on every tab. */
.mdock-tab.is-on,
.mdock-fab.is-on { color: var(--color-text-main); }
.mdock-tab.is-on::before,
.mdock-fab.is-on::before {
    content: "";
    position: absolute;
    top: -14px;
    width: 26px;
    height: 4px;
    border-radius: 0 0 5px 5px;
    background: rgb(var(--primary-rgb));
    box-shadow: 0 2px 10px rgb(var(--primary-rgb) / .7);
}
.mdock-fab.is-on::before { top: -8px; }
.mdock-tab:active .mdock-ico { transform: scale(.9); }

/* The one always-there action. */
.mdock-fab { color: var(--color-text-main); gap: 2px; }
.mdock-fab-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--color-text-on-primary);
    background: rgb(var(--primary-rgb));
    transition: transform .18s ease;
}
.mdock-fab-btn svg { width: 22px; height: 22px; }
.mdock-fab:active .mdock-fab-btn { transform: scale(.92); }

/* Room for the bar under the page. --dock-clear is what anything pinned to the
   bottom of a page (a studio's action bar, the save bar) stands on. */
@media (max-width: 1023.98px) {
    html.has-mdock {
        --dock-clear: calc(var(--mdock-h) + var(--mdock-gap) + 8px + env(safe-area-inset-bottom));
    }
    html.has-mdock .shell-main { padding-bottom: calc(var(--dock-clear) + 1rem); }
    html.has-mdock .shell-footer { padding-bottom: var(--dock-clear); }
    /* The «دیمو چت» tab is the way in; the floating pill would be a second bar. */
    html.has-mdock .hcx-dock { display: none; }
    html.has-mdock.hcx-host .shell-main { padding-bottom: calc(var(--dock-clear) + 1rem); }

    /* Toasts sit above the bar instead of under it. */
    html.has-mdock #toast-stack,
    html.has-mdock #toast-host { bottom: calc(var(--dock-clear) + 4px); }

    /* Anything full-screen owns the bottom edge while it is up, and so does
       a page's own action bar (storage's selection bar). */
    html.nav-open .mdock,
    html.hcx-open .mdock,
    body.sf-selecting .mdock { display: none; }
    html.has-mdock body.sf-selecting #toast-host { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) {
    .mdock { display: none; }
}

/* ── Sheets ──────────────────────────────────────────────────────────── */
.mdock-scrim {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background: var(--scrim, rgb(0 0 0 / .6));
    opacity: 0;
    transition: opacity .28s ease;
}
.mdock-scrim.is-open { opacity: 1; }

html.mdock-lock,
html.mdock-lock body { overflow: hidden; overscroll-behavior: none; }

.mdock-sheet {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 30px 30px 0 0;
    background: linear-gradient(180deg, var(--color-raised), var(--color-surface));
    border: 1px solid var(--border-strong);
    border-bottom: 0;
    box-shadow: 0 -18px 50px -20px rgb(0 0 0 / .55);
    transform: translateY(102%);
    transition: transform .36s var(--ease, cubic-bezier(.22, 1, .36, 1));
    will-change: transform;
}
.mdock-sheet.is-open { transform: none; }
.mdock-sheet.is-dragging { transition: none; }
/* display:flex above beats the UA [hidden] rule; without these a closed sheet
   still sits over the page (invisibly, at the centre, on desktop) and eats
   clicks meant for whatever is underneath — also during the closing fade. */
.mdock-sheet[hidden] { display: none; }
.mdock-sheet:not(.is-open) { pointer-events: none; }

.ms-grab {
    display: grid;
    place-items: center;
    height: 22px;
    flex: none;
    touch-action: none;
    cursor: grab;
}
.ms-grab i {
    width: 38px;
    height: 4px;
    border-radius: 99px;
    background: rgb(var(--color-text-muted-rgb, 160 160 170) / .35);
}

.ms-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 20px 12px;
    flex: none;
    touch-action: none;
}
.ms-head h2 { font-size: 24px; font-weight: 300; line-height: 1.35; }
.ms-head p { font-size: .76rem; color: var(--color-text-muted); margin-top: 2px; }
.ms-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
}
.ms-close svg { width: 14px; height: 14px; }
.ms-close:hover { color: var(--color-text-main); }

.ms-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 16px calc(18px + env(safe-area-inset-bottom));
}

/* Staggered entrance for whatever the sheet holds. */
.mdock-sheet .ms-body > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .34s ease, transform .42s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.mdock-sheet.is-open .ms-body > * { opacity: 1; transform: none; }
.mdock-sheet.is-open .ms-body > *:nth-child(2) { transition-delay: 50ms; }
.mdock-sheet.is-open .ms-body > *:nth-child(3) { transition-delay: 90ms; }
.mdock-sheet.is-open .ms-body > *:nth-child(4) { transition-delay: 130ms; }
.mdock-sheet.is-open .ms-body > *:nth-child(5) { transition-delay: 170ms; }

.mdock-sheet a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.mdock-sheet a:focus-visible { outline: 2px solid rgb(var(--primary-rgb) / .8); outline-offset: 2px; }
.mdock-sheet small { display: block; font-size: .72rem; line-height: 1.55; color: var(--color-text-muted); }
.ms-go { width: 16px; height: 16px; flex: none; opacity: .45; transition: transform .18s ease, opacity .18s ease; }
[dir="ltr"] .ms-go { transform: scaleX(-1); }

/* «ساخت»: what you can make, big enough to hit without looking. */
.ms-rows { display: grid; gap: 8px; }
.ms-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 13px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-fill);
    transition: border-color .18s ease, transform .15s ease;
}
.ms-row:hover { border-color: var(--border-strong); }
.ms-row:active { transform: scale(.985); }
.ms-row-ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 15px;
    background: var(--color-hover-strong);
    color: var(--color-text-main);
}
.ms-row-ico svg { width: 22px; height: 22px; }
.ms-row-t { flex: 1; min-width: 0; }
.ms-row-t b { display: block; font-size: 15.5px; font-weight: 500; line-height: 1.5; }
.ms-row-t small { font-size: 12.5px; }
.ms-row.is-main {
    border-color: rgb(var(--primary-rgb) / .38);
    background: linear-gradient(100deg, rgb(var(--primary-rgb) / .13), rgb(var(--primary-rgb) / .02));
}
.ms-row.is-main .ms-row-ico { background: rgb(var(--primary-rgb)); color: var(--color-text-on-primary); }

.ms-label { margin: 16px 2px 8px; font-size: 12.5px; color: var(--color-text-muted); }
.ms-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-chips a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    font-size: 13px;
    transition: border-color .18s ease, background-color .18s ease;
}
.ms-chips a:hover { background: var(--color-hover-subtle); border-color: var(--border-strong); }
.ms-chips svg { width: 16px; height: 16px; flex: none; color: var(--color-text-muted); }
.ms-chips-even { margin-top: 14px; justify-content: center; }

/* «منو»: every service in two rows, then the pages of the one you are in. It
   should fit on a phone without scrolling. */
.ms-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ms-services a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 2px 8px;
    border-radius: 18px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-fill);
    font-size: 12.5px;
    transition: border-color .18s ease;
}
.ms-services a:hover { border-color: var(--border-strong); }
.ms-services span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-hover-strong);
}
.ms-services svg { width: 20px; height: 20px; }
.ms-services img { width: 20px; height: 20px; }
.ms-services .is-on { border-color: rgb(var(--primary-rgb) / .5); }
.ms-services .is-on span { background: rgb(var(--primary-rgb) / .16); color: rgb(var(--primary-ink-rgb)); }
.ms-join { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ms-join .btn { justify-content: center; border-radius: 999px; }
.ms-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ms-pages a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 42px;
    padding: 6px 13px;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    font-size: 13px;
    line-height: 1.35;
}
.ms-pages a:hover { background: var(--color-hover-subtle); }
.ms-pages .is-on { border-color: rgb(var(--primary-rgb) / .5); background: rgb(var(--primary-rgb) / .08); }
.ms-pages em {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--status-ok-bg);
    color: var(--status-ok);
    font-size: 11px;
    font-style: normal;
}

.ms-search {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 42px;
    margin-top: 12px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}
.ms-search svg { width: 17px; height: 17px; }
.ms-plans { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ms-plan {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-fill);
    transition: border-color .18s ease, background-color .18s ease, transform .15s ease;
}
.ms-plan:active { transform: scale(.985); }
.ms-plan:hover { border-color: var(--border-strong); }
.ms-plan:hover .ms-go { opacity: 1; transform: translateX(-3px); }
.ms-plan-main { flex: 1; min-width: 0; }
.ms-plan-main b { display: flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 500; }
.ms-plan-main em {
    font-style: normal;
    font-size: .64rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    color: var(--color-text-on-primary);
    background: rgb(var(--primary-rgb));
}
.ms-plan-price { text-align: end; flex: none; }
.ms-plan-price b { display: block; font-size: 1.05rem; font-weight: 400; }
.ms-plan-price small { font-size: .66rem; }
.ms-plan.is-rec {
    border-color: rgb(var(--primary-rgb) / .5);
    background:
        linear-gradient(90deg, rgb(var(--primary-rgb) / .1), transparent 70%),
        var(--color-hover-subtle);
}

.ms-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: .7rem;
    color: var(--color-text-muted);
}
.ms-trust svg { width: 14px; height: 14px; }

[data-theme="light"] .ms-row,
[data-theme="light"] .ms-plan { background: var(--color-surface); }
[data-theme="light"] .mdock-sheet { box-shadow: 0 -18px 50px -20px rgb(14 17 22 / .25); }

/* Desktop: the same sheets as a centred dialog. */
@media (min-width: 1024px) {
    .mdock-sheet {
        inset: auto;
        top: 50%;
        left: 50%;
        bottom: auto;
        width: 520px;
        max-height: min(720px, 86vh);
        border-radius: 24px;
        border-bottom: 1px solid var(--border-strong);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        transform: translate(-50%, -46%) scale(.97);
        transition: transform .3s var(--ease, cubic-bezier(.22, 1, .36, 1)), opacity .22s ease;
    }
    .mdock-sheet.is-open { opacity: 1; transform: translate(-50%, -50%); }
    .ms-grab { display: none; }
    .ms-head { padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .mdock-sheet, .mdock-scrim, .mdock-sheet .ms-body > * { transition: none; }
}