/* AI guide: Dock button and the full page it opens. */
.dock .dock-guide { flex-basis: 62px; width: 62px; }
.dock .dock-guide .dock-icon { display: grid; place-items: center; }
.dock-guide-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  transition: width 320ms ease, height 320ms ease, border-radius 320ms ease, font-size 320ms ease;
  background: linear-gradient(140deg, #6fb3ef, #4a74c9 55%, #7b6fd6);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
  box-shadow: 0 4px 12px rgb(74 116 201 / 35%), inset 0 1px 0 rgb(255 255 255 / 45%);
  transition: box-shadow .2s ease;
}
.dock-guide-badge::after { content: ''; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #7fc0f2, 0 0 8px #7fc0f2; }
.dock-guide[aria-expanded="true"] .dock-guide-badge { box-shadow: 0 0 0 3px rgb(111 179 239 / 35%), 0 4px 14px rgb(74 116 201 / 45%); }
.dock-guide[aria-expanded="true"] .dock-label { color: #294e7d; }

/* The home figure steps aside while its picture is up in the guide. */
.sculpture.ai-core { transition: opacity .35s ease; }
body.guide-open .sculpture.ai-core { opacity: 0; }

.guide-page {
  position: fixed;
  z-index: 1090;
  top: var(--guide-top, 57px);
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  outline: none;
}
.guide-page[hidden], .guide-live[hidden] { display: none; }
.guide-page.is-leaving { pointer-events: none; }
.guide-backdrop { position: absolute; inset: 0; background: radial-gradient(120% 75% at 50% 0%, #ffffff, #f4f8fd 45%, #e9f1f9); }

/* The picture and its orbits. Canvases sit behind and in front of it so the rings really circle it. */
.guide-hero { position: relative; flex: 0 0 auto; height: clamp(240px, 46vh, 440px); transition: height .5s cubic-bezier(.2,.8,.2,1); }
.guide-page.has-conversation .guide-hero { height: clamp(150px, 24vh, 230px); }
.guide-page.has-keyboard .guide-hero { height: 96px; }
.guide-orbits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.guide-orbits-front { z-index: 2; }
.guide-portrait {
  position: absolute;
  z-index: 1;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
  user-select: none;
}

.guide-top { position: absolute; z-index: 4; top: 14px; right: 16px; left: 20px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.guide-eyebrow span:last-child { text-shadow: 0 0 6px #fff, 0 0 14px #fff, 0 0 22px #fff; }
.guide-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0; color: #4d6a8c; font-size: 11px; font-weight: 650; letter-spacing: .12em; }
.guide-avatar { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(140deg, #6fb3ef, #4a74c9 55%, #7b6fd6); color: #fff; font-size: 11px; font-weight: 750; letter-spacing: 0; box-shadow: 0 4px 12px rgb(74 116 201 / 30%); }
.guide-close { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(255 255 255 / 90%); border-radius: 50%; background: rgb(255 255 255 / 72%); color: #4d6582; box-shadow: 0 6px 18px -8px rgb(47 87 135 / 40%); cursor: pointer; pointer-events: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.guide-close:hover { background: #fff; color: #2f4867; }

/* The conversation grows downwards; the newest message stays just above the input. */
.guide-body { position: relative; z-index: 3; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* Messages scrolled up fade into the picture instead of stopping at a hard edge. */
.guide-body.is-scrolled { -webkit-mask-image: linear-gradient(transparent, #000 44px); mask-image: linear-gradient(transparent, #000 44px); }
.guide-log { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; padding: 4px 20px 20px; }
.guide-intro { text-align: center; }
.guide-intro h2 { margin: 0 0 8px; color: #2a4466; font-size: 30px; font-weight: 600; letter-spacing: .05em; }
.guide-intro p { margin: 0 auto; max-width: 540px; color: #6c8298; font-size: 13px; line-height: 1.9; }
.guide-intro .guide-chips { justify-content: center; margin-top: 16px; }
.guide-msg { font-size: 13.5px; line-height: 1.85; }
.guide-msg p { margin: 0; }
.guide-msg.user { justify-self: end; max-width: 78%; padding: 11px 16px; border-radius: 18px 18px 4px 18px; background: linear-gradient(140deg, #4f72a0, #3a577d); color: #fff; box-shadow: 0 10px 24px -14px rgb(47 87 135 / 55%); }
.guide-msg.bot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; justify-self: stretch; color: #3f5874; }
.guide-msg.bot > div { min-width: 0; }
.guide-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.guide-chip { padding: 8px 13px; border: 1px solid #cfdcea; border-radius: 999px; background: rgb(255 255 255 / 82%); color: #46678a; font: inherit; font-size: 11.5px; line-height: 1.4; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.guide-chip:hover { border-color: #9fbbd6; background: #fff; }
.guide-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 12px; }
.guide-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; width: 100%; padding: 11px 13px; border: 1px solid #dbe5ef; border-radius: 14px; background: rgb(255 255 255 / 86%); color: #35506f; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.guide-result:hover { border-color: #9fbbd6; background: #fff; transform: translateY(-1px); }
.guide-result > svg { color: #8aa2b9; }
.guide-result-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #e8f1fa; color: #4f7fae; }
.guide-result-text { display: grid; gap: 3px; min-width: 0; }
.guide-result strong { overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.guide-result small { overflow: hidden; color: #8597a9; font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.guide-result-kind { margin-right: 7px; color: #5f8ab6; font-weight: 600; }
.guide-fact { margin-top: 10px !important; padding: 9px 12px; border-radius: 12px; background: #eaf2fb; color: #35506f; font-size: 12.5px; }
.guide-fact span { margin-right: 9px; color: #6f89a6; font-size: 10.5px; font-weight: 600; }
.guide-note { margin-top: 8px !important; color: #8a9bab; font-size: 11px; }

/* Input at the bottom of the page, just above the Dock. */
.guide-bottom { position: relative; z-index: 3; flex: 0 0 auto; padding: 0 16px var(--guide-bottom, 146px); }
.guide-bottom-inner { max-width: 760px; margin: 0 auto; }
.guide-live { max-height: 204px; overflow-y: auto; margin-bottom: 8px; padding: 10px 12px 12px; border: 1px solid #dde7f1; border-radius: 16px; background: rgb(255 255 255 / 88%); box-shadow: 0 16px 34px -22px rgb(47 87 135 / 45%); }
.guide-live-title { margin: 0; color: #7d92a8; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; }
.guide-live .guide-results { grid-template-columns: 1fr; margin-top: 8px; }
.guide-form { display: flex; gap: 8px; padding: 6px; border: 1px solid #d3dfeb; border-radius: 18px; background: rgb(255 255 255 / 94%); box-shadow: 0 18px 40px -22px rgb(47 87 135 / 50%); }
.guide-form:focus-within { border-color: #8fb4d8; }
.guide-form input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; background: transparent; color: #2f4867; font: inherit; font-size: 14px; outline: none; }
.guide-form input::placeholder { color: #9aabbc; }
.guide-send { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 13px; background: linear-gradient(140deg, #4f72a0, #3a577d); color: #fff; cursor: pointer; }
.guide-chip:focus-visible, .guide-result:focus-visible, .guide-close:focus-visible, .guide-send:focus-visible { outline: 2px solid #4b8fca; outline-offset: 2px; }
.guide-form:has(input:focus-visible) { outline: 2px solid #4b8fca; outline-offset: 2px; }

@media (min-width: 701px) and (max-height: 860px) {
  .guide-hero { height: clamp(200px, 34vh, 440px); }
  .guide-page.has-conversation .guide-hero { height: clamp(130px, 20vh, 200px); }
  .guide-intro h2 { font-size: 26px; }
  .guide-intro .guide-chips { margin-top: 12px; }
}
@media (max-width: 700px) {
  .dock .dock-guide { flex-basis: 56px; width: 56px; }
  .guide-hero { height: clamp(210px, 38vh, 330px); }
  .guide-page.has-conversation .guide-hero { height: clamp(120px, 19vh, 170px); }
  .guide-top { top: 10px; right: 12px; left: 14px; }
  .guide-log { gap: 14px; padding: 2px 14px 16px; }
  .guide-intro h2 { font-size: 24px; }
  .guide-intro p { font-size: 12.5px; }
  .guide-msg { font-size: 13px; }
  .guide-msg.user { max-width: 86%; }
  .guide-results { grid-template-columns: 1fr; }
  .guide-bottom { padding: 0 10px var(--guide-bottom, 134px); }
  .guide-live { max-height: 170px; }
  /* 16px keeps iOS from zooming into the field. */
  .guide-form input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .guide-hero, .sculpture.ai-core { transition: none; } .guide-result, .guide-chip, .dock-guide-badge { transition: none; } .guide-result:hover { transform: none; } }
html[data-reduced-motion="true"] .guide-hero, html[data-reduced-motion="true"] .sculpture.ai-core { transition: none; }