/*
 * Tungaloy Gabby chat drawer.
 * v1.4.10: restore the desktop/tablet drawer as a fixed overlay. The page
 * and Bridge theme keep their native dimensions at every viewport; only
 * the full-screen mobile drawer locks background scrolling.
 * v1.4.9: the open drawer uses an explicit right-pointing close chevron;
 * the supplied AI-chat icon remains the closed-state launcher only.
 * v1.4.8: start/chat/modal content owns its vertical scrolling and contains
 * overscroll, replacing the mobile body-position lock. Short landscape
 * layouts stay usable, phone dialogs use the available viewport, and the
 * expanded drawer now reaches both viewport edges.
 * v1.4.7: the supplied AI-chat icon is the drawer toggle in both states.
 * It opens from the collapsed rail and closes from the open header, where
 * it replaces the small Gabby portrait and redundant chevron control.
 * v1.4.5: the open desktop drawer now constrains Bridge's fixed-width
 * grid containers to the remaining page width, so no theme content can
 * spill underneath the sidebar. Bridge's 1200px breakpoint is shifted by
 * the 400px drawer width, and the sticky header follows the same inset.
 * v1.4.4: Raul's supplied Gabby portrait and a deliberate typography
 * system for welcome content and generated Markdown replies.
 * v1.4.3: the drawer now PUSHES the site aside instead of covering it —
 * body.tgabby-docked shrinks the Bridge theme's .wrapper by the 56px rail,
 * body.tgabby-open by the full drawer width (rules ported from the
 * client's original chat-drawer.css .wrapper.is-shrink integration,
 * incl. sticky-header width and the <1400px forced-mobile-menu block).
 * The closed rail also carries a contact-page shortcut under the sparkle.
 * v1.4.2: closed state is a Sandvik-style full-height edge rail (56px,
 * light gray, sparkle at top; the whole rail is the open button) instead
 * of a floating circle. Mobile (<576px) keeps a compact round launcher.
 * The drawer offsets below the WP admin bar for logged-in users
 * (32px desktop / 46px ≤782px).
 * v1.4.1 palette: brand red #d40025, ink #212121, light gray #efefef
 * user bubbles, neutral hairlines. Flat un-bubbled bot replies, a
 * "Thinking…" label with three pulsing dots, a rounded white input
 * wrapper with a small circular send button, and a full-height right
 * sidebar panel with a quiet slide-in.
 * Behavioural selectors (is-open / is-close / is-full-open / is-chat,
 * modal .is-open, mobile sheet) are unchanged from v1.3.x.
 */

:root {
  --drawer-max-width: 400px;
  --tgabby-ink: #212121;        /* tungaloy.com text ink */
  --tgabby-cream: #efefef;      /* user bubbles — tungaloy.com light gray */
  --tgabby-tan: #c9c9c9;        /* hairline borders */
  --tgabby-tan-soft: #e2e2e2;   /* lighter hairlines */
  --tgabby-accent: #d40025;     /* Tungaloy brand red (sampled live) */
  --tgabby-accent-dark: #ab001e;
  --tgabby-muted: #6f6f6f;
  --tgabby-nav: #0a0a0a;       /* live sticky navigation background */
  --tgabby-nav-hover: #181818;
  --tgabby-nav-rule: rgba(255, 255, 255, 0.18);
}

/* ── Edge-rail launcher (Sandvik pattern) ─────────────────────── */

/* Full-height slim rail pinned inside the drawer's right edge. Its dark
   surface and red rule continue Tungaloy's main navigation language. */
