:root {
  color: #f3f7ff;
  background: #07101f;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

/* A experiência principal é vocal. O chat textual continua no mesmo runtime,
   mas fica recolhido até a pessoa optar por abri-lo. */
.shell > .jarvis-stage {
  order: 2;
  margin-bottom: 14px;
}

.jarvis-stage {
  --jarvis-primary: #69c7ff;
  --jarvis-secondary: #277ed6;
  --jarvis-halo: rgb(64 174 255 / 28%);
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 570px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 42px 24px 30px;
  border: 1px solid rgb(82 154 220 / 35%);
  border-radius: 28px;
  background:
    linear-gradient(rgb(40 129 204 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(40 129 204 / 7%) 1px, transparent 1px),
    radial-gradient(circle at 50% 52%, rgb(30 132 217 / 24%), transparent 16rem),
    linear-gradient(160deg, rgb(8 25 47 / 96%), rgb(5 14 28 / 98%));
  background-size: 38px 38px, 38px 38px, auto, auto;
  box-shadow:
    inset 0 0 80px rgb(47 150 228 / 8%),
    0 26px 90px rgb(0 0 0 / 30%);
  flex-direction: column;
  text-align: center;
}

.jarvis-stage::before,
.jarvis-stage::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.jarvis-stage::before {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.8%, rgb(93 189 255 / 11%) 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, rgb(93 189 255 / 9%) 50%, transparent 50.2%);
  mask-image: radial-gradient(circle at center, black, transparent 67%);
}

.jarvis-stage::after {
  width: min(620px, 90vw);
  height: min(620px, 90vw);
  border: 1px solid rgb(104 192 255 / 9%);
  border-radius: 50%;
  box-shadow:
    0 0 0 52px rgb(67 160 232 / 3%),
    0 0 0 108px rgb(67 160 232 / 2%);
}

.jarvis-stage-copy {
  position: relative;
  z-index: 3;
  max-width: 680px;
}

.jarvis-stage-copy h2,
.jarvis-stage-copy p {
  margin: 0;
}

.jarvis-stage-copy h2 {
  margin-top: 6px;
  color: #f4f9ff;
  font-size: clamp(1.45rem, 4vw, 2.15rem);
  letter-spacing: -0.035em;
}

.jarvis-stage-copy h2 span {
  color: var(--jarvis-primary);
  text-shadow: 0 0 28px var(--jarvis-halo);
}

.jarvis-stage-copy > p:last-child {
  margin-top: 8px;
  color: #8fa9c5;
  font-size: 0.84rem;
  line-height: 1.5;
}

.jarvis-stage-kicker {
  color: #78bded;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.jarvis-reactor-shell {
  position: absolute;
  top: 54%;
  left: 50%;
  width: clamp(250px, 39vw, 390px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.jarvis-orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--jarvis-primary) 55%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 28px var(--jarvis-halo);
}

.jarvis-orbit::before,
.jarvis-orbit::after {
  position: absolute;
  border-radius: 50%;
  background: var(--jarvis-primary);
  box-shadow: 0 0 15px var(--jarvis-primary);
  content: "";
}

.jarvis-orbit::before {
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
}

.jarvis-orbit::after {
  right: -2px;
  bottom: 27%;
  width: 4px;
  height: 4px;
}

.jarvis-orbit-outer {
  inset: 0;
  border-style: dashed;
  opacity: 0.42;
  animation: jarvis-orbit 24s linear infinite;
}

.jarvis-orbit-middle {
  inset: 13%;
  border-right-color: transparent;
  border-left-color: transparent;
  opacity: 0.7;
  animation: jarvis-orbit-reverse 15s linear infinite;
}

.jarvis-orbit-inner {
  inset: 25%;
  border-width: 2px;
  border-bottom-color: transparent;
  animation: jarvis-orbit 9s linear infinite;
}

.jarvis-core {
  position: relative;
  z-index: 4;
  display: grid;
  width: clamp(154px, 22vw, 214px);
  aspect-ratio: 1;
  margin: 54px 0 38px;
  place-items: center;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--jarvis-primary) 80%, white 20%);
  border-radius: 50%;
  outline: none;
  background:
    radial-gradient(circle, rgb(226 247 255 / 96%) 0 3%, transparent 4%),
    radial-gradient(circle, var(--jarvis-primary) 0 12%, transparent 13%),
    repeating-radial-gradient(
      circle,
      rgb(91 190 255 / 30%) 0 2px,
      transparent 3px 15px
    ),
    radial-gradient(circle, rgb(24 103 168 / 68%), rgb(5 28 54 / 96%) 68%);
  color: #eefdff;
  box-shadow:
    0 0 0 8px rgb(56 158 226 / 8%),
    0 0 40px var(--jarvis-halo),
    inset 0 0 40px rgb(91 194 255 / 30%);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
  animation: jarvis-breathe 2.8s ease-in-out infinite;
}

.jarvis-core:hover:not(:disabled) {
  filter: brightness(1.18);
  transform: scale(1.035);
}

.jarvis-core:active:not(:disabled) {
  transform: scale(0.975);
}

.jarvis-core:focus-visible {
  outline: 4px solid rgb(141 215 255 / 44%);
  outline-offset: 8px;
}

.jarvis-core:disabled {
  cursor: not-allowed;
  filter: grayscale(0.45);
  opacity: 0.58;
}

.jarvis-stage[data-state="listening"] .jarvis-core:disabled,
.jarvis-stage[data-state="thinking"] .jarvis-core:disabled,
.jarvis-stage[data-state="speaking"] .jarvis-core:disabled,
.jarvis-stage[data-state="silent"] .jarvis-core:disabled {
  filter: none;
  opacity: 1;
}

.jarvis-core-grid {
  position: absolute;
  inset: 13%;
  border: 1px solid rgb(199 237 255 / 32%);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49%, rgb(215 243 255 / 23%) 50%, transparent 51%),
    linear-gradient(transparent 49%, rgb(215 243 255 / 23%) 50%, transparent 51%);
  transform: rotate(45deg);
}

.jarvis-core-glyph {
  position: relative;
  width: 34%;
  aspect-ratio: 1;
  border: 2px solid rgb(228 248 255 / 78%);
  transform: rotate(45deg);
  box-shadow:
    0 0 22px var(--jarvis-primary),
    inset 0 0 18px var(--jarvis-halo);
}

.jarvis-core-glyph::after {
  position: absolute;
  inset: 24%;
  border: 1px solid rgb(236 250 255 / 82%);
  background: rgb(122 211 255 / 22%);
  content: "";
}

.jarvis-core-feedback {
  position: relative;
  z-index: 4;
  display: flex;
  max-width: 620px;
  gap: 5px;
  align-items: center;
  flex-direction: column;
}

.jarvis-core-feedback strong {
  color: #ecf8ff;
  font-size: 1rem;
}

.jarvis-core-feedback span {
  color: #829ab5;
  font-size: 0.76rem;
  line-height: 1.45;
}

.jarvis-silent-privacy {
  position: relative;
  z-index: 4;
  max-width: 680px;
  margin: 12px auto 0;
  padding: 9px 13px;
  border: 1px solid rgb(139 169 192 / 24%);
  border-radius: 10px;
  background: rgb(12 29 44 / 62%);
  color: #9eb4c5;
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: center;
}

.jarvis-silent-privacy[hidden] {
  display: none !important;
}

.jarvis-replay-button,
.jarvis-listening-button,
.jarvis-audio-button,
.chat-panel-toggle,
.chat-panel-close {
  position: relative;
  z-index: 4;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgb(91 158 212 / 42%);
  border-radius: 999px;
  background: rgb(11 36 62 / 72%);
  color: #b9d7ee;
  font-size: 0.76rem;
  font-weight: 720;
  cursor: pointer;
}

