.site-header {
   position: sticky;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 500;
   background-color: rgba(222, 210, 188, 0.94);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--border);
   transition: padding var(--dur-mid) var(--ease-out-lux),
                     background-color var(--dur-mid) var(--ease-out-lux),
                     border-color var(--dur-mid) var(--ease-out-lux);
}

.site-header.is-condensed {
   background-color: rgba(222, 210, 188, 0.98);
   border-bottom-color: var(--border-strong);
   box-shadow: var(--shadow-subtle);
}

.header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 4.5rem;
   padding: 0.75rem 0;
   gap: 1.5rem;
   transition: min-height var(--dur-mid) var(--ease-out-lux);
}

.site-header.is-condensed .header-inner { min-height: 3.75rem; }

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

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

.brand-img {
   height: 2.15rem;
   width: auto;
   display: block;
   transition: transform var(--dur-fast) var(--ease-out-lux);
}

.brand:hover .brand-img { transform: translateY(-1px); }

.brand:active .brand-img { transform: translateY(0); }

.nav-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   min-height: 44px;
   min-width: 44px;
   padding: 0.5rem 1rem;
   background-color: var(--bg-surface);
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-none);
   color: var(--ink);
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   cursor: pointer;
   transition: background-color var(--dur-fast) var(--ease-out-lux),
                     border-color var(--dur-fast) var(--ease-out-lux),
                     color var(--dur-fast) var(--ease-out-lux),
                     transform var(--dur-fast) var(--ease-out-lux);
}

.nav-toggle:hover {
   background-color: var(--ink);
   color: var(--ink-inverse);
   border-color: var(--ink);
   transform: translateY(-1px);
}

.nav-toggle:active {
   background-color: var(--bg-card);
   color: var(--ink);
   border-color: var(--border-strong);
   transform: translateY(0);
}

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

.nav-toggle .toggle-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 14px;
   height: 14px;
}

.nav-toggle .icon-close { display: none; }

.nav-toggle[aria-expanded='true'] .icon-menu { display: none; }

.nav-toggle[aria-expanded='true'] .icon-close { display: inline-block; }

.nav-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   height: 100dvh;
   background-color: var(--bg-ground);
   z-index: 450;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity var(--dur-mid) var(--ease-out-lux),
                     visibility var(--dur-mid) var(--ease-out-lux);
}

.nav-overlay.is-open {

   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

.nav-overlay-shell {
   display: grid;
   grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
   gap: var(--space-xl);
   min-height: 100%;
   padding-top: calc(5rem + var(--space-md));
   padding-bottom: var(--space-xl);
}

@media (max-width: 900px) {
   .nav-overlay-shell {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-lg);
      padding-top: calc(4.5rem + var(--space-sm));
   }
}

.nav-primary-list {
   list-style: none;

   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: var(--space-2xs);
}

.nav-primary-link {
   display: inline-block;
   font-family: var(--wuco-fed);
   font-size: clamp(2rem, 1.6rem + 3.2vw, 4.4rem);
   font-weight: 700;
   line-height: var(--leading-tight);
   text-transform: uppercase;
   letter-spacing: var(--tracking-tight);
   color: var(--ink);
   text-decoration: none;
   padding: 0.15rem 0;
   transition: color var(--dur-fast) var(--ease-out-lux),
                     transform var(--dur-fast) var(--ease-out-lux);
}

.nav-primary-link:hover {
   color: var(--accent-burnt);
   transform: translateX(8px);
}

.nav-primary-link:active {
   color: var(--ink);
   transform: translateX(4px);
}

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

.nav-overlay-meta {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   border-left: 1px solid var(--border);
   padding-left: var(--space-xl);
}

@media (max-width: 900px) {
   .nav-overlay-meta {
      border-left: 0;
      border-top: 1px solid var(--border);
      padding-left: 0;
      padding-top: var(--space-lg);
   }
}

.nav-meta-block { margin-bottom: var(--space-md); }

.nav-meta-block h4 {
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   letter-spacing: var(--tracking-wide);
   color: var(--ink-muted);
   text-transform: uppercase;
   margin-bottom: var(--space-xs);
}

.nav-meta-block p, .nav-meta-block address {
   font-style: normal;
   font-size: var(--text-sm);
   line-height: var(--leading-normal);
   color: var(--ink);
   margin-bottom: 0;
}

