.icon {
  display:inline-block;
  width:1.25rem;
  height:1.25rem;
  stroke-width:0;
  stroke:currentColor;
  fill:currentColor;
  flex-shrink:0;
  vertical-align:middle;
}


.icon-sm {
  width:1rem;
  height:1rem;
}


.icon-lg {
  width:1.75rem;
  height:1.75rem;
}


.site-header {
  position:sticky;
  top:0;
  left:0;
  width:100%;
  z-index:var(--z-header);
  background-color:rgba(74, 31, 34, 0.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
  transition:padding var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}


.site-header.is-condensed {
  background-color:rgba(56, 22, 24, 0.98);
  border-bottom-color:var(--rule-strong);
}


.site-header__inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:4.5rem;
  transition:min-height var(--duration-base) var(--ease-out);
}


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


.brand {
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  line-height:1;
  padding:var(--space-2xs) 0;
  outline-offset:4px;
  border-radius:var(--radius-xs);
  transition:opacity var(--duration-fast) var(--ease-out);
}


.brand:hover { opacity:0.88; }


.brand:active { opacity:0.72; }


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


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


.nav-toggle {
  display:inline-flex;
  align-items:center;
  gap:var(--space-2xs);
  min-height:44px;
  padding:var(--space-2xs) var(--space-sm);
  background:#2a0e10;
  border:1px solid var(--rule);
  border-radius:var(--radius-xs);
  color:#fff;
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  letter-spacing:var(--letter-spacing-wider);
  text-transform:uppercase;
  cursor:pointer;
  outline-offset:3px;
  transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}


.nav-toggle:hover {
  background-color:var(--oxblood-light);
  border-color:var(--gold);
  color:var(--gold);
}


.nav-toggle:active {
  background-color:var(--oxblood-deep);
  border-color:var(--gold-active);
  transform:translateY(1px);
}


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


.nav-toggle .icon {
  width:1.1rem;
  height:1.1rem;
}


.nav-overlay {
  position:fixed;
  inset:0;
  z-index:var(--z-overlay);
  background-color:var(--ground);
  display:flex;
  flex-direction:column;
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity var(--duration-base) var(--ease-out), visibility var(--duration-base) var(--ease-out);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}


.nav-overlay.is-open {
  opacity:1;
  pointer-events:auto;
  visibility:visible;
}


.nav-overlay__header {
  display:flex;
  align-items:center;
  justify-content:space-between;

  min-height:4.5rem;
  border-bottom:1px solid var(--rule);
}


.nav-overlay__body {
  flex:1;
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  padding-block:var(--space-xl);

}


@media (min-width: 900px) {
  .nav-overlay__body {
    grid-template-columns:1.25fr 0.75fr;
    gap:var(--space-2xl);
  }
}


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


.nav-overlay__link {
  display:inline-block;
  font-family:var(--falu-98e);
  font-size:clamp(1.75rem, 3.5vw, 3.25rem);
  font-weight:700;
  color:var(--cream);
  text-decoration:none;
  line-height:1.2;
  letter-spacing:var(--letter-spacing-tight);
  padding:var(--space-2xs) 0;
  border-bottom:1px solid transparent;
  transition:color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}


.nav-overlay__link:hover {
  color:var(--gold);
  transform:translateX(8px);
  border-bottom-color:var(--rule-strong);
}


.nav-overlay__link:active {
  color:var(--gold-active);
  transform:translateX(4px);
}


.nav-overlay__link:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px;
  color:var(--gold);
}


.nav-overlay__link.is-active { color:var(--gold); }


.nav-overlay__meta {
  border-top:1px solid var(--rule);
  padding-top:var(--space-lg);
  margin-top:var(--space-lg);
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  color:var(--cream-muted);
}


.nav-overlay__meta a {
  color:var(--cream);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color var(--duration-fast) var(--ease-out);
}


.nav-overlay__meta a:hover { color:var(--gold); }


.nav-overlay__meta a:active { color:var(--gold-active); }


.nav-overlay__meta a:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px;
}


.nav-overlay__visual { display:none; }


