/* Bolt Assistant widget. Everything is scoped under .bolt-widget so it doesn't clash with the theme.
   Change the colors by overriding these variables in Appearance > Customize > Additional CSS. */
.bolt-widget {
  --bolt-bg: #eef1f4;
  --bolt-panel: #ffffff;
  --bolt-ink: #18212b;
  --bolt-soft: #5a6672;
  --bolt-line: #d3dae0;
  --bolt-accent: #0d8178;
  --bolt-accent-ink: #ffffff;
  --bolt-chip: #dcefed;
  --bolt-chip-ink: #0b6159;
  --bolt-spot: #ffffff;
  --bolt-glow: #48e6d4;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 20px;
  align-items: stretch;
  max-width: 980px;
  margin: 24px auto;
  padding: 18px;
  border-radius: 22px;
  background: var(--bolt-bg);
  color: var(--bolt-ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  text-align: left;
}
.bolt-widget *, .bolt-widget *::before, .bolt-widget *::after { box-sizing: border-box; }
.bolt-widget [hidden] { display: none !important; }

.bolt-stage {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  border-radius: 16px;
  background: radial-gradient(ellipse 60% 55% at 50% 38%, var(--bolt-spot), transparent 72%);
}
.bolt-bust { width: 100%; max-width: 360px; aspect-ratio: 400 / 480; position: relative; }
.bolt-bust canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.bolt-panel {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--bolt-panel); border: 1px solid var(--bolt-line); border-radius: 16px; padding: 16px;
}
.bolt-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--bolt-bg); border-radius: 12px; }
.bolt-widget .bolt-tab {
  font: inherit; font-weight: 600; font-size: 14px; color: var(--bolt-soft); background: transparent; border: 0; border-radius: 9px;
  padding: 7px 8px; cursor: pointer; display: grid; gap: 0; text-align: center; line-height: 1.3; text-transform: none; letter-spacing: 0; box-shadow: none;
}
.bolt-widget .bolt-tab small { font-weight: 400; font-size: 12px; }
.bolt-widget .bolt-tab[aria-selected="true"] { background: var(--bolt-panel); color: var(--bolt-ink); box-shadow: 0 1px 3px rgba(10, 20, 30, 0.15); }

.bolt-log { height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.bolt-msg { max-width: 90%; padding: 9px 12px; border-radius: 14px; font-size: 14.5px; overflow-wrap: anywhere; }
.bolt-you { align-self: flex-end; background: var(--bolt-accent); color: var(--bolt-accent-ink); border-bottom-right-radius: 4px; }
.bolt-bot { align-self: flex-start; background: var(--bolt-bg); color: var(--bolt-ink); border-bottom-left-radius: 4px; }
.bolt-answer { white-space: pre-wrap; }
.bolt-wait { color: var(--bolt-soft); font-style: italic; }
.bolt-tag { display: none; }

.bolt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bolt-line); }
.bolt-widget .bolt-chip {
  font: inherit; font-size: 12.5px; line-height: 1.4; color: var(--bolt-chip-ink); background: var(--bolt-chip);
  border: 0; border-radius: 6px; padding: 3px 8px; text-decoration: none; cursor: default;
}
.bolt-widget a.bolt-chip, .bolt-widget .bolt-chip-btn { cursor: pointer; }
.bolt-widget a.bolt-chip:hover, .bolt-widget .bolt-chip-btn:hover { text-decoration: underline; }

.bolt-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.bolt-widget .bolt-suggest button {
  font: inherit; font-size: 13px; line-height: 1.3; color: var(--bolt-ink); background: var(--bolt-panel);
  border: 1px solid var(--bolt-line); border-radius: 999px; padding: 5px 11px; cursor: pointer; text-align: left; text-transform: none; letter-spacing: 0;
}
.bolt-widget .bolt-suggest button:hover { border-color: var(--bolt-accent); }

.bolt-form { display: flex; gap: 8px; margin: 0; }
.bolt-widget input[type="text"], .bolt-widget input[type="email"], .bolt-widget input[type="tel"], .bolt-widget textarea {
  width: 100%; min-width: 0; font: inherit; font-size: 15px; color: var(--bolt-ink); background: var(--bolt-panel);
  border: 1px solid var(--bolt-line); border-radius: 10px; padding: 9px 11px; margin: 0; box-shadow: none; height: auto;
}
.bolt-form input { flex: 1; }
.bolt-widget input:focus, .bolt-widget textarea:focus { border-color: var(--bolt-accent); outline: none; }
.bolt-widget .bolt-send {
  font: inherit; font-weight: 600; font-size: 14px; color: var(--bolt-accent-ink); background: var(--bolt-accent);
  border: 0; border-radius: 10px; padding: 9px 18px; cursor: pointer; text-transform: none; letter-spacing: 0; line-height: 1.2;
}
.bolt-widget .bolt-send:disabled { opacity: 0.6; cursor: default; }
.bolt-widget button:focus-visible, .bolt-widget a:focus-visible { outline: 2px solid var(--bolt-accent); outline-offset: 2px; }

.bolt-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bolt-widget .bolt-link {
  font: inherit; font-size: 13px; color: var(--bolt-soft); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-transform: none; letter-spacing: 0; box-shadow: none;
}
.bolt-widget .bolt-link:hover { color: var(--bolt-accent); }

.bolt-lead { display: grid; gap: 10px; border-top: 1px solid var(--bolt-line); padding-top: 12px; margin: 0; }
.bolt-lead-title { font-weight: 600; margin: 0; }
.bolt-lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bolt-lead label { display: grid; gap: 4px; font-size: 13px; color: var(--bolt-soft); margin: 0; }
.bolt-lead-note, .bolt-lead-msg { font-size: 12.5px; color: var(--bolt-soft); margin: 0; }
.bolt-lead-msg:empty { display: none; }
.bolt-lead-actions { display: flex; align-items: center; gap: 14px; }
.bolt-widget .bolt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@container (max-width: 640px) {
  .bolt-stage { grid-column: 1 / -1; }
  .bolt-bust { max-width: 200px; }
  .bolt-panel { grid-column: 1 / -1; }
  .bolt-log { height: 300px; }
  .bolt-lead-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bolt-widget { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .bolt-bust { max-width: 200px; }
}