/* wome134.css - KEE USA UI Components */



.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-xs);
    min-height:44px;

    height:44px;
    padding:0 1.25rem;
    font-family:var(--tuvu-d7a);
    font-size:var(--fs-sm);
    font-weight:600;
    line-height:1.2;
    text-decoration:none;
    border-radius:var(--radius-subtle);
    border:1px solid transparent;
    cursor:pointer;
    box-shadow:none;
    transition:background-color var(--dur-fast) var(--ease-out),
                            border-color var(--dur-fast) var(--ease-out),
                            color var(--dur-fast) var(--ease-out),
                            transform var(--dur-fast) var(--ease-out);
    white-space:normal;
    text-align:center;
}


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


.btn-primary:hover {
    background-color:#934f4e;
    border-color:#934f4e;
    color:var(--accent-ink);
    transform:translateY(-1px);
}


.btn-primary:active {
    background-color:#7d3f3e;
    border-color:#7d3f3e;
    transform:translateY(0);
}


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


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


.btn-secondary:hover {
    background-color:var(--surface);
    border-color:var(--ink);
    color:var(--ink);
    transform:translateY(-1px);
}


.btn-secondary:active {
    background-color:var(--surface-2);
    transform:translateY(0);
}


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


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


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


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


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


.btn-sm {
    min-height:44px;
    height:44px;
    padding:0 1.25rem;
    font-size:var(--fs-sm);
}



.site-header {
    position:static;
    width:100%;
    background-color:transparent;
    border-bottom:1px solid var(--line);
    padding-top:var(--space-sm);
    padding-bottom:var(--space-sm);
    z-index:100;
}


.site-header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-md);
    min-height:48px;
}


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


.brand img {
    height:2.1rem;
    width:auto;
    display:block;
}


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


.desk-nav { display:none; }


@media (min-width: 960px) {
    .desk-nav {
        display:flex;
        align-items:center;
        gap:var(--space-lg);
    }


    .desk-nav-list {
        display:flex;
        align-items:center;
        list-style:none;
        gap:1.75rem;
        margin:0;
        padding:0;
    }


    .desk-nav-link {
        font-family:var(--tuvu-d7a);
        font-size:var(--fs-sm);

        font-weight:500;
        color:var(--ink);
        text-decoration:none;
        padding:0.35rem 0;
        position:relative;
        transition:color var(--dur-fast) var(--ease-out);
    }


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


    .desk-nav-link:active { color:#7d3f3e; }


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


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


    .desk-nav-link[aria-current="page"]::after {
        content:"";
        position:absolute;
        bottom:-2px;
        left:0;
        right:0;
        height:2px;
        background-color:var(--accent);
    }


    .desk-nav-action { margin-left:0.5rem; }
}



.phone-dock {
    position:fixed;
    inset:auto 0 0 0;
    width:100%;
    height:var(--dock-height);
    background-color:var(--ground);
    border-top:1px solid var(--line);
    box-shadow:0 -2px 10px rgba(43, 40, 39, 0.05);
    padding-bottom:env(safe-area-inset-bottom);
    z-index:900;
    display:flex;
}


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


.dock-list {
    display:flex;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    list-style:none;
}


.dock-item {
    flex:1 1 0;
    height:100%;
    display:flex;
}


.dock-link,
.dock-toggle {
    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%;
    padding:4px 2px;
    cursor:pointer;
    transition:color var(--dur-fast) var(--ease-out),
                            background-color var(--dur-fast) var(--ease-out);
}


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


.dock-label {
    font-family:var(--tuvu-d7a);
    font-size:11px;
    line-height:1;
    font-weight:500;
    white-space:nowrap;
}


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


.dock-link:active,
.dock-toggle:active { background-color:var(--surface-2); }


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


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



.nav-drawer {
    position:fixed;
    inset:0;
    background-color:rgba(43, 40, 39, 0.45);
    backdrop-filter:blur(2px);
    z-index:1000;
    opacity:0;
    pointer-events:none;
    transition:opacity var(--dur-base) var(--ease-out);
}


.nav-drawer.is-open {
    opacity:1;
    pointer-events:auto;
}


.nav-drawer-panel {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    max-height:85vh;
    background-color:var(--ground);
    border-top:2px solid var(--ink);
    padding:var(--space-lg) var(--space-md) calc(var(--space-xl) + env(safe-area-inset-bottom));
    overflow-y:auto;
    transform:translateY(100%);
    transition:transform var(--dur-base) var(--ease-out);
    box-shadow:0 -4px 24px rgba(0, 0, 0, 0.12);
}


.nav-drawer.is-open .nav-drawer-panel { transform:translateY(0); }


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


.nav-drawer-title {
    font-family:var(--tuvu-dff);
    font-size:var(--fs-lg);
    color:var(--ink);
}


.nav-drawer-close {
    appearance:none;
    background:transparent;
    border:1px solid var(--line);
    padding:0.5rem;
    min-height:44px;
    min-width:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink);
    cursor:pointer;

    border-radius:var(--radius-subtle);
    transition:background-color var(--dur-fast) var(--ease-out),
                            border-color var(--dur-fast) var(--ease-out);
}


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