@media (min-width: 900px) {
  .nav-overlay__visual {
    display:block;
    position:relative;
    border:1px solid var(--rule);
    border-radius:var(--radius-xs);
    overflow:hidden;
    background-color:var(--oxblood-deep);
  }


  .nav-overlay__visual img {
    width:100%;
    height:100%;
    object-fit:cover;
    max-height:480px;
    filter:saturate(0.9) contrast(1.05);
    transition:transform var(--duration-slow) var(--ease-out);
  }


  .nav-overlay:hover .nav-overlay__visual img { transform:scale(1.02); }
}


.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-xs);
  min-height:44px;
  padding:var(--space-xs) var(--space-md);
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  font-weight:500;
  letter-spacing:var(--letter-spacing-wide);
  text-transform:uppercase;
  text-decoration:none;
  border-radius:var(--radius-xs);
  cursor:pointer;
  border:1px solid transparent;
  outline-offset:3px;
  white-space:normal;
  text-align:center;
  transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}


.btn-primary {
  background-color:var(--gold);
  color:#1a0809;
  border-color:var(--gold);
  font-weight:600;
}


.btn-primary:hover {
  background-color:var(--gold-hover);
  border-color:var(--gold-hover);
  color:#120506;
  box-shadow:var(--shadow-gold);
}


.btn-primary:active {
  background-color:var(--gold-active);
  border-color:var(--gold-active);
  transform:translateY(1px);
}


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


.btn-secondary {
  background-color:transparent;
  color:var(--cream);
  border-color:var(--rule-strong);
}


.btn-secondary:hover {
  background-color:rgba(251, 247, 238, 0.08);
  border-color:var(--gold);
  color:var(--gold);
}


.btn-secondary:active {
  background-color:rgba(251, 247, 238, 0.14);
  transform:translateY(1px);

}


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


.btn-ghost {
  background-color:transparent;
  color:var(--cream-muted);
  border-color:transparent;
  padding-inline:var(--space-2xs);
}


.btn-ghost:hover { color:var(--gold); }


.btn-ghost:active { color:var(--gold-active); }


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


.btn-sm {
  min-height:38px;
  padding:var(--space-3xs) var(--space-sm);
  font-size:var(--font-size-2xs);
}


.btn-lg {
  min-height:52px;
  padding:var(--space-sm) var(--space-lg);
  font-size:var(--font-size-sm);
}


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


.spec-ledger {
  border-top:1px solid var(--rule-strong);
  margin-block:var(--space-lg);
}


.spec-ledger-row {
  display:grid;
  grid-template-columns:1fr;
  padding-block:var(--space-sm);
  border-bottom:1px solid var(--rule);
  align-items:baseline;
  gap:var(--space-2xs);
  transition:background-color var(--duration-fast) var(--ease-out);
}


@media (min-width: 640px) {
  .spec-ledger-row {
    grid-template-columns:minmax(180px, 280px) 1fr;
    gap:var(--space-md);
  }
}


.spec-ledger-row:hover { background-color:rgba(251, 247, 238, 0.03); }


.spec-ledger-row:focus-within { background-color:rgba(212, 175, 55, 0.05); }


.spec-ledger-label {
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  font-weight:500;
  color:var(--cream-muted);
  letter-spacing:var(--letter-spacing-wide);
  text-transform:uppercase;
}


.spec-ledger-value {
  font-family:var(--falu-ce8);
  font-size:var(--font-size-base);
  color:var(--cream);
  line-height:var(--line-height-snug);
}


.spec-ledger-value code,
.spec-ledger-value .metric {
  font-family:var(--falu-a12);
  color:var(--gold);
}


.product-card {
  display:flex;
  flex-direction:column;
  background-color:var(--oxblood-card);
  border:1px solid var(--oxblood-border);
  border-radius:var(--radius-xs);
  overflow:hidden;
  text-decoration:none;
  color:var(--cream);
  outline-offset:3px;
  height:100%;
  transition:border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}


.product-card:hover {
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}


.product-card:active {
  transform:translateY(0);
  border-color:var(--gold-active);
}


.product-card:focus-visible { outline:2px solid var(--gold); }


.product-card__figure {
  position:relative;
  aspect-ratio:16 / 11;
  background-color:var(--oxblood-deep);
  overflow:hidden;
  border-bottom:1px solid var(--rule-subtle);
}


.product-card__figure img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--duration-slow) var(--ease-out);
}


.product-card:hover .product-card__figure img { transform:scale(1.04); }


