/*
 * Get-AI 1.2 phase 20 (F6–F8, B3): the full-screen chat app (resources/views/gai/chat/app.php, assets/js/gai/app.js)
 * in the style of today's ChatGPT web app: neutral greys in light / dark / auto, the buyer's brand colour (--brand)
 * only for accents (send button, links, focus, the model badge's hover). Everything is scoped to .gai-app, so the
 * 1.1 box (gai-chat.css) keeps its own look where it is still used (the site-mode home page, the no-JavaScript page,
 * Try it). Motion only under prefers-reduced-motion: no-preference. No web fonts beyond the Kit's.
 */
.gai-app-root, .gai-app-body { height: 100%; }
.gai-app-body { margin: 0; min-height: 0; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.gai-app {
  --gx-bg: #fff; --gx-side: #f9f9f9; --gx-text: #0d0d0d; --gx-soft: #5d5d5d; --gx-mute: #6b6b6b; --gx-line: rgb(0 0 0 / .1);
  --gx-hover: rgb(0 0 0 / .05); --gx-strong: rgb(0 0 0 / .08); --gx-pill: #f4f4f4; --gx-comp: #fff; --gx-comp-line: rgb(0 0 0 / .12);
  --gx-menu: #fff; --gx-shadow: 0 4px 24px rgb(0 0 0 / .1), 0 0 1px rgb(0 0 0 / .2); --gx-accent: var(--brand); --gx-accent-fg: var(--brand-fg);
  --gx-link: var(--brand-text, var(--brand));
  flex: 1 1 auto; min-height: 0; display: flex; position: relative; background: var(--gx-bg); color: var(--gx-text); font-size: 1rem; line-height: 1.5;
}
[data-theme="dark"] .gai-app {
  --gx-bg: #212121; --gx-side: #181818; --gx-text: #ececec; --gx-soft: #b4b4b4; --gx-mute: #9b9b9b; --gx-line: rgb(255 255 255 / .1);
  --gx-hover: rgb(255 255 255 / .07); --gx-strong: rgb(255 255 255 / .12); --gx-pill: #303030; --gx-comp: #303030; --gx-comp-line: rgb(255 255 255 / .08);
  --gx-menu: #2f2f2f; --gx-shadow: 0 8px 28px rgb(0 0 0 / .5), 0 0 1px rgb(255 255 255 / .2);
}
.gai-app-body { background: #fff; }
[data-theme="dark"] .gai-app-body { background: #212121; }
:where(.gai-app) a { color: var(--gx-link); }
.gai-app :focus-visible { outline: 2px solid var(--gx-accent); outline-offset: 2px; }
:where(.gai-app) button { font: inherit; color: inherit; }
:where(.gai-app) .icon, :where(.gai-app) svg { width: 18px; height: 18px; flex: none; }
.gai-app [hidden] { display: none !important; }

/* ---- buttons ---- */
.gai-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--gx-soft); cursor: pointer; list-style: none; text-decoration: none;
}
.gai-icon-btn:hover { background: var(--gx-hover); color: var(--gx-text); }
.gai-icon-btn .icon, .gai-icon-btn svg { width: 20px; height: 20px; }

/* ---- sidebar ---- */
.gai-side { width: 260px; flex: 0 0 260px; display: flex; flex-direction: column; gap: 2px; min-height: 0; padding: 8px; background: var(--gx-side); }
.gai-side-closed .gai-side { display: none; }
.gai-side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 0 4px 6px; }
.gai-side-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--gx-text) !important; text-decoration: none; font-weight: 600; }
.gai-side-logo { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.gai-side-name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .95rem; }
.gai-side-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 7px 10px; border: 0; border-radius: 10px; background: none;
  color: var(--gx-text) !important; font-size: .875rem; text-align: start; text-decoration: none; cursor: pointer;
}
.gai-side-item:hover, .gai-side-chat:hover { background: var(--gx-hover); }
.gai-side-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gai-side-new { font-weight: 500; }
.gai-side-search { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 10px; color: var(--gx-soft); cursor: text; }
.gai-side-search:focus-within { background: var(--gx-hover); }
.gai-side-search input { flex: 1; min-width: 0; padding: 6px 0; border: 0; background: none; color: var(--gx-text); font: inherit; font-size: .875rem; }
.gai-side-search input:focus { outline: none; }
.gai-side-search input::placeholder { color: var(--gx-mute); opacity: 1; }
.gai-side-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 6px -8px 0; padding: 0 8px 8px; }
.gai-side-group { margin: 0; padding: 14px 10px 6px; color: var(--gx-soft); font-size: .75rem; font-weight: 600; }
.gai-side-group:first-child { padding-top: 4px; }
.gai-side-note { margin: 8px 10px; color: var(--gx-soft); font-size: .8125rem; }
.gai-side-chats { list-style: none; margin: 0; padding: 0; }
.gai-side-entry { position: relative; display: flex; align-items: center; border-radius: 10px; }
.gai-side-entry[aria-current="true"], .gai-side-entry.is-current { background: var(--gx-strong); }
.gai-side-chat {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--gx-text); font-size: .875rem; text-align: start;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.gai-side-tools { display: flex; flex: none; padding-inline-end: 2px; }
.gai-side-tools .gai-act { width: 30px; height: 30px; }
.gai-side-rename { flex: 1; min-width: 0; margin: 2px; padding: 6px 8px; border: 1px solid var(--gx-accent); border-radius: 8px; background: var(--gx-bg); color: var(--gx-text); font: inherit; font-size: .875rem; }
@media (hover: hover) {
  .gai-side-entry:not(:hover):not(:focus-within):not(.is-current) .gai-side-tools { opacity: 0; }
}
.gai-side-foot { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--gx-line); }
.gai-side-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px 2px 4px; }
.gai-theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--gx-hover); }
.gai-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--gx-soft); cursor: pointer; }
.gai-theme-btn .icon { width: 16px; height: 16px; }
.gai-theme-btn[aria-checked="true"] { background: var(--gx-bg); color: var(--gx-text); box-shadow: 0 1px 3px rgb(0 0 0 / .15); }
.gai-lang { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border-radius: 10px; color: var(--gx-text) !important; font-size: .875rem; text-decoration: none; }
.gai-lang:hover { background: var(--gx-hover); }
.gai-scrim { position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / .4); }

