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

.icon-s {
   width: 1em;
   height: 1em;
}

.icon-m {
   width: 1.5em;
   height: 1.5em;
}

.icon-l {
   width: 2em;
   height: 2em;

}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-xs);
   min-height: 48px;
   height: 48px;
   padding: 0 1.4rem;
   border-radius: var(--radius-none);
   font-family: var(--hizi-9b6);
   font-size: var(--step--1);
   font-weight: 500;
   letter-spacing: 0.02em;
   text-decoration: none;
   cursor: pointer;
   border: 1px solid transparent;
   box-shadow: none;
   transition: background-color var(--dur-base) var(--ease-out),
                     border-color var(--dur-base) var(--ease-out),
                     color var(--dur-base) var(--ease-out),
                     box-shadow var(--dur-base) var(--ease-out);
   white-space: normal;
   text-align: center;
   box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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

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

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

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

.btn-sm {

   min-height: 38px;
   padding: 0.45rem 1rem;
   font-size: var(--step--2);
}

@media (max-width: 480px) {
   .btn {
      white-space: normal;
      word-break: normal;
      overflow-wrap: break-word;
      max-width: 100%;
   }
   .job-action-row .btn {
      width: 100%;
      min-width: 0;
   }
}

.btn-lg {
   min-height: 48px;
   height: 48px;
   padding: 0 1.8rem;
   font-size: var(--step--1);
}

.btn-full {
   width: 100%;
}

.chip {
   display: inline-flex;
   align-items: center;
   gap: var(--space-3xs);
   min-height: 28px;
   padding: 0.2rem 0.65rem;
   background-color: var(--surface);
   color: var(--ink-soft);
   border: var(--border-fine);
   font-family: var(--hizi-9b6);
   font-size: var(--step--2);
   letter-spacing: 0.03em;
   text-transform: uppercase;
   border-radius: var(--radius-none);
}

.chip:hover {
   background-color: var(--surface-2);
   color: var(--ink);
}

.chip:active {
   background-color: var(--ground);
   color: var(--ink);
}

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

.site-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: var(--header-height);
   background-color: rgba(222, 210, 188, 0.94);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   border-bottom: var(--border-fine);
   z-index: 100;
   display: flex;
   align-items: center;
   padding-inline: var(--space-s);
}

@media (min-width: 768px) {
   .site-header {
      padding-inline: var(--space-l);
   }
}

.site-header-inner {
   width: 100%;
   max-width: var(--measure-max);
   margin-inline: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.brand {
   display: inline-flex;
   align-items: center;
   text-decoration: none;
   min-height: 44px;
   padding: 0.25rem 0.5rem;
   border-radius: var(--radius-none);
   transition: opacity var(--dur-fast) var(--ease-out);
}

.brand:hover {
   opacity: 0.85;
}

.brand:active {
   opacity: 0.7;
}

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

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

.nav-toggle-btn {
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
   min-height: 44px;
   padding: 0.5rem 0.9rem;
   background-color: var(--surface);
   border: var(--border-fine);
   color: var(--ink);
   font-family: var(--hizi-9b6);
   font-size: var(--step--1);
   font-weight: 500;
   cursor: pointer;
   transition: background-color var(--dur-fast) var(--ease-out),
                     border-color var(--dur-fast) var(--ease-out),
                     color var(--dur-fast) var(--ease-out);
}

.site-header {
   z-index: 1000;
}

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

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

.nav-toggle-btn:focus-visible {

   outline: 2px solid var(--accent);
   outline-offset: 2px;
}

.nav-toggle-label {
   letter-spacing: 0.04em;
   text-transform: uppercase;
   font-size: var(--step--2);
}

.edge-rail {
   display: none;
}

@media (min-width: 1024px) {
   .edge-rail {
      display: flex;
      position: fixed;
      top: var(--header-height);
      left: 0;
      bottom: 0;
      width: var(--rail-width);
      background-color: var(--surface);
      border-right: var(--border-fine);
      z-index: 90;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding-block: var(--space-m);
      padding-bottom: calc(var(--space-m) + 90px);
   }

   .edge-rail-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-xs);
   }

   .rail-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--line);
      transition: background-color var(--dur-fast) var(--ease-out),
                        transform var(--dur-fast) var(--ease-out);
   }

   .rail-dot.is-active {
      background-color: var(--accent);
      transform: scale(1.4);
   }

   .edge-rail-label {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-family: var(--hizi-9b6);
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--ink-soft);
   }

   .edge-rail-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      color: var(--ink);
      text-decoration: none;
      border: 1px solid transparent;
      transition: background-color var(--dur-fast) var(--ease-out),
                        border-color var(--dur-fast) var(--ease-out),
                        color var(--dur-fast) var(--ease-out);
   }

   .edge-rail-link:hover {
      background-color: var(--surface-2);
      border-color: var(--line);
      color: var(--accent);
   }

   .edge-rail-link:active {
      background-color: var(--ground);
   }

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

   body.has-rail #smooth-wrapper {
      padding-left: var(--rail-width);
   }
}