.jarvis-stage-actions {
  position: relative;
  z-index: 4;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jarvis-stage-actions .chat-panel-toggle {
  margin-top: 0;
}

.jarvis-replay-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.jarvis-listening-button {
  border-color: rgb(74 210 193 / 48%);
  background: rgb(8 66 65 / 68%);
  color: #a6f4e5;
}

.jarvis-listening-button[aria-pressed="false"] {
  border-color: rgb(255 177 102 / 50%);
  background: rgb(81 48 17 / 68%);
  color: #ffd4a5;
}

.jarvis-listening-button[hidden] {
  display: none !important;
}

.jarvis-audio-button {
  border-color: rgb(255 177 102 / 50%);
  background: rgb(81 48 17 / 68%);
  color: #ffd4a5;
}

.jarvis-audio-button[hidden] {
  display: none !important;
}

.jarvis-listening-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.chat-panel-toggle {
  margin-top: 22px;
}

.jarvis-replay-button:hover:not(:disabled),
.jarvis-listening-button:hover:not(:disabled),
.jarvis-audio-button:hover:not(:disabled),
.chat-panel-toggle:hover,
.chat-panel-close:hover {
  border-color: #69bdf6;
  color: #fff;
}

.jarvis-replay-button:focus-visible,
.jarvis-listening-button:focus-visible,
.jarvis-audio-button:focus-visible,
.chat-panel-toggle:focus-visible,
.chat-panel-close:focus-visible {
  outline: 3px solid rgb(102 179 249 / 34%);
  outline-offset: 3px;
}

.chat-panel[hidden] {
  display: none !important;
}

.chat-panel-heading {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgb(82 118 164 / 28%);
  background: rgb(7 19 35 / 94%);
}

.chat-panel-heading > div {
  display: flex;
  gap: 2px;
  flex-direction: column;
}

.chat-panel-heading span {
  color: #6faee2;
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.chat-panel-heading strong {
  color: #e8f4ff;
  font-size: 0.92rem;
}

.chat-panel-close {
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 9px;
}

.jarvis-stage[data-state="listening"] {
  --jarvis-primary: #77efff;
  --jarvis-secondary: #20a8ca;
  --jarvis-halo: rgb(66 226 255 / 32%);
}

.jarvis-stage[data-state="listening"] .jarvis-core {
  animation: jarvis-listening 0.7s ease-in-out infinite alternate;
}

.jarvis-stage[data-state="listening"] .jarvis-orbit {
  animation-duration: 4s;
}

.jarvis-stage[data-state="thinking"] {
  --jarvis-primary: #a69cff;
  --jarvis-secondary: #6559df;
  --jarvis-halo: rgb(139 123 255 / 32%);
}

.jarvis-stage[data-state="thinking"] .jarvis-core {
  animation: jarvis-thinking 1.05s linear infinite;
}

.jarvis-stage[data-state="thinking"] .jarvis-orbit-outer {
  animation-duration: 4.5s;
}

.jarvis-stage[data-state="thinking"] .jarvis-orbit-middle {
  animation-duration: 2.8s;
}

.jarvis-stage[data-state="thinking"] .jarvis-orbit-inner {
  animation-duration: 1.7s;
}

.jarvis-stage[data-state="speaking"] {
  --jarvis-primary: #7af2c5;
  --jarvis-secondary: #2ab78a;
  --jarvis-halo: rgb(71 228 178 / 32%);
}

.jarvis-stage[data-state="speaking"] .jarvis-core {
  animation: jarvis-speaking 0.52s ease-in-out infinite alternate;
}

.jarvis-stage[data-state="silent"] {
  --jarvis-primary: #8aa6bb;
  --jarvis-secondary: #516a80;
  --jarvis-halo: rgb(116 151 178 / 18%);
  border-color: rgb(132 164 188 / 30%);
}

.jarvis-stage[data-state="silent"] .jarvis-core {
  animation: jarvis-silent 3.4s ease-in-out infinite alternate;
  filter: saturate(0.48);
}

.jarvis-stage[data-state="silent"] .jarvis-orbit {
  animation-duration: 32s;
  opacity: 0.28;
}

.jarvis-stage[data-state="silent"] .jarvis-core-feedback strong {
  color: #c5d7e4;
  letter-spacing: 0.035em;
}

.jarvis-stage[data-state="error"] {
  --jarvis-primary: #ffb36f;
  --jarvis-secondary: #c96f2d;
  --jarvis-halo: rgb(255 154 74 / 24%);
  border-color: rgb(235 145 74 / 38%);
}

.jarvis-stage[data-state="error"] .jarvis-core {
  animation: none;
}

@keyframes jarvis-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes jarvis-orbit-reverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes jarvis-breathe {
  50% {
    box-shadow:
      0 0 0 12px rgb(56 158 226 / 5%),
      0 0 64px var(--jarvis-halo),
      inset 0 0 50px rgb(91 194 255 / 36%);
  }
}

@keyframes jarvis-listening {
  to {
    box-shadow:
      0 0 0 18px rgb(77 223 248 / 8%),
      0 0 78px var(--jarvis-halo),
      inset 0 0 56px rgb(113 235 255 / 40%);
    transform: scale(1.045);
  }
}

@keyframes jarvis-silent {
  to {
    box-shadow:
      0 0 0 7px rgb(112 145 170 / 4%),
      0 0 34px var(--jarvis-halo),
      inset 0 0 32px rgb(121 153 178 / 18%);
    transform: scale(0.985);
  }
}

@keyframes jarvis-thinking {
  50% {
    filter: hue-rotate(18deg) brightness(1.12);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes jarvis-speaking {
  to {
    box-shadow:
      0 0 0 16px rgb(79 221 176 / 7%),
      0 0 72px var(--jarvis-halo),
      inset 0 0 54px rgb(98 238 195 / 38%);
    transform: scale(1.035);
  }
}

@media (max-width: 680px) {
  .jarvis-stage {
    min-height: 510px;
    padding: 34px 16px 26px;
    border-radius: 22px;
  }

  .jarvis-reactor-shell {
    top: 55%;
    width: min(78vw, 320px);
  }

  .jarvis-core {
    width: min(46vw, 184px);
    margin: 54px 0 38px;
  }

  .chat-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jarvis-core,
  .jarvis-orbit,
  .jarvis-stage[data-state] .jarvis-core,
  .jarvis-stage[data-state] .jarvis-orbit {
    animation: none !important;
  }

  .jarvis-core {
    transition: none;
  }

  .dna-wizard-progress span {
    transition: none !important;
  }
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 12% 12%, rgb(28 105 190 / 22%), transparent 34rem),
    radial-gradient(circle at 88% 82%, rgb(38 190 168 / 12%), transparent 30rem),
    #07101f;
}

button,
input,
select,
textarea {
  font: inherit;
}

.shell {
  display: flex;
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 36px;
  flex-direction: column;
}

.shell > * {
  order: 4;
}

.shell > .topbar {
  order: 0;
}

.shell > .auth-panel {
  order: 1;
}

.shell > .chat-panel {
  order: 2;
  margin-bottom: 14px;
}

.shell > .companies-panel {
  order: 3;
}

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.brand-mark {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid rgb(117 180 255 / 55%);
  border-radius: 15px;
  background: linear-gradient(145deg, #1d73d0, #0e3e79);
  box-shadow: 0 12px 40px rgb(4 88 182 / 28%);
  font-weight: 750;
  letter-spacing: -0.04em;
}

.identity h1,
.identity p {
  margin: 0;
}

.identity h1 {
  margin-top: 2px;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  line-height: 1.15;
}

.identity > p:last-child {
  margin-top: 4px;
  color: #9fb0ca;
  font-size: 0.88rem;
}

.eyebrow {
  color: #71baff;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.14em;
}

.status-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #293b58;
  border-radius: 999px;
  background: rgb(11 24 45 / 80%);
  color: #b8c4d8;
  font-size: 0.82rem;
  font-weight: 650;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8190a6;
  box-shadow: 0 0 0 4px rgb(129 144 166 / 12%);
}

.status-chip[data-state="ready"] {
  border-color: rgb(56 189 154 / 40%);
  color: #91e2ca;
}

.status-chip[data-state="ready"] .status-dot {
  background: #38bd9a;
  box-shadow: 0 0 0 4px rgb(56 189 154 / 14%);
}

.status-chip[data-state="error"] {
  border-color: rgb(241 161 93 / 45%);
  color: #ffc38e;
}

.status-chip[data-state="error"] .status-dot {
  background: #f1a15d;
  box-shadow: 0 0 0 4px rgb(241 161 93 / 14%);
}

.auth-panel {
  margin-bottom: 14px;
  padding: 17px 18px;
  border: 1px solid rgb(82 118 164 / 38%);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgb(19 47 80 / 90%), rgb(10 27 49 / 92%)),
    #0b1b30;
  box-shadow: 0 16px 48px rgb(0 0 0 / 18%);
}

.auth-panel[data-state="authenticated"] {
  border-color: rgb(56 189 154 / 48%);
  background:
    linear-gradient(135deg, rgb(17 64 66 / 86%), rgb(9 31 48 / 94%)),
    #0b1b30;
}

.auth-panel[data-state="wrong-origin"],
.auth-panel[data-state="unavailable"] {
  border-color: rgb(241 161 93 / 45%);
}

.auth-panel [hidden] {
  display: none !important;
}

.auth-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.auth-heading h2,
.auth-heading p,
.auth-feedback,
.auth-origin-warning p {
  margin: 0;
}

.auth-heading h2 {
  margin-top: 1px;
  color: #eef6ff;
  font-size: 1.02rem;
}

.auth-heading > div > p:last-child {
  margin-top: 3px;
  color: #9fb2cd;
  font-size: 0.8rem;
  line-height: 1.45;
}

.auth-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgb(83 161 231 / 48%);
  border-radius: 11px;
  background: rgb(32 105 170 / 28%);
  color: #8ecaff;
  font-weight: 800;
}

.auth-panel[data-state="authenticated"] .auth-icon {
  border-color: rgb(77 211 172 / 48%);
  background: rgb(42 153 123 / 24%);
  color: #91e2ca;
}

.auth-kicker {
  color: #72baff;
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.auth-badge {
  padding: 6px 9px;
  border: 1px solid #355473;
  border-radius: 999px;
  color: #a7bbd4;
  font-size: 0.7rem;
  font-weight: 700;
}

.auth-panel[data-state="authenticated"] .auth-badge {
  border-color: rgb(56 189 154 / 45%);
  color: #91e2ca;
}

.auth-origin-warning {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid rgb(241 161 93 / 35%);
  border-radius: 11px;
  background: rgb(109 61 25 / 25%);
  color: #efc49e;
  flex-direction: column;
  font-size: 0.8rem;
  line-height: 1.45;
}

.auth-origin-warning a {
  color: #9ed2ff;
  font-weight: 700;
}

.auth-signed-out,
.auth-signed-in {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgb(83 121 164 / 28%);
}

.auth-signed-in > div,
.auth-actions-copy {
  display: flex;
  gap: 3px;
  flex-direction: column;
}

.auth-signed-in strong,
.auth-actions-copy strong {
  color: #e7f0fb;
  font-size: 0.88rem;
}

.auth-signed-in span,
.auth-actions-copy span {
  color: #8fa5c0;
  font-size: 0.76rem;
  line-height: 1.45;
}

.auth-actions,
.auth-enrollment-row {
  display: flex;
  gap: 9px;
  align-items: center;
}

.auth-primary-button,
.auth-secondary-button {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.auth-primary-button {
  border: 1px solid #4599e7;
  background: linear-gradient(145deg, #278de8, #1769b3);
  color: #fff;
}

.auth-secondary-button {
  border: 1px solid #365779;
  background: rgb(19 50 82 / 58%);
  color: #c5daf0;
}

.auth-primary-button:hover:not(:disabled),
.auth-secondary-button:hover:not(:disabled) {
  border-color: #6db6f8;
  color: #fff;
}

.auth-primary-button:focus-visible,
.auth-secondary-button:focus-visible,
.auth-enrollment input:focus-visible,
.auth-origin-warning a:focus-visible {
  outline: 3px solid rgb(102 179 249 / 34%);
  outline-offset: 2px;
}

.auth-primary-button:disabled,
.auth-secondary-button:disabled,
.auth-enrollment input:disabled {
  cursor: not-allowed;
  filter: saturate(0.35);
  opacity: 0.52;
}

.auth-divider {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 15px 0 11px;
  color: #7086a2;
  font-size: 0.7rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: rgb(83 121 164 / 28%);
  flex: 1;
}

.auth-enrollment label {
  display: block;
  margin-bottom: 6px;
  color: #9db0c9;
  font-size: 0.72rem;
  font-weight: 650;
}

.auth-enrollment input {
  min-width: 0;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #304d6d;
  border-radius: 10px;
  outline: none;
  background: #0a192c;
  color: #f0f6ff;
  flex: 1;
}

.auth-enrollment input::placeholder {
  color: #667d99;
}

.auth-feedback {
  margin-top: 11px;
  color: #8197b2;
  font-size: 0.72rem;
  line-height: 1.45;
}

.auth-feedback[data-kind="error"] {
  color: #ffc08a;
}

.auth-feedback[data-kind="success"] {
  color: #91e2ca;
}

.companies-panel {
  margin-bottom: 14px;
  padding: 17px 18px;
  border: 1px solid rgb(105 99 176 / 38%);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgb(34 35 76 / 90%), rgb(15 27 51 / 94%)),
    #10182f;
  box-shadow: 0 16px 48px rgb(0 0 0 / 16%);
}

.companies-panel[data-state="ready"],
.companies-panel[data-state="selected"] {
  border-color: rgb(76 172 164 / 46%);
}

.companies-panel[data-state="error"] {
  border-color: rgb(241 161 93 / 45%);
}

.companies-panel [hidden] {
  display: none !important;
}

.companies-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.companies-heading h2,
.companies-heading p,
.companies-feedback,
.companies-empty {
  margin: 0;
}

.companies-heading h2 {
  margin-top: 1px;
  color: #f1f2ff;
  font-size: 1.02rem;
}

.companies-heading > div > p:last-child {
  margin-top: 3px;
  color: #a7a9ca;
  font-size: 0.8rem;
  line-height: 1.45;
}

.companies-kicker {
  color: #aaa2ff;
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.companies-badge,
.company-readiness {
  padding: 6px 9px;
  border: 1px solid #4d4c78;
  border-radius: 999px;
  color: #c2c0e4;
  font-size: 0.7rem;
  font-weight: 700;
}

.companies-panel[data-state="selected"] .companies-badge {
  border-color: rgb(56 189 154 / 45%);
  color: #91e2ca;
}

.companies-locked {
  display: flex;
  gap: 3px;
  margin-top: 14px;
  padding: 12px 13px;
  border: 1px solid rgb(107 105 166 / 28%);
  border-radius: 11px;
  background: rgb(28 29 64 / 38%);
  flex-direction: column;
}

.companies-locked strong {
  color: #e1e0f6;
  font-size: 0.84rem;
}

.companies-locked span,
.companies-toolbar {
  color: #9294b7;
  font-size: 0.76rem;
  line-height: 1.45;
}

.companies-content {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgb(105 103 168 / 24%);
}

.companies-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.companies-toolbar-actions {
  display: flex;
  gap: 9px;
  align-items: center;
}

.companies-refresh-button,
.company-add-button,
.company-select-button {
  min-height: 37px;
  padding: 8px 11px;
  border: 1px solid #4c537c;
  border-radius: 10px;
  background: rgb(38 44 79 / 62%);
  color: #d1d3ed;
  font-weight: 700;
  cursor: pointer;
}

.companies-refresh-button:hover:not(:disabled),
.company-add-button:hover:not(:disabled),
.company-select-button:hover:not(:disabled) {
  border-color: #7d86c4;
  background: rgb(53 60 104 / 74%);
  color: #fff;
}

.companies-refresh-button:focus-visible,
.company-add-button:focus-visible,
.company-select-button:focus-visible {
  outline: 3px solid rgb(149 145 242 / 32%);
  outline-offset: 2px;
}

.companies-refresh-button:disabled,
.company-add-button:disabled,
.company-select-button:disabled {
  cursor: not-allowed;
  filter: saturate(0.45);
  opacity: 0.58;
}

.company-add-button {
  border-color: #3c9a8a;
  background: linear-gradient(145deg, #248f80, #17695e);
  color: #fff;
}

.company-onboarding {
  margin-top: 13px;
  padding: 15px;
  border: 1px solid rgb(83 167 157 / 38%);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgb(19 58 65 / 82%), rgb(14 28 50 / 94%)),
    #10243a;
}

.company-onboarding[data-state="failed"],
.company-onboarding[data-state="paused"] {
  border-color: rgb(229 169 80 / 48%);
}

.company-onboarding[data-state="succeeded"] {
  border-color: rgb(56 189 154 / 55%);
}

.company-onboarding-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}

.company-onboarding-heading h3,
.company-onboarding-heading p,
.company-onboarding-status p {
  margin: 0;
}

.company-onboarding-heading h3 {
  margin-top: 1px;
  color: #f0f8ff;
  font-size: 0.98rem;
}

.company-onboarding-heading > div > p:last-child {
  max-width: 720px;
  margin-top: 4px;
  color: #a6bac8;
  font-size: 0.76rem;
  line-height: 1.5;
}

.company-onboarding-kicker {
  color: #78d6c7;
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.company-onboarding-close,
.company-onboarding-secondary,
.company-onboarding-submit {
  min-height: 38px;
  padding: 8px 11px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.company-onboarding-close,
.company-onboarding-secondary {
  border: 1px solid #426177;
  background: rgb(19 48 70 / 66%);
  color: #c6d9e5;
}

.company-onboarding-submit {
  border: 1px solid #3c9a8a;
  background: linear-gradient(145deg, #248f80, #17695e);
  color: #fff;
}

.company-onboarding-close:hover:not(:disabled),
.company-onboarding-secondary:hover:not(:disabled),
.company-onboarding-submit:hover:not(:disabled) {
  border-color: #72b9b2;
  color: #fff;
}

.company-onboarding-close:focus-visible,
.company-onboarding-secondary:focus-visible,
.company-onboarding-submit:focus-visible,
.company-onboarding-field input:focus-visible,
.company-onboarding-field textarea:focus-visible {
  outline: 3px solid rgb(102 211 197 / 27%);
  outline-offset: 2px;
}

.company-onboarding-close:disabled,
.company-onboarding-secondary:disabled,
.company-onboarding-submit:disabled,
.company-onboarding-field input:disabled,
.company-onboarding-field textarea:disabled {
  cursor: not-allowed;
  filter: saturate(0.4);
  opacity: 0.58;
}

.company-onboarding-form {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgb(86 137 158 / 25%);
}

.company-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.company-onboarding-field {
  display: flex;
  min-width: 0;
  gap: 6px;
  flex-direction: column;
}

.company-onboarding-field-wide {
  grid-column: 1 / -1;
}

.company-onboarding-field label {
  color: #d6e5ec;
  font-size: 0.74rem;
  font-weight: 700;
}

.company-onboarding-field input,
.company-onboarding-field textarea {
  width: 100%;
  min-height: 41px;
  padding: 9px 11px;
  border: 1px solid #355b6d;
  border-radius: 10px;
  outline: none;
  background: #0b2234;
  color: #f1f8fc;
  line-height: 1.4;
}

.company-onboarding-field textarea {
  min-height: 72px;
  resize: vertical;
}

.company-onboarding-field input::placeholder,
.company-onboarding-field textarea::placeholder {
  color: #6f8998;
}

.company-onboarding-field small {
  color: #809aa8;
  font-size: 0.68rem;
  line-height: 1.45;
}

.company-onboarding-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 13px;
  padding: 10px 11px;
  border: 1px solid rgb(92 145 160 / 32%);
  border-radius: 10px;
  background: rgb(8 29 43 / 58%);
}

.company-onboarding-status-badge {
  padding: 5px 8px;
  border: 1px solid #4b6b7b;
  border-radius: 999px;
  color: #c6d9e5;
  font-size: 0.67rem;
  font-weight: 750;
}

.company-onboarding-status p {
  color: #a9bdc8;
  font-size: 0.73rem;
  line-height: 1.5;
}

.company-onboarding[data-state="submitting"] .company-onboarding-status-badge,
.company-onboarding[data-state="pending"] .company-onboarding-status-badge,
.company-onboarding[data-state="processing"] .company-onboarding-status-badge {
  border-color: rgb(103 177 229 / 48%);
  color: #9ed2ff;
}

.company-onboarding[data-state="failed"] .company-onboarding-status-badge,
.company-onboarding[data-state="paused"] .company-onboarding-status-badge {
  border-color: rgb(229 169 80 / 48%);
  color: #f0c488;
}

.company-onboarding[data-state="succeeded"] .company-onboarding-status-badge {
  border-color: rgb(56 189 154 / 48%);
  color: #91e2ca;
}

.company-onboarding-actions {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 13px;
}

.companies-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 11px;
  margin-top: 12px;
}

.company-card {
  display: flex;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgb(101 105 158 / 32%);
  border-radius: 13px;
  background: rgb(14 25 49 / 70%);
  flex-direction: column;
}

.company-card[data-state="ready"] {
  border-color: rgb(56 189 154 / 38%);
}

.company-card[data-state="draft"] {
  border-color: rgb(202 151 76 / 38%);
}

.company-card-heading {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.company-card h3 {
  margin: 4px 0 0;
  color: #f0f2ff;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.company-card[data-state="ready"] .company-readiness {
  border-color: rgb(56 189 154 / 42%);
  color: #91e2ca;
}

.company-card[data-state="draft"] .company-readiness {
  border-color: rgb(229 169 80 / 42%);
  color: #f0c488;
}

.company-card p {
  margin: 10px 0 13px;
  color: #9ea4c4;
  font-size: 0.76rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.company-select-button {
  width: 100%;
  margin-top: auto;
}

.company-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

.company-card-actions .company-select-button {
  margin-top: 0;
}

.company-dna-button {
  width: 100%;
  min-height: 37px;
  padding: 8px 11px;
  border: 1px solid #655b8f;
  border-radius: 10px;
  background: rgb(52 43 89 / 62%);
  color: #ddd5ff;
  font-weight: 700;
  cursor: pointer;
}

.company-dna-button:hover:not(:disabled) {
  border-color: #9585d1;
  background: rgb(72 58 119 / 74%);
  color: #fff;
}

.company-dna-button:focus-visible {
  outline: 3px solid rgb(170 150 242 / 30%);
  outline-offset: 2px;
}

.company-dna-button:disabled {
  cursor: not-allowed;
  filter: saturate(0.5);
  opacity: 0.62;
}

.company-domains-button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 37px;
  padding: 8px 11px;
  border: 1px solid #456a81;
  border-radius: 10px;
  background: rgb(26 66 87 / 62%);
  color: #cdeafa;
  font-weight: 700;
  cursor: pointer;
}

.company-domains-button:hover:not(:disabled) {
  border-color: #70a8c4;
  background: rgb(35 83 108 / 76%);
  color: #fff;
}

.company-domains-button:focus-visible {
  outline: 3px solid rgb(112 178 211 / 28%);
  outline-offset: 2px;
}

.company-domains-button:disabled {
  cursor: not-allowed;
  filter: saturate(0.5);
  opacity: 0.62;
}

.company-card[data-state="ready"] .company-select-button:not(:disabled) {
  border-color: #3c9a8a;
  background: linear-gradient(145deg, #248f80, #17695e);
  color: #fff;
}

.companies-empty {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed rgb(106 109 164 / 36%);
  border-radius: 11px;
  color: #9799b9;
  font-size: 0.78rem;
  text-align: center;
}

.companies-feedback {
  margin-top: 11px;
  color: #878aaa;
  font-size: 0.72rem;
  line-height: 1.45;
}

.companies-feedback[data-kind="error"] {
  color: #ffc08a;
}

.companies-feedback[data-kind="success"] {
  color: #91e2ca;
}

.company-domains-panel {
  margin-bottom: 14px;
  padding: 17px 18px;
  border: 1px solid rgb(73 142 174 / 42%);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgb(17 53 75 / 92%), rgb(10 29 48 / 95%)),
    #0a1d30;
  box-shadow: 0 16px 48px rgb(0 0 0 / 16%);
}

.company-domains-panel[hidden] {
  display: none !important;
}

.company-domains-panel[data-state="loading"] {
  border-color: rgb(105 178 213 / 58%);
}

.company-domains-panel[data-state="error"] {
  border-color: rgb(229 169 80 / 48%);
}

.company-domains-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.company-domains-heading h2,
.company-domains-heading p,
.company-domains-feedback,
.company-domains-boundary,
.company-domain-card p {
  margin: 0;
}

.company-domains-heading h2 {
  margin-top: 1px;
  color: #effaff;
  font-size: 1.02rem;
}

.company-domains-heading > div:first-child > p:last-child {
  margin-top: 3px;
  color: #9ab9ca;
  font-size: 0.78rem;
  line-height: 1.45;
}

.company-domains-kicker {
  color: #83cff0;
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.company-domains-heading-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.company-domains-badge {
  padding: 6px 9px;
  border: 1px solid #4d7185;
  border-radius: 999px;
  color: #c3e2ef;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}

.company-domains-secondary,
.company-domains-primary,
.company-domain-secondary,
.company-domain-danger {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #426a7d;
  border-radius: 10px;
  background: rgb(22 59 78 / 72%);
  color: #d4edf7;
  font-weight: 700;
  cursor: pointer;
}

.company-domains-primary {
  align-self: end;
  border-color: #348c82;
  background: linear-gradient(145deg, #277f77, #1a625b);
  color: #fff;
}

.company-domain-danger {
  border-color: #8a5960;
  background: rgb(104 44 54 / 58%);
  color: #ffd4d7;
}

.company-domains-secondary:hover:not(:disabled),
.company-domains-primary:hover:not(:disabled),
.company-domain-secondary:hover:not(:disabled),
.company-domain-danger:hover:not(:disabled) {
  filter: brightness(1.15);
}

.company-domains-secondary:focus-visible,
.company-domains-primary:focus-visible,
.company-domain-secondary:focus-visible,
.company-domain-danger:focus-visible,
.company-domains-form input:focus-visible,
.company-domains-form select:focus-visible {
  outline: 3px solid rgb(111 190 221 / 27%);
  outline-offset: 2px;
}

.company-domains-secondary:disabled,
.company-domains-primary:disabled,
.company-domain-secondary:disabled,
.company-domain-danger:disabled,
.company-domains-form input:disabled,
.company-domains-form select:disabled {
  cursor: not-allowed;
  filter: saturate(0.4);
  opacity: 0.56;
}

.company-domains-boundary {
  display: grid;
  gap: 3px;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid rgb(77 182 165 / 34%);
  border-radius: 11px;
  background: rgb(21 76 71 / 27%);
  color: #a9c9d5;
  font-size: 0.75rem;
  line-height: 1.48;
}

.company-domains-boundary strong {
  color: #95e3d0;
}

.company-domains-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(190px, 0.8fr) minmax(220px, 1fr) auto;
  gap: 11px;
  align-items: start;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgb(73 130 154 / 28%);
}

.company-domains-form label {
  display: flex;
  min-width: 0;
  gap: 6px;
  flex-direction: column;
  color: #d7e9f0;
  font-size: 0.74rem;
  font-weight: 700;
}

.company-domains-form input,
.company-domains-form select {
  width: 100%;
  min-height: 41px;
  padding: 9px 11px;
  border: 1px solid #365f73;
  border-radius: 10px;
  outline: none;
  background: #0a2233;
  color: #f1f9fc;
}

.company-domains-form input::placeholder {
  color: #708d9a;
}

.company-domains-form small {
  color: #7f9ca9;
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.42;
}

.company-domains-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 11px;
  margin-top: 14px;
}

.company-domain-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgb(74 126 151 / 34%);
  border-radius: 13px;
  background: rgb(8 28 44 / 68%);
}

.company-domain-card[data-state="verified"] {
  border-color: rgb(56 189 154 / 42%);
}

.company-domain-card[data-state="suspended"] {
  border-color: rgb(229 169 80 / 42%);
}

.company-domain-card[data-state="revoked"] {
  border-color: rgb(183 91 102 / 42%);
  opacity: 0.78;
}

.company-domain-card-heading {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.company-domain-card h3 {
  margin: 3px 0 0;
  color: #f2faff;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.company-domain-status {
  padding: 5px 8px;
  border: 1px solid #4a7184;
  border-radius: 999px;
  color: #bddcea;
  font-size: 0.66rem;
  font-weight: 700;
  text-align: center;
}

.company-domain-card[data-state="verified"] .company-domain-status {
  border-color: rgb(56 189 154 / 46%);
  color: #91e2ca;
}

.company-domain-card[data-state="suspended"] .company-domain-status {
  border-color: rgb(229 169 80 / 46%);
  color: #f0c488;
}

.company-domain-card[data-state="revoked"] .company-domain-status {
  border-color: rgb(183 91 102 / 46%);
  color: #efb7bc;
}

.company-domain-card > p {
  margin-top: 8px;
  color: #9ab4c1;
  font-size: 0.73rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.company-domain-purposes {
  color: #819daa !important;
}

.company-domain-verifications {
  display: grid;
  gap: 5px;
  margin: 11px 0 0;
  padding: 10px 10px 10px 27px;
  border: 1px solid rgb(71 121 143 / 27%);
  border-radius: 9px;
  background: rgb(7 24 38 / 48%);
  color: #a9c6d3;
  font-size: 0.69rem;
  line-height: 1.42;
}

.company-domain-verifications > li > p {
  margin: 0;
}

.company-domain-proof-instructions {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgb(70 157 181 / 34%);
  border-radius: 8px;
  background: rgb(4 18 29 / 66%);
}

.company-domain-proof-instructions > p {
  margin: 0;
  color: #c5dce6;
  font-size: 0.7rem;
}

.company-domain-proof-field {
  min-width: 0;
}

.company-domain-proof-field-heading {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  color: #88abba;
  font-size: 0.65rem;
}

.company-domain-copy {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgb(76 151 177 / 42%);
  border-radius: 7px;
  background: rgb(18 55 71 / 72%);
  color: #bfe2ef;
  font: inherit;
  cursor: pointer;
}

.company-domain-proof-value {
  display: block;
  max-width: 100%;
  padding: 7px;
  border-radius: 6px;
  background: rgb(3 14 24 / 78%);
  color: #d5f3fc;
  font-size: 0.66rem;
  overflow-wrap: anywhere;
  user-select: all;
  white-space: pre-wrap;
}

.company-domain-worker-note {
  color: #7f9eac !important;
}

.company-domain-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 11px;
}

.company-domain-actions button {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 0.69rem;
}

.company-domains-empty {
  margin-top: 13px;
  padding: 12px;
  border: 1px dashed rgb(77 132 157 / 38%);
  border-radius: 11px;
  color: #8faab7;
  font-size: 0.76rem;
  text-align: center;
}

.company-domains-feedback {
  margin-top: 11px;
  color: #86a5b3;
  font-size: 0.72rem;
  line-height: 1.45;
}

.company-domains-feedback[data-kind="success"] {
  color: #91e2ca;
}

.company-domains-feedback[data-kind="error"] {
  color: #ffc08a;
}

.dna-panel {
  margin-bottom: 14px;
  padding: 17px 18px;
  border: 1px solid rgb(133 105 190 / 40%);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgb(40 29 70 / 92%), rgb(14 28 52 / 95%)),
    #151a36;
  box-shadow: 0 16px 48px rgb(0 0 0 / 16%);
}

.dna-panel[hidden] {
  display: none !important;
}

.dna-panel[data-state="loading"] {
  border-color: rgb(111 151 207 / 46%);
}

.dna-panel[data-state="unavailable"] {
  border-color: rgb(229 169 80 / 44%);
}

.dna-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.dna-heading h2,
.dna-heading p,
.dna-feedback,
.dna-publication-state p {
  margin: 0;
}

.dna-heading h2 {
  margin-top: 1px;
  color: #f4f0ff;
  font-size: 1.02rem;
}

.dna-heading > div:first-child > p:last-child {
  margin-top: 3px;
  color: #aba6c9;
  font-size: 0.78rem;
  line-height: 1.45;
}

.dna-kicker {
  color: #c4a4ff;
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.dna-heading-actions,
.dna-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dna-status {
  padding: 6px 9px;
  border: 1px solid #645b8f;
  border-radius: 999px;
  color: #d5cdf2;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}

.dna-status[data-status="draft"] {
  border-color: rgb(229 169 80 / 45%);
  color: #f0c488;
}

.dna-status[data-status="validated"] {
  border-color: rgb(98 170 223 / 48%);
  color: #a9d9ff;
}

.dna-status[data-status="published"] {
  border-color: rgb(56 189 154 / 45%);
  color: #91e2ca;
}

.dna-secondary-button,
.dna-primary-button,
.dna-publish-button,
.dna-rollback-button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #575077;
  border-radius: 10px;
  background: rgb(49 44 78 / 68%);
  color: #ddd8f2;
  font-weight: 720;
  cursor: pointer;
}

.dna-primary-button {
  border-color: #3d80a3;
  background: linear-gradient(145deg, #236f99, #195576);
  color: #fff;
}

.dna-publish-button {
  border-color: #3b987f;
  background: linear-gradient(145deg, #25856f, #176452);
  color: #fff;
}

.dna-rollback-button {
  border-color: #9b7645;
  background: linear-gradient(145deg, #76562d, #59401f);
  color: #fff4df;
}

.dna-secondary-button:hover:not(:disabled),
.dna-primary-button:hover:not(:disabled),
.dna-publish-button:hover:not(:disabled),
.dna-rollback-button:hover:not(:disabled) {
  filter: brightness(1.15);
}

.dna-secondary-button:focus-visible,
.dna-primary-button:focus-visible,
.dna-publish-button:focus-visible,
.dna-rollback-button:focus-visible,
  .dna-version-toolbar select:focus-visible,
  .dna-lifecycle-actions input:focus-visible,
  .dna-native-voice input:focus-visible,
.dna-form input:focus-visible,
.dna-form textarea:focus-visible,
.dna-form select:focus-visible,
.dna-form summary:focus-visible {
  outline: 3px solid rgb(173 145 238 / 28%);
  outline-offset: 2px;
}

.dna-secondary-button:disabled,
.dna-primary-button:disabled,
.dna-publish-button:disabled,
.dna-rollback-button:disabled {
  cursor: not-allowed;
  filter: saturate(0.35);
  opacity: 0.5;
}

.dna-content {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgb(125 105 168 / 28%);
}

.dna-content[hidden] {
  display: none !important;
}

.dna-version-toolbar {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(210px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.dna-version-toolbar label {
  color: #ddd7ef;
  font-size: 0.76rem;
  font-weight: 700;
}

.dna-version-toolbar select,
.dna-form input,
.dna-form textarea,
.dna-form select,
.dna-repeat-field input,
.dna-repeat-field textarea {
  width: 100%;
  min-height: 41px;
  padding: 9px 11px;
  border: 1px solid #464263;
  border-radius: 10px;
  outline: none;
  background: #121a31;
  color: #f2effa;
  font: inherit;
  line-height: 1.4;
}

.dna-form textarea,
.dna-repeat-field textarea {
  resize: vertical;
}

.dna-version-toolbar select:disabled,
.dna-form input:disabled,
.dna-form textarea:disabled,
.dna-form select:disabled {
  cursor: not-allowed;
  filter: saturate(0.45);
  opacity: 0.65;
}

.dna-repeat-field input[readonly],
.dna-repeat-field textarea[readonly] {
  color: #8f8aa5;
}

#dna-version-meta {
  color: #918ba9;
  font-size: 0.7rem;
  text-align: right;
}

.dna-native-voice {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid rgb(69 139 164 / 44%);
  border-radius: 12px;
  background: rgb(15 37 55 / 72%);
}

.dna-native-voice-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.dna-native-voice-heading strong,
.dna-native-voice-heading span {
  display: block;
}

.dna-native-voice-heading strong {
  color: #d9f0f5;
  font-size: 0.8rem;
}

#dna-native-voice-summary {
  margin-top: 4px;
  color: #9bb8c2;
  font-size: 0.72rem;
  line-height: 1.45;
}

.dna-native-voice-status {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #506e7a;
  border-radius: 999px;
  color: #b9d5dd;
  font-size: 0.68rem;
  font-weight: 720;
}

.dna-native-voice-status[data-status="published"] {
  border-color: rgb(56 189 154 / 45%);
  color: #91e2ca;
}

.dna-native-voice-status[data-status="draft"],
.dna-native-voice-status[data-status="sampled"],
.dna-native-voice-status[data-status="approved"] {
  border-color: rgb(229 169 80 / 45%);
  color: #f0c488;
}

.dna-native-voice-controls {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(110px, 0.45fr) repeat(5, auto);
  gap: 8px;
  align-items: end;
}

.dna-native-voice-controls label {
  display: grid;
  gap: 5px;
  color: #c8dce2;
  font-size: 0.7rem;
  font-weight: 680;
}

.dna-native-voice input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #3f5c67;
  border-radius: 10px;
  outline: none;
  background: #101f30;
  color: #eef8fa;
  font: inherit;
}

.dna-native-voice input:disabled {
  cursor: not-allowed;
  filter: saturate(0.45);
  opacity: 0.65;
}

.dna-native-voice-reference,
.dna-native-voice-feedback {
  margin: 0;
  color: #9bb8c2;
  font-size: 0.7rem;
  line-height: 1.45;
}

.dna-native-voice-reference code {
  color: #c8ecf4;
  overflow-wrap: anywhere;
}

.dna-native-voice-feedback[data-kind="success"] {
  color: #91e2ca;
}

.dna-native-voice-feedback[data-kind="warning"],
.dna-native-voice-feedback[data-kind="error"] {
  color: #f0c488;
}

.dna-lifecycle-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.45fr) auto auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid rgb(104 95 144 / 34%);
  border-radius: 12px;
  background: rgb(20 24 47 / 66%);
}

.dna-lifecycle-copy,
.dna-lifecycle-actions label {
  display: grid;
  gap: 5px;
}

.dna-lifecycle-copy strong,
.dna-lifecycle-actions label {
  color: #ddd7ef;
  font-size: 0.76rem;
  font-weight: 700;
}

.dna-lifecycle-copy span {
  color: #aaa4bd;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.45;
}

.dna-lifecycle-actions input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #464263;
  border-radius: 10px;
  outline: none;
  background: #121a31;
  color: #f2effa;
  font: inherit;
}

.dna-lifecycle-actions input:disabled {
  cursor: not-allowed;
  filter: saturate(0.45);
  opacity: 0.65;
}

.dna-publication-state {
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) 1fr;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid rgb(104 95 144 / 34%);
  border-radius: 12px;
  background: rgb(20 24 47 / 66%);
}

.dna-publication-state strong {
  display: block;
  color: #e5e0f4;
  font-size: 0.8rem;
}

.dna-publication-state span {
  display: block;
  margin-top: 4px;
  color: #a19bb8;
  font-size: 0.72rem;
  line-height: 1.45;
}

.dna-publication-state ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 20px;
  color: #aaa4bd;
  font-size: 0.72rem;
  line-height: 1.45;
}

.dna-publication-state li[data-state="blocked"],
.dna-publication-state li[data-state="pending"] {
  color: #f0c488;
}

.dna-publication-state li[data-state="server"] {
  color: #9ed2ff;
}

.dna-publication-state li[data-state="satisfied"] {
  color: #91e2ca;
}

.dna-editorial-readiness {
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) 1fr;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid rgb(69 139 164 / 40%);
  border-radius: 12px;
  background: rgb(15 37 55 / 72%);
}

.dna-editorial-readiness strong,
.dna-editorial-readiness span {
  display: block;
}

.dna-editorial-readiness strong {
  color: #d9f0f5;
  font-size: 0.8rem;
}

.dna-editorial-readiness span {
  margin-top: 4px;
  color: #9bb8c2;
  font-size: 0.72rem;
  line-height: 1.45;
}

.dna-editorial-readiness ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 20px;
  color: #aaa4bd;
  font-size: 0.72rem;
  line-height: 1.45;
}

.dna-editorial-readiness li[data-state="ready"] {
  color: #91e2ca;
}

.dna-editorial-readiness li[data-state="pending"] {
  color: #f0c488;
}

.dna-gate-actions {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
  justify-content: flex-end;
}

.dna-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.dna-form details {
  border: 1px solid rgb(102 93 141 / 32%);
  border-radius: 12px;
  background: rgb(16 22 42 / 60%);
}

.dna-form summary {
  padding: 11px 13px;
  color: #dcd6eb;
  font-size: 0.79rem;
  font-weight: 750;
  cursor: pointer;
}

.dna-fields {
  display: grid;
  gap: 10px;
  padding: 0 13px 13px;
}

.dna-fields-two {
  grid-template-columns: 1fr 1fr;
}

.dna-fields label,
.dna-repeat-field {
  display: grid;
  gap: 5px;
  color: #c8c3d8;
  font-size: 0.7rem;
  font-weight: 680;
}

.dna-field-wide {
  grid-column: 1 / -1;
}

.dna-repeat-section {
  padding: 0 13px 13px;
}

.dna-repeat-section + .dna-repeat-section {
  padding-top: 2px;
}

.dna-repeat-section h3 {
  margin: 0;
  color: #bbb5cf;
  font-size: 0.72rem;
}

.dna-repeat-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.dna-add-row-button,
.dna-remove-row-button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #575077;
  border-radius: 9px;
  background: rgb(49 44 78 / 68%);
  color: #ddd8f2;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 720;
  cursor: pointer;
}