.nav-support-link {
   display: inline-block;
   font-family: var(--wuco-b80);
   font-size: var(--text-sm);
   color: var(--ink);
   text-decoration: underline;
   text-underline-offset: 3px;
   padding: 0.25rem 0;
}

.nav-overlay-img {
   width: 100%;
   aspect-ratio: 16 / 10;
   object-fit: cover;
   border: 1px solid var(--border);
   margin-top: var(--space-md);
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   min-height: 44px;
   padding: 0.75rem 1rem;
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);

   text-decoration: none;
   cursor: pointer;
   border-radius: var(--radius-none);
   line-height: 1.2;
   transition: background-color var(--dur-fast) var(--ease-out-lux),
                     border-color var(--dur-fast) var(--ease-out-lux),
                     color var(--dur-fast) var(--ease-out-lux),
                     box-shadow var(--dur-fast) var(--ease-out-lux),
                     transform var(--dur-fast) var(--ease-out-lux);
   text-align: center;
}

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

.btn-primary {
   background-color: var(--ink);
   color: var(--ink-inverse);
   border: 1px solid var(--ink);
}

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

.btn-primary:active {
   background-color: var(--ink);
   border-color: var(--ink);
   transform: translateY(0);
}

.btn-secondary {
   background-color: var(--bg-surface);
   color: var(--ink);
   border: 1px solid var(--border-strong);
}

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

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

.btn-accent {
   background-color: var(--accent-burnt);
   color: #fff;
   border: 1px solid var(--accent-burnt);
}

.btn-accent:hover {
   background-color: #a23e1e;
   border-color: #a23e1e;
   color: #fff;
   transform: translateY(-1px);
}

.btn-accent:active {
   background-color: var(--accent-burnt);
   transform: translateY(0);
}

.btn-block {
   display: flex;
   width: 100%;
}

.card-item {
   background-color: var(--bg-surface);
   border: 1px solid var(--border);
   padding: var(--space-md);
   display: flex;
   flex-direction: column;
   transition: border-color var(--dur-fast) var(--ease-out-lux),
                     transform var(--dur-fast) var(--ease-out-lux),
                     background-color var(--dur-fast) var(--ease-out-lux);
}

.card-item:hover {
   border-color: var(--border-strong);
   background-color: var(--bg-card);
   transform: translateY(-2px);
}

.card-item:active { transform: translateY(0); }

.card-figure {
   width: 100%;
   aspect-ratio: 16 / 10;
   overflow: hidden;
   margin-bottom: var(--space-sm);
   background-color: var(--bg-ground);
   border: 1px solid var(--border);
}

.card-figure img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--dur-mid) var(--ease-out-lux);
}

.card-item:hover .card-figure img { transform: scale(1.02); }

.card-header { margin-bottom: var(--space-xs); }

.card-title {
   font-family: var(--wuco-fed);
   font-size: var(--text-xl);
   line-height: var(--leading-tight);
   margin-bottom: var(--space-2xs);
}

.card-price {
   font-family: var(--wuco-b80);
   font-size: var(--text-sm);
   color: var(--accent-burnt);
   font-weight: 500;
   margin-bottom: var(--space-xs);
}

.card-desc {
   font-size: var(--text-sm);
   line-height: var(--leading-normal);
   color: var(--ink-muted);
   margin-bottom: var(--space-md);
   flex-grow: 1;
}

.card-action { margin-top: auto; }

.spec-table-wrap {
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   margin-bottom: var(--space-lg);
   border: 1px solid var(--border);
   background-color: var(--bg-surface);
}

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

.spec-table th, .spec-table td {
   padding: 0.85rem 1rem;
   border-bottom: 1px solid var(--border);
   vertical-align: top;
}

.spec-table th {
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   color: var(--ink-muted);
   background-color: var(--bg-card);
   font-weight: 500;
}

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

.spec-table tr:hover td { background-color: rgba(222, 210, 188, 0.4); }

.spec-table .col-price {
   font-family: var(--wuco-b80);
   font-weight: 500;
   color: var(--ink);
   white-space: nowrap;
}

.form-group {
   margin-bottom: var(--space-md);
   position: relative;
}

.form-label {
   display: block;
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   color: var(--ink);
   margin-bottom: var(--space-2xs);
   font-weight: 500;
}

.form-hint {
   display: block;
   font-size: var(--text-xs);
   color: var(--ink-muted);
   margin-top: 0.2rem;
}

