.site-header {
   position:sticky;
   top:0;
   z-index:1000;
   background-color:var(--ground);
   border-bottom:1px solid var(--rule);
   transition:background-color var(--dur-base) var(--ease-standard),
                     border-color var(--dur-base) var(--ease-standard),
                     box-shadow var(--dur-base) var(--ease-standard);
   width:100%;
}


@supports (backdrop-filter: blur(12px)) {
   .site-header {
      background-color:rgba(238, 244, 247, 0.92);
      backdrop-filter:blur(12px);
   }
}


.site-header.is-scrolled {
   box-shadow:0 4px 16px rgba(18, 24, 28, 0.06);
}


.header-inner {
   display:flex;
   align-items:center;
   justify-content:space-between;
   min-height:4.25rem;
   padding-top:var(--space-xs);
   padding-bottom:var(--space-xs);
   gap:var(--space-m);
}


.brand {
   display:inline-flex;
   align-items:center;
   text-decoration:none;
   flex-shrink:0;
   line-height:1;
}


.brand img {
   height:2.1rem;
   width:auto;
   max-width:100%;
   object-fit:contain;
}


.site-nav {
   display:flex;
   align-items:center;
   gap:var(--space-l);
}


.site-header .nav-link,
.site-header .btn-phone,
.site-header .btn {
   white-space:nowrap;
}


.nav-list {
   display:flex;
   align-items:center;
   list-style:none;
   margin:0;
   padding:0;
   gap:var(--space-m);
}


.nav-item {
   margin:0;
}


.nav-link {
   font-family:var(--wofa-aaa);
   font-size:var(--step--1);
   font-weight:500;
   letter-spacing:0.05em;
   text-transform:uppercase;
   color:var(--ink);
   text-decoration:none;
   padding:var(--space-2xs) var(--space-3xs);
   border-bottom:2px solid transparent;
   display:inline-flex;
   align-items:center;
   min-height:44px;
   transition:color var(--dur-rapid) var(--ease-standard),
                     border-color var(--dur-rapid) var(--ease-standard);
}


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


.nav-link:active {
   color:var(--accent-hover);
   border-bottom-color:var(--accent-hover);
}


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


.nav-link.is-current {
   color:var(--accent);
   border-bottom-color:var(--accent);
   font-weight:600;
}


.header-actions {
   display:flex;
   align-items:center;
   gap:var(--space-s);
}


.nav-toggle {
   display:none;
   background:transparent;
   border:1px solid var(--rule);
   color:var(--ink);
   padding:var(--space-2xs) var(--space-xs);
   font-family:var(--wofa-aaa);
   font-size:var(--step--1);

   text-transform:uppercase;
   letter-spacing:0.06em;
   cursor:pointer;
   min-height:44px;
   min-width:44px;
   align-items:center;
   justify-content:center;
   gap:var(--space-3xs);
   border-radius:var(--radius-sharp);
   transition:background-color var(--dur-rapid) var(--ease-standard),
                     border-color var(--dur-rapid) var(--ease-standard),
                     color var(--dur-rapid) var(--ease-standard);
}


.nav-toggle:hover {
   background-color:var(--surface-alt);
   border-color:var(--ink-muted);
}


.nav-toggle:active {
   background-color:var(--rule);
}


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


@media (max-width: 72rem) {
   .nav-toggle {
      display:inline-flex;
   }


   .site-nav {
      position:fixed;
      top:4.25rem;
      left:0;
      right:0;
      bottom:0;

      background-color:var(--ground);
      border-top:1px solid var(--rule);
      flex-direction:column;
      align-items:flex-start;
      padding:var(--space-l) var(--gutter);
      gap:var(--space-l);
      overflow-y:auto;
      display:none;
   }


   .site-nav.is-open {
      display:flex;
   }


   .nav-list {
      flex-direction:column;
      align-items:flex-start;
      gap:var(--space-xs);
      width:100%;
   }


   .nav-item {
      width:100%;
      border-bottom:1px solid var(--rule);
   }


   .nav-link {
      width:100%;
      padding:var(--space-s) 0;
      font-size:var(--wofa-d37);
   }


   .header-actions {
      width:100%;
      flex-direction:column;
      align-items:stretch;
   }


   .header-actions .btn {
      width:100%;
      justify-content:center;
   }
}


