/*
 * „z głowy.” identity for both variants (after codex/landing-v2, the current landing, and the
 * app in demo/web/app). Tokens, the logo, buttons, the assistant's card and the finale.
 * Each variant adds its own layout in its styles.css and may override sizes.
 *
 * Colors: white page, navy ink, one blue (navigation, primary button, what the assistant has
 * handled), pale blue surfaces, yellow only for a decision (the bar with OK, „czeka na Ciebie”).
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/plus-jakarta-sans.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --white: #fff;
  --ink: #172c42;
  --ink-2: #33475e;
  --muted: #526478;
  --blue: #234adb;
  --blue-hover: #1939b5;
  --blue-soft: #e4ecfd;
  --blue-line: #a7b9eb;
  --pale: #edf3ff;
  --pale-2: #dce6fa;
  --pale-line: #cdd9ee;
  --line: #d6dfeb;
  --control-line: #8190a5;
  --decision: #f4e36c;
  --decision-soft: #fbf4c4;
  --decision-ink: #6a5800;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --r-btn: 5px;
  --r-card: 8px;
  --r-panel: 10px;
  --shadow-card: 0 2px 5px #172c4210, 0 9px 20px #172c4206;
  --shadow-float: 0 2px 8px #172c4214, 0 18px 44px #172c4224;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pop: cubic-bezier(0.3, 1.5, 0.5, 1);
  /* Channels: quiet, slightly desaturated, so they tell channels apart without shouting. */
  --ch-mail: #4e72c8;
  --ch-whatsapp: #3f9a6b;
  --ch-sms: #2f8f9d;
  --ch-messenger: #7f66c9;
  --ch-instagram: #b8587e;
  --ch-form: #5f7aa6;
  --ch-call: #5e6c80;
  --ch-review: #b8912c;
  color-scheme: light;
}

/* ---------- logo: glasses + „z głowy.” ---------- */
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-lockup .glasses { width: 58px; height: auto; flex: 0 0 auto; }
.brand-word { font-family: var(--font); font-size: 27px; font-weight: 800; letter-spacing: -1.2px; line-height: 1; white-space: nowrap; }

/* ---------- glasses everywhere ---------- */
.glasses { display: block; overflow: visible; color: var(--ink); }
.glasses .pupil { transition: transform 220ms ease-out; }
.glasses circle { transform-box: fill-box; transform-origin: center; }

