/* KeyGEO assistant · white theme. One outer focus ring on chat compose. */
.kg-preview {
  position: fixed;
  bottom: 24px;
  left: 20px;
  z-index: 200;
  padding: 6px 11px;
  border: 1px solid #35505b;
  border-radius: 6px;
  background: #0b171eed;
  color: #acc6d0;
  font:
    10px/1.5 system-ui,
    sans-serif;
  box-shadow: 0 3px 14px #0003;
  pointer-events: none;
}
.kg-launcher {
  position: fixed;
  bottom: 24px;
  right: 28px;
  z-index: 501;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid #3a8492;
  border-radius: 40px;
  background: #0c2029;
  color: #cceef3;
  cursor: pointer;
  font: 500 12px/1.5 var(--font, system-ui, sans-serif);
  box-shadow:
    0 8px 28px #0007,
    0 0 22px #25d9e814;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.kg-launcher:hover {
  background: #133240;
  border-color: #6adbe9;
}
.kg-launcher > span {
  display: grid;
  place-items: center;
  color: #49dce9;
  font-size: 21px;
  width: 23px;
  height: 23px;
}
.kg-launcher[aria-expanded="true"] {
  border-color: #27545d;
  color: #9abdc5;
}
.kg-panel {
  position: fixed;
  right: 28px;
  bottom: 88px;
  width: 432px;
  height: min(710px, calc(100dvh - 112px));
  z-index: 500;
  display: flex;
  flex-direction: column;
  background: var(--card-surface);
  color: #edf4f6;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow:
    0 25px 95px #000b,
    0 0 0 1px #3ed6e608;
  overflow: hidden;
  font: 14px/1.65 var(--font, "PingFang SC", system-ui, sans-serif);
}
.kg-panel[hidden] {
  display: none;
}
.kg-panel * {
  box-sizing: border-box;
}
.kg-panel button,
.kg-panel input,
.kg-panel textarea {
  font: inherit;
}
.kg-panel button {
  cursor: pointer;
}
.kg-panel button:focus-visible,
.kg-panel input:focus-visible,
.kg-panel textarea:focus-visible,
.kg-panel summary:focus-visible,
.kg-launcher:focus-visible {
  outline: 2px solid #51dce9;
  outline-offset: 3px;
}
.kg-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 20px 14px;
  border-bottom: 1px solid #20343e;
  background: linear-gradient(120deg, #10252e, #0b141a);
}
.kg-avatar {
  width: 39px;
  height: 39px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #0c1820;
  border: 1px solid #315762;
  color: #39d3e6;
  font-weight: 800;
  font-size: 14px;
  flex: none;
  overflow: hidden;
}
.kg-avatar img {
  width: 39px;
  height: 42px;
  max-width: none;
  object-fit: cover;
  mix-blend-mode: screen;
}
.kg-head h2 {
  font-size: 15px;
  margin: 0;
  font-weight: 650;
}
.kg-head p {
  font-size: 10px;
  color: #a1b7c2;
  margin: 2px 0 0;
}
.kg-icon {
  border: 0;
  background: transparent;
  color: #a5bcc7;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 22px !important;
  margin-left: auto;
}
.kg-icon:hover {
  background: #1b303c;
}
.kg-proto {
  font-size: 10px;
  color: #aabdc6;
  background: #111f28;
  text-align: center;
  padding: 6px 12px;
  border-bottom: 1px solid #21313a;
}
.kg-tabs {
  display: flex;
  gap: 5px;
  padding: 10px 20px;
  border-bottom: 1px solid #20343e;
}
.kg-tabs button {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px;
  color: #9cb0bb;
  font-size: 12px;
}
.kg-tabs button[aria-selected="true"] {
  background: #17323d;
  color: #7be4ec;
  font-weight: 600;
  border-color: #28515f;
}
.kg-body {
  overflow: auto;
  padding: 20px;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #33505d transparent;
  overscroll-behavior: contain;
}
.kg-eyebrow {
  color: #62d1de;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.kg-panel h3 {
  font-size: 23px;
  line-height: 1.5;
  margin: 0 0 11px;
  letter-spacing: -0.5px;
  font-weight: 600;
}
.kg-muted {
  color: #a2b6c1;
  font-size: 12px;
  margin: 0 0 18px;
  line-height: 1.9;
}
.kg-welcome {
  padding: 7px 0 10px;
}
.kg-primary {
  display: block;
  width: 100%;
  border: 1px solid #27d5e6;
  border-radius: 7px;
  background: #27d5e6;
  color: #07262e;
  padding: 11px 15px;
  font-weight: 650 !important;
  font-size: 13px !important;
}
.kg-primary:hover {
  background: #67e7f0;
  border-color: #67e7f0;
}
.kg-primary:disabled {
  opacity: 0.6;
  cursor: wait;
}
.kg-note {
  font-size: 11px;
  color: #a1b4bd;
  margin: 10px 0;
  line-height: 1.8;
}
.kg-facts {
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: #94aeb9;
  margin: 13px 0 22px;
}
.kg-facts span + span::before {
  content: "·";
  margin-right: 8px;
  color: #62a4b6;
}
.kg-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  border: 1px solid #29414e;
  border-radius: 8px;
  background: #101f28;
  color: #c0d3dc;
  padding: 10px 12px;
  margin: 8px 0;
  font-size: 11px !important;
}
.kg-question:hover {
  background: #18303c;
  border-color: #407384;
}
.kg-question span {
  color: #63cedb;
  flex: none;
}
.kg-small-title {
  font-size: 11px;
  color: #9fb5bf;
  margin: 22px 0 8px;
}
.kg-progress {
  display: flex;
  gap: 7px;
  margin: 0 0 21px;
}
.kg-progress span {
  flex: 1;
  color: #94aab7;
  font-size: 10px;
  border-top: 2px solid #2a3d49;
  padding-top: 7px;
}
.kg-progress .active {
  color: #77dfeb;
  border-color: #37cadb;
}
.kg-field {
  display: block;
  margin: 15px 0;
  font-size: 12px;
  font-weight: 500;
  color: #d1dfe6;
}
.kg-field input,
.kg-field textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 10px 11px;
  border: 1px solid #3a5361;
  border-radius: 7px;
  color: #e8f1f5;
  background: #071017;
  font-weight: 400;
  font-size: 13px;
}
.kg-field input::placeholder,
.kg-field textarea::placeholder {
  color: #8da3b1;
  font-size: 12px;
}
.kg-field textarea {
  resize: vertical;
  min-height: 78px;
}
.kg-field input[aria-invalid="true"] {
  border-color: #ee947f;
}
.kg-hint {
  font-size: 10px;
  color: #9eb2bc;
  display: block;
  margin-top: 5px;
  font-weight: 400;
}
.kg-contact-types {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.kg-contact-types button {
  flex: 1;
  border: 1px solid #334b58;
  border-radius: 6px;
  color: #a6bac6;
  background: #0e1c25;
  padding: 7px 4px;
  font-size: 12px;
}
.kg-contact-types button[aria-pressed="true"] {
  border-color: #4598aa;
  background: #183540;
  color: #84e1ed;
}
.kg-error {
  color: #ffc0ae;
  background: #381f20;
  border: 1px solid #6d3835;
  border-radius: 7px;
  font-size: 12px;
  padding: 9px 11px;
  margin: 12px 0;
}
.kg-back {
  background: none;
  color: #a3bbc6;
  border: 0;
  padding: 0;
  margin-bottom: 12px;
  font-size: 12px !important;
}
.kg-summary {
  background: #101e27;
  border: 1px solid #2b424f;
  border-radius: 10px;
  padding: 3px 14px;
  margin: 16px 0;
}
.kg-row {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid #2b414d;
  font-size: 12px;
}
.kg-row:last-child {
  border-bottom: 0;
}
.kg-row span {
  color: #9bb3c1;
  flex: none;
}
.kg-row strong {
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}
.kg-edit {
  color: #73d6e4;
  background: none;
  border: 0;
  font-size: 12px !important;
  padding: 0;
}
.kg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
}
.kg-chip {
  background: #0d1b24;
  border: 1px solid #344957;
  padding: 5px 10px;
  border-radius: 20px;
  color: #abc0cb;
  font-size: 11px !important;
}
.kg-chip[aria-pressed="true"] {
  color: #92e6f0;
  background: #1a3b49;
  border-color: #5396a7;
}
.kg-panel summary {
  cursor: pointer;
  color: #b2c7d1;
  font-size: 12px;
  margin-top: 18px;
}
.kg-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  color: #b1c4cf;
  margin: 18px 0 14px;
}
.kg-consent input {
  margin-top: 4px;
  accent-color: #2ccddd;
  width: 15px;
  height: 15px;
  flex: none;
}
.kg-bubble {
  max-width: 94%;
  padding: 12px 14px;
  background: #142733;
  border: 1px solid #29424f;
  border-radius: 4px 13px 13px 13px;
  margin: 12px 0;
  color: #c9dce5;
  font-size: 13px;
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.kg-bubble.user {
  margin-left: auto;
  color: #d1f3f7;
  background: #164452;
  border-color: #256275;
  border-radius: 13px 4px 13px 13px;
}
.kg-compose {
  border-top: 1px solid #2c414d;
  padding: 12px 16px;
  background: #0c1820;
}
.kg-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #405b6b;
  border-radius: 9px;
  padding: 7px 8px 7px 12px;
  gap: 8px;
  background: #09131a;
}
.kg-compose input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  color: #e4f0f5;
  font-size: 12px;
  box-shadow: none;
}
.kg-compose input::placeholder {
  color: #96acb9;
}
.kg-compose input:focus-visible {
  outline: none;
  box-shadow: none;
}
.kg-input-wrap:focus-within {
  outline: 2px solid #4ed6e7;
  outline-offset: 2px;
}
.kg-send {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: #32cddd;
  color: #06252d;
  flex: none;
  font-size: 18px !important;
}
.kg-footer {
  text-align: center;
  font-size: 10px;
  color: #9aafbb;
  margin-top: 8px;
}
.kg-success-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background: #173d45;
  color: #6ce7dd;
  font-size: 25px;
  border: 1px solid #2e6c73;
  border-radius: 50%;
  margin: 16px 0;
}
.kg-resume {
  margin: 10px 0;
}
.kg-field select {
  display: block;
  width: 100%;
  padding: 9px;
  margin-top: 7px;
  border: 1px solid #395561;
  border-radius: 7px;
  background: #08141b;
  color: #dce9ef;
}
.kg-field select:focus-visible {
  outline: 2px solid #4ed6e7;
  outline-offset: 3px;
}
.kg-send:disabled {
  opacity: 0.5;
  cursor: wait;
}
@media (max-width: 620px) {
  .kg-panel {
    right: 12px;
    bottom: 79px;
    width: calc(100% - 24px);
    height: min(710px, calc(100dvh - 99px));
  }
  .kg-launcher {
    right: 14px;
    bottom: 18px;
    padding: 11px 15px;
    font-size: 11px;
  }
  .kg-preview {
    bottom: 20px;
    left: 12px;
    max-width: 130px;
    font-size: 8px;
  }
  .kg-head {
    padding: 14px 17px;
  }
  .kg-body {
    padding: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kg-panel * {
    scroll-behavior: auto;
  }
  .kg-launcher {
    transition: none;
  }
}

/* Consistent vector action cues, independent of platform text glyphs. */
.kg-action-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
}
.kg-primary .kg-action-icon,
.kg-edit .kg-action-icon {
  margin-left: 7px;
}
.kg-question .kg-action-icon {
  color: #80c8d5;
  margin-top: 1px;
}