.btn {
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:var(--space-2xs);
   padding:0.65rem 1.35rem;
   min-height:44px;
   font-family:var(--wofa-aaa);
   font-size:var(--step--1);
   font-weight:600;

   letter-spacing:0.05em;
   text-transform:uppercase;
   text-decoration:none;
   border-radius:var(--radius-sharp);
   border:1px solid transparent;
   cursor:pointer;
   line-height:1.2;
   white-space:normal;
   text-align:center;
   transition:background-color var(--dur-rapid) var(--ease-standard),
                     border-color var(--dur-rapid) var(--ease-standard),
                     color var(--dur-rapid) var(--ease-standard),
                     transform var(--dur-rapid) var(--ease-standard);
}


.btn:active {
   transform:translateY(1px);
}


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


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


.btn-primary:hover {
   background-color:var(--accent-hover);
   border-color:var(--accent-hover);
   color:#ffffff;
}


.btn-primary:active {
   background-color:#0e3e47;
   border-color:#0e3e47;
}


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


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


.btn-secondary:active {
   background-color:var(--rule);
}


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


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


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


.btn-phone {
   background-color:var(--surface);
   color:var(--ink);
   border-color:var(--rule);
   padding:0.5rem 1rem;
}


.btn-phone:hover {
   background-color:var(--surface-alt);
   border-color:var(--accent);
   color:var(--accent);
}


.btn-phone:active {
   background-color:var(--rule);
}


.btn-sm {
   padding:0.4rem 0.85rem;
   font-size:0.75rem;
   min-height:38px;
}


.badge {
   display:inline-flex;
   align-items:center;
   gap:var(--space-3xs);
   padding:0.25rem 0.6rem;
   font-family:var(--wofa-aaa);
   font-size:var(--step--1);
   text-transform:uppercase;
   letter-spacing:0.05em;
   font-weight:600;
   border-radius:var(--radius-sharp);
   border:1px solid var(--rule);
   background-color:var(--surface);
   color:#12181c;
   line-height:1;
}


.badge-accent {
   background-color:var(--accent-soft);
   color:var(--accent);
   border-color:var(--accent-ring);
}


.badge[style*="rgb(178, 106, 0)"],
.badge[style*="#b26a00"],
.badge[style*="#B26A00"],
span.badge[style*="color:#B26A00"],
span.badge[style*="color: rgb(178, 106, 0)"],
span.badge[style*="color:#b26a00"],
span.badge[style*="#FFF3E0"],
span.badge[style*="background:#FFF3E0"],
span.badge[style*="background: rgb(255, 243, 224)"],
span.badge[style*="background:#fff3e0"] {
   color:#8a4e00 !important;
}


.stamp-seal {
   width:5.75rem;
   height:5.75rem;
   display:inline-grid;
   place-items:center;
   position:relative;
   border-radius:50%;
   border:2px dashed var(--accent);
   padding:0.35rem;
   color:var(--accent);
   flex-shrink:0;
   text-align:center;
   transition:transform var(--dur-base) var(--ease-expressive),
                     border-color var(--dur-rapid) var(--ease-standard);
   user-select:none;
}


.stamp-seal::before {
   content:"";
   position:absolute;
   inset:3px;
   border-radius:50%;
   border:1px solid var(--accent);
   pointer-events:none;
}


.stamp-seal:hover {
   transform:rotate(6deg) scale(1.03);
}


.stamp-seal-inner {
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   line-height:1;
   gap:2px;
}


.stamp-tag {
   font-family:var(--wofa-aaa);
   font-size:0.55rem;
   letter-spacing:0.12em;
   text-transform:uppercase;
   font-weight:600;
}


.stamp-year {
   font-family:var(--wofa-3c7);
   font-size:1.15rem;
   font-weight:700;
   font-style:italic;
   letter-spacing:-0.02em;
}