/* Drawer: phones and tablets (JS adds .gai-drawer-mode below 900 px, and always in the widget's frame). */
@media (max-width: 899.98px) { .gai-app:not(.gai-js) .gai-side { display: none; } }
.gai-app-embed:not(.gai-js) .gai-side { display: none; }
.gai-drawer-mode .gai-side {
  display: flex; position: fixed; inset: 0 auto 0 0; z-index: 46; width: min(300px, 86vw); box-shadow: var(--gx-shadow); transform: translateX(-105%); visibility: hidden;
}
[dir="rtl"] .gai-drawer-mode .gai-side { transform: translateX(105%); }
.gai-drawer-mode.gai-side-open .gai-side { transform: none; visibility: visible; }

/* ---- main column ---- */
.gai-main { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; outline: none; }
.gai-top { flex: none; display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 6px 8px; }
.gai-top-gap { flex: 1 1 auto; }
.gai-side-toggle, .gai-top-new, .gai-menu { display: none; }
.gai-js.gai-drawer-mode .gai-side-toggle, .gai-js.gai-side-closed .gai-side-toggle, .gai-js.gai-drawer-mode .gai-top-new, .gai-js.gai-side-closed .gai-top-new { display: inline-flex; }
.gai-js .gai-menu { display: block; }
.gai-app-empty .gai-menu { visibility: hidden; }
.gai-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.gai-col { width: 100%; max-width: 48rem; margin: 0 auto; padding: 0 16px; }
.gai-log { display: flex; flex-direction: column; gap: 22px; padding-top: 12px; padding-bottom: 28px; }
.gai-dock { flex: none; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: var(--gx-bg); }
.gai-fine { margin: 8px 0 0; color: var(--gx-mute); font-size: .75rem; text-align: center; }
.gai-error { margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, #dc2626 10%, var(--gx-bg)); color: inherit; font-size: .875rem; }

/* Empty chat: the greeting and the composer meet in the middle; the suggestions under them. */
.gai-app-empty .gai-scroll { display: flex; flex-direction: column; justify-content: flex-end; }
.gai-app-empty .gai-main::after { content: ""; flex: 1 1 0; }
.gai-hello { padding: 24px 0 26px; text-align: center; }
.gai-greet { margin: 0; color: var(--gx-text); font-family: var(--font-sans); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem); font-weight: 500; letter-spacing: -.01em; }
.gai-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.gai-app:not(.gai-app-empty) .gai-chips { display: none; }
.gai-app .gai-chip {
  max-width: 100%; padding: 8px 14px; border: 1px solid var(--gx-line); border-radius: 999px; background: var(--gx-bg); color: var(--gx-soft); font-size: .875rem;
  line-height: 1.35; text-align: start; overflow-wrap: anywhere; cursor: pointer;
}
.gai-app .gai-chip:hover { background: var(--gx-hover); color: var(--gx-text); }
@media (max-width: 640px) {
  .gai-app-empty .gai-main::after { display: none; }
  .gai-app-empty .gai-scroll { justify-content: center; }
  .gai-dock > .gai-col { display: flex; flex-direction: column; }
  .gai-chips { order: -1; justify-content: flex-start; margin: 0 0 10px; }
  .gai-col { padding: 0 12px; }
}