.nav-drawer-close:active { background-color:var(--surface-2); }


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


.nav-drawer-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
}


.nav-drawer-item { border-bottom:1px solid var(--line); }


.nav-drawer-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:var(--space-md) 0;
    font-family:var(--tuvu-dff);
    font-size:var(--fs-lg);
    color:var(--ink);
    text-decoration:none;
    min-height:48px;
    transition:color var(--dur-fast) var(--ease-out),
                            padding-left var(--dur-fast) var(--ease-out);
}


.nav-drawer-link:hover {
    color:var(--accent);
    padding-left:0.5rem;
}


.nav-drawer-link:active { color:#7d3f3e; }


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


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


.nav-drawer-contacts {
    margin-top:var(--space-xl);
    padding-top:var(--space-md);
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xs);
    color:var(--ink-soft);
    display:flex;
    flex-direction:column;
    gap:var(--space-2xs);
}


.nav-drawer-contacts a {
    color:var(--ink);
    text-decoration:none;
}


.nav-drawer-contacts a:hover { color:var(--accent); }



.exchange-unit {
    position:relative;
    border-top:1px solid var(--line);
    padding-top:clamp(2rem, 1.6rem + 2vw, 3.5rem);
    padding-bottom:clamp(2rem, 1.6rem + 2vw, 3.5rem);
}


@media (min-width: 900px) {
    .exchange-unit {
        display:grid;
        grid-template-columns:1fr 1.35fr;
        column-gap:clamp(2rem, 1.5rem + 2.5vw, 4rem);
        align-items:start;
    }
}


.exchange-unit:last-of-type { border-bottom:1px solid var(--line); }


.exchange-customer {
    margin-bottom:var(--space-lg);
    max-width:58ch;
}


@media (min-width: 900px) {
    .exchange-customer {
        margin-bottom:0;
        position:sticky;
        top:2rem;
    }
}


.customer-voice-label {
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xs);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:var(--space-2xs);
    display:block;
}


.customer-query {
    font-family:var(--tuvu-dff);
    font-size:var(--fs-xl);
    line-height:var(--lh-snug);
    color:var(--ink);
    padding-left:0;
    font-style:normal;
}


.exchange-reply {
    padding-left:clamp(1rem, 0.8rem + 1.2vw, 2.5rem);
    border-left:2px solid var(--line);
    max-width:68ch;
}


.operator-voice-label {
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xs);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:var(--space-2xs);
    display:block;
    font-weight:600;
}


.reply-text {
    font-size:var(--fs-base);
    line-height:var(--lh-base);
    color:var(--ink);
}


.reply-figure {
    margin-top:var(--space-lg);
    margin-bottom:var(--space-sm);
    width:100%;
}


.reply-figure img {
    width:100%;
    height:auto;
    border:1px solid var(--line);
}


