.asklab-button {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
  border: 1px solid #f2f0e8;
  border-radius: 999px;
  background: #000;
  color: #f2f0e8;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
  overflow: hidden;
  white-space: nowrap;
  transition: width 160ms ease, border-radius 160ms ease, background 160ms ease, color 160ms ease;
}

.asklab-button:hover,
.asklab-mode-button:hover,
.asklab-mode-button:focus-visible,
.asklab-choice:hover,
.asklab-choice:focus-visible,
.asklab-role-card:hover,
.asklab-role-card:focus-visible,
.asklab-route-card:hover,
.asklab-route-card:focus-visible,
.asklab-support-card:hover,
.asklab-support-card:focus-visible,
.asklab-accordion-summary:hover,
.asklab-accordion-summary:focus-visible,
.asklab-back:hover,
.asklab-back:focus-visible,
.asklab-close:hover,
.asklab-close:focus-visible {
  background: #f2f0e8;
  color: #000;
  outline: none;
}

.asklab-button:focus-visible {
  background: #f2f0e8;
  color: #000;
  outline: 2px solid #f2f0e8;
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .asklab-button:hover,
  .asklab-button:focus-visible {
    width: 132px;
    border-radius: 999px;
    letter-spacing: 0.12em;
  }
}

.asklab-panel {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 66px);
  z-index: 50;
  width: min(92vw, 380px);
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid #f2f0e8;
  background: #000;
  color: #f2f0e8;
  box-sizing: border-box;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.72);
}

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

.asklab-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(242, 240, 232, 0.36);
  padding: 14px;
}

.asklab-avatar {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.asklab-title {
  margin: 0;
  color: #f2f0e8;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.16em;
  line-height: 1.15;
  text-transform: uppercase;
}

.asklab-close {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid rgba(242, 240, 232, 0.58);
  background: #000;
  color: #f2f0e8;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 950;
}

.asklab-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.asklab-intro,
.asklab-response,
.asklab-staged-message,
.asklab-technical,
.asklab-secret,
.asklab-glossary {
  margin: 0;
  color: #d7d3c8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.asklab-staged-message {
  border-left: 1px solid rgba(242, 240, 232, 0.58);
  padding-left: 10px;
  color: #f2f0e8;
  font-size: 14px;
}

.asklab-user-choice {
  justify-self: end;
  max-width: 86%;
  margin: 0;
  border: 1px solid rgba(242, 240, 232, 0.34);
  padding: 10px 12px;
  color: #f2f0e8;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-align: right;
  text-transform: uppercase;
}

.asklab-role-options {
  display: grid;
  gap: 10px;
}

.asklab-route-options,
.asklab-support-options {
  display: grid;
  gap: 10px;
}

.asklab-role-card,
.asklab-route-card,
.asklab-support-card {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(242, 240, 232, 0.58);
  background: #000;
  color: #f2f0e8;
  padding: 13px 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.asklab-route-card,
.asklab-support-card {
  min-height: 44px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.asklab-role-label {
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
  line-height: 1.1;
  text-transform: uppercase;
}

.asklab-role-subtitle {
  color: #9d9a92;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.asklab-selling-hint {
  border: 1px solid rgba(242, 240, 232, 0.28);
  padding: 11px 12px;
  background: rgba(242, 240, 232, 0.04);
}

.asklab-disclaimer {
  margin: 0;
  border-top: 1px solid rgba(242, 240, 232, 0.22);
  padding-top: 12px;
  color: #9d9a92;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  text-transform: uppercase;
}

.asklab-choice,
.asklab-mode-button,
.asklab-back {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(242, 240, 232, 0.58);
  background: #000;
  color: #f2f0e8;
  padding: 11px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}

.asklab-mode-button,
.asklab-back {
  text-align: center;
}

.asklab-product-name {
  margin: 0;
  color: #f2f0e8;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.08;
  text-transform: uppercase;
}

.asklab-kicker {
  margin: 0;
  color: #9d9a92;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.asklab-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.asklab-list-item {
  border-top: 1px solid rgba(242, 240, 232, 0.22);
  padding-top: 8px;
}

.asklab-result-media {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(242, 240, 232, 0.28);
  background: #111;
  padding: 10px;
  box-sizing: border-box;
  cursor: zoom-in;
}

.asklab-result-media:hover,
.asklab-result-media:focus-visible {
  border-color: rgba(242, 240, 232, 0.72);
  outline: none;
}

.asklab-result-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(320px, 32vh);
  object-fit: contain;
  object-position: center;
}

.asklab-result-preview {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.asklab-result-preview[hidden] {
  display: none;
}

.asklab-result-preview-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.9);
  cursor: zoom-out;
}

.asklab-result-preview-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(94vw, 960px);
  max-height: calc(100vh - 32px);
  border: 1px solid rgba(242, 240, 232, 0.58);
  background: #050505;
  padding: 42px 12px 12px;
  box-sizing: border-box;
}

.asklab-result-preview-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(242, 240, 232, 0.58);
  background: #000;
  color: #f2f0e8;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 950;
}

.asklab-result-preview-close:hover,
.asklab-result-preview-close:focus-visible {
  background: #f2f0e8;
  color: #000;
  outline: none;
}

.asklab-result-preview-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 88px);
  object-fit: contain;
}

.asklab-input-label {
  display: grid;
  gap: 8px;
  color: #9d9a92;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.asklab-text-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(242, 240, 232, 0.58);
  background: #000;
  color: #f2f0e8;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.asklab-text-input:focus-visible {
  border-color: #f2f0e8;
  outline: none;
}

.asklab-accordion-list {
  display: grid;
  gap: 8px;
}

.asklab-accordion {
  border-top: 1px solid rgba(242, 240, 232, 0.22);
  padding-top: 8px;
}

.asklab-accordion-summary {
  min-height: 40px;
  border: 1px solid rgba(242, 240, 232, 0.44);
  padding: 11px 12px;
  color: #f2f0e8;
  cursor: pointer;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  list-style: none;
  text-transform: uppercase;
}

.asklab-accordion-summary::-webkit-details-marker {
  display: none;
}

.asklab-accordion-summary::after {
  content: "+";
  float: right;
}

.asklab-accordion[open] .asklab-accordion-summary::after {
  content: "-";
}

.asklab-accordion .asklab-glossary {
  padding: 10px 2px 2px;
}

.asklab-term {
  display: block;
  margin-bottom: 4px;
  color: #f2f0e8;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .asklab-panel {
    right: auto;
    left: 50%;
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 60px);
    width: min(92vw, 380px);
    max-height: 68vh;
    transform: translateX(-50%);
  }

  .asklab-button {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  body:has(#size-guide.is-active) .asklab-button {
    top: 128px;
    bottom: auto;
  }

  .asklab-avatar {
    width: 40px;
    height: 40px;
  }

  .asklab-result-image {
    max-height: min(220px, 25vh);
  }

  .asklab-result-preview {
    padding: 10px;
  }

  .asklab-result-preview-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 42px 8px 8px;
  }

  .asklab-result-preview-image {
    max-height: calc(100vh - 70px);
  }
}