/* Modern AI workspace. Loaded only by ai.php. */
.ai-canvas-wrap {
  --ai-blue: #087fb8;
  --ai-blue-dark: #0d577c;
  --ai-cyan: #12a6cf;
  --ai-green: #159b68;
  --ai-ink: #173146;
  --ai-muted: #62788a;
  --ai-line: #d6e1e9;
  --ai-soft: #f3f7fa;
  position: relative;
  isolation: isolate;
}

#neuralCanvas {
  opacity: .11;
}

.ai-chat,
.wiz-wrap {
  border: 1px solid var(--ai-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 9px 26px rgba(25, 62, 86, .11);
  backdrop-filter: none;
}

.ai-chat {
  margin-bottom: 14px;
}

.ai-chat__head {
  min-height: 64px;
  padding: 11px 14px;
  gap: 11px;
  background: var(--ai-blue-dark);
  border-bottom: 0;
}

.ai-chat__avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 8px;
  background: var(--ai-cyan);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0, 42, 64, .22);
}

.ai-chat__avatar::after {
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  background: #39d98a;
  border-color: var(--ai-blue-dark);
}

.ai-chat__name {
  color: #fff;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.ai-chat__status {
  margin-top: 3px;
  color: #b9f2d5;
  font-size: .73rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.ai-chat__status::before {
  background: #39d98a;
}

.ai-chat__reset {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.ai-chat__reset:hover {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.ai-chat__msgs {
  height: 340px;
  padding: 18px 16px;
  gap: 11px;
  background: var(--ai-soft);
  scrollbar-color: #b9cbd7 transparent;
  scrollbar-width: thin;
}

.ai-chat__msgs::-webkit-scrollbar {
  width: 5px;
}

.ai-chat__msgs::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #b9cbd7;
}

.ai-msg {
  max-width: 87%;
  padding: 11px 13px;
  border-radius: 8px;
  font-size: .92rem;
  line-height: 1.62;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.ai-msg--bot {
  border: 1px solid #d8e4ec;
  border-left: 3px solid var(--ai-blue);
  border-bottom-left-radius: 3px;
  background: #fff;
  color: #294354;
  box-shadow: 0 3px 10px rgba(37, 71, 93, .06);
}

.ai-msg--user {
  border: 1px solid var(--ai-blue);
  border-bottom-right-radius: 3px;
  background: var(--ai-blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(8, 127, 184, .18);
}

.ai-msg__lbl {
  margin-bottom: 5px;
  color: var(--ai-blue);
  font-size: .69rem;
  letter-spacing: 0;
}

.ai-msg--user .ai-msg__lbl {
  color: #dff6ff;
}

.ai-msg a {
  color: #056b9d;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.ai-typing {
  gap: 5px;
  padding: 11px 14px;
  border: 1px solid #d8e4ec;
  border-left: 3px solid var(--ai-blue);
  border-radius: 8px;
  border-bottom-left-radius: 3px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(37, 71, 93, .06);
}

.ai-typing span {
  width: 6px;
  height: 6px;
  background: var(--ai-blue);
}

.ai-quick {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 12px 6px;
  border-top: 1px solid #e2eaf0;
  background: #fff;
}

.ai-quick__btn {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 6px 7px;
  border: 1px solid #d7e8f2;
  border-radius: 6px;
  background: #edf7fc;
  color: #236a8e;
  font-size: .74rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.ai-quick__btn i {
  margin-right: 3px;
  color: var(--ai-blue);
}

.ai-quick__btn:hover,
.ai-quick__btn:active {
  border-color: var(--ai-blue);
  background: var(--ai-blue);
  color: #fff;
}

.ai-quick__btn:hover i,
.ai-quick__btn:active i {
  color: #fff;
}

.ai-chat__input {
  gap: 8px;
  padding: 8px 12px 12px;
  border-top: 0;
  background: #fff;
}

.ai-chat__field {
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #cbd9e3;
  border-radius: 8px;
  background: #fff;
  color: var(--ai-ink);
  font-size: .92rem;
  letter-spacing: 0;
}

.ai-chat__field::placeholder {
  color: #8799a6;
}

.ai-chat__field:hover {
  border-color: #9eb6c6;
}

.ai-chat__field:focus {
  border-color: var(--ai-blue);
  box-shadow: 0 0 0 3px rgba(8, 127, 184, .12);
}

.ai-chat__send {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 8px;
  background: var(--ai-blue);
  font-size: .9rem;
}

.ai-chat__send:hover {
  background: #066f9f;
  box-shadow: 0 5px 14px rgba(8, 127, 184, .24);
  transform: translateY(-1px);
}

.ai-chat__send:disabled {
  background: #abc6d4;
  opacity: 1;
}

.ai-cats-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 16px;
}

.ai-cat-pill {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  justify-content: flex-start;
  padding: 8px 11px;
  border: 1px solid #d4e0e8;
  border-radius: 7px;
  background: rgba(255, 255, 255, .96);
  color: #496273;
  font-size: .78rem;
  line-height: 1.25;
  letter-spacing: 0;
  box-shadow: 0 3px 10px rgba(29, 65, 88, .05);
  backdrop-filter: none;
  overflow-wrap: anywhere;
}

.ai-cat-pill i {
  width: 17px;
  flex: 0 0 17px;
  color: var(--ai-blue);
  font-size: .83rem;
  text-align: center;
}

.ai-cat-pill:hover,
.ai-cat-pill:active {
  border-color: #87bed7;
  background: #edf7fc;
  color: #174f6b;
  box-shadow: 0 5px 13px rgba(29, 65, 88, .09);
  transform: translateY(-1px);
}

.wiz-wrap {
  padding: 18px;
  margin-bottom: 20px;
}

.wiz-heading {
  gap: 10px;
  margin-bottom: 16px;
}

.wiz-heading i {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  background: var(--ai-blue);
  color: #fff;
  font-size: .92rem;
}

.wiz-heading h3 {
  color: var(--ai-ink);
  font-size: .96rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.wiz-heading span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid #cbe3ef;
  border-radius: 7px;
  background: #edf7fc;
  color: #1d7198;
  font-size: .69rem;
  letter-spacing: 0;
}

.wiz-steps {
  gap: 7px;
  margin-bottom: 17px;
}

.wiz-step-dot {
  height: 4px;
  border-radius: 4px;
  background: #dce6ed;
}

.wiz-step-dot.active {
  background: var(--ai-blue);
}

.wiz-step-dot.done {
  background: var(--ai-green);
}

.wiz-q {
  margin-bottom: 12px;
  color: #526b7b;
  font-size: .82rem;
  line-height: 1.4;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.wiz-cards {
  gap: 9px;
}

.wiz-card {
  min-height: 92px;
  padding: 14px 10px;
  border: 1px solid #d8e3eb;
  border-radius: 8px;
  background: #f7fafc;
  color: #405b6d;
  letter-spacing: 0;
}

.wiz-card i {
  margin-bottom: 8px;
  color: var(--ai-blue);
  font-size: 1.45rem;
}

.wiz-card span {
  color: inherit;
  font-size: .78rem;
  letter-spacing: 0;
}

.wiz-card:hover,
.wiz-card.sel {
  border-color: #75b9d8;
  background: #edf7fc;
  color: #154e69;
  box-shadow: 0 5px 14px rgba(31, 88, 117, .08);
  transform: translateY(-1px);
}

.wiz-card.sel i {
  color: var(--ai-blue);
}

.wiz-probs {
  gap: 8px;
}

.wiz-prob {
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid #d8e3eb;
  border-radius: 7px;
  background: #f7fafc;
  color: #405b6d;
  font-size: .79rem;
  line-height: 1.35;
  letter-spacing: 0;
}

.wiz-prob i {
  color: var(--ai-blue);
}

.wiz-prob:hover,
.wiz-prob.sel {
  border-color: #75b9d8;
  background: #edf7fc;
  color: #154e69;
  box-shadow: 0 4px 12px rgba(31, 88, 117, .07);
}

.wiz-result {
  padding: 15px;
  border: 1px solid #cfe0e9;
  border-radius: 8px;
  background: #f7fafc;
}

.wiz-result-head i {
  border-radius: 7px;
  background: #e4f6ee;
  color: var(--ai-green);
}

.wiz-result-head strong {
  color: var(--ai-ink);
  font-size: .9rem;
  letter-spacing: 0;
}

.wiz-result p,
.wiz-result ul li {
  color: #496273;
}

.wiz-btn {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 7px;
  letter-spacing: 0;
}

.wiz-btn-primary {
  background: var(--ai-blue);
  color: #fff;
}

.wiz-btn-primary:hover {
  background: #066f9f;
  box-shadow: 0 5px 14px rgba(8, 127, 184, .2);
}

.wiz-btn-ghost {
  border: 1px solid #c7dce7;
  background: #fff;
  color: #236a8e;
}

.wiz-btn-ghost:hover {
  border-color: #87bed7;
  background: #edf7fc;
}

.wiz-back {
  color: #246f94;
  letter-spacing: 0;
}

.ai-chat button:focus-visible,
.ai-cat-pill:focus-visible,
.wiz-wrap button:focus-visible,
.wiz-wrap a:focus-visible {
  outline: 3px solid rgba(8, 127, 184, .28);
  outline-offset: 2px;
}

@media (min-width: 1360px) {
  .ai-msg {
    font-size: .96rem;
  }

  .ai-quick__btn,
  .ai-cat-pill,
  .wiz-prob,
  .wiz-q {
    font-size: .81rem;
  }
}

@media (max-width: 768px) {
  .ai-chat {
    margin-bottom: 12px;
  }

  .ai-chat__head {
    min-height: 60px;
    padding: 10px 11px;
  }

  .ai-chat__avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .ai-chat__name {
    font-size: .91rem;
  }

  .ai-chat__status {
    font-size: .69rem;
  }

  .ai-chat__reset {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .ai-chat__msgs {
    height: 300px;
    padding: 13px 11px;
  }

  .ai-msg {
    max-width: 93%;
    padding: 10px 11px;
    font-size: .88rem;
    line-height: 1.58;
  }

  .ai-quick {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 8px 9px 5px;
  }

  .ai-quick__btn {
    min-height: 37px;
    padding: 5px 4px;
    font-size: .7rem;
  }

  .ai-chat__input {
    padding: 7px 9px 10px;
  }

  .ai-chat__field {
    font-size: 16px;
  }

  .ai-cats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 14px;
  }

  .ai-cat-pill {
    min-height: 41px;
    padding: 7px 9px;
    font-size: .76rem;
  }

  .wiz-wrap {
    padding: 14px 12px;
  }

  .wiz-heading {
    gap: 8px;
    margin-bottom: 14px;
  }

  .wiz-heading i {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .wiz-heading h3 {
    font-size: .89rem;
  }

  .wiz-heading span {
    padding: 3px 6px;
    font-size: .65rem;
  }

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

  .wiz-card {
    min-height: 88px;
  }

  .wiz-probs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 370px) {
  .ai-chat__name {
    font-size: .84rem;
  }

  .ai-chat__status {
    font-size: .65rem;
  }

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

@media (prefers-reduced-motion: reduce) {
  .ai-quick__btn,
  .ai-cat-pill,
  .wiz-card,
  .wiz-prob,
  .wiz-btn,
  .ai-chat__send {
    transition: none;
  }
}