/* ghs-chat.css -- customer web chat widget.
 *
 * Self-contained on purpose: this stylesheet loads on the Next.js marketing
 * site as well as inside the portal, so it defines its own tokens and never
 * relies on host styles. Everything is namespaced under .ghsc- and all sizing
 * is in rem against an explicit font-size, so a host page's base font cannot
 * distort the widget.
 *
 * Positioned bottom-LEFT: the marketing site already runs a chat bubble in the
 * bottom-right corner, and two overlapping launchers is a bad first impression.
 */

.ghsc-root {
  --ghsc-brand:      #1d51a5;
  --ghsc-brand-dark: #17407f;
  --ghsc-surface:    #ffffff;
  --ghsc-raised:     #f4f6fa;
  --ghsc-text:       #17223b;
  --ghsc-muted:      #5a6683;
  --ghsc-line:       #dfe4ee;
  --ghsc-bot-bg:     #f0f3f9;
  --ghsc-shadow:     0 12px 40px rgba(16, 26, 51, .18);
  --ghsc-radius:     14px;

  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: var(--ghsc-text);
}

@media (prefers-color-scheme: dark) {
  .ghsc-root {
    --ghsc-surface: #161b26;
    --ghsc-raised:  #1e2534;
    --ghsc-text:    #eef1f7;
    --ghsc-muted:   #a3adc2;
    --ghsc-line:    #2b3446;
    --ghsc-bot-bg:  #212a3b;
    --ghsc-shadow:  0 12px 40px rgba(0, 0, 0, .55);
  }
}

/* ---------------------------------------------------------------- launcher */

