/* Chat (/chat): conversation list + conversation, prompt box after the PromptInputBox model and the
   "generating orb" loader. Colors follow the panel theme; the prompt box keeps the model's dark look. */
.cx-shell {
  --cx-bg: var(--paper);
  --cx-panel: var(--card);
  --cx-box: #ffffff;
  --cx-box-border: rgba(15, 15, 18, 0.14);
  --cx-box-shadow: 0 8px 30px rgba(15, 15, 18, 0.10);
  --cx-text: var(--ink);
  --cx-muted: #6b6b73;
  --cx-hover: rgba(15, 15, 18, 0.06);
  --cx-user: #f0f0ea;
  --cx-video: #65a30d;
  --cx-video-bg: rgba(219, 249, 2, 0.28);
  --cx-image: #d40f66;
  --cx-image-bg: rgba(255, 46, 138, 0.12);
  --cx-send-on: #0f0f12;
  --cx-send-on-ink: #ffffff;
  display: grid; grid-template-columns: 268px minmax(0, 1fr); height: 100vh; background: var(--cx-bg); color: var(--cx-text);
}
:root[data-theme="dark"] .cx-shell {
  --cx-bg: #131416;
  --cx-panel: #17181b;
  --cx-box: #1F2023;
  --cx-box-border: #444444;
  --cx-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.24);
  --cx-text: #f3f4f6;
  --cx-muted: #9CA3AF;
  --cx-hover: rgba(75, 85, 99, 0.3);
  --cx-user: #26272b;
  --cx-video: #dbf902;
  --cx-video-bg: rgba(219, 249, 2, 0.15);
  --cx-image: #ff5aa5;
  --cx-image-bg: rgba(255, 90, 165, 0.15);
  --cx-send-on: #ffffff;
  --cx-send-on-ink: #1F2023;
}
.app-main-chat { padding: 0; }
.app-main-chat > * { max-width: none; }

