/* Components CSS for Bedding Shope (beddingshope.click) */

.site-rail {
    width:var(--rail-w);
    flex-shrink:0;
    background-color:var(--surface);
    border-right:1px solid var(--line);
    position:sticky;
    top:0;
    height:100vh;
    z-index:120;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    padding:var(--space-s) 0;
}

.rail-top {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--space-s);
}

.rail-mark-link {

    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:var(--radius-s);

    transition:background-color var(--dur-tactile) var(--ease-out),
                            transform var(--dur-tactile) var(--ease-out);
}

.rail-mark-link:hover {
    background-color:var(--surface-2);
    transform:scale(1.04);

}

.rail-mark-link:active {
    background-color:var(--line);
    transform:scale(0.96);
}

.rail-mark-img {
    height:32px;
    width:auto;
}

.rail-toggle {
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:46px;
    min-height:46px;
    padding:4px;
    background:transparent;
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    color:var(--ink);
    transition:background-color var(--dur-tactile) var(--ease-out),
                            border-color var(--dur-tactile) var(--ease-out),
                            transform var(--dur-tactile) var(--ease-out);
}

.rail-toggle:hover {
    background-color:var(--surface-2);
    border-color:var(--ink);
}

.rail-toggle:active {
    background-color:var(--line);
    transform:scale(0.96);
}

.rail-toggle .icon {
    width:20px;
    height:20px;
}

.rail-toggle-label {
    font-family:var(--gizi-8c0);
    font-size:var(--type-micro);
    text-transform:uppercase;
    letter-spacing:0.05em;
    margin-top:2px;
}

.rail-spine {
    display:flex;
    align-items:center;
    justify-content:center;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-family:var(--gizi-8c0);
    font-size:var(--type-micro);
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--ink-soft);
    user-select:none;
}

.rail-bottom {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--space-xs);
}

.rail-action {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:var(--radius-s);
    color:var(--ink);
    border:1px solid transparent;
    transition:background-color var(--dur-tactile) var(--ease-out),
                            border-color var(--dur-tactile) var(--ease-out);
}

.rail-action:hover {
    background-color:var(--surface-2);
    border-color:var(--line);
}

.rail-action:active { background-color:var(--line); }

/* Mobile Edge Header / Top Affordance */
.site-header {
    display:none;
    background-color:rgba(223, 215, 213, 0.94);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:110;
    height:var(--header-h);
    width:100%;
}

.site-header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:100%;
    padding-inline:var(--space-s);
    max-width:var(--measure-wide);
    margin-inline:auto;
}

.header-brand {
    display:inline-flex;
    align-items:center;
    height:100%;
    min-height:44px;
}

.header-logo-img {
    height:2.1rem;
    width:auto;
    max-width:220px;
}

.header-toggle {
    display:inline-flex;
    align-items:center;
    gap:var(--space-2xs);
    min-height:44px;
    padding:0.4rem 0.85rem;
    background-color:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    color:var(--ink);
    font-family:var(--gizi-8c0);
    font-size:var(--type-caption);
    text-transform:uppercase;
    letter-spacing:0.05em;
    transition:background-color var(--dur-tactile) var(--ease-out),
                            border-color var(--dur-tactile) var(--ease-out),
                            transform var(--dur-tactile) var(--ease-out);
}

.header-toggle:hover {
    background-color:var(--surface-2);
    border-color:var(--ink);
}

.header-toggle:active {
    background-color:var(--line);
    transform:scale(0.97);
}

/* Fullscreen Overlay Menu */
.menu-overlay {
    position:fixed;
    inset:0;
    z-index:150;
    background-color:var(--ground);
    display:grid;
    grid-template-columns:1fr 380px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity var(--dur-deliberate) var(--ease-standard),
                            visibility var(--dur-deliberate) var(--ease-standard);
    overflow-y:auto;
}

.menu-overlay[data-open="true"] {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.menu-content {
    padding:var(--space-xl) var(--space-l);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:100%;
}

.menu-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:var(--space-l);
    border-bottom:1px solid var(--line);
    padding-bottom:var(--space-s);
}

.menu-close {
    display:inline-flex;
    align-items:center;
    gap:var(--space-2xs);
    min-height:44px;
    padding:0.5rem 1rem;
    background-color:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    color:var(--ink);
    font-family:var(--gizi-8c0);
    font-size:var(--type-caption);
    text-transform:uppercase;
    letter-spacing:0.05em;
    transition:background-color var(--dur-tactile) var(--ease-out),
                            border-color var(--dur-tactile) var(--ease-out),
                            transform var(--dur-tactile) var(--ease-out);
}

.menu-close:hover {
    background-color:var(--surface-2);
    border-color:var(--ink);
}

.menu-close:active {
    background-color:var(--line);
    transform:scale(0.97);
}

.menu-nav-list {
    display:flex;
    flex-direction:column;
    gap:var(--space-xs);
}

.menu-link {
    font-family:var(--gizi-70f);
    font-size:clamp(1.4rem, 1.2rem + 1.2vw, 2.3rem);
    line-height:1.2;
    color:var(--ink);
    display:inline-flex;
    align-items:baseline;
    gap:var(--space-xs);
    padding-block:var(--space-2xs);
    border-bottom:1px solid transparent;
    transition:color var(--dur-tactile) var(--ease-out),
                            padding-left var(--dur-tactile) var(--ease-out);
}

.menu-link:hover {
    color:var(--accent);
    padding-left:var(--space-2xs);
}

.menu-link:active { color:var(--ink); }

.menu-link[aria-current="page"] {
    color:var(--accent);
    font-weight:700;
}

.menu-link-sub {
    font-family:var(--gizi-8c0);
    font-size:var(--type-micro);
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.menu-secondary-row {
    margin-top:var(--space-l);
    padding-top:var(--space-s);
    border-top:1px solid var(--line);
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-m);
}

.menu-sec-link {
    font-family:var(--gizi-8c0);
    font-size:var(--type-caption);
    color:var(--ink-soft);
    min-height:44px;
    display:inline-flex;
    align-items:center;
    transition:color var(--dur-tactile) var(--ease-out);
}

.menu-sec-link:hover { color:var(--accent); }

.menu-sec-link:active { color:var(--ink); }

.menu-aside {
    background-color:var(--surface);
    border-left:1px solid var(--line);
    padding:var(--space-xl) var(--space-m);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.menu-figure { margin-bottom:var(--space-m); }

.menu-figure-img {
    width:100%;
    aspect-ratio:4 / 5;
    object-fit:cover;
    border-radius:var(--radius-s);
    margin-bottom:var(--space-xs);
}

.menu-figure-caption {
    font-size:var(--type-caption);
    color:var(--ink-soft);
    line-height:var(--line-tight);
}

.menu-aside-meta {
    font-family:var(--gizi-8c0);
    font-size:var(--type-caption);
    color:var(--ink);
    line-height:1.6;
}

/* -------------------------------------------------------------
    2. BUTTONS & ACTIONS
    ------------------------------------------------------------- */

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2xs);
    min-height:48px;
    padding:0.75rem 1.65rem;
    font-family:var(--gizi-8c0);
    font-size:var(--type-caption);
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.06em;
    border-radius:var(--radius-xs);
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none;
    white-space:normal;
    text-align:center;
    line-height:1.25;
    transition:background-color var(--dur-tactile) var(--ease-out),
                            color var(--dur-tactile) var(--ease-out),
                            border-color var(--dur-tactile) var(--ease-out),
                            box-shadow var(--dur-tactile) var(--ease-out),
                            transform var(--dur-tactile) var(--ease-out);
}

.btn-primary {
    background-color:var(--accent);
    color:var(--accent-ink);
    border-color:var(--accent);
}

.btn-primary:hover {
    background-color:#8F4D4C;
    border-color:#8F4D4C;
    box-shadow:0 2px 8px rgba(169, 96, 95, 0.28);
}

.btn-primary:active {
    background-color:#7D4140;
    border-color:#7D4140;
    transform:translateY(1px);
}

.btn-secondary {
    background-color:var(--surface);
    color:var(--ink);
    border-color:var(--line);
}

.btn-secondary:hover {
    background-color:var(--surface-2);
    border-color:var(--ink);
    box-shadow:var(--shadow-subtle);
}

.btn-secondary:active {
    background-color:var(--line);
    transform:translateY(1px);
}

.btn-ghost {
    background-color:transparent;
    color:var(--ink);
    border-color:var(--line);
}

.btn-ghost:hover {
    background-color:var(--surface);
    border-color:var(--ink);
}

.btn-ghost:active {
    background-color:var(--surface-2);
    transform:translateY(1px);
}

.btn-inline {
    display:inline-flex;
    align-items:center;
    gap:var(--space-3xs);
    font-family:var(--gizi-8c0);
    font-size:var(--type-caption);
    color:var(--accent);
    font-weight:500;
    min-height:44px;
    border-bottom:1px solid transparent;
    transition:border-color var(--dur-tactile) var(--ease-out),
                            gap var(--dur-tactile) var(--ease-out),
                            color var(--dur-tactile) var(--ease-out);
}

.btn-inline:hover {
    border-bottom-color:var(--accent);
    gap:var(--space-2xs);
    color:#8F4D4C;
}

.btn-inline:active { color:#7D4140; }

.fact-inset {
    background-color:var(--surface);
    border-left:3px solid var(--accent);
    border-top:1px solid var(--line);
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:var(--space-m);
    margin-block:var(--space-l);
    border-radius:var(--radius-xs);
}

.fact-inset-title {
    font-family:var(--gizi-70f);
    font-size:var(--type-subtitle);
    margin-bottom:var(--space-xs);
    color:var(--ink);
}

.fact-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:var(--space-s);
    margin-top:var(--space-s);
}

.fact-item {
    display:flex;
    flex-direction:column;
}

.fact-label {
    font-family:var(--gizi-8c0);
    font-size:var(--type-micro);
    text-transform:uppercase;
    color:var(--ink-soft);
    letter-spacing:0.04em;
    margin-bottom:2px;
}

.fact-val {
    font-family:var(--gizi-8c0);
    font-size:var(--type-body-s);
    color:var(--ink);
    font-weight:500;
}

.spec-table-wrap {
    width:100%;
    overflow-x:auto;
    margin-block:var(--space-m);
    border:1px solid var(--line);
    border-radius:var(--radius-xs);
    background-color:var(--surface);
}

.spec-table {
    width:100%;
    border-collapse:collapse;
    font-size:var(--type-body-s);
    text-align:left;
}

.spec-table th,
.spec-table td {
    padding:0.75rem 1rem;
    border-bottom:1px solid var(--line);
}

.spec-table th {
    font-family:var(--gizi-8c0);
    font-size:var(--type-micro);
    text-transform:uppercase;
    letter-spacing:0.05em;
    background-color:var(--surface-2);
    color:var(--ink);
    font-weight:500;
}

.spec-table tr:last-child td { border-bottom:none; }

.spec-table td.numeric {
    font-family:var(--gizi-8c0);
    font-variant-numeric:tabular-nums;
}

.catalog-entry {
    padding-block:var(--space-l);
    border-bottom:1px solid var(--line);
}

.catalog-entry:first-of-type { border-top:1px solid var(--line); }

.catalog-header-row {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    flex-wrap:wrap;
    gap:var(--space-xs);
    margin-bottom:var(--space-xs);
}

.catalog-title {
    font-family:var(--gizi-70f);
    font-size:var(--type-title);
    color:var(--ink);
}

.catalog-title a { transition:color var(--dur-tactile) var(--ease-out); }

.catalog-title a:hover { color:var(--accent); }

.catalog-title a:active { color:var(--ink); }

.catalog-figure {
    margin-block:var(--space-m);
    width:100%;
}

.catalog-figure img {
    width:100%;
    aspect-ratio:16 / 9;
    object-fit:cover;
    border-radius:var(--radius-xs);
    border:1px solid var(--line);
}

.catalog-caption {
    margin-top:var(--space-2xs);
    font-size:var(--type-caption);
    color:var(--ink-soft);
    font-family:var(--gizi-da5);
    font-style:italic;
}

.catalog-meta-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--space-s);
    margin-top:var(--space-s);
}

.inquiry-panel {
    background-color:var(--surface);
    border:1px solid var(--line);
    padding:var(--space-l);
    border-radius:var(--radius-s);
    margin-block:var(--space-l);
}

.form-group {
    margin-bottom:var(--space-s);
    display:flex;
    flex-direction:column;
}

