/* Click Agent › 채팅 (click-chat.js) as the Click Agent.html 시안 draws it (user 11-12 16:4x): one plate (click-parts
   .cx-plate) under the page's tabs. Before a question, in its middle one under another: the approvals waiting, the Click
   mark, the headline, the input and the questions to start from, with the brand yellow rising behind the input. After
   it, the plate's head (the earlier conversations, 새 대화), the turns in one reading column and the input under them,
   kept at the window's bottom; the yellow rests low and faint behind the input. Every part wraps inside the screen at
   390: a long id, a table or a line of code scrolls in its own box, never the page. Layout only: the parts' sizes,
   colours and words are click-parts.css's. */
/* The plate fills the page's whole room under the tabs: no gutter beside it (user 20:3x, as lovable.dev). */
main.lx-page:has(>[data-page="click-chat"].active){max-width:none;padding:0}
[data-page="click-chat"] .lc-chat{--lc-gutter:24px;display:flex;flex-direction:column;align-items:center;gap:0;width:100%;max-width:none;margin:0;padding:0 0 28px;min-height:calc(100vh - var(--header-h) - var(--tabs-h))}
.lc-chat[data-click-chat="talk"] .lc-hello,.lc-chat[data-click-chat="talk"] .lc-suggest,.lc-chat[data-click-chat="start"] .lc-log{display:none}

