/* 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.
   Launcher is Gigio (mascot avatar). Orange/teal accents match GG brand. */
.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;
  --ggc-orange: #e8600c; --ggc-teal: #29c5c4;
  position: fixed; right: 16px; bottom: 16px; z-index: 900; font-family: 'Segoe UI', Calibri, system-ui, -apple-system, sans-serif;
  display: flex; flex-direction: column; align-items: flex-end; gap: .55rem;
}
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;
}

/* Greeting bubble (once per browser session) */
.ggc-greet {
  display: flex; align-items: flex-start; gap: .45rem; max-width: min(280px, calc(100vw - 88px));
  background: var(--ggc-bg); color: var(--ggc-fg); border: 1px solid var(--ggc-line);
  border-radius: 14px; padding: .65rem .75rem .65rem .85rem; box-shadow: 0 8px 24px rgba(0,0,0,.22);
  position: relative;
}
.ggc-greet[hidden] { display: none !important; }
.ggc-greet-text { margin: 0; font-size: .88rem; line-height: 1.35; }
.ggc-greet-text strong { color: var(--ggc-orange); font-weight: 700; }
body.site-dark .ggc-greet-text strong, :root[data-theme="dark"] .ggc-greet-text strong { color: #ff9a4a; }
.ggc-greet-x {
  flex: 0 0 auto; background: none; border: 0; color: var(--ggc-muted); font-size: 1.25rem; line-height: 1;
  cursor: pointer; padding: 0 .15rem; margin: -.15rem -.1rem 0 0;
}
.ggc-greet-x:hover { color: var(--ggc-fg); }
.ggc.is-open .ggc-greet { display: none !important; }

/* Floating launcher: Gigio avatar */
.ggc-fab {
  display: inline-flex; align-items: center; gap: .55rem; border: 0; cursor: pointer; position: relative;
  background: transparent; color: var(--ggc-fg); border-radius: 999px; padding: 0;
  font-family: inherit; font-weight: 600; font-size: .92rem; line-height: 1;
  min-height: 56px; min-width: 56px;
}
.ggc-fab:focus-visible, .ggc-x:focus-visible, .ggc-send:focus-visible, .ggc-greet-x:focus-visible {
  outline: 3px solid #4c8dff; outline-offset: 2px;
}
.ggc.is-open .ggc-fab { display: none; }
.ggc-fab-pic { display: block; width: 56px; height: 56px; flex: 0 0 56px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
.ggc-fab-img {
  display: block; width: 56px; height: 56px; border-radius: 50%;
  transition: transform .15s ease;
}
.ggc-fab:hover .ggc-fab-img, .ggc-fab:focus-visible .ggc-fab-img { transform: scale(1.06); }
.ggc-fab-label {
  background: var(--ggc-ink); color: var(--ggc-on-ink); border-radius: 999px;
  padding: .55rem .85rem; box-shadow: 0 4px 14px rgba(0,0,0,.22); white-space: nowrap;
}
.ggc-badge {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; border-radius: 10px;
  background: #e5484d; color: #fff; font-size: .72rem; line-height: 20px; text-align: center; padding: 0 5px;
  box-shadow: 0 0 0 2px var(--ggc-bg);
}
.ggc-fab .ggc-badge { right: auto; left: 40px; }

.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: center; gap: .5rem;
  padding: .7rem .85rem; background: var(--ggc-ink); color: var(--ggc-on-ink);
}
.ggc-head-main { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.ggc-head-pic { flex: 0 0 40px; width: 40px; height: 40px; }
.ggc-head-img { display: block; width: 40px; height: 40px; border-radius: 50%; }
.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: 0; }
  .ggc-greet { max-width: min(240px, calc(100vw - 80px)); }
  .ggc.is-open { inset: 0; right: 0; bottom: 0; align-items: stretch; }
  .ggc-panel { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
}
@media print { .ggc { display: none; } }