/* Galia Smart Dev — AI assistant chat widget.
   Every rule lives under the ga- prefix, apart from the override of the floating button. */

/* ---------- Floating button ---------- */

/* With the assistant on, the button no longer hides at the top of the page or near the form.
   Those are the dark sections, hence the light ring around the dark pill. */
html.assistant-on .fab {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
  box-shadow: 0 14px 34px rgba(16, 35, 65, 0.35), 0 0 0 1px rgba(157, 180, 216, 0.35);
}
html.assistant-on .fab[aria-expanded="true"] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
  transition-delay: 0s, 0s, 0.3s;
}

/* Set while the panel is a full-screen sheet: the page behind must not scroll. */
html.ga-lock,
html.ga-lock body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ---------- Panel ---------- */

.ga-panel {
  --ga-base: rgba(12, 27, 51, 0.95);
  --ga-line: var(--night-line, rgba(157, 180, 216, 0.2));
  --ga-text: var(--night-text, #c4d1e6);
  --ga-dim: var(--night-dim, #8fa2c2);
  --ga-glow: var(--green-glow, #6fd487);
  --ga-deep: var(--green-deep, #1f7a35);
  --ga-ease: var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
  --ga-display: var(--display, "Sora", "Segoe UI", system-ui, sans-serif);
  --ga-mono: var(--mono, "JetBrains Mono", ui-monospace, Consolas, monospace);

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: 390px;
  max-width: calc(100vw - 40px);
  height: min(620px, calc(100vh - 110px));
  height: min(620px, calc(100dvh - 110px));
  overflow: hidden;
  border: 1px solid var(--ga-line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    radial-gradient(420px 300px at 100% 0%, rgba(43, 98, 227, 0.24), transparent 70%),
    radial-gradient(360px 280px at 0% 100%, rgba(43, 154, 69, 0.14), transparent 70%),
    var(--ga-base);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
  font: 400 15.5px/1.5 var(--body, "Figtree", "Segoe UI", system-ui, sans-serif);
  text-align: left;
  transform-origin: 100% 100%;
  animation: ga-in 0.28s var(--ga-ease);
}
.ga-panel[hidden] { display: none; }

.ga-panel,
.ga-panel *,
.ga-panel *::before,
.ga-panel *::after { box-sizing: border-box; }
.ga-panel p { margin: 0; }

@keyframes ga-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes ga-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes ga-dot {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-3px); }
}

.ga-panel :focus-visible {
  outline: 3px solid var(--ga-glow);
  outline-offset: 2px;
}

.ga-panel a {
  color: var(--ga-glow);
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 4px;
}

.ga-panel svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ga-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- Header ---------- */

.ga-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--ga-line);
}
.ga-panel .ga-mark {
  flex: none;
  width: 32px;
  height: 32px;
  max-width: none;
}
.ga-id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin-right: auto;
}
.ga-name {
  overflow: hidden;
  font: 700 13.5px/1.2 var(--ga-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ga-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 400 11px/1.3 var(--ga-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ga-dim);
}
.ga-sub::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ga-glow);
  box-shadow: 0 0 8px var(--ga-glow);
}

/* Two classes on the controls: the page-wide :focus-visible rule would otherwise reset their radius. */
.ga-panel .ga-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ga-line);
  border-radius: 10px;
  background: none;
  color: var(--ga-text);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.ga-panel .ga-close:hover { color: #fff; border-color: var(--ga-dim); }

/* ---------- Messages ---------- */

.ga-panel .ga-log {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(157, 180, 216, 0.35) transparent;
}
.ga-panel .ga-log:focus-visible { outline-offset: -3px; }
.ga-log::-webkit-scrollbar { width: 8px; }
.ga-log::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(157, 180, 216, 0.3); }

.ga-msg {
  position: relative;
  flex: none;
  max-width: min(86%, 34em);
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  animation: ga-rise 0.25s var(--ga-ease);
}
.ga-msg-bot {
  align-self: flex-start;
  border: 1px solid var(--ga-line);
  border-bottom-left-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #f2f6fc;
}
.ga-msg-user {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: var(--ga-deep);
  color: #fff;
}
.ga-unsent { opacity: 0.6; }

