/* Scotland Taxi template: Hamish sizing, Saltire styling, the close control and
   the "bring Hamish back" tab. Loaded after hamish.css so these win on specificity. */

.hamish-mascot {
  width: clamp(150px, 14vw, 200px);
  height: clamp(210px, 19.6vw, 280px);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Sit the bubble above his horns rather than on them: the package anchors it
   at 75% of the mascot box, which lands the tail across his head. */
.hamish-mascot__bubble {
  bottom: calc(100% + 6px);
  border-color: #dce6f0;
  color: #0b2140;
  box-shadow: 0 18px 50px rgba(11, 33, 64, .24);
}

.hamish-mascot__bubble::after {
  border-color: #dce6f0;
}

.hamish-mascot__message {
  font-weight: 600;
  font-size: .95rem;
}

.hamish-mascot__cta {
  border-color: #c7d3e4;
  color: #0b2140;
}

.hamish-mascot__cta.is-primary {
  background: #0068c4;
  border-color: #0068c4;
  color: #fff;
}

.hamish-mascot__cta.is-primary:hover {
  background: #00509e;
  filter: none;
}

.hamish-mascot__character:focus-visible,
.hamish-mascot__cta:focus-visible,
.st-hamish-close:focus-visible,
.st-hamish-return:focus-visible {
  outline: 3px solid #0068c4;
  outline-offset: 3px;
}

/* Mute and close controls. They sit by his horns, stacked. */
.st-hamish-controls {
  position: absolute;
  top: 22%;
  right: 4%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  transition: opacity .15s;
}

.st-hamish-close,
.st-hamish-voice {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #dce6f0;
  border-radius: 50%;
  background: #fff;
  color: #586a83;
  font: 600 18px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(11, 33, 64, .18);
  opacity: .92;
  transition: color .15s, border-color .15s, opacity .15s;
}

.st-hamish-voice svg {
  width: 16px;
  height: 16px;
}

.st-hamish-voice[aria-pressed="true"] .st-hamish-voice__off,
.st-hamish-voice[aria-pressed="false"] .st-hamish-voice__on {
  display: none;
}

.st-hamish-voice[aria-pressed="true"] {
  color: #0068c4;
}

.st-hamish-voice[hidden] {
  display: none;
}

.st-hamish-close:hover,
.st-hamish-voice:hover {
  color: #0b2140;
  border-color: #0068c4;
  opacity: 1;
}

.hamish-mascot[data-state="walk"] .st-hamish-controls,
.hamish-mascot[data-state="exit"] .st-hamish-controls {
  opacity: 0;
  pointer-events: none;
}

/* When Hamish stands to the right of the booking form, his bubble opens leftwards
   so it never runs off the screen edge; his mirrored pose faces the form. */
.hamish-mascot[data-form-side="right"] .hamish-mascot__bubble {
  right: auto;
  left: 0;
  border-radius: 20px 20px 20px 6px;
  transform-origin: 12% 100%;
}

.hamish-mascot[data-form-side="right"] .hamish-mascot__bubble::after {
  right: auto;
  left: 14px;
  border-right: 0;
  border-left: 2px solid #dce6f0;
  transform: rotate(-45deg);
}

/* The "Ask me" pill on Hamish, shown while his bubble is closed. */
.st-hamish-askpill {
  position: absolute;
  left: 50%;
  bottom: 2px;
  z-index: 3;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid #0068c4;
  border-radius: 999px;
  background: #0068c4;
  color: #fff;
  font: 600 13px/1 Inter, system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 20px rgba(11, 33, 64, .28);
  transition: background .15s, transform .15s;
}

.st-hamish-askpill svg {
  width: 15px;
  height: 15px;
}

.st-hamish-askpill:hover {
  background: #00509e;
  transform: translateX(-50%) translateY(-1px);
}

.st-hamish-askpill:focus-visible {
  outline: 3px solid #0068c4;
  outline-offset: 3px;
}

.st-hamish-askpill[hidden],
.hamish-mascot[data-state="walk"] .st-hamish-askpill,
.hamish-mascot[data-state="exit"] .st-hamish-askpill {
  display: none;
}

.hamish-mascot[data-compact="true"] .st-hamish-askpill {
  min-height: 26px;
  padding: 4px 9px;
  font-size: 11.5px;
  gap: 4px;
}

.hamish-mascot[data-compact="true"] .st-hamish-askpill svg {
  width: 12px;
  height: 12px;
}

/* "Click me for the menu": a wee tag over his head until the visitor has opened his menu once. */
.st-hamish-menutag {
  position: absolute;
  left: 50%;
  top: 4%;
  z-index: 3;
  transform: translateX(-50%);
  padding: 7px 12px;
  border: 1px solid #dce6f0;
  border-radius: 12px;
  background: #fff;
  color: #0b2140;
  font: 600 12.5px/1.2 Inter, system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 20px rgba(11, 33, 64, .18);
  animation: st-hamish-menutag-bob 2.4s ease-in-out infinite;
}

.st-hamish-menutag::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-right: 1px solid #dce6f0;
  border-bottom: 1px solid #dce6f0;
  transform: translateX(-50%) rotate(45deg);
}