.tgabby-launcher {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  border: none;
  border-left: none;
  border-radius: 0;
  background-color: var(--tgabby-nav);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px 0 0;
  z-index: 9998;
  /* the parent drawer container is pointer-events:none */
  pointer-events: auto;
  box-shadow: inset 2px 0 0 rgba(212, 0, 37, 0.9);
  transition: background-color 0.15s ease, opacity 0.18s ease;
}
.tgabby-launcher:hover {
  background-color: var(--tgabby-nav-hover);
}
.tgabby-launcher img {
  display: block;
  width: 30px;
  height: 30px;
  filter: invert(1);
  opacity: 0.92;
  transition: opacity 0.15s ease;
}
.tgabby-launcher:hover img {
  opacity: 1;
}
.tgabby-drawer.is-open .tgabby-launcher,
.tgabby-drawer.is-full-open .tgabby-launcher {
  opacity: 0;
  pointer-events: none;
}

/* Contact-page shortcut in the closed rail, under the AI icon */
.tgabby-rail-contact {
  position: absolute;
  top: 64px;
  right: 0;
  width: 56px;
  height: 48px;
  border: none;
  border-top: 1px solid var(--tgabby-nav-rule);
  background: none;
  color: rgba(255, 255, 255, 0.64);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* above the full-rail launcher */
  pointer-events: auto;
  transition: color 0.15s ease, opacity 0.18s ease;
}
.tgabby-rail-contact:hover {
  color: #ffffff;
}
.tgabby-rail-contact svg {
  display: block;
}
.tgabby-drawer.is-open .tgabby-rail-contact,
.tgabby-drawer.is-full-open .tgabby-rail-contact {
  opacity: 0;
  pointer-events: none;
}

.tgabby-launcher:focus-visible,
.tgabby-rail-contact:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

/* ── WP admin bar offset (logged-in users) ────────────────────── */

body.admin-bar .tgabby-drawer {
  top: 32px;
  height: calc(100vh - 32px);
  height: calc(100svh - 32px);
  height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar .tgabby-drawer {
    top: 46px;
    height: calc(100vh - 46px);
    height: calc(100svh - 46px);
    height: calc(100dvh - 46px);
  }
}

/* ── Drawer shell ─────────────────────────────────────────────── */

/* Full-height right sidebar (Sandvik AI Assistant layout): pinned to the
   viewport's right edge, top to bottom. The closed panel sits behind the
   56px rail, then slides over the page without changing the underlying
   site's dimensions or responsive breakpoints. */
.tgabby-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--drawer-max-width), calc(100vw - 24px));
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  z-index: 9999;
  pointer-events: none;
}

.tgabby-drawer.is-full-open {
  left: 0;
  width: auto;
}

.tgabby-panel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-left: 1px solid var(--tgabby-tan-soft);
  box-sizing: border-box;
  box-shadow: -8px 0 28px rgba(33, 33, 33, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(100% - 56px));
  transition:
    transform 0.22s cubic-bezier(0.2, 0, 0, 1),
    opacity 0.18s ease,
    visibility 0s linear 0.22s;
}

.tgabby-drawer.is-open .tgabby-panel,
.tgabby-drawer.is-full-open .tgabby-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* `none` (not translateX(0)) so the panel is not a containing block
     for the position:fixed popups/overlay once open */
  transform: none;
  transition:
    transform 0.22s cubic-bezier(0.2, 0, 0, 1),
    opacity 0.18s ease;
}

/* ── Top bar ──────────────────────────────────────────────────── */

.tgabby-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px 0 8px;
  height: 52px;
  flex-shrink: 0;
  background-color: var(--tgabby-nav);
  color: #ffffff;
  border-bottom: 1px solid rgba(212, 0, 37, 0.85);
}

.tgabby-topbar__title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tgabby-header-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  transition: background-color 0.12s ease;
}
.tgabby-header-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}
.tgabby-header-toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -3px;
}
.tgabby-header-toggle svg {
  display: block;
  width: 24px;
  height: 24px;
  opacity: 0.92;
  transition: opacity 0.15s ease;
}
.tgabby-header-toggle:hover svg {
  opacity: 1;
}
.tgabby-topbar__title span {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.tgabby-topbar__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.tgabby-topbar__divider {
  width: 1px;
  height: 20px;
  background: var(--tgabby-nav-rule);
  margin: 0 6px;
}

.tgabby-icon-btn {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s;
}
.tgabby-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.tgabby-icon-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}
.tgabby-icon-btn svg {
  display: block;
}

