/* GG website chat widget (includes/chat_widget.php). Self-contained: own tokens with light and dark
   values, so it reads correctly on the light pages and the dark (body.site-dark) pages. */
.ggc {
  --ggc-bg: #ffffff; --ggc-fg: #1a1a1a; --ggc-muted: #666666; --ggc-line: #e3e3e3; --ggc-soft: #f5f5f3;
  --ggc-ink: #1a1a1a; --ggc-on-ink: #ffffff; --ggc-ok: #1a7a3c; --ggc-off: #9a9a9a; --ggc-err: #c0392b;
  position: fixed; right: 16px; bottom: 16px; z-index: 900; font-family: 'Segoe UI', Calibri, system-ui, -apple-system, sans-serif;
}
body.site-dark .ggc, :root[data-theme="dark"] .ggc {
  --ggc-bg: #232428; --ggc-fg: #e9e9eb; --ggc-muted: #a3a5ac; --ggc-line: #35373d; --ggc-soft: #17181b;
  --ggc-ink: #e9e9eb; --ggc-on-ink: #17181b; --ggc-ok: #3ddc84; --ggc-off: #6f7178; --ggc-err: #f2726c;
}
.ggc-fab {
  display: inline-flex; align-items: center; gap: .45rem; border: 0; cursor: pointer; position: relative;
  background: var(--ggc-ink); color: var(--ggc-on-ink); border-radius: 999px; padding: .75rem 1.05rem;
  font-family: inherit; font-weight: 600; font-size: .95rem; line-height: 1; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.ggc-fab:focus-visible, .ggc-x:focus-visible, .ggc-send:focus-visible { outline: 3px solid #4c8dff; outline-offset: 2px; }
.ggc.is-open .ggc-fab { display: none; }
.ggc-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: #e5484d; color: #fff; font-size: .72rem; line-height: 20px; text-align: center; padding: 0 5px; }
.ggc-panel {
  width: 360px; max-width: calc(100vw - 32px); height: min(560px, calc(100vh - 32px)); display: flex; flex-direction: column;
  background: var(--ggc-bg); color: var(--ggc-fg); border: 1px solid var(--ggc-line); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.ggc-panel[hidden] { display: none; }
.ggc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; padding: .8rem 1rem; background: var(--ggc-ink); color: var(--ggc-on-ink); }
.ggc-head h2 { margin: 0; font-size: 1rem; color: inherit; font-family: inherit; }
.ggc-status { margin: .15rem 0 0; font-size: .78rem; opacity: .9; }
.ggc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ggc-off); margin-right: .15rem; vertical-align: middle; }
.ggc-status.on .ggc-dot { background: #3ddc84; }
.ggc-x { background: none; border: 0; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.ggc-body { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .45rem; background: var(--ggc-soft); overscroll-behavior: contain; }
.ggc-intro p { margin: 0; font-size: .9rem; color: var(--ggc-muted); }
.ggc-msg { max-width: 82%; }
.ggc-text { padding: .5rem .7rem; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; line-height: 1.4; }
.ggc-customer { align-self: flex-end; text-align: right; }
.ggc-customer .ggc-text { background: var(--ggc-ink); color: var(--ggc-on-ink); border-bottom-right-radius: 4px; text-align: left; }
.ggc-staff { align-self: flex-start; }
.ggc-staff .ggc-text { background: var(--ggc-bg); border: 1px solid var(--ggc-line); border-bottom-left-radius: 4px; }
.ggc-system { align-self: center; max-width: 95%; }
.ggc-system .ggc-text { background: transparent; color: var(--ggc-muted); font-size: .8rem; text-align: center; }
.ggc-system .ggc-who { text-align: center; }
.ggc-who { font-size: .7rem; color: var(--ggc-muted); margin: 0 .2rem .1rem; }
.ggc-foot { border-top: 1px solid var(--ggc-line); padding: .6rem .7rem; background: var(--ggc-bg); }
.ggc-form { display: flex; flex-direction: column; gap: .4rem; }
.ggc-field { display: flex; flex-direction: column; gap: .1rem; font-size: .75rem; color: var(--ggc-muted); }
.ggc-form input, .ggc-form textarea, .ggc-compose textarea {
  font: inherit; font-size: 16px; color: var(--ggc-fg); background: var(--ggc-bg); border: 1px solid var(--ggc-line); border-radius: 8px; padding: .45rem .55rem; width: 100%; box-sizing: border-box;
}
.ggc-form textarea { resize: vertical; }
.ggc-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.ggc-compose { display: flex; gap: .4rem; align-items: flex-end; }
.ggc-compose textarea { resize: none; max-height: 120px; }
.ggc-send { border: 0; border-radius: 8px; background: var(--ggc-ink); color: var(--ggc-on-ink); font-family: inherit; font-weight: 600; font-size: .9rem; padding: .55rem .9rem; cursor: pointer; }
.ggc-send:disabled { opacity: .5; cursor: default; }
.ggc-note { font-size: .78rem; color: var(--ggc-muted); margin: 0 0 .35rem; }
.ggc-link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.ggc-err { color: var(--ggc-err); font-size: .8rem; margin: 0 0 .35rem; }
.ggc-err[hidden] { display: none; }
@media (max-width: 600px) {
  .ggc { right: 12px; bottom: 12px; }
  .ggc-fab-label { display: none; }
  .ggc-fab { padding: .85rem; }
  .ggc.is-open { inset: 0; right: 0; bottom: 0; }
  .ggc-panel { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
}
@media print { .ggc { display: none; } }