/* Home: the live globe is the page ground, as on the other pages; the greeting,
   ask bar and workspace panels flow over it. */
.home-page {
  background: #04090d;
}
.home-page aside {
  background: linear-gradient(135deg, #080e12, #04090c);
}
.home-page .nav {
  min-height: 48px;
  padding-block: 12px;
}
.home-page .nav.active {
  background: linear-gradient(100deg, #ff6a0025, #ffffff04);
}
.home-page .nav.active .icon {
  fill: #ff8000;
  stroke-width: 1.4;
}
.home-page .canvas {
  min-height: 100svh;
  container-type: inline-size;
}
.home-page header {
  height: 76px;
  padding: 0 32px;
  flex-shrink: 0;
}
.home-page .strap {
  word-spacing: normal;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.strap-telemetry {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 20px;
  background: #091217d0;
  border: 1px solid #233440;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.8px;
  color: #a2b4c2;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}
.strap-telemetry .telemetry-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00dca0;
  box-shadow: 0 0 8px #00dca0bb;
}
#soc-clock {
  color: #e5edf4;
  font-weight: 600;
}
@keyframes live-dot-pulse {
  from {
    opacity: 0.45;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1.15);
    box-shadow: 0 0 12px #00dca0;
  }
}
.home-page .system-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 35px;
  padding: 8px 15px;
  border: 1px solid #2c3e47;
  border-radius: 30px;
  background: #091318;
  font-size: 12px;
  color: #e4edf3;
}
.home-page .system-status > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #49e876;
  box-shadow: 0 0 12px #49e87630;
}
.home-page .system-status:hover {
  border-color: #71818a;
}
.home-page .avatar {
  width: 38px;
  height: 38px;
  font-size: 15px;
}
.home-page #profile {
  gap: 10px;
  padding-right: 0;
}
.home-page .profile-chevron {
  width: 16px;
  height: 16px;
}
.home-page main {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 4px 32px 0;
}
/* Full-bleed ground layer behind header and hero. The cinematic photo itself is
   painted on .home-scene::before in premium.css, which nulls background-image
   here; declaring it in both places meant one of the two was always dead. Only
   the ground colour belongs on the element. */