/* chat-mode-only buttons (new chat / back to start) */
.tgabby-chat-only {
  display: none;
}
.tgabby-panel.is-chat .tgabby-chat-only {
  display: flex;
}

/* expand ⇄ contract icon swap */
#tgabbyFullBtn .tgabby-ic-contract {
  display: none;
}
.tgabby-drawer.is-full-open #tgabbyFullBtn .tgabby-ic-expand {
  display: none;
}
.tgabby-drawer.is-full-open #tgabbyFullBtn .tgabby-ic-contract {
  display: block;
}

/* ── Panel body ───────────────────────────────────────────────── */

.tgabby-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

/* ── Start screen ─────────────────────────────────────────────── */

#tgabbySelector {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: 66px 24px 64px;
  text-align: center;
  margin-top: 0;
  background-color: #ffffff;
}

.tgabby-selector-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	margin: 0 auto 16px;
	display: block;
	object-fit: cover;
	object-position: center top;
	border: 1px solid var(--tgabby-tan-soft);
	box-shadow: 0 2px 8px rgba(33, 33, 33, 0.12);
}

#tgabbySelector h1 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--tgabby-ink);
  margin: 0 0 22px;
}

/* Primary button: Sandvik shape (near-square), Tungaloy brand red */
#tgabbySelector button {
  display: block;
  margin: 10px auto;
  padding: 13px 28px;
  width: auto;
  min-width: 60%;
  max-width: 400px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--tgabby-accent);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s;
}

#tgabbySelector button:hover {
  background-color: var(--tgabby-accent-dark);
}

.tgabby-selector-help {
  margin-top: 14px;
}

#tgabby-guide-link {
  cursor: pointer;
  font-size: 14px;
  color: var(--tgabby-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#tgabby-guide-link:hover {
  color: var(--tgabby-accent);
}

/* ── Chat area ────────────────────────────────────────────────── */

#tgabby-chat-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* messages canvas — flat white, Sandvik style */
#tgabby-messages {
  flex-grow: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 18px 8px;
  background-color: #ffffff;
  -webkit-overflow-scrolling: touch;
}

.tgabby-avatar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--tgabby-tan-soft);
  color: var(--tgabby-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.tgabby-avatar-row img {
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--tgabby-tan-soft);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: #ffffff;
}

