:root {
    --bg:            #f7f7fb;
    --surface:       #ffffff;
    --surface-2:     #fbfbfd;
    --border:        #e8e8ef;
    --border-strong: #d8d8e2;
    --text:          #17172b;
    --text-muted:    #6a6a80;
    --text-faint:    #9a9aae;

    --primary:       #0c1731;
    --primary-hover: #1b2c54;
    --primary-soft:  #eef1f6;
    --primary-ring:  rgba(12, 23, 49, .28);

    --success:       #0a7d43;
    --success-soft:  #e5f4ec;
    --danger:        #d1293d;
    --warning:       #9a6100;
    --warning-soft:  #fdf3e0;
    --danger-soft:   #fceaec;
    --warn:          #b7791f;
    --warn-soft:     #faf0dd;

    --radius-sm: 7px;
    --radius:    11px;
    --radius-lg: 16px;

    --shadow-xs: 0 1px 2px rgba(20, 20, 45, .05);
    --shadow-sm: 0 1px 3px rgba(20, 20, 45, .07), 0 1px 2px rgba(20, 20, 45, .04);
    --shadow-md: 0 4px 16px rgba(20, 20, 45, .09);
    --shadow-lg: 0 12px 40px rgba(20, 20, 45, .16);

    --sidebar-w: 244px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --fs-xs:   12px;
    --fs-sm:   13.5px;
    --fs-base: 14px;
    --fs-md:   16px;
    --fs-lg:   19px;
    --fs-xl:   24px;
    --fs-2xl:  31px;
    --fs-3xl:  40px;
    --fs-4xl:  54px;

    --primary-lift: #2c477e;
    --on-dark:       rgba(255, 255, 255, .78);
    --on-dark-faint: rgba(255, 255, 255, .52);
    --on-dark-line:  rgba(255, 255, 255, .14);
}

* { box-sizing: border-box; }

/*
   Atribut `hidden` musí přebít i komponenty, které si samy nastavují display.
   Prohlížeč sice `[hidden] { display: none }` má, jenže jde o jeho vlastní
   stylopis, který každé autorské pravidlo poráží — `.btn` s `inline-flex` by tak
   schované tlačítko vykreslil. To si dělá skript s věcmi, které bez něj
   nefungují, takže tady na `!important` opravdu záleží.
*/
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.014em; line-height: 1.25; text-wrap: balance; }

code, .mono { font-family: var(--mono); font-size: .86em; }

::selection { background: var(--primary-ring); }

/* ---------- App shell ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 16px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.02em;
}

.sidebar__brand .logo {
    height: 28px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary);
    border-radius: 8px;
}
.sidebar__brand .logo img { height: 15px; width: auto; display: block; }

.sidebar__section {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-faint);
    margin-top: 12px;
}

.sidebar__nav { padding: 4px 12px; display: flex; flex-direction: column; gap: 2px; }
.sidebar__nav--top { margin-top: 14px; }

.sidebar__nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 500;
    transition: background .12s, color .12s;
}
.sidebar__nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
/* Náhled avatara agenta v administraci. */
.admin-avatar {
    width: 40px; height: 40px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; overflow: hidden;
    background: var(--surface-2); color: var(--text-faint);
    font-size: 20px; line-height: 1;
}
.admin-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Nadpis nad výpisem e-shopů v menu. */
.sidebar__group {
    margin: 14px 0 4px; padding: 0 10px;
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-faint);
}
.sidebar__nav a.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.sidebar__nav a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .9; }

.sidebar__foot { margin-top: auto; padding: 14px; border-top: 1px solid var(--border); }

.userchip {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: var(--radius-sm);
}
.userchip:hover { background: var(--surface-2); text-decoration: none; }
.userchip .avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #2c477e);
    color: #fff; display: grid; place-items: center;
    font-size: 12px; font-weight: 650; flex-shrink: 0;
}
.userchip .meta { min-width: 0; }
.userchip .meta strong { display: block; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userchip .meta span { font-size: 11px; color: var(--text-faint); }

/* ---------- Main ---------- */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 16px; font-weight: 650; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }

.content { padding: 32px; max-width: 1140px; width: 100%; margin: 0 auto; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.page-head { margin-bottom: 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.page-head h2 { font-size: 22px; }
.page-head p { margin: 4px 0 0; color: var(--text-muted); }

/* ---------- Cards ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.card__head {
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    font-weight: 620;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.card__body { padding: 18px; }

/* Rozbalovací karta: .card__head je flex, čímž prohlížeč zahodí vlastní
   trojúhelníček, takže si ho kreslíme sami. */
details.card > summary.card__head { cursor: pointer; list-style: none; }
details.card > summary.card__head::-webkit-details-marker { display: none; }
details.card > summary.card__head::after {
    content: ''; flex: none; width: 8px; height: 8px; margin-left: auto;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .15s ease; opacity: .55;
}
details.card[open] > summary.card__head::after { transform: rotate(225deg); }
details.card > summary.card__head:hover { background: var(--surface-2); }
details.card:not([open]) > summary.card__head { border-bottom: 0; }
.card__body--tight { padding: 0; }

/* ---------- Stat tiles ---------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }

.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 17px;
    box-shadow: var(--shadow-xs);
}
.stat__label { font-size: 12px; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.stat__label svg { width: 15px; height: 15px; color: var(--text-faint); }
.stat__value { font-size: 26px; font-weight: 680; letter-spacing: -.02em; margin-top: 7px; font-variant-numeric: tabular-nums; }
.stat__sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

.stat-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.stat-hero__tile {
    background: var(--primary-soft);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
}
.stat-hero__head { display: flex; align-items: center; gap: 11px; }
.stat-hero__icon {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--primary);
    color: #fff;
}
.stat-hero__icon svg { width: 17px; height: 17px; }
.stat-hero__label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.stat-hero__value {
    margin-top: 14px;
    font-size: 32px; font-weight: 700; letter-spacing: -.02em;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.stat-hero__value--muted { color: var(--text-faint); }
.stat-hero__sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.stat-hero__sub--warn { color: var(--warning); }

/* ---------- Admin overview: chart, share bars, deltas ---------- */

.stat-hero__value--danger { color: var(--danger); }

.chart { display: flex; align-items: flex-end; gap: 10px; height: 200px; min-width: 460px; }
.chart__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.chart__bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.chart__bar { display: block; width: 46%; max-width: 22px; border-radius: 4px 4px 0 0; }
.chart__bar--revenue { background: var(--primary); }
.chart__bar--cost { background: var(--border-strong); }
.chart__label { text-align: center; font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.chart__col--current .chart__label { color: var(--text); font-weight: 600; }

.chart-legend { display: flex; gap: 14px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.chart-legend__key { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend__swatch { width: 10px; height: 10px; border-radius: 3px; }
.chart-legend__swatch--revenue { background: var(--primary); }
.chart-legend__swatch--cost { background: var(--border-strong); }

.share { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.share .meter { flex: 1; }
.share__value { font-size: 12px; color: var(--text-muted); width: 38px; text-align: right; }

.meter__fill--muted { background: var(--border-strong); }

.agent-states { display: flex; flex-direction: column; gap: 14px; }

.delta { font-weight: 600; }
.delta--up { color: var(--success); }
.delta--down { color: var(--danger); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }

/* ---------- Filter bar: a GET form that reads as one row ---------- */

.filter-bar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    padding: 14px 16px;
}
.filter-bar__field { flex: 1 1 180px; min-width: 0; }
.filter-bar__field--narrow { flex: 0 1 150px; }
.filter-bar__field .form-label { margin-bottom: 4px; }
.filter-bar__actions { display: flex; gap: 8px; flex: 0 0 auto; }

@media (max-width: 700px) {
    .filter-bar__field, .filter-bar__field--narrow { flex-basis: 100%; }
    .filter-bar__actions { width: 100%; }
}

/* ---------- Admin standing in a customer's shell ---------- */

.impersonation {
    display: flex; align-items: center; gap: 11px;
    margin-bottom: 18px;
    padding: 11px 14px;
    border-radius: var(--radius);
    background: var(--warn-soft);
    border: 1px solid var(--warn);
    color: var(--warn);
    font-size: 13px; line-height: 1.5;
}
.impersonation svg { flex: none; }
.impersonation div { flex: 1; }
.impersonation strong { color: var(--warn); font-weight: 650; }
.impersonation .btn { flex: none; }

/* ---------- Buttons ---------- */

.btn {
    --_bg: var(--surface);
    --_fg: var(--text);
    --_bd: var(--border-strong);
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 14px;
    font: inherit; font-weight: 550; font-size: 13.5px;
    border: 1px solid var(--_bd);
    border-radius: var(--radius-sm);
    background: var(--_bg);
    color: var(--_fg);
    cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s, transform .04s;
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover { text-decoration: none; background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }
.btn svg { width: 15px; height: 15px; }

.btn--primary { --_bg: var(--primary); --_fg: #fff; --_bd: var(--primary); }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.btn--danger { --_fg: var(--danger); --_bd: var(--border-strong); }
.btn--danger:hover { background: var(--danger-soft); border-color: var(--danger); }

.btn--ghost { --_bd: transparent; --_bg: transparent; }
.btn--sm { padding: 5px 10px; font-size: 12.5px; }
.btn--block { width: 100%; }

/* ---------- Badges ---------- */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    font-size: 11.5px; font-weight: 600;
    border-radius: 999px;
    background: var(--surface-2); color: var(--text-muted);
    border: 1px solid var(--border);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* A pill that wraps stops being a pill: the 999px radius turns three lines of
   text into a blob. Badges are short by definition, so they keep their line. */
.badge { white-space: nowrap; }

/* The states spelled out under the table, each next to the badge it explains. */
/*
   A dialog opened by :target — the link points at its id, and closing points at
   nothing. No JavaScript, and no state of its own to get out of step: the
   address is the state, so the back button closes it like any other navigation.
*/
.modal { display: none; }
.modal:target { display: block; position: fixed; inset: 0; z-index: 100; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(12, 23, 49, .45); display: block; }
.modal__panel {
    position: relative;
    width: min(460px, calc(100vw - 32px));
    margin: 10vh auto 0;
    padding: 22px 24px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
}
.modal__title { font-size: 17px; margin: 0 0 6px; }
.modal__facts {
    display: grid; grid-template-columns: auto 1fr; gap: 7px 14px;
    margin: 16px 0 0; font-size: 13px;
}
.modal__facts dt { color: var(--text-muted); }
.modal__facts dd { margin: 0; }
.modal__actions { display: flex; gap: 8px; align-items: center; margin-top: 22px; }

/* One foldable block per invitation state. */
.invite-group + .invite-group { border-top: 1px solid var(--border); }
.invite-group__head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    list-style: none;
    background: var(--surface-2);
}
.invite-group__head::-webkit-details-marker { display: none; }
.invite-group__head:hover { background: var(--border); }
.invite-group__chevron { margin-left: auto; display: flex; color: var(--text-faint); transition: transform .18s ease; }
.invite-group[open] .invite-group__chevron { transform: rotate(180deg); }

/* Preparing a shop for a customer: plan, agent, invitation — in that order. */
.prep-steps { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: prep; display: flex; flex-direction: column; gap: 14px; }
.prep-steps li { counter-increment: prep; position: relative; padding-left: 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.prep-steps li::before {
    content: counter(prep); position: absolute; left: 0; top: 0;
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12px; font-weight: 600; background: var(--border); color: var(--text-muted);
}
.prep-steps li.is-done::before { content: '✓'; background: var(--success-soft); color: var(--success); }
.invite-group[open] .invite-group__head { border-bottom: 1px solid var(--border); }

/* Fixed widths, so the separate tables still line up with one another. */
.invite-table { table-layout: fixed; }
.invite-table td:nth-child(1) { width: 34%; word-break: break-word; }
.invite-table td:nth-child(2) { width: 30%; }
.invite-table td:nth-child(3) { width: 16%; }
.invite-table tr:last-child td { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) { .invite-group__chevron { transition: none; } }

/* "Cancelled" is over and done with — it is listed, not drawn attention to. */
.badge--muted { background: var(--surface-2); color: var(--text-faint); border-color: var(--border); }
.badge--success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge--danger  { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }
.badge--warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge--warn    { background: var(--warn-soft);    color: var(--warn);    border-color: transparent; }
.badge--plain::before { display: none; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data th {
    text-align: left;
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-faint);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.data td { padding: 13px 16px; border-bottom: 1px solid var(--border); }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background .1s; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data .col-actions { text-align: right; white-space: nowrap; }
table.data .empty { text-align: center; color: var(--text-faint); padding: 40px 16px; }

/* ---------- Plan matrix: plans across, properties down ---------- */

/*
 * Turned on its side because the properties are what keeps growing. A plan has
 * six quotas, five features and two operating figures, and as columns those ran
 * off the screen and the features never got shown at all. Down the side there is
 * room for every one of them, and a new property is one more row.
 *
 * The widths are fixed so the picture is predictable: a 210px label column plus
 * 160px per plan. Five plans fit a normal content area; past that the table
 * scrolls sideways and the label column stays put, because a number in an
 * unlabelled column means nothing.
 */
.plan-matrix { table-layout: fixed; }

.plan-matrix th:first-child,
.plan-matrix td:first-child {
    position: sticky; left: 0; z-index: 2;
    width: 210px;
    background: var(--surface);
}
.plan-matrix th:not(:first-child),
.plan-matrix td:not(:first-child) { width: 160px; text-align: center; }

.plan-matrix thead th {
    vertical-align: bottom;
    text-transform: none; letter-spacing: -.01em;
    font-size: 14px; font-weight: 650; color: var(--text);
}
.plan-matrix thead th:first-child {
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-faint);
}
.plan-matrix__code { margin-top: 3px; font-weight: 400; }

.plan-matrix tbody th {
    text-align: left;
    text-transform: none; letter-spacing: normal;
    font-size: 13px; font-weight: 500; color: var(--text);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.plan-matrix tbody tr:hover th:first-child,
.plan-matrix tbody tr:hover td:first-child { background: var(--surface-2); }

.plan-matrix tr.plan-matrix__section th {
    position: static;
    background: var(--surface-2);
    padding: 7px 16px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-faint);
}

.plan-matrix__yes { color: var(--success); }
.plan-matrix__yes svg { display: block; margin: 0 auto; }
.plan-matrix__no { color: var(--border-strong); }

/* ---------- Forms ---------- */

.form-label { display: block; font-size: 12.5px; font-weight: 550; margin-bottom: 5px; color: var(--text); }
.form-control, .form-select {
    width: 100%;
    padding: 8px 11px;
    font: inherit; font-size: 13.5px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color .12s, box-shadow .12s;
}
.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
.form-control:disabled, .form-select:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
.form-control::placeholder { color: var(--text-faint); }

.mb-3 { margin-bottom: 15px; }
.form-text, .help { font-size: 12px; color: var(--text-muted); margin-top: 5px; }

.form-check { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }

.form-check-input {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 16px; height: 16px;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px;
}
.form-check-input:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
.form-check-input:disabled { background: var(--surface-2); border-color: var(--border); cursor: not-allowed; }
.form-check-input:disabled:checked { background-color: var(--text-faint); border-color: var(--text-faint); }
.form-check-label { font-size: 13.5px; cursor: pointer; }

.invalid-feedback, .form-error { display: block; color: var(--danger); font-size: 12px; margin-top: 5px; }
.form-control.is-invalid, .is-invalid .form-control { border-color: var(--danger); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* An input with a button beside it — "Načíst z ARES" next to IČO.
   The button takes only the width of its own text, rather than half the row,
   and carries an empty label of its own so it sits on the same line as the
   input. Aligning it to the bottom of the column put it level with the help
   text underneath instead, which is what looked broken. */
.field-action { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: start; }
.field-action__go { display: flex; flex-direction: column; }
.field-action__go .form-label { visibility: hidden; }
@media (max-width: 560px) {
    .field-action { grid-template-columns: 1fr; }
    .field-action__go .form-label { display: none; }
    .field-action__go .btn { width: 100%; }
}
.field-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) { .field-row, .field-row--3 { grid-template-columns: 1fr; } }

.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; }

/* ---------- Alerts / flashes ---------- */

.flashes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.alert {
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex; gap: 10px; align-items: flex-start;
}
.alert svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.alert--success { background: var(--success-soft); border-color: transparent; color: #0b5c34; }
.alert--danger  { background: var(--danger-soft);  border-color: transparent; color: #971c2b; }
.alert--info    { background: var(--primary-soft); border-color: transparent; color: var(--primary-hover); }

/* ---------- Layout helpers ---------- */

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--sidebar { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 900px) { .grid--2, .grid--3, .grid--sidebar { grid-template-columns: 1fr; } }

.stack { display: flex; flex-direction: column; gap: 6px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 20px; } .mt-4 { margin-top: 32px; }
.text-sm { font-size: 12.5px; }

.dl { display: grid; grid-template-columns: 140px 1fr; gap: 10px 16px; font-size: 13.5px; }
.dl dt { color: var(--text-muted); }
.dl dd { margin: 0; }

/* ---------- Progress ---------- */

.meter { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.meter__fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width .4s; }
.meter__fill--warn { background: var(--warn); }
.meter__fill--danger { background: var(--danger); }

/* ---------- List group ---------- */

.list { display: flex; flex-direction: column; }
.list__item {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.list__item:last-child { border-bottom: 0; }
.list a.list__item:hover { background: var(--surface-2); text-decoration: none; }
.row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---------- Auth ---------- */

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.auth__aside {
    background: linear-gradient(150deg, #0c1731, #1b2c54 55%, #2c477e);
    color: #fff;
    padding: 56px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.auth__aside .logo { height: 34px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,.16); display: inline-flex; align-items: center; }
.auth__aside .logo img { height: 18px; width: auto; display: block; }
.auth__aside h2 { font-size: 30px; line-height: 1.2; max-width: 15ch; }
.auth__aside p { color: rgba(255,255,255,.8); max-width: 40ch; }
.auth__aside ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.auth__aside li { display: flex; gap: 10px; align-items: center; color: rgba(255,255,255,.92); font-size: 14px; }
.auth__aside li svg { width: 18px; height: 18px; }

.auth__main { display: grid; place-items: center; padding: 40px; }
.auth__card { width: 100%; max-width: 360px; }
.auth__card h1 { font-size: 22px; margin-bottom: 6px; }
.auth__card > p.muted { margin: 0 0 24px; }

@media (max-width: 860px) {
    .auth { grid-template-columns: 1fr; }
    .auth__aside { display: none; }
}

/* ---------- Mobile shell ---------- */

.menu-toggle { display: none; }
@media (max-width: 820px) {
    .sidebar {
        position: fixed; z-index: 50; left: 0; top: 0;
        transform: translateX(-100%); transition: transform .2s;
        box-shadow: var(--shadow-lg);
    }
    #nav-toggle:checked ~ .shell .sidebar { transform: none; }
    .menu-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
    .content, .topbar { padding-left: 18px; padding-right: 18px; }
}
#nav-toggle { display: none; }

/* ---------- Misc ---------- */

.key-reveal {
    font-family: var(--mono); font-size: 12.5px;
    background: var(--surface-2); border: 1px solid var(--border);
    padding: 8px 11px; border-radius: var(--radius-sm);
    word-break: break-all;
}
.divider { height: 1px; background: var(--border); margin: 18px 0; }

/* ---------- Onboarding shell + step indicator ---------- */

.onboarding { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-2); }

.onboarding__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 24px;
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.onboarding__brand { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.onboarding__brand .logo {
    height: 26px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary);
    border-radius: 8px;
}
.onboarding__brand .logo img { height: 14px; width: auto; display: block; }

.onboarding__main { flex: 1; display: grid; place-items: center; padding: 40px 20px; }
.onboarding__card { width: 100%; max-width: 520px; }
.onboarding__card h1 { font-size: 21px; margin-bottom: 6px; }

.steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; gap: 8px; }
.steps__item { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.steps__link { display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; }
.steps__link:hover { text-decoration: none; }
.steps__link:hover .steps__label { color: var(--primary); }
.steps__link:hover .steps__dot { border-color: var(--primary); color: var(--primary); }
.steps__dot {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11.5px; font-weight: 600;
    background: var(--surface-2); color: var(--text-faint);
    border: 1px solid var(--border-strong);
}
.steps__label {
    font-size: 12.5px; color: var(--text-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.steps__item.is-current .steps__dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.steps__item.is-current .steps__label { color: var(--text); font-weight: 600; }
.steps__item.is-done .steps__dot { background: var(--success-soft); border-color: transparent; color: var(--success); }
.steps__item.is-done .steps__label { color: var(--text-muted); }
.steps__meter { margin-bottom: 24px; }

@media (max-width: 560px) {
    .steps__label { display: none; }
    .steps__item { flex: 0 0 auto; }
}
.alert--warn    { background: var(--warn-soft);    border-color: transparent; color: #7a4a06; }

/* ---------- Generated price-offer sentence ---------- */

.offer-sentence {
    white-space: pre-line;
    display: flex; align-items: center; gap: 9px;
    min-height: calc(2 * 1.45em + 24px);
    margin-top: 6px; padding: 12px 14px;
    background: var(--primary-soft); border-radius: var(--radius-sm);
    color: var(--primary-hover); font-size: 14px; font-weight: 550; line-height: 1.45;
}
.offer-sentence svg { flex-shrink: 0; opacity: .8; }

/* ---------- Avatar: three exclusive choices, no JavaScript ---------- */

.avatar-choice { margin-bottom: 15px; }
.avatar-choice__current {
    display: flex; align-items: center; gap: 11px;
    margin: 6px 0 12px; padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.avatar-choice__current img,
.avatar-choice__emoji {
    width: 40px; height: 40px; flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--primary-soft);
    display: grid; place-items: center;
    font-size: 21px; line-height: 1;
}

.choice-cards { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.choice-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.choice-card:hover { background: var(--surface-2); }
.choice-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.choice-card input { margin-top: 3px; }
.choice-card > span { display: flex; flex-direction: column; gap: 2px; }

.choice-fields {
    padding-left: 12px;
    border-left: 2px solid var(--border);
}
.choice-fields .mb-3 { margin-bottom: 0; }

.avatar-choice:has(input[value="EMOJI"]:checked) [data-avatar-for="IMAGE"],
.avatar-choice:has(input[value="IMAGE"]:checked) [data-avatar-for="EMOJI"] { display: none; }
.avatar-choice:has(input[value="GENERATED"]:checked) .choice-fields { display: none; }

.welcome-choice:has(input[value="OFF"]:checked) .choice-fields,
.welcome-choice:has(input[value="AI_GENERATED"]:checked) .choice-fields { display: none; }

/* ---------- Colour: the Coloris picker, dressed as one of our fields ---------- */

/* Coloris wraps the input in .clr-field and hangs its own swatch button inside
   it, so the field keeps .form-control and only gives up the room on the right
   the button needs. Narrow on purpose — the value it holds is seven characters
   and a full-width bar reads as an empty input.

   The width is declared twice, and has to be: on the input, which is all there
   is when the script does not run, and again on the wrapper Coloris adds around
   it, because the swatch is positioned against that wrapper — leave it wider
   than the input and the swatch parks outside the field. */
.color-field .form-control {
    width: 168px; max-width: 100%;
    padding-right: 40px;
    font-family: var(--mono);
}
.color-field .clr-field { width: 168px; max-width: 100%; }
.color-field .clr-field .form-control { width: 100%; }
.color-field .clr-field button {
    width: 22px; height: 22px;
    right: 8px;
    border-radius: 5px;
}
.color-field .clr-field button:after { box-shadow: inset 0 0 0 1px rgba(20, 20, 45, .18); }

.clr-picker {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    font-family: var(--font);
}
.clr-picker input[type="text"] {
    font: inherit; font-size: 12.5px;
    font-family: var(--mono);
    color: var(--text);
    border-radius: var(--radius-sm);
    border-color: var(--border-strong);
}
.clr-picker input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
.clr-swatches button:after { box-shadow: inset 0 0 0 1px rgba(20, 20, 45, .14); }

/* ---------- Position: the page seen from above, pick a cell ---------- */

/* The plate stays a full 3×3 even though the middle column of the top two rows
   can never be chosen: drop those cells and the rest stops reading as a page.
   They are inert spans and not disabled inputs, so there is nothing in the tab
   order and nothing for a screen reader to announce. Everything else is a plain
   radio group — the browser then gives us the roving tabindex and the arrow keys
   for free, and position-grid.js only makes the arrows follow the plate instead
   of the document order. */
.position-field { margin-bottom: 15px; }

.browser {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
}
.browser__bar {
    display: flex; align-items: center; gap: 4px;
    padding: 7px 9px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.browser__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.browser__url { flex: 1; height: 8px; margin-left: 6px; border-radius: 99px; background: var(--border); }

.position-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
    padding: 7px;
    aspect-ratio: 4 / 3;
}
.position-grid > [data-row="1"] { grid-row: 1; }
.position-grid > [data-row="2"] { grid-row: 2; }
.position-grid > [data-row="3"] { grid-row: 3; }
.position-grid > [data-col="1"] { grid-column: 1; }
.position-grid > [data-col="2"] { grid-column: 2; }
.position-grid > [data-col="3"] { grid-column: 3; }

.position-grid__cell,
.position-grid__off { display: grid; place-items: center; border-radius: 5px; }

.position-grid__cell {
    position: relative;
    border: 1px dashed var(--border-strong);
    cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.position-grid__cell input {
    position: absolute; inset: 0;
    margin: 0;
    opacity: 0;
    -webkit-appearance: none; appearance: none;
    pointer-events: none;
}
.position-grid__cell:hover { background: var(--surface-2); border-color: var(--primary); }
.position-grid__cell:has(input:checked) {
    background: var(--primary-soft);
    border-style: solid;
    border-color: var(--primary);
}
.position-grid__cell:has(input:focus-visible) {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

.position-grid__off {
    background: var(--surface-2);
    border: 1px solid var(--border);
    cursor: not-allowed;
}

.position-grid__dot {
    display: grid; place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--surface);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .12s, transform .12s;
}
.position-grid__cell:hover .position-grid__dot { opacity: .32; transform: none; }
.position-grid__cell:has(input:checked) .position-grid__dot { opacity: 1; transform: none; }

/* ---------- Hint: a question mark that explains itself on hover ---------- */

.field-head { display: flex; align-items: center; margin-bottom: 6px; }
.field-head .form-label { margin-bottom: 0; }

/* ---------- Admin: editing an e-mail ---------- */

/* Editor and reference side by side, because the placeholders are useless if
   you have to leave the form to read them. */
.email-edit { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .email-edit { grid-template-columns: 1fr; } }

.token-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.token-row__code {
    font-size: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    white-space: nowrap;
}

.email-preview { width: 100%; height: 460px; border: 0; display: block; background: #f5f5f8; }

/* ---------- Knowledge: one collapsible panel per source type ---------- */

:root { interpolate-size: allow-keywords; }

.card--danger { border-color: var(--danger); }
.card--danger .card__head { color: var(--danger); }
.card--warn { border-color: var(--warn); }
.card--warn .card__head { color: var(--warn); }
.list__item--danger { display: flex; justify-content: flex-start; align-items: center; gap: 9px; color: var(--danger); }
.list__item--danger svg { flex-shrink: 0; }

.lang-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }

.lang-picker input[type="checkbox"] {
    position: absolute;
    width: 1px; height: 1px; margin: 0; padding: 0;
    opacity: 0; pointer-events: none;
}
.lang-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.lang-chip::before {
    content: "✓";
    display: grid; place-items: center;
    width: 16px; height: 16px; flex: none;
    font-size: 11px; font-weight: 700; line-height: 1;
    color: transparent;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    transition: background .12s, border-color .12s, color .12s;
}
.lang-chip:hover { background: var(--surface-2); }
input:checked + .lang-chip { border-color: var(--primary); background: var(--primary-soft); font-weight: 550; }
input:checked + .lang-chip::before { color: var(--surface); background: var(--primary); border-color: var(--primary); }
input:focus-visible + .lang-chip { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }

.source-switches { display: flex; flex-direction: column; gap: 14px; }

.lang-picker__over {
    display: none;
    align-items: center; gap: 8px;
    margin: 10px 0 0;
    font-size: 12.5px; color: var(--danger);
}
.lang-picker__over svg { flex-shrink: 0; }
.platform-setup[data-limit] .lang-picker {
    border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: 4px; margin: -4px;
    transition: border-color .12s;
}

.platform-setup[data-limit="1"]:has(.lang-picker input:checked ~ input:checked) .lang-picker__over { display: flex; }
.platform-setup[data-limit="1"]:has(.lang-picker input:checked ~ input:checked) .lang-picker { border-color: var(--danger); }
.platform-setup[data-limit="1"]:has(.lang-picker input:checked ~ input:checked) .platform-setup__go { pointer-events: none; opacity: .45; }
.platform-setup[data-limit="2"]:has(.lang-picker input:checked ~ input:checked ~ input:checked) .lang-picker__over { display: flex; }
.platform-setup[data-limit="2"]:has(.lang-picker input:checked ~ input:checked ~ input:checked) .lang-picker { border-color: var(--danger); }
.platform-setup[data-limit="2"]:has(.lang-picker input:checked ~ input:checked ~ input:checked) .platform-setup__go { pointer-events: none; opacity: .45; }
.platform-setup[data-limit="3"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker__over { display: flex; }
.platform-setup[data-limit="3"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker { border-color: var(--danger); }
.platform-setup[data-limit="3"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked) .platform-setup__go { pointer-events: none; opacity: .45; }
.platform-setup[data-limit="4"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker__over { display: flex; }
.platform-setup[data-limit="4"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker { border-color: var(--danger); }
.platform-setup[data-limit="4"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .platform-setup__go { pointer-events: none; opacity: .45; }
.platform-setup[data-limit="5"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker__over { display: flex; }
.platform-setup[data-limit="5"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker { border-color: var(--danger); }
.platform-setup[data-limit="5"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .platform-setup__go { pointer-events: none; opacity: .45; }
.platform-setup[data-limit="6"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker__over { display: flex; }
.platform-setup[data-limit="6"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker { border-color: var(--danger); }
.platform-setup[data-limit="6"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .platform-setup__go { pointer-events: none; opacity: .45; }
.platform-setup[data-limit="7"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker__over { display: flex; }
.platform-setup[data-limit="7"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker { border-color: var(--danger); }
.platform-setup[data-limit="7"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .platform-setup__go { pointer-events: none; opacity: .45; }
.platform-setup[data-limit="8"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker__over { display: flex; }
.platform-setup[data-limit="8"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker { border-color: var(--danger); }
.platform-setup[data-limit="8"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .platform-setup__go { pointer-events: none; opacity: .45; }
.platform-setup[data-limit="9"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker__over { display: flex; }
.platform-setup[data-limit="9"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker { border-color: var(--danger); }
.platform-setup[data-limit="9"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .platform-setup__go { pointer-events: none; opacity: .45; }
.platform-setup[data-limit="10"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker__over { display: flex; }
.platform-setup[data-limit="10"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .lang-picker { border-color: var(--danger); }
.platform-setup[data-limit="10"]:has(.lang-picker input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked) .platform-setup__go { pointer-events: none; opacity: .45; }

.hash-block:has(input[id$="_useAccessHash"]:not(:checked)) .choice-fields { display: none; }
.hash-block .choice-fields { margin-top: 12px; }

.source-row { align-items: flex-start; gap: 14px; }
.source-row__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.source-row__title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.source-row__url {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; color: var(--text);
}
.source-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.source-row .row-actions { padding-top: 1px; }

@media (max-width: 620px) {
    .source-row { flex-direction: column; }
    .source-row .row-actions { align-self: flex-end; }
}

.sources { display: flex; flex-direction: column; gap: 8px; }
.source-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.source-panel[open] { border-color: var(--border-strong); }

.source-panel__head {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px;
    cursor: pointer;
    list-style: none;
}
.source-panel__head::-webkit-details-marker { display: none; }
.source-panel__head:hover { background: var(--surface-2); }

.source-panel__head { border-radius: inherit; }
.source-panel[open] .source-panel__head {
    border-bottom: 1px solid var(--border);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.source-panel__mark {
    width: 22px; height: 22px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
}
.source-panel__mark--done    { background: var(--success-soft); color: var(--success); }
.source-panel__mark--missing { background: var(--danger-soft);  color: var(--danger); }
.source-panel__mark--optional{ background: var(--surface-2);    color: var(--text-faint); }
.source-panel__mark--pending { background: var(--warning-soft); color: var(--warning); }

.source-panel__verify {
    display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
    padding: 10px 12px; margin-bottom: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.source-panel__verify form { flex: none; }

.source-panel__text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.source-panel__body { padding: 14px 13px 4px; }
.source-panel__body .form-actions { margin-top: 4px; }

.source-panel__chevron { display: flex; flex: none; color: var(--text-faint); transition: transform .22s ease; }
.source-panel[open] .source-panel__chevron { transform: rotate(180deg); }

@keyframes source-panel-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.source-panel[open] .source-panel__body { animation: source-panel-reveal .2s ease-out; }

@supports selector(::details-content) {
    .source-panel::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size .24s ease, content-visibility .24s allow-discrete;
    }
    .source-panel[open]::details-content { block-size: auto; }
    .source-panel[open] .source-panel__body { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .source-panel__chevron { transition: none; }
    .source-panel[open] .source-panel__body { animation: none; }
    @supports selector(::details-content) {
        .source-panel::details-content { transition: none; }
    }
}

@media (max-width: 560px) {
    .source-panel__head { flex-wrap: wrap; }
    .source-panel__text { flex-basis: 100%; order: 3; }
}

.notice {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 12px; margin-bottom: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}
.notice svg { flex-shrink: 0; margin-top: 1px; color: var(--text-faint); }
.notice strong { color: var(--text); font-weight: 600; }
.notice--key { background: var(--primary-soft); border-color: transparent; }
.notice--key svg { color: var(--primary); }
.notice--warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.notice--warn svg, .notice--warn strong { color: var(--warn); }

.ip-badge {
    display: inline-block;
    margin: 0 2px;
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    font-family: var(--mono); font-size: 12.5px; font-weight: 600;
    color: var(--text);
    user-select: all;
}

.section-title { font-size: 14px; font-weight: 600; margin: 0; }

.hint { position: relative; display: inline-flex; margin-left: 6px; }
.form-check .hint { margin-left: 0; }
.hint__mark {
    width: 16px; height: 16px; padding: 0;
    display: grid; place-items: center;
    font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    cursor: help;
    transition: color .12s, background .12s, border-color .12s;
}
.hint__mark:hover { color: var(--surface); background: var(--primary); border-color: var(--primary); }
.hint__mark:focus-visible {
    outline: none;
    color: var(--surface); background: var(--primary); border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

.hint__bubble {
    position: absolute; bottom: calc(100% + 9px); left: -9px;
    z-index: 30;
    width: max-content; max-width: 270px;
    padding: 9px 11px;
    font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left;
    color: #f4f4f8; background: #23233a;
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    opacity: 0; visibility: hidden;
    transition: opacity .12s, visibility .12s;
}
.hint__bubble::after {
    content: "";
    position: absolute; top: 100%; left: 12px;
    border: 5px solid transparent;
    border-top-color: #23233a;
}
.hint:hover .hint__bubble,
.hint__mark:focus-visible + .hint__bubble { opacity: 1; visibility: visible; }

@media (max-width: 520px) {
    .hint__bubble { max-width: min(270px, calc(100vw - 80px)); }
    .hint__mark:focus + .hint__bubble { opacity: 1; visibility: visible; }
}

/* ---------- Wizard shell ---------- */

.wizard { max-width: 720px; margin: 0 auto; }
.wizard--wide { max-width: 1060px; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.plan-card { display: flex; }
.plan-card > .card__body { display: flex; flex-direction: column; width: 100%; }
.plan-card__cta { margin-top: auto; padding-top: 14px; }

/* ---------- Wizard: persona sliders + opening hours grid ---------- */

.sliders { display: flex; flex-direction: column; gap: 20px; }

.sliders .form-control[type="range"] {
    display: block;
    padding: 0; height: 26px; border: 0; background: transparent;
    accent-color: var(--primary); cursor: pointer;
}
.sliders .form-control[type="range"]:focus { box-shadow: none; }

.slider__poles {
    display: flex; justify-content: space-between; gap: 16px;
    font-size: 12px; font-weight: 550; color: var(--text);
}
.slider__poles span:last-child { text-align: right; }

.switch-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.switch-row .field-head { margin-bottom: 0; }
.switch-row--ruled { padding-top: 18px; border-top: 1px solid var(--border); }

.switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.switch input {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%; margin: 0; padding: 0;
    opacity: 0; cursor: pointer;
}
.switch__track {
    display: block; position: relative;
    width: 42px; height: 23px;
    background: var(--border-strong);
    border-radius: 999px;
    transition: background .15s, box-shadow .15s;
}
.switch__track::after {
    content: "";
    position: absolute; top: 3px; left: 3px;
    width: 17px; height: 17px;
    background: var(--surface);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .15s;
}
.switch input:checked + .switch__track { background: var(--primary); }
.switch input:checked + .switch__track::after { transform: translateX(19px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--primary-ring); }

.hours { display: flex; flex-direction: column; gap: 6px; }
.hours__row {
    display: grid; grid-template-columns: 90px 110px 1fr 1fr;
    gap: 10px; align-items: center;
}
.hours__day { font-size: 13px; font-weight: 550; }
.hours__closed { display: flex; align-items: center; gap: 7px; }
.hours__closed .form-label { margin-bottom: 0; font-size: 12.5px; font-weight: 450; cursor: pointer; }
.hours__time { border: 1px solid transparent; border-radius: var(--radius-sm); }
.hours__time .form-control { padding: 6px 8px; }

.hours__row:has(.hours__closed input:checked) .hours__time {
    position: relative;
    background: var(--surface-2);
    border-color: var(--border);
}
.hours__row:has(.hours__closed input:checked) .hours__time .form-control { visibility: hidden; }
.hours__row:has(.hours__closed input:checked) .hours__time::after {
    content: "—";
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 13px; color: var(--text-faint);
}
.hours__row .mb-3 { margin-bottom: 0; }

@media (max-width: 620px) {
    .hours__row { grid-template-columns: 1fr 1fr; }
    .hours__day { grid-column: 1 / -1; }
}

/* ---------- Shop onboarding checklist banner ---------- */

.checklist-banner {
    border: 1px solid var(--danger);
    border-left-width: 4px;
    background: var(--danger-soft);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 22px;
}
.checklist-banner__head {
    display: flex; align-items: center; gap: 10px;
    font-weight: 650; color: #971c2b; margin-bottom: 4px;
}
.checklist-banner__lead { font-size: 13px; color: #971c2b; opacity: .85; margin: 0 0 14px; }
.checklist-banner ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist-banner li { display: flex; gap: 10px; align-items: flex-start; }
.checklist-banner li svg { flex-shrink: 0; margin-top: 2px; color: var(--danger); }
.checklist-banner li strong { display: block; font-size: 13.5px; }
.checklist-banner li span { font-size: 12.5px; color: var(--text-muted); }

/* Pole jednoho jazyka u ručně psaného zdroje. */
.lang-block {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px 4px;
    margin: 0 0 12px;
}
.lang-block > legend {
    padding: 0 6px;
    font-size: 13px;
    font-weight: 620;
    color: var(--text-muted);
}

/* Sekce přidaných zdrojů, jedna na typ. */
.source-group { border-bottom: 1px solid var(--border); }
.source-group:last-of-type { border-bottom: 0; }

/* Trojúhelníček prohlížeče se schovává třemi způsoby, protože každý funguje
   jinde: list-style ve Firefoxu, ::-webkit-details-marker ve starším WebKitu
   a ::marker v současném Chrome. Vlastní šipku kreslíme sami, aby se dala
   otáčet a stála vpravo. */
.source-group__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    cursor: pointer;
    list-style: none;
    font-weight: 560;
    transition: background .12s ease;
}
.source-group__head::-webkit-details-marker { display: none; }
.source-group__head::marker { content: ''; }
.source-group__head:hover { background: var(--surface-2); }
.source-group__head:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--primary-ring); }

.source-group__title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.source-group__title .faint { font-weight: 400; font-size: 13px; }

/* margin-left:auto drží odznak i šipku u pravého okraje, takže stavy všech
   sekcí stojí ve svislici pod sebou a jdou přečíst jedním pohledem. */
.source-group__head > .badge { margin-left: auto; flex: none; }
.source-group__chevron {
    display: flex;
    flex: none;
    color: var(--text-muted);
    transition: transform .15s ease;
}
.source-group[open] > .source-group__chevron,
.source-group[open] .source-group__chevron { transform: rotate(180deg); }
.source-group[open] > .source-group__head {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.source-group .list__item:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   Náhled agenta
   Chat, jak ho uvidí návštěvník e-shopu, otevřený přes celou obrazovku
   administrace. Pozice i barva se řídí nastavením, které dostane widget.js,
   takže se to musí umět postavit do obou dolních koutů a přijmout jakoukoli
   barvu, kterou zákazník vybere.
   --------------------------------------------------------------------------- */
.preview { position: fixed; inset: 0; z-index: 200; }
.preview__backdrop {
    position: absolute; inset: 0;
    background: rgba(12, 23, 49, .5);
    backdrop-filter: blur(3px);
}

/* Vysvětlivka drží nahoře na střed, ať nekoliduje s panelem v žádném koutu. */
.preview__note {
    position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
    width: min(560px, calc(100% - 32px));
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 15px;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-sm); line-height: 1.5;
}
.preview__note strong { flex: none; }
.preview__note span { color: var(--text-muted); }
.preview__note code { font-size: var(--fs-xs); }
.preview__x {
    flex: none; margin-left: auto;
    display: flex; padding: 4px; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-muted); cursor: pointer;
}
.preview__x:hover { background: var(--surface-2); color: var(--text); }

/*
   Jeviště je jen to místo stránky, kde widget stojí — proto position, ne grid.
   Pravidlo musí existovat pro KAŽDOU hodnotu WidgetPosition, jinak se panel u
   nepokryté volby propadne do výchozího rohu a náhled majiteli protiřečí tomu,
   co si právě vybral.
*/
.preview__stage { position: absolute; display: flex; flex-direction: column; gap: 12px; }

.preview__stage--top-left     { top: 92px;    left: 22px;  align-items: flex-start; }
.preview__stage--top-right    { top: 92px;    right: 22px; align-items: flex-end; }
.preview__stage--middle-left  { top: 50%;     left: 22px;  align-items: flex-start; transform: translateY(-50%); }
.preview__stage--middle-right { top: 50%;     right: 22px; align-items: flex-end;   transform: translateY(-50%); }
.preview__stage--bottom-left  { bottom: 22px; left: 22px;  align-items: flex-start; }
.preview__stage--bottom-right { bottom: 22px; right: 22px; align-items: flex-end; }
.preview__stage--bottom-center{ bottom: 22px; left: 50%;   align-items: center;     transform: translateX(-50%); }

/* Nahoře a uprostřed patří bublina nad panel — jinak ji panel odsune ze zorného pole. */
.preview__stage--top-left,
.preview__stage--top-right,
.preview__stage--middle-left,
.preview__stage--middle-right { flex-direction: column-reverse; }

.chatw {
    display: flex; flex-direction: column;
    width: min(378px, calc(100vw - 44px));
    height: min(560px, calc(100vh - 150px));
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Sbalený stav: zůstane jen bublina, jako když návštěvník chat zavře. */
.preview--collapsed .chatw { display: none; }

/*
   Popředí na zákazníkově barvě. Bílá na tmavé, tmavá na světlé — bez toho je
   žlutá nebo pastelová značka v hlavičce nečitelná.
*/
.chatw--accent { --chatw-on-accent: #ffffff; --chatw-accent-quiet: rgba(255, 255, 255, .72); }
.chatw--light-accent { --chatw-on-accent: #17172b; --chatw-accent-quiet: rgba(23, 23, 43, .6); }

.chatw__head {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 14px;
    background: var(--chatw-accent);
    color: var(--chatw-on-accent);
}
.chatw__avatar {
    flex: none;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .18);
    font-size: 17px; line-height: 1; overflow: hidden;
}
.chatw--light-accent .chatw__avatar { background: rgba(23, 23, 43, .1); }
.chatw__avatar img { width: 100%; height: 100%; object-fit: cover; }
.chatw__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.chatw__who strong { font-size: var(--fs-base); font-weight: 580; }
.chatw__who span { font-size: var(--fs-xs); color: var(--chatw-accent-quiet); }
.chatw__collapse {
    flex: none; display: flex; padding: 5px;
    border: 0; border-radius: var(--radius-sm);
    background: none; color: inherit; cursor: pointer; opacity: .8;
}
.chatw__collapse:hover { opacity: 1; background: rgba(255, 255, 255, .16); }
.chatw--light-accent .chatw__collapse:hover { background: rgba(23, 23, 43, .08); }

.chatw__log {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 9px;
    padding: 15px 14px;
    background: var(--bg);
}
.chatw__log:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--primary-ring); }

.chatw__msg {
    max-width: 84%;
    padding: 9px 12px;
    border-radius: var(--radius);
    font-size: var(--fs-sm); line-height: 1.55;
    overflow-wrap: anywhere;
}
/* Odstavce a odrážky v odpovědi agenta — stejně jako je kreslí widget. */
.chatw__msg .chatw__p { margin: 0; }
.chatw__msg .chatw__p + .chatw__p,
.chatw__msg .chatw__p + .chatw__list,
.chatw__msg .chatw__list + .chatw__p { margin-top: 7px; }
.chatw__msg .chatw__list { padding-left: 17px; }
.chatw__msg .chatw__list li { margin: 2px 0; }
.chatw__msg--agent {
    align-self: flex-start;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.chatw__msg--visitor {
    align-self: flex-end;
    background: var(--chatw-accent); color: var(--chatw-on-accent);
    border-bottom-right-radius: 4px;
}
.chatw__msg--error { border-color: var(--danger); color: var(--danger); }

/* Tři tečky, dokud model píše. */
.chatw__msg--typing { display: flex; gap: 4px; padding: 13px 13px; }
.chatw__msg--typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-faint);
    animation: chatw-blink 1.3s infinite;
}
.chatw__msg--typing span:nth-child(2) { animation-delay: .18s; }
.chatw__msg--typing span:nth-child(3) { animation-delay: .36s; }

@keyframes chatw-blink {
    0%, 60%, 100% { opacity: .28; }
    30%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .chatw__msg--typing span { animation: none; opacity: .5; }
}

.chatw__form {
    flex: none; display: flex; align-items: center; gap: 8px;
    padding: 11px 12px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.chatw__input {
    flex: 1 1 auto; min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border-strong); border-radius: 999px;
    font: inherit; font-size: var(--fs-sm); color: var(--text);
    background: var(--surface);
}
.chatw__input:focus { outline: none; border-color: var(--chatw-accent); }
.chatw__input:disabled { background: var(--surface-2); color: var(--text-faint); }
.chatw__send {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: var(--chatw-accent); color: var(--chatw-on-accent);
    cursor: pointer;
}
.chatw__send:disabled { opacity: .45; cursor: default; }
.chatw__send:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }

.chatw__launcher {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border: 0; border-radius: 50%;
    background: var(--chatw-accent); color: var(--chatw-on-accent);
    box-shadow: var(--shadow-lg);
    font-size: 25px; line-height: 1; cursor: pointer; overflow: hidden;
}
.chatw__launcher img { width: 100%; height: 100%; object-fit: cover; }
.chatw__launcher:focus-visible { outline: none; box-shadow: var(--shadow-lg), 0 0 0 3px #ffffff; }

/* Administrace za backdropem se nesmí posouvat, dokud je náhled otevřený. */
body.has-modal { overflow: hidden; }

/*
   Na úzkém displeji zabere náhled celou plochu a vysvětlivka jde nad panel,
   protože v koutu by se 378px širokého panelu vedle ní nevešlo nic.
*/
@media (max-width: 560px) {
    /*
       Na úzkém displeji je pozice nezajímavá — panel zabere celou šířku, ať si
       zákazník vybral cokoli. Selektor proto míří na jeviště jako takové a
       přepisuje i transform, který by ho jinak odsunul mimo obrazovku.
    */
    .preview__stage[class] {
        top: auto; left: 12px; right: 12px; bottom: 12px;
        align-items: stretch; flex-direction: column; transform: none;
    }
    .chatw { width: auto; height: calc(100vh - 190px); }
    .chatw__launcher { align-self: flex-end; }
}

/*
   Produktové karty pod odpovědí — v náhledu i v přepisu konverzace. Obrázek,
   cena a skladovost jsou to, podle čeho se zákazník rozhoduje; samotná věta
   s odkazem tohle nesvede.
*/
.chatw__cards {
    display: flex; gap: 10px; margin-top: 2px; padding-bottom: 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.chatw__card {
    flex: 0 0 min(44%, 200px); min-width: 142px; scroll-snap-align: start;
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); text-decoration: none;
}
.chatw__card:hover { border-color: var(--chatw-accent, var(--primary)); text-decoration: none; }
.chatw__card-media { display: flex; align-items: center; justify-content: center; height: 120px; background: #ffffff; }
.chatw__card-img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.chatw__card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 10px; }
.chatw__card-title, .chatw__card-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chatw__card-title { font-size: var(--fs-sm); font-weight: 580; line-height: 1.3; }
.chatw__card-desc { font-size: var(--fs-xs); line-height: 1.35; color: var(--text-muted); }
.chatw__card-price { margin-top: auto; padding-top: 2px; font-size: var(--fs-sm); font-weight: 680; }
.chatw__card-stock { font-size: var(--fs-xs); color: var(--text-faint); }
.chatw__card-cta {
    margin-top: 6px; padding: 7px 10px; border-radius: 999px; text-align: center;
    background: var(--chatw-accent, var(--primary)); color: var(--chatw-on-accent, #ffffff); font-size: var(--fs-xs); font-weight: 600;
}

/*
   Nabídnuté otázky v chatu.
   Účel je snížit práh: prázdné okno nutí návštěvníka vymyslet otázku, tohle mu
   nabídne hotovou. Zarovnané doleva k odpovědi agenta, protože patří k ní, ne
   k tomu, co napsal návštěvník.
*/
.chatw__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.chatw__chip {
    padding: 7px 13px;
    border: 1px solid var(--chatw-accent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--chatw-accent);
    font: inherit; font-size: var(--fs-sm); font-weight: 520;
    line-height: 1.3; text-align: left;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.chatw__chip:hover { background: var(--chatw-accent); color: var(--chatw-on-accent); }
.chatw__chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }
.chatw__chip--contact { font-weight: 650; }

/* Karta po kliknutí na „Kontaktovat eshop“: řádky pod sebou, jako ve widgetu. */
.chatw__contact { display: flex; flex-direction: column; gap: 3px; white-space: normal; }
.chatw__msg a { color: inherit; text-decoration: underline; }

/*
   Světlá značka: obrys ve vlastní barvě by na bílé nebyl vidět, tak se u ní
   drží text čitelný a okraj se jen ztmaví.
*/
.chatw--light-accent .chatw__chip { color: var(--text); border-color: var(--border-strong); }
.chatw--light-accent .chatw__chip:hover { background: var(--chatw-accent); color: var(--chatw-on-accent); }

/*
   Test modelů v adminu: tentýž chat jako náhled agenta, jen víc sloupců
   vedle sebe a pod každou odpovědí, co stála. Na telefonu pod sebou.
*/
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.chatw--compare {
    width: auto;
    height: min(620px, calc(100vh - 220px));
    min-height: 380px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.chatw__meta { font-size: var(--fs-xs); color: var(--text-faint); margin-top: -4px; }

/*
   Přepis konverzace v administraci. Návštěvník vpravo, agent vlevo — stejně
   jako v chatu, aby se v tom majitel e-shopu vyznal na první pohled.
*/
.transcript { display: flex; flex-direction: column; gap: 12px; }
.transcript__turn { max-width: 82%; }
.transcript__turn--agent { align-self: flex-start; }
.transcript__turn--user { align-self: flex-end; }
.transcript__who { font-size: var(--fs-xs); color: var(--text-faint); margin-bottom: 3px; }
.transcript__cards { margin-top: 6px; }
.transcript__turn--user .transcript__who { text-align: right; }
.transcript__text {
    padding: 9px 12px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: var(--fs-sm); line-height: 1.55;
    overflow-wrap: anywhere;
}
.transcript__turn--user .transcript__text {
    background: var(--primary); color: #ffffff; border-color: transparent;
}
.transcript__text a { color: inherit; text-decoration: underline; }
.transcript__text p { margin: 0; }
.transcript__text p + p, .transcript__text ul { margin-top: 7px; }
.transcript__text ul { padding-left: 17px; }
.transcript__text li { margin: 2px 0; }
/* Čárkovaně: tohle agent nabídl, ne řekl. */
.transcript__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.transcript__chip {
    padding: 4px 10px;
    border: 1px dashed var(--border-strong); border-radius: 999px;
    color: var(--text-faint); font-size: var(--fs-xs);
}
.convo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.convo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pět řádků pro nabídnuté otázky v průvodci, pod sebou. */
.quick-replies { display: flex; flex-direction: column; gap: 8px; }
.quick-replies__language { font-size: 13px; font-weight: 650; margin: 0 0 8px; }
.quick-replies + .quick-replies__language { margin-top: 16px; }
.quick-reply { display: flex; align-items: center; gap: 10px; }
.quick-reply .form-control { flex: 1 1 auto; min-width: 0; }
.quick-reply__remove {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-faint);
    cursor: pointer;
}
.quick-reply__remove:hover { background: var(--surface-2); color: var(--danger); }
.quick-reply__remove:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }

/*
   Kód pro vložení na web.
   Musí jít přečíst a zkopírovat přesně — proto monospace, zalomení zachované
   a vodorovné rolování místo zalamování: zalomený atribut vypadá jako nový
   řádek kódu a zákazník ho pak vloží rozbitý.
*/
.embed__code {
    margin: 0 0 12px;
    padding: 13px 15px;
    background: var(--primary);
    color: #e8ecf4;
    border-radius: var(--radius-sm);
    font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
    white-space: pre; overflow-x: auto;
    -webkit-user-select: all; user-select: all;
}

/*
   Čekací obrazovka po průvodci.
   Jedna věc na stránce, vycentrovaná — zákazník tu nemá co dělat, jen čeká,
   takže cokoli dalšího by ho jen svádělo odejít dřív, než se dozví výsledek.
*/
.prep { max-width: 540px; margin: 40px auto; }
.prep__body { text-align: center; padding: 34px 28px 28px; }
.prep__stage { font-size: var(--fs-lg); margin: 18px 0 10px; }
.prep__lead { color: var(--text-muted); margin: 0 0 6px; }
.prep__counts { margin: 0 0 18px; }

/*
   Full-width strip fixed to the very top of the viewport — the wait is for
   the whole page, not just this card, so the indicator spans it too. Width
   is set inline by shop-preparing.js from the polled stage; the transition
   here is what makes each jump look like progress instead of a snap.
*/
.page-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--border);
    z-index: 100;
}
.page-progress__fill {
    height: 100%;
    width: 0%;
    background: var(--primary);
    transition: width .5s ease;
}

/* Hotovo: pruh dotáhne do plné barvy, ať je konec vidět i bez čtení. */
.prep--done .page-progress__fill { background: var(--success); }

/*
   Zaseklo se. Skoro vždy to znamená, že neběží worker — viz README —, takže
   pruh zežloutne místo aby dál sliboval postup, který nenastane.
*/
.prep--stuck .page-progress__fill { background: var(--warn); }
.prep--stuck .prep__lead::after {
    content: ' Zdá se, že se zpracování zaseklo. Obsah se doplní při nočním běhu, nebo ho spusťte znovu ze stránky e-shopu.';
    color: var(--warn);
}

@media (prefers-reduced-motion: reduce) {
    .page-progress__fill { transition: none; }
}

/* ---------- 404 ---------- */

.error-page {
    max-width: 420px;
    margin: 15vh auto 0;
    padding: 0 20px;
    text-align: center;
}
.error-page__code {
    margin: 0;
    font-family: var(--font);
    font-size: 4rem;
    font-weight: 500;
    color: var(--primary);
    line-height: 1;
}
.error-page__title { margin: 8px 0 0; font-size: var(--fs-xl); }
.error-page__lead { margin: 8px 0 24px; color: var(--text-muted); }

.convo-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.transcript__rating { margin-top: 6px; font-size: 13px; color: var(--text-faint); }
.transcript__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }