html body a.nav-link,
html body .site-header .nav-link,
html body nav .nav-link { color:#272a27 !important; }


html body div.diagram-card span.diagram-card-price,
html body div.diagram-card.is-active span.diagram-card-price { color:#6b3e05 !important; }


.site-header {
    background-color:var(--surface);
    border-bottom:1px solid var(--line);
    position:relative;
    width:100%;
    z-index:40;
}


.header-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.85rem var(--frame-pad);
    gap:1.5rem;
    min-height:64px;
}


.brand {
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    border:0;
    max-width:38vw;
    flex-shrink:0;
}


.brand img {
    height:2.1rem;
    width:auto;
    object-fit:contain;
    display:block;
}


.brand:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:3px;
}


.header-nav { display:none; }


@media (min-width: 1080px) {
    .header-nav {
        display:flex;
        align-items:center;
        gap:0.25rem;
    }
}


.header-nav-list {
    display:flex;
    align-items:center;
    gap:0.25rem;
    list-style:none;
}


.nav-link {
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    padding:0.5rem 0.85rem;
    font-size:var(--text-sm);
    font-weight:600;
    color:var(--ink) !important;
    text-decoration:none;
    border-radius:var(--radius-xs);
    min-height:44px;
    line-height:1;
    white-space:nowrap;
    transition:background-color var(--dur-fast) var(--ease-out),
                            color var(--dur-fast) var(--ease-out),
                            box-shadow var(--dur-fast) var(--ease-out);
}


.nav-link:hover {
    background-color:var(--surface-2);
    color:var(--accent);
}


.nav-link:active {
    background-color:var(--ground);
    color:var(--accent-active);
    transform:translateY(1px);
}


.nav-link:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
}


.nav-link[aria-current='page'] {
    background-color:var(--ground);
    color:var(--accent);
    box-shadow:inset 0 -2px 0 0 var(--accent);
    font-weight:600;
}


.header-action { display:none; }


@media (min-width: 1080px) {
    .header-action {
        display:flex;
        align-items:center;
    }
}


.phone-dock {
    position:fixed;
    inset:auto 0 0 0;
    width:100%;
    height:var(--dock-height);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    background-color:var(--surface);
    border-top:1px solid var(--line);
    box-shadow:0 -4px 18px rgba(39, 42, 39, 0.08);
    z-index:80;
    display:flex;
    align-items:stretch;
}


@media (min-width: 1080px) {
    .phone-dock { display:none !important; }
}


.dock-list {
    display:flex;
    width:100%;
    height:100%;

    margin:0;
    padding:0;
    list-style:none;
}


.dock-item {
    flex:1 1 0;
    display:flex;
    min-width:0;
}


.dock-link,
.dock-btn {
    appearance:none;
    -webkit-appearance:none;
    background:none;
    border:0;
    font:inherit;
    color:var(--ink-soft);
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    width:100%;
    height:100%;
    min-height:44px;
    padding:6px 4px;
    cursor:pointer;
    transition:color var(--dur-fast) var(--ease-out),
                            background-color var(--dur-fast) var(--ease-out);
}


.dock-link .icon,
.dock-btn .icon {
    width:22px;
    height:22px;
}


.dock-label {
    font-family:var(--zehe-90a);
    font-size:11px;
    line-height:1.1;
    font-weight:500;

    letter-spacing:-0.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}


.dock-link:hover,
.dock-btn:hover {
    color:var(--ink);
    background-color:var(--surface-2);
}


.dock-link:active,
.dock-btn:active {
    color:var(--accent);
    background-color:var(--ground);
}


.dock-link:focus-visible,
.dock-btn:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:-2px;
}


.dock-link[aria-current='page'] {
    color:var(--accent);
    font-weight:600;
}


.dock-link[aria-current='page'] .dock-label { font-weight:600; }


.drawer-backdrop {
    position:fixed;
    inset:0;
    background-color:rgba(39, 42, 39, 0.65);
    backdrop-filter:blur(4px);
    z-index:90;
    opacity:0;
    visibility:hidden;
    transition:opacity var(--dur-med) var(--ease-out),
                            visibility var(--dur-med) var(--ease-out);
}


.drawer-backdrop.is-open {
    opacity:1;
    visibility:visible;
}


.nav-drawer {
    position:fixed;
    inset:0 0 0 auto;
    width:100%;
    max-width:420px;
    height:100%;
    background-color:var(--surface);
    border-left:1px solid var(--line);
    box-shadow:var(--shadow-elevated);
    z-index:95;
    transform:translateX(100%);
    transition:transform var(--dur-med) var(--ease-out), visibility var(--dur-med) var(--ease-out);
    display:flex;
    flex-direction:column;
    padding:1.25rem var(--frame-pad);

    overflow-y:auto;
    visibility:hidden;
    pointer-events:none;
}


.nav-drawer.is-open {
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
}


.drawer-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:1rem;
    border-bottom:1px solid var(--line);
    margin-bottom:1.5rem;
}


.drawer-close {
    appearance:none;
    background:none;
    border:1px solid var(--line);
    padding:0.5rem;
    border-radius:var(--radius-xs);
    color:var(--ink);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    min-width:44px;
    cursor:pointer;
    transition:background-color var(--dur-fast) var(--ease-out),
                            color var(--dur-fast) var(--ease-out);
}


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


.drawer-close:active { background-color:var(--ground); }


.drawer-close:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
}


.drawer-nav-list {
    display:flex;
    flex-direction:column;
    gap:0.25rem;
    list-style:none;
}


.drawer-nav-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.85rem 1rem;
    font-size:var(--text-base);
    font-weight:500;
    color:var(--ink);
    text-decoration:none;
    border-radius:var(--radius-xs);
    min-height:48px;
    border-bottom:1px solid rgba(160, 167, 159, 0.3);
    transition:background-color var(--dur-fast) var(--ease-out),
                            color var(--dur-fast) var(--ease-out);
}


.drawer-nav-link:hover {
    background-color:var(--surface-2);
    color:var(--accent);
}


.drawer-nav-link:active { background-color:var(--ground); }


.drawer-nav-link:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
}


.drawer-nav-link[aria-current='page'] {
    background-color:var(--ground);
    color:var(--accent);
    font-weight:600;
}


.drawer-meta {
    margin-top:auto;
    padding-top:1.5rem;
    border-top:1px solid var(--line);
    font-size:var(--text-sm);
    color:var(--ink-soft);
    display:flex;
    flex-direction:column;
    gap:0.65rem;
}


.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.6rem;
    padding:0 1.5rem;
    height:48px;
    min-height:48px;
    max-height:48px;
    line-height:46px;
    font-family:var(--zehe-90a);
    font-size:var(--text-sm);
    font-weight:600;
    letter-spacing:0.01em;
    text-decoration:none;
    border-radius:var(--radius-xs);
    border:1px solid transparent;
    cursor:pointer;
    white-space:nowrap;
    text-align:center;
    transition:background-color var(--dur-fast) var(--ease-out),
                            color var(--dur-fast) var(--ease-out),
                            border-color var(--dur-fast) var(--ease-out),
                            box-shadow var(--dur-fast) var(--ease-out),
                            transform var(--dur-fast) var(--ease-out);
}


/* Primary accent button — strictly 10% accent */
.btn-primary {
    background-color:var(--accent);
    color:var(--accent-ink);
    border-color:var(--accent);
    box-shadow:0 2px 4px rgba(168, 101, 21, 0.2);
}


.btn-primary:hover {
    background-color:var(--accent-hover);
    border-color:var(--accent-hover);
    color:#ffffff;
    box-shadow:0 4px 10px rgba(168, 101, 21, 0.3);
}


.btn-primary:active {
    background-color:var(--accent-active);
    border-color:var(--accent-active);
    transform:translateY(1px);
    box-shadow:0 1px 2px rgba(168, 101, 21, 0.25);
}


.btn-primary:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:3px;
}


/* Secondary outline button */
.btn-secondary {
    background-color:transparent;
    color:var(--ink);
    border-color:var(--line);
}


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


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


.btn-secondary:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:3px;
}


.btn-text {
    background:none;
    border:0;
    border-radius:var(--radius-xs);
    padding:0 0.5rem;
    height:48px;
    min-height:48px;
    max-height:48px;
    line-height:48px;
    display:inline-flex;
    align-items:center;
    font-family:var(--zehe-90a);
    font-size:var(--text-sm);
    color:var(--ink);
    text-decoration:underline;
    text-underline-offset:4px;
    text-decoration-color:var(--line);
}


.btn-text:hover {
    color:var(--accent);
    text-decoration-color:var(--accent);
}


.btn-text:active { color:var(--accent-active); }


.btn-text:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
}


.tab-bar {
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--line);
    background-color:var(--surface);
    overflow-x:auto;
    scrollbar-width:thin;
    position:sticky;
    top:0;
    z-index:30;
}


.tab-btn {
    appearance:none;
    background:none;
    border:0;
    border-right:1px solid var(--line);
    padding:0.95rem 1.6rem;
    font-family:var(--zehe-90a);
    font-size:var(--text-sm);
    font-weight:500;
    color:var(--ink-soft);
    min-height:52px;
    cursor:pointer;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    transition:background-color var(--dur-fast) var(--ease-out),
                            color var(--dur-fast) var(--ease-out);
}


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


.tab-btn:active { background-color:var(--ground); }


.tab-btn:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:-2px;
}


.tab-btn[aria-selected='true'],
.tab-btn.is-active {
    background-color:var(--ground);
    color:var(--ink);
    font-weight:600;
    box-shadow:inset 0 -2px 0 0 var(--accent);
}


.tab-panel {
    display:none;
    padding:var(--section-pad) 0;
}


.tab-panel.is-active { display:block; }


.spec-list {
    display:flex;
    flex-direction:column;
    border-top:1px solid var(--line);
}


#panel-services .spec-item {
    padding:1.5rem 1.25rem;
    background-color:var(--ground);
    border:1px solid var(--line);
    border-left:3px solid var(--accent);
    border-radius:var(--radius-xs);
    margin-bottom:0.85rem;
    box-shadow:0 4px 12px rgba(39, 42, 39, 0.04);
}


.spec-item {
    display:grid;
    grid-template-columns:1fr;
    padding:1.5rem 0;
    border-bottom:1px solid var(--line);
    gap:0.75rem;
    transition:background-color var(--dur-fast) var(--ease-out);
}


@media (min-width: 640px) {
    .spec-item {
        grid-template-columns:1fr auto;
        align-items:baseline;
        gap:1.5rem;
    }
}


.spec-item:hover { background-color:rgba(213, 220, 212, 0.4); }


.spec-info {
    display:flex;
    flex-direction:column;
    gap:0.35rem;
}


.spec-title {
    font-family:var(--zehe-808);
    font-size:var(--text-xl);
    font-weight:600;
    color:var(--ink);
    text-decoration:none;
}


.spec-title:hover {
    color:var(--accent);
    text-decoration-color:var(--accent);
}


.spec-desc {
    font-size:var(--text-sm);
    color:var(--ink-soft);
    max-width:55ch;
}


.spec-metrics {
    display:flex;
    align-items:baseline;
    gap:1.25rem;
    flex-shrink:0;
}


.spec-duration {
    font-family:var(--zehe-6a0);
    font-size:var(--text-xs);
    color:var(--ink-soft);
    white-space:nowrap;
}


.spec-price {
    font-family:var(--zehe-6a0);
    font-size:var(--text-lg);
    font-weight:600;
    color:var(--accent);
    white-space:nowrap;
}


.table-wrap {
    width:100%;
    overflow-x:auto;
    border:1px solid var(--line);
    background-color:var(--ground);
    margin:1.5rem 0;
    scrollbar-width:thin;
}


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


.spec-table th,
.spec-table td {
    padding:0.95rem 1.25rem;
    border-bottom:1px solid var(--line);
    border-right:1px solid var(--line);
    vertical-align:middle;
}


.spec-table th:last-child,
.spec-table td:last-child { border-right:0; }


.spec-table th {
    background-color:var(--surface);
    font-family:var(--zehe-90a);
    font-weight:600;
    color:var(--ink);
    letter-spacing:0.02em;
}


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


.spec-table tr:hover td { background-color:rgba(213, 220, 212, 0.4); }


.form-panel {
    background-color:var(--surface);
    border:1px solid var(--line);
    padding:clamp(1.5rem, 1rem + 2vw, 2.75rem);
    border-radius:var(--radius-xs);
}


.form-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:1.25rem;
}


@media (min-width: 640px) {
    .form-grid-2 { grid-template-columns:1fr 1fr; }
}


.form-field {
    display:flex;
    flex-direction:column;
    gap:0.4rem;
    position:relative;
}


.form-label {
    font-size:var(--text-sm);
    font-weight:600;
    color:var(--ink);
    display:flex;
    justify-content:space-between;
    align-items:baseline;
}


.form-label .optional {
    font-size:var(--text-xs);
    font-weight:400;
    color:var(--ink-soft);
}


.form-input,
.form-select,
.form-textarea {
    width:100%;
    padding:0.75rem 0.95rem;
    min-height:48px;
    background-color:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius-xs);
    color:var(--ink);
    font-family:var(--zehe-90a);
    font-size:var(--text-base);
    transition:border-color var(--dur-fast) var(--ease-out),
                            background-color var(--dur-fast) var(--ease-out),
                            box-shadow var(--dur-fast) var(--ease-out);
}


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


.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color:var(--ink-soft);
    background-color:var(--ground);
}


.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline:none;
    border-color:var(--accent);
    background-color:#ffffff;
    box-shadow:0 0 0 3px rgba(168, 101, 21, 0.18);
}


.form-field.has-error .form-input,
.form-field.has-error .form-select,
.form-field.has-error .form-textarea {
    border-color:var(--error-line);
    background-color:var(--error-bg);
}


.field-error {
    font-size:var(--text-xs);
    color:var(--error-ink);
    min-height:1.15rem;
    display:block;
}


/* Checkbox control */
.checkbox-field {
    display:flex;
    align-items:flex-start;
    gap:0.75rem;
    padding:0.5rem 0;
    cursor:pointer;
}


.checkbox-input {
    appearance:none;
    -webkit-appearance:none;
    width:20px;
    height:20px;
    border:1px solid var(--line);
    background-color:var(--surface-2);
    border-radius:var(--radius-xs);
    flex-shrink:0;
    margin-top:0.2rem;
    cursor:pointer;
    display:grid;
    place-content:center;
    transition:background-color var(--dur-fast) var(--ease-out),
                            border-color var(--dur-fast) var(--ease-out);
}


.checkbox-input:checked {
    background-color:var(--accent);
    border-color:var(--accent);
}


.checkbox-input:checked::before {
    content:"";
    width:10px;
    height:6px;
    border-left:2px solid #ffffff;
    border-bottom:2px solid #ffffff;
    transform:rotate(-45deg) translate(1px, -1px);
}


.checkbox-input:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
}


.checkbox-label {
    font-size:var(--text-sm);
    color:var(--ink-soft);
    line-height:var(--leading-snug);
}


.form-alert {
    padding:1rem 1.25rem;
    border-radius:var(--radius-xs);
    font-size:var(--text-sm);
    display:none;
    margin-bottom:1rem;
}


.form-alert.is-success {
    display:block;
    background-color:#dde8da;
    border:1px solid #8fa389;
    color:#1e381a;
}


.form-alert.is-error {
    display:block;
    background-color:var(--error-bg);
    border:1px solid var(--error-line);
    color:var(--error-ink);
}


.site-footer {
    background-color:var(--surface);
    border-top:1px solid var(--line);
    margin-top:auto;
    position:relative;
    z-index:20;
}