.product-card__badge {
  position:absolute;
  top:var(--space-xs);
  right:var(--space-xs);
  padding:var(--space-3xs) var(--space-2xs);
  background-color:#1a0809;
  border:1px solid var(--gold);
  color:#f8d36b;
  font-family:var(--falu-a12);
  font-size:var(--font-size-3xs);
  letter-spacing:var(--letter-spacing-wide);
  text-transform:uppercase;
  border-radius:var(--radius-xs);
}


.product-card__body {
  padding:var(--space-md);
  display:flex;
  flex-direction:column;
  flex:1;
}


.product-card__title {
  font-family:var(--falu-98e);
  font-size:var(--font-size-md);
  font-weight:700;
  margin-bottom:var(--space-2xs);
  color:var(--cream);
  line-height:var(--line-height-snug);
}


@media (min-width: 480px) {
  .product-card__title { font-size:var(--font-size-lg); }
}


.product-card__desc {
  font-size:var(--font-size-sm);
  color:var(--cream-muted);
  line-height:var(--line-height-base);
  margin-bottom:var(--space-md);
  flex:1;
}


.product-card__footer {
  border-top:1px solid var(--rule);
  padding-top:var(--space-xs);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-xs);
}


@media (min-width: 480px) {
  .product-card__footer {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}


.product-card__price {
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  color:var(--gold);
}


.product-card__action {
  font-family:var(--falu-a12);
  font-size:var(--font-size-2xs);
  color:var(--cream);
  display:inline-flex;
  align-items:center;
  gap:var(--space-3xs);
}


.chip {
  display:inline-flex;
  align-items:center;
  gap:var(--space-3xs);
  min-height:38px;
  padding:var(--space-3xs) var(--space-sm);
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  color:var(--cream-muted);
  background-color:var(--oxblood-card);
  border:1px solid var(--oxblood-border);
  border-radius:var(--radius-pill);
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  outline-offset:2px;
  transition:color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}


.chip:hover {
  color:var(--cream);
  border-color:var(--rule-strong);
  background-color:var(--oxblood-light);
}


.chip:active {
  background-color:var(--oxblood-deep);
  transform:translateY(1px);
}


.chip:focus-visible { outline:2px solid var(--gold); }


.chip.is-active {
  background-color:var(--gold-subtle);
  border-color:var(--gold);
  color:var(--gold);
  font-weight:500;
}


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


.form-label {
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  font-weight:500;
  color:var(--cream);
  letter-spacing:var(--letter-spacing-wide);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-3xs) var(--space-xs);
}


.form-label .form-hint {
  font-size:var(--font-size-2xs);
  color:var(--cream-muted);
  font-weight:400;
  display:inline-block;
  white-space:normal;
}


@media (min-width: 900px) and (max-width: 1200px) {
  .contact-layout .grid-2 { grid-template-columns:1fr; }


  .contact-layout .form-label {
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
}


.form-input,
.form-select,
.form-textarea {
  width:100%;
  min-height:44px;
  padding:var(--space-xs) var(--space-sm);
  background-color:var(--oxblood-deep);
  border:1px solid var(--oxblood-border);
  border-radius:var(--radius-xs);
  color:var(--cream);
  font-family:var(--falu-ce8);
  font-size:var(--font-size-base);
  line-height:var(--line-height-base);
  outline:none;
  transition:border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}


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


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


.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold);
}


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


.form-error {
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  color:var(--error);
  margin-top:var(--space-3xs);
  display:none;
}


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


.form-checkbox {
  display:grid;
  grid-template-columns:20px 1fr;
  align-items:flex-start;
  gap:var(--space-xs);
  cursor:pointer;
  font-size:var(--font-size-sm);
  color:var(--cream-muted);
  line-height:var(--line-height-snug);
  margin-top:var(--space-xs);
}


.form-checkbox input[type="checkbox"] {
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  background-color:var(--oxblood-deep);
  border:1px solid var(--oxblood-border);
  border-radius:var(--radius-xs);
  cursor:pointer;
  margin-top:2px;
  position:relative;
  outline-offset:2px;
  transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}


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


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