.form-label {
    font-family:var(--gizi-8c0);
    font-size:var(--type-caption);
    color:var(--ink);
    font-weight:500;
    margin-bottom:var(--space-3xs);
}

.form-label small {
    color:var(--ink-soft);
    font-weight:400;
}

.form-control {
    width:100%;
    min-height:46px;
    padding:0.65rem 0.85rem;
    background-color:var(--ground);
    border:1px solid var(--line);
    border-radius:var(--radius-xs);
    color:var(--ink);
    font-size:var(--type-body);
    transition:border-color var(--dur-tactile) var(--ease-out),
                            background-color var(--dur-tactile) var(--ease-out),
                            box-shadow var(--dur-tactile) var(--ease-out);
}

.form-control:hover { border-color:var(--ink-soft); }

.form-control:focus-visible {
    border-color:var(--accent);
    background-color:#FFF;
    outline:none;
    box-shadow:0 0 0 3px rgba(169, 96, 95, 0.2);
}

textarea.form-control {
    min-height:120px;
    resize:vertical;
}

.form-feedback {
    font-size:var(--type-caption);
    color:var(--ink-soft);
    margin-top:4px;
}

.form-feedback.is-error {
    color:#8C2B29;
    font-weight:500;
}

.form-group.has-error .form-control {
    border-color:#8C2B29;
    background-color:#F8EDED;
}

.form-checkbox-row {
    display:flex;
    align-items:flex-start;
    gap:var(--space-2xs);
    margin-block:var(--space-s);
}

.form-checkbox {
    width:20px;
    height:20px;
    margin-top:3px;
    accent-color:var(--accent);
    flex-shrink:0;
    cursor:pointer;
}

.form-checkbox-label {
    font-size:var(--type-caption);
    color:var(--ink);
    line-height:var(--line-tight);
}

.form-checkbox-label a {
    text-decoration:underline;
    text-underline-offset:2px;
}

.form-checkbox-label a:hover { color:var(--accent); }

.form-status {
    padding:var(--space-s);
    border-radius:var(--radius-xs);
    margin-block:var(--space-s);
    font-size:var(--type-body-s);
    display:none;
}

.form-status.is-visible { display:block; }

.form-status.is-error {
    background-color:#F5E5E5;
    border:1px solid #C98F8E;
    color:#7D2625;
}

.form-status.is-success {
    background-color:#E6EDE6;
    border:1px solid #9FBA9F;
    color:#2D542D;
}

.site-footer {
    background-color:var(--surface);
    border-top:1px solid var(--line);
    padding-block:var(--space-m) var(--space-s);
    margin-top:auto;
}

.footer-top-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:var(--space-m);
    margin-bottom:var(--space-s);
    padding-bottom:var(--space-s);
    border-bottom:1px solid var(--line);
}

.footer-brand-col {
    display:flex;
    flex-direction:column;
    gap:var(--space-2xs);
}

.footer-logo-img {
    height:2.1rem;
    width:auto;
    max-width:220px;
}

.footer-summary {
    font-size:var(--type-caption);
    color:var(--ink-soft);
    max-width:48ch;
    line-height:var(--line-tight);
}

.footer-col-title {
    font-family:var(--gizi-8c0);
    font-size:var(--type-caption);
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--ink);
    margin-bottom:var(--space-2xs);
    font-weight:500;
}

.footer-list {
    display:flex;
    flex-direction:column;
    gap:0;
}

.footer-link {
    font-size:var(--type-caption);
    color:var(--ink-soft);
    min-height:28px;
    display:inline-flex;
    align-items:center;
    transition:color var(--dur-tactile) var(--ease-out),
                            padding-left var(--dur-tactile) var(--ease-out);
}

.footer-link:hover {
    color:var(--accent);
    padding-left:4px;
}

.footer-link:active { color:var(--ink); }

.footer-legal-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-xs);
    padding-top:var(--space-2xs);
    font-family:var(--gizi-8c0);
    font-size:var(--type-caption);
    color:var(--ink-soft);
}

.footer-legal-links {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-s);
    align-items:center;
}

.footer-legal-link {
    color:var(--ink-soft);
    min-height:44px;
    display:inline-flex;
    align-items:center;
    text-decoration:underline;
    text-underline-offset:3px;
    transition:color var(--dur-tactile) var(--ease-out);
}

