.site-header {
  position:relative;
  width:100%;
  background-color:var(--ground);
  border-bottom:var(--border-hairline);
  z-index:80;
}

.site-header .header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
  min-height:4.5rem;
  padding-block:0.75rem;
}

.brand-link {
  display:inline-flex;
  align-items:center;
  height:2.2rem;
  max-width:40vw;
  flex-shrink:0;
  outline-offset:4px;
}

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

.brand-link:hover { opacity:0.92; }

.brand-link:focus-visible { outline:var(--border-focus); }

.header-nav { display:none; }

@media (min-width: 960px) {
  .header-nav {
    display:flex;
    align-items:center;
    gap:var(--space-sm);
    margin-left:auto;
  }
}

.nav-rail-list {
  display:flex;

  align-items:center;
  gap:clamp(0.5rem, 0.4rem + 0.5vw, 1.25rem);
  list-style:none;
  margin:0;
  padding:0;
}

.nav-rail-item { position:relative; }

.nav-rail-link {
  display:inline-flex;
  align-items:center;
  padding:0.5rem 0.65rem;
  min-height:44px;
  font-family:var(--ruhu-8e2);
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--ink-soft);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease-out-quad),
              background-color var(--dur-fast) var(--ease-out-quad),
              border-color var(--dur-fast) var(--ease-out-quad);
  white-space:nowrap;
}

.nav-rail-link:hover {
  color:var(--ink);
  background-color:var(--surface);
  border-color:var(--line);
}

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

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

.nav-rail-link[aria-current="page"] {
  color:var(--accent);
  border-color:var(--accent);
  background-color:transparent;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.75rem 1.5rem;
  min-height:48px;
  max-width:100%;
  font-family:var(--ruhu-8e2);
  font-size:var(--text-sm);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--tracking-wider);
  border:1px solid transparent;
  border-radius:var(--radius-zero);
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
  box-sizing:border-box;
  transition:background-color var(--dur-fast) var(--ease-out-quad),
              color var(--dur-fast) var(--ease-out-quad),
              border-color var(--dur-fast) var(--ease-out-quad),
              transform var(--dur-fast) var(--ease-out-quad),
              box-shadow var(--dur-fast) var(--ease-out-quad);
}

.btn-primary {
  background-color:#d4b472;
  color:var(--accent-ink);
  border-color:#d4b472;
  box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
}

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

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

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

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

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

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

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

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

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

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

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

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

.phone-dock {
  position:fixed;
  inset:auto 0 0 0;
  height:var(--dock-height);
  width:100%;
  background-color:var(--surface);
  border-top:var(--border-hairline);
  box-shadow:0 -4px 16px rgba(0, 0, 0, 0.4);
  z-index:90;
  display:flex;
  align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom);
}

@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;
  display:flex;
}

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

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

.dock-label {

  font-size:11px;
  font-weight:600;
  letter-spacing:var(--tracking-wide);
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}

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

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

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

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

.phone-drawer {
  position:fixed;
  inset:0 0 var(--dock-height) 0;
  background-color:rgba(74, 31, 34, 0.98);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:89;
  display:flex;
  flex-direction:column;
  padding:var(--space-lg) var(--space-md);
  transform:translateY(100%);
  opacity:0;
  pointer-events:none;
  transition:transform var(--dur-med) var(--ease-expo),
              opacity var(--dur-med) var(--ease-expo);
  overflow-y:auto;
}

.phone-drawer.is-open {
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;

}

.phone-drawer-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:var(--space-md);
  border-bottom:var(--border-hairline);
  margin-bottom:var(--space-md);
}

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

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

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

.drawer-close-btn:focus-visible { outline:var(--border-focus); }

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

.drawer-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.85rem 1rem;
  min-height:48px;
  font-family:var(--ruhu-f48);
  font-size:var(--text-md);
  font-weight:700;
  color:var(--ink);
  border-bottom:var(--border-hairline);
  text-transform:uppercase;
  letter-spacing:var(--tracking-wide);
  transition:background-color var(--dur-fast) var(--ease-out-quad),
              color var(--dur-fast) var(--ease-out-quad);
}

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

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

.drawer-link:focus-visible { outline:var(--border-focus); }

.drawer-link[aria-current="page"] {
  color:var(--accent);
  border-left:3px solid var(--accent);
  padding-left:0.8rem;
}

.drawer-contact-block {
  margin-top:auto;
  padding-top:var(--space-md);
  border-top:var(--border-hairline);
}

