/* Sprint 2B.2.1 - Local AI website guide UX polish */

.ai-website-guide-launcher {

  position: fixed;

  inset-inline-start: 20px;

  bottom: 104px;

  z-index: 12000;

  display: inline-flex;

  align-items: center;

  justify-content: flex-start;

  gap: 10px;

  min-width: 44px;

  min-height: 48px;

  max-width: min(238px, calc(100vw - 32px));

  padding: 8px 12px 8px 14px;

  border: 1px solid rgba(18, 99, 80, 0.2);

  border-radius: 18px;

  background: linear-gradient(135deg, #ffffff 0%, #f3faf6 58%, #e6f4ed 100%);

  color: #103f35;

  box-shadow: 0 12px 28px rgba(18, 99, 80, 0.15);

  font: 700 13.5px/1.28 inherit;

  cursor: pointer;

  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;

}

.ai-website-guide-launcher__mark {

  position: relative;

  flex: 0 0 auto;

  display: inline-grid;

  place-items: center;

  width: 34px;

  height: 34px;

  border: 1px solid rgba(18, 99, 80, 0.17);

  border-radius: 13px;

  background: rgba(255, 255, 255, 0.72);

  color: #126350;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);

}

.ai-website-guide-launcher__mark::after {

  content: "";

  position: absolute;

  inset: -4px;

  border-radius: 16px;

  border: 1px solid rgba(37, 129, 101, 0.12);

  pointer-events: none;

}

.ai-website-guide-launcher__icon {

  width: 20px;

  height: 20px;

  fill: currentColor;

}

.ai-website-guide-launcher__copy {

  display: grid;

  gap: 1px;

  min-width: 0;

  text-align: right;

}

.ai-website-guide-launcher__primary {

  color: #0f493d;

  font-size: 0.96rem;

  font-weight: 800;

  white-space: nowrap;

}

.ai-website-guide-launcher__secondary {

  color: #55726a;

  font-size: 0.74rem;

  font-weight: 700;

  white-space: nowrap;

}

.ai-website-guide-launcher:hover {

  border-color: rgba(18, 99, 80, 0.38);

  background: linear-gradient(135deg, #ffffff 0%, #edf8f2 56%, #dff0e8 100%);

  box-shadow: 0 15px 32px rgba(18, 99, 80, 0.2);

  transform: translateY(-1px);

}

.ai-website-guide-launcher:focus-visible {

  outline: 3px solid rgba(18, 99, 80, 0.32);

  outline-offset: 4px;

  border-color: rgba(18, 99, 80, 0.48);

}

.ai-website-guide-launcher.is-open {

  border-color: rgba(18, 99, 80, 0.46);

  background: linear-gradient(135deg, #f7fcf9 0%, #e7f5ee 100%);

  box-shadow: 0 16px 36px rgba(8, 42, 35, 0.22);

}

.ai-website-guide-launcher.is-open .ai-website-guide-launcher__mark {

  color: #ffffff;

  background: #126350;

  border-color: #126350;

}

.ai-website-guide-launcher.is-open .ai-website-guide-launcher__secondary {

  color: #315b50;

}

.ai-website-guide {

  position: fixed;

  inset-inline-start: 20px;

  bottom: 158px;

  z-index: 12001;

  width: min(410px, calc(100vw - 32px));

  max-height: min(660px, calc(100vh - 184px));

  overflow: hidden;

  display: grid;

  grid-template-rows: auto minmax(0, 1fr) auto;

  direction: rtl;

  text-align: right;

  border: 1px solid rgba(18, 99, 80, 0.16);

  border-radius: 18px;

  background: #fbfdfb;

  color: #143f35;

  box-shadow: 0 22px 58px rgba(8, 42, 35, 0.22);

  font-family: inherit;

}



.ai-website-guide[hidden] {

  display: none;

}



.ai-website-guide__header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 12px;

  padding: 17px 18px 13px;

  border-bottom: 1px solid rgba(18, 99, 80, 0.12);

  background: linear-gradient(180deg, #ffffff 0%, #f3faf6 100%);

}



.ai-website-guide__title {

  margin: 0;

  color: #0e463a;

  font-size: 1.16rem;

  line-height: 1.3;

}



.ai-website-guide__subtitle {

  margin: 5px 0 0;

  color: #174d40;

  font-size: 0.92rem;

  font-weight: 700;

  line-height: 1.45;

}



.ai-website-guide__disclosure {

  margin: 3px 0 0;

  color: #6d807a;

  font-size: 0.78rem;

  line-height: 1.45;

}



.ai-website-guide__close {

  flex: 0 0 auto;

  width: 34px;

  height: 34px;

  border: 1px solid rgba(18, 99, 80, 0.16);

  border-radius: 999px;

  background: #ffffff;

  color: #123f35;

  font-size: 22px;

  line-height: 1;

  cursor: pointer;

}



.ai-website-guide__body {

  overflow-y: auto;

  min-height: 0;

  padding: 15px 18px 30px;

  overscroll-behavior: contain;

  scroll-behavior: smooth;

}



.ai-website-guide__messages {

  display: grid;

  gap: 11px;

}



.ai-website-guide__answer-card {
  animation: ai-guide-reveal 160ms ease-out;
}

.ai-website-guide__message {
  animation: none;
  opacity: 1;
}



.ai-website-guide__message {

  padding: 12px 13px;

  border: 1px solid rgba(18, 99, 80, 0.11);

  border-radius: 14px;

  background: #ffffff;

  color: #173f36;

  box-shadow: 0 8px 18px rgba(18, 99, 80, 0.055);

  font-size: 0.93rem;

  line-height: 1.62;

}



.ai-website-guide__message p {

  margin: 0 0 7px;

}



.ai-website-guide__message p:last-child {

  margin-bottom: 0;

}



.ai-website-guide__message--notice {

  background: #ffffff;

  color: #173f36;

}



.ai-website-guide__message--privacy {

  padding: 9px 11px;

  background: #f7fbf8;

  color: #2f5148;

  font-size: 0.86rem;

  box-shadow: none;
  opacity: 1;

}



.ai-website-guide__message--user {

  justify-self: start;

  max-width: 88%;

  background: #edf7f2;

  border-color: rgba(18, 99, 80, 0.16);

  font-weight: 700;

}



.ai-website-guide__message--loading {

  display: inline-flex;

  justify-self: start;

  align-items: center;

  min-height: 40px;

  color: #3d6258;

}



.ai-website-guide__answer-card {

  padding: 14px;

  border: 1px solid rgba(37, 211, 102, 0.3);

  border-radius: 16px;

  background: #ffffff;

  box-shadow: 0 10px 24px rgba(18, 99, 80, 0.07);

}



.ai-website-guide__answer-card--safety {

  border-color: rgba(184, 47, 47, 0.38);

  background: #fff8f6;

}



.ai-website-guide__answer-card--medical {

  border-color: rgba(180, 128, 32, 0.36);

  background: #fffaf0;

}



.ai-website-guide__answer-heading {

  display: flex;

  align-items: center;

  gap: 8px;

  margin: 0 0 10px;

  color: #0e463a;

  font-size: 1rem;

  line-height: 1.35;

}



.ai-website-guide__answer-card--safety .ai-website-guide__answer-heading {

  color: #6b1d19;

}



.ai-website-guide__answer-card--medical .ai-website-guide__answer-heading {

  color: #593b13;

}



.ai-website-guide__icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  border-radius: 999px;

  background: #e9f8ef;

  color: #0f5c4b;

  font-size: 0.82rem;

  font-weight: 800;

}



.ai-website-guide__answer-card--safety .ai-website-guide__icon {

  background: #ffe6e0;

  color: #7d211b;

}



.ai-website-guide__answer-card--medical .ai-website-guide__icon {

  background: #fff0cd;

  color: #68420e;

}



.ai-website-guide__answer-text {

  display: grid;

  gap: 8px;

  color: #173f36;

  font-size: 0.94rem;

  line-height: 1.65;

}



.ai-website-guide__answer-text p {

  margin: 0;

}



.ai-website-guide__source-box {

  margin-top: 13px;

  padding: 11px;

  border: 1px solid rgba(18, 99, 80, 0.12);

  border-radius: 13px;

  background: #f7fbf8;

}



.ai-website-guide__source-title {

  display: flex;

  align-items: center;

  gap: 7px;

  margin: 0 0 7px;

  color: #0f4d3f;

  font-size: 0.86rem;

  font-weight: 800;

}



.ai-website-guide__source-list,

.ai-website-guide__follow-list {

  display: grid;

  gap: 7px;

}



.ai-website-guide__source-list a,

.ai-website-guide__follow-list a,

.ai-website-guide__full-link {

  color: #0f5c4b;

  text-decoration: underline;

  text-underline-offset: 3px;

  font-weight: 700;

}



.ai-website-guide__full-link {

  display: inline-flex;

  margin-top: 9px;

  font-size: 0.88rem;

}



.ai-website-guide__followups {

  margin-top: 12px;

  padding-top: 11px;

  border-top: 1px solid rgba(18, 99, 80, 0.1);

}



.ai-website-guide__follow-title {

  margin: 0 0 8px;

  color: #30584f;

  font-size: 0.86rem;

  font-weight: 800;

}



.ai-website-guide__actions {

  display: grid;

  gap: 9px;

  margin-top: 14px;

}



.ai-website-guide__actions--cards {

  grid-template-columns: 1fr 1fr;

}



.ai-website-guide__action {

  width: 100%;

  min-height: 42px;

  padding: 9px 11px;

  border: 1px solid rgba(18, 99, 80, 0.18);

  border-radius: 12px;

  background: #ffffff;

  color: #123f35;

  font: 700 0.92rem/1.4 inherit;

  text-align: right;

  cursor: pointer;

}



.ai-website-guide__action:hover {

  background: #eef8f2;

  border-color: rgba(37, 211, 102, 0.44);

}



.ai-website-guide__action--primary {

  background: #0f5c4b;

  color: #ffffff;

}



.ai-website-guide__action--primary:hover {

  background: #0d4f41;

}



.ai-website-guide__action-card {

  min-height: 108px;

  padding: 13px;

  display: grid;

  gap: 7px;

  align-content: start;

  border-radius: 15px;

  background: #ffffff;

  box-shadow: 0 8px 18px rgba(18, 99, 80, 0.055);

}



.ai-website-guide__action-card-title {

  color: #0e463a;

  font-size: 0.98rem;

}



.ai-website-guide__action-card-desc {

  color: #61756f;

  font-size: 0.82rem;

  font-weight: 600;

  line-height: 1.5;

}



.ai-website-guide__ask {

  display: grid;

  gap: 9px;

  margin-top: 14px;

}



.ai-website-guide__ask[hidden] {

  display: none;

}



.ai-website-guide__ask label {

  color: #355a50;

  font-size: 0.92rem;

  font-weight: 800;

}



.ai-website-guide__ask-help {

  margin: 0;

  color: #687b75;

  font-size: 0.82rem;

  line-height: 1.45;

}



.ai-website-guide__ask-row {

  display: flex;

  gap: 8px;

}



.ai-website-guide__ask input {

  min-width: 0;

  flex: 1 1 auto;

  padding: 11px 12px;

  border: 1px solid rgba(18, 99, 80, 0.22);

  border-radius: 12px;

  background: #ffffff;

  color: #173f36;

  font: inherit;

}



.ai-website-guide__ask button {

  flex: 0 0 auto;

  padding: 10px 14px;

  border: 0;

  border-radius: 12px;

  background: #25d366;

  color: #ffffff;

  font-weight: 800;

  cursor: pointer;

}



.ai-website-guide__validation {

  margin: 0;

  color: #7d211b;

  font-size: 0.82rem;

  font-weight: 700;

}



.ai-website-guide__validation[hidden] {

  display: none;

}



.ai-website-guide__footer {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  justify-content: space-between;

  padding: 11px 18px 15px;

  border-top: 1px solid rgba(18, 99, 80, 0.12);

  background: #fbfdfb;

}



.ai-website-guide__utility {

  border: 0;

  background: transparent;

  color: #0f5c4b;

  font: 700 0.82rem/1.4 inherit;

  text-decoration: underline;

  text-underline-offset: 3px;

  cursor: pointer;

}



.ai-website-guide__status {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



.ai-website-guide button:focus-visible,

.ai-website-guide input:focus-visible,

.ai-website-guide a:focus-visible {

  outline: 3px solid rgba(37, 211, 102, 0.34);

  outline-offset: 2px;

}



@keyframes ai-guide-reveal {
  from {
    transform: translateY(4px);
  }

  to {
    transform: translateY(0);
  }
}



@media (max-width: 520px) {

  .ai-website-guide-launcher {

    inset-inline: 16px auto;

    bottom: 92px;

    max-width: calc(100vw - 32px);

    padding-inline: 11px 12px;

  }



  .ai-website-guide {

    inset-inline-start: 16px;

    bottom: 146px;

    width: calc(100vw - 32px);

    max-height: calc(100vh - 168px);

    border-radius: 16px;

  }



  .ai-website-guide__actions--cards {

    grid-template-columns: 1fr;

  }



  .ai-website-guide__action-card {

    min-height: 88px;

  }



  .ai-website-guide__ask-row {

    flex-direction: column;

  }

}



@media (max-width: 340px) {

  .ai-website-guide {

    inset-inline-start: 10px;

    width: calc(100vw - 20px);

  }



  .ai-website-guide-launcher {

    inset-inline-start: 10px;

    max-width: calc(100vw - 20px);

  }



  .ai-website-guide__header,

  .ai-website-guide__body,

  .ai-website-guide__footer {

    padding-inline: 13px;

  }

}



@media (prefers-reduced-motion: reduce) {

  .ai-website-guide,

  .ai-website-guide-launcher,

  .ai-website-guide__message,

  .ai-website-guide__answer-card {

    animation: none;

    scroll-behavior: auto;

    transition: none;

  }

}


@media (max-width: 520px) and (max-height: 720px) {
  .ai-website-guide {
    bottom: 184px;
    max-height: calc(100vh - 204px);
    max-height: calc(100dvh - 204px);
  }

  .ai-website-guide-launcher {
    bottom: 122px;
    min-height: 46px;
  }

  .ai-website-guide__header {
    padding-block: 10px 8px;
  }

  .ai-website-guide__body {
    padding-block: 8px 72px;
  }

  .ai-website-guide__messages {
    gap: 7px;
  }

  .ai-website-guide__message {
    padding-block: 8px;
  }

  .ai-website-guide__actions {
    gap: 7px;
    margin-top: 8px;
  }

  .ai-website-guide__action-card {
    min-height: 68px;
    padding: 8px 11px;
  }

  .ai-website-guide__footer {
    gap: 5px;
    padding-block: 4px 6px;
  }

  .ai-website-guide__utility {
    font-size: 0.76rem;
    line-height: 1.25;
  }
}