/* ---- composer ---- */
.gai-composer {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 10px 18px; border: 1px solid var(--gx-comp-line); border-radius: 28px;
  background: var(--gx-comp); box-shadow: 0 2px 12px rgb(0 0 0 / .06);
}
.gai-composer:focus-within { border-color: color-mix(in srgb, var(--gx-accent) 45%, var(--gx-comp-line)); }
.gai-input {
  display: block; width: 100%; min-height: 28px; max-height: 200px; margin: 2px 0 0; padding: 4px 0; border: 0; background: none; color: var(--gx-text);
  font: inherit; font-size: 1rem; line-height: 1.5; resize: none; overflow-y: auto;
}
.gai-input:focus { outline: none; }
.gai-input::placeholder { color: var(--gx-mute); opacity: 1; }
.gai-composer-row { display: flex; align-items: center; gap: 6px; }
.gai-form-tools { display: inline-flex; gap: 4px; }
.gai-tool { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--gx-soft); cursor: pointer; }
.gai-tool:hover { background: var(--gx-hover); color: var(--gx-text); }
.gai-tool[aria-pressed="true"] { background: color-mix(in srgb, #dc2626 14%, transparent); color: #dc2626; }
.gai-send {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: 999px;
  background: var(--gx-accent); color: var(--gx-accent-fg) !important; cursor: pointer;
}
.gai-send .icon, .gai-send svg { width: 20px; height: 20px; }
.gai-send:disabled { background: var(--gx-strong); color: var(--gx-mute) !important; cursor: default; }
.gai-send.is-stop { background: var(--gx-text); color: var(--gx-bg) !important; }
.gai-voice-note { margin: 0 0 8px; color: var(--gx-soft); font-size: .8125rem; }

/* ---- messages ---- */
.gai-app .gai-msg { position: relative; min-width: 0; overflow-wrap: anywhere; }
.gai-app .gai-bubble p { margin: 0 0 .7em; }
.gai-app .gai-bubble p:last-child { margin-bottom: 0; }
.gai-app .gai-msg-visitor { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; max-width: min(80%, 36rem); }
.gai-app .gai-msg-visitor .gai-bubble { padding: 10px 18px; border-radius: 22px; background: var(--gx-pill); line-height: 1.5; }
.gai-app .gai-msg-bot { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.gai-app .gai-msg-bot > :not(.gai-msg-avatar) { grid-column: 2; }
.gai-app .gai-msg-avatar {
  grid-row: 1 / span 6; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--gx-line);
  border-radius: 999px; background: var(--gx-bg); color: var(--gx-text);
}
.gai-app .gai-msg-avatar .icon { width: 16px; height: 16px; }
.gai-app .gai-msg-bot .gai-bubble { padding-top: 2px; line-height: 1.7; }
.gai-app .gai-msg-limit .gai-bubble { color: var(--gx-soft); }
.gai-app .gai-typing-text { cursor: pointer; }
.gai-app .gai-dots { display: inline-flex; gap: 5px; padding: 8px 0; }
.gai-app .gai-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--gx-soft); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .gai-app .gai-dots i { animation: gai-app-dot 1.2s infinite ease-in-out; }
  .gai-app .gai-dots i:nth-child(2) { animation-delay: .15s; }
  .gai-app .gai-dots i:nth-child(3) { animation-delay: .3s; }
  .gai-scroll { scroll-behavior: smooth; }
  .gai-anim.gai-drawer-mode .gai-side { transition: transform .2s ease, visibility .2s; }
  .gai-app .gai-msg { animation: gai-app-in .18s ease-out; }
}
@keyframes gai-app-dot { 0%, 80%, 100% { transform: scale(.7); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@keyframes gai-app-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Sources: a chip under the answer opens the side panel (a bottom sheet on phones). */
.gai-src-btn {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start; max-width: 100%; margin-top: 10px; padding: 5px 12px; border: 1px solid var(--gx-line);
  border-radius: 999px; background: var(--gx-bg); color: var(--gx-soft); font-size: .8125rem; cursor: pointer;
}
.gai-src-btn:hover { background: var(--gx-hover); color: var(--gx-text); }
.gai-src-btn .icon { width: 15px; height: 15px; }
.gai-src-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gai-panel {
  position: fixed; inset: 0 0 0 auto; z-index: 50; width: min(400px, 100vw); display: flex; flex-direction: column; background: var(--gx-bg); color: var(--gx-text);
  border-inline-start: 1px solid var(--gx-line); box-shadow: var(--gx-shadow); outline: none;
}
.gai-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--gx-line); }
.gai-panel-title { margin: 0; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; }
.gai-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; }
@media (max-width: 640px) {
  .gai-panel { inset: auto 0 0 0; width: auto; max-height: 75dvh; border-inline-start: 0; border-radius: 18px 18px 0 0; }
}
.gai-app .gai-sources { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gai-app .gai-source-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 12px 14px; border: 1px solid var(--gx-line); border-radius: 14px; }
.gai-app .gai-source-card:hover { background: var(--gx-hover); }
.gai-app .gai-source-icon { grid-row: 1 / span 2; margin-top: 2px; color: var(--gx-soft); }
.gai-app .gai-source { display: grid; gap: 2px; min-width: 0; color: var(--gx-text) !important; text-decoration: none; }
.gai-app .gai-source-title { font-weight: 600; font-size: .9375rem; }
.gai-app .gai-source-host { color: var(--gx-soft); font-size: .8125rem; }
.gai-app .gai-licence { grid-column: 2; justify-self: start; color: var(--gx-soft) !important; font-size: .75rem; }