.footer-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.75rem var(--frame-pad);
    border-bottom:1px solid var(--line);
    gap:1.5rem;
    flex-wrap:wrap;
}


.footer-brand {
    display:inline-flex;
    align-items:center;
    text-decoration:none;
}


.footer-brand img {
    height:2.35rem;
    width:auto;
    display:block;
}


.back-to-top {
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    font-size:var(--text-xs);
    font-family:var(--zehe-6a0);
    color:var(--ink);
    text-decoration:none;
    padding:0.5rem 0.85rem;
    border:1px solid var(--line);
    border-radius:var(--radius-xs);
    min-height:44px;
    background-color:var(--ground);
    transition:background-color var(--dur-fast) var(--ease-out),
                            color var(--dur-fast) var(--ease-out);
}


.back-to-top:hover {
    background-color:var(--surface-2);
    color:var(--accent);
}


.back-to-top:active { background-color:var(--surface); }


.back-to-top:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
}


.footer-nav-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:2.5rem;
    padding:3rem var(--frame-pad);
    border-bottom:1px solid var(--line);
}


.footer-group-title {
    font-family:var(--zehe-808);
    font-size:var(--text-lg);
    font-weight:600;
    color:var(--ink);
    margin-bottom:1rem;
}


.footer-links-list {
    display:flex;
    flex-direction:column;
    gap:0.6rem;
}


.footer-link {
    font-size:var(--text-sm);
    color:var(--ink-soft);
    text-decoration:none;
    min-height:28px;
    display:inline-flex;
    align-items:center;
    transition:color var(--dur-fast) var(--ease-out);
}


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


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


.footer-link:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
}


.footer-legal-bar {
    padding:1.5rem var(--frame-pad);
    display:flex;
    flex-direction:column;
    gap:1rem;
    font-size:var(--text-xs);
    color:var(--ink-soft);
}


@media (min-width: 800px) {
    .footer-legal-bar {
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
    }
}


.footer-facts {
    display:flex;
    flex-direction:column;
    gap:0.25rem;
    font-family:var(--zehe-6a0);
}


.footer-legal-links {
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    align-items:center;
}


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


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


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


.footer-legal-link:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
}


:root {
    --consent-bottom:0px;
    --consent-left:0px;
}


@media (min-width: 48rem) and (max-width: 1079px) {
    :root {
        --consent-bottom:calc(var(--dock-height) + env(safe-area-inset-bottom, 0px));
        --consent-left:1.25rem;
    }
}


.cookie-banner {
    position:fixed;
    inset:auto 0 0 0;
    width:100%;
    background-color:var(--surface);
    border-top:1px solid var(--line);
    box-shadow:var(--shadow-elevated);
    z-index:100;
    padding:0.5rem var(--frame-pad);
    max-height:22vh;
    overflow-y:auto;
    transition:transform var(--dur-med) var(--ease-out),
                            opacity var(--dur-med) var(--ease-out);
}


@media (max-width: 1079px) {
    .cookie-banner { bottom:calc(var(--dock-height) + env(safe-area-inset-bottom, 0px)); }
}


.cookie-banner[hidden] { display:none !important; }


.cookie-banner-inner {
    max-width:var(--site-max);
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:0.85rem;
    align-items:flex-start;
}


@media (min-width: 768px) {
    .cookie-banner-inner {
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:1.5rem;
    }
}


.cookie-text {
    font-size:var(--text-sm);
    color:var(--ink);
    line-height:var(--leading-snug);
    max-width:70ch;
}


.cookie-text a { color:var(--accent); }


.cookie-actions {
    display:flex;
    gap:0.65rem;
    flex-shrink:0;
    align-items:center;
}


.cookie-actions .btn {
    min-height:40px;
    padding:0.45rem 1rem;
    font-size:var(--text-xs);
}