.dialogue-exchange {
  width:100%;
  margin-block:var(--space-lg);
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
}

.dialogue-customer {
  align-self:flex-start;
  width:100%;
  max-width:48rem;
  padding-left:var(--space-md);
  border-left:3px solid var(--line);
}

.dialogue-customer-meta {
  font-family:var(--ruhu-9d0);
  font-size:var(--text-xs);
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:var(--tracking-wide);
  margin-bottom:0.35rem;
  display:block;
}

.dialogue-customer-text {
  font-family:var(--ruhu-f48);
  font-size:var(--text-lg);
  font-weight:800;
  color:var(--ink);
  line-height:var(--leading-snug);
  text-wrap:balance;
}

.dialogue-reply {
  align-self:flex-start;
  width:100%;
  padding:var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  background-color:var(--surface);
  border-left:3px solid var(--accent);
  border-top:var(--border-hairline);
  border-right:var(--border-hairline);
  border-bottom:var(--border-hairline);
}

.dialogue-reply-meta {
  font-family:var(--ruhu-9d0);
  font-size:var(--text-xs);
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:var(--tracking-wide);
  margin-bottom:0.5rem;
  display:block;
}

.dialogue-reply-text {
  font-size:var(--text-base);
  color:var(--ink);
  line-height:var(--leading-normal);
  max-width:var(--reading-max);
}

.dialogue-reply-evidence {
  margin-top:var(--space-md);
  width:100%;
}

.dialogue-reply-evidence img {
  width:100%;
  height:auto;
  border:var(--border-hairline);
}

.dialogue-reply-caption {
  font-family:var(--ruhu-9d0);
  font-size:var(--text-xs);
  color:var(--ink-soft);
  margin-top:0.5rem;
  display:block;
}

.spec-table-wrap {
  width:100%;
  overflow-x:auto;
  border:var(--border-hairline);
  background-color:var(--surface);
  margin-block:var(--space-md);
}

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

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

.spec-table th {
  background-color:var(--surface-2);
  color:var(--ink);
  font-family:var(--ruhu-9d0);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:var(--tracking-wider);
  font-weight:600;
  border-bottom:2px solid var(--line);
}

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

.spec-table tr:hover td { background-color:rgba(255, 255, 255, 0.03); }

.form-stack {
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  width:100%;
}

.form-group {
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  width:100%;
}

.form-label {
  font-family:var(--ruhu-8e2);
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--ink);
  letter-spacing:var(--tracking-wide);
}

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

.form-input,
.form-select,
.form-textarea {
  width:100%;
  padding:0.75rem 1rem;
  background-color:var(--surface-2);
  border:var(--border-hairline);
  border-radius:var(--radius-zero);
  color:var(--ink);
  font-size:var(--text-base);
  font-family:var(--ruhu-8e2);
  transition:border-color var(--dur-fast) var(--ease-out-quad),
              background-color var(--dur-fast) var(--ease-out-quad),
              box-shadow var(--dur-fast) var(--ease-out-quad);
}

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

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
  background-color:var(--surface);
}

.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
  border-color:#ff6b6b;
  background-color:rgba(255, 107, 107, 0.08);
}

.form-error {
  font-family:var(--ruhu-9d0);
  font-size:var(--text-xs);
  color:#f99;
  display:none;
}

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

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

.form-checkbox-label {
  display:flex;
  align-items:flex-start;
  gap:0.75rem;
  font-size:var(--text-sm);
  color:var(--ink-soft);
  cursor:pointer;
}

.form-checkbox-label input[type="checkbox"] {
  appearance:none;
  width:20px;
  height:20px;
  flex-shrink:0;
  margin-top:2px;
  background-color:var(--surface-2);
  border:var(--border-hairline);
  border-radius:var(--radius-zero);
  cursor:pointer;
  display:grid;
  place-content:center;
  transition:background-color var(--dur-fast) var(--ease-out-quad),
              border-color var(--dur-fast) var(--ease-out-quad);
}

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

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

.form-checkbox-label input[type="checkbox"]:checked::before {
  content:"";
  width:10px;
  height:10px;
  background-color:var(--accent-ink);
  clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

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

.form-trap {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.site-footer {
  position:relative;
  width:100%;
  background-color:var(--surface);
  border-top:var(--border-heavy);
  padding-top:var(--space-xl);
  padding-bottom:var(--space-xl);
  z-index:20;
}

.footer-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-xl);
  margin-bottom:var(--space-xl);
}