.form-checkbox input[type="checkbox"]:checked::after {
  content:"";
  position:absolute;
  top:2px;
  left:6px;
  width:5px;
  height:10px;
  border:solid #1a0809;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}


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


.form-status {
  padding:var(--space-sm);
  border-radius:var(--radius-xs);
  font-family:var(--falu-a12);
  font-size:var(--font-size-sm);
  margin-block:var(--space-md);
  display:none;
}


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


.form-status.is-success {
  background-color:var(--success-bg);
  border:1px solid var(--success);
  color:var(--cream);
}


.form-status.is-error {
  background-color:var(--error-bg);
  border:1px solid var(--error);
  color:#f99;
}


.site-footer {
  background-color:var(--oxblood-surface);
  border-top:1px solid var(--rule);
  padding-top:clamp(3rem, 6vw, 5rem);
  padding-bottom:clamp(2rem, 4vw, 3.5rem);
  color:var(--cream);
  position:relative;
  z-index:var(--z-base);
}


.site-footer__grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-xl);
  padding-bottom:var(--space-xl);
  border-bottom:1px solid var(--rule);
}


@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns:1.5fr 1fr 1fr; }
}


.site-footer__brand-block {
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
}


.site-footer__brand-block .brand img {
  height:2.4rem;
  width:auto;
}


.site-footer__desc {
  font-size:var(--font-size-sm);
  color:var(--cream-muted);
  line-height:var(--line-height-relaxed);
  max-width:44ch;
}


.site-footer__facts {
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  color:var(--cream-muted);
  line-height:var(--line-height-relaxed);
  display:flex;
  flex-direction:column;
  gap:var(--space-2xs);
}


.site-footer__facts a {
  color:var(--cream);
  text-decoration:none;
  transition:color var(--duration-fast) var(--ease-out);
}


.site-footer__facts a:hover { color:var(--gold); }


.site-footer__facts a:active { color:var(--gold-active); }


.site-footer__facts a:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px;
}


.site-footer__col-title {
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  font-weight:600;
  color:var(--gold);
  letter-spacing:var(--letter-spacing-wider);
  text-transform:uppercase;
  margin-bottom:var(--space-md);
}


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


.site-footer__nav-link {
  font-size:var(--font-size-sm);
  color:var(--cream-muted);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:var(--space-3xs);
  padding:2px 0;
  transition:color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}


.site-footer__nav-link:hover {
  color:var(--cream);
  transform:translateX(3px);
}


.site-footer__nav-link:active { color:var(--gold); }


.site-footer__nav-link:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px;
}


.site-footer__legal-row {
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  padding-top:var(--space-lg);
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  color:var(--cream-subtle);
}


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


.site-footer__legal-links {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm) var(--space-md);
  align-items:center;
}


.site-footer__legal-link {
  color:var(--cream-muted);
  text-decoration:none;
  font-size:var(--font-size-xs);
  transition:color var(--duration-fast) var(--ease-out);
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:var(--falu-a12);
}


.site-footer__legal-link:hover {
  color:var(--gold);
  text-decoration:underline;
}


.site-footer__legal-link:active { color:var(--gold-active); }


.site-footer__legal-link:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px;
}


.cookie-banner {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:var(--z-banner);
  background-color:rgba(47, 18, 20, 0.98);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--gold);
  padding-block:var(--space-xs);
  display:none;
  box-shadow:0 -4px 20px rgba(24, 7, 9, 0.7);
  max-height:28vh;
  overflow-y:auto;
}


.cookie-banner.is-visible { display:block; }


.cookie-banner__inner {
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
  align-items:flex-start;
  justify-content:space-between;
}


@media (min-width: 768px) {
  .cookie-banner__inner {
    flex-direction:row;
    align-items:center;
    gap:var(--space-lg);
  }
}


.cookie-banner__text {
  font-size:var(--font-size-xs);
  color:var(--cream);
  line-height:var(--line-height-snug);
  margin-bottom:0;
}


.cookie-banner__text a {
  color:var(--gold);
  text-decoration:underline;
  text-underline-offset:2px;
  outline-offset:2px;
}


.cookie-banner__text a:hover { color:var(--gold-hover); }


.cookie-banner__text a:active { color:var(--gold-active); }


.cookie-banner__text a:focus-visible { outline:2px solid var(--gold); }


.cookie-banner__actions {
  display:flex;
  gap:var(--space-xs);
  flex-shrink:0;
  width:100%;
}


@media (min-width: 768px) {
  .cookie-banner__actions { width:auto; }
}


.cookie-banner__actions .btn { flex:1; }


@media (min-width: 768px) {
  .cookie-banner__actions .btn { flex:initial; }
}