.dna-add-row-button:hover:not(:disabled) {
  border-color: #6f92bd;
  background: rgb(42 72 105 / 78%);
}

.dna-remove-row-button {
  align-self: end;
  border-color: rgb(176 99 93 / 60%);
  background: rgb(91 39 43 / 58%);
  color: #ffd7d2;
}

.dna-remove-row-button:hover:not(:disabled) {
  border-color: #d28278;
  background: rgb(117 48 52 / 76%);
}

.dna-add-row-button:focus-visible,
.dna-remove-row-button:focus-visible {
  outline: 3px solid rgb(170 150 242 / 30%);
  outline-offset: 2px;
}

.dna-add-row-button:disabled,
.dna-remove-row-button:disabled {
  cursor: not-allowed;
  filter: saturate(0.45);
  opacity: 0.58;
}

.dna-repeat-row {
  display: grid;
  grid-template-columns:
    minmax(130px, 0.6fr) minmax(180px, 1fr) minmax(130px, 0.7fr) auto;
  gap: 8px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgb(94 88 127 / 30%);
  border-radius: 10px;
  background: rgb(9 17 33 / 56%);
}

.dna-color-row,
.dna-typography-row {
  grid-template-columns: minmax(130px, 0.6fr) 1fr;
}

.dna-repeat-empty {
  margin: 0;
  padding: 9px 10px;
  border: 1px dashed rgb(100 94 134 / 35%);
  border-radius: 9px;
  color: #8f89a3;
  font-size: 0.7rem;
}

