/* Hi-Tunes Studio Assistant widget. Scoped under .hts-root; matches site tokens (ink/paper/gold). */
.hts-root {
  --hts-ink: #0c0c0e; --hts-ink-2: #17171b; --hts-paper: #f4efe4; --hts-gold: #c8a05a;
  --hts-line: rgba(245, 241, 232, 0.12); --hts-muted: rgba(244, 239, 228, 0.66);
  --hts-offset: 0px; --hts-gap: 16px;
  position: fixed; right: var(--hts-gap); bottom: calc(var(--hts-gap) + var(--hts-offset) + env(safe-area-inset-bottom, 0px));
  z-index: 55; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.45;
  color: var(--hts-paper); transition: bottom 0.3s ease; -webkit-font-smoothing: antialiased;
}
.hts-root *, .hts-root *::before, .hts-root *::after { box-sizing: border-box; }
/* isolate from site-wide element styles */
.hts-root p, .hts-root h3, .hts-root form, .hts-root label { margin: 0; letter-spacing: normal; text-transform: none; }
.hts-root button, .hts-root input, .hts-root select, .hts-root textarea { margin: 0; letter-spacing: normal; text-transform: none; box-shadow: none; }
.hts-root [hidden] { display: none !important; }
.hts-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hts-launcher {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--hts-line); border-radius: 999px; background: var(--hts-paper); color: var(--hts-ink);
  font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.hts-launcher:hover { background: #fff; }
.hts-launcher:focus-visible, .hts-root button:focus-visible, .hts-root input:focus-visible, .hts-root select:focus-visible, .hts-root textarea:focus-visible {
  outline: 2px solid var(--hts-gold); outline-offset: 2px;
}
.hts-launcher-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hts-gold); }

.hts-panel {
  position: absolute; right: 0; bottom: 64px; width: 380px; height: min(620px, calc(100vh - 140px - var(--hts-offset)));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--hts-ink); border: 1px solid var(--hts-line); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.hts-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--hts-line); }
.hts-head strong { display: block; font-size: 15px; }
.hts-sub { display: block; font-size: 12px; color: var(--hts-muted); }
.hts-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--hts-paper); font-size: 26px; line-height: 1; cursor: pointer; }
.hts-close:hover { background: var(--hts-ink-2); }

.hts-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.hts-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.hts-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.hts-bot { align-self: flex-start; background: var(--hts-ink-2); border: 1px solid var(--hts-line); border-bottom-left-radius: 4px; }
.hts-me { align-self: flex-end; background: var(--hts-paper); color: var(--hts-ink); border-bottom-right-radius: 4px; }
.hts-typing { color: var(--hts-muted); }
.hts-msg a { color: var(--hts-gold); text-decoration: underline; text-underline-offset: 2px; }
.hts-input { display: flex; gap: 8px; padding: 12px 12px 8px; border-top: 1px solid var(--hts-line); }
.hts-input input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--hts-line); border-radius: 999px; background: var(--hts-ink-2); color: var(--hts-paper); font: inherit; font-size: 16px; }
.hts-send { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--hts-gold); color: var(--hts-ink); font: inherit; font-weight: 600; cursor: pointer; }
.hts-foot { padding: 0 12px 12px; }
.hts-cta { width: 100%; min-height: 44px; border: 1px solid var(--hts-paper); border-radius: 999px; background: transparent; color: var(--hts-paper); font: inherit; font-weight: 600; cursor: pointer; }
.hts-cta:hover { background: var(--hts-paper); color: var(--hts-ink); }
.hts-cta:disabled { opacity: 0.6; cursor: progress; }
.hts-note { margin: 8px 4px 0; font-size: 12px; color: var(--hts-muted); text-align: center; }

.hts-form-view { overflow-y: auto; }
.hts-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.hts-banner { padding: 10px 12px; border: 1px solid rgba(200, 160, 90, 0.5); border-radius: 10px; background: rgba(200, 160, 90, 0.12); font-size: 13px; }
.hts-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hts-field label { font-size: 13px; color: var(--hts-muted); }
.hts-field small { font-size: 12px; color: var(--hts-muted); }
.hts-field input, .hts-field select, .hts-field textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--hts-line); border-radius: 10px;
  background: var(--hts-ink-2); color: var(--hts-paper); font: inherit; font-size: 16px; color-scheme: dark;
}
.hts-field textarea { resize: vertical; }
.hts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hts-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.hts-consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--hts-gold); flex: none; }
.hts-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.hts-error { margin: 0; min-height: 1em; color: #ff9b8f; font-size: 13px; }
.hts-link { align-self: center; border: 0; background: none; color: var(--hts-muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px; }
.hts-done { padding: 24px 18px; display: flex; flex-direction: column; gap: 10px; }
.hts-done h3 { margin: 0; font-size: 18px; }
.hts-done p { margin: 0; color: var(--hts-muted); }
.hts-ref { font-size: 12px; word-break: break-all; }

/* Mobile and tablet (site's sticky action bar is lg:hidden, i.e. < 1024px) */
@media (max-width: 1023.98px) {
  .hts-root { --hts-gap: 12px; }
  .hts-launcher { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .hts-panel {
    position: fixed; left: 8px; right: 8px; width: auto;
    bottom: calc(8px + var(--hts-offset) + env(safe-area-inset-bottom, 0px));
    height: min(640px, calc(100vh - 88px - var(--hts-offset)));
    height: min(640px, calc(100dvh - 88px - var(--hts-offset)));
  }
  .hts-open .hts-launcher { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hts-root { transition: none; } }

/* Phone keyboard open (set by the widget from visualViewport): keep the input and Send button directly above the keyboard */
.hts-kb .hts-foot { display: none; }
.hts-kb .hts-input { padding-bottom: 12px; }