/* Copyright © 2026 Northstar Growth Partners LLC. All rights reserved. */
/*
 * The answer bot, dressed in the concept's own colours.
 *
 * Everything here reads from the variables the concept already declares, so
 * the box belongs to that business rather than to Northstar. Nothing is
 * hard coded except the geometry.
 *
 * It sits above the sticky call bar these pages already carry, never over it.
 * On a phone it is a sheet; on a desktop it is a card in the corner.
 */

.ns-launch {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(68px + env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 17px;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: var(--deep, #101C29);
  color: #fff;
  font: 600 14.5px/1 var(--body, system-ui, sans-serif);
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(6, 12, 20, .30);
  transition: transform .16s ease, box-shadow .16s ease;
}
.ns-launch:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(6, 12, 20, .36); }
.ns-launch:focus-visible { outline: 3px solid var(--signal, #33455C); outline-offset: 3px; }
.ns-launch-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal, #4ea56a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal, #4ea56a) 30%, transparent);
}

.ns-panel {
  position: fixed;
  z-index: 61;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(124px + env(safe-area-inset-bottom));
  width: min(380px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 190px));
  display: flex;
  flex-direction: column;
  background: var(--card, #fff);
  color: var(--ink, #101822);
  border: 1px solid var(--line, #E3E8EE);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 54px rgba(6, 12, 20, .28);
}
.ns-panel[hidden] { display: none; }

.ns-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px;
  background: var(--deep, #101C29);
  color: #fff;
}
.ns-head b { display: block; font: 700 15px/1.2 var(--body, system-ui, sans-serif); }
.ns-head span { display: block; margin-top: 2px; font: 500 11.5px/1.2 var(--body, system-ui, sans-serif); color: rgba(255,255,255,.72); }
.ns-x {
  background: transparent; border: 0; color: rgba(255,255,255,.78);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 8px;
  min-width: 34px; min-height: 34px;
}
.ns-x:hover { color: #fff; background: rgba(255,255,255,.10); }
.ns-x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.ns-log {
  flex: 1 1 auto; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper, #F6F8FB);
}
.ns-msg { max-width: 92%; }
.ns-msg p { margin: 0; font: 400 14.5px/1.5 var(--body, system-ui, sans-serif); }
.ns-bot {
  align-self: flex-start;
  background: var(--card, #fff);
  border: 1px solid var(--line, #E3E8EE);
  border-radius: 13px 13px 13px 4px;
  padding: 11px 13px;
}
.ns-me {
  align-self: flex-end;
  background: var(--deep, #101C29);
  color: #fff;
  border-radius: 13px 13px 4px 13px;
  padding: 11px 13px;
}
.ns-src {
  margin-top: 7px !important;
  font-size: 12px !important;
  color: var(--muted, #5A6875);
}
.ns-src b { font-weight: 600; color: var(--ink, #101822); }

.ns-cta { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ns-cta a {
  flex: 1 1 auto; text-align: center; text-decoration: none;
  font: 700 13.5px/1 var(--body, system-ui, sans-serif);
  padding: 11px 12px; border-radius: 9px; min-height: 42px;
  display: flex; align-items: center; justify-content: center;
}
.ns-b1 { background: var(--signal, #33455C); color: var(--accent-ink, #fff); }
.ns-b2 { background: transparent; color: var(--ink, #101822); border: 1px solid var(--line, #E3E8EE); }

.ns-dots { display: inline-flex; gap: 4px; padding: 3px 0; }
.ns-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted, #5A6875);
  animation: ns-blink 1.1s infinite ease-in-out;
}
.ns-dots i:nth-child(2) { animation-delay: .15s; }
.ns-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ns-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.ns-chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 11px 12px 0;
  background: var(--card, #fff);
  border-top: 1px solid var(--line, #E3E8EE);
}
.ns-chips button {
  font: 500 12.5px/1 var(--body, system-ui, sans-serif);
  padding: 9px 11px; min-height: 36px;
  background: var(--paper, #F6F8FB);
  color: var(--ink, #101822);
  border: 1px solid var(--line, #E3E8EE);
  border-radius: 999px; cursor: pointer; text-align: left;
}
.ns-chips button:hover { border-color: var(--signal, #33455C); }
.ns-chips button:focus-visible { outline: 2px solid var(--signal, #33455C); outline-offset: 2px; }

.ns-form {
  display: flex; gap: 8px; padding: 11px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--card, #fff);
}
.ns-form input {
  flex: 1 1 auto; min-width: 0;
  font: 400 15px/1.2 var(--body, system-ui, sans-serif);
  padding: 11px 12px; min-height: 44px;
  border: 1px solid var(--line, #E3E8EE);
  border-radius: 9px;
  background: var(--paper, #F6F8FB);
  color: var(--ink, #101822);
}
.ns-form input:focus-visible { outline: 2px solid var(--signal, #33455C); outline-offset: 1px; }
.ns-form button {
  font: 700 13.5px/1 var(--body, system-ui, sans-serif);
  padding: 11px 16px; min-height: 44px;
  background: var(--deep, #101C29); color: #fff;
  border: 0; border-radius: 9px; cursor: pointer;
}
.ns-form button:focus-visible { outline: 3px solid var(--signal, #33455C); outline-offset: 2px; }

.ns-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* On a phone it is a sheet, and the launcher gets out of the way once open. */
@media (max-width: 620px) {
  .ns-panel {
    left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(78vh, calc(100vh - 90px));
    border-radius: 16px;
  }
  body.ns-chat-open .ns-launch { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ns-launch { transition: none; }
  .ns-launch:hover { transform: none; }
  .ns-dots i { animation: none; opacity: .6; }
}