.dna-form-actions {
  justify-content: flex-end;
  padding-top: 2px;
}

.dna-wizard-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 4px 2px 14px;
}

.dna-wizard-intro h3,
.dna-wizard-intro p,
.dna-wizard-panel-heading h3,
.dna-wizard-panel-heading p,
.dna-guided-card h4,
.dna-guided-card p,
.dna-information-callout p,
.dna-advanced-heading span {
  margin: 0;
}

.dna-wizard-intro h3 {
  color: #f4f0ff;
  font-size: 1.05rem;
  line-height: 1.3;
}

.dna-wizard-intro > div > p:last-child {
  max-width: 720px;
  margin-top: 5px;
  color: #aaa5bf;
  font-size: 0.8rem;
  line-height: 1.55;
}

.dna-wizard-eyebrow {
  margin-bottom: 4px !important;
  color: #86cfff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.dna-wizard-save-state {
  min-width: 150px;
  padding: 8px 11px;
  border: 1px solid rgb(116 109 153 / 50%);
  border-radius: 999px;
  color: #c4bed8;
  font-size: 0.74rem;
  font-weight: 730;
  text-align: center;
}

.dna-wizard-save-state[data-state="dirty"] {
  border-color: rgb(229 169 80 / 58%);
  color: #ffd099;
}