.stamp-city {
   font-family:var(--wofa-aaa);
   font-size:0.52rem;
   letter-spacing:0.15em;
   text-transform:uppercase;
   color:var(--ink-muted);
}


.site-footer .stamp-seal {
   border-color:#55b5c5;
   color:#55b5c5;
}


.site-footer .stamp-seal::before {
   border-color:#55b5c5;
}


.site-footer .stamp-tag {
   color:#79d1df;
}


.site-footer .stamp-year {
   color:#ffffff;
}


.site-footer .stamp-city {
   color:#cad7df;
}


.color-block {
   width:100%;
   padding-top:var(--space-2xl);
   padding-bottom:var(--space-2xl);
   border-bottom:2px solid var(--rule);
   position:relative;
}


.color-block-ground {
   background-color:var(--ground);
}


.color-block-surface {
   background-color:var(--surface);
}


.color-block-alt {
   background-color:var(--surface-alt);
}


.color-block-dark {
   background-color:var(--ink);
   color:var(--ground);
   border-bottom-color:#242e35;
}


.color-block-dark h1,
.color-block-dark h2,
.color-block-dark h3,
.color-block-dark h4 {
   color:#ffffff;
}


.color-block-dark p {
   color:#d3dfe6;
}


.color-block-dark .mono-meta {
   color:#9cb2be;
}


.color-block-dark .mono-spec {
   color:#ffffff;
}


.color-block-dark table th {
   background-color:#1a2228;
   color:#ffffff;
}


.color-block-dark table td {
   border-bottom-color:#242e35;
}


.block-statement {
   font-family:var(--wofa-3c7);
   font-size:var(--wofa-936);
   line-height:1.18;
   font-weight:500;
   color:var(--ink);
   margin-bottom:var(--space-m);
}


.block-body {
   font-size:var(--wofa-d37);
   line-height:var(--line-height-body);
   color:var(--ink-muted);
   max-width:72ch;
   margin-bottom:var(--space-l);
}


.block-actions {
   display:flex;
   flex-wrap:wrap;
   gap:var(--space-s);
   align-items:center;
}


.product-row {
   display:grid;
   grid-template-columns:1fr;
   border:1px solid var(--rule);
   background:var(--surface);
   border-radius:var(--radius-sharp);
   margin-bottom:var(--space-m);
   transition:border-color var(--dur-rapid) var(--ease-standard),
                     box-shadow var(--dur-rapid) var(--ease-standard);
}


@media (min-width: 54rem) {
   .product-row {
      grid-template-columns:280px 1fr auto;
      align-items:stretch;
   }
}


.product-row:hover {
   border-color:var(--accent);
   box-shadow:0 4px 20px rgba(18, 24, 28, 0.05);
}


.product-row-media {
   background-color:var(--surface-alt);
   overflow:hidden;
   position:relative;
   min-height:200px;
}


.product-row-media img {
   width:100%;
   height:100%;
   object-fit:cover;
   transition:transform var(--dur-deliberate) var(--ease-standard);
}


.product-row:hover .product-row-media img {
   transform:scale(1.03);
}


.product-row-content {
   padding:var(--space-m);
   display:flex;
   flex-direction:column;
   justify-content:space-between;
   gap:var(--space-s);
}


.product-row-title {
   font-family:var(--wofa-3c7);
   font-size:var(--wofa-20b);
   margin-bottom:var(--space-2xs);
}


.product-row-title a {
   color:var(--ink);
   text-decoration:none;
}


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


.product-row-desc {
   font-size:var(--wofa-d37);
   color:var(--ink-muted);
   margin-bottom:0;
}


.product-row-side {
   padding:var(--space-m);
   background-color:var(--ground);
   border-top:1px solid var(--rule);
   display:flex;
   flex-direction:column;
   justify-content:space-between;
   align-items:flex-start;
   gap:var(--space-m);
   min-width:220px;
}


@media (min-width: 54rem) {
   .product-row-side {
      border-top:none;
      border-left:1px solid var(--rule);
   }
}