.ghsc-launcher {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--ghsc-brand);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  box-shadow: var(--ghsc-shadow);
  transition: transform .16s ease, background .16s ease;
}
.ghsc-launcher:hover  { background: var(--ghsc-brand-dark); transform: translateY(-1px); }
.ghsc-launcher:focus-visible { outline: 3px solid #ffb020; outline-offset: 2px; }
.ghsc-launcher[hidden] { display: none; }

/* ------------------------------------------------------------------ panel */

.ghsc-panel {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  width: min(23.5rem, calc(100vw - 3rem));
  height: min(34rem, calc(100vh - 3rem));
  background: var(--ghsc-surface);
  border: 1px solid var(--ghsc-line);
  border-radius: var(--ghsc-radius);
  box-shadow: var(--ghsc-shadow);
  overflow: hidden;
}
.ghsc-panel[hidden] { display: none; }

@media (max-width: 30rem) {
  .ghsc-panel {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

.ghsc-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  background: var(--ghsc-brand);
  color: #fff;
  flex: 0 0 auto;
}
.ghsc-head h2 { margin: 0; font-size: .98rem; font-weight: 650; }
.ghsc-head p  { margin: 0; font-size: .76rem; opacity: .85; }
.ghsc-head-txt { flex: 1 1 auto; min-width: 0; }
.ghsc-head-txt[hidden] { display: none; }

/* Logo variant. The company mark is dark on transparency, so the bar goes
   light -- on brand blue it would be near-invisible. Kept light in dark mode
   too, for the same reason. */
.ghsc-head--brand {
  background: #ffffff;
  color: var(--ghsc-text);
  border-bottom: 1px solid var(--ghsc-line);
  padding: .7rem 1rem;
}

.ghsc-logo {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 11rem;
  height: 2rem;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.ghsc-x {
  flex: 0 0 auto;
  /* Pinned right whatever sits beside it -- wording, a logo, or nothing at all.
     Relying on the neighbour to grow left it floating mid-header. */
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  padding: .1rem .35rem;
  border-radius: 6px;
  cursor: pointer;
}
.ghsc-x:hover { background: rgba(255,255,255,.18); }
.ghsc-x:focus-visible { outline: 2px solid #ffb020; }

.ghsc-head--brand .ghsc-x { color: var(--ghsc-muted); }
.ghsc-head--brand .ghsc-x:hover { background: rgba(23,34,59,.08); color: var(--ghsc-text); }

/* --------------------------------------------------------------- messages */

.ghsc-log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  background: var(--ghsc-raised);
}

.ghsc-msg {
  max-width: 85%;
  padding: .6rem .8rem;
  border-radius: 12px;
  font-size: .9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ghsc-msg--bot      { align-self: flex-start; background: var(--ghsc-bot-bg); border-bottom-left-radius: 4px; }
.ghsc-msg--customer { align-self: flex-end;   background: var(--ghsc-brand); color: #fff; border-bottom-right-radius: 4px; }
.ghsc-msg--agent    { align-self: flex-start; background: #e7f3ea; color: #16341f; border-bottom-left-radius: 4px; }
.ghsc-msg--system   { align-self: center; background: transparent; color: var(--ghsc-muted); font-size: .78rem; text-align: center; }

@media (prefers-color-scheme: dark) {
  .ghsc-msg--agent { background: #1f3a29; color: #d8efdf; }
}

/* ------------------------------------------------------------------ cards */

.ghsc-card {
  align-self: stretch;
  background: var(--ghsc-surface);
  border: 1px solid var(--ghsc-line);
  border-radius: 12px;
  padding: .75rem .85rem;
}
.ghsc-card h3 { margin: 0 0 .35rem; font-size: .88rem; font-weight: 650; }
.ghsc-card ul { margin: 0; padding: 0; list-style: none; }
.ghsc-card li { font-size: .84rem; color: var(--ghsc-muted); }

/* ---------------------------------------------------------------- buttons */

.ghsc-acts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .55rem;
}
.ghsc-chip {
  border: 1px solid var(--ghsc-brand);
  background: transparent;
  color: var(--ghsc-brand);
  font: inherit;
  font-size: .82rem;
  font-weight: 550;
  padding: .4rem .75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.ghsc-chip:hover { background: var(--ghsc-brand); color: #fff; }
.ghsc-chip:focus-visible { outline: 3px solid #ffb020; outline-offset: 1px; }
.ghsc-chip[disabled] { opacity: .45; cursor: default; }
.ghsc-chip[disabled]:hover { background: transparent; color: var(--ghsc-brand); }

@media (prefers-color-scheme: dark) {
  .ghsc-chip { border-color: #6f97e0; color: #a8c4f4; }
  .ghsc-chip:hover { background: #6f97e0; color: #0e1420; }
}

.ghsc-call {
  display: inline-block;
  margin-top: .55rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: var(--ghsc-brand);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}

/* ---------------------------------------------------------------- composer */

.ghsc-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--ghsc-line);
  background: var(--ghsc-surface);
  padding: .6rem .7rem;
}
.ghsc-form { display: flex; gap: .45rem; align-items: center; }
.ghsc-in {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: .9rem;
  padding: .55rem .7rem;
  border: 1px solid var(--ghsc-line);
  border-radius: 10px;
  background: var(--ghsc-raised);
  color: var(--ghsc-text);
}
.ghsc-in:focus { outline: 2px solid var(--ghsc-brand); outline-offset: -1px; }
.ghsc-send {
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: var(--ghsc-brand);
  color: #fff;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: .55rem .9rem;
  cursor: pointer;
}
.ghsc-send[disabled] { opacity: .5; cursor: default; }

.ghsc-note { margin: .4rem .2rem 0; font-size: .72rem; color: var(--ghsc-muted); }
.ghsc-err  { color: #b3261e; }
@media (prefers-color-scheme: dark) { .ghsc-err { color: #ffb4ab; } }

/* ---------------------------------------------------------------- typing */

.ghsc-typing { display: inline-flex; gap: .22rem; align-items: center; padding: .15rem 0; }
.ghsc-typing i {
  width: .38rem; height: .38rem; border-radius: 50%;
  background: var(--ghsc-muted); opacity: .45;
  animation: ghsc-bounce 1.2s infinite ease-in-out;
}
.ghsc-typing i:nth-child(2) { animation-delay: .15s; }
.ghsc-typing i:nth-child(3) { animation-delay: .3s; }

@keyframes ghsc-bounce {
  0%, 60%, 100% { transform: translateY(0);      opacity: .35; }
  30%           { transform: translateY(-.22rem); opacity: .9;  }
}

@media (prefers-reduced-motion: reduce) {
  .ghsc-launcher, .ghsc-chip, .ghsc-typing i { transition: none; animation: none; }
}

.ghsc-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}