.dna-wizard-save-state[data-state="saved"],
.dna-wizard-save-state[data-state="active"] {
  border-color: rgb(56 189 154 / 52%);
  color: #91e2ca;
}

.dna-wizard {
  padding: 14px;
  border: 1px solid rgb(82 126 174 / 42%);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgb(18 41 67 / 84%), rgb(21 26 52 / 88%)),
    #121a31;
}

.dna-wizard-progress-copy {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #edf7ff;
  font-size: 0.78rem;
}

.dna-wizard-progress-copy span {
  color: #9bb7cd;
  font-weight: 600;
}

.dna-wizard-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(93 117 145 / 26%);
}

.dna-wizard-progress span {
  display: block;
  width: 16.6667%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3c94c7, #5ad5c2);
  transition: width 180ms ease;
}

.dna-wizard-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.dna-wizard-steps button {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 7px 8px;
  border: 1px solid rgb(83 101 136 / 44%);
  border-radius: 10px;
  background: rgb(10 20 39 / 48%);
  color: #9ca9bd;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dna-wizard-steps button > span {
  display: grid;
  width: 27px;
  height: 27px;
  border: 1px solid #53627b;
  border-radius: 50%;
  place-items: center;
  color: #b4c0d1;
  font-size: 0.72rem;
  font-weight: 800;
}