.reply-caption {
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xs);
    color:var(--ink-soft);
    margin-top:var(--space-2xs);
}



.ledger-table {
    width:100%;
    border-top:2px solid var(--ink);
    border-bottom:1px solid var(--line);
    margin:var(--space-md) 0 var(--space-lg);
    font-size:var(--fs-sm);
}


.ledger-table th {
    padding:0.75rem 0.5rem;
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xs);
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--ink-soft);
    border-bottom:1px solid var(--line);
    font-weight:500;
}


.ledger-table td {
    padding:0.875rem 0.5rem;
    border-bottom:1px solid var(--line);
    color:var(--ink);
    vertical-align:middle;
}


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


.table-responsive {
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}



.card-editorial {
    background-color:var(--surface);
    border:1px solid var(--line);
    padding:clamp(1.25rem, 1rem + 1vw, 2.25rem);
    display:flex;
    flex-direction:column;
    gap:var(--space-sm);
    position:relative;
}


.card-editorial-badge {
    position:absolute;
    top:0;
    right:0;
    background-color:var(--ink);
    color:var(--ground);
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xs);
    padding:0.25rem 0.65rem;
    letter-spacing:0.05em;
}


.card-price {
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xl);
    font-weight:600;
    color:var(--ink);
    letter-spacing:-0.02em;
}



.form-group {
    display:flex;
    flex-direction:column;
    gap:0.35rem;
    margin-bottom:var(--space-md);
}


.form-label {
    font-family:var(--tuvu-d7a);
    font-size:var(--fs-sm);
    font-weight:600;
    color:var(--ink);
}


.form-label .optional {
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xs);
    font-weight:400;
    color:var(--ink-soft);
}


.form-control {
    width:100%;
    min-height:44px;
    height:44px;
    padding:0.5rem 0.875rem;
    background-color:var(--ground);
    border:1px solid var(--line);
    border-radius:var(--radius-subtle);
    color:var(--ink);
    font-family:var(--tuvu-d7a);
    font-size:var(--fs-base);
    box-shadow:none;
    transition:border-color var(--dur-fast) var(--ease-out),
                            background-color var(--dur-fast) var(--ease-out);
}


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


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


.form-control:focus {
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent);
}


.form-control.is-invalid {
    border-color:#a32220;
    background-color:#fbf5f5;
}


.form-hint {
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xs);
    color:var(--ink-soft);
}


.form-error {
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xs);
    color:#a32220;
    min-height:1.2em;
}


.form-check {
    display:flex;
    align-items:flex-start;
    gap:var(--space-xs);
    margin-top:var(--space-sm);
    margin-bottom:var(--space-md);
}


.form-check-input {
    appearance:none;
    width:20px;
    height:20px;
    border:1px solid var(--line);
    background-color:var(--ground);
    cursor:pointer;
    flex-shrink:0;
    margin-top:2px;
    position:relative;
    transition:border-color var(--dur-fast) var(--ease-out),
                            background-color var(--dur-fast) var(--ease-out);
}


.form-check-input:hover { border-color:var(--ink); }


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


.form-check-input:checked::after {
    content:"";
    position:absolute;
    top:3px;
    left:6px;
    width:5px;
    height:9px;
    border:solid var(--accent-ink);
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}


.form-check-input:focus-visible {
    outline:2px solid var(--ink);
    outline-offset:2px;
}


.form-check-label {
    font-size:var(--fs-sm);
    line-height:1.45;
    color:var(--ink);
    cursor:pointer;
}


.form-status {
    padding:var(--space-sm) var(--space-md);
    margin-bottom:var(--space-md);
    border-left:3px solid;
    font-size:var(--fs-sm);
    display:none;
}


.form-status.is-success {
    display:block;
    background-color:var(--surface);
    border-color:#2e6930;
    color:#173819;
}


.form-status.is-error {
    display:block;
    background-color:#fbf5f5;
    border-color:#a32220;
    color:#631210;
}