.ga-typing { padding: 15px 16px; }
.ga-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 8px;
}
.ga-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ga-text);
  animation: ga-dot 1.2s ease-in-out infinite;
}
.ga-dots i:nth-child(2) { animation-delay: 0.15s; }
.ga-dots i:nth-child(3) { animation-delay: 0.3s; }

.ga-note {
  flex: none;
  align-self: center;
  max-width: 94%;
  padding: 7px 12px;
  border: 1px solid var(--ga-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ga-text);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
}
.ga-note-ok { border-color: rgba(111, 212, 135, 0.4); color: #dff5e5; }
.ga-note-ok::before {
  content: "\2713";
  margin-right: 7px;
  color: var(--ga-glow);
  font-weight: 700;
}
.ga-note-error { border-color: rgba(255, 180, 168, 0.45); color: #ffb4a8; }

.ga-panel .ga-retry {
  padding: 0 2px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Composer ---------- */

.ga-composer {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 0;
  padding: 12px 12px 12px 14px;
  border-top: 1px solid var(--ga-line);
}
.ga-panel .ga-input {
  flex: 1 1 auto;
  display: block;
  min-width: 0;
  /* Four lines of text, then it scrolls. */
  max-height: calc(1.4em * 4 + 22px);
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--ga-dim);
  border-radius: 12px;
  background: rgba(12, 27, 51, 0.7);
  color: #fff;
  font: inherit;
  /* 16px keeps iOS from zooming the page when the field takes focus. */
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s;
}
.ga-panel .ga-input::placeholder { color: var(--ga-dim); opacity: 1; }
.ga-panel .ga-input:focus {
  outline: 2px solid var(--ga-glow);
  outline-offset: 1px;
  border-color: var(--ga-glow);
}
.ga-panel .ga-input:disabled { opacity: 0.55; cursor: not-allowed; }

.ga-panel .ga-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ga-deep);
  color: #fff;
  box-shadow: 0 8px 22px rgba(31, 122, 53, 0.4);
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s var(--ga-ease);
}
.ga-panel .ga-send:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(43, 154, 69, 0.5);
}
.ga-panel .ga-send:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; }

/* ---------- Footer ---------- */

.ga-foot {
  flex: none;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--ga-line);
  color: var(--ga-dim);
  font-size: 12px;
  line-height: 1.45;
}
.ga-legal a { white-space: nowrap; }
.ga-panel .ga-sign {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font: 400 10px/1.4 var(--ga-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ga-panel .ga-sign-mark {
  flex: none;
  width: 14px;
  height: 14px;
  max-width: none;
}

/* The visible area is too short for everything (keyboard up on a small screen): the composer wins. */
.ga-tight .ga-foot { display: none; }

/* ---------- Full-screen sheet ---------- */

@media (max-width: 600px), (max-height: 480px) {
  .ga-panel {
    --ga-base: #0c1b33;
    /* --ga-top and --ga-vh track the visual viewport while the on-screen keyboard is open. */
    top: var(--ga-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    max-width: none;
    height: var(--ga-vh, 100%);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform-origin: 50% 100%;
  }
  .ga-head { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  .ga-panel .ga-close { width: 44px; height: 44px; }
  .ga-msg { max-width: min(90%, 34em); font-size: 16px; }
  .ga-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Motion and print ---------- */

@media (prefers-reduced-motion: reduce) {
  .ga-panel,
  .ga-panel *,
  .ga-panel *::before,
  .ga-panel *::after {
    animation: none !important;
    transition: none !important;
  }
  /* The typing indicator becomes a still ellipsis. */
  .ga-dots i { display: none; }
  .ga-dots::after {
    content: "\2026";
    color: var(--ga-text);
    font-size: 24px;
    font-weight: 700;
    line-height: 8px;
    /* The glyph sits on the baseline; lift it to the middle of the bubble. */
    transform: translateY(-0.27em);
  }
}

@media print {
  .ga-panel { display: none; }
  html.ga-lock,
  html.ga-lock body { overflow: visible; }
}