.form-control {
   width: 100%;
   min-height: 44px;
   padding: 0.65rem 0.85rem;
   background-color: var(--bg-surface);
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-none);
   color: var(--ink);
   font-family: var(--wuco-f4f);
   font-size: var(--text-base);
   transition: border-color var(--dur-fast) var(--ease-out-lux),
                     background-color var(--dur-fast) var(--ease-out-lux),
                     box-shadow var(--dur-fast) var(--ease-out-lux);
}

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

.form-control:focus {
   outline: none;
   border-color: var(--ink);
   box-shadow: 0 0 0 2px var(--ink);
   background-color: #fff;
}

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

.form-group.has-error .form-control {
   border-color: var(--washed-terracotta);
   background-color: #fff7f5;
}

.form-error {
   display: none;
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   color: var(--washed-terracotta);
   margin-top: 0.3rem;
}

.form-group.has-error .form-error { display: block; }

.form-checkbox {
   display: flex;
   align-items: flex-start;
   gap: 0.65rem;
   cursor: pointer;
   margin-bottom: var(--space-md);
   user-select: none;
}

.form-checkbox input[type='checkbox'] {
   appearance: none;
   -webkit-appearance: none;
   width: 20px;
   height: 20px;
   border: 1px solid var(--border-strong);
   background-color: var(--bg-surface);
   flex-shrink: 0;
   margin-top: 0.2rem;
   border-radius: var(--radius-none);
   display: grid;
   place-content: center;
   cursor: pointer;
   transition: background-color var(--dur-fast) var(--ease-out-lux),
                     border-color var(--dur-fast) var(--ease-out-lux);
}

.form-checkbox input[type='checkbox']:hover { border-color: var(--ink); }

.form-checkbox input[type='checkbox']:focus-visible {
   outline: 2px solid var(--border-focus);
   outline-offset: 2px;
}

.form-checkbox input[type='checkbox']:checked {
   background-color: var(--ink);
   border-color: var(--ink);
}

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

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

.site-footer {
   background-color: var(--bg-dark);
   color: var(--ink-inverse);
   padding-top: var(--space-2xl);
   padding-bottom: var(--space-xl);
   margin-top: auto;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer .muted { color: #b8b0a2; }

.footer-top {
   display: grid;
   grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
   gap: var(--space-xl);
   padding-bottom: var(--space-xl);
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
   .footer-top {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-lg);
   }
}

.footer-brand-col .brand-img {
   height: 2.35rem;
   margin-bottom: var(--space-sm);
}

.footer-studio-desc {
   font-size: var(--text-sm);
   line-height: var(--leading-normal);
   color: var(--ink-inverse-muted);
   max-width: 38ch;
   margin-bottom: var(--space-md);
}

.footer-nav-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--space-md);
}

@media (max-width: 640px) {
   .footer-nav-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-md);
   }
}

.footer-col-title {
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   letter-spacing: var(--tracking-wide);
   color: var(--faded-ochre);
   text-transform: uppercase;
   margin-bottom: var(--space-sm);
}

.footer-links {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-links li { margin-bottom: var(--space-2xs); }

.footer-links a {
   color: var(--ink-inverse-muted);
   text-decoration: none;
   font-size: var(--text-sm);
   display: inline-block;
   padding: 0.15rem 0;
   transition: color var(--dur-fast) var(--ease-out-lux),
                     transform var(--dur-fast) var(--ease-out-lux);
}

.footer-links a:hover {
   color: #fff;
   transform: translateX(3px);
}

.footer-links a:active {
   color: var(--ink-inverse-muted);
   transform: translateX(1px);
}

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

.footer-facts-band {
   padding: var(--space-md) 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--space-md);
}

@media (max-width: 900px) {
   .footer-facts-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
   .footer-facts-band { grid-template-columns: minmax(0, 1fr); }
}

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

.fact-label {
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   text-transform: uppercase;
   color: var(--faded-ochre);
   letter-spacing: var(--tracking-wide);
   margin-bottom: 0.2rem;
}

.fact-value {
   font-size: var(--text-sm);
   color: var(--ink-inverse);
   line-height: var(--leading-normal);
}

.fact-value a {
   color: var(--ink-inverse);
   text-decoration: none;
}

.fact-value a:hover {
   color: #fff;
   text-decoration: underline;
}