.nav-overlay {
   position: fixed;
   inset: 0;
   background-color: rgba(222, 210, 188, 0.98);
   -webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
   z-index: 200;
   display: flex;
   flex-direction: column;
   padding: var(--space-m);
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--dur-deliberate) var(--ease-out),
                     visibility var(--dur-deliberate) var(--ease-out);
   overflow-y: auto;
}

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

.nav-overlay-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   max-width: var(--measure-max);
   width: 100%;
   margin-inline: auto;
   padding-bottom: var(--space-m);
   border-bottom: var(--border-fine);
}

.nav-overlay-close-btn {
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
   min-height: 44px;
   padding: 0.5rem 1rem;
   background-color: var(--surface);
   border: var(--border-fine);
   color: var(--ink);
   font-family: var(--hizi-9b6);
   font-size: var(--step--1);
   font-weight: 500;
   cursor: pointer;
   transition: background-color var(--dur-fast) var(--ease-out),
                     border-color var(--dur-fast) var(--ease-out),
                     color var(--dur-fast) var(--ease-out);
}

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

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

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

.nav-overlay-body {
   flex: 1;
   max-width: var(--measure-max);
   width: 100%;
   margin-inline: auto;
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-xl);
   padding-block: var(--space-xl);
   align-items: center;
}

@media (min-width: 900px) {
   .nav-overlay-body {
      grid-template-columns: 1.4fr 1fr;
   }
}

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

.nav-overlay-item {
   margin: 0;
}

.nav-overlay-link {
   display: block;
   font-family: var(--hizi-65b);
   font-size: var(--hizi-c98);
   line-height: 1.2;
   color: var(--ink);
   text-decoration: none;
   padding: var(--space-2xs) 0;
   transition: color var(--dur-fast) var(--ease-out),
                     transform var(--dur-fast) var(--ease-out);
}

@media (min-width: 600px) {
   .nav-overlay-link {
      font-size: var(--hizi-341);
   }
}

.nav-overlay-link:hover {
   color: var(--accent);
   transform: translateX(6px);
}

.nav-overlay-link:active {
   color: #793f1b;
}

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

.nav-overlay-link[aria-current='page'] {
   color: var(--accent);
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 6px;
}

.nav-overlay-aside {
   display: none;
}

@media (min-width: 900px) {
   .nav-overlay-aside {
      display: flex;
      flex-direction: column;
      gap: var(--space-m);
      padding: var(--space-l);
      background-color: var(--surface);
      border: var(--border-fine);
   }

   .nav-overlay-aside img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border: var(--border-fine);
   }

   .nav-overlay-aside-text {
      font-size: var(--step--1);
      color: var(--ink-soft);
      line-height: 1.5;
   }
}

.nav-overlay-footer {
   max-width: var(--measure-max);
   width: 100%;
   margin-inline: auto;
   padding-top: var(--space-m);
   border-top: var(--border-fine);
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-s);
   justify-content: space-between;
   align-items: center;
   font-family: var(--hizi-9b6);
   font-size: var(--step--2);
   color: var(--ink-soft);
}