@media (min-width: 860px) and (max-width: 1199px) {
  .footer-grid {
    grid-template-columns:1.2fr 1fr 1fr;
    gap:var(--space-md);
  }
  .footer-grid > div:last-child { grid-column:1 / -1; }
}

@media (min-width: 1200px) {
  .footer-grid {
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:var(--space-lg);
  }
}

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

.footer-brand-logo {
  height:2.5rem;
  width:auto;
  align-self:flex-start;
}

.footer-col-title {
  font-family:var(--ruhu-f48);
  font-size:var(--text-sm);
  font-weight:800;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:var(--tracking-wider);
  margin-bottom:var(--space-sm);
  border-bottom:2px solid var(--accent);
  padding-bottom:0.35rem;
  display:inline-block;
}

.footer-nav-list {
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  list-style:none;
  padding:0;
  margin:0;
}

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

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

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

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

.footer-contact-item {
  display:flex;
  align-items:flex-start;
  gap:0.5rem;
  font-size:var(--text-sm);
  color:var(--ink-soft);
  margin-bottom:0.65rem;
  line-height:var(--leading-snug);
}

.footer-contact-item .icon {
  width:1rem;
  height:1rem;
  margin-top:0.2rem;
  color:var(--accent);
}

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

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

.footer-contact-link:focus-visible { outline:var(--border-focus); }

.footer-legal-bar {
  border-top:var(--border-hairline);
  padding-top:var(--space-md);
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  align-items:flex-start;
  justify-content:space-between;
}

@media (min-width: 860px) {
  .footer-legal-bar {
    flex-direction:row;
    align-items:center;
  }
}

.footer-legal-links {
  display:flex;
  flex-wrap:wrap;
  gap:clamp(0.75rem, 0.5rem + 0.8vw, 1.5rem);
  list-style:none;
  padding:0;
  margin:0;
}

.footer-legal-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:var(--text-xs);
  color:var(--ink-soft);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:var(--tracking-wide);
  transition:color var(--dur-fast) var(--ease-out-quad);
}

.footer-legal-link:hover {
  color:var(--ink);
  text-decoration:underline;
}

.footer-legal-link:focus-visible { outline:var(--border-focus); }

.back-to-top-btn {
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  appearance:none;
  background:var(--surface-2);
  border:var(--border-hairline);
  color:var(--ink-soft);
  padding:0.5rem 1rem;
  min-height:44px;
  font-size:var(--text-xs);
  font-family:var(--ruhu-9d0);
  text-transform:uppercase;
  cursor:pointer;
  letter-spacing:var(--tracking-wide);
  transition:background-color var(--dur-fast) var(--ease-out-quad),
              color var(--dur-fast) var(--ease-out-quad),
              border-color var(--dur-fast) var(--ease-out-quad);
}

.back-to-top-btn:hover {
  background-color:var(--ground);
  color:var(--accent);
  border-color:var(--accent);
}

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

.back-to-top-btn:focus-visible { outline:var(--border-focus); }

.consent-banner {
  position:fixed;
  inset:auto 0 0 0;
  background-color:var(--surface);
  border-top:2px solid var(--line);
  box-shadow:0 -8px 24px rgba(0, 0, 0, 0.5);
  z-index:100;
  padding:0.75rem clamp(1rem, 0.8rem + 1.2vw, 2.5rem);
  transform:translateY(100%);
  opacity:0;
  pointer-events:none;
  transition:transform var(--dur-med) var(--ease-expo),
              opacity var(--dur-med) var(--ease-expo);
}