.site-footer {
    background-color:var(--surface);
    border-top:1px solid var(--line);
    padding-top:clamp(2.5rem, 2rem + 3vw, 5rem);
    padding-bottom:clamp(2rem, 1.5rem + 2vw, 3.5rem);
    margin-top:var(--space-3xl);
}


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


@media (min-width: 768px) {
    .footer-top { grid-template-columns:1.2fr 0.8fr 1fr; }
}


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


.footer-logo img {
    height:2.3rem;
    width:auto;
}


.footer-lede {
    font-size:var(--fs-sm);
    color:var(--ink-soft);
    max-width:38ch;
}


.footer-nav-col h3,
.footer-contact-col h3 {
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xs);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:var(--space-md);
}


.footer-nav-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-xs);
}


.footer-nav-link {
    font-size:var(--fs-sm);
    color:var(--ink);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:0.35rem 0;
    transition:color var(--dur-fast) var(--ease-out);
}


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


.footer-nav-link:active { color:#7d3f3e; }


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


.footer-contact-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-xs);
    font-size:var(--fs-sm);
    color:var(--ink);
}


.footer-contact-item {
    display:flex;
    align-items:flex-start;
    gap:var(--space-xs);
}


.footer-contact-item .icon {
    width:1rem;
    height:1rem;
    margin-top:3px;
    color:var(--ink-soft);
}


.footer-contact-item a {
    color:var(--ink);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    min-height:44px;
}


.footer-contact-item a:hover { color:var(--accent); }


.footer-bottom {
    padding-top:var(--space-lg);
    display:flex;
    flex-direction:column;
    gap:var(--space-sm);
}


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


.footer-copy {
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xs);
    color:var(--ink-soft);
}


.footer-legal-links {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-sm) var(--space-md);
    list-style:none;
    margin:0;
    padding:0;
}


.footer-legal-link {
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xs);
    color:var(--ink-soft);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:0.25rem 0;
    transition:color var(--dur-fast) var(--ease-out);
}


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


.footer-legal-link:active { color:#7d3f3e; }


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


.cookie-settings-btn {
    appearance:none;
    background:none;
    border:0;
    padding:0.25rem 0;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    font-family:var(--tuvu-8a6);
    font-size:var(--fs-xs);
    color:var(--ink-soft);
    cursor:pointer;
    text-decoration:underline;
    transition:color var(--dur-fast) var(--ease-out);
}


.cookie-settings-btn:hover { color:var(--accent); }


.cookie-settings-btn:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}



.cookie-banner {
    position:fixed;
    bottom:var(--dock-height);
    left:0;
    right:0;
    background-color:var(--ground);
    border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(43, 40, 39, 0.08);
    padding:0.75rem clamp(1rem, 0.8rem + 1vw, 2.5rem);
    padding-right:clamp(1rem, 0.8rem + 1vw, 2.5rem);
    z-index:850;
    transform:translateY(120%);
    transition:transform var(--dur-base) var(--ease-out);
}


@media (max-width: 767px) {
    body:has(.cookie-banner.is-active) .chat-launcher { bottom:calc(var(--dock-height) + 120px); }
}


@media (min-width: 960px) {
    .cookie-banner { bottom:0; }
}


.cookie-banner.is-active { transform:translateY(0); }


.cookie-banner-inner {
    max-width:var(--max-shell);
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:column;
    gap:var(--space-xs);
}


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


.cookie-banner-copy {
    font-size:var(--fs-xs);
    line-height:1.4;
    color:var(--ink);
    max-width:70ch;
}


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


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



.chat-launcher {
    position:fixed;
    bottom:calc(var(--dock-height) + 12px);
    right:16px;
    width:50px;
    height:50px;
    border-radius:var(--radius-subtle);
    background-color:var(--ink);
    color:var(--ground);
    border:1px solid var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:860;
    box-shadow:0 4px 12px rgba(43, 40, 39, 0.15);
    transition:background-color var(--dur-fast) var(--ease-out),
                            color var(--dur-fast) var(--ease-out),
                            transform var(--dur-fast) var(--ease-out),
                            border-color var(--dur-fast) var(--ease-out);
}