.gabby-msg {
  display: flex;
  margin-bottom: 16px;
}
.gabby-msg--user {
  justify-content: flex-end;
}
.gabby-msg__bubble {
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tgabby-ink);
	word-wrap: break-word;
	overflow-wrap: anywhere;
  text-align: left;
}
/* Bot replies: flat text straight on the panel — no bubble, no border */
.gabby-msg--bot .gabby-msg__bubble {
  background: none;
  border: none;
  box-shadow: none;
}
/* User messages: warm cream bubble, 8px radius (Sandvik user-message) */
.gabby-msg--user .gabby-msg__bubble {
  max-width: 88%;
  background-color: var(--tgabby-cream);
  color: var(--tgabby-ink);
  padding: 12px 16px;
  border-radius: 8px;
  white-space: pre-wrap;
}
.gabby-msg--error .gabby-msg__bubble {
  background-color: #fdecea;
  border: 1px solid #f5c6c0;
  color: #8a1f1f;
  padding: 12px 16px;
  border-radius: 8px;
}
.gabby-msg__bubble > :first-child {
  margin-top: 0;
}
.gabby-msg__bubble > :last-child {
  margin-bottom: 0;
}
.gabby-msg__bubble p {
  margin: 0 0 12px;
}
.gabby-msg__bubble strong {
  font-weight: 700;
}
.gabby-msg__bubble em {
  font-style: italic;
}
.gabby-msg__bubble del {
  color: var(--tgabby-muted);
}
.gabby-msg__bubble .gabby-md-heading {
  color: var(--tgabby-ink);
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.gabby-msg__bubble .gabby-md-heading--1 {
  margin: 20px 0 10px;
  font-size: 19px;
  line-height: 1.3;
}
.gabby-msg__bubble .gabby-md-heading--2 {
  margin: 18px 0 8px;
  font-size: 17px;
  line-height: 1.35;
}
.gabby-msg__bubble .gabby-md-heading--3,
.gabby-msg__bubble .gabby-md-heading--4 {
  margin: 16px 0 7px;
  font-size: 15px;
  line-height: 1.4;
}
.gabby-msg__bubble ul,
.gabby-msg__bubble ol {
	margin: 0 0 14px;
	padding: 0 0 0 22px;
	list-style-position: outside;
}
.gabby-msg__bubble ul {
  list-style-type: disc;
}
.gabby-msg__bubble ol {
  list-style-type: decimal;
}
.gabby-msg__bubble li::marker {
  color: var(--tgabby-accent);
  font-weight: 700;
}
.gabby-msg__bubble li {
	margin: 0 0 7px;
	padding-left: 2px;
	line-height: 1.48;
}
.gabby-msg__bubble li:last-child {
  margin-bottom: 0;
}
.gabby-msg__bubble .gabby-list-depth-1 {
  margin-left: 14px;
}
.gabby-msg__bubble .gabby-list-depth-2 {
  margin-left: 28px;
}
.gabby-msg__bubble .gabby-task {
  position: relative;
  list-style: none;
}
.gabby-task-marker {
  position: absolute;
  top: 0.15em;
  left: -21px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--tgabby-tan);
  border-radius: 3px;
  color: var(--tgabby-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
}
.gabby-msg__bubble blockquote {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--tgabby-accent);
  background: #f7f7f7;
  color: #4b4b4b;
  font-style: normal;
  line-height: 1.5;
}
.gabby-msg__bubble hr {
  height: 1px;
  margin: 18px 0;
  border: 0;
  background: var(--tgabby-tan-soft);
}
.gabby-msg__bubble code {
	background: rgba(33, 33, 33, 0.07);
	padding: 2px 5px;
	border-radius: 3px;
	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	font-size: 12.5px;
	word-break: break-word;
}
.gabby-msg__bubble pre {
	margin: 0 0 14px;
	background: #252525;
	color: #f3f3f3;
	padding: 12px 14px;
	border-radius: 5px;
	overflow-x: auto;
	font-size: 12.5px;
	line-height: 1.55;
	white-space: pre;
	tab-size: 2;
}
.gabby-msg__bubble pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.gabby-msg__bubble a {
  color: var(--tgabby-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gabby-msg--user .gabby-msg__bubble a {
  color: var(--tgabby-ink);
}
.gabby-table-wrap {
	overflow-x: auto;
	margin: 0 0 14px;
	border: 1px solid var(--tgabby-tan-soft);
	border-radius: 4px;
}
.gabby-msg__bubble table {
	width: 100%;
	min-width: 320px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 12.5px;
	line-height: 1.45;
}
.gabby-msg__bubble th,
.gabby-msg__bubble td {
	padding: 8px 9px;
	border: 0;
	border-right: 1px solid var(--tgabby-tan-soft);
	border-bottom: 1px solid var(--tgabby-tan-soft);
	text-align: left;
	vertical-align: top;
}
.gabby-msg__bubble th {
	background: var(--tgabby-cream);
	font-weight: 700;
}
.gabby-msg__bubble th:last-child,
.gabby-msg__bubble td:last-child {
  border-right: 0;
}
.gabby-msg__bubble tbody tr:last-child td {
  border-bottom: 0;
}

/* Welcome screen: same copy, but presented as a scannable technical brief. */
.tgabby-welcome-copy__intro {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}
.tgabby-welcome-copy__heading {
  margin-top: 18px !important;
  margin-bottom: 8px !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tgabby-welcome-copy__capabilities {
  padding-left: 20px !important;
}
.tgabby-welcome-copy__prompt {
  margin: 17px 0 14px !important;
  padding: 11px 12px;
  border-left: 3px solid var(--tgabby-accent);
  background: #f7f7f7;
  font-weight: 600;
  line-height: 1.48;
}
.tgabby-welcome-copy__examples {
  display: grid;
  gap: 7px;
  margin-bottom: 14px !important;
  padding: 0 !important;
  list-style: none !important;
}
.tgabby-welcome-copy__examples li {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--tgabby-tan-soft);
  border-radius: 4px;
  background: #ffffff;
  font-size: 13px;
  line-height: 1.45;
}
.tgabby-welcome-copy__tip {
  margin-top: 16px !important;
  padding-top: 12px;
  border-top: 1px solid var(--tgabby-tan-soft);
  color: var(--tgabby-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* thinking indicator — "Thinking…" label + three pulsing dots */
.gabby-thinking-label {
  display: block;
  font-size: 14px;
  color: var(--tgabby-muted);
  margin-bottom: 6px;
}
.gabby-typing {
  display: inline-flex;
  gap: 5px;
  padding: 2px 0;
}
.gabby-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tgabby-accent);
  animation: gabby-blink 1.2s infinite ease-in-out;
}
.gabby-typing span:nth-child(2) { animation-delay: 0.2s; }
.gabby-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes gabby-blink {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

/* input bar — white rounded wrapper with tan hairline (Sandvik input) */
#tgabby-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 8px 16px 12px;
  padding: 10px 10px 10px 16px;
  background: #ffffff;
  border: 1px solid var(--tgabby-tan);
  border-radius: 24px;
  transition: border-color 0.15s;
}
#tgabby-input-bar:focus-within {
  border-color: var(--tgabby-accent);
}
#tgabby-input {
  flex-grow: 1;
  resize: none;
  border: none;
  border-radius: 0;
  padding: 7px 0;
  font-size: 15px;
  line-height: 1.4;
  font-family: inherit;
  max-height: 120px;
  box-sizing: border-box;
  background: transparent;
  color: var(--tgabby-ink);
  box-shadow: none;
}
#tgabby-input:focus {
  outline: none;
}
#tgabby-input:disabled {
  background: transparent;
  color: var(--tgabby-muted);
}
#tgabby-send {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background-color: var(--tgabby-accent);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, transform 0.12s;
}
#tgabby-send svg {
  width: 17px;
  height: 17px;
}
#tgabby-send:hover {
  background-color: var(--tgabby-accent-dark);
  transform: scale(1.06);
}
#tgabby-send:disabled {
  background-color: var(--tgabby-tan-soft);
  color: #ffffff;
  cursor: default;
  transform: none;
}