.consent-banner.is-visible {
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

@media (max-width: 959px) {
  .consent-banner.is-visible { bottom:var(--dock-height); }
}

@media (min-width: 960px) {
  .consent-banner {
    left:0;
    right:0;
    width:100%;
  }
}

.consent-inner {
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  align-items:flex-start;
  justify-content:space-between;
  max-width:var(--site-max);
  margin-inline:0;
}

@media (min-width: 768px) {
  .consent-inner {
    flex-direction:row;
    align-items:center;
  }
}

.consent-copy {
  font-size:var(--text-sm);
  color:var(--ink);
  max-width:55ch;
  line-height:var(--leading-snug);
  margin:0;
}

.consent-link {
  color:var(--accent);
  text-decoration:underline;
  display:inline-flex;
  min-height:44px;
  align-items:center;
}

.consent-link:hover { color:#fff; }

.consent-link:focus-visible { outline:var(--border-focus); }

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

.chat-launcher {
  position:fixed;
  bottom:calc(var(--dock-height) + 1rem);
  right:1rem;
  z-index:85;
  background-color:var(--surface-2);
  border:1px solid var(--accent);
  color:var(--accent);
  padding:0.65rem 1rem;
  min-height:44px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family:var(--ruhu-8e2);
  font-size:var(--text-xs);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--tracking-wider);
  box-shadow:0 4px 16px rgba(0, 0, 0, 0.4);
  transition:background-color var(--dur-fast) var(--ease-out-quad),
              color var(--dur-fast) var(--ease-out-quad),
              border-color var(--dur-fast) var(--ease-out-quad),
              transform var(--dur-fast) var(--ease-out-quad);
}

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

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

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

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

.chat-launcher.is-raised { bottom:calc(var(--dock-height) + 175px); }

.chat-unread-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding-inline:4px;
  background-color:#ff4d4d;
  color:#fff;
  font-family:var(--ruhu-9d0);
  font-size:11px;
  font-weight:700;
  border-radius:var(--radius-zero);
}

.chat-panel {
  position:fixed;
  bottom:calc(var(--dock-height) + 0.5rem);
  right:1rem;
  width:calc(100vw - 2rem);
  max-width:380px;
  height:480px;
  max-height:calc(100vh - var(--dock-height) - 2rem);
  background-color:var(--surface);
  border:var(--border-heavy);
  box-shadow:var(--shadow-modal);
  z-index:95;
  display:flex;
  flex-direction:column;
  transform:translateY(20px) scale(0.96);
  opacity:0;
  pointer-events:none;
  transition:transform var(--dur-med) var(--ease-expo),
              opacity var(--dur-med) var(--ease-expo);
}

@media (min-width: 960px) {
  .chat-panel {
    bottom:1.5rem;
    right:1.5rem;
    max-height:calc(100vh - 4rem);
  }
}

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

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

.chat-panel-title {
  font-family:var(--ruhu-f48);
  font-size:var(--text-sm);
  font-weight:800;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:var(--tracking-wide);
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.chat-panel-title .status-dot {
  width:8px;
  height:8px;
  background-color:#4ade80;
  display:inline-block;
}

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

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

.chat-close-btn:focus-visible { outline:var(--border-focus); }

.chat-body {
  flex:1;
  padding:1rem;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}

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

.chat-msg-desk {
  align-self:flex-start;
  background-color:var(--surface-2);
  border-left:2px solid var(--accent);
  color:var(--ink);
}

.chat-msg-user {
  align-self:flex-end;
  background-color:var(--accent);
  color:var(--accent-ink);
  font-weight:600;
}

.chat-footer {
  padding:0.75rem;
  border-top:var(--border-hairline);
  background-color:var(--surface-2);
}

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

.chat-input {
  flex:1;
  padding:0.5rem 0.75rem;
  background-color:var(--ground);
  border:var(--border-hairline);
  color:var(--ink);
  font-size:var(--text-sm);
}

@media (max-width: 48rem) {
  .chat-input,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size:max(16px, 1rem); }
}

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

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

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

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

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

.diagram-stage {
  position:relative;
  width:100%;
  border:var(--border-hairline);
  background-color:var(--surface);
  overflow:hidden;
  margin-block:var(--space-lg);
}

.diagram-image-wrap {
  position:relative;
  width:100%;
}

.diagram-image-wrap img {
  width:100%;
  height:auto;
  display:block;
}

.diagram-annotation {
  position:absolute;
  z-index:10;
  display:flex;
  flex-direction:column;
  pointer-events:auto;
}

.annotation-pin {
  width:14px;
  height:14px;
  background-color:var(--accent);
  border:2px solid var(--accent-ink);
  box-shadow:0 0 0 3px rgba(194, 162, 98, 0.4);
}

.annotation-callout {
  margin-top:0.35rem;
  background-color:rgba(74, 31, 34, 0.95);
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  padding:0.35rem 0.65rem;
  font-family:var(--ruhu-9d0);
  font-size:var(--text-xs);
  color:var(--ink);
  white-space:normal;
  box-shadow:0 4px 10px rgba(0, 0, 0, 0.4);
}

.annotation-callout strong {
  color:var(--accent);
  display:block;
  font-size:10px;
  text-transform:uppercase;
}