/* The ICT Hub AI front door — chat widget.
   Self-contained palette/fonts (matches the site) so it renders the same on the
   marketing pages, the secure-fibre page and the signup flow. No framework. */
.ai-chat, .ai-chat * { box-sizing: border-box; }
.ai-chat {
  --c-ink:#13283C; --c-blue:#2C5AA0; --c-orange:#FF7043; --c-orange-hot:#F25C2A;
  --c-paper:#F5F8FA; --c-line:#DCE3EA; --c-muted:#54677A; --c-white:#fff;
  --c-font:"Instrument Sans","Segoe UI",sans-serif;
  --c-display:"Bricolage Grotesque","Segoe UI",sans-serif;
  position: fixed; z-index: 2147483000; bottom: 0; right: 0;
  font-family: var(--c-font);
}

/* Launcher */
.ai-launcher {
  position: fixed; right: clamp(1rem,3vw,1.75rem); bottom: clamp(1rem,3vw,1.75rem);
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--c-orange); color: #fff; border: none; cursor: pointer;
  font-family: var(--c-font); font-size: .95rem; font-weight: 600;
  padding: .8rem 1.15rem; border-radius: 999px;
  box-shadow: 0 12px 30px rgba(19,40,60,.28);
  transition: background .15s ease, transform .15s ease;
}
.ai-launcher:hover { background: var(--c-orange-hot); transform: translateY(-1px); }
.ai-launcher svg { width: 20px; height: 20px; flex: none; }
.ai-launcher[hidden] { display: none; }

/* Panel */
.ai-panel {
  position: fixed; right: clamp(1rem,3vw,1.75rem); bottom: clamp(1rem,3vw,1.75rem);
  width: min(380px, calc(100vw - 2rem)); height: min(600px, calc(100vh - 2rem));
  display: none; flex-direction: column; overflow: hidden;
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(19,40,60,.32);
}
.ai-panel.open { display: flex; }

.ai-head {
  background: var(--c-ink); color: #fff; padding: .95rem 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.ai-head .ai-title { font-family: var(--c-display); font-weight: 800; font-size: 1.02rem; }
.ai-head .ai-sub { font-size: .74rem; color: #9FB2C4; margin-top: .1rem; }
.ai-close {
  background: transparent; border: none; color: #cdd8e3; cursor: pointer;
  font-size: 1.5rem; line-height: 1; padding: .1rem .35rem; border-radius: 6px;
}
.ai-close:hover { color: #fff; }

.ai-disclosure {
  background: #EAF1F8; color: var(--c-ink); font-size: .8rem; font-weight: 600;
  padding: .6rem 1.1rem; border-bottom: 1px solid var(--c-line);
}

.ai-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.ai-msg { max-width: 85%; padding: .6rem .85rem; border-radius: 12px; font-size: .92rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.ai-msg.user { align-self: flex-end; background: var(--c-blue); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.bot  { align-self: flex-start; background: var(--c-paper); color: var(--c-ink); border: 1px solid var(--c-line); border-bottom-left-radius: 4px; }
.ai-msg.error { align-self: stretch; max-width: 100%; background: #FFF6E0; color: #9A6700; border-color: #F3E3B5; text-align: center; }

.ai-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: .7rem .85rem; }
.ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: #B7C4D1; animation: ai-bounce 1s infinite ease-in-out; }
.ai-typing span:nth-child(2){ animation-delay: .15s; } .ai-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes ai-bounce { 0%,80%,100%{ transform: translateY(0); opacity:.5 } 40%{ transform: translateY(-4px); opacity:1 } }

.ai-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .6rem; }
.ai-chip {
  border: 1px solid var(--c-line); background: #fff; color: var(--c-blue);
  border-radius: 999px; padding: .4rem .75rem; font-size: .82rem; font-weight: 600;
  cursor: pointer; font-family: var(--c-font);
}
.ai-chip:hover { border-color: var(--c-blue); background: var(--c-paper); }

.ai-input-row { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem; border-top: 1px solid var(--c-line); }
.ai-input {
  flex: 1; resize: none; border: 1.5px solid var(--c-line); border-radius: 10px;
  padding: .6rem .7rem; font-family: var(--c-font); font-size: .92rem; line-height: 1.4;
  max-height: 120px;
}
.ai-input:focus { outline: none; border-color: var(--c-blue); }
.ai-send {
  background: var(--c-orange); color: #fff; border: none; border-radius: 10px;
  width: 42px; height: 42px; flex: none; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center;
}
.ai-send:hover { background: var(--c-orange-hot); }
.ai-send:disabled { opacity: .5; cursor: default; }
.ai-send svg { width: 18px; height: 18px; }

:root .ai-chat :focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; }

@media (max-width: 480px) {
  .ai-panel { right: 0; bottom: 0; width: 100vw; height: 100vh; border-radius: 0; border: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-launcher, .ai-typing span { transition: none; animation: none; }
}