.chat-launcher {
    position:fixed;
    bottom:calc(var(--dock-height) + env(safe-area-inset-bottom, 0px) + 12px);
    right:clamp(1rem, 1rem + 1vw, 2rem);
    z-index:70;
    appearance:none;
    background-color:var(--surface);
    border:1px solid var(--line);
    color:var(--ink);
    padding:0.65rem 1rem;
    border-radius:var(--radius-xs);
    min-height:48px;
    display:inline-flex;
    align-items:center;
    gap:0.65rem;
    font-family:var(--zehe-90a);
    font-size:var(--text-sm);
    font-weight:600;
    box-shadow:var(--shadow-card);
    cursor:pointer;
    transition:background-color var(--dur-fast) var(--ease-out),
                            color var(--dur-fast) var(--ease-out),
                            box-shadow var(--dur-fast) var(--ease-out),
                            transform var(--dur-fast) var(--ease-out);
}


@media (min-width: 1080px) {
    .chat-launcher { bottom:clamp(1.25rem, 1.25rem + 1vw, 2.5rem); }
}


.chat-launcher:hover {
    background-color:var(--surface-2);
    color:var(--accent);
    box-shadow:var(--shadow-elevated);
    transform:translateY(-1px);
}


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


.chat-launcher:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
}


.chat-badge {
    background-color:var(--accent);
    color:#ffffff;
    font-family:var(--zehe-6a0);
    font-size:11px;
    font-weight:600;
    padding:2px 6px;
    border-radius:10px;
    line-height:1;
    display:none;
}


.chat-badge.has-unread { display:inline-block; }


/* Chat window dialog */
.chat-panel {
    position:fixed;
    bottom:calc(var(--dock-height) + env(safe-area-inset-bottom, 0px) + 12px);
    right:clamp(0.5rem, 1rem + 1vw, 2rem);
    width:calc(100vw - 1rem);
    max-width:380px;
    height:520px;
    max-height:calc(100vh - var(--dock-height) - 40px);
    max-height:calc(100dvh - var(--dock-height) - 40px);
    background-color:var(--surface);
    border:1px solid var(--line);
    box-shadow:var(--shadow-elevated);
    border-radius:var(--radius-xs);
    z-index:85;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(16px);
    transition:opacity var(--dur-med) var(--ease-out),
                            transform var(--dur-med) var(--ease-out),
                            visibility var(--dur-med) var(--ease-out);
}


@media (min-width: 1080px) {
    .chat-panel {
        bottom:clamp(1.25rem, 1.25rem + 1vw, 2.5rem);
        max-height:560px;
    }
}


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


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


.chat-header-title {
    font-family:var(--zehe-808);
    font-size:var(--text-base);
    font-weight:600;
    color:var(--ink);
}


.chat-close {
    appearance:none;
    background:none;
    border:0;
    color:var(--ink);
    padding:0.35rem;
    min-height:44px;
    min-width:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border-radius:var(--radius-xs);
    transition:background-color var(--dur-fast) var(--ease-out),
                            color var(--dur-fast) var(--ease-out);
}


.chat-close:hover {
    background-color:var(--ground);
    color:var(--accent);
}


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


.chat-close:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:-1px;
}


.chat-body {
    flex:1;
    padding:1rem;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:0.75rem;
    background-color:var(--ground);
    font-size:var(--text-sm);
}


.chat-msg {
    padding:0.65rem 0.85rem;
    border-radius:var(--radius-xs);
    max-width:82%;
    line-height:var(--leading-snug);
}


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


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


.chat-msg-time {
    font-family:var(--zehe-6a0);
    font-size:10px;
    opacity:0.7;
    display:block;
    margin-top:3px;
}


.chat-footer {
    padding:0.75rem;
    background-color:var(--surface);
    border-top:1px solid var(--line);
}


.chat-form {
    display:flex;
    gap:0.5rem;
}


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


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


.chat-send {
    appearance:none;
    background-color:var(--accent);
    color:#ffffff;
    border:0;
    padding:0 0.85rem;
    min-height:44px;
    min-width:44px;
    border-radius:var(--radius-xs);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background-color var(--dur-fast) var(--ease-out);
}


.chat-send:hover { background-color:var(--accent-hover); }


.chat-send:active { background-color:var(--accent-active); }


.chat-send:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
}