.dna-wizard-steps button strong {
  overflow-wrap: anywhere;
  font-size: 0.7rem;
  line-height: 1.25;
}

.dna-wizard-steps button[data-state="current"] {
  border-color: rgb(91 181 224 / 70%);
  background: rgb(31 91 127 / 38%);
  color: #e8f7ff;
}

.dna-wizard-steps button[data-state="current"] > span {
  border-color: #68c9eb;
  background: #276f96;
  color: #fff;
}

.dna-wizard-steps button[data-state="complete"] > span {
  border-color: #3fa88c;
  background: rgb(31 112 91 / 60%);
  color: #b7f5e3;
}

.dna-wizard-steps button:focus-visible,
.dna-review-grid button:focus-visible,
.dna-advanced-settings > summary:focus-visible {
  outline: 3px solid rgb(101 192 234 / 36%);
  outline-offset: 2px;
}

.dna-wizard-steps button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.dna-wizard-form {
  margin-top: 14px;
}

.dna-wizard-panel {
  display: grid;
  gap: 16px;
  min-height: 360px;
  padding: 20px;
  border: 1px solid rgb(105 95 143 / 38%);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgb(17 24 46 / 94%), rgb(12 25 45 / 90%)),
    #11182d;
}

.dna-wizard-panel[hidden] {
  display: none !important;
}

.dna-wizard-panel-heading {
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(104 115 151 / 25%);
}

.dna-wizard-panel-heading > span {
  color: #79c9ee;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.dna-wizard-panel-heading h3 {
  margin-top: 3px;
  color: #f4f5ff;
  font-size: 1.12rem;
}

.dna-wizard-panel-heading h3:focus {
  outline: none;
}

.dna-wizard-panel-heading p {
  margin-top: 5px;
  color: #9ca9bc;
  font-size: 0.8rem;
  line-height: 1.5;
}

.dna-wizard-panel > .dna-fields,
.dna-inline-advanced .dna-fields {
  padding: 0;
}

.dna-fields label,
.dna-repeat-field {
  font-size: 0.78rem;
}

.dna-fields label small {
  color: #878fa4;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.4;
}

.dna-required {
  color: #f0b36d;
}

.dna-form [aria-invalid="true"] {
  border-color: #e9a762;
  box-shadow: 0 0 0 3px rgb(233 167 98 / 12%);
}

.dna-inline-advanced {
  border-color: rgb(91 111 145 / 35%) !important;
  background: rgb(11 21 39 / 52%) !important;
}

.dna-inline-advanced summary {
  min-height: 44px;
  color: #b8c6d8;
}

.dna-inline-advanced[open] .dna-fields {
  padding: 0 13px 13px;
}

.dna-guided-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgb(80 104 139 / 35%);
  border-radius: 12px;
  background: rgb(9 18 35 / 50%);
}

.dna-guided-card h4 {
  color: #dce8f5;
  font-size: 0.82rem;
}

.dna-guided-card p {
  margin-top: 3px;
  color: #8999ac;
  font-size: 0.71rem;
  line-height: 1.5;
}

.dna-guided-card .dna-repeat-heading {
  margin-bottom: 0;
}

.dna-information-callout {
  padding: 13px 14px;
  border-left: 3px solid #4c9dc8;
  border-radius: 8px;
  background: rgb(26 68 94 / 28%);
}

.dna-information-callout strong {
  color: #ccecff;
  font-size: 0.78rem;
}

.dna-information-callout p {
  margin-top: 4px;
  color: #9fb5c6;
  font-size: 0.73rem;
  line-height: 1.5;
}

.dna-brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dna-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dna-review-grid article {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgb(82 106 143 / 35%);
  border-radius: 11px;
  background: rgb(10 20 38 / 55%);
}

.dna-review-grid article:last-child {
  grid-column: 1 / -1;
}

.dna-review-grid article div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.dna-review-grid span {
  color: #8391a8;
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dna-review-grid strong {
  overflow-wrap: anywhere;
  color: #e5edf8;
  font-size: 0.78rem;
  line-height: 1.4;
}

.dna-review-grid button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid #475f7e;
  border-radius: 8px;
  background: rgb(27 55 83 / 65%);
  color: #bfe5fa;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.dna-review-grid button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.dna-activation-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dna-activation-flow > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgb(72 129 157 / 32%);
  border-radius: 10px;
  background: rgb(15 45 62 / 35%);
}

.dna-activation-flow span {
  display: grid;
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(39 112 144 / 65%);
  color: #eafaff;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
}

.dna-activation-flow strong {
  color: #d9eef5;
  font-size: 0.72rem;
}

.dna-activation-flow small {
  color: #8da5af;
  font-size: 0.64rem;
  line-height: 1.35;
}

.dna-final-actions,
.dna-wizard-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dna-final-actions {
  padding-top: 4px;
}

.dna-wizard-actions {
  padding: 11px 2px 1px;
  border-top: 1px solid rgb(99 93 133 / 24%);
}

.dna-wizard-actions #dna-wizard-back {
  margin-right: auto;
}

.dna-advanced-settings {
  margin-top: 14px;
  border: 1px solid rgb(93 89 127 / 36%);
  border-radius: 13px;
  background: rgb(12 18 35 / 54%);
}

.dna-advanced-settings > summary {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 11px 13px;
  color: #c7c2d8;
  font-size: 0.78rem;
  font-weight: 740;
  cursor: pointer;
}

.dna-advanced-settings > summary small {
  color: #827d96;
  font-size: 0.68rem;
  font-weight: 550;
}

.dna-advanced-settings-content {
  display: grid;
  gap: 12px;
  padding: 0 13px 13px;
}

.dna-advanced-section {
  padding: 13px;
  border: 1px solid rgb(78 83 117 / 35%);
  border-radius: 11px;
  background: rgb(12 21 39 / 62%);
}

.dna-advanced-heading {
  margin-bottom: 10px;
}

.dna-advanced-heading strong,
.dna-advanced-heading span {
  display: block;
}

.dna-advanced-heading strong {
  color: #d9d4e8;
  font-size: 0.8rem;
}

.dna-advanced-heading span {
  margin-top: 3px;
  color: #8f8aa2;
  font-size: 0.7rem;
}

.dna-advanced-section .dna-lifecycle-actions,
.dna-advanced-section.dna-native-voice {
  margin-top: 10px;
}

.dna-feedback {
  margin-top: 11px;
  color: #8f89a6;
  font-size: 0.72rem;
  line-height: 1.45;
}

.dna-feedback[data-kind="success"] {
  color: #91e2ca;
}

.dna-feedback[data-kind="warning"] {
  color: #f0c488;
}

.dna-feedback[data-kind="error"] {
  color: #ffc08a;
}

.notice {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 14px;
  padding: 12px 15px;
  border: 1px solid rgb(72 114 164 / 35%);
  border-radius: 13px;
  background: rgb(13 30 55 / 62%);
  color: #aebcd0;
  font-size: 0.84rem;
  line-height: 1.5;
}

.notice strong {
  flex: 0 0 auto;
  color: #dce8f9;
}

.specialist-panel {
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid rgb(68 145 164 / 38%);
  border-radius: 17px;
  background:
    linear-gradient(135deg, rgb(18 50 68 / 88%), rgb(13 31 54 / 94%)),
    #0d2036;
}

.specialist-panel[hidden] {
  display: none !important;
}

.specialist-panel[data-state="loading"] {
  border-color: rgb(101 113 181 / 44%);
}

.specialist-panel[data-state="degraded"] {
  border-color: rgb(222 158 78 / 42%);
}

.specialist-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.specialist-heading h2,
.specialist-heading p,
.specialist-description,
.specialist-feedback {
  margin: 0;
}

.specialist-heading h2 {
  margin-top: 1px;
  color: #f1f8ff;
  font-size: 1rem;
}

.specialist-heading > div > p:last-child {
  max-width: 760px;
  margin-top: 3px;
  color: #9db5c7;
  font-size: 0.78rem;
  line-height: 1.45;
}