/* The head: on the first screen two quiet controls at the plate's top right; under a conversation the plate's head line. */
.lc-bar{align-self:stretch;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-height:56px;margin:0;padding:10px 14px}
.lc-chat .lc-bar>.lc-bar-mark{display:none}
.lc-chat[data-click-chat="talk"] .lc-bar{justify-content:flex-start;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 72%,transparent)}
.lc-chat[data-click-chat="talk"] .lc-bar>.lc-bar-mark{display:inline-grid}
.lc-chat[data-click-chat="talk"] .lc-bar>.cx-icon-btn{margin-left:auto}
/* Under a conversation the head stays under the page's tabs while the turns scroll. */
.lc-chat[data-click-chat="talk"] .lc-bar{position:sticky;top:calc(var(--header-h) + var(--tabs-h));z-index:3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lc-past{position:relative;display:inline-flex;align-items:center;min-width:0;max-width:min(360px,100%);margin:0}
.lc-past>.lc-past-i{position:absolute;left:10px;width:16px;height:16px;color:var(--ink-3);pointer-events:none}
.lc-past select{field-sizing:content;min-width:0;max-width:100%;height:32px;padding-left:32px;border-color:transparent;border-radius:var(--r-pill);background-color:transparent;color:var(--ink-2);font-size:var(--fs-sm);font-weight:500;text-overflow:ellipsis}
.lc-past select:hover:not(:disabled){border-color:var(--border);background-color:var(--surface)}
.lc-chat[data-click-chat="talk"] .lc-past select{color:var(--ink);font-weight:600}

/* The first screen: the waiting approvals, the mark and the headline, centred with the input and the questions below. */
.lc-hello{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(760px,calc(100% - 2 * var(--lc-gutter)));margin:auto 0 0;padding:32px 0 26px;text-align:center}
.lc-hello .cx-pill{margin-bottom:12px}
.lc-hello-t{margin:0;color:var(--ink);font-size:var(--fs-display);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.lc-hello-s{margin:0;color:var(--muted)}
.lc-suggest{width:min(760px,calc(100% - 2 * var(--lc-gutter)));margin:0 0 auto;padding:22px 0 48px}
.lc-suggest-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lc-suggest>.lx-lbl{margin:0 0 10px;text-align:center}
.lc-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}

/* The turns: one reading column; the question a cloud bubble at the right with its purpose under it, the answer under
   the Click mark and its name, then its quiet row. */
.lc-log{flex:1;display:flex;flex-direction:column;gap:30px;width:min(800px,calc(100% - 2 * var(--lc-gutter)));min-width:0;padding:28px 0 12px}
.lc-turn{display:flex;flex-direction:column;gap:10px;min-width:0;scroll-margin:calc(var(--header-h) + var(--tabs-h) + 72px) 0 180px}
.lc-q{align-self:flex-end;max-width:80%;padding:10px 16px;border-radius:var(--r-plate);background:var(--brand-cloud);color:var(--ink)}
.lc-q p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.lc-q-why{align-self:flex-end;margin:-4px 4px 0;font-size:var(--fs-2xs)}
.lc-a-head{display:flex;align-items:center;gap:8px;margin-top:6px;color:var(--ink);font-size:var(--fs-sm)}
.lc-a{display:block;min-width:0}
.lc-a-body{min-width:0;display:flex;flex-direction:column;gap:12px;overflow-wrap:anywhere}
.lc-answer{color:var(--ink);font-size:var(--fs-body);line-height:1.75}
.lc-answer p,.lc-answer ul,.lc-answer ol{margin:0 0 10px}
.lc-answer ul,.lc-answer ol{padding-left:20px}
.lc-answer :is(h1,h2,h3,h4){margin:18px 0 8px;color:var(--ink);font-size:var(--fs-section);font-weight:700}
.lc-answer table{display:block;max-width:100%;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-card);border-collapse:separate;border-spacing:0;background:var(--surface);font-size:var(--fs-sm)}
.lc-answer :is(th,td){padding:9px 14px;border-bottom:1px solid var(--divider-soft);text-align:left;white-space:normal}
.lc-answer th{background:var(--bg-head);color:var(--muted);font-size:var(--fs-2xs);font-weight:500}
.lc-answer tr:last-child>td{border-bottom:0}
.lc-answer code{padding:1px 5px;border-radius:var(--r-xs);background:var(--bg-subtle);font-family:var(--font-mono);font-size:var(--fs-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.lc-answer pre{max-width:100%;overflow-x:auto;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-subtle)}
/* 근거 화면: a card on the plate, each screen a pill with an outward mark. */
.lc-ev{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:2px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.lc-ev>span:first-child{margin-right:4px;color:var(--ink-2);font-weight:600}
.lc-ev .lx-lk,.lc-a-body .lx-lk[data-testid="click-answer-screen"]{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-size:var(--fs-xs);font-weight:500;text-decoration:none}
.lc-ev .lx-lk:hover,.lc-a-body .lx-lk[data-testid="click-answer-screen"]:hover{border-color:var(--border-strong);color:var(--ink)}
.lc-ev .lc-ev-go{width:14px;height:14px;color:var(--faint)}
/* A change the answer filed for approval: the design's 'Click 제안' card, the brand yellow faint on its edge and ground. */
.lc-a-body>[data-click-chat-decide]{padding:14px 16px;border-color:color-mix(in srgb,var(--brand-yellow) 55%,var(--border));border-radius:var(--r-card);background:color-mix(in srgb,var(--brand-yellow) 7%,var(--surface))}
/* An answer that did not come: one quiet card, its edge the danger line. */
.lc-a:is([data-click-chat-reply="failed"],[data-click-chat-reply="error"],[data-click-chat-reply="poll_error"]) .lc-a-body{padding:12px 14px;border:1px solid var(--danger-line);border-radius:var(--r-card);background:var(--surface)}
.lc-goon{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0}
.lc-a-tools{display:flex;align-items:center;gap:2px;margin:-2px 0 0 -6px}
.lc-a-tools>.lx-lbl:empty{display:none}
.lc-wait{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;color:var(--ink-3)}
.lc-wait .lc-spin{width:16px;height:16px;color:var(--ink);animation:lc-spin 1s linear infinite}
@keyframes lc-spin{to{transform:rotate(360deg)}}

/* The input: the plate's white box (r-plate, lifted by its shadow; no glow of its own, user 20:3x), the purpose pill at
   its bottom left, the round send at its bottom right. Under a conversation it stays at the window's bottom. */
/* What stands in the way, or the purpose, is read before the field (its place in the markup) and drawn at the box's bottom left. */
.lc-compose{position:sticky;bottom:20px;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"field field" "gate send";align-items:center;gap:6px 8px;width:min(760px,calc(100% - 2 * var(--lc-gutter)));padding:14px 14px 12px 18px;border:1px solid var(--border);border-radius:var(--r-plate);background:var(--surface);box-shadow:var(--shadow-compose)}
.lc-chat[data-click-chat="talk"] .lc-compose{width:min(800px,calc(100% - 2 * var(--lc-gutter)));margin-top:8px}
.lc-field{grid-area:field;display:block;margin:0}
textarea.lc-in{display:block;width:100%;min-height:56px;max-height:40vh;margin:0;padding:4px 0;border:0;border-radius:0;background:transparent;color:var(--ink);font:inherit;line-height:1.55;resize:none;box-shadow:none}
textarea.lc-in:focus-visible{outline:none}
.lc-chat[data-click-chat="talk"] textarea.lc-in{min-height:44px}
[data-page="click-chat"] .lc-compose-f{grid-area:send;display:flex;align-items:center;justify-content:flex-end}
.lc-gate{grid-area:gate;min-width:0}
.lc-gate p{margin:0}
.lc-purpose{display:inline-flex;align-items:center;gap:6px;height:34px;margin:0;padding:0 4px 0 10px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-size:var(--fs-xs);font-weight:500}
.lc-purpose:hover:not(:has(select:disabled)){border-color:var(--ink)}
.lc-purpose:focus-within{outline:2px solid var(--select-ring);outline-offset:2px}
.lc-purpose>.lc-purpose-i{width:16px;height:16px;color:var(--ink-2)}
.lc-purpose select{height:30px;min-width:0;padding-left:2px;border:0;background-color:transparent;color:var(--ink);font-size:var(--fs-xs);font-weight:600;box-shadow:none}
.lc-purpose select:focus-visible{outline:none}
.lc-send{flex:none;margin-left:auto}
/* Focused, the box's edge is the ink. */
[data-page="click-chat"] .lc-chat .lc-compose:focus-within{border-color:var(--ink)}

/* The colour field: whole on the first screen; under a conversation fainter, so a long answer reads on it, and a little
   brighter while an answer is being written. */
.lc-chat[data-click-chat="talk"]{--plate-glow:.45}
.lc-chat[data-click-chat="talk"]:has([data-click-chat-busy]){--plate-glow:.75}

@media (max-width:640px){
  [data-page="click-chat"] .lc-chat{--lc-gutter:14px;padding:0 0 18px}
  .lc-bar{padding:8px 8px}
  .lc-hello{padding-top:20px}
  .lc-hello-t{font-size:var(--fs-page)}
  .lc-cards{justify-content:stretch}
  .lc-cards>.cx-chip{width:100%}
  .lc-q{max-width:100%}
  .lc-compose{bottom:12px;padding:12px 12px 10px 14px}
}
@media (prefers-reduced-motion:reduce){.lc-wait .lc-spin{animation:none}.cx-plate::after{transition:none}}