.home-scene {
  position: absolute;
  inset: 0 0 auto;
  height: clamp(560px, 64vh, 700px);
  z-index: -1;
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
  background-color: #060c10;
}
.home-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.home-scene.scene-ready .home-motion {
  opacity: 1;
}
.home-scene:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #040a0ee8 0%, #040a0ea8 29%, #040a0e15 65%),
    linear-gradient(0deg, #04090d 0%, #04090dcc 14%, #04090d00 46%);
}
.home-page .hero {
  min-height: clamp(200px, 33vh, 318px);
  padding: clamp(28px, 5vh, 64px) 0 18px;
  position: relative;
}
.home-page .greeting {
  font-size: 14px;
  margin: 0 0 14px;
  color: #9fb0bd;
}
.home-page .eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  margin: 0 0 15px;
  color: #ff913b;
}
.home-page h1 {
  font-size: clamp(40px, 3.9cqw, 56px);
  line-height: 1.04;
  letter-spacing: -1.4px;
  font-weight: 700;
  max-width: 11.5em;
  text-wrap: balance;
}
.home-page h1 em {
  background: linear-gradient(#ff9e30, #ff5d0b);
  background-clip: text;
}
.home-page .intro {
  font-size: 14px;
  line-height: 1.55;
  max-width: 560px;
  margin: 14px 0 0;
  color: #b7c5d0;
}
/* The ask bar lives in the text column so the globe keeps the right third clear. */
.home-page .ask {
  max-width: 760px;
  margin: 0;
  padding: 0 0 clamp(24px, 4vh, 44px);
  transform: none;
}
.home-page .ask form {
  height: 59px;
  gap: 14px;
  padding: 6px 7px 6px 18px;
  border-radius: 13px;
  backdrop-filter: blur(18px);
}
.home-page .ask kbd + button {
  position: relative;
  margin-left: 15px;
}
.home-page .ask kbd + button:before {
  content: "";
  position: absolute;
  left: -15px;
  width: 1px;
  height: 26px;
  background: #33424c;
}
.home-page .ask input {
  font-size: 14px;
}
.home-page .ask form button:not(.select-trigger) {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border-radius: 10px;
}
.home-page .ask form button:not(.select-trigger) .icon {
  width: 24px;
  height: 24px;
}
.home-page .suggestions {
  justify-content: flex-start;
  gap: 9px;
  margin-top: 14px;
}
.home-page .suggestions button {
  font-size: 11px;
  padding: 7px 12px;
  background: #0b141cc7;
  border-color: #394852;
}
.home-page .lower {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 8px;
  align-items: stretch;
}
.home-page .panel {
  min-width: 0;
  padding: 20px;
  background:
    radial-gradient(
      500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 106, 0, 0.08),
      transparent 70%
    ),
    linear-gradient(130deg, #0b1319, #080f14);
  border: 1px solid #26343e;
  border-radius: 16px;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.home-page .panel:hover {
  border-color: #384b57;
  box-shadow: 0 16px 42px #00000060;
}
.home-page .panel-title {
  margin-bottom: 16px;
  min-height: 23px;
}
.home-page .panel h2 {
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
}
.home-page .subtle {
  font-size: 11px;
}
.home-page .recent-row {
  position: relative;
  padding: 17px 14px;
  border-radius: 8px;
  gap: 12px;
  font-size: 12px;
  line-height: 1.4;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.home-page .recent-row:hover {
  background: #ffffff0a;
  transform: translateX(3px);
}
.home-page .panel:before,
.home-page .panel:after {
  display: none !important;
}
.home-page .recent-row > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.home-page .recent-row time {
  font-size: 11px;
}
.home-page .recent-row .dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 12px #4cde8120;
}
.home-page .actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  perspective: 1000px;
}
.home-page .action {
  min-height: 65px;
  position: relative;
  padding: 13px 36px 13px 54px;
  border: 1px solid #26353f;
  border-radius: 10px;
  background:
    radial-gradient(
      260px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 138, 0, 0.16),
      transparent 65%
    ),
    linear-gradient(115deg, #ff6a0012, #111a20 50%, #080f14);
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 0.18s cubic-bezier(0.2, 0, 0.2, 1),
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.home-page .action:hover {
  background:
    radial-gradient(
      320px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 138, 0, 0.26),
      transparent 65%
    ),
    linear-gradient(115deg, #ff6a002b, #111a20 60%, #0b1419);
  border-color: #ff8a32aa;
  box-shadow:
    0 10px 30px #00000070,
    0 0 20px #ff6a001f;
}
.home-page .action > .icon {
  position: absolute;
  left: 16px;
  top: 19px;
  width: 23px;
  height: 23px;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.25s ease,
    filter 0.25s ease;
}
.home-page .action:hover > .icon {
  transform: scale(1.14);
  color: #ff9a00;
  filter: drop-shadow(0 0 8px #ff6a0088);
}
.home-page .action .action-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 4px;
  white-space: normal;
}
.home-page .action p {
  font-size: 11px;
  line-height: 1.45;
  margin: 0;
  color: #9eafbc;
}
.home-page .action .arrow {
  right: 14px;
  bottom: auto;
  top: 24px;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}
.home-page .action:hover .arrow {
  transform: translateX(4px);
  color: #ff9a00;
}
.home-page footer {
  padding: 18px 34px;
  font-size: 11px;
  letter-spacing: 2.6px;
  margin-top: 28px;
}
.home-page .selected-agent {
  margin: 0 0 12px;
}
@container (max-width:850px) {
  .home-page .lower {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1100px) {
  .home-page header {
    padding-inline: 24px;
  }
  .home-page .strap {
    font-size: 11px;
    letter-spacing: 2px;
    word-spacing: 0;
  }
  .home-page main {
    padding: 20px 24px 0;
  }
  .home-page .account {
    gap: 12px;
  }
  .home-page .intro {
    max-width: 400px;
  }
}
@media (max-width: 700px) {
  .strap-telemetry {
    display: none;
  }
  .home-page header {
    height: 66px;
    padding: 0 16px;
    gap: 10px;
  }
  .home-page .system-status {
    font-size: 11px;
    padding: 7px 10px;
    gap: 7px;
    min-height: 32px;
  }
  .home-page .account {
    gap: 9px;
  }
  .home-page .avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .home-page #profile {
    gap: 4px;
  }
  .home-page main {
    padding: 16px 14px 0;
  }
  .home-scene:after {
    background:
      linear-gradient(90deg, #040a0eda, #040a0e48),
      linear-gradient(0deg, #04090d 0%, #04090dcc 16%, #04090d15 80%);
  }
  .home-page .hero {
    min-height: 0;
    padding: 22px 0 16px;
  }
  .home-page h1 {
    font-size: clamp(34px, 9.5vw, 46px);
    letter-spacing: -1.2px;
  }
  .home-page .eyebrow {
    font-size: 11px;
    letter-spacing: 1.7px;
    line-height: 1.6;
    margin-bottom: 12px;
  }
  .home-page .intro {
    font-size: 12px;
    line-height: 1.6;
    margin-top: 14px;
  }
  .home-page .ask {
    padding: 0 0 20px;
  }
  .home-page .ask form {
    height: 54px;
    gap: 8px;
    padding-left: 12px;
  }
  .home-page .ask form > .icon {
    width: 19px;
  }
  .home-page .ask input {
    font-size: 11px;
  }
  .home-page .ask form button:not(.select-trigger) {
    width: 39px;
    height: 39px;
  }
  .home-page .ask kbd {
    display: none;
  }
  .home-page .suggestions {
    gap: 7px;
  }
  .home-page .suggestions > span {
    display: none;
  }
  .home-page .suggestions button {
    font-size: 11px;
    padding: 7px 9px;
  }
  .home-page .lower {
    gap: 14px;
    margin-top: 16px;
  }
  .home-page .panel {
    padding: 17px 15px;
    border-radius: 13px;
  }
  .home-page .panel h2 {
    font-size: 13px;
  }
  .home-page .recent-row {
    font-size: 11px;
    gap: 9px;
    padding: 14px 0;
  }
  .home-page .recent-row time {
    font-size: 11px;
  }
  .home-page .action {
    padding: 13px 34px 13px 50px;
    min-height: 72px;
  }
  .home-page footer {
    padding: 23px 18px;
    font-size: 11px;
    letter-spacing: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-motion {
    transition: none;
  }
  .strap-telemetry .telemetry-live-dot {
    animation: none;
  }
  .home-page .action,
  .home-page .action:hover {
    transform: none !important;
  }
}

/* Question starters ------------------------------------------------------- */

/* The cards look like buttons that run something. They only draft the opening
   words into the ask box, so the panel says that once and each card shows the
   shape of the finished question. */
.starter-help {
  margin: -6px 0 16px;
  max-width: 62ch;
}

.starter-example {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: #93a7b5;
  overflow-wrap: anywhere;
}

.starter-example em {
  font-style: normal;
  color: var(--ember, #ff7900);
  opacity: 0.85;
}

/* Shown in the composer after a starter is picked, so the next step is stated
   where the typing happens rather than only back on the card. */
.composer-guide {
  margin: 8px 2px 0;
  font-size: 12px;
  color: #9fb3c1;
}

.composer-guide:empty {
  display: none;
}