.footer-bottom-row {
   padding-top: var(--space-md);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-sm);
   font-size: var(--text-xs);
   color: var(--ink-inverse-muted);
}

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

.footer-legal-links a {
   color: var(--ink-inverse-muted);
   text-decoration: none;
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   letter-spacing: var(--tracking-mono);
   padding: 0.25rem 0;
   transition: color var(--dur-fast) var(--ease-out-lux);
}

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

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

.btn-reopen-consent {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.25);
   color: var(--ink-inverse-muted);
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   padding: 0.3rem 0.65rem;
   min-height: 32px;
   text-transform: uppercase;
   cursor: pointer;
   letter-spacing: var(--tracking-wide);
   transition: background-color var(--dur-fast) var(--ease-out-lux),
                     color var(--dur-fast) var(--ease-out-lux),
                     border-color var(--dur-fast) var(--ease-out-lux);
}

.btn-reopen-consent:hover {
   background-color: rgba(255, 255, 255, 0.1);
   color: #fff;
   border-color: #fff;
}

.btn-reopen-consent:active {
   background-color: transparent;
   color: var(--ink-inverse-muted);
}

.btn-reopen-consent:focus-visible {
   outline: 2px solid var(--faded-ochre);
   outline-offset: 2px;
}

.cookie-banner {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   z-index: 600;
   background-color: var(--ink);
   color: var(--ink-inverse);
   border-top: 2px solid var(--accent-burnt);
   padding: 0.85rem 0;
   box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.25);
   max-height: 20vh;
   display: flex;
   align-items: center;
}

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

.cookie-banner-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.25rem;
   width: 100%;
}

@media (max-width: 768px) {
   .cookie-banner {
      max-height: 25vh;
      padding: 0.75rem 0;
   }
   .cookie-banner-inner {
      flex-direction: column;
      align-items: stretch;
      gap: 0.65rem;
   }
}

.cookie-text {
   font-size: var(--text-xs);
   line-height: var(--leading-normal);
   color: var(--ink-inverse-muted);
   margin-bottom: 0;
}

.cookie-text a {
   color: var(--ink-inverse);
   text-decoration: underline;
}

.cookie-text a:hover { color: var(--faded-ochre); }

.cookie-actions {
   display: flex;
   gap: 0.5rem;
   flex-shrink: 0;
}

.cookie-btn {
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   min-height: 38px;
   padding: 0.45rem 0.9rem;
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   cursor: pointer;
   border-radius: var(--radius-none);
   transition: background-color var(--dur-fast) var(--ease-out-lux),
                     border-color var(--dur-fast) var(--ease-out-lux),
                     color var(--dur-fast) var(--ease-out-lux),
                     transform var(--dur-fast) var(--ease-out-lux);
}

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

.cookie-btn-allow {
   background-color: var(--accent-burnt);
   border: 1px solid var(--accent-burnt);
   color: #fff;
}

.cookie-btn-allow:hover {
   background-color: #a23e1e;
   border-color: #a23e1e;
   transform: translateY(-1px);
}

.cookie-btn-allow:active {
   background-color: var(--accent-burnt);
   transform: translateY(0);
}

.cookie-btn-decline {
   background-color: transparent;
   border: 1px solid rgba(255, 255, 255, 0.35);
   color: var(--ink-inverse);
}

.cookie-btn-decline:hover {
   background-color: rgba(255, 255, 255, 0.1);
   border-color: #fff;
   transform: translateY(-1px);
}

.cookie-btn-decline:active {
   background-color: transparent;
   transform: translateY(0);
}

.chat-launcher {
   position: fixed;
   bottom: 1.5rem;
   right: 1.5rem;
   z-index: 550;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   min-height: 48px;
   padding: 0.65rem 1.15rem;
   background-color: var(--ink);
   color: var(--ink-inverse);
   border: 1px solid var(--border-strong);
   box-shadow: var(--shadow-card);
   cursor: pointer;
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   transition: transform var(--dur-fast) var(--ease-out-lux),
                     background-color var(--dur-fast) var(--ease-out-lux),
                     border-color var(--dur-fast) var(--ease-out-lux),
                     bottom var(--dur-mid) var(--ease-out-lux);
}

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

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

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

.chat-launcher.has-cookie-banner { bottom: 5.5rem; }

@media (max-width: 768px) {
   .chat-launcher {
      bottom: 1rem;
      right: 1rem;
      padding: 0.55rem 0.95rem;
   }
   .chat-launcher.has-cookie-banner { bottom: 6.8rem; }
}