.kg-panel::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 32px;
  right: 32px;
  height: 1px;
  background: var(--card-highlight);
  pointer-events: none;
}

.kg-intent {
  margin: 0;
  padding: 9px 20px;
  color: #b6dce5;
  background: #112a34;
  border-bottom: 1px solid #294650;
  font-size: 11px;
}

/* White assistant surface, shared by chat and every diagnosis step. */
.kg-panel {
  color-scheme: light;
  --card-surface: #fff;
  --card-border: #dce1f0;
  --ink: #20264b;
  --muted: #69718d;
  --cyan: #4148ed;
  --surface: #fff;
  --surface-raised: #f3f5fb;
  --line: #e4e7f1;
  background: #fff;
  color: #20264b;
  box-shadow: 0 24px 80px #141c4c29, 0 0 0 1px #ffffff80;
}
.kg-head { background: #fff; border-color: #e4e7f1; }
.kg-head p, .kg-muted, .kg-note, .kg-facts, .kg-small-title,
.kg-hint, .kg-consent, .kg-footer { color: #69718d; }
.kg-icon { color: #69718d; }
.kg-icon:hover { background: #eef0fb; color: #4148ed; }
.kg-proto { color: #69718d; background: #f6f7fb; border-color: #e4e7f1; }
.kg-tabs { background: #fff; border-color: #e4e7f1; }
.kg-tabs button { color: #69718d; }
.kg-tabs button[aria-selected="true"] { background: #ecefff; border-color: #d9dfff; color: #353dc9; }
.kg-body { background: #fff; scrollbar-color: #c4cbe0 transparent; }
.kg-eyebrow, .kg-facts span + span::before { color: #515ac7; }
.kg-primary, .kg-send { background: #4148ed; color: #fff; border-color: #4148ed; }
.kg-primary:hover { background: #3038ce; border-color: #3038ce; }
.kg-question { color: #343c60; background: #f6f7fc; border-color: #e1e5f1; }
.kg-question:hover { background: #eef0ff; border-color: #b9c1f5; }
.kg-question span, .kg-question .kg-action-icon { color: #515ad2; }
.kg-progress span { color: #757d97; border-color: #e1e5f1; }
.kg-progress .active { color: #4148d8; border-color: #626aeb; }
.kg-field { color: #343c60; }
.kg-field input, .kg-field textarea, .kg-field select {
  color: #252d51; background: #fff; border-color: #cfd5e7;
}
.kg-field input::placeholder, .kg-field textarea::placeholder,
.kg-compose input::placeholder { color: #8088a1; }
.kg-field input[aria-invalid="true"] { border-color: #cf574d; }
.kg-contact-types button, .kg-chip { color: #646d8b; background: #f5f6fb; border-color: #dce1ee; }
.kg-contact-types button[aria-pressed="true"], .kg-chip[aria-pressed="true"] {
  color: #353dc9; background: #ecefff; border-color: #aeb8f0;
}
.kg-error { color: #a93229; background: #fff2ef; border-color: #f1c4bc; }
.kg-back, .kg-row span, .kg-panel summary { color: #69718d; }
.kg-edit { color: #4148d8; }
.kg-summary { background: #f6f7fc; border-color: #e0e5f1; }
.kg-row { border-color: #e1e5f1; }
.kg-consent input { accent-color: #4148ed; }
.kg-bubble { color: #343c60; background: #f3f5fb; border-color: #e1e5f1; }
.kg-bubble.user { color: #fff; background: #4148dd; border-color: #4148dd; }
.kg-compose { background: #fff; border-color: #e4e7f1; }
.kg-input-wrap { background: #f8f9fd; border-color: #cfd5e7; }
.kg-compose input { color: #252d51; }
.kg-input-wrap:focus-within { outline-color: #747cf0; }
.kg-panel button:focus-visible, .kg-panel input:focus-visible,
.kg-panel textarea:focus-visible, .kg-panel select:focus-visible,
.kg-panel summary:focus-visible, .kg-launcher:focus-visible { outline-color: #747cf0; }
.kg-compose input:focus-visible { outline: none; }
.kg-success-icon { color: #277254; background: #ebf8f1; border-color: #bfe2d0; }
.kg-intent { color: #5a6385; background: #f1f3ff; border-color: #dce2f7; }
.kg-launcher { background: #373fdb; color: #fff; border-color: #929cff; box-shadow: 0 8px 28px #252ab82b; }
.kg-launcher:hover { background: #282fc2; border-color: #bec6ff; }
.kg-launcher[aria-expanded="true"] { color: #fff; border-color: #929cff; }

/* A compact consultation window; diagnosis forms keep their full reading space. */
.kg-panel[data-mode="chat"] { height: min(420px, calc(100dvh - 112px)); }
.kg-panel[data-mode="chat"] .kg-body { padding: 26px 24px; }
.kg-panel[data-mode="chat"] .kg-welcome { padding: 0; }
.kg-panel[data-mode="chat"] .kg-welcome h3 { font-size: 25px; margin-bottom: 10px; }
.kg-panel[data-mode="chat"] .kg-welcome .kg-muted { margin-bottom: 26px; }
.kg-chat-return { align-self: flex-start; margin: 12px 20px 0; padding: 3px 0; border: 0; background: none; color: #515ac7; font-size: 12px !important; }
@media (max-width: 620px) {
  .kg-panel[data-mode="chat"] { height: min(420px, calc(100dvh - 99px)); }
  .kg-panel[data-mode="chat"] .kg-body { padding: 23px 20px; }
}