/* Step ②'s chat (chat.js): one white panel under the proposals, bubbles in the page's tokens. Its field stays at the bottom
   of the screen while the chat is on it (sticky). Rows open with the page's .reveal and swap content with .morph.
   On a phone it opens as its own pane over the page (end of this file). */
#editReveal:not(.open) { display: none; }
.chat.docked .ch-skip { display: none; } /* in the editor (editor.js) the chat changes the design, it asks nothing */ /* closed when he registers (proposals.js registered()), on step ③ */
.chat { padding-block: 0; max-width: 720px; margin: 40px auto 0; border-radius: 24px; background: var(--surface); border: .5px solid var(--hair-2); }
.ch-log { display: grid; padding: 20px clamp(14px, 3vw, 24px) 4px; }
.ch-msg > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 8px; }
.ch-msg.u > div { align-items: flex-end; }
.ch-b { max-width: min(85%, 520px); padding: 10px 14px; border-radius: 18px; font-size: .9375rem; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ch-msg.a .ch-b { background: var(--bg-2); color: var(--ink); border-bottom-left-radius: 6px; }
.ch-msg.u .ch-b { background: var(--btn); color: var(--btn-ink); border-bottom-right-radius: 6px; }

/* the assistant writing: three dots */
.ch-typing { display: inline-flex; gap: 4px; padding: 15px 16px; }
.ch-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: chDot 1.2s ease-in-out infinite; }
.ch-typing i:nth-child(2) { animation-delay: .15s; }
.ch-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chDot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* the website being read: a card that fills in part by part (chat.js addPart) – a spinner and a running bar while it is
   read, then the logo, the palette (the colour the signatures took ticked), the fonts, the profiles, and phone, address
   and slogan as lines; the spinner turns into a check, or a mark when the site could not be read. Whole pixels: parts
   never rest at fractions. */