.specialist-kicker {
  color: #78d6c7;
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.specialist-active {
  padding: 6px 9px;
  border: 1px solid rgb(56 189 154 / 44%);
  border-radius: 999px;
  color: #91e2ca;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}

.specialist-control {
  display: grid;
  grid-template-columns: minmax(140px, 190px) minmax(220px, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgb(86 137 158 / 25%);
}

.specialist-control label {
  color: #cfe2ed;
  font-size: 0.78rem;
  font-weight: 700;
}

.specialist-control select {
  width: 100%;
  min-height: 42px;
  padding: 9px 38px 9px 12px;
  border: 1px solid #356277;
  border-radius: 11px;
  outline: none;
  background: #0c2638;
  color: #edf8ff;
  font: inherit;
  cursor: pointer;
}

.specialist-control select:hover:not(:disabled) {
  border-color: #5aa7b0;
}

.specialist-control select:focus-visible,
.history-boundary:focus-visible {
  outline: 3px solid rgb(102 211 197 / 27%);
  outline-offset: 2px;
}

.specialist-control select:disabled {
  cursor: not-allowed;
  filter: saturate(0.45);
  opacity: 0.62;
}

.specialist-description {
  margin-top: 9px;
  color: #b8ceda;
  font-size: 0.78rem;
  line-height: 1.5;
}

.specialist-feedback {
  margin-top: 5px;
  color: #829dab;
  font-size: 0.72rem;
  line-height: 1.45;
}

.specialist-feedback[data-kind="success"] {
  color: #91e2ca;
}

.specialist-feedback[data-kind="warning"] {
  color: #f0c488;
}

.local-tools-panel {
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid rgb(91 124 189 / 38%);
  border-radius: 17px;
  background:
    linear-gradient(135deg, rgb(24 43 77 / 90%), rgb(12 29 51 / 95%)),
    #0d2036;
}

.local-tools-panel[hidden],
.local-tools-result[hidden] {
  display: none !important;
}

.local-tools-panel[data-state="loading"] {
  border-color: rgb(101 137 202 / 48%);
}

.local-tools-panel[data-state="error"] {
  border-color: rgb(229 169 80 / 48%);
}

.local-tools-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.local-tools-heading h2,
.local-tools-heading p,
.local-tools-feedback,
.local-tool-card h3,
.local-tool-card p,
.local-tools-result h3 {
  margin: 0;
}

.local-tools-heading h2 {
  margin-top: 1px;
  color: #f1f6ff;
  font-size: 1rem;
}

.local-tools-heading > div > p:last-child {
  max-width: 760px;
  margin-top: 3px;
  color: #a5b4ce;
  font-size: 0.78rem;
  line-height: 1.45;
}

.local-tools-kicker {
  color: #8dbbff;
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.local-tools-badge {
  padding: 6px 9px;
  border: 1px solid rgb(108 151 215 / 45%);
  border-radius: 999px;
  color: #acd1ff;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}

.local-tools-panel[data-state="error"] .local-tools-badge {
  border-color: rgb(229 169 80 / 48%);
  color: #f0c488;
}

.local-tools-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 11px;
  margin-top: 14px;
}

.local-tools-list:empty {
  display: none;
}

.local-tool-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgb(94 132 188 / 35%);
  border-radius: 13px;
  background: rgb(11 28 50 / 76%);
}

.local-tool-card h3 {
  color: #eef5ff;
  font-size: 0.9rem;
}

.local-tool-card > p {
  min-height: 3.2em;
  margin-top: 5px;
  color: #9eafc7;
  font-size: 0.74rem;
  line-height: 1.5;
}

.local-tool-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 12px;
}

.local-tool-form label {
  grid-column: 1 / -1;
  color: #d4e2f2;
  font-size: 0.72rem;
  font-weight: 700;
}

.local-tool-form input {
  min-width: 0;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid #345478;
  border-radius: 10px;
  outline: none;
  background: #0a1d35;
  color: #f1f6ff;
}

.local-tool-form input::placeholder {
  color: #6f839f;
}

.local-tool-form button {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #437fbd;
  border-radius: 10px;
  background: rgb(29 91 148 / 56%);
  color: #dceeff;
  font-weight: 700;
  cursor: pointer;
}

.local-tool-form input:focus-visible,
.local-tool-form button:focus-visible,
.local-tools-result:focus-visible {
  outline: 3px solid rgb(104 170 239 / 27%);
  outline-offset: 2px;
}

.local-tool-form button:hover:not(:disabled) {
  border-color: #6aaceb;
  color: #fff;
}

.local-tool-form input:disabled,
.local-tool-form button:disabled {
  cursor: not-allowed;
  filter: saturate(0.4);
  opacity: 0.58;
}

.local-tools-feedback {
  margin-top: 10px;
  color: #899bb5;
  font-size: 0.72rem;
  line-height: 1.45;
}

.local-tools-feedback[data-kind="success"] {
  color: #91e2ca;
}

.local-tools-feedback[data-kind="error"] {
  color: #f0c488;
}

.local-tools-result {
  margin-top: 13px;
  padding: 13px;
  border: 1px solid rgb(72 156 139 / 42%);
  border-radius: 12px;
  background: rgb(8 34 43 / 72%);
}

.local-tools-result h3 {
  color: #dff7ee;
  font-size: 0.86rem;
}

.local-tool-result-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 10px 0 0;
}

.local-tool-result-summary > div {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 9px;
  background: rgb(10 29 45 / 74%);
}

.local-tool-result-summary dt {
  color: #7f9bad;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.local-tool-result-summary dd {
  margin: 4px 0 0;
  color: #d6e6ed;
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.local-tool-briefing-content {
  max-height: 320px;
  margin: 11px 0 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid rgb(82 128 145 / 35%);
  border-radius: 10px;
  background: #081927;
  color: #dce9ee;
  font: 0.76rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.company-knowledge-panel {
  border-color: rgb(74 158 139 / 42%);
  background:
    linear-gradient(135deg, rgb(12 54 57 / 90%), rgb(9 31 46 / 96%)),
    #0a2632;
}

.company-knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 11px;
  margin-top: 14px;
}

.company-knowledge-card > p,
.company-knowledge-card details > p {
  min-height: auto;
  margin: 5px 0 0;
  color: #9eafc7;
  font-size: 0.74rem;
  line-height: 1.5;
}

.company-knowledge-card summary {
  color: #eef5ff;
  font-size: 0.9rem;
  font-weight: 750;
  cursor: pointer;
}

.company-knowledge-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 12px;
}

.company-knowledge-form label {
  color: #d4e2f2;
  font-size: 0.72rem;
  font-weight: 700;
}

.company-knowledge-form input,
.company-knowledge-form textarea,
.company-knowledge-form select {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #345b70;
  border-radius: 10px;
  outline: none;
  background: #081f2d;
  color: #f1f6ff;
  font: inherit;
}

.company-knowledge-form textarea {
  resize: vertical;
  line-height: 1.5;
}

.company-knowledge-form button,
.knowledge-approval-actions button {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #3e927f;
  border-radius: 10px;
  background: rgb(24 105 88 / 62%);
  color: #e0fff5;
  font-weight: 700;
  cursor: pointer;
}

.knowledge-search-form {
  grid-template-columns: 1fr auto;
}

.knowledge-search-form label {
  grid-column: 1 / -1;
}

.company-knowledge-form input:focus-visible,
.company-knowledge-form textarea:focus-visible,
.company-knowledge-form select:focus-visible,
.company-knowledge-form button:focus-visible,
.knowledge-approval-actions button:focus-visible {
  outline: 3px solid rgb(91 199 174 / 25%);
  outline-offset: 2px;
}

.company-knowledge-form button:disabled,
.company-knowledge-form input:disabled,
.company-knowledge-form textarea:disabled,
.company-knowledge-form select:disabled,
.knowledge-approval-actions button:disabled {
  cursor: not-allowed;
  filter: saturate(0.35);
  opacity: 0.58;
}

.knowledge-search-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.knowledge-search-results[hidden],
.knowledge-approval[hidden] {
  display: none !important;
}

.knowledge-search-hit,
.knowledge-search-empty,
.knowledge-approval {
  padding: 10px;
  border: 1px solid rgb(71 151 135 / 38%);
  border-radius: 10px;
  background: rgb(7 31 39 / 76%);
}

.knowledge-search-hit h4,
.knowledge-search-hit p,
.knowledge-search-empty,
.knowledge-approval h3,
.knowledge-approval p {
  margin: 0;
}

.knowledge-search-hit h4,
.knowledge-approval h3 {
  color: #e0fff5;
  font-size: 0.8rem;
}

.knowledge-search-hit p,
.knowledge-search-empty,
.knowledge-approval p {
  margin-top: 5px;
  color: #a8c5c3;
  font-size: 0.72rem;
  line-height: 1.48;
  overflow-wrap: anywhere;
}

.knowledge-search-citation {
  color: #78bfb0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.65rem !important;
}

.knowledge-approval {
  margin-top: 12px;
}

.knowledge-approval-status {
  color: #91e2ca !important;
  font-weight: 750;
}

.knowledge-approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.knowledge-approval-actions .secondary {
  border-color: #8b7857;
  background: rgb(87 63 30 / 54%);
  color: #ffe6be;
}

.audiovisual-grid {
  align-items: start;
}

.audiovisual-assets-card {
  grid-column: 1 / -1;
}

.company-asset-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.company-asset-item,
.company-asset-empty {
  margin: 0;
  padding: 0.85rem;
  border: 1px solid rgb(71 151 135 / 30%);
  border-radius: 0.8rem;
  background: rgb(7 31 39 / 72%);
}

.company-asset-item {
  display: grid;
  gap: 0.55rem;
}

.company-asset-item strong {
  color: #e0fff5;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.company-asset-item p,
.company-asset-empty {
  color: #a8c5c3;
  font-size: 0.72rem;
  line-height: 1.45;
}

.company-asset-item p {
  margin: 0;
}

.company-asset-digest {
  color: #78bfb0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem !important;
  overflow-wrap: anywhere;
}

.company-asset-item button {
  min-height: 2.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgb(139 120 87 / 55%);
  border-radius: 0.7rem;
  background: rgb(87 63 30 / 42%);
  color: #ffe6be;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.company-asset-item button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.audiovisual-colors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.audiovisual-colors label {
  display: grid;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.company-knowledge-form .audiovisual-colors input[type="color"] {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.25rem;
  cursor: pointer;
}

.audiovisual-result {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

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

.audiovisual-result img,
.audiovisual-result video,
.audiovisual-result audio {
  display: block;
  width: 100%;
  max-height: 34rem;
  object-fit: contain;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 1rem;
  background: rgb(0 0 0 / 20%);
}

.audiovisual-result img[hidden],
.audiovisual-result video[hidden],
.audiovisual-result audio[hidden] {
  display: none;
}

.audiovisual-result audio {
  min-height: 3.4rem;
}

.audiovisual-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.audiovisual-result-actions a,
.audiovisual-result-actions button {
  min-height: 2.7rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgb(124 226 198 / 36%);
  border-radius: 0.8rem;
  background: rgb(124 226 198 / 10%);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.audiovisual-result-actions button:disabled,
.audiovisual-result-actions a[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

#audiovisual-result-meta {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.8rem;
}

.chat-panel {
  overflow: hidden;
  border: 1px solid rgb(82 118 164 / 32%);
  border-radius: 22px;
  background: rgb(8 19 36 / 86%);
  box-shadow: 0 24px 80px rgb(0 0 0 / 28%);
  backdrop-filter: blur(16px);
}

.active-target {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  align-items: baseline;
  padding: 15px 24px;
  border-bottom: 1px solid rgb(82 118 164 / 28%);
  background: rgb(12 31 54 / 76%);
}

.active-target[data-kind="platform_assistant"] {
  border-bottom-color: rgb(68 145 164 / 42%);
}

.active-target[data-kind="tenant_persona"],
.active-target[data-kind="specialist"] {
  border-bottom-color: rgb(58 183 152 / 42%);
  background: rgb(12 54 52 / 42%);
}

.active-target-kicker {
  grid-column: 1 / -1;
  color: #7eb8ee;
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.14em;
}

#active-target-name {
  color: #f0f8ff;
  font-size: 0.95rem;
}

#active-target-context {
  color: #9db3c5;
  font-size: 0.76rem;
  line-height: 1.45;
}

.messages {
  display: flex;
  min-height: 490px;
  max-height: calc(100vh - 330px);
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  padding: 24px;
}

.message {
  width: min(78%, 720px);
  padding: 13px 15px;
  border-radius: 16px;
  line-height: 1.55;
}

.message p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-citations {
  display: flex;
  gap: 5px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgb(111 150 195 / 24%);
  color: #9fb0c7;
  flex-direction: column;
  font-size: 0.72rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.message-citations strong {
  color: #c9d8eb;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.message-citations ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.message-label {
  margin-bottom: 5px;
  color: #8497b3;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.message-user {
  align-self: flex-end;
  border: 1px solid rgb(48 139 231 / 40%);
  border-bottom-right-radius: 5px;
  background: linear-gradient(145deg, #155a9e, #104777);
}

.message-user .message-label {
  color: #b7daf9;
}

.message-assistant,
.message-system {
  align-self: flex-start;
  border: 1px solid rgb(88 119 157 / 32%);
  border-bottom-left-radius: 5px;
  background: #101d31;
  color: #e6edf8;
}

.message-system {
  width: min(86%, 780px);
  background: #0c192b;
  color: #afbed2;
  font-size: 0.9rem;
}

.message[data-history-state="read-only"] {
  filter: saturate(0.45);
  opacity: 0.66;
}

.history-boundary {
  display: flex;
  width: min(92%, 820px);
  gap: 3px;
  align-self: center;
  padding: 10px 13px;
  border: 1px dashed rgb(108 151 170 / 45%);
  border-radius: 11px;
  background: rgb(10 35 50 / 72%);
  color: #99b0bd;
  flex-direction: column;
  font-size: 0.74rem;
  line-height: 1.45;
  text-align: center;
}

.history-boundary strong {
  color: #d2e5ec;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.retry-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 12px;
  padding: 7px 12px;
  border: 1px solid #3e6d9f;
  border-radius: 9px;
  background: rgb(24 75 126 / 45%);
  color: #cfe7ff;
  font-weight: 680;
  cursor: pointer;
}

.retry-button:hover:not(:disabled) {
  border-color: #6caae8;
  background: rgb(34 99 164 / 56%);
  color: #fff;
}

.retry-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.retry-button[hidden] {
  display: none;
}

.message-pending p::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: #74baff;
  animation: pulse 1s ease-in-out infinite alternate;
}

@keyframes pulse {
  to {
    opacity: 0.25;
    transform: translateY(-2px);
  }
}

.composer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 14px 16px 8px;
  border-top: 1px solid rgb(71 102 143 / 30%);
  background: rgb(7 17 32 / 92%);
}

.microphone-button {
  display: inline-flex;
  gap: 8px;
  min-width: 84px;
  align-items: center;
  justify-content: center;
  border: 1px solid #315378;
  border-radius: 13px;
  background: #10243e;
  color: #8dc8ff;
  cursor: pointer;
}

.microphone-symbol {
  width: 12px;
  height: 12px;
  overflow: hidden;
  border: 2px solid currentcolor;
  border-radius: 999px;
  color: transparent;
  box-shadow: 0 0 0 4px rgb(85 169 245 / 10%);
}

.microphone-button[aria-pressed="true"] {
  border-color: #ff7b75;
  background: rgb(127 36 42 / 42%);
  color: #ff8c85;
  animation: recording-ring 1.1s ease-in-out infinite alternate;
}

.microphone-button:hover:not(:disabled) {
  border-color: #63a9ec;
  background: #173454;
}

.microphone-button:disabled {
  cursor: not-allowed;
  filter: saturate(0.35);
  opacity: 0.5;
}

@keyframes recording-ring {
  to {
    box-shadow: 0 0 0 4px rgb(255 104 96 / 12%);
  }
}

.composer textarea {
  min-height: 48px;
  max-height: 150px;
  resize: none;
  padding: 13px 14px;
  border: 1px solid #2c405e;
  border-radius: 13px;
  outline: none;
  background: #0c192c;
  color: #f4f7fc;
  line-height: 1.4;
}

.composer textarea:focus {
  border-color: #398fe5;
  box-shadow: 0 0 0 3px rgb(57 143 229 / 13%);
}

.composer textarea:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.composer #send-button {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(145deg, #278de8, #1769b3);
  color: white;
  font-weight: 720;
  cursor: pointer;
}

.composer #send-button:disabled {
  cursor: not-allowed;
  filter: saturate(0.35);
  opacity: 0.55;
}

.voice-toolbar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 5px 18px 9px;
  background: rgb(7 17 32 / 92%);
  color: #7f93ad;
  font-size: 0.72rem;
}