/* The action row under answers: always on touch screens and on the last answer, on hover elsewhere. */
.gai-app .gai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 6px 0 0 -6px; }
@media (hover: hover) {
  .gai-app .gai-msg:not(.gai-msg-last):not(:hover):not(:focus-within) > .gai-actions { opacity: 0; }
}
.gai-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 8px;
  background: none; color: var(--gx-soft); font-size: .8125rem; cursor: pointer; list-style: none;
}
.gai-act:hover { background: var(--gx-hover); color: var(--gx-text); }
.gai-act .icon, .gai-act svg { width: 16px; height: 16px; }
.gai-act[aria-pressed="true"] { color: var(--gx-text); }
.gai-act[aria-pressed="true"] svg { fill: currentColor; fill-opacity: .2; }
.gai-act summary, summary.gai-act { list-style: none; }
.gai-app summary::-webkit-details-marker { display: none; }
.gai-app .gai-actions-visitor { margin: 4px -6px 0 0; justify-content: flex-end; }

/* Menus (the "more" menu, an answer's share menu, the model card). */
.gai-menu, .gai-share { position: relative; }
.gai-menu > summary, .gai-share > summary { list-style: none; cursor: pointer; }
.gai-menu-list {
  position: absolute; z-index: 30; inset-inline-end: 0; top: calc(100% + 4px); display: grid; gap: 2px; min-width: 15rem; max-width: calc(100vw - 16px);
  padding: 6px; border: 1px solid var(--gx-line); border-radius: 16px; background: var(--gx-menu); box-shadow: var(--gx-shadow);
}
.gai-share .gai-menu-list { inset-inline: 0 auto; top: auto; bottom: calc(100% + 4px); }
.gai-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--gx-text) !important;
  font-size: .875rem; text-align: start; text-decoration: none; cursor: pointer;
}
.gai-menu-item:hover { background: var(--gx-hover); }
.gai-menu-danger { color: #dc2626 !important; }
[data-theme="dark"] .gai-menu-danger { color: #f87171 !important; }

/* The model picker "GetAI-1" and its card (gai.chat._model with place "app"). */
.gai-model-app { position: relative; min-width: 0; }
.gai-model-app .gai-model-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 10px; color: var(--gx-text); font-size: 1.125rem; font-weight: 500;
  list-style: none; cursor: pointer; white-space: nowrap;
}
.gai-model-app .gai-model-badge:hover, .gai-model-app[open] .gai-model-badge { background: var(--gx-hover); }
.gai-model-app .gai-model-badge > .icon:first-child { display: none; }
.gai-model-app .gai-model-caret { width: 16px; height: 16px; color: var(--gx-soft); }
.gai-model-app .gai-model-card {
  position: absolute; z-index: 30; top: calc(100% + 6px); inset-inline-start: 0; width: min(22rem, calc(100vw - 24px)); max-height: calc(100dvh - 90px); overflow-y: auto;
  padding: 16px; border: 1px solid var(--gx-line); border-radius: 18px; background: var(--gx-menu); box-shadow: var(--gx-shadow); font-size: .875rem;
}
.gai-app-embed .gai-model-app .gai-model-card { position: fixed; top: 56px; left: 8px; right: 8px; width: auto; }
@media (max-width: 640px) { .gai-model-app .gai-model-card { position: fixed; top: 56px; left: 12px; right: 12px; width: auto; } }
.gai-model-app .gai-model-head { margin: 0 0 4px; font-size: 1rem; }
.gai-model-app .gai-model-version { color: var(--gx-soft); font-size: .8125rem; }
.gai-model-app .gai-model-about { margin: 0 0 12px; color: var(--gx-soft); }
.gai-model-app .gai-model-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 12px; }
.gai-model-app .gai-model-stats > div { padding: 8px 10px; border-radius: 12px; background: var(--gx-hover); }
.gai-model-app .gai-model-wide { grid-column: 1 / -1; }
.gai-model-app dt { color: var(--gx-soft); font-size: .75rem; }
.gai-model-app dd { margin: 0; font-weight: 600; }
.gai-model-app .gai-model-lists { display: grid; gap: 10px; }
.gai-model-app .gai-model-list-title { margin: 0 0 4px; font-weight: 600; }
.gai-model-app .gai-model-can, .gai-model-app .gai-model-cannot { margin: 0; padding-inline-start: 18px; color: var(--gx-soft); }