.ch-site { width: min(360px, 100%); padding: 14px 16px 16px; border-radius: 18px; box-shadow: inset 0 0 0 .5px var(--hair-2); font-size: .875rem; line-height: 20px; }
.cs-head { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.ch-state { display: grid; place-items: center; width: 16px; height: 16px; flex: none; }
.ch-state > * { grid-area: 1 / 1; opacity: 0; transition: opacity .2s ease; }
.ch-state svg:first-of-type { color: #30a46c; }
.ch-state svg:last-of-type { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); }
.ch-site[data-state="reading"] .ch-state .spin, .ch-site[data-state="done"] .ch-state svg:first-of-type, .ch-site[data-state="protected"] .ch-state svg:first-of-type, .ch-site[data-state="failed"] .ch-state svg:last-of-type { opacity: 1; }
.cs-bar { height: 2px; margin-top: 12px; border-radius: 1px; background: var(--bg-2); overflow: hidden; transition: opacity .2s ease, height .3s ease .2s, margin-top .3s ease .2s; }
.cs-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--ink-3); animation: csRun 1.2s ease-in-out infinite; }
@keyframes csRun { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.ch-site:not([data-state="reading"]) .cs-bar { opacity: 0; height: 0; margin-top: 0; }
.ch-site:not([data-state="reading"]) .cs-bar i { animation: none; }
.cs-body { display: grid; overflow: hidden; padding: 0 3px; margin: 0 -3px; } /* room for the ticked swatch's ring */
.cs-part { padding-top: 14px; }
.cs-t { font-size: .75rem; line-height: 16px; color: var(--ink-3); margin-bottom: 8px; }
.cs-logo { display: inline-grid; place-items: center; max-width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 .5px var(--hair-2); }
.cs-logo img { display: block; max-width: min(220px, 100%); max-height: 40px; object-fit: contain; }
.cs-sw { list-style: none; margin: 0; padding: 3px 0 0; display: flex; flex-wrap: wrap; gap: 12px 14px; }
.cs-sw li { display: grid; justify-items: center; gap: 6px; }
.cs-sw i { width: 36px; height: 36px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); display: grid; place-items: center; color: #fff; }
.cs-sw i.light { color: var(--ink); }
.cs-sw .main i { box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
.cs-sw span { font-size: .6875rem; line-height: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cs-sw .main span { color: var(--ink); font-weight: 600; }
.cs-cap { margin-top: 10px; font-size: .75rem; line-height: 16px; color: var(--ink-3); }
.cs-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chips li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--bg-2); color: var(--ink); font-size: .9375rem; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-soc li { font-size: .875rem; padding-left: 10px; }
.cs-soc i { display: grid; place-items: center; width: 16px; height: 16px; flex: none; }
.cs-soc i svg { width: 15px; height: 15px; }
.cs-line { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); overflow-wrap: anywhere; }
.cs-ic { flex: none; display: grid; place-items: center; width: 16px; height: 20px; color: var(--ink-3); }
.cs-ic svg { width: 15px; height: 15px; }
.cs-ic.cs-ok { color: #30a46c; }
.cs-dim, .cs-none { color: var(--ink-3); }

/* the field: sticky at the bottom of the screen; a chip above it while a design is pointed at ("Popraw dalej") */
.ch-bar { position: sticky; bottom: 0; z-index: 5; padding: 8px clamp(10px, 2vw, 16px) calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 0 0 24px 24px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ch-point > div > .ch-chip { margin-bottom: 8px; }
.ch-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 12px; border-radius: 999px; background: var(--bg-2); font-size: .8125rem; color: var(--ink-2); max-width: 100%; }
.ch-chip .swap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-chip button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.ch-chip button:hover { background: var(--surface); color: var(--ink); }
.ch-row { display: flex; align-items: flex-end; gap: 6px; }
.ch-row textarea { flex: 1; min-width: 0; height: 44px; max-height: 120px; resize: none; padding: 11px 16px; border: 0; border-radius: 22px; background: var(--bg-2); color: var(--ink); font: 400 1rem/1.4 var(--sans); transition: box-shadow .2s ease; } /* 16 px: phones do not zoom in */
.ch-row textarea::placeholder { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Safari ends it with "…" */
.ch-row textarea:placeholder-shown { white-space: nowrap; overflow: hidden; } /* empty: one line, never a half-shown second one */
.ch-row textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
.ch-icon, .ch-send { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background-color .2s ease, color .2s ease, opacity .2s ease, transform .15s ease; }
.ch-icon { background: transparent; color: var(--ink-2); }
.ch-icon:hover { background: var(--bg-2); color: var(--ink); }
.ch-send { background: var(--btn); color: var(--btn-ink); }
.ch-send:active { transform: scale(.96); }
.ch-bar[aria-busy] .ch-send, .ch-bar[aria-busy] .ch-icon { opacity: .4; pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the colour control in a message: his website's colours first (suggestions), then ours, then any colour he likes;
   40 px tap targets around 30 px circles, like the page's swatches */
.ch-colors { display: grid; gap: 4px; }
.ch-colors .swatches { flex-wrap: wrap; align-items: center; gap: 2px; }
.ch-colors .swatches button { width: 40px; height: 40px; padding: 5px; background-clip: content-box !important; box-shadow: none; } /* !important: the colour is an inline background */
.ch-colors .swatches button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ch-sep { width: 1px; height: 22px; margin: 0 6px; background: var(--hair-2); }
.ch-pick { position: relative; width: 40px; height: 40px; padding: 5px; border-radius: 50%; cursor: pointer; background: conic-gradient(#e5484d, #f5b30b, #30a46c, #2d4fd6, #6b3fd0, #e5484d) content-box; transition: transform .15s ease; }
.ch-pick::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff; transition: background-color .2s ease; }
.ch-pick:hover { transform: scale(1.06); }
.ch-pick:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.ch-pick input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.ch-cap { font-size: .8125rem; line-height: 18px; color: var(--ink-3); padding-left: 5px; }

/* A phone: the chat as its own pane over the page (chat.js open()), like a messenger app – the preview of a signature on
   top, the messages the only thing that scrolls, the field at the bottom. The pane is as tall as what the keyboard leaves
   (--vv-h, --vv-top: the visual viewport, chat.js fitViewport), and the page under it does not scroll. On the page the chat shows its newest
   answer and what fits above it; a tap opens the pane with all of it. */
html.ch-lock { overflow: hidden; overscroll-behavior: none; } /* the viewport only: body overflow would unstick the page's bar */
.chat > * { transition: opacity .2s ease; }
.chat.hush > * { opacity: 0; }
.ch-top { display: none; }
@media (max-width: 720px) {
  .chat:not(.docked):not(.full) .ch-log { cursor: pointer; }
  .chat:not(.docked):not(.full) .ch-msg.earlier { display: none; } /* whole messages only (chat.js trimInline) */
}
/* open, it stays a pane until it is closed, also when the phone turns sideways */
.chat.full { position: fixed; z-index: 60; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100dvh); margin: 0; max-width: none; border: 0; border-radius: 0; display: flex; flex-direction: column; }
.chat.full .ch-top { display: block; flex: none; padding: env(safe-area-inset-top, 0px) 0 12px; border-bottom: .5px solid var(--hair); }
.chat.full .ch-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; padding-bottom: 8px; scrollbar-width: none; }
.chat.full .ch-log::-webkit-scrollbar { display: none; }
.chat.full .ch-bar { position: relative; flex: none; border-radius: 0; }
.chat.full.kb .ch-bar { padding-bottom: 10px; } /* the keyboard covers the home indicator */
.ch-top-row { display: flex; align-items: center; gap: 2px; height: 48px; padding: 0 6px 0 16px; }
.ch-peek-name { flex: 1; min-width: 0; font-size: .875rem; font-weight: 600; letter-spacing: -0.01em; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-count { font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ch-tool { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.ch-tool:hover { background: var(--bg-2); color: var(--ink); }
.ch-peek { display: grid; justify-items: center; align-items: start; margin: 0 16px; overflow: hidden; cursor: pointer; }
.ch-peek-sig { grid-area: 1 / 1; width: 400px; pointer-events: none; } /* the design at its GIF's width, zoomed to fit (chat.js sizePeek) */
.ch-peek-sig:not(:has(> .g-gif)) { display: grid; justify-items: start; padding: 10px; }
.ch-peek-sig > .g-gif { display: block; width: 400px; height: auto; }

/* An answer that could not come (Claude down, the connection): why, with a small mark, and "Spróbuj ponownie" under it
   (chat.js failHtml – the panel's chat and the Studio alike); his message stays above it. */
.ch-fail { display: flex; gap: 8px; align-items: flex-start; }
.ch-fail svg { flex: none; margin-top: 4px; width: 14px; height: 14px; color: var(--danger, #c4231a); }
.ch-fail span { flex: 1; min-width: 0; white-space: normal; } /* wraps inside the bubble, no space hanging past it */
.ch-retry { margin-top: 8px; }