/* ── Popups & modals (shared) ─────────────────────────────────── */

#tgabby-guide-popup,
#tgabby-disclaimer-modal {
  display: none;
}
#tgabby-guide-popup.is-open,
#tgabby-disclaimer-modal.is-open {
  display: block;
}

.tgabby-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(33, 33, 33, 0.5);
  z-index: 100;
}

.tgabby-popup-box,
.tgabby-modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  min-width: 50%;
  max-width: 94%;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 28px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(33, 33, 33, 0.2);
  z-index: 101;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tgabby-ink);
}

.tgabby-popup-box strong {
  font-weight: bold;
}

.tgabby-popup-box h2,
.tgabby-modal-content h2 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 22px;
  font-weight: bold;
  color: var(--tgabby-ink);
}

.tgabby-popup-box p,
.tgabby-modal-content p {
  margin: 0 0 12px 0;
}

.tgabby-popup-box ul {
  margin: 0 0 14px 20px;
  padding: 0;
}

.tgabby-guide-box {
  text-align: left;
}

.tgabby-popup-box button,
.tgabby-modal-content button {
  background-color: var(--tgabby-accent);
  color: #ffffff;
  padding: 11px 26px;
  border: none;
  border-radius: 3px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s;
}
.tgabby-popup-box button:hover,
.tgabby-modal-content button:hover {
  background-color: var(--tgabby-accent-dark);
}