@media (pointer: coarse) {
    .footer-link { min-height:44px; }
}

.footer-legal-link:hover { color:var(--accent); }

.footer-legal-link:active { color:var(--ink); }

.footer-consent-trigger {
    font-family:var(--gizi-8c0);
    font-size:var(--type-caption);
    color:var(--ink-soft);
    min-height:44px;
    display:inline-flex;
    align-items:center;
    text-decoration:underline;
    text-underline-offset:3px;
    cursor:pointer;
    background:none;
    border:none;
    padding:0;
    transition:color var(--dur-tactile) var(--ease-out);
}

.footer-consent-trigger:hover { color:var(--accent); }

.footer-consent-trigger:active { color:var(--ink); }

.cookie-bar {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:180;
    background-color:var(--surface);
    border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(43, 40, 39, 0.08);
    padding:var(--space-xs) var(--space-m);
    transform:translateY(110%);
    transition:transform var(--dur-deliberate) var(--ease-standard);
}

.cookie-bar.is-visible { transform:translateY(0); }

.cookie-bar-inner {
    max-width:var(--measure-wide);
    margin-inline:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--space-s);
}

.cookie-bar-text {
    font-size:var(--type-caption);
    color:var(--ink);
    max-width:65ch;
    line-height:var(--line-tight);
}

.cookie-bar-text a {
    text-decoration:underline;
    text-underline-offset:2px;
    color:var(--accent);
}

.cookie-bar-actions {
    display:flex;
    gap:var(--space-xs);
    align-items:center;
    flex-shrink:0;
}

.btn-cookie-accept {
    min-height:44px;
    padding:0.5rem 1.15rem;
    background-color:var(--accent);
    color:var(--accent-ink);
    border:1px solid var(--accent);
    border-radius:var(--radius-xs);
    font-family:var(--gizi-8c0);
    font-size:var(--type-micro);
    text-transform:uppercase;
    letter-spacing:0.05em;
    font-weight:500;
    cursor:pointer;
    transition:background-color var(--dur-tactile) var(--ease-out),
                            box-shadow var(--dur-tactile) var(--ease-out),
                            transform var(--dur-tactile) var(--ease-out);
}

.btn-cookie-accept:hover {
    background-color:#8F4D4C;
    box-shadow:0 2px 6px rgba(169, 96, 95, 0.25);
}

.btn-cookie-accept:active {
    background-color:#7D4140;
    transform:translateY(1px);
}

.btn-cookie-decline {
    min-height:44px;
    padding:0.5rem 1.15rem;
    background-color:transparent;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:var(--radius-xs);
    font-family:var(--gizi-8c0);
    font-size:var(--type-micro);
    text-transform:uppercase;
    letter-spacing:0.05em;
    cursor:pointer;
    transition:background-color var(--dur-tactile) var(--ease-out),
                            border-color var(--dur-tactile) var(--ease-out),
                            transform var(--dur-tactile) var(--ease-out);
}

.btn-cookie-decline:hover {
    background-color:var(--surface-2);
    border-color:var(--ink);
}

.btn-cookie-decline:active {
    background-color:var(--line);
    transform:translateY(1px);
}

.chat-launcher {
    position:fixed;
    bottom:var(--space-s);
    right:var(--space-s);
    z-index:170;
    display:inline-flex;
    align-items:center;
    gap:var(--space-2xs);
    min-height:48px;
    padding:0.65rem 1.1rem;
    background-color:var(--surface);
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:999px;
    box-shadow:var(--shadow-card);
    cursor:pointer;
    font-family:var(--gizi-8c0);
    font-size:var(--type-caption);
    transition:transform var(--dur-tactile) var(--ease-out),
                            background-color var(--dur-tactile) var(--ease-out),
                            border-color var(--dur-tactile) var(--ease-out),
                            box-shadow var(--dur-tactile) var(--ease-out);
}

.chat-launcher:hover {
    background-color:var(--surface-2);
    border-color:var(--ink);
    transform:translateY(-2px);
    box-shadow:0 4px 14px rgba(43, 40, 39, 0.12);
}

.chat-launcher:active {
    background-color:var(--line);
    transform:translateY(0);
}

.chat-launcher .icon {
    width:18px;
    height:18px;
    color:var(--accent);
}