.product-price-box {
   width:100%;
}


.product-price-label {
   font-family:var(--wofa-aaa);
   font-size:var(--step--1);
   text-transform:uppercase;
   color:var(--ink-muted);
   letter-spacing:0.05em;
   margin-bottom:var(--space-3xs);
}


.product-price-val {
   font-family:var(--wofa-aaa);
   font-size:var(--wofa-645);
   font-weight:600;
   color:var(--ink);
}


.spec-grid {
   display:grid;
   grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
   gap:1px;
   background-color:var(--rule);
   border:1px solid var(--rule);
   border-radius:var(--radius-sharp);
   margin:var(--space-l) 0;
}


.spec-cell {
   background-color:var(--surface);
   padding:var(--space-m);
   display:flex;
   flex-direction:column;
   gap:var(--space-2xs);
}


.spec-cell-label {
   font-family:var(--wofa-aaa);
   font-size:var(--step--1);
   color:var(--ink-muted);
   text-transform:uppercase;
   letter-spacing:0.05em;
}


.spec-cell-value {
   font-family:var(--wofa-3c7);
   font-size:var(--wofa-645);
   color:var(--ink);
   font-weight:600;
}


.inquiry-form {
   background-color:var(--surface);
   border:1px solid var(--rule);
   padding:var(--space-l);
   border-radius:var(--radius-sharp);
}


@media (min-width: 48rem) {
   .inquiry-form {
      padding:var(--space-xl);
   }
}


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


@media (min-width: 48rem) {
   .form-grid-2 {
      grid-template-columns:repeat(2, 1fr);
   }
}


.form-group {
   display:flex;
   flex-direction:column;
   gap:var(--space-2xs);
   min-width:0;
}


.form-label {
   font-family:var(--wofa-aaa);
   font-size:var(--step--1);
   text-transform:uppercase;
   letter-spacing:0.05em;
   font-weight:500;
   color:var(--ink);
   display:flex;
   flex-wrap:wrap;
   justify-content:space-between;
   align-items:baseline;
   gap:var(--space-3xs);
}


.form-label-opt {
   color:var(--ink-muted);
   font-weight:400;
   text-transform:lowercase;
}


.form-input,
.form-select,
.form-textarea {
   width:100%;
   padding:0.75rem 0.95rem;
   background-color:var(--ground);
   border:1px solid var(--rule);
   border-radius:var(--radius-sharp);
   color:var(--ink);
   font-family:var(--wofa-dc4);
   font-size:var(--wofa-d37);
   line-height:1.4;
   min-height:44px;
   transition:border-color var(--dur-rapid) var(--ease-standard),
                     background-color var(--dur-rapid) var(--ease-standard),
                     outline var(--dur-rapid) var(--ease-standard);
}


.form-input:hover,
.form-select:hover,
.form-textarea:hover {
   background-color:#ffffff;
   border-color:var(--ink-muted);
}


.form-input:focus,
.form-select:focus,
.form-textarea:focus {
   background-color:#ffffff;
   border-color:var(--accent);
   outline:2px solid var(--accent);
   outline-offset:1px;
}


.form-input:active,
.form-select:active,
.form-textarea:active {
   border-color:var(--accent-hover);
}


.form-input.has-error,
.form-select.has-error,
.form-textarea.has-error {
   border-color:#a32020;
   background-color:#fff7f7;
}


.form-error {
   font-family:var(--wofa-aaa);
   font-size:var(--step--1);
   color:#a32020;
   display:none;
   margin-top:var(--space-3xs);
}


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


.form-checkbox-label {
   display:grid;
   grid-template-columns:1.25rem 1fr;
   gap:var(--space-xs);
   align-items:flex-start;
   font-size:var(--step--1);
   color:var(--ink-muted);
   line-height:1.45;
   cursor:pointer;
   user-select:none;
}


.form-checkbox {
   width:1.15rem;
   height:1.15rem;
   margin-top:0.15rem;
   accent-color:var(--accent);
   cursor:pointer;
}