.job-card {
   background-color: var(--surface);
   border: var(--border-fine);
   padding: var(--space-l);
   display: flex;
   flex-direction: column;
   gap: var(--space-m);
}

.job-card:hover {
   background-color: #d7c9b0;
}

.job-facts {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: var(--space-s);
   padding-block: var(--space-s);
   border-top: var(--border-fine);
   border-bottom: var(--border-fine);
}

.fact-item {
   display: flex;
   flex-direction: column;
   gap: var(--space-3xs);
}

.fact-label {
   font-family: var(--hizi-9b6);
   font-size: var(--step--2);
   color: var(--ink-soft);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.fact-value {
   font-family: var(--hizi-9b6);
   font-size: var(--hizi-c84);
   font-weight: 500;
   color: var(--ink);
   font-variant-numeric: tabular-nums;
}

.duotone-caesura {
   position: relative;
   width: 100%;
   min-height: 480px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   background-color: #2b261c;
   margin-block: var(--space-2xl);
}

.duotone-caesura-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: contrast(1.15) brightness(0.7) sepia(0.35) hue-rotate(-20deg);
   opacity: 0.85;
}

.duotone-caesura-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(43, 38, 28, 0.45) 0%, rgba(166, 94, 46, 0.35) 100%);
   mix-blend-mode: multiply;
}

.duotone-caesura-content {
   position: relative;
   z-index: 2;
   max-width: 820px;
   padding: var(--space-l);
   text-align: center;
   color: #ffffff;
}

.duotone-caesura-content h2 {
   font-family: var(--hizi-65b);
   font-size: var(--hizi-341);
   line-height: 1.15;
   color: #ffffff;
   margin-bottom: var(--space-s);
   text-wrap: balance;
}

.duotone-caesura-content p {
   color: #ded2bc;
   font-size: var(--hizi-8bc);
   margin-inline: auto;
   max-width: 55ch;
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: var(--space-2xs);
   margin-block-end: var(--space-m);
}

.form-label {
   font-family: var(--hizi-9b6);
   font-size: var(--step--1);
   font-weight: 500;
   color: var(--ink);
   display: flex;
   justify-content: space-between;
   align-items: baseline;
}

.form-label-optional {
   font-size: var(--step--2);
   color: var(--ink-soft);
   font-weight: 400;
}

.form-input,
.form-select,
.form-textarea {
   width: 100%;
   min-height: 48px;
   height: 48px;
   padding: 0 0.85rem;
   background-color: var(--surface-2);
   border: var(--border-fine);
   border-radius: var(--radius-none);
   box-shadow: none;
   box-sizing: border-box;
   color: var(--ink);
   font-family: var(--hizi-32b);
   font-size: var(--hizi-c84);
   transition: border-color var(--dur-fast) var(--ease-out),
                     background-color var(--dur-fast) var(--ease-out),
                     box-shadow var(--dur-fast) var(--ease-out);
}

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

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

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

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
   border-color: #b52a1a;
   background-color: #f7ebe8;
}

.form-error-msg {
   display: none;
   font-family: var(--hizi-9b6);
   font-size: var(--step--2);
   color: #8f1b0f;
   margin-top: var(--space-3xs);
}

.form-input.is-invalid + .form-error-msg,
.form-textarea.is-invalid + .form-error-msg,
.form-group.has-error .form-error-msg {
   display: block;
}

.form-checkbox-label {
   display: flex;
   align-items: flex-start;
   gap: var(--space-xs);
   cursor: pointer;
   font-size: var(--step--1);
   color: var(--ink);
   line-height: 1.4;
}

.form-checkbox {
   appearance: none;
   -webkit-appearance: none;
   width: 20px;
   height: 20px;
   border: var(--border-fine);
   background-color: var(--surface-2);
   margin-top: 2px;
   flex-shrink: 0;
   display: grid;
   place-content: center;
   cursor: pointer;
   transition: background-color var(--dur-fast) var(--ease-out),
                     border-color var(--dur-fast) var(--ease-out);
}

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

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