@media (min-width: 960px) {
    .chat-launcher {
        bottom:24px;
        right:24px;
    }
}


.chat-launcher:hover {
    background-color:var(--accent);
    border-color:var(--accent);
    color:var(--accent-ink);
    transform:translateY(-2px);
}


.chat-launcher:active {
    background-color:#7d3f3e;
    border-color:#7d3f3e;
    transform:translateY(0);
}


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


.chat-launcher .icon {
    width:24px;
    height:24px;
}


.chat-launcher-badge {
    position:absolute;
    top:-4px;
    right:-4px;
    background-color:var(--accent);
    color:var(--accent-ink);
    font-family:var(--tuvu-8a6);
    font-size:10px;
    font-weight:600;
    min-width:18px;
    height:18px;
    border-radius:9px;
    display:none;
    align-items:center;
    justify-content:center;
    padding:0 4px;
}


.chat-launcher-badge.is-visible { display:flex; }


.chat-panel {
    position:fixed;
    bottom:calc(var(--dock-height) + 12px);
    right:16px;
    width:calc(100vw - 32px);
    max-width:380px;
    height:480px;
    max-height:calc(100vh - var(--dock-height) - 40px);
    max-height:calc(100svh - var(--dock-height) - 40px);
    max-height:calc(100dvh - var(--dock-height) - 40px);
    background-color:var(--ground);
    border:1px solid var(--line);
    box-shadow:0 8px 30px rgba(43, 40, 39, 0.2);
    border-radius:var(--radius-subtle);
    display:flex;
    flex-direction:column;
    z-index:870;
    opacity:0;
    pointer-events:none;
    transform:translateY(12px);
    transition:opacity var(--dur-base) var(--ease-out),
                            transform var(--dur-base) var(--ease-out);
}


@media (min-width: 960px) {
    .chat-panel {
        bottom:84px;
        right:24px;
    }
}


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


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


.chat-panel-title {
    font-family:var(--tuvu-dff);
    font-size:var(--fs-md);
    color:var(--ink);
}


.chat-panel-close {
    appearance:none;
    background:transparent;
    border:0;
    color:var(--ink);
    padding:4px;
    min-height:36px;
    min-width:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border-radius:var(--radius-subtle);
    transition:background-color var(--dur-fast) var(--ease-out);
}


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


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


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


.chat-messages {
    flex:1;
    overflow-y:auto;
    padding:var(--space-md);
    display:flex;
    flex-direction:column;
    gap:var(--space-sm);
    background-color:var(--ground);
}


.chat-msg {
    max-width:82%;
    padding:0.625rem 0.875rem;
    font-size:var(--fs-sm);
    line-height:1.45;
    border-radius:var(--radius-subtle);
    word-break:break-word;
}


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


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


.chat-first-contact {
    padding:var(--space-md);
    display:flex;
    flex-direction:column;
    gap:var(--space-xs);
    background-color:var(--surface);
    border-bottom:1px solid var(--line);
}


.chat-input-row {
    padding:var(--space-xs) var(--space-sm);
    border-top:1px solid var(--line);
    background-color:var(--surface);
    display:flex;
    gap:var(--space-xs);
}


.chat-input {
    flex:1;
    min-height:44px;
    height:44px;
    padding:0.375rem 0.625rem;
    border:1px solid var(--line);
    background-color:var(--ground);
    font-size:var(--fs-base);
    font-family:var(--tuvu-d7a);
    border-radius:var(--radius-subtle);
}


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


.chat-send-btn {
    appearance:none;
    background-color:var(--accent);
    color:var(--accent-ink);
    border:1px solid var(--accent);
    padding:0.375rem 0.875rem;
    min-height:44px;
    height:44px;
    cursor:pointer;
    border-radius:var(--radius-subtle);
    transition:background-color var(--dur-fast) var(--ease-out);
}


.chat-send-btn:hover { background-color:#934f4e; }


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


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