.voice-state,
.voice-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.voice-state-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #667890;
}

.voice-toolbar[data-state="ready"] .voice-state-dot {
  background: #38bd9a;
}

.voice-toolbar[data-state="silent"] .voice-state-dot {
  background: #8aa6bb;
  animation: none;
}

.voice-toolbar[data-state="recording"] .voice-state-dot {
  background: #ff6f68;
  animation: pulse 0.65s ease-in-out infinite alternate;
}

.voice-toolbar[data-state="transcribing"] .voice-state-dot,
.voice-toolbar[data-state="speaking"] .voice-state-dot {
  background: #69b5ff;
  animation: pulse 0.8s ease-in-out infinite alternate;
}

/*
 * Voice remains local-only until the public media plane is explicitly homologated.
 * Pending and unknown runtimes fail closed if JavaScript is delayed or blocked.
 */
html:not([data-runtime-mode="local"]) [data-voice-interface] {
  display: none !important;
}

html[data-runtime-mode="cloud"] .chat-panel-close {
  display: none !important;
}

html[data-runtime-mode="cloud"] .brand-mark {
  background:
    radial-gradient(circle at 50% 35%, rgb(51 226 199 / 28%), transparent 46%),
    linear-gradient(145deg, #102a46, #07111f);
  border-color: rgb(51 226 199 / 55%);
  box-shadow: 0 0 28px rgb(51 226 199 / 18%);
  color: #8ff7e5;
}

.voice-button {
  padding: 5px 9px;
  border: 1px solid #2c405e;
  border-radius: 8px;
  background: transparent;
  color: #91a7c4;
  cursor: pointer;
}

.voice-button[aria-pressed="true"] {
  border-color: rgb(56 189 154 / 45%);
  color: #91e2ca;
}

.voice-button:hover:not(:disabled) {
  border-color: #4b79ad;
  color: #dce8f9;
}

.voice-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.composer-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 13px;
  background: rgb(7 17 32 / 92%);
  color: #70839f;
  font-size: 0.72rem;
}

.reasoning-toggle {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #a8c9ea;
  font-weight: 650;
  cursor: pointer;
}

.reasoning-toggle input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #3598ed;
}

.reasoning-toggle[data-state="unavailable"] {
  cursor: not-allowed;
  filter: saturate(0.35);
  opacity: 0.55;
}

.reset-button {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid #2c405e;
  border-radius: 9px;
  background: transparent;
  color: #9eb1cc;
  cursor: pointer;
}

.reset-button:hover:not(:disabled) {
  border-color: #4b79ad;
  color: #dce8f9;
}

.reset-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 960px) {
  .dna-wizard-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dna-native-voice-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dna-lifecycle-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dna-lifecycle-copy {
    grid-column: 1 / -1;
  }

  .dna-repeat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dna-remove-row-button {
    justify-self: start;
  }

  .dna-activation-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .shell {
    width: min(100% - 20px, 1040px);
    padding-top: 18px;
  }

  .topbar {
    grid-template-columns: auto 1fr;
  }

  .status-chip {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .notice {
    display: block;
  }

  .notice strong {
    display: block;
    margin-bottom: 3px;
  }

  .auth-heading {
    grid-template-columns: auto 1fr;
  }

  .auth-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .auth-signed-out,
  .auth-signed-in {
    align-items: stretch;
    flex-direction: column;
  }

  .auth-actions,
  .auth-enrollment-row {
    align-items: stretch;
    flex-direction: column;
  }

  .companies-heading {
    grid-template-columns: 1fr;
  }

  .companies-badge {
    justify-self: start;
  }

  .companies-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .companies-toolbar-actions,
  .company-onboarding-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .company-onboarding-heading,
  .company-onboarding-grid,
  .company-onboarding-status {
    grid-template-columns: 1fr;
  }

  .company-onboarding-close {
    justify-self: start;
  }

  .company-onboarding-field-wide {
    grid-column: auto;
  }

  .companies-list {
    grid-template-columns: 1fr;
  }

  .company-card-actions,
  .company-domains-heading,
  .company-domains-form,
  .company-domains-list,
  .dna-heading,
  .dna-version-toolbar,
  .dna-native-voice-controls,
  .dna-lifecycle-actions,
  .dna-publication-state,
  .dna-editorial-readiness,
  .dna-fields-two,
  .dna-repeat-row {
    grid-template-columns: 1fr;
  }

  .dna-heading-actions,
  .company-domains-heading-actions,
  .dna-gate-actions,
  .dna-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .company-domains-heading-actions {
    align-items: stretch;
  }

  .company-domains-badge {
    align-self: flex-start;
  }

  .company-domain-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dna-wizard-intro,
  .dna-brand-grid,
  .dna-review-grid,
  .dna-activation-flow {
    grid-template-columns: 1fr;
  }

  .dna-wizard-intro {
    align-items: start;
  }

  .dna-wizard-save-state {
    justify-self: start;
  }

  .dna-wizard {
    padding: 11px;
  }

  .dna-wizard-progress-copy {
    align-items: flex-start;
    flex-direction: column;
  }

  .dna-wizard-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dna-wizard-panel {
    min-height: 0;
    padding: 14px;
  }

  .dna-review-grid article:last-child {
    grid-column: auto;
  }

  .dna-review-grid article,
  .dna-repeat-heading,
  .dna-advanced-settings > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .dna-final-actions,
  .dna-wizard-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dna-final-actions button,
  .dna-wizard-actions button,
  .dna-guided-card .dna-add-row-button,
  .dna-guided-card .dna-remove-row-button,
  .dna-review-grid button {
    width: 100%;
    min-height: 44px;
  }

  .dna-wizard-actions #dna-wizard-back {
    margin-right: 0;
  }

  .dna-advanced-settings > summary small {
    line-height: 1.4;
  }

  .dna-status {
    align-self: flex-start;
  }

  .dna-native-voice-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  #dna-version-meta {
    text-align: left;
  }

  .dna-field-wide {
    grid-column: auto;
  }

  .specialist-heading,
  .specialist-control,
  .local-tools-heading,
  .local-tools-list,
  .local-tool-form,
  .company-knowledge-grid,
  .knowledge-search-form {
    grid-template-columns: 1fr;
  }

  .specialist-active,
  .local-tools-badge {
    justify-self: start;
  }

  .local-tool-form label {
    grid-column: auto;
  }

  .knowledge-search-form label {
    grid-column: auto;
  }

  .messages {
    min-height: 440px;
    max-height: calc(100vh - 390px);
    padding: 16px;
  }

  .active-target {
    grid-template-columns: 1fr;
    padding: 14px 16px;
  }

  .message,
  .message-system {
    width: 92%;
  }

  .composer {
    grid-template-columns: auto 1fr;
  }

  .composer #send-button {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  .voice-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .voice-actions {
    flex-wrap: wrap;
  }

  .composer-meta {
    gap: 10px;
    flex-direction: column;
  }
}