/* ---------- buttons and links (codex/landing-v2) ---------- */
.button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 48px; padding: 13px 20px; border-radius: var(--r-btn); border: 1px solid transparent;
  font-family: var(--font); font-size: 15px; line-height: 1.3; font-weight: 700; text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color 160ms, color 160ms, border-color 160ms;
}
.button.primary { color: var(--white); background: var(--blue); }
.button.primary:hover { background: var(--blue-hover); }
.button.ink { color: var(--white); background: var(--ink); }
.button.ink:hover { background: #0b1c2f; }
.button.quiet { background: var(--white); border-color: var(--control-line); color: var(--ink); }
.button.quiet:hover { background: var(--pale); }
.text-link {
  display: inline-flex; align-items: center; gap: 14px; min-height: 44px;
  font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.text-link:hover { color: var(--blue); }
.arrow { font-size: 0.9em; }

/* ======================================================================
   The assistant's card (shared/stream.js), styled after the app:
   white card, hairline, a quiet header, the draft, a yellow decision bar.
   ====================================================================== */
.st__slot { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.st__slot.is-in { grid-template-rows: 1fr; }
.st__slot.is-out { grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease) 0.16s; }
.st__clip { min-height: 0; overflow: hidden; padding: 0 2px 10px; }
.nt {
  --ch: var(--ch-mail);
  position: relative; overflow: hidden; border-radius: var(--r-panel);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  font-family: var(--font); color: var(--ink);
  opacity: 0; transform: translateY(-10px) scale(0.98);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.is-in > .st__clip > .nt { opacity: 1; transform: none; }
.is-out > .st__clip > .nt { opacity: 0; transform: translateX(14%) scale(0.98); transition-duration: 0.36s; }
.nt[data-ch="mail"] { --ch: var(--ch-mail); }
.nt[data-ch="whatsapp"] { --ch: var(--ch-whatsapp); }
.nt[data-ch="sms"] { --ch: var(--ch-sms); }
.nt[data-ch="messenger"] { --ch: var(--ch-messenger); }
.nt[data-ch="instagram"] { --ch: var(--ch-instagram); }
.nt[data-ch="form"] { --ch: var(--ch-form); }
.nt[data-ch="call"] { --ch: var(--ch-call); }
.nt[data-ch="review"] { --ch: var(--ch-review); }

/* the notification itself */
.nt__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 12px 10px; }
.nt__app { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ch); color: #fff; }
.nt__app svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nt__txt { min-width: 0; }
.nt__meta { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.nt__meta b { font-weight: 700; }
.nt__meta time { font-variant-numeric: tabular-nums; }
.nt__from { margin: 1px 0 0; font-size: 14px; font-weight: 700; line-height: 1.3; }
.nt__msg { margin: 1px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* a photo the customer sent: a square next to the text, or a wide crop above it (like a chat photo) */
.nt__body--thumb { display: grid; grid-template-columns: var(--pic-thumb, 64px) minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 5px; }
.nt__body--thumb .nt__msg { margin: 0; -webkit-line-clamp: 3; }
.nt__body--wide { margin-top: 6px; }
.nt__body--wide .nt__msg { margin-top: 6px; }
.nt__pic { position: relative; display: block; overflow: hidden; border-radius: 9px; background: var(--pale-2); }
/* hairline on top of the photo, so a bright edge (window, paper) does not melt into the white card */
.nt__pic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(23, 44, 66, 0.12); pointer-events: none; }
.nt__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nt__pic--thumb { aspect-ratio: 1; }
.nt__pic--wide { aspect-ratio: 2 / 1; }
.nt__sent { display: none; }

/* the assistant, under the notification */
.as { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.is-reading .as { grid-template-rows: 1fr; }
.as__in { min-height: 0; overflow: hidden; }
.as__head { display: flex; align-items: center; gap: 9px; margin: 0; padding: 8px 12px 6px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.as__head .glasses { width: 34px; flex: 0 0 auto; }
.as__head .glasses .pupil { transition: transform 160ms ease-out; }
.is-reading:not(.is-ready) .as__head .pupil { animation: scan 0.9s ease-in-out infinite; }
@keyframes scan { 0%, 100% { transform: translate(-9px, 3px); } 50% { transform: translate(9px, 3px); } }
.as__state { display: grid; }
.as__state > span { grid-area: 1 / 1; transition: opacity 0.25s; }
.as__done { opacity: 0; display: inline-flex; align-items: center; gap: 7px; }
.as__done::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--decision); box-shadow: 0 0 0 1px #d9c341; }
.is-ready .as__reading { opacity: 0; }
.is-ready .as__done { opacity: 1; }
.is-sent .as__done::before { background: var(--blue); box-shadow: none; }

.as__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.is-ready .as__body { grid-template-rows: 1fr; }
.as__bodyin { min-height: 0; overflow: hidden; }
.as__sum { margin: 0; padding: 0 12px 8px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.as__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.is-ready:not([data-mode="ask"]) .as__more,
.is-answered .as__more { grid-template-rows: 1fr; }
.as__morein { min-height: 0; overflow: hidden; }
.as__draft { margin: 0 12px; padding: 8px 0 10px; border-top: 1px solid var(--line); }
.as__label { margin: 0 0 3px; font-size: 12px; font-weight: 700; color: var(--muted); }
.as__reply { margin: 0; font-size: 13.5px; line-height: 1.5; }
.as__src { margin: 6px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.as__src i { font-style: normal; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }

/* letter by letter (opt-in in Stream.create, the first slow messages): the rest of the text is laid out
   but invisible, so the card keeps its size; a thin blue caret while typing; the customer's text is
   shown whole (no 2-line cut, typing into a hidden line would look like a stall); the draft opens
   when the summary is done, the source fades in when the reply is */
.tw__off { visibility: hidden; }
.tw__caret { display: none; border-left: 2px solid var(--blue); margin-right: -2px; }
.is-typing > .tw__caret { display: inline; }
.nt.is-typed .nt__msg { display: block; -webkit-line-clamp: unset; }
.nt.is-typed:not(.is-draft) .as__more { grid-template-rows: 0fr; }
.nt.is-typed .as__src { opacity: 0; transition: opacity 0.4s; }
.nt.is-typed.is-src .as__src { opacity: 1; }

/* your answer when the assistant asks (mode "ask") */
.as__ask { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 12px 10px; }
.as__chip { position: relative; padding: 7px 11px; border-radius: var(--r-btn); border: 1px solid var(--blue-line); background: var(--white); color: var(--blue); font-size: 13px; font-weight: 700; transition: background 0.2s, color 0.2s; }
.is-answered .as__chip:first-child { background: var(--blue); color: #fff; border-color: var(--blue); }

/* the decision bar: yellow = your decision; after the tap it turns pale blue */
.as__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 12px; background: var(--decision); transition: background 0.3s; }
.as__who { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.as__ok {
  position: relative; display: inline-grid; place-items: center; min-width: 76px; min-height: 36px; padding: 0 16px;
  border-radius: var(--r-btn); border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden;
  transition: transform 0.12s, background 0.25s, color 0.25s, border-color 0.25s, min-width 0.35s var(--ease);
}
.as__ok > span { position: relative; z-index: 1; grid-area: 1 / 1; transition: opacity 0.2s; }
.as__ok-b { opacity: 0; }
/* the "finger": a ring that presses the button */
.as__ok::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); transform: scale(0); opacity: 0; }
.is-pressed .as__ok { transform: scale(0.95); }
.is-pressed .as__ok::after { animation: tap 0.42s ease-out; }
@keyframes tap { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
.is-sent .as__foot { background: var(--blue-soft); }
.is-sent .as__ok { transform: none; background: transparent; color: var(--blue); border-color: var(--blue-line); min-width: 150px; }
.is-sent .as__ok-a { opacity: 0; }
.is-sent .as__ok-b { opacity: 1; }

/* "you": the assistant never answers; it stays yellow and goes to your desk */
.nt[data-mode="you"] { border-color: #e3cf4d; box-shadow: 0 0 0 2px var(--decision), var(--shadow-card); }
.nt[data-mode="you"].is-sent .as__foot { background: var(--decision-soft); }
.nt[data-mode="you"].is-sent .as__ok { color: var(--decision-ink); border-color: #d9c341; }

/* compact: the flood. Only the notification and "Wysłano …" */
.nt.is-compact .as { display: none; }
.nt.is-compact .nt__row { padding: 8px 10px; align-items: center; }
.nt.is-compact .nt__msg { -webkit-line-clamp: 1; }
.nt.is-compact .nt__meta { display: none; }
.nt.is-compact .nt__sent {
  display: inline-block; position: absolute; right: 10px; top: 50%; padding: 4px 8px; border-radius: 4px; background: var(--blue-soft); color: var(--blue);
  font-size: 11.5px; font-weight: 700; white-space: nowrap; opacity: 0; transform: translateY(-50%) scale(0.85); transition: opacity 0.15s, transform 0.2s var(--pop);
  box-shadow: -14px 0 12px var(--white);
}
.nt.is-compact.is-sent .nt__sent { opacity: 1; transform: translateY(-50%); }
.nt.is-compact.is-sent { border-color: var(--blue-line); }

/* ======================================================================
   Finale (shared/eyes.js Eyes.finale): big glasses draw in, the pupils pop in,
   look around while the line comes up, then look down at the button.
   ====================================================================== */
.fin { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--font); color: var(--ink); visibility: hidden; }
.fin.fin-on { visibility: visible; }
.fin__glasses { width: min(220px, 62%); }
.fin__glasses .glasses { width: 100%; }
.fin__glasses .glasses > g:first-child { opacity: 0; transition: opacity 0.4s 0.35s; }
.fin__glasses .glasses__lens path { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 0.75s var(--ease), fill-opacity 0.4s 0.5s; }
.fin__glasses .pupil circle { transform: scale(0); transition: transform 0.4s var(--pop); }
.fin.fin-on .glasses > g:first-child { opacity: 1; }
.fin.fin-on .glasses__lens path { stroke-dashoffset: 0; fill-opacity: 1; }
.fin.fin-eyes .pupil circle { transform: scale(1); animation: blink 0.28s ease-in-out 0.9s; }
@keyframes blink { 50% { transform: scale(1, 0.08); } }
.fin__text > * { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.fin.fin-text .fin__text > * { opacity: 1; transform: none; }
.fin.fin-text .fin__text > :nth-child(2) { transition-delay: 0.18s; }
.fin.fin-text .fin__text > :nth-child(3) { transition-delay: 0.36s; }
.fin__zero { margin: 0; font-size: 13px; font-weight: 700; color: var(--blue); letter-spacing: 0.01em; }
.fin__title { word-spacing: 0.1em; margin: 8px 0 0; font-size: 30px; font-weight: 800; line-height: 1.08; letter-spacing: -0.045em; text-wrap: balance; }
.fin__title .brand-word { font-size: inherit; letter-spacing: inherit; color: var(--blue); }
.fin__stats { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.fin__stats b { color: var(--ink); }
.fin__stats .is-you { color: var(--decision-ink); }
.fin__cta { margin-top: 18px; opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.45s var(--ease), transform 0.55s var(--pop); }
.fin.fin-cta .fin__cta { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .st__slot, .nt, .as, .as__body, .as__more, .as__ok, .fin *, .glasses .pupil { transition: none !important; animation: none !important; }
}