.form-checkbox:checked::before {
   content: "";
   width: 10px;
   height: 10px;
   background-color: var(--accent-ink);
   clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 16%, 80% 0%, 40% 64%);
}

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

.form-status {
   padding: var(--space-s);
   border: var(--border-fine);
   font-family: var(--hizi-9b6);
   font-size: var(--step--1);
   margin-block-start: var(--space-s);
   display: none;
}

.form-status.is-success {
   display: block;
   background-color: #dfecda;
   border-color: #55854b;
   color: #1f4717;
}

.form-status.is-error {
   display: block;
   background-color: #f7ebe8;
   border-color: #b52a1a;
   color: #8f1b0f;
}

.site-footer {
   background-color: var(--surface);
   border-top: var(--border-thick);
   padding-block: var(--space-2xl) var(--space-xl);
   margin-top: var(--space-3xl);
}

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

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

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

.footer-brand {
   display: inline-block;
   text-decoration: none;
   min-height: 44px;
}

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

.footer-brand:hover {
   opacity: 0.85;
}

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

.footer-lead {
   font-size: var(--hizi-c84);
   color: var(--ink-soft);
   max-width: 44ch;
}

.footer-col-title {
   font-family: var(--hizi-9b6);
   font-size: var(--step--1);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--ink);
   margin-bottom: var(--space-s);
   font-weight: 500;
}

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

.footer-link {
   font-size: var(--step--1);
   color: var(--ink-soft);
   text-decoration: none;
   min-height: 44px;
   display: inline-flex;
   align-items: center;
}

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

.footer-link:active {
   color: #793f1b;
}

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

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

.footer-legal-bar {
   border-top: var(--border-fine);
   padding-top: var(--space-m);
   display: flex;
   flex-direction: column;
   gap: var(--space-s);
   font-size: var(--step--2);
   color: var(--ink-soft);
}

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

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

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

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

.footer-legal-link:active {
   color: #793f1b;
}

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

.cookie-reopen-btn {
   background: none;
   border: none;
   padding: 0.5rem 0;
   font-family: inherit;
   font-size: var(--step--2);
   color: var(--ink-soft);
   text-decoration: underline;
   cursor: pointer;
   min-height: 44px;
   display: inline-flex;
   align-items: center;
}

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

.cookie-reopen-btn:active {
   color: #793f1b;
}

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

.cookie-banner {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 150;
   background-color: var(--surface);
   border-top: var(--border-thick);
   padding: var(--space-s) var(--space-s);
   box-shadow: 0 -4px 16px rgba(43, 38, 28, 0.08);
   display: none;
}

@media (min-width: 1024px) {
   body.has-rail .cookie-banner {
      left: var(--rail-width);
      right: 0;
      z-index: 85;
      padding-left: calc(var(--space-s) + 12px);
   }
}

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

.cookie-banner-inner {
   max-width: var(--measure-max);
   margin-inline: auto;
   display: flex;
   flex-direction: column;
   gap: var(--space-s);
}

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

.cookie-banner-text {
   font-size: var(--step--1);
   color: var(--ink);
   line-height: 1.4;
   margin: 0;
   max-width: var(--measure-prose);
}

.cookie-banner-text a {
   color: var(--ink);
   text-decoration: underline;
   font-weight: 500;
}

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

.cookie-banner-text a:active {
   color: #793f1b;
}

.cookie-banner-text a:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
}

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

.chat-launcher {
   position: fixed;
   bottom: var(--space-m);
   right: var(--space-m);
   z-index: 140;
   min-height: 48px;
   height: 48px;
   padding: 0 var(--space-m);
   background-color: var(--surface);
   border: var(--border-fine);
   border-radius: var(--radius-none);
   color: var(--ink);
   font-family: var(--hizi-9b6);
   font-size: var(--step--1);
   font-weight: 500;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
   box-shadow: 0 4px 14px rgba(43, 38, 28, 0.12);
   transition: background-color var(--dur-base) var(--ease-out),
                     border-color var(--dur-base) var(--ease-out),
                     color var(--dur-base) var(--ease-out),
                     box-shadow var(--dur-base) var(--ease-out);
}