.form-status {
   padding:var(--space-m);
   border-radius:var(--radius-sharp);
   font-family:var(--wofa-aaa);
   font-size:var(--step--1);
   display:none;
}


.form-status.is-success {
   display:block;
   background-color:#e6f3ee;
   color:#175438;
   border:1px solid #99d1b9;
}


.form-status.is-error {
   display:block;
   background-color:#fdf1f1;
   color:#922222;
   border:1px solid #e4acac;
}


.site-footer {
   background-color:var(--ink);
   color:var(--ground);
   border-top:2px solid var(--rule);
   padding-top:var(--space-2xl);
   padding-bottom:var(--space-xl);
}


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


@media (min-width: 56rem) {
   .footer-top {
      grid-template-columns:2fr 1fr 1fr 1.2fr;
   }
}


.footer-brand-col {
   display:flex;
   flex-direction:column;
   align-items:flex-start;
   gap:var(--space-m);
}


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


.footer-desc {
   color:#9cb2be;
   font-size:var(--step--1);
   line-height:1.6;
   max-width:40ch;
   margin-bottom:0;
}


.footer-col-title {
   font-family:var(--wofa-aaa);
   font-size:var(--step--1);
   text-transform:uppercase;
   letter-spacing:0.08em;
   color:#ffffff;
   margin-bottom:var(--space-s);
}


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


.footer-links a {
   color:#b4c6ce;
   text-decoration:none;
   font-size:var(--step--1);
   transition:color var(--dur-rapid) var(--ease-standard);
   display:inline-block;
   padding:0.2rem 0;
}


.footer-links a:hover {
   color:#ffffff;
   text-decoration:underline;
}


.footer-links a:active {
   color:var(--ground);
}


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


.footer-contact-item {
   display:flex;
   align-items:flex-start;
   gap:var(--space-xs);
   color:#b4c6ce;
   font-size:var(--step--1);
   line-height:1.45;
   margin-bottom:var(--space-xs);
}


.footer-contact-item a {
   color:#ffffff;
   text-decoration:none;
}


.footer-contact-item a:hover {
   color:var(--ground);
   text-decoration:underline;
}


.footer-legal-bar {
   padding-top:var(--space-l);
   display:flex;
   flex-direction:column;
   gap:var(--space-m);
}


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


.footer-legal-facts {
   font-family:var(--wofa-aaa);
   font-size:var(--step--1);
   color:#7e93a0;
   line-height:1.5;
}


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


.footer-legal-links a,
.footer-consent-btn {
   font-family:var(--wofa-aaa);
   font-size:var(--step--1);
   color:#9cb2be;
   text-decoration:none;
   transition:color var(--dur-rapid) var(--ease-standard);
   background:none;
   border:none;
   padding:0;
   cursor:pointer;
   letter-spacing:0.02em;
}


.footer-legal-links a:hover,
.footer-consent-btn:hover {
   color:#ffffff;
   text-decoration:underline;
}


.footer-legal-links a:active,
.footer-consent-btn:active {
   color:var(--ground);
}


.footer-legal-links a:focus-visible,
.footer-consent-btn:focus-visible {
   outline:2px solid var(--accent);
   outline-offset:2px;
}


.cookie-bar {
   position:fixed;
   bottom:0;
   left:0;
   right:0;
   z-index:9990;
   background-color:var(--surface);
   border-top:2px solid var(--ink);
   box-shadow:0 -4px 24px rgba(18, 24, 28, 0.12);
   padding:var(--space-s) var(--gutter);
   transition:transform var(--dur-deliberate) var(--ease-expressive),
                     opacity var(--dur-deliberate) var(--ease-standard);
}


.cookie-bar[hidden] {
   display:none;
}


.cookie-bar-inner {
   max-width:var(--container-max);
   margin:0 auto;
   display:flex;
   flex-direction:column;
   gap:var(--space-s);
}


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


.cookie-text {
   font-size:var(--step--1);
   color:var(--ink);
   margin-bottom:0;
   line-height:1.45;
}


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


.cookie-actions .btn {
   min-height:40px;
   padding:0.45rem 1rem;
}