/* ── Sticky bottom disclaimer — quiet one-liner (Sandvik footer) ── */

#tgabby-disclaimer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-top: none;
  font-size: 12px;
  text-align: center;
  color: var(--tgabby-muted);
  padding: 10px 20px 12px;
  line-height: 1.4;
  box-sizing: border-box;
}

#tgabby-read-disclaimer {
  cursor: pointer;
  font-weight: normal;
  text-decoration: underline;
  text-underline-offset: 2px;
  position: relative;
}
#tgabby-read-disclaimer:hover {
  color: var(--tgabby-accent);
}
#tgabby-read-disclaimer:after {
  content: none;
}

/* ── Mobile: full-screen bottom sheet ─────────────────────────── */

@media (width < 576px) {
  /* The drawer covers the entire narrow viewport, so keep the page behind it
     still without the inline position:fixed scroll hack. Scroll position is
     preserved when this class is removed; wider layouts remain scrollable. */
  body.tgabby-open {
    overflow: hidden;
  }

  /* A full-height rail eats too much of a narrow screen (Sandvik just
     hides its assistant on mobile) — keep a compact round launcher. */
  .tgabby-launcher {
    top: auto;
    right: 18px;
    bottom: 18px;
    width: 52px;
    height: 52px;
    padding: 0;
    align-items: center;
    border-left: none;
    border-radius: 50%;
    background-color: var(--tgabby-accent);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(33, 33, 33, 0.24);
  }
  .tgabby-launcher:hover {
    background-color: var(--tgabby-accent-dark);
    color: #ffffff;
  }

  .tgabby-drawer {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
  }

  .tgabby-panel {
    border-left: none;
    box-shadow: none;
    transform: translateY(100%);
  }
  .tgabby-drawer.is-open .tgabby-panel,
  .tgabby-drawer.is-full-open .tgabby-panel {
    transform: none;
  }

  /* full-open is meaningless on a full-screen sheet */
  #tgabbyFullBtn {
    display: none;
  }

  #tgabbySelector {
    padding-top: 50px;
  }
}

/* Phone portrait and short landscape: use nearly the full viewport for
   the text-heavy guide and advisory instead of a 50%-wide desktop dialog. */
@media (width < 576px), (orientation: landscape) and (height <= 500px) {
  .tgabby-popup-box,
  .tgabby-modal-content {
    width: calc(100vw - 24px);
    width: calc(100dvw - 24px);
    min-width: 0;
    max-width: none;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 18px;
  }
}

/* Keep the complete start screen reachable on phones held sideways.
   Longer translated strings can scroll within the drawer. */
@media (orientation: landscape) and (height <= 500px) {
  #tgabbySelector {
    padding: 14px 20px 56px;
  }

  .tgabby-selector-avatar {
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
  }

  #tgabbySelector h1 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  #tgabbySelector button {
    margin: 8px auto;
    padding: 10px 24px;
  }

  .tgabby-selector-help {
    margin-top: 8px;
  }
}

/* ── Human handoff: CTA + share-conversation modal ────────────────── */

.tgabby-handoff-cta {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 16px 4px;
  padding: 7px 12px;
  background: #ffffff;
  border: 1px solid var(--tgabby-tan);
  border-radius: 18px;
  color: var(--tgabby-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.tgabby-handoff-cta:hover {
  color: var(--tgabby-accent);
  border-color: var(--tgabby-accent);
}
.tgabby-handoff-cta svg {
  display: block;
}

#tgabby-handoff-popup {
  display: none;
}
#tgabby-handoff-popup.is-open {
  display: block;
}