.chat-widget {
  position:fixed;
  bottom:var(--space-md);
  right:var(--space-md);
  z-index:var(--z-chat);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  pointer-events:none;
}


body.cookie-banner-active .chat-widget { bottom:clamp(5rem, 10vw, 6.5rem); }


.chat-launcher {
  pointer-events:auto;
  min-height:52px;
  height:52px;
  padding:0 var(--space-md);
  background-color:var(--gold);
  color:#1a0809;
  border:1px solid var(--gold);
  border-radius:var(--radius-pill);
  display:inline-flex;
  align-items:center;
  gap:var(--space-2xs);
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  font-weight:600;
  letter-spacing:var(--letter-spacing-wide);
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:var(--shadow-md);
  outline-offset:3px;
  transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}


.chat-launcher:hover {
  background-color:var(--gold-hover);
  border-color:var(--gold-hover);
  box-shadow:var(--shadow-gold);
  transform:translateY(-2px);
}


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


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


.chat-launcher .icon {
  width:1.25rem;
  height:1.25rem;
  color:#1a0809;
}


.chat-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 4px;
  background-color:#1a0809;
  color:var(--gold);
  border-radius:var(--radius-pill);
  font-size:0.7rem;
  font-weight:700;
  margin-left:2px;
}


.chat-panel {
  pointer-events:auto;
  position:absolute;
  bottom:calc(100% + var(--space-xs));
  right:0;
  width:min(380px, calc(100vw - 2rem));
  height:520px;
  max-height:calc(100vh - 8rem);
  background-color:var(--oxblood-surface);
  border:1px solid var(--oxblood-border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px) scale(0.98);
  visibility:hidden;
  transition:opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base) var(--ease-out);
}


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


.chat-panel__header {
  padding:var(--space-sm) var(--space-md);
  background-color:var(--oxblood-deep);
  border-bottom:1px solid var(--rule);
  display:flex;
  align-items:center;
  justify-content:space-between;
}


.chat-panel__title {
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  font-weight:600;
  color:var(--gold);
  letter-spacing:var(--letter-spacing-wide);
  text-transform:uppercase;
}


.chat-panel__close {
  min-height:36px;
  min-width:36px;
  padding:var(--space-3xs);
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--radius-xs);
  color:var(--cream-muted);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}


.chat-panel__close:hover {
  color:var(--cream);
  background-color:var(--oxblood-light);
}


.chat-panel__close:active {
  color:var(--gold);
  background-color:var(--oxblood-card);
}


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


.chat-panel__body {
  flex:1;
  padding:var(--space-md);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
  -webkit-overflow-scrolling:touch;
}


.chat-msg {
  display:flex;
  flex-direction:column;
  max-width:85%;
  font-size:var(--font-size-sm);
  line-height:var(--line-height-snug);
}


.chat-msg-operator {
  align-self:flex-start;
  background-color:var(--oxblood-card);
  border:1px solid var(--rule);
  color:var(--cream);
  padding:var(--space-xs) var(--space-sm);
  border-radius:var(--radius-xs);
}


.chat-msg-client {
  align-self:flex-end;
  background-color:var(--gold-subtle);
  border:1px solid var(--gold);
  color:var(--cream);
  padding:var(--space-xs) var(--space-sm);
  border-radius:var(--radius-xs);
}


.chat-panel__footer {
  padding:var(--space-sm);
  background-color:var(--oxblood-deep);
  border-top:1px solid var(--rule);
}


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


.chat-input-row input {
  flex:1;
  min-height:42px;
  background-color:var(--oxblood-surface);
  border:1px solid var(--oxblood-border);
  border-radius:var(--radius-xs);
  padding:0 var(--space-sm);
  color:var(--cream);
  font-size:var(--font-size-sm);
  outline:none;
}


.chat-input-row input:focus { border-color:var(--gold); }


.chat-input-row button {
  min-height:42px;
  padding:0 var(--space-sm);
  background-color:var(--gold);
  color:#1a0809;
  border:none;
  border-radius:var(--radius-xs);
  cursor:pointer;
  font-family:var(--falu-a12);
  font-size:var(--font-size-xs);
  font-weight:600;
  transition:background-color var(--duration-fast) var(--ease-out);
}


.chat-input-row button:hover { background-color:var(--gold-hover); }


.chat-input-row button:active { background-color:var(--gold-active); }


.chat-input-row button:focus-visible { outline:2px solid var(--cream); }