.chat-launcher {
   position:fixed;
   bottom:1.5rem;
   right:1.5rem;
   z-index:9980;
   background-color:var(--ink);
   color:#ffffff;
   border:1px solid var(--accent);
   border-radius:var(--radius-sharp);
   padding:0.65rem 1.15rem;
   font-family:var(--wofa-aaa);
   font-size:var(--step--1);
   font-weight:500;
   letter-spacing:0.05em;
   text-transform:uppercase;
   display:inline-flex;
   align-items:center;
   gap:var(--space-2xs);
   cursor:pointer;
   min-height:44px;
   box-shadow:0 4px 16px rgba(18, 24, 28, 0.2);
   transition:background-color var(--dur-rapid) var(--ease-standard),
                     border-color var(--dur-rapid) var(--ease-standard),
                     transform var(--dur-rapid) var(--ease-standard);
}


.chat-launcher:hover {
   background-color:#242e35;
   border-color:#ffffff;
}


.chat-launcher:active {
   background-color:#0e1418;
   transform:translateY(1px);
}


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


.chat-launcher.is-raised {
   bottom:5.5rem;
}


.chat-unread-badge {
   background-color:var(--accent);
   color:#ffffff;
   border-radius:var(--radius-sharp);
   padding:0.1rem 0.4rem;
   font-size:0.7rem;
   font-weight:600;
   display:none;
}


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


.chat-panel {
   position:fixed;
   bottom:1.5rem;
   right:1.5rem;
   width:calc(100vw - 3rem);
   max-width:24rem;
   height:32rem;
   max-height:calc(100vh - 5rem);
   background-color:var(--surface);
   border:2px solid var(--ink);
   border-radius:var(--radius-sharp);
   box-shadow:0 12px 32px rgba(18, 24, 28, 0.25);
   z-index:9995;
   display:flex;
   flex-direction:column;
}


.chat-panel[hidden] {
   display:none;
}


.chat-header {
   background-color:var(--ink);
   color:#ffffff;
   padding:var(--space-s) var(--space-m);
   display:flex;
   align-items:center;
   justify-content:space-between;
}


.chat-title {
   font-family:var(--wofa-3c7);
   font-size:var(--wofa-d37);
   font-weight:600;
   color:#ffffff;
   margin:0;
}


.chat-subtitle {
   font-family:var(--wofa-aaa);
   font-size:0.7rem;
   color:#9cb2be;
   letter-spacing:0.05em;
   text-transform:uppercase;
}


.chat-close {
   background:transparent;
   border:none;
   color:#ffffff;
   padding:var(--space-3xs);
   cursor:pointer;
   min-height:44px;
   min-width:44px;
   display:grid;
   place-items:center;
   border-radius:var(--radius-sharp);
   transition:background-color var(--dur-rapid) var(--ease-standard);
}


.chat-close:hover {
   background-color:rgba(255, 255, 255, 0.15);
}


.chat-close:active {
   background-color:rgba(255, 255, 255, 0.25);
}


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


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


.chat-msg {
   max-width:85%;
   padding:var(--space-2xs) var(--space-xs);
   font-size:var(--step--1);
   line-height:1.45;
   border-radius:var(--radius-sharp);
}


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


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


.chat-msg-time {
   display:block;
   font-family:var(--wofa-aaa);
   font-size:0.65rem;
   margin-top:2px;
   opacity:0.7;
}


.chat-form {
   padding:var(--space-s);
   background-color:var(--surface);
   border-top:1px solid var(--rule);
   display:flex;
   gap:var(--space-2xs);
}


.chat-input {
   flex:1;
   padding:0.5rem 0.75rem;
   font-size:var(--step--1);
   border:1px solid var(--rule);
   border-radius:var(--radius-sharp);
   min-height:44px;
}


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


.chat-send {
   min-height:44px;
   padding:0.5rem 0.85rem;
}


.chat-intake {
   padding:var(--space-m);
   background-color:var(--surface);
   display:flex;
   flex-direction:column;
   gap:var(--space-xs);
   border-bottom:1px solid var(--rule);
}