.tgabby-handoff-box {
  text-align: left;
  max-width: 460px;
}
.tgabby-handoff-intro {
  color: var(--tgabby-muted);
  font-size: 14px;
}

#tgabby-handoff-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tgabby-ho-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tgabby-ink);
}
.tgabby-ho-field input,
.tgabby-ho-field select,
.tgabby-ho-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--tgabby-ink);
  background: #ffffff;
  border: 1px solid var(--tgabby-tan);
  border-radius: 6px;
}
.tgabby-ho-field textarea {
  resize: vertical;
  min-height: 60px;
}
.tgabby-ho-field input:focus,
.tgabby-ho-field select:focus,
.tgabby-ho-field textarea:focus {
  outline: none;
  border-color: var(--tgabby-accent);
}
.tgabby-ho-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--tgabby-ink);
}
.tgabby-ho-consent input {
  margin-top: 2px;
  flex-shrink: 0;
}
.tgabby-ho-consent a {
  color: var(--tgabby-accent);
}
.tgabby-ho-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.tgabby-ho-error {
  color: var(--tgabby-accent);
  font-size: 13px;
  font-weight: 600;
}
.tgabby-ho-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.tgabby-handoff-box .tgabby-ho-actions button {
  margin-top: 0;
}
.tgabby-handoff-box .tgabby-ho-cancel {
  background: #ffffff;
  color: var(--tgabby-muted);
  border: 1px solid var(--tgabby-tan);
}
.tgabby-handoff-box .tgabby-ho-cancel:hover {
  background: var(--tgabby-tan-soft);
  color: var(--tgabby-ink);
}
.tgabby-ho-success {
  text-align: left;
}
.tgabby-ho-success p {
  color: var(--tgabby-ink);
}

/* ── Full-page view ───────────────────────────────────────────── */

.tgabby-fullpage {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--tgabby-fp-top, 0px));
  height: calc(100svh - var(--tgabby-fp-top, 0px));
  height: calc(100dvh - var(--tgabby-fp-top, 0px));
  min-height: 480px;
  background: #ffffff;
}

body.tgabby-fullpage-active.tgabby-modal-open .content {
  z-index: 9999;
}

.tgabby-fullpage #tgabby-messages {
  padding-inline: max(18px, calc((100% - 900px) / 2));
}

.tgabby-fullpage #tgabby-input-bar {
  margin-inline: max(16px, calc((100% - 900px) / 2));
}

.tgabby-fullpage.is-chat .tgabby-chat-only {
  display: inline-flex;
}

.tgabby-fullpage-intro {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 12px;
  padding: 16px 18px 0;
}

@media (width < 576px) {
  .tgabby-fullpage #tgabby-messages {
    padding-inline: 14px;
  }

  .tgabby-fullpage #tgabby-input-bar {
    margin-inline: 14px;
  }

  .tgabby-fullpage .tgabby-topbar {
    height: 48px;
    padding-inline: 6px;
  }

  .tgabby-fullpage-intro {
    margin-bottom: 8px;
    padding: 12px 14px 0;
  }
}

/* ---- Full-page language selector (1.6.3) ---------------------------------
   Sits in the top bar beside the contact button. Choosing an edition writes
   the tgabby_lang cookie that the /gabby/ router honours, then opens it. */
.tgabby-lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 4px 0 6px;
  border-radius: 16px;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.12s;
}
.tgabby-lang:hover,
.tgabby-lang:focus-within {
  background-color: rgba(255, 255, 255, 0.12);
}
.tgabby-lang svg {
  flex-shrink: 0;
}
.tgabby-lang__select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  line-height: 32px;
  height: 32px;
  max-width: 132px;
  padding: 0 14px 0 2px;
  cursor: pointer;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 12px 12px;
}
.tgabby-lang__select:focus {
  outline: none;
}
.tgabby-lang__select option {
  color: #212121;
  background: #ffffff;
}
@media (max-width: 575px) {
  .tgabby-lang__select {
    max-width: 96px;
    font-size: 12px;
  }
}