.chat-launcher:hover {
   background-color: var(--surface-2);
   border-color: var(--ink);
   color: var(--accent);
   box-shadow: 0 6px 18px rgba(43, 38, 28, 0.18);
}

.chat-launcher:active {
   background-color: var(--ground);
   border-color: var(--ink);
   color: var(--accent);
   box-shadow: 0 2px 8px rgba(43, 38, 28, 0.22);
}

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

.chat-launcher.has-banner-offset {
   bottom: calc(var(--space-m) + 90px);
}

.chat-badge {
   display: none;
   min-width: 18px;
   height: 18px;
   padding: 0 4px;
   background-color: var(--accent);
   color: var(--accent-ink);
   font-size: 11px;
   border-radius: 9px;
   align-items: center;
   justify-content: center;
   font-weight: 600;
}

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

.chat-panel {
   position: fixed;
   bottom: var(--space-m);
   right: var(--space-m);
   width: calc(100vw - 2 * var(--space-m));
   max-width: 380px;
   height: 520px;
   max-height: calc(100vh - 2 * var(--space-m));
   max-height: calc(100svh - 2 * var(--space-m));
   background-color: var(--surface);
   border: var(--border-fine);
   box-shadow: 0 12px 36px rgba(43, 38, 28, 0.2);
   z-index: 160;
   display: flex;
   flex-direction: column;
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--dur-base) var(--ease-out),
                     visibility var(--dur-base) var(--ease-out);
}

.chat-panel.is-open {
   visibility: visible;
   opacity: 1;
   pointer-events: auto;
}

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

.chat-panel-title {
   font-family: var(--hizi-9b6);
   font-size: var(--step--1);
   font-weight: 500;
   color: var(--ink);
}

.chat-close-btn {
   background: none;
   border: var(--border-fine);
   padding: 0.35rem 0.6rem;
   font-family: var(--hizi-9b6);
   font-size: var(--step--2);
   cursor: pointer;
   min-height: 38px;
   display: inline-flex;
   align-items: center;
   gap: var(--space-3xs);
   transition: background-color var(--dur-fast) var(--ease-out),
                     border-color var(--dur-fast) var(--ease-out);
}

.chat-close-btn:hover {
   background-color: var(--ground);
   border-color: var(--ink);
}

.chat-close-btn:active {
   background-color: var(--surface);
}

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

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

.chat-msg {
   max-width: 85%;
   padding: var(--space-xs) var(--space-s);
   font-size: var(--step--1);
   line-height: 1.4;
   word-break: break-word;
}

.chat-msg-bot {
   align-self: flex-start;
   background-color: var(--surface);
   border: var(--border-fine);
   color: var(--ink);
}

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

.chat-msg-time {
   display: block;
   font-size: 10px;
   opacity: 0.7;
   margin-top: 4px;
   font-family: var(--hizi-9b6);
}

.chat-panel-footer {
   padding: var(--space-s);
   border-top: var(--border-fine);
   background-color: var(--surface);
}

.chat-form {
   display: flex;
   flex-direction: column;
   gap: var(--space-2xs);
}

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

.chat-input {
   flex: 1;
   min-height: 44px;
   padding: 0.5rem 0.75rem;
   background-color: var(--surface-2);
   border: var(--border-fine);
   font-size: var(--step--1);
}

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

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

.chat-send-btn {
   min-height: 44px;
   padding: 0.5rem 1rem;
   background-color: var(--accent);
   color: var(--accent-ink);
   border: 1px solid var(--accent);
   font-family: var(--hizi-9b6);
   font-size: var(--step--1);
   cursor: pointer;
   transition: background-color var(--dur-fast) var(--ease-out);
}

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

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

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