/* Harrison Asphalt chatbot — thread UI.
   Reuses the site's existing .chat/.chatpanel shell on the homepage and
   provides the whole widget on subpages. Brand blue primary, gold accents. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.chatlog{display:flex;flex-direction:column;gap:9px;max-height:min(46vh,340px);
  overflow-y:auto;padding:2px 2px 6px;scroll-behavior:smooth}
.cmsg{max-width:85%;padding:10px 13px;font-size:14px;line-height:1.5;
  border:1px solid rgba(31,36,38,.12);animation:cmsgIn .25s cubic-bezier(.16,1,.3,1) both}
.cmsg.bot{align-self:flex-start;background:#fff;color:#1F2426;
  clip-path:polygon(0 0,100% 0,100% 100%,9px 100%,0 calc(100% - 9px))}
.cmsg.me{align-self:flex-end;background:var(--asphalt,#4F6575);color:#fff;border-color:transparent;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)}
.cmsg a{color:var(--accent-ink,#44596B);font-weight:700}
.cmsg.me a{color:#fff}
@keyframes cmsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.cmsg.typing{display:flex;gap:4px;align-items:center;padding:12px 14px}
.cmsg.typing span{width:6px;height:6px;border-radius:50%;background:rgba(31,36,38,.42);
  animation:cdot 1s infinite ease-in-out}
.cmsg.typing span:nth-child(2){animation-delay:.15s}
.cmsg.typing span:nth-child(3){animation-delay:.3s}
@keyframes cdot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.chatform{display:flex;gap:8px;margin-top:12px}
.chatform input{flex:1;min-width:0;font-family:inherit;font-size:14px;padding:11px 12px;
  border:1px solid rgba(31,36,38,.22);background:#fff;color:#1F2426}
.chatform input:focus{outline:2px solid var(--hi,#D6A52F);outline-offset:1px;border-color:transparent}
.chatform button{flex:none;width:44px;border:0;cursor:pointer;background:var(--hi,#D6A52F);
  color:#1F2426;display:grid;place-items:center;transition:background .25s}
.chatform button:hover{background:var(--hi-d,#B5881F)}
.chatform button svg{width:18px;height:18px;fill:currentColor}

/* subpage widget (the homepage already ships the shell) */
.chat{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:125;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.chatlauncher{display:inline-flex;align-items:center;gap:9px;background:var(--hi,#D6A52F);
  color:#1F2426;font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:.04em;
  padding:14px 20px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.4);transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s}
.chatlauncher:hover{background:var(--hi-d,#B5881F);transform:translateY(-2px)}
.chatlauncher svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.chatpanel{width:min(360px,88vw);background:#ECEEEF;border:1px solid rgba(31,36,38,.16);
  box-shadow:0 26px 70px rgba(0,0,0,.4);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));
  animation:chatin .28s cubic-bezier(.16,1,.3,1)}
.chatpanel[hidden]{display:none}
@keyframes chatin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.chathead{display:flex;align-items:center;gap:11px;background:linear-gradient(140deg,#44596B,#2C3C47);
  color:#fff;padding:14px 16px}
.chathead .chatdot{width:9px;height:9px;border-radius:50%;background:#7CB342;flex:none;
  box-shadow:0 0 0 3px rgba(124,179,66,.25)}
.chathead>div{flex:1;min-width:0}
.chathead b{font-family:var(--disp,inherit);font-size:17px;font-weight:800;letter-spacing:.02em;
  display:block;line-height:1}
.chathead span{font-size:11.5px;color:rgba(255,255,255,.72)}
.chatx{margin-left:auto;background:none;border:0;color:rgba(255,255,255,.75);font-size:22px;
  line-height:1;cursor:pointer;padding:0 2px}
.chatx:hover{color:#fff}
.chatbody{padding:14px 16px 16px}
.chatnote{margin:10px 0 0;font-size:11.5px;color:rgba(31,36,38,.6);line-height:1.45}
.chatnote a{color:var(--accent-ink,#44596B);font-weight:700}

@media(max-width:760px){
  .chatpanel{width:min(340px,92vw)}
  .chatlog{max-height:42vh}
  /* iOS Safari zooms the page when a focused input is under 16px, and the
     customer then has to pinch back out to keep typing. 16px only at phone
     widths, so the desktop panel keeps its tighter 14px. */
  .chatform input{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .cmsg,.chatpanel{animation:none}
  .cmsg.typing span{animation:none}
  .chatlauncher:hover{transform:none}
}