.chat-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background-color:var(--accent);
    color:var(--accent-ink);
    font-size:var(--type-micro);
    font-weight:600;
    border-radius:999px;
    min-width:18px;
    height:18px;
    padding:0 5px;
}

.chat-launcher.with-cookie-active { bottom:84px; }

.chat-panel {
    position:fixed;
    bottom:calc(var(--space-s) + 56px);
    right:var(--space-s);
    width:360px;
    max-width:calc(100vw - 2 * var(--space-s));
    height:480px;
    max-height:calc(100vh - 120px);
    background-color:var(--ground);
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    box-shadow:var(--shadow-overlay);
    z-index:175;
    display:flex;
    flex-direction:column;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(12px) scale(0.98);
    transition:opacity var(--dur-tactile) var(--ease-standard),
                            transform var(--dur-tactile) var(--ease-standard),
                            visibility var(--dur-tactile) var(--ease-standard);
}

.chat-panel.is-open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
}

.chat-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:var(--space-xs) var(--space-s);
    background-color:var(--surface);
    border-bottom:1px solid var(--line);
}

.chat-head-title {
    font-family:var(--gizi-70f);
    font-size:var(--type-body-l);
    color:var(--ink);
}

.chat-close {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:var(--radius-xs);
    color:var(--ink);
    transition:background-color var(--dur-tactile) var(--ease-out);
}

.chat-close:hover { background-color:var(--surface-2); }

.chat-close:active { background-color:var(--line); }

.chat-body {
    flex:1;
    overflow-y:auto;
    padding:var(--space-s);
    display:flex;
    flex-direction:column;
    gap:var(--space-xs);
}

.chat-msg {
    max-width:82%;
    padding:0.65rem 0.85rem;
    border-radius:var(--radius-xs);
    font-size:var(--type-body-s);
    line-height:var(--line-tight);
}

.chat-msg.msg-operator {
    background-color:var(--surface);
    border:1px solid var(--line);
    align-self:flex-start;
    color:var(--ink);
}

.chat-msg.msg-visitor {
    background-color:var(--accent);
    color:var(--accent-ink);
    align-self:flex-end;
}

.chat-init-box {
    background-color:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-xs);
    padding:var(--space-s);
    display:flex;
    flex-direction:column;
    gap:var(--space-2xs);
}

.chat-init-title {
    font-size:var(--type-caption);
    font-family:var(--gizi-8c0);
    text-transform:uppercase;
    color:var(--ink);
}

.chat-foot {
    padding:var(--space-xs) var(--space-s);
    background-color:var(--surface);
    border-top:1px solid var(--line);
}

.chat-form-row {
    display:flex;
    gap:var(--space-3xs);
}

.chat-input {
    flex:1;
    min-height:44px;
    padding:0.5rem 0.75rem;
    background-color:var(--ground);
    border:1px solid var(--line);
    border-radius:var(--radius-xs);
    font-size:var(--type-body-s);
    color:var(--ink);
}

.chat-input:focus-visible { border-color:var(--accent); }

.chat-send-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0.5rem 1rem;
    background-color:var(--accent);
    color:var(--accent-ink);
    border-radius:var(--radius-xs);
    font-family:var(--gizi-8c0);
    font-size:var(--type-caption);
    cursor:pointer;
    transition:background-color var(--dur-tactile) var(--ease-out);
}

.chat-send-btn:hover { background-color:#8F4D4C; }

.chat-send-btn:active { background-color:#7D4140; }

@media (max-width: 900px) {
    .menu-overlay { grid-template-columns:1fr; }

    .menu-aside { display:none; }

    .footer-top-grid {
        grid-template-columns:1fr;
        gap:var(--space-m);
    }
}

@media (max-width: 768px) {
    .site-rail { display:none; }

    .site-header { display:block; }

    .chat-launcher {
        bottom:var(--space-xs);
        right:var(--space-xs);
        padding:0.5rem 0.85rem;
        font-size:var(--type-micro);
    }

    .chat-panel {
        bottom:74px;
        right:var(--space-xs);
        left:var(--space-xs);
        width:auto;
        max-width:none;
    }

    .cookie-bar-inner {
        flex-direction:column;
        align-items:flex-start;
    }

    .cookie-bar-actions {
        width:100%;
        justify-content:flex-end;
    }
}