/* Notices in the column (learning, limit, deleted, learned since) and the edit / why forms. */
.gai-notice, .gai-app .gai-chat-note {
  align-self: stretch; margin: 0; padding: 10px 14px; border: 1px solid var(--gx-line); border-radius: 14px; background: var(--gx-side); color: var(--gx-soft); font-size: .875rem;
}
.gai-app .gai-note-learning strong { color: var(--gx-text); }
.gai-app .gai-note-learned { border-color: color-mix(in srgb, var(--gx-accent) 40%, var(--gx-line)); }
.gai-app .gai-note-limit { border-color: color-mix(in srgb, #d97706 45%, var(--gx-line)); }
.gai-app .gai-edit-form { display: grid; gap: 8px; width: min(36rem, 100%); padding: 12px; border-radius: 22px; background: var(--gx-pill); }
.gai-app .gai-msg-visitor.is-editing { align-self: stretch; max-width: none; align-items: stretch; }
.gai-app .gai-edit-input { max-height: 200px; }
.gai-app .gai-why { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border: 1px solid var(--gx-line); border-radius: 14px; }
.gai-app .gai-why-title { margin: 0; font-weight: 600; font-size: .875rem; }
.gai-app .gai-why-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.gai-app .gai-why-chip[aria-checked="true"] { border-color: var(--gx-accent); color: var(--gx-text); }
.gai-app .gai-why-input { width: 100%; padding: 8px 10px; border: 1px solid var(--gx-line); border-radius: 10px; background: var(--gx-bg); color: var(--gx-text); font: inherit; font-size: .875rem; resize: vertical; }
.gai-app .gai-why-row { display: flex; justify-content: flex-end; gap: 6px; }
.gai-app .gai-action { padding: 7px 14px; border: 1px solid var(--gx-line); border-radius: 999px; background: var(--gx-bg); color: var(--gx-text); font-size: .875rem; cursor: pointer; }
.gai-app .gai-action-primary { border-color: transparent; background: var(--gx-text); color: var(--gx-bg); }
.gai-app .gai-action:disabled { opacity: .5; cursor: default; }

/* The jump-to-newest button. */
.gai-jump {
  position: absolute; z-index: 20; left: 50%; bottom: calc(var(--gai-dock-h, 120px) + 10px); display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 1px solid var(--gx-line); border-radius: 999px; background: var(--gx-bg); color: var(--gx-text); box-shadow: var(--gx-shadow);
  transform: translateX(-50%); cursor: pointer;
}

/* The widget's frame (F8): no sidebar; the close / expand buttons only inside a frame. */
.gai-app-embed .gai-top { padding-inline: 6px; }
.gai-app-embed .gai-greet { font-size: 1.5rem; }
.gai-app-embed .gai-side-top { padding-inline-start: 10px; }

/* Print or save as PDF: the chat only (share.js printNode marks one answer with .gai-print-this). */
@media print {
  .gai-app-body { height: auto; overflow: visible; display: block; }
  .gai-app { display: block; }
  .gai-side, .gai-top, .gai-dock, .gai-jump, .gai-scrim, .gai-panel, .gai-app .gai-actions, .gai-src-btn, .skip-link, .gai-hello { display: none !important; }
  .gai-scroll { overflow: visible; }
  .gai-print-single .gai-app .gai-msg:not(.gai-print-this), .gai-print-single .gai-notice { display: none; }
}