.chat-launcher-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 18px;
   height: 18px;
   background-color: var(--accent-burnt);
   color: #fff;
   border-radius: 50%;
   font-size: 10px;
   font-weight: 700;
   line-height: 1;
}

.chat-panel {
   position: fixed;
   bottom: 5rem;
   right: 1.5rem;
   width: 360px;
   max-width: calc(100vw - 2rem);
   height: 520px;
   max-height: calc(100dvh - 7rem);
   background-color: var(--bg-surface);
   border: 1px solid var(--border-strong);
   box-shadow: var(--shadow-overlay);
   z-index: 560;
   display: flex;
   flex-direction: column;
   opacity: 0;
   visibility: hidden;
   transform: translateY(12px);
   transition: opacity var(--dur-mid) var(--ease-out-lux),
                     transform var(--dur-mid) var(--ease-out-lux),
                     visibility var(--dur-mid) var(--ease-out-lux);
}

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

@media (max-width: 480px) {
   .chat-panel {
      bottom: 0;
      right: 0;
      width: 100vw;
      max-width: 100vw;
      height: 85dvh;
      max-height: 85dvh;
      border-bottom: 0;
   }
}

.chat-header {
   padding: 0.85rem 1rem;
   background-color: var(--ink);
   color: var(--ink-inverse);
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.chat-title-group h3 {
   font-size: var(--text-md);
   margin-bottom: 0;
   color: var(--ink-inverse);
   text-transform: none;
}

.chat-title-group p {
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   color: var(--faded-ochre);
   margin-bottom: 0;
}

.chat-close-btn {
   background: transparent;
   color: var(--ink-inverse-muted);
   border: 1px solid transparent;
   min-height: 36px;
   min-width: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: color var(--dur-fast) var(--ease-out-lux),
                     background-color var(--dur-fast) var(--ease-out-lux);
}

.chat-close-btn:hover {
   color: #fff;
   background-color: rgba(255, 255, 255, 0.1);
}

.chat-close-btn:active { color: var(--ink-inverse-muted); }

.chat-close-btn:focus-visible {
   outline: 2px solid var(--faded-ochre);
   outline-offset: 2px;
}

.chat-messages {
   flex-grow: 1;
   overflow-y: auto;
   padding: 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   background-color: var(--bg-ground);
}

.chat-msg {
   max-width: 82%;
   padding: 0.65rem 0.85rem;
   font-size: var(--text-sm);
   line-height: var(--leading-normal);
   word-break: break-word;
}

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

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

.chat-msg-meta {
   font-family: var(--wuco-b80);
   font-size: 10px;
   color: var(--ink-faint);
   margin-top: 0.25rem;
   display: block;
}

.chat-msg-client .chat-msg-meta {
   color: var(--ink-inverse-muted);
   text-align: right;
}

.chat-form {
   padding: 0.75rem 1rem;
   background-color: var(--bg-surface);
   border-top: 1px solid var(--border);
   display: flex;
   gap: 0.5rem;
}

.chat-input {
   flex-grow: 1;
   min-height: 40px;
   padding: 0.5rem 0.75rem;
   background-color: var(--bg-ground);
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-none);
   font-size: var(--text-sm);
   color: var(--ink);
}

.chat-input:focus {
   outline: none;
   border-color: var(--ink);
   background-color: #fff;
}

.chat-send-btn {
   background-color: var(--ink);
   color: var(--ink-inverse);
   border: 1px solid var(--ink);
   min-height: 40px;
   padding: 0 0.85rem;
   font-family: var(--wuco-b80);
   font-size: var(--text-xs);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   cursor: pointer;
   transition: background-color var(--dur-fast) var(--ease-out-lux),
                     transform var(--dur-fast) var(--ease-out-lux);
}

.chat-send-btn:hover {
   background-color: var(--accent-burnt);
   border-color: var(--accent-burnt);
   transform: translateY(-1px);
}

.chat-send-btn:active {
   background-color: var(--ink);
   transform: translateY(0);
}

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

.chat-intake {
   padding: 1rem;
   background-color: var(--bg-surface);
   border-top: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   gap: 0.65rem;
}

.chat-intake p {
   font-size: var(--text-xs);
   line-height: var(--leading-normal);
   color: var(--ink-muted);
   margin-bottom: 0;
}