.st-hamish-menutag:hover { color: #0068c4; }

.st-hamish-menutag:focus-visible {
  outline: 3px solid #0068c4;
  outline-offset: 3px;
}

.st-hamish-menutag[hidden],
.hamish-mascot[data-state="walk"] .st-hamish-menutag,
.hamish-mascot[data-state="exit"] .st-hamish-menutag {
  display: none;
}

.hamish-mascot[data-compact="true"] .st-hamish-menutag {
  padding: 4px 8px;
  font-size: 11px;
}

@keyframes st-hamish-menutag-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .st-hamish-menutag { animation: none; }
}

/* Link-style "Ask Hamish a question" inside tips and guide hints. */
.st-hamish-asklink {
  flex-basis: 100%;
  margin-top: 2px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #0068c4;
  font: 600 13px/1.3 Inter, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

.st-hamish-asklink:hover {
  text-decoration: underline;
}

.st-hamish-asklink:focus-visible {
  outline: 3px solid #0068c4;
  outline-offset: 2px;
  border-radius: 4px;
}

.hamish-mascot[data-compact="true"] .st-hamish-asklink {
  font-size: 12px;
}

/* Quick replies from the assistant, offered as buttons in his bubble. */
.st-hamish-replies {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.st-hamish-reply {
  padding: 6px 11px;
  border: 1px solid #bfdaf5;
  border-radius: 999px;
  background: #eef6fd;
  color: #0b2140;
  font: 600 13px/1.25 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.st-hamish-reply:hover {
  background: #dcecfb;
}

.st-hamish-reply:focus-visible {
  outline: 3px solid #0068c4;
  outline-offset: 2px;
}

.hamish-mascot[data-compact="true"] .st-hamish-reply {
  font-size: 12px;
}

/* The menu that opens when Hamish is pressed. */
.st-hamish-menu {
  overscroll-behavior: contain;
  padding-right: 2px;
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.st-hamish-menu__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #dce6f0;
  border-radius: 12px;
  background: #f2f6fc;
  color: #0b2140;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.st-hamish-menu__item:hover {
  border-color: #0068c4;
  background: #fff;
}

.st-hamish-menu__item:focus-visible {
  outline: 3px solid #0068c4;
  outline-offset: 2px;
}

.st-hamish-menu__label {
  font-size: 14px;
  font-weight: 700;
}

.st-hamish-menu__hint {
  font-size: 12px;
  font-weight: 500;
  color: #586a83;
}

.hamish-mascot[data-compact="true"] .st-hamish-menu__item {
  padding: 7px 10px;
}

.hamish-mascot[data-compact="true"] .st-hamish-menu__label {
  font-size: 13px;
}

.hamish-mascot[data-compact="true"] .st-hamish-menu__hint {
  font-size: 11px;
}

/* The question box inside Hamish's bubble. */
.st-hamish-ask {
  flex-basis: 100%;
  margin-top: 4px;
}

.st-hamish-ask__label {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #586a83;
}

.st-hamish-ask__row {
  display: flex;
  gap: 6px;
}

.st-hamish-ask__input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #c7d3e4;
  border-radius: 10px;
  background: #f2f6fc;
  color: #0b2140;
  font: 500 14px/1.3 Inter, system-ui, sans-serif;
}

.st-hamish-ask__input:focus {
  outline: none;
  border-color: #0068c4;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 104, 196, .18);
}

.st-hamish-ask__send {
  width: 42px;
  min-height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #0068c4;
  color: #fff;
  cursor: pointer;
}

.st-hamish-ask__send svg {
  width: 18px;
  height: 18px;
}

.st-hamish-ask__send:hover {
  background: #00509e;
}

.st-hamish-ask__send:focus-visible {
  outline: 3px solid #0068c4;
  outline-offset: 3px;
}

/* The tab that brings him back once a visitor has closed him. Sits above the
   chat widget's own launcher, which returns while Hamish is away. */
.st-hamish-return {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 55;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #0b2140 var(--st-hamish-face) center / 118% auto no-repeat;
  box-shadow: 0 10px 24px rgba(11, 33, 64, .35);
  cursor: pointer;
  transition: transform .18s ease;
}

.st-hamish-return:hover {
  transform: translateY(-2px) scale(1.04);
}

.st-hamish-return[hidden] {
  display: none;
}

.st-hamish-return::after {
  content: "Bring Hamish back";
  position: absolute;
  right: 66px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 7px;
  background: #0b2140;
  color: #fff;
  font: 600 12.5px/1.2 Inter, system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.st-hamish-return:hover::after,
.st-hamish-return:focus-visible::after {
  opacity: 1;
}

/* While Hamish is on screen he is the chat launcher, so the widget's own button
   stays out of the way. It comes straight back when he is closed. */
body.st-hamish-on .cz-chat-launcher {
  display: none !important;
}

/* The words of a bubble appear at talking pace; screen readers get them whole. */
.st-hamish-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The assistant's panel as Hamish's own: docked beside him on wide screens,
   with his face, name and the site's colours. */
.st-hamish-chat-face {
  object-fit: cover;
  background: #0b2140;
}

@media (min-width: 900px) {
  body.st-hamish-chat .cz-chat-panel {
    right: 232px !important;
    left: auto !important;
    bottom: 22px !important;
    border-radius: 18px !important;
    border: 1px solid #dce6f0 !important;
    box-shadow: 0 30px 70px -30px rgba(11, 33, 64, .55) !important;
  }

  /* Tail pointing at Hamish, who stands to the right of the panel. */
  body.st-hamish-chat .cz-chat-panel::after {
    content: "";
    position: absolute;
    right: -11px;
    bottom: 96px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-right: 1px solid #dce6f0;
    border-top: 1px solid #dce6f0;
    transform: rotate(45deg);
  }
}

body[data-hamish-chat] .cz-chat-panel,
.cz-chat-panel[data-hamish="true"] {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cz-chat-panel[data-hamish="true"] .cz-chat-head {
  background: #0b2140 !important;
}

.cz-chat-panel[data-hamish="true"] .cz-head-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
}

.cz-chat-panel[data-hamish="true"] .cz-head-name {
  font-family: Fraunces, Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.cz-chat-panel[data-hamish="true"] .cz-chat-send,
.cz-chat-panel[data-hamish="true"] .cz-chat-msg.user {
  background: #0068c4 !important;
  color: #fff !important;
}

.cz-chat-panel[data-hamish="true"] .cz-chat-msg.bot {
  border: 1px solid #dce6f0 !important;
  background: #fff !important;
  color: #0b2140 !important;
}

/* No room to stand beside the panel on a phone: he steps out of the way. */
@media (max-width: 899px) {
  body.st-hamish-chat .hamish-mascot {
    display: none !important;
  }
}

/* Compact guide mode on narrow screens: a wee Hamish tucked in at the left,
   level with the section he is pointing at, bubble opening to his right. */
.hamish-mascot[data-compact="true"] {
  width: 78px;
  height: 110px;
}

.hamish-mascot[data-compact="true"] .hamish-mascot__bubble {
  position: absolute;
  left: calc(100% + 8px);
  right: auto;
  top: auto;
  bottom: 6px;
  box-sizing: border-box;
  width: min(300px, calc(100vw - 78px - 32px));
  min-width: 0;
  padding: 11px 13px;
  border-radius: 14px 14px 14px 4px;
  transform-origin: 0 100%;
}

.hamish-mascot[data-compact="true"] .hamish-mascot__bubble::after {
  right: auto;
  left: -11px;
  bottom: 10px;
  width: 16px;
  height: 16px;
  border-right: 0;
  border-bottom: 2px solid #dce6f0;
  border-left: 2px solid #dce6f0;
  transform: rotate(45deg);
}

/* Phones, while guiding a booking: a strip docked to the top of the screen with
   a wee Hamish on the left and his hint beside him, so nothing sits over the
   form. The strip is only there while a hint shows. */
.hamish-mascot[data-dock="top"] {
  width: 100vw;
  height: auto;
  min-height: 0;
  contain: none;
}

.hamish-mascot[data-dock="top"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 33, 64, .94);
  box-shadow: 0 10px 30px rgba(11, 33, 64, .35);
  pointer-events: none;
}

.hamish-mascot[data-dock="top"] .hamish-mascot__character {
  position: absolute;
  inset: auto auto 6px 4px;
  width: 64px;
  height: 84px;
  border-radius: 12px;
  transform: none !important;
}

.hamish-mascot[data-dock="top"] .hamish-mascot__art {
  inset: -14% -14% -6%;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35));
}

.hamish-mascot[data-dock="top"][data-compact="true"] .hamish-mascot__bubble {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: auto;
  min-width: 0;
  margin: 8px 10px 8px 74px;
  padding: 10px 12px;
  border-radius: 12px;
  animation: none;
  transform: none;
}

.hamish-mascot[data-dock="top"] .hamish-mascot__bubble::after {
  display: none;
}

.hamish-mascot[data-dock="top"] .st-hamish-controls,
.hamish-mascot[data-dock="top"] .st-hamish-askpill {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hamish-mascot[data-dock="top"] .hamish-mascot__bubble {
    animation: hamish-pop .22s cubic-bezier(.2, .9, .3, 1.2) both !important;
  }
}

/* Between hints on a phone the strip folds down to just his face in the top
   corner (scotlandtaxi-hamish.js collapseDock), so the form stays clear. */
.hamish-mascot[data-dock="top"][data-dock-collapsed="true"] {
  width: 80px;
  height: 96px;
}

.hamish-mascot[data-dock="top"][data-dock-collapsed="true"]::before {
  border-radius: 0 0 18px 0;
}

.hamish-mascot[data-dock="top"][data-dock-collapsed="true"] .hamish-mascot__bubble {
  display: none;
}

/* Phones ([data-phone], set from the same media query the script uses): a
   small Hamish in the corner with his bubble above him, never wider or taller
   than the screen, and the mute and close buttons beside him at thumb size.
   The "Ask me" pill goes: tapping him opens the menu, which has the question
   box one tap away, and the pill was one more thing sitting on the form. */
.hamish-mascot[data-phone="true"]:not([data-dock]) {
  width: 92px;
  height: 132px;
}

.hamish-mascot[data-phone="true"]:not([data-dock]) .hamish-mascot__bubble {
  position: absolute;
  left: auto;
  right: 0;
  top: auto;
  bottom: calc(100% + 6px);
  box-sizing: border-box;
  width: min(340px, calc(100vw - 24px));
  min-width: 0;
  max-height: calc(100vh - 170px);
  max-height: calc(100dvh - 170px);
  overflow-y: auto;
  padding: 12px 13px;
  border-radius: 16px 16px 6px 16px;
  transform-origin: 90% 100%;
}

.hamish-mascot[data-phone="true"]:not([data-dock]) .hamish-mascot__bubble::after {
  right: 24px;
}

.hamish-mascot[data-phone="true"] .hamish-mascot__message {
  font-size: 13.5px;
  line-height: 1.4;
}

.hamish-mascot[data-phone="true"]:not([data-dock]) .st-hamish-controls {
  top: 0;
  right: auto;
  left: -42px;
  gap: 8px;
}

.hamish-mascot[data-phone="true"]:not([data-dock]) .st-hamish-close,
.hamish-mascot[data-phone="true"]:not([data-dock]) .st-hamish-voice {
  width: 34px;
  height: 34px;
  font-size: 20px;
}

.hamish-mascot[data-phone="true"]:not([data-dock]) .st-hamish-voice svg {
  width: 17px;
  height: 17px;
}

.hamish-mascot[data-phone="true"] .st-hamish-askpill {
  display: none;
}

.hamish-mascot[data-compact="true"] .hamish-mascot__message {
  font-size: 13px;
  line-height: 1.4;
  padding-right: 20px;
}

.hamish-mascot[data-compact="true"] .hamish-mascot__actions {
  margin-top: 9px;
  gap: 6px;
}

.hamish-mascot[data-compact="true"] .hamish-mascot__cta {
  min-height: 34px;
  padding: 5px 11px;
  font-size: 12.5px;
}

.hamish-mascot[data-compact="true"] .hamish-mascot__close {
  top: 3px;
  right: 3px;
  width: 26px;
  height: 26px;
  font-size: 20px;
}

.hamish-mascot[data-compact="true"] .st-hamish-controls {
  top: 4%;
  right: -6px;
  gap: 4px;
}

.hamish-mascot[data-compact="true"] .st-hamish-close,
.hamish-mascot[data-compact="true"] .st-hamish-voice {
  width: 22px;
  height: 22px;
  font-size: 14px;
}

.hamish-mascot[data-compact="true"] .st-hamish-voice svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 639px) {
  .hamish-mascot {
    width: 124px;
    height: 178px;
  }

  /* A smaller bubble on phones: it is the whole width of the screen, so the
     desktop type and padding leave little room for the page underneath. */
  .hamish-mascot__bubble {
    padding: 13px 14px;
    border-radius: 16px 16px 6px 16px;
  }

  .hamish-mascot__message {
    font-size: 13.5px;
    line-height: 1.4;
  }

  .hamish-mascot__actions {
    margin-top: 10px;
    gap: 6px;
  }

  .hamish-mascot__cta {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
  }

  .st-hamish-ask__input,
  .st-hamish-ask__send {
    min-height: 38px;
  }

  .st-hamish-ask__send {
    width: 38px;
  }

  /* hamish.css makes the bubble position:fixed on phones, but the mascot root
     carries a transform, so "fixed" resolves against the 124px-wide root and the
     bubble collapses. Keep it absolute, anchored to Hamish's right edge, and let
     it grow leftwards across the screen instead. */
  .hamish-mascot:not([data-compact="true"]) .hamish-mascot__bubble {
    position: absolute;
    left: auto;
    right: 0;
    bottom: calc(100% + 4px);
    width: min(320px, calc(100vw - 24px));
    min-width: 0;
  }

  .hamish-mascot:not([data-compact="true"]) .hamish-mascot__bubble::after {
    right: 22px;
  }

  .st-hamish-controls {
    top: 18%;
    right: 0;
  }

  .st-hamish-close,
  .st-hamish-voice {
    width: 28px;
    height: 28px;
  }

  .st-hamish-return {
    right: 12px;
    bottom: 78px;
    width: 50px;
    height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-hamish-return,
  .st-hamish-close {
    transition: none;
  }
}