/* ----- Conversation list: collapsible, grouped by date, searchable ----- */
.cx-history { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 10px 12px; border-right: 1px solid var(--line); background: var(--cx-panel); }
.cx-history-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 0 8px; }
.cx-history-title { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-muted); }
.cx-new { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--cx-box-border); border-radius: 12px; background: var(--cx-box); color: var(--cx-text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.cx-new:hover { background: var(--cx-hover); }
.cx-new svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cx-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--cx-hover); color: var(--cx-muted); }
.cx-search svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cx-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--cx-text); font: inherit; font-size: 13px; outline: none; }
.cx-search:focus-within { box-shadow: 0 0 0 2px var(--cx-box-border); }
.cx-history-list { display: grid; align-content: start; gap: 14px; min-height: 0; margin: 2px -4px 0; padding: 0 4px 8px; overflow-y: auto; overscroll-behavior: contain; }
.cx-group { display: grid; gap: 1px; }
.cx-group-title { padding: 4px 10px 6px; font-size: 11.5px; font-weight: 600; color: var(--cx-muted); }
.cx-item { position: relative; display: flex; align-items: center; border-radius: 10px; }
.cx-item:hover, .cx-item:focus-within { background: var(--cx-hover); }
.cx-item.active { background: var(--cx-hover); }
.cx-item.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--cx-video); }
.cx-item-open { display: grid; flex: 1; gap: 1px; min-width: 0; padding: 8px 4px 8px 12px; border: 0; background: transparent; color: var(--cx-text); font: inherit; text-align: left; cursor: pointer; }
.cx-item-open strong { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cx-item-open span { overflow: hidden; font-size: 11.5px; color: var(--cx-muted); text-overflow: ellipsis; white-space: nowrap; }
.cx-item-more { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-right: 4px; border: 0; border-radius: 8px; background: transparent; color: var(--cx-muted); cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; }
.cx-item-more svg { width: 16px; height: 16px; fill: currentColor; }
.cx-item:hover .cx-item-more, .cx-item:focus-within .cx-item-more, .cx-item.active .cx-item-more, .cx-item-more[aria-expanded="true"] { opacity: 1; }
.cx-item-more:hover { background: var(--cx-hover); color: var(--cx-text); }
@media (hover: none) { .cx-item-more { opacity: 1; } }
.cx-rename-input { flex: 1; min-width: 0; height: 34px; margin: 4px; padding: 0 10px; border: 1px solid var(--cx-video); border-radius: 8px; background: var(--cx-box); color: var(--cx-text); font: inherit; font-size: 13.5px; font-weight: 600; outline: none; }
.cx-head-title .cx-rename-input { flex: none; width: min(360px, 100%); margin: 0; font-size: 15px; }
.cx-muted { margin: 6px 10px; font-size: 12.5px; line-height: 1.5; color: var(--cx-muted); }

/* Collapsed list (desktop): only the conversation; the header gets "show list" and "new conversation" buttons. */
.cx-shell { transition: grid-template-columns 0.2s ease; }
.cx-shell.list-hidden { grid-template-columns: 0 minmax(0, 1fr); }
.cx-shell.list-hidden .cx-history { visibility: hidden; overflow: hidden; padding: 0; border: 0; }
.cx-head-left { display: none; align-items: center; gap: 2px; }
.cx-shell.list-hidden .cx-head-left, body.cx-focus .cx-head-left { display: flex; }

/* Modo foco: hides the account menu and the list; Esc or the same button brings them back. */
@media (min-width: 901px) {
  body.cx-focus .app-shell { grid-template-columns: minmax(0, 1fr); }
  body.cx-focus .app-sidebar { display: none; }
  body.cx-focus .cx-shell { grid-template-columns: 0 minmax(0, 1fr); }
  body.cx-focus .cx-history { visibility: hidden; overflow: hidden; padding: 0; border: 0; }
}
#cx-focus .i-collapse, #cx-focus[aria-pressed="true"] .i-expand { display: none; }
#cx-focus[aria-pressed="true"] .i-collapse { display: inline; }
#cx-focus[aria-pressed="true"] { background: var(--cx-hover); color: var(--cx-text); }

/* ⋯ menu */
.cx-menu { position: fixed; z-index: 200; display: grid; min-width: 200px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 16px 40px rgba(15, 15, 18, 0.16); }
.cx-menu[hidden] { display: none; }
.cx-menu [role="menuitem"] { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; }
.cx-menu [role="menuitem"]:hover, .cx-menu [role="menuitem"]:focus-visible { background: var(--paper-subtle); outline: none; }
.cx-menu [role="menuitem"] svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-menu .danger { color: var(--red); }
:root[data-theme="dark"] .cx-menu { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }

/* ----- Conversation ----- */
.cx-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cx-head { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 14px 0 20px; border-bottom: 1px solid var(--line); }
.cx-shell.list-hidden .cx-head, body.cx-focus .cx-head { padding-left: 10px; }
.cx-head-title { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.cx-title { justify-self: start; max-width: 100%; padding: 2px 6px; margin-left: -6px; overflow: hidden; border: 0; border-radius: 8px; background: transparent; color: var(--cx-text); font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.cx-title:not(:disabled):hover { background: var(--cx-hover); }
.cx-title:disabled { cursor: default; opacity: 1; }
.cx-head-title > span { overflow: hidden; font-size: 11.5px; color: var(--cx-muted); text-overflow: ellipsis; white-space: nowrap; }
.cx-head-actions { display: flex; align-items: center; gap: 6px; }
.cx-balance { margin-right: 4px; padding: 4px 10px; border-radius: 999px; background: var(--cx-hover); font-family: var(--mono); font-size: 11px; color: var(--cx-muted); text-decoration: none; white-space: nowrap; }
.cx-balance:hover { color: var(--cx-text); }
.cx-balance:empty { display: none; }
.cx-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--cx-muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.cx-icon:hover { background: var(--cx-hover); color: var(--cx-text); }
.cx-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.cx-scroll { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.cx-thread { display: flex; flex-direction: column; gap: 22px; width: min(780px, 100%); margin: 0 auto; padding: 28px 20px 12px; }
.cx-thread:empty { display: none; }

/* Messages */
.cx-msg { display: flex; gap: 12px; animation: cx-in 0.25s ease-out; }
@keyframes cx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cx-msg.user { justify-content: flex-end; }
.cx-user { display: grid; justify-items: end; gap: 6px; max-width: min(560px, 85%); }
.cx-user-bubble { padding: 11px 16px; border-radius: 22px 22px 6px 22px; background: var(--cx-user); font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.cx-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cx-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--cx-hover); color: var(--cx-muted); }
.cx-tag.video { background: var(--cx-video-bg); color: var(--cx-video); }
.cx-tag.image { background: var(--cx-image-bg); color: var(--cx-image); }
:root:not([data-theme="dark"]) .cx-tag.video { color: #3f5a00; }
.cx-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: #0f0f12; box-shadow: 0 0 0 1px rgba(219, 249, 2, 0.3); }
.cx-avatar svg { width: 14px; height: 14px; fill: #dbf902; }
.cx-answer { display: grid; gap: 10px; min-width: 0; max-width: min(640px, 100%); padding-top: 4px; }
.cx-answer-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cx-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.cx-answer-text.muted { color: var(--cx-muted); }
.cx-answer-error { margin: 0; padding: 10px 14px; border: 1px solid rgba(255, 46, 138, 0.35); border-radius: 14px; background: var(--cx-image-bg); color: var(--cx-image); font-size: 13.5px; line-height: 1.5; }
.cx-media { display: block; overflow: hidden; width: fit-content; max-width: 100%; border-radius: 18px; background: #000; box-shadow: var(--cx-box-shadow); cursor: zoom-in; }
.cx-media video, .cx-media img { display: block; max-width: 100%; max-height: 62vh; object-fit: contain; }
.cx-media video { cursor: auto; }
.cx-answer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cx-chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--cx-muted); font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; }
.cx-chip-btn:hover { background: var(--cx-hover); color: var(--cx-text); }
.cx-chip-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-meta-line { font-family: var(--mono); font-size: 10.5px; color: var(--cx-muted); }
.cx-pending { display: flex; align-items: center; gap: 16px; }
.cx-pending p { margin: 0; font-size: 13px; color: var(--cx-muted); }

/* ----- Prompt box (PromptInputBox) ----- */
.cx-composer-wrap { width: min(780px, 100%); margin: 0 auto; padding: 10px 20px 16px; }
.cx-box { padding: 8px; border: 1px solid var(--cx-box-border); border-radius: 24px; background: var(--cx-box); box-shadow: var(--cx-box-shadow); transition: border-color 0.3s, box-shadow 0.3s; }
.cx-box:focus-within { border-color: color-mix(in srgb, var(--cx-box-border) 40%, var(--cx-text)); }
.cx-box.dragover { border-color: var(--cx-video); box-shadow: 0 0 0 3px var(--cx-video-bg), var(--cx-box-shadow); }
.cx-box.busy { border-color: rgba(173, 95, 255, 0.7); }
.cx-box textarea { display: block; width: 100%; min-height: 44px; max-height: 240px; margin: 0; padding: 10px 12px; border: 0; border-radius: 0; background: transparent; color: var(--cx-text); font: inherit; font-size: 15px; line-height: 1.5; resize: none; outline: none; box-shadow: none; }
.cx-box textarea::placeholder { color: var(--cx-muted); }
.cx-box textarea::-webkit-scrollbar { width: 6px; }
.cx-box textarea::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
.cx-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 2px 6px; }
.cx-file { position: relative; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 14px; background: var(--cx-hover); cursor: pointer; }
.cx-file img { width: 100%; height: 100%; object-fit: cover; }
.cx-file.video { width: auto; min-width: 64px; padding: 0 12px; font-size: 11.5px; color: var(--cx-muted); cursor: default; }
.cx-file button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.7); color: #fff; cursor: pointer; }
.cx-file button svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cx-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
.cx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; }
.cx-tool-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; color: var(--cx-muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.cx-tool-icon:hover { background: var(--cx-hover); color: var(--cx-text); }
.cx-tool-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-modes { display: flex; align-items: center; }
.cx-mode { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--cx-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.cx-mode svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s cubic-bezier(.2, 1.4, .4, 1); }
.cx-mode:hover { color: var(--cx-text); }
.cx-mode:hover svg { transform: rotate(15deg) scale(1.1); }
.cx-mode span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.2s, opacity 0.2s; }
.cx-mode.active span { max-width: 80px; opacity: 1; }
.cx-mode.active svg { transform: rotate(360deg) scale(1.1); }
.cx-mode.video.active { border-color: var(--cx-video); background: var(--cx-video-bg); color: var(--cx-video); }
.cx-mode.image.active { border-color: var(--cx-image); background: var(--cx-image-bg); color: var(--cx-image); }
:root:not([data-theme="dark"]) .cx-mode.video.active { color: #3f5a00; border-color: #8fb000; }
.cx-divider { position: relative; width: 1.5px; height: 24px; margin: 0 4px; background: linear-gradient(to top, transparent, rgba(173, 95, 255, 0.7), transparent); clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 140% 50%, 100% 60%, 100% 100%, 0% 100%, 0% 60%, -40% 50%, 0% 40%); }
.cx-pill { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 9px; border-radius: 999px; color: var(--cx-muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.cx-pill:hover { background: var(--cx-hover); color: var(--cx-text); }
.cx-pill svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-pill select { height: 30px; padding: 0 4px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; font-weight: 600; outline: none; cursor: pointer; appearance: none; }
.cx-pill select option { color: #111; }
.cx-send { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--cx-muted); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.15s; }
.cx-send:disabled { cursor: default; opacity: 0.55; }
.cx-send.ready { background: var(--cx-send-on); color: var(--cx-send-on-ink); opacity: 1; }
.cx-send.ready:hover { transform: scale(1.06); }
.cx-send svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cx-send-stop { display: none; width: 11px; height: 11px; border-radius: 2px; background: currentColor; animation: cx-pulse 1s ease-in-out infinite; }
.cx-send.sending { background: var(--cx-send-on); color: var(--cx-send-on-ink); opacity: 1; }
.cx-send.sending .cx-send-arrow { display: none; }
.cx-send.sending .cx-send-stop { display: block; }
@keyframes cx-pulse { 50% { opacity: 0.35; } }
.cx-error { margin: 8px 6px 0; font-size: 12.5px; color: var(--cx-image); }
.cx-foot { margin: 8px 0 0; font-size: 11px; text-align: center; color: var(--cx-muted); }

/* ----- Lightbox (ImageViewDialog) ----- */
.cx-lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); animation: cx-fade 0.2s ease-out; }
.cx-lightbox[hidden] { display: none; }
.cx-lightbox-card { position: relative; max-width: min(90vw, 900px); overflow: hidden; border-radius: 18px; background: #1F2023; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); animation: cx-zoom 0.2s ease-out; }
.cx-lightbox-card img { display: block; max-width: 100%; max-height: 82vh; object-fit: contain; }
.cx-lightbox-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(46, 48, 51, 0.8); color: #e5e7eb; cursor: pointer; }
.cx-lightbox-close:hover { background: #2E3033; color: #fff; }
.cx-lightbox-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@keyframes cx-fade { from { opacity: 0; } }
@keyframes cx-zoom { from { opacity: 0; transform: scale(0.95); } }

@media (prefers-reduced-motion: reduce) { .cx-msg { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; } }


/* ===== Empty conversation: a dark "stage" (blurred art, big title, prompt box, start cards) and an inspiration strip,
   after Leonardo / Artlist. The stage stays dark in both themes, so the prompt box inside it uses dark glass. ===== */
.cx-main.is-empty .cx-scroll { scroll-behavior: auto; }
.cx-welcome { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; width: min(1180px, 100%); margin: 0 auto; padding: 20px 20px 40px; }
.cx-welcome[hidden] { display: none; }
.cx-stage {
  --cx-box: rgba(18, 19, 22, 0.72); --cx-box-border: rgba(255, 255, 255, 0.14); --cx-text: #f5f5f2; --cx-muted: rgba(245, 245, 242, 0.62);
  --cx-hover: rgba(255, 255, 255, 0.08); --cx-video: #dbf902; --cx-video-bg: rgba(219, 249, 2, 0.14); --cx-image: #ff5aa5; --cx-image-bg: rgba(255, 90, 165, 0.16);
  --cx-box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; background: #0b0c0a; color: var(--cx-text);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 80px rgba(0, 0, 0, 0.22);
}
.cx-stage-bg { position: absolute; inset: 0; z-index: -1; }
.cx-stage-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(26px) saturate(1.35) brightness(0.55); transform: scale(1.2); }
.cx-stage-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 0%, rgba(219, 249, 2, 0.14), transparent 70%), linear-gradient(180deg, rgba(11, 12, 10, 0.15) 0%, rgba(11, 12, 10, 0.55) 55%, #0b0c0a 100%); }
.cx-stage-inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; padding: clamp(40px, 7vh, 72px) clamp(16px, 4vw, 48px) clamp(28px, 4vh, 40px); text-align: center; }
.cx-stage-title { max-width: 100%; margin: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(36px, 6.2vw, 76px); font-weight: 800; line-height: 0.95; letter-spacing: -0.045em; text-transform: uppercase; color: #fff; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.45); }
.cx-stage-title em { font-style: normal; color: #dbf902; text-shadow: 0 0 30px rgba(219, 249, 2, 0.35); }
.cx-stage-sub { max-width: 520px; margin: 0; font-size: 15px; line-height: 1.55; color: rgba(245, 245, 242, 0.72); }
.cx-stage-slot { width: min(860px, 100%); margin-top: 14px; }
.cx-stage-slot .cx-composer-wrap { width: 100%; padding: 0; }
.cx-stage-slot .cx-box { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.cx-stage-slot .cx-foot, .cx-stage-slot .cx-error { text-align: center; }
.cx-stage-slot .cx-pill select option { color: #111; }
.cx-stage .cx-modes .cx-mode.video.active { color: #dbf902; border-color: rgba(219, 249, 2, 0.7); }
.cx-stage .cx-modes .cx-mode.image.active { color: #ff5aa5; border-color: rgba(255, 90, 165, 0.7); }

/* Full-bleed stage (Leonardo): the art fills the whole conversation area, edge to edge, and fades into the page. */
.cx-welcome { width: 100%; max-width: none; margin: 0; padding: 0 0 40px; gap: 8px; }
.cx-stage { display: grid; align-content: center; min-height: min(78vh, 780px); border-radius: 0; background: #0b0c0a; box-shadow: none; }
.cx-stage-bg img { filter: blur(12px) saturate(1.45) brightness(0.72); transform: scale(1.08); }
.cx-stage-bg::after { background: radial-gradient(60% 55% at 50% 35%, rgba(219, 249, 2, 0.10), transparent 70%), linear-gradient(180deg, rgba(11, 12, 10, 0.35) 0%, rgba(11, 12, 10, 0.25) 35%, rgba(11, 12, 10, 0.7) 78%, var(--cx-bg) 100%); }
.cx-stage-inner { padding: clamp(48px, 9vh, 96px) clamp(16px, 4vw, 56px) clamp(56px, 9vh, 96px); }
.cx-stage-title { font-size: clamp(40px, 7vw, 92px); }
.cx-stage-slot { width: min(900px, 100%); }
.cx-inspire { width: min(1240px, 100%); margin: 0 auto; padding: 0 clamp(14px, 3vw, 32px); }

/* Start cards (Leonardo's round tool buttons): pick what to make; some open the reference picker. */
.cx-starts { display: flex; max-width: 100%; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin-top: 16px; }
.cx-start { display: grid; justify-items: center; gap: 8px; width: 86px; padding: 0; border: 0; background: none; color: rgba(245, 245, 242, 0.85); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.25; cursor: pointer; }
.cx-start-ico { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(10px); transition: transform 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s; }
.cx-start-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cx-start:hover .cx-start-ico, .cx-start:focus-visible .cx-start-ico { transform: translateY(-3px); border-color: rgba(219, 249, 2, 0.5); background: rgba(219, 249, 2, 0.1); }
.cx-start.active .cx-start-ico { border-color: #dbf902; background: rgba(219, 249, 2, 0.16); color: #dbf902; box-shadow: 0 0 24px rgba(219, 249, 2, 0.28); }
.cx-start.active { color: #fff; }

/* Inspiration strip: the person's latest results first, then ideas; tap to use the prompt. */
.cx-inspire { display: grid; gap: 12px; min-width: 0; }
.cx-inspire-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px; }
.cx-inspire-head h2 { margin: 0; font-family: var(--font-display); font-size: 20px; letter-spacing: -0.02em; }
.cx-inspire-head span { font-size: 12.5px; color: var(--cx-muted); }
.cx-inspire-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 220px); gap: 14px; padding: 2px 4px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; }
.cx-card { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; padding: 0; border: 0; border-radius: 20px; background: #15161a; color: #fff; font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; box-shadow: 0 0 0 1px var(--line); transition: transform 0.2s, box-shadow 0.2s; }
.cx-card:hover, .cx-card:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(219, 249, 2, 0.6), 0 18px 40px rgba(0, 0, 0, 0.25); }
.cx-card img, .cx-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.cx-card:hover img, .cx-card:hover video { transform: scale(1.06); }
.cx-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.82) 100%); pointer-events: none; }
.cx-card.tone-storm { background: radial-gradient(80% 60% at 30% 20%, #5aa9ff 0%, transparent 60%), radial-gradient(70% 70% at 80% 90%, #1d2b4a 0%, transparent 70%), linear-gradient(160deg, #0d1424, #05070d); }
.cx-card.tone-pink { background: radial-gradient(70% 60% at 70% 25%, #ff5aa5 0%, transparent 62%), radial-gradient(70% 60% at 20% 90%, #6a2a6e 0%, transparent 70%), linear-gradient(160deg, #1a0d17, #0b0710); }
.cx-card.tone-lime { background: radial-gradient(60% 55% at 50% 40%, #dbf902 0%, transparent 62%), radial-gradient(80% 60% at 50% 100%, #3d4a05 0%, transparent 70%), linear-gradient(160deg, #141708, #070805); }
.cx-card-badge { position: absolute; left: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); font-size: 11px; font-weight: 700; }
.cx-card-badge svg { width: 12px; height: 12px; fill: currentColor; }
.cx-card-title { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.cx-card.own .cx-card-title { font-family: var(--font-ui); font-size: 13px; font-weight: 600; }
.cx-card-tag { position: absolute; right: 12px; top: 12px; z-index: 1; padding: 3px 8px; border-radius: 999px; background: #dbf902; color: #0b0c0a; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; }

/* Prompt box (Artlist-like): references on top, prompt, then mode / ratio / duration and a highlighted "Gerar". */
.cx-box { padding: 12px; border-radius: 26px; }
.cx-box-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 0 4px; }
.cx-ref-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 11px; border: 1px solid var(--cx-box-border); border-radius: 12px; background: var(--cx-hover); color: var(--cx-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.cx-ref-btn:hover { border-color: var(--cx-video); background: var(--cx-video-bg); }
.cx-ref-btn svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-ref-btn[hidden] { display: none; }
.cx-box textarea { min-height: 56px; padding: 10px 4px; font-size: 15.5px; }
.cx-actions { padding-top: 8px; }
.cx-tools { gap: 6px; }
.cx-modes { gap: 2px; padding: 3px; border-radius: 999px; background: var(--cx-hover); }
.cx-mode { height: 32px; padding: 0 12px; }
.cx-mode span { max-width: none; opacity: 1; }
.cx-mode.active svg { transform: none; }
.cx-pill { padding: 0 6px 0 10px; border: 1px solid var(--cx-box-border); }
.cx-send { display: inline-flex; gap: 8px; width: auto; height: 42px; padding: 0 18px 0 20px; background: var(--cx-hover); color: var(--cx-muted); font: inherit; font-size: 14px; font-weight: 700; }
.cx-send svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.cx-send.ready, .cx-send.sending { background: #dbf902; color: #0b0c0a; box-shadow: 0 0 0 1px rgba(219, 249, 2, 0.4), 0 8px 24px rgba(219, 249, 2, 0.3); }
.cx-send.ready:hover { transform: translateY(-1px); }
.cx-send.sending svg { display: none; }
.cx-send.sending .cx-send-label { opacity: 0.75; }

/* Paperclip (attach references) and the ratio / duration pickers: popover lists instead of native selects. */
.cx-box { position: relative; }
.cx-attach { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid var(--cx-box-border); border-radius: 999px; background: transparent; color: var(--cx-muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; }
.cx-attach:hover { background: var(--cx-hover); color: var(--cx-text); transform: rotate(-12deg); }
.cx-attach svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cx-picker { position: static; }
.cx-picker[hidden] { display: none; }
.cx-pill { gap: 6px; height: 36px; padding: 0 8px 0 11px; background: transparent; color: var(--cx-text); font: inherit; font-size: 13px; font-weight: 600; }
button.cx-pill { cursor: pointer; }
.cx-pill[aria-expanded="true"] { border-color: var(--cx-video); background: var(--cx-video-bg); }
.cx-pill-value { white-space: nowrap; }
.cx-chevron { width: 14px !important; height: 14px !important; opacity: 0.7; transition: transform 0.2s; }
.cx-pill[aria-expanded="true"] .cx-chevron { transform: rotate(180deg); }
.cx-shell { --cx-pop: var(--card); }
:root[data-theme="dark"] .cx-shell { --cx-pop: #1c1d21; }
.cx-stage { --cx-pop: #16171b; }
.cx-pop { position: absolute; left: 12px; bottom: calc(100% + 8px); z-index: 40; display: grid; gap: 6px; width: min(380px, calc(100% - 24px)); padding: 8px; border: 1px solid var(--cx-box-border); border-radius: 18px; background: var(--cx-pop); color: var(--cx-text); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); animation: cx-pop-in 0.16s ease-out; }
.cx-pop[hidden] { display: none; }
@keyframes cx-pop-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.cx-pop-ratio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx-pop-seconds { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(340px, calc(100% - 24px)); }
.cx-pop [role="option"] { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 76px; padding: 10px 6px; border: 1px solid transparent; border-radius: 12px; background: var(--cx-hover); color: var(--cx-text); font: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.cx-pop-seconds [role="option"] { min-height: 58px; gap: 2px; }
.cx-pop [role="option"]:hover, .cx-pop [role="option"]:focus-visible { border-color: var(--cx-box-border); outline: none; }
.cx-pop [role="option"][aria-selected="true"] { border-color: var(--cx-video); background: var(--cx-video-bg); }
:root:not([data-theme="dark"]) .cx-shell .cx-pop [role="option"][aria-selected="true"] { border-color: #8fb000; }
.cx-stage .cx-pop [role="option"][aria-selected="true"] { border-color: #dbf902; }
.cx-pop [role="option"] span { display: grid; justify-items: center; line-height: 1.2; }
.cx-pop b { font-size: 13.5px; font-weight: 700; }
.cx-pop small { font-size: 11px; color: var(--cx-muted); }
.cx-shape { display: block; border: 1.8px solid currentColor; border-radius: 4px; opacity: 0.85; }
.cx-pop [aria-selected="true"] .cx-shape { color: var(--cx-video); opacity: 1; }
:root:not([data-theme="dark"]) .cx-shell .cx-pop [aria-selected="true"] .cx-shape { color: #5f7f00; }
.cx-stage .cx-pop [aria-selected="true"] .cx-shape { color: #dbf902; }

/* Plain messages: "Mensagem" tag, typing dots while the AI answers, text answer. */
.cx-tag.chat { background: var(--cx-hover); color: var(--cx-muted); }
.cx-chat-text { padding: 12px 16px; border-radius: 6px 20px 20px 20px; background: var(--cx-hover); white-space: pre-wrap; }
.cx-typing { display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: 6px 20px 20px 20px; background: var(--cx-hover); }
.cx-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--cx-muted); animation: cx-typing 1.2s ease-in-out infinite; }
.cx-typing i:nth-child(2) { animation-delay: 0.15s; }
.cx-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cx-typing { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .cx-typing i { animation: none; } }
.cx-send.ready.talk { background: var(--cx-text); color: var(--cx-bg); box-shadow: none; }
.cx-stage .cx-send.ready.talk { background: #fff; color: #0b0c0a; }

/* ----- Narrow screens: the conversation list becomes a sliding panel ----- */
@media (max-width: 900px) {
  .cx-shell { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 56px); }
  .cx-shell { height: calc(100dvh - 56px); }
  .cx-history { position: fixed; top: 56px; bottom: 0; left: 0; z-index: 60; width: min(300px, 86vw); padding-bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-104%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; box-shadow: none; }
  .cx-history.open { transform: none; visibility: visible; transition: transform 0.22s ease; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); }
  .cx-history-backdrop { position: fixed; inset: 56px 0 0; z-index: 55; background: rgba(0, 0, 0, 0.45); }
  .cx-history-backdrop[hidden] { display: none; }
  .cx-head-left { display: flex; }
  #cx-focus { display: none; }
  .cx-shell.list-hidden { grid-template-columns: minmax(0, 1fr); }
  .cx-shell.list-hidden .cx-history { overflow: visible; padding: 14px 10px max(12px, env(safe-area-inset-bottom)); border-right: 1px solid var(--line); }
  .cx-shell.list-hidden .cx-history.open { visibility: visible; }
  .cx-item-more { opacity: 1; }
  .cx-head { padding: 0 10px; }
  .cx-balance { display: none; }
  .cx-thread { padding: 18px 14px 8px; }
  .cx-composer-wrap { padding: 8px 10px max(12px, env(safe-area-inset-bottom)); }
  .cx-icon, .cx-send { width: 40px; height: 40px; }
  .cx-mode { height: 40px; min-width: 40px; justify-content: center; }
  .cx-pill { height: 40px; }
  .cx-attach { width: 40px; height: 40px; }
  .cx-pop { left: 8px; width: calc(100% - 16px); }
  .cx-pop-seconds { width: calc(100% - 16px); }
  .cx-text, #cx-text { font-size: 16px; }
  .cx-history-title { font-size: 12px; }
  .cx-foot { display: none; }
  .cx-welcome { gap: 6px; padding: 0 0 28px; }
  .cx-stage { min-height: 0; }
  .cx-stage-inner { gap: 10px; padding: 34px 12px 24px; }
  .cx-stage-sub { font-size: 14px; }
  .cx-stage-title { font-size: clamp(30px, 10vw, 44px); }
  .cx-stage-slot { margin-top: 8px; }
  .cx-starts { flex-wrap: nowrap; justify-content: safe center; gap: 12px; justify-self: stretch; width: auto; max-width: none; margin: 10px -12px 0; padding: 4px 12px; overflow-x: auto; scrollbar-width: none; }
  .cx-start { flex: none; width: 72px; font-size: 12px; }
  .cx-start-ico { width: 52px; height: 52px; }
  .cx-inspire-row { grid-auto-columns: 42%; gap: 10px; }
  .cx-inspire-head span { display: none; }
  .cx-box { padding: 10px; border-radius: 22px; }
  .cx-ref-btn { height: 40px; padding: 0 12px 0 10px; }
  .cx-ref-btn span { font-size: 12px; }
  .cx-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cx-mode { padding: 0 10px; }
  .cx-send { width: auto; height: 44px; padding: 0 16px; }
}
.cx-ref-short { display: none; }
@media (max-width: 560px) {
  .cx-ref-long { display: none; }
  .cx-ref-short { display: inline; }
  .cx-ref-short::before { content: "+ "; }
  .cx-actions { flex-wrap: wrap; }
  .cx-tools { flex: 1 1 100%; }
  .cx-send { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 420px) { .cx-mode span { display: none; } }
.cx-head-title[hidden] { display: none; }
.cx-head { justify-content: space-between; }
.cx-head-actions { margin-left: auto; }

/* The prompt textarea never gets the site-wide focus box: the whole prompt box shows the focus instead. */
.cx-shell .cx-box textarea, .cx-shell .cx-box textarea:focus, .cx-shell .cx-box textarea:focus-visible { border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; }
.cx-box:focus-within { border-color: color-mix(in srgb, var(--cx-video) 55%, var(--cx-box-border)); }
/* "Meus Chats": a labeled button in the header when the list is hidden (and always on phones). */
.cx-chats-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 10px; border: 1px solid var(--cx-box-border); border-radius: 999px; background: var(--cx-hover); color: var(--cx-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cx-chats-btn:hover { border-color: var(--cx-video); }
.cx-chats-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* "Comece por aqui": every card in a grid that flows down the page (no side scroll) */
.cx-inspire-row { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; padding-bottom: 4px; }
.cx-card.own .cx-card-tag { top: auto; bottom: 12px; right: 12px; }
.cx-card.own .cx-card-title { right: 52px; }

/* Card details */
.cx-detail { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 24px; background: rgba(6, 7, 6, 0.86); }
.cx-detail[hidden] { display: none; }
body.cx-detail-open { overflow: hidden; }
.cx-detail-card { display: grid; grid-template-columns: minmax(0, 1fr) 340px; width: min(1180px, 100%); height: min(780px, calc(100dvh - 48px)); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; background: #121315; color: #f3f3ef; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55); }
.cx-detail-media { display: grid; place-items: center; min-height: 0; background: #08090a; }
.cx-detail-media img, .cx-detail-media video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.cx-detail-tone { width: 100%; height: 100%; }
.cx-detail-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 18px; overflow-y: auto; border-left: 1px solid rgba(255, 255, 255, 0.08); background: #17181b; }
.cx-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cx-detail-kind { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgba(219, 249, 2, 0.14); color: #dbf902; font-size: 11.5px; font-weight: 700; }
.cx-detail-kind svg { width: 12px; height: 12px; fill: currentColor; }
.cx-detail-head h2 { margin: 8px 0 0; font-family: var(--font-display); font-size: 20px; letter-spacing: -0.02em; }
.cx-detail-close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: #f3f3ef; cursor: pointer; }
.cx-detail-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cx-detail-block { display: grid; gap: 8px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.cx-detail-label { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243, 243, 239, 0.55); }
.cx-detail-block p { margin: 0; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: rgba(243, 243, 239, 0.9); }
.cx-detail-specs { display: grid; gap: 8px; margin: 0; }
.cx-detail-specs div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.cx-detail-specs dt { color: rgba(243, 243, 239, 0.55); }
.cx-detail-specs dd { margin: 0; font-weight: 600; text-align: right; }
.cx-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.cx-detail-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: transparent; color: #f3f3ef; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.cx-detail-btn[hidden] { display: none; }
.cx-detail-btn.primary { grid-column: 1 / -1; border: 0; background: #dbf902; color: #0b0c0a; box-shadow: 0 10px 30px rgba(219, 249, 2, 0.25); }
.cx-detail-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Phones: start cards in one row that fits; cards two per row; details as a full screen sheet */
@media (max-width: 900px) {
  .cx-starts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; margin: 12px 0 0; padding: 0; overflow: visible; justify-content: stretch; }
  .cx-start { width: auto; min-width: 0; font-size: 11px; }
  .cx-start-ico { width: 48px; height: 48px; border-radius: 16px; }
  .cx-start-ico svg { width: 20px; height: 20px; }
  .cx-inspire-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cx-card-title { left: 10px; right: 10px; bottom: 10px; font-size: 14px; }
  .cx-card.own .cx-card-title { right: 10px; bottom: 36px; }
  .cx-card.own .cx-card-tag { bottom: 10px; right: auto; left: 10px; }
  .cx-detail { padding: 0; }
  .cx-detail-card { grid-template-columns: 1fr; grid-template-rows: minmax(0, 55%) minmax(0, 1fr); width: 100%; height: 100dvh; border-radius: 0; border: 0; }
  .cx-detail-card { grid-template-rows: minmax(0, 46%) minmax(0, 1fr); }
  .cx-detail-side { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 0; }
  .cx-detail-actions { position: sticky; bottom: 0; margin: auto -18px 0; padding: 12px 18px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.08); background: #17181b; }
  .cx-detail-close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 2; background: rgba(0, 0, 0, 0.55); }
}
@media (max-width: 360px) { .cx-start span:last-child { font-size: 10px; } }
.cx-detail-actions:has(#cx-detail-download[hidden]) #cx-detail-copy { grid-column: 1 / -1; }

/* Explorar / Minhas Criações */
.cx-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-subtle); }
.cx-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-secondary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; }
.cx-tabs [role="tab"]:hover { color: var(--ink); }
.cx-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--paper); }
.cx-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-tab-count { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; text-align: center; }
.cx-mine-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 40px 16px; border: 1px dashed var(--line-strong); border-radius: 20px; text-align: center; color: var(--ink-secondary); font-size: 14px; }
.cx-mine-empty strong { color: var(--ink); font-size: 16px; }
.cx-mine-empty button { margin-top: 6px; min-height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 800; cursor: pointer; }
.cx-mine-all { grid-column: 1 / -1; justify-self: center; padding: 10px 14px; color: var(--ink-secondary); font-size: 14px; font-weight: 700; text-decoration: none; }
.cx-mine-all:hover { color: var(--ink); }
@media (max-width: 900px) {
  .cx-inspire-head { align-items: center; }
  .cx-tabs { width: 100%; }
  .cx-tabs [role="tab"] { flex: 1; justify-content: center; padding: 0 10px; font-size: 13.5px; }
}

/* Explorar feed (VIDEOAPI · Em alta · Novos): masonry of real videos and images */
.cx-feed-tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 2px auto 4px; padding: 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-subtle); scrollbar-width: none; }
.cx-feed-tabs[hidden] { display: none; }
.cx-feed-tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-secondary); font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s; }
.cx-feed-tabs button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-feed-tabs button[data-feed="official"] svg { fill: currentColor; stroke: none; }
.cx-feed-tabs button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14); }
.cx-feed-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-inspire-row.is-masonry { display: block; columns: 4 240px; column-gap: 12px; padding-bottom: 8px; }
.cx-xcard { position: relative; display: block; width: 100%; margin: 0 0 12px; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #15161a; color: #fff; font: inherit; text-align: left; cursor: pointer; break-inside: avoid; box-shadow: 0 0 0 1px var(--line); transform: translateZ(0); }
.cx-xcard img, .cx-xcard video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.cx-xcard:hover img, .cx-xcard:hover video { transform: scale(1.035); }
.cx-xcard::after { content: ''; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.cx-xcard .cx-card-badge { left: 10px; top: 10px; opacity: 0; transition: opacity 0.2s; }
.cx-xcard-tag { position: absolute; right: 10px; top: 10px; z-index: 1; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 10.5px; font-weight: 700; }
.cx-xcard-title { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; font-size: 14px; font-weight: 700; line-height: 1.3; opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s; }
.cx-xcard:hover::after, .cx-xcard:focus-visible::after, .cx-xcard:hover .cx-card-badge, .cx-xcard:focus-visible .cx-card-badge, .cx-xcard:hover .cx-xcard-title, .cx-xcard:focus-visible .cx-xcard-title { opacity: 1; transform: none; }
.cx-xcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: none) { .cx-xcard::after, .cx-xcard .cx-xcard-title { opacity: 1; transform: none; } }
.cx-detail-btn.wide { grid-column: 1 / -1; }
.cx-detail-btn:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 900px) {
  .cx-inspire-row.is-masonry { columns: 2; column-gap: 8px; }
  .cx-xcard { margin-bottom: 8px; border-radius: 12px; }
  .cx-xcard-title { font-size: 12.5px; left: 9px; right: 9px; bottom: 8px; }
  .cx-feed-tabs { width: 100%; justify-content: center; }
  .cx-feed-tabs button { flex: 1; justify-content: center; padding: 0 8px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .cx-xcard img, .cx-xcard video { transition: none; } .cx-xcard:hover img, .cx-xcard:hover video { transform: none; } }

/* ===== Two views: /chat = the stage only (no list, no top bar); /meus-chats = the list + the open chat ===== */
body[data-view="new"] .cx-shell { grid-template-columns: minmax(0, 1fr); }
body[data-view="new"] .cx-history, body[data-view="new"] .cx-history-backdrop, body[data-view="new"] .cx-head { display: none; }
#cx-list-close, .cx-head-left, .cx-history-backdrop { display: none !important; }
.cx-back { display: none; }
.cx-pick { display: none; }
.cx-main.no-chat .cx-pick { display: grid; flex: 1; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; color: var(--cx-muted); font-size: 14px; }
.cx-main.no-chat .cx-head, .cx-main.no-chat .cx-scroll, .cx-main.no-chat .cx-composer-wrap { display: none; }
.cx-pick svg { width: 44px; height: 44px; margin-bottom: 6px; fill: none; stroke: var(--cx-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }
.cx-pick strong { color: var(--cx-text); font-family: var(--font-display); font-size: 20px; letter-spacing: -0.02em; }
.cx-pick span { max-width: 340px; }
.cx-pick-new { margin-top: 10px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 800; cursor: pointer; }
.cx-pick-new:focus-visible { outline: 2px solid var(--cx-text); outline-offset: 2px; }
@media (max-width: 900px) {
  body[data-view="chats"] .cx-history { position: static; width: auto; transform: none; visibility: visible; box-shadow: none; border-right: 0; transition: none; }
  body[data-view="chats"] .cx-shell.has-chat .cx-history { display: none; }
  body[data-view="chats"] .cx-shell:not(.has-chat) .cx-main { display: none; }
  .cx-back { display: grid; }
}

/* Page change (/chat → /meus-chats when a scene starts): the account menu stays, the content slides in */
.app-sidebar { view-transition-name: app-sidebar; }
::view-transition-old(root) { animation: cx-vt-out 0.18s ease both; }
::view-transition-new(root) { animation: cx-vt-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes cx-vt-out { to { opacity: 0; transform: scale(0.985); } }
@keyframes cx-vt-in { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ===== /chat stage, cinematic (Leonardo-like): dark everywhere, one-line prompt bar, round mode buttons, "Destaques" ===== */
body[data-view="new"] .cx-shell {
  --paper: #0c0d0f; --paper-subtle: #17181b; --card: #141518; --ink: #f3f3ef; --ink-secondary: #a9aeb0; --ink-muted: #7e8487;
  --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.14);
  --cx-bg: #0c0d0f; --cx-panel: #141518; --cx-text: #f3f3ef; --cx-muted: #8b9093; --cx-hover: rgba(255, 255, 255, 0.07);
}
body[data-view="new"] .cx-scroll, body[data-view="new"] .cx-main { background: #0c0d0f; }
.cx-stage { min-height: min(86vh, 860px); background: #0c0d0f; }
.cx-stage-bg img { filter: none; transform: none; object-position: center 30%; }
.cx-stage-bg::after { background: linear-gradient(180deg, rgba(12, 13, 15, 0.30) 0%, rgba(12, 13, 15, 0.10) 30%, rgba(12, 13, 15, 0.45) 62%, #0c0d0f 100%); }
.cx-stage-inner { gap: 0; padding: clamp(56px, 11vh, 120px) clamp(16px, 4vw, 56px) 0; }
.cx-stage-title { color: #fff; font-size: clamp(42px, 7.4vw, 104px); font-weight: 800; line-height: 0.92; letter-spacing: -0.035em; text-transform: uppercase; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.35); }
.cx-stage-title em { color: #fff; text-shadow: inherit; }
.cx-stage-sub, .cx-stage-slot .cx-foot, .cx-stage .cx-modes { display: none; }
.cx-stage-slot { width: min(1090px, 100%); margin-top: clamp(28px, 5vh, 52px); }

/* the prompt bar: one line, dark glass, a soft glow on its lower edge */
.cx-stage .cx-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 70px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 18px; background: rgba(16, 17, 20, 0.72); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(173, 140, 255, 0.35); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.cx-stage .cx-box:focus-within { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(219, 249, 2, 0.55); }
.cx-stage .cx-actions, .cx-stage .cx-tools { display: contents; }
.cx-stage .cx-files { order: -1; flex: 1 1 100%; }
.cx-stage .cx-attach { order: 0; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: #e9e9e4; }
.cx-stage .cx-box textarea { order: 1; flex: 1 1 260px; width: auto; min-height: 44px; max-height: 140px; padding: 11px 8px; font-size: 16px; color: #f3f3ef; }
.cx-stage .cx-box textarea::placeholder { color: rgba(243, 243, 239, 0.5); }
.cx-stage .cx-picker { order: 2; }
.cx-stage .cx-send { order: 3; min-width: 112px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: rgba(243, 243, 239, 0.45); }
.cx-stage .cx-send.ready { background: #dbf902; color: #0b0c0a; }
.cx-stage .cx-send.ready.talk { background: #fff; color: #0b0c0a; }
.cx-stage-slot .cx-error { margin-top: 10px; }

/* round mode buttons under the bar */
.cx-stage .cx-starts { gap: 12px 22px; margin-top: 26px; }
.cx-stage .cx-start { width: 76px; gap: 9px; color: rgba(243, 243, 239, 0.82); font-size: 12.5px; font-weight: 600; }
.cx-stage .cx-start-ico { width: 58px; height: 58px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(22, 23, 26, 0.78); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.cx-stage .cx-start:hover .cx-start-ico, .cx-stage .cx-start:focus-visible .cx-start-ico { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.3); background: rgba(40, 41, 46, 0.9); }
.cx-stage .cx-start.active .cx-start-ico { border-color: #dbf902; background: rgba(219, 249, 2, 0.14); color: #dbf902; box-shadow: 0 0 26px rgba(219, 249, 2, 0.25); }

@media (max-width: 900px) {
  .cx-stage { min-height: 0; }
  .cx-stage-inner { padding: 44px 12px 0; }
  .cx-stage-title { font-size: clamp(32px, 11vw, 48px); }
  .cx-stage-slot { margin-top: 22px; }
  .cx-stage .cx-box { padding: 10px; border-radius: 16px; }
  .cx-stage .cx-box textarea { order: -1; flex: 1 1 100%; padding: 8px 6px; }
  .cx-stage .cx-attach { order: 0; }
  .cx-stage .cx-picker { order: 1; }
  .cx-stage .cx-send { order: 2; margin-left: auto; min-width: 96px; height: 42px; }
  .cx-stage .cx-starts { gap: 6px; margin-top: 18px; }
  .cx-stage .cx-start { width: auto; font-size: 11px; }
  .cx-stage .cx-start-ico { width: 50px; height: 50px; }
}

/* The prompt box glows (glow.js) */
.cx-box.glow { --glow-radius: 26px; --glow-size: 280px; }
.cx-stage .cx-box.glow { --glow-radius: 18px; }
.cx-box.glow > .glow-halo { order: -9; }

/* ===== Under the stage, closer to Leonardo: same-size cards in "Destaques", full-width sections, titles as headings ===== */
body[data-view="new"] .cx-inspire { width: 100%; max-width: none; padding: 26px clamp(16px, 2vw, 24px) 48px; gap: 16px; }
body[data-view="new"] .cx-inspire-head { padding: 0; align-items: center; }
body[data-view="new"] .cx-inspire-head > span { font-size: 13px; color: rgba(243, 243, 239, 0.5); }
body[data-view="new"] .cx-tabs { gap: 22px; padding: 0; border: 0; background: none; }
body[data-view="new"] .cx-tabs [role="tab"] { min-height: 0; padding: 0; border-radius: 0; background: none; color: rgba(243, 243, 239, 0.42); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
body[data-view="new"] .cx-tabs [role="tab"]:hover { color: rgba(243, 243, 239, 0.8); }
body[data-view="new"] .cx-tabs [role="tab"][aria-selected="true"] { background: none; color: #fff; }
body[data-view="new"] .cx-tab-count { font-family: var(--font-ui); font-size: 11px; }
body[data-view="new"] .cx-feed-tabs { display: none; }
body[data-view="new"] .cx-inspire-row.is-masonry { columns: 6 230px; column-gap: 12px; }
body[data-view="new"] .cx-xcard { margin-bottom: 12px; border-radius: 12px; box-shadow: none; }
@media (max-width: 900px) {
  body[data-view="new"] .cx-inspire { padding: 18px 12px 36px; }
  body[data-view="new"] .cx-tabs { width: auto; gap: 16px; }
  body[data-view="new"] .cx-tabs [role="tab"] { flex: none; font-size: 18px; }
  body[data-view="new"] .cx-inspire-head > span { display: none; }
  body[data-view="new"] .cx-inspire-row.is-masonry { columns: 2; column-gap: 8px; }
}

/* Explorar right under the stage (no carousel) */
.cx-stage { min-height: 0; padding-bottom: clamp(48px, 8vh, 88px); }
body[data-view="new"] .cx-inspire { padding-top: 8px; }
@media (max-width: 900px) { .cx-stage { padding-bottom: 32px; } }
body[data-view="new"] .cx-tabs [role="tab"] { font-family: var(--font-display); }

/* service instability notice (set in the admin panel) */
.cx-notice { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 14px; border: 1px solid rgba(245, 179, 1, 0.45); border-radius: 12px; background: rgba(245, 179, 1, 0.12); color: #b45309; font-size: 13.5px; font-weight: 600; }
.cx-notice::before { content: "⚠"; }
.cx-notice[hidden] { display: none; }
:root[data-theme="dark"] .cx-notice, body[data-view="new"] .cx-notice { color: #fbbf24; }

/* =====================================================================================================================
   Chat v2 (27/10/2026): tela de boas-vindas do /chat calma e premium.
   O dono, sobre a versão anterior (título gigante em caixa alta + arte borrada atrás): "AQUI ENTÃO, PQP, DÁ ATÉ VERTIGEM...".
   Por isso: nada se mexe atrás do texto (fundo só CSS e parado), título menor em caixa normal, a caixa de prompt vira a
   estrela da tela, os atalhos viram chips compactos e o /chat passa a seguir o tema (escuro primeiro, claro também).
   Este bloco vem por último e sobrescreve as regras antigas do palco acima, sem apagá-las.
   ===================================================================================================================== */

/* Tema claro: o /chat deixa de ser escuro à força e volta aos tokens do site (styles.css). "inherit" pega o valor do :root. */
:root:not([data-theme="dark"]) body[data-view="new"] .cx-shell {
  --paper: inherit; --paper-subtle: inherit; --card: inherit; --ink: inherit; --ink-secondary: inherit; --ink-muted: inherit;
  --line: inherit; --line-strong: inherit;
  --cx-bg: var(--paper); --cx-panel: var(--card); --cx-text: var(--ink); --cx-muted: #6b6b73; --cx-hover: rgba(15, 15, 18, 0.05);
}
body[data-view="new"] .cx-shell .cx-main, body[data-view="new"] .cx-shell .cx-scroll { background: var(--cx-bg); }
:root:not([data-theme="dark"]) body[data-view="new"] .cx-notice { color: #b45309; }

/* Cores do palco, por tema (o palco antigo fixava vidro escuro aqui) */
.cx-welcome .cx-stage {
  --cx-box: #17181c; --cx-box-border: rgba(255, 255, 255, 0.10); --cx-text: #f3f3ef; --cx-muted: rgba(243, 243, 239, 0.58);
  --cx-hover: rgba(255, 255, 255, 0.06); --cx-video: #dbf902; --cx-video-bg: rgba(219, 249, 2, 0.12); --cx-image: #ff5aa5; --cx-image-bg: rgba(255, 90, 165, 0.14);
  --cx-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  --cx-pop: #17181c; --cx-line-accent: #dbf902; --cx-focus: rgba(219, 249, 2, 0.6); --cx-ring: rgba(219, 249, 2, 0.14);
  --cx-chip: rgba(255, 255, 255, 0.03); --cx-chip-on: #dbf902;
  --cx-glow-a: rgba(219, 249, 2, 0.09); --cx-glow-b: rgba(212, 15, 102, 0.10); --cx-grid: rgba(255, 255, 255, 0.04);
}
:root:not([data-theme="dark"]) .cx-welcome .cx-stage {
  --cx-box: #ffffff; --cx-box-border: rgba(15, 15, 18, 0.12); --cx-text: #0f0f12; --cx-muted: #6b6b73;
  --cx-hover: rgba(15, 15, 18, 0.05); --cx-video: #3f5a00; --cx-video-bg: rgba(219, 249, 2, 0.32); --cx-image: #d40f66; --cx-image-bg: rgba(212, 15, 102, 0.08);
  --cx-box-shadow: 0 1px 2px rgba(15, 15, 18, 0.05), 0 22px 50px -26px rgba(15, 15, 18, 0.28);
  --cx-pop: #ffffff; --cx-line-accent: #8fb000; --cx-focus: #a3c400; --cx-ring: rgba(190, 222, 0, 0.30);
  --cx-chip: #ffffff; --cx-chip-on: #3f5a00;
  --cx-glow-a: rgba(219, 249, 2, 0.30); --cx-glow-b: rgba(212, 15, 102, 0.07); --cx-grid: rgba(15, 15, 18, 0.045);
}

/* Palco: sem altura mínima de "tela cheia"; o conteúdo manda */
.cx-welcome .cx-stage { display: block; min-height: 0; padding-bottom: clamp(36px, 6vh, 64px); border-radius: 0; background: transparent; box-shadow: none; color: var(--cx-text); }
/* sem a arte não há o que cortar: overflow visível deixa os menus de proporção/duração passarem por cima do Explorar */
.cx-welcome .cx-stage { position: relative; z-index: 2; overflow: visible; }

/* Fundo parado: brilho lima no alto, um toque de rosa à direita e uma grade fraca que some nas bordas (máscara) */
.cx-welcome .cx-stage-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% -8%, var(--cx-glow-a), transparent 70%), radial-gradient(ellipse 34% 42% at 86% 10%, var(--cx-glow-b), transparent 72%); }
.cx-welcome .cx-stage-bg::before { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--cx-grid) 1px, transparent 1px), linear-gradient(90deg, var(--cx-grid) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 20%, transparent 72%); }
.cx-welcome .cx-stage-bg::after { content: none; }

.cx-welcome .cx-stage-inner { display: grid; justify-items: center; gap: 0; padding: clamp(56px, 12vh, 120px) max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); text-align: center; }

/* Título: menor, em caixa normal, com uma palavra em destaque */
.cx-welcome .cx-stage-title { max-width: 18ch; margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.9vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; text-transform: none; color: var(--cx-text); text-shadow: none; text-wrap: balance; }
.cx-welcome .cx-stage-title em { font-style: normal; color: #dbf902; text-shadow: none; }
/* no claro, lima em texto some no branco: vira um marca-texto atrás da palavra */
:root:not([data-theme="dark"]) .cx-welcome .cx-stage-title em { color: inherit; padding: 0 0.08em; background: linear-gradient(transparent 58%, rgba(219, 249, 2, 0.9) 58%, rgba(219, 249, 2, 0.9) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cx-welcome .cx-stage-sub { display: block; max-width: 540px; margin: 12px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--cx-muted); text-wrap: pretty; }

/* Caixa de prompt: a estrela da tela */
.cx-welcome .cx-stage-slot { width: min(760px, 100%); margin-top: clamp(24px, 4vh, 36px); }
.cx-welcome .cx-stage .cx-box { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; min-height: 0; padding: 14px 14px 12px; border: 1px solid var(--cx-box-border); border-radius: 22px; background: var(--cx-box); box-shadow: var(--cx-box-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; text-align: left; transition: border-color 0.2s, box-shadow 0.2s; }
.cx-welcome .cx-stage .cx-box:focus-within { border-color: var(--cx-focus); box-shadow: 0 0 0 4px var(--cx-ring), var(--cx-box-shadow); }
.cx-welcome .cx-stage .cx-box.dragover { border-color: var(--cx-line-accent); box-shadow: 0 0 0 4px var(--cx-ring), var(--cx-box-shadow); }
.cx-welcome .cx-stage .cx-box.glow { --glow-radius: 22px; }
.cx-welcome .cx-stage .cx-files { order: 0; flex: none; padding: 0 0 8px; }
.cx-welcome .cx-stage .cx-box textarea { order: 0; flex: none; width: 100%; min-height: 72px; max-height: 220px; padding: 6px 6px 4px; color: var(--cx-text); font-size: 16px; line-height: 1.55; }
.cx-welcome .cx-stage .cx-box textarea::placeholder { color: var(--cx-muted); }
.cx-welcome .cx-stage .cx-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; }
.cx-welcome .cx-stage .cx-tools { display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cx-welcome .cx-stage .cx-tools::-webkit-scrollbar { display: none; }
.cx-welcome .cx-stage .cx-attach { order: 0; flex: none; width: 40px; height: 40px; border: 1px solid var(--cx-box-border); border-radius: 12px; background: transparent; color: var(--cx-muted); }
.cx-welcome .cx-stage .cx-attach:hover { background: var(--cx-hover); color: var(--cx-text); transform: none; }
.cx-welcome .cx-stage .cx-picker { order: 0; flex: none; }
.cx-welcome .cx-stage .cx-pill { height: 40px; border-radius: 12px; color: var(--cx-text); }
.cx-welcome .cx-stage .cx-pill[aria-expanded="true"] { border-color: var(--cx-line-accent); }
/* no palco a caixa fica no alto da tela: proporção e duração abrem para baixo (para cima ficavam cortadas no celular) */
.cx-welcome .cx-stage .cx-pop { top: calc(100% + 8px); bottom: auto; z-index: 50; }
.cx-welcome .cx-stage .cx-pop [role="option"][aria-selected="true"] { border-color: var(--cx-line-accent); }
.cx-welcome .cx-stage .cx-pop [aria-selected="true"] .cx-shape { color: var(--cx-line-accent); }

/* Enviar / Gerar: apagado sem texto, lima e bem visível quando dá para enviar */
.cx-welcome .cx-stage .cx-send { order: 0; flex: none; display: inline-flex; gap: 8px; min-width: 108px; height: 42px; padding: 0 18px; border: 1px solid var(--cx-box-border); border-radius: 14px; background: var(--cx-hover); color: var(--cx-muted); font-size: 14px; font-weight: 700; opacity: 1; box-shadow: none; }
.cx-welcome .cx-stage .cx-send.ready, .cx-welcome .cx-stage .cx-send.ready.talk, .cx-welcome .cx-stage .cx-send.sending { border-color: transparent; background: #dbf902; color: #0b0c0a; box-shadow: 0 8px 22px -8px rgba(219, 249, 2, 0.6); }
:root:not([data-theme="dark"]) .cx-welcome .cx-stage .cx-send.ready, :root:not([data-theme="dark"]) .cx-welcome .cx-stage .cx-send.sending { border-color: #b8d400; box-shadow: 0 6px 16px -8px rgba(110, 130, 0, 0.55); }
.cx-welcome .cx-stage .cx-send.ready:hover { transform: translateY(-1px); }

/* Atalhos: chips compactos (ícone + nome) numa linha, quebram no celular; as mesmas ações de antes */
.cx-welcome .cx-stage .cx-starts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(760px, 100%); max-width: 100%; margin: 16px 0 0; padding: 0; overflow: visible; }
.cx-welcome .cx-stage .cx-start { display: inline-flex; flex: none; align-items: center; gap: 8px; width: auto; min-width: 0; height: 40px; padding: 0 14px 0 10px; border: 1px solid var(--cx-box-border); border-radius: 12px; background: var(--cx-chip); color: var(--cx-text); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.cx-welcome .cx-stage .cx-start-ico { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 0; background: none; color: var(--cx-muted); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; transition: color 0.15s; }
.cx-welcome .cx-stage .cx-start-ico svg { width: 18px; height: 18px; }
.cx-welcome .cx-stage .cx-start span:last-child { font-size: inherit; }
.cx-welcome .cx-stage .cx-start:hover { border-color: color-mix(in srgb, var(--cx-text) 26%, transparent); background: var(--cx-hover); }
.cx-welcome .cx-stage .cx-start:hover .cx-start-ico, .cx-welcome .cx-stage .cx-start:focus-visible .cx-start-ico { transform: none; border: 0; background: none; color: var(--cx-text); }
.cx-welcome .cx-stage .cx-start:focus-visible { outline: 2px solid var(--cx-line-accent); outline-offset: 2px; }
.cx-welcome .cx-stage .cx-start.active { border-color: var(--cx-line-accent); background: var(--cx-video-bg); color: var(--cx-chip-on); }
.cx-welcome .cx-stage .cx-start.active .cx-start-ico { border: 0; background: none; box-shadow: none; color: var(--cx-chip-on); }

/* Explorar / Minhas Criações: cabeçalho mais limpo (abas com traço lima embaixo, linha fina separando da grade) */
body[data-view="new"] .cx-welcome .cx-inspire { width: min(1320px, 100%); margin: 0 auto; padding: 0 clamp(16px, 2.4vw, 32px) 48px; gap: 18px; }
body[data-view="new"] .cx-welcome .cx-inspire-head { position: relative; align-items: center; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
body[data-view="new"] .cx-welcome .cx-tabs { gap: 24px; padding: 0; border: 0; background: none; }
body[data-view="new"] .cx-welcome .cx-tabs [role="tab"] { position: relative; min-height: 40px; padding: 0; border-radius: 0; background: none; color: var(--cx-muted); font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
body[data-view="new"] .cx-welcome .cx-tabs [role="tab"]:hover { color: var(--cx-text); }
body[data-view="new"] .cx-welcome .cx-tabs [role="tab"][aria-selected="true"] { background: none; color: var(--cx-text); }
body[data-view="new"] .cx-welcome .cx-tabs [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -13px; height: 2px; border-radius: 2px; background: #dbf902; }
:root:not([data-theme="dark"]) body[data-view="new"] .cx-welcome .cx-tabs [role="tab"][aria-selected="true"]::after { background: #8fb000; }
body[data-view="new"] .cx-welcome .cx-inspire-head > span { font-size: 13px; color: var(--cx-muted); }
body[data-view="new"] .cx-welcome .cx-inspire-row.is-masonry { columns: 5 220px; }

@media (max-width: 900px) {
  .cx-welcome .cx-stage { padding-bottom: 28px; }
  .cx-welcome .cx-stage-inner { padding: 36px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .cx-welcome .cx-stage-title { font-size: clamp(26px, 7.6vw, 36px); }
  .cx-welcome .cx-stage-sub { margin-top: 10px; font-size: 14.5px; }
  .cx-welcome .cx-stage-slot { margin-top: 20px; }
  .cx-welcome .cx-stage .cx-box { padding: 12px 10px 10px; border-radius: 20px; }
  .cx-welcome .cx-stage .cx-box textarea { min-height: 64px; padding: 4px 6px; font-size: 16px; }
  /* o layout antigo do celular empilhava o botão numa linha inteira; aqui ele fica ao lado das ferramentas */
  .cx-welcome .cx-stage .cx-actions { flex-wrap: nowrap; }
  .cx-welcome .cx-stage .cx-tools { flex: 1 1 auto; }
  .cx-welcome .cx-stage .cx-send { flex: none; min-width: 96px; height: 42px; margin-left: 0; padding: 0 14px; }
  .cx-welcome .cx-stage .cx-starts { gap: 8px 6px; margin-top: 14px; }
  .cx-welcome .cx-stage .cx-start { height: 40px; padding: 0 12px 0 9px; font-size: 13px; }
  /* celular: os três curtos numa linha e os dois longos na outra (2 linhas em vez de 3, cabe até em 360 px) */
  .cx-welcome .cx-stage .cx-start[data-start="video-reference"] { order: 1; }
  .cx-welcome .cx-stage .cx-start[data-start="image-to-video"], .cx-welcome .cx-stage .cx-start[data-start="edit-image"] { order: 2; }
  body[data-view="new"] .cx-welcome .cx-inspire { padding: 0 max(12px, env(safe-area-inset-right)) 36px max(12px, env(safe-area-inset-left)); gap: 14px; }
  body[data-view="new"] .cx-welcome .cx-tabs { width: auto; gap: 18px; }
  body[data-view="new"] .cx-welcome .cx-tabs [role="tab"] { flex: none; font-size: 16px; }
  body[data-view="new"] .cx-welcome .cx-inspire-row.is-masonry { columns: 2; column-gap: 8px; }
}
@media (max-width: 380px) {
  .cx-welcome .cx-stage .cx-send { min-width: 0; padding: 0 14px; }
  .cx-welcome .cx-stage .cx-send svg { display: none; }
  .cx-welcome .cx-stage .cx-pill { padding: 0 6px 0 9px; }
  .cx-welcome .cx-stage .cx-start { padding: 0 10px 0 8px; font-size: 12.5px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-welcome .cx-stage .cx-box, .cx-welcome .cx-stage .cx-start, .cx-welcome .cx-stage .cx-start-ico { transition: none; }
  .cx-welcome .cx-stage .cx-send.ready:hover { transform: none; }
}

/* =====================================================================================================================
   Chat v2.1 (27/10/2026, dono: "ta top mais ainda pode melhorar", "da um upzin", "melhore aqui tbm" em Meus Chats).
   Selo acima do título, sugestões de um toque, chips com a cor do tipo (vídeo lima, imagem rosa), sem a mancha do
   brilho do mouse na caixa do palco, e Meus Chats com lista e tela vazia de verdade.
   ===================================================================================================================== */
.cx-welcome .cx-stage-badge { display: inline-flex; align-items: center; gap: 8px; height: 30px; margin-bottom: 18px; padding: 0 14px 0 11px; border: 1px solid var(--cx-box-border); border-radius: 999px; background: var(--cx-chip); color: var(--cx-muted); font-size: 12.5px; font-weight: 600; }
.cx-welcome .cx-stage-badge i { width: 7px; height: 7px; border-radius: 50%; background: #dbf902; box-shadow: 0 0 0 4px rgba(219, 249, 2, 0.16); animation: cx-badge-pulse 2.4s ease-in-out infinite; }
@keyframes cx-badge-pulse { 50% { box-shadow: 0 0 0 7px rgba(219, 249, 2, 0.04); } }
/* o brilho que segue o mouse deixava uma mancha parada na borda da caixa grande do palco */
.cx-welcome .cx-stage .cx-box .glow-halo { display: none; }
.has-glow .cx-welcome .cx-stage .cx-box.glow::before { opacity: 0.55; }
.cx-welcome .cx-stage .cx-box { background: linear-gradient(180deg, color-mix(in srgb, var(--cx-box) 92%, #dbf902 8%), var(--cx-box) 40%); }
:root:not([data-theme="dark"]) .cx-welcome .cx-stage .cx-box { background: var(--cx-box); }

/* Chips: ícone com a cor do tipo; leve subida no hover */
.cx-welcome .cx-stage .cx-start { transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s; }
.cx-welcome .cx-stage .cx-start:hover { transform: translateY(-1px); }
.cx-welcome .cx-stage .cx-start[data-start="video"] .cx-start-ico, .cx-welcome .cx-stage .cx-start[data-start="image-to-video"] .cx-start-ico, .cx-welcome .cx-stage .cx-start[data-start="video-reference"] .cx-start-ico { color: var(--cx-video); }
.cx-welcome .cx-stage .cx-start[data-start="image"] .cx-start-ico, .cx-welcome .cx-stage .cx-start[data-start="edit-image"] .cx-start-ico { color: var(--cx-image); }

/* Sugestões */
.cx-welcome .cx-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: min(760px, 100%); margin-top: 18px; }
.cx-welcome .cx-suggest-label { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-muted); }
.cx-welcome .cx-suggest button { height: 34px; padding: 0 14px; border: 1px dashed var(--cx-box-border); border-radius: 999px; background: transparent; color: var(--cx-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.cx-welcome .cx-suggest button::before { content: "+ "; color: var(--cx-image); }
.cx-welcome .cx-suggest button:hover { border-style: solid; border-color: var(--cx-line-accent); background: var(--cx-video-bg); color: var(--cx-text); }

/* Meus Chats: painel da lista mais limpo */
.cx-history { gap: 10px; }
.cx-history-title { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-muted); }
.cx-new { height: 42px; border-color: rgba(219, 249, 2, 0.45); background: rgba(219, 249, 2, 0.08); }
.cx-new:hover { border-color: #dbf902; background: rgba(219, 249, 2, 0.14); }
.cx-new svg { color: #dbf902; }
:root:not([data-theme="dark"]) .cx-new svg { color: #3f5a00; }
.cx-search { height: 40px; border: 1px solid transparent; border-radius: 12px; }
.cx-search:focus-within { border-color: var(--cx-box-border); box-shadow: none; }
.cx-list-empty { display: grid; justify-items: center; gap: 6px; margin-top: 18px; padding: 22px 14px; border: 1px dashed var(--cx-box-border); border-radius: 16px; text-align: center; color: var(--cx-muted); font-size: 12.5px; line-height: 1.45; }
.cx-list-empty svg { width: 26px; height: 26px; margin-bottom: 4px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.cx-list-empty strong { color: var(--cx-text); font-size: 13.5px; }

/* Meus Chats sem chat aberto: convite com ações e ideias */
.cx-main.no-chat .cx-pick { position: relative; gap: 10px; padding: 32px 24px; background: radial-gradient(50% 40% at 50% 30%, rgba(219, 249, 2, 0.07), transparent 70%); }
.cx-pick-ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border: 1px solid rgba(219, 249, 2, 0.35); border-radius: 20px; background: rgba(219, 249, 2, 0.08); box-shadow: 0 0 40px -6px rgba(219, 249, 2, 0.35); }
.cx-pick-ico svg { width: 30px; height: 30px; margin: 0; stroke: #dbf902; opacity: 1; }
:root:not([data-theme="dark"]) .cx-pick-ico svg { stroke: #3f5a00; }
.cx-pick strong { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.cx-pick > span { max-width: 420px; font-size: 14.5px; line-height: 1.6; }
.cx-pick-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.cx-pick-new { display: inline-flex; align-items: center; gap: 8px; margin-top: 0; min-height: 46px; padding: 0 22px; border-radius: 14px; box-shadow: 0 10px 26px -10px rgba(219, 249, 2, 0.6); transition: transform 0.15s; }
.cx-pick-new svg { width: 18px; height: 18px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: 1; }
.cx-pick-new:hover { transform: translateY(-1px); }
.cx-pick-ghost { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border: 1px solid var(--cx-box-border); border-radius: 14px; color: var(--cx-text); font-weight: 700; transition: border-color 0.15s, background 0.15s; }
.cx-pick-ghost:hover { border-color: var(--cx-muted); background: var(--cx-hover); }
.cx-pick-ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); justify-content: center; gap: 10px; margin-top: 22px; }
.cx-pick-ideas button { display: grid; justify-items: start; gap: 4px; min-height: 72px; padding: 14px; border: 1px solid var(--cx-box-border); border-radius: 16px; background: var(--cx-box, var(--card)); color: var(--cx-text); font: inherit; text-align: left; cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.cx-pick-ideas button:hover { transform: translateY(-2px); border-color: rgba(219, 249, 2, 0.5); }
.cx-pick-ideas b { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #dbf902; }
.cx-pick-ideas button[data-pick-idea="image"] b { color: #ff5aa5; }
:root:not([data-theme="dark"]) .cx-pick-ideas b { color: #3f5a00; }
:root:not([data-theme="dark"]) .cx-pick-ideas button[data-pick-idea="image"] b { color: #d40f66; }
.cx-pick-ideas span { font-size: 14px; font-weight: 600; }

@media (max-width: 900px) {
  .cx-welcome .cx-stage-badge { margin-bottom: 14px; font-size: 12px; }
  .cx-welcome .cx-suggest { margin-top: 14px; }
  .cx-welcome .cx-suggest-label { flex-basis: 100%; text-align: center; }
  .cx-welcome .cx-suggest button { height: 40px; }
  .cx-pick strong { font-size: 22px; }
  .cx-pick-ideas { grid-template-columns: minmax(0, 1fr); width: min(320px, 100%); }
  .cx-pick-new, .cx-pick-ghost { flex: 1 1 140px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-welcome .cx-stage-badge i { animation: none; }
  .cx-welcome .cx-stage .cx-start:hover, .cx-pick-ideas button:hover, .cx-pick-new:hover { transform: none; }
}