/* ── Brownstone AI Search Widget ── */
#bsi-search-widget * { box-sizing: border-box; margin: 0; padding: 0; }

#bsi-search-widget {
  --brown-dark:		#8B2E0A;
  --brown-mid:		#5C4A2A;
  --light:			#ffffff;
  --parchment:		#dddddd;
  --parchment-2:	#f2f5f7;
  --ink:			#1A1610;
  --rule:			#D4C9B5;
  --accent:			#8B2E0A;
  --shadow: 0 8px 40px rgba(44,36,22,0.22), 0 2px 8px rgba(44,36,22,0.12);
  font-family: 'Libre Caslon Text', Georgia, serif;
  position: fixed;
  --widget-top: 5rem;   /* single source of truth — change this, not the raw top values below */
  --panel-gap: 62px;      /* space between trigger bottom and panel top */
  --panel-bottom-buffer: 1.5rem; /* breathing room at the bottom of the panel */
  top: var(--widget-top);
  right: 1rem; /* default: hugs viewport edge on laptops/tablets/mobile */
  z-index: 99999;
}

/* On wide screens, align with the right edge of the site's 1200px content
   column instead of the raw browser edge, so the widget doesn't float out
   in empty margin space on ultra-wide monitors. */
@media (min-width: 1240px) {
  #bsi-search-widget {
    right: calc((100vw - 1200px) / 2 + 0.5rem);
  }
}

#bsi-trigger {
  width: 50px; height: 50px;
  background: var(--light);
  border-radius: 50%;
  border: 3px solid var(--brown-dark);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, background 0.2s ease;
  position: relative;
}
#bsi-trigger:hover { transform: scale(1.08); background: var(--parchment); }
#bsi-trigger svg { width: 22px; height: 22px; fill: var(--parchment); transition: opacity 0.2s; }
#bsi-trigger .bsi-icon-close { display: none; }
#bsi-search-widget.bsi-open #bsi-trigger .bsi-icon-open  { display: none; }
#bsi-search-widget.bsi-open #bsi-trigger .bsi-icon-close { display: block; }

/* Panel */
#bsi-panel {
  position: absolute;
  top: var(--panel-gap); right: 0;
  width: 380px;
  background: var(--parchment);
  border-radius: 4px 12px 12px 12px;
  box-shadow: var(--shadow);
  border: 1px solid var(--rule);
  overflow: hidden;
  display: flex; flex-direction: column;
  /* Height auto-adjusts to however far down the widget sits (--widget-top),
     so moving the widget can never re-introduce bottom clipping. */
  max-height: calc(100vh - var(--widget-top) - var(--panel-gap) - var(--panel-bottom-buffer));
  max-height: calc(100dvh - var(--widget-top) - var(--panel-gap) - var(--panel-bottom-buffer));
  opacity: 0;
  transform: translateY(-12px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#bsi-search-widget.bsi-open #bsi-panel {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: all;
}

#bsi-header {
  background: var(--brown-dark);
  padding: 0.85rem 1.1rem;
  display: flex; align-items: center; gap: 0.65rem;
  flex-shrink: 0;
}
#bsi-header-icon {
  width: 32px; height: 32px;
  background: var(--accent);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#bsi-header-icon svg { width: 18px; height: 18px; fill: var(--parchment); }
#bsi-header-text { flex: 1; }
#bsi-header-text h2 {
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-size: 0.95rem; font-weight: 600;
  color: var(--light); letter-spacing: 0.02em;
}
#bsi-header-text p {
  font-size: 0.72rem; color: var(--light);
  letter-spacing: 0.03em; margin-top: 1px;
}

#bsi-reset {
  width: 30px; height: 30px;
  background: none; border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--light);
  opacity: 0.85;
  transition: opacity 0.15s, transform 0.2s;
  flex-shrink: 0;
}
#bsi-reset:hover { opacity: 1; transform: rotate(-45deg); }
#bsi-reset svg { width: 17px; height: 17px; }

#bsi-messages {
  flex: 1; overflow-y: auto;
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  scroll-behavior: smooth;
}
#bsi-messages::-webkit-scrollbar { width: 4px; }
#bsi-messages::-webkit-scrollbar-track { background: transparent; }
#bsi-messages::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }

.bsi-msg {
  max-width: 100%;
  font-size: 0.8rem; line-height: 1.6;
  animation: bsi-fade-up 0.2s ease both;
}
@keyframes bsi-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bsi-msg-assistant {
  align-self: flex-start;
  background: var(--parchment-2);
  box-shadow: 0 1px 4px rgba(44,36,22,0.07);
  padding: 5px 10px !important;
}
.bsi-msg-user {
  align-self: flex-end;
  background: var(--parchment);
  padding: 0.6rem 0.85rem;
}

.bsi-sources {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 0.3rem;
}
.bsi-sources a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
  display: flex; align-items: flex-start; gap: 0.35rem;
  line-height: 1.4;
}
.bsi-sources a:hover { text-decoration: underline; }
.bsi-sources a::before { content: '→'; flex-shrink: 0; color: var(--accent); }

.bsi-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 0.65rem 0.85rem !important;
  background: white; border: 1px solid var(--rule);
  border-radius: 2px 10px 10px 10px;
  align-self: flex-start;
  width: fit-content;
}
.bsi-typing span {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: bsi-bounce 1.2s infinite;
}
.bsi-typing span:nth-child(2) { animation-delay: 0.2s; }
.bsi-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bsi-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-5px); }
}

#bsi-suggestions {
  padding: 0 1rem 0.5rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  flex-shrink: 0;
}
.bsi-pill {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  background: var(--parchment-2);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.28rem 0.7rem !important;
  cursor: pointer;
  color: var(--brown-mid);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.bsi-pill:hover {
  background: var(--brown-dark); color: var(--parchment); border-color: var(--brown-dark);
}

#bsi-input-row {
  display: flex; align-items: center; gap: 0;
  border-top: 1px solid var(--rule);
  flex-shrink: 0;
  background: white;
}
#bsi-input {
  flex: 1;
  border: none; outline: none;
  background: transparent;
  padding: 0.75rem 0.9rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.875rem;
  color: var(--ink);
  resize: none;
  line-height: 1.4;
}
#bsi-input::placeholder { color: #9a9186; }
#bsi-send {
  width: 38px; height: 38px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--light);
  transition: background 0.15s, transform 0.15s;
  flex-shrink: 0;
  margin-right: 0.4rem;
}
#bsi-send:hover { background: var(--brown-mid); transform: scale(1.05); }
#bsi-send svg { width: 18px; height: 18px; }
#bsi-send:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* Tablets and small laptops: keep the panel comfortably on-screen */
@media (max-width: 820px) {
  #bsi-panel { width: min(380px, calc(100vw - 3rem)); }
}

/* Phones */
@media (max-width: 440px) {
  #bsi-panel {
    width: calc(100vw - 2rem);
    right: -0.5rem;
    max-height: calc(100vh - var(--widget-top) - var(--panel-gap) - 2rem);
    max-height: calc(100dvh - var(--widget-top) - var(--panel-gap) - 2rem);
  }
}