/* JoinCTT — chat, composer, model picker and Imagine studio. Uses the Xcojo platform tokens. */
:root { --jc-w: 780px; --jc-tab: 0px; }
@media (max-width: 760px) { :root { --jc-tab: calc(61px + env(safe-area-inset-bottom)); } }

/* Full-height app pages: no footer, no page padding, composer pinned to the bottom */
.pf-main:has(.jc-app) { max-width: none; padding: 0 !important; height: calc(100dvh - var(--topbar) - var(--jc-tab)); display: flex; flex-direction: column; overflow: hidden; }
.pf-main:has(.jc-app) > .pf-footer { display: none; }
.pf-main:has(.jc-app) > .pf-toast { margin: 12px auto 0; max-width: var(--jc-w); width: calc(100% - 32px); }
.jc-app { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Header */
.jc-head { display: flex; align-items: center; gap: 10px; padding: 10px clamp(14px, 3vw, 28px); border-bottom: .5px solid var(--c-border); background: color-mix(in srgb, var(--c-bg) 86%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.jc-title { flex: 1; min-width: 0; margin: 0; font-size: 1.08rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-menu { position: relative; }
.jc-menu > summary { list-style: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--c-muted); }
.jc-menu > summary::-webkit-details-marker { display: none; }
.jc-menu > summary:hover, .jc-menu[open] > summary { background: var(--c-fill); color: var(--c-text); }
.jc-menu-pop { position: absolute; right: 0; top: 44px; z-index: 30; width: 260px; padding: 8px; display: grid; gap: 4px; background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--e3); animation: pf-pop var(--t-quick) both; transform-origin: top right; }
.jc-menu-pop form { display: flex; gap: 6px; margin: 0; }
.jc-menu-pop input[type=text] { flex: 1; min-width: 0; min-height: 36px; padding: 4px 10px; border: 1px solid var(--c-border-strong); border-radius: 8px; background: var(--c-bg); color: var(--c-text); font: inherit; }
.jc-mbtn { flex: none; min-height: 36px; padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: var(--c-text); font: inherit; cursor: pointer; text-align: left; }
.jc-menu-pop form:not(:first-child) .jc-mbtn { flex: 1; }
.jc-mbtn:hover { background: var(--c-fill); }
.jc-mbtn.danger { color: var(--c-error); }
.jc-mbtn.danger:hover { background: var(--c-error); color: #fff; }

/* Thread */
.jc-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.jc-thread { max-width: var(--jc-w); margin: 0 auto; padding: 24px clamp(14px, 3vw, 24px) 32px; display: flex; flex-direction: column; gap: 22px; }
.jc-m { display: flex; gap: 12px; animation: jc-in .28s cubic-bezier(.2,0,0,1) both; }
.jc-m.user { justify-content: flex-end; }
.jc-bubble { max-width: min(82%, 620px); padding: 10px 16px; border-radius: 20px 20px 6px 20px; background: var(--accent-soft); border: .5px solid color-mix(in srgb, var(--xco-accent) 20%, var(--c-border)); white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.jc-bubble img { display: block; max-width: 220px; border-radius: 12px; margin-bottom: 6px; }
.jc-av { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--xco-accent), color-mix(in srgb, var(--xco-accent) 55%, #7c3aed)); color: #fff; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--xco-accent) 70%, transparent); }
.jc-av .xco-i { width: 18px; height: 18px; }
.jc-main { flex: 1; min-width: 0; }
.jc-who { font-size: .82rem; font-weight: 600; color: var(--c-muted); margin: 5px 0 4px; letter-spacing: .01em; }
.jc-body { line-height: 1.62; overflow-wrap: anywhere; }
.jc-body > :first-child { margin-top: 0; }
.jc-body > :last-child { margin-bottom: 0; }
.jc-body p { margin: 0 0 .8em; }
.jc-body h2, .jc-body h3, .jc-body h4 { margin: 1.1em 0 .45em; line-height: 1.25; }
.jc-body h2 { font-size: 1.3rem; } .jc-body h3 { font-size: 1.14rem; } .jc-body h4 { font-size: 1rem; }
.jc-body ul, .jc-body ol { margin: 0 0 .8em; padding-left: 1.4em; }
.jc-body li { margin: .22em 0; }
.jc-body blockquote { margin: 0 0 .8em; padding: 4px 14px; border-left: 3px solid var(--xco-accent); color: var(--c-muted); }
.jc-body hr { border: 0; border-top: .5px solid var(--c-border-strong); margin: 1.2em 0; }
.jc-body a { color: var(--accent-text); }
.jc-body code { font-family: var(--mono); font-size: .86em; padding: .1em .38em; border-radius: 6px; background: var(--c-fill); }
.jc-code { margin: 0 0 .9em; border-radius: 12px; overflow: hidden; background: #16181d; color: #e6e6e6; box-shadow: var(--e1); }
.jc-code-h { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 14px; background: #20232a; font: .78rem var(--mono); color: #a9adb6; }
.jc-copy-code { border: 0; border-radius: 6px; padding: 4px 10px; background: transparent; color: #cfd3da; font: inherit; cursor: pointer; }
.jc-copy-code:hover { background: rgba(255,255,255,.08); }
.jc-code pre { margin: 0; padding: 14px; overflow-x: auto; }
.jc-code code { background: none; padding: 0; font-size: .84rem; line-height: 1.55; color: inherit; }
.jc-table { overflow-x: auto; margin: 0 0 .9em; border-radius: 10px; box-shadow: var(--e1); }
.jc-table table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.jc-table th, .jc-table td { padding: 8px 12px; text-align: left; border-bottom: .5px solid var(--c-border); }
.jc-table th { background: var(--c-fill); font-weight: 600; }
.jc-table tr:last-child td { border-bottom: 0; }
.jc-img { margin: 0; max-width: 520px; }
.jc-img img { display: block; width: 100%; border-radius: 16px; box-shadow: var(--e2); background: var(--c-fill); }
.jc-img figcaption { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-top: 8px; font-size: .88rem; color: var(--c-muted); }
.jc-img figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-dl { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--c-fill); color: var(--c-text); text-decoration: none; }
.jc-dl .xco-i { width: 15px; height: 15px; }
.jc-acts { display: flex; gap: 2px; margin-top: 6px; opacity: .72; transition: opacity var(--t-quick); }
.jc-m:hover .jc-acts, .jc-acts:focus-within { opacity: 1; }
.jc-act { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--c-muted); font: inherit; font-size: .82rem; cursor: pointer; }
.jc-act:hover { background: var(--c-fill); color: var(--c-text); }
.jc-act .xco-i { width: 15px; height: 15px; }
.jc-act.ok { color: var(--c-success); }
.jc-typing { display: inline-flex; gap: 5px; padding: 10px 0; }
.jc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-muted); animation: jc-dot 1.2s infinite ease-in-out; }
.jc-typing i:nth-child(2) { animation-delay: .15s; } .jc-typing i:nth-child(3) { animation-delay: .3s; }
.jc-painting { width: min(100%, 420px); aspect-ratio: 1; border-radius: 16px; background: linear-gradient(110deg, var(--c-fill) 30%, color-mix(in srgb, var(--xco-accent) 14%, var(--c-fill)) 50%, var(--c-fill) 70%); background-size: 250% 100%; animation: jc-shimmer 1.6s linear infinite; display: grid; place-items: center; color: var(--c-muted); font-size: .9rem; }
.jc-caret { display: inline-block; width: 8px; height: 1.05em; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background: var(--xco-accent); animation: jc-blink 1s steps(2) infinite; }
.jc-live-h { display: inline-block; margin-top: .4em; font-size: 1.06em; }
.jc-err { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--c-error) 9%, var(--c-surface)); color: var(--c-error); border: .5px solid color-mix(in srgb, var(--c-error) 30%, var(--c-border)); }
.jc-down { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--c-surface); color: var(--c-text); box-shadow: var(--e2); cursor: pointer; font-size: 1.1rem; }

/* Composer dock */
.jc-dock { padding: 6px clamp(12px, 3vw, 24px) 10px; background: linear-gradient(to bottom, transparent, var(--c-bg) 28%); }
.jc-dock > .jc-comp, .jc-foot { max-width: var(--jc-w); margin-left: auto; margin-right: auto; }
.jc-foot { margin-top: 6px; margin-bottom: 0; text-align: center; font-size: .78rem; color: var(--c-muted); }
.jc-comp { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 8px 14px; background: var(--c-surface); border-radius: 24px; box-shadow: 0 0 0 .5px var(--c-border-strong), 0 12px 32px -14px rgba(28,26,22,.22); transition: box-shadow var(--t-quick); }
.jc-comp:focus-within { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--xco-accent) 55%, transparent), 0 14px 36px -14px rgba(28,26,22,.26); }
.jc-comp { --kc: var(--xco-accent); }
.jc-comp[data-kind=image] { --kc: #7c3aed; } .jc-comp[data-kind=video] { --kc: #db2777; } .jc-comp[data-kind=music] { --kc: #2563eb; }
.jc-comp.creating { box-shadow: 0 0 0 1.5px var(--kc), 0 14px 36px -14px color-mix(in srgb, var(--kc) 45%, transparent); }
.jc-comp textarea { width: 100%; min-height: 28px; max-height: 240px; resize: none; border: 0; outline: 0; padding: 4px 2px; background: transparent; color: var(--c-text); font: inherit; font-size: 1.04rem; line-height: 1.5; }
.jc-tools { display: flex; align-items: center; gap: 4px; }
.jc-grow { flex: 1; }
.jc-tool { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--c-muted); font: inherit; font-size: .9rem; cursor: pointer; }
.jc-tool:hover { background: var(--c-fill); color: var(--c-text); }
.jc-tool .xco-i { width: 19px; height: 19px; }
.jc-create[aria-pressed=true] { background: color-mix(in srgb, #a855f7 14%, var(--c-surface)); color: #7c3aed; }
.jc-send { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--xco-accent); color: var(--xco-accent-ink); cursor: pointer; transition: transform var(--t-instant), opacity var(--t-quick); }
.jc-send:hover { transform: scale(1.05); }
.jc-send:disabled { opacity: .35; cursor: default; transform: none; }
.jc-send .xco-i { width: 18px; height: 18px; }
.jc-comp.creating .jc-send { background: var(--kc); color: #fff; }
.jc-attach-prev { display: flex; gap: 8px; align-items: center; padding: 2px 0 4px; }
.jc-attach-prev[hidden] { display: none; }
.jc-attach-prev img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; box-shadow: var(--e1); }
.jc-attach-prev button { border: 0; background: var(--c-fill); color: var(--c-text); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .82rem; cursor: pointer; }

/* Model picker */
.jc-pick { position: relative; }
.jc-pick-btn { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px 0 12px; border: 0; border-radius: 999px; background: var(--c-fill); color: var(--c-text); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.jc-pick-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jc-pick-menu { position: absolute; right: 0; bottom: 44px; z-index: 40; width: 300px; padding: 6px; display: grid; gap: 2px; background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--e3); animation: pf-pop var(--t-quick) both; transform-origin: bottom right; }
.jc-pick-menu[hidden] { display: none; }
.jc-pick-menu.down { bottom: auto; top: 44px; transform-origin: top right; }
.jc-pick-menu.left { right: auto; left: 0; transform-origin: bottom left; }
.jc-pick-menu button { display: grid; gap: 1px; padding: 9px 12px 9px 34px; border: 0; border-radius: 10px; background: none; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; position: relative; }
.jc-pick-menu button:hover, .jc-pick-menu button:focus-visible { background: var(--c-fill); outline: 0; }
.jc-pick-menu button[aria-selected=true]::before { content: ""; position: absolute; left: 12px; top: 14px; width: 12px; height: 7px; border-left: 2px solid var(--xco-accent); border-bottom: 2px solid var(--xco-accent); transform: rotate(-45deg); }
.jc-pick-menu small { color: var(--c-muted); font-size: .82rem; }

/* Create menu + kind chip */
.jc-make { position: relative; }
.jc-make-menu { position: absolute; left: 0; bottom: 44px; z-index: 40; width: 250px; padding: 6px; display: grid; gap: 2px; background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--e3); animation: pf-pop var(--t-quick) both; transform-origin: bottom left; }
.jc-make-menu[hidden] { display: none; }
.jc-make-menu.down { bottom: auto; top: 44px; transform-origin: top left; }
.jc-make-menu button { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.jc-make-menu button:hover, .jc-make-menu button:focus-visible { background: var(--c-fill); outline: 0; }
.jc-make-menu .xco-i { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: #fff; background: #7c3aed; }
.jc-make-menu [data-kind=video] .xco-i { background: #db2777; } .jc-make-menu [data-kind=music] .xco-i { background: #2563eb; }
.jc-make-menu b { display: block; font-weight: 600; } .jc-make-menu small { color: var(--c-muted); font-size: .82rem; }
.jc-kind-chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px 0 12px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--kc) 14%, var(--c-surface)); color: var(--kc); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.jc-kind-chip[hidden] { display: none; }
.jc-kind-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Live status while JoinCTT works */
.jc-status { display: grid; gap: 10px; padding: 4px 0; }
.jc-status-line { display: flex; align-items: center; gap: 10px; color: var(--c-muted); font-size: .95rem; }
.jc-spin { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--xco-accent) 25%, transparent); border-top-color: var(--xco-accent); animation: jc-rot .8s linear infinite; }
.jc-bar { height: 6px; border-radius: 999px; background: var(--c-fill); overflow: hidden; max-width: 420px; }
.jc-bar[hidden] { display: none; }
.jc-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--xco-accent), color-mix(in srgb, var(--xco-accent) 50%, #7c3aed)); transition: width .4s ease; }
.jc-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.jc-thumbs:empty { display: none; }
.jc-thumbs img { width: 92px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; box-shadow: var(--e1); animation: jc-in .3s both; }
.jc-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: .78rem; }
.jc-meta .xco-i { width: 13px; height: 13px; }

/* Versions of a picture */
.jc-alts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.jc-alt { position: relative; width: 74px; height: 74px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--c-fill); cursor: pointer; }
.jc-alt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-alt.on { border-color: var(--xco-accent); }
.jc-alt i { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 999px; background: var(--xco-accent); color: var(--xco-accent-ink); font-size: .66rem; font-style: normal; font-weight: 600; }

/* Players */
.jc-media { max-width: 640px; }
.jc-media-load { display: flex; align-items: center; gap: 10px; padding: 18px; border-radius: 16px; background: var(--c-fill); color: var(--c-muted); }
.jcm { --h: 170; border-radius: 20px; overflow: hidden; background: var(--c-surface); box-shadow: var(--e2); }
.jcm-art { background: linear-gradient(135deg, hsl(var(--h) 55% 22%), hsl(calc(var(--h) + 50) 60% 32%)); padding: 18px 18px 6px; }
.jcm-art canvas { display: block; width: 100%; height: 110px; }
.jcm-body { padding: 14px 16px 16px; display: grid; gap: 10px; }
.jcm-head { display: flex; align-items: center; gap: 12px; }
.jcm-play, .jcv-big, .jcv-play { flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; }
.jcm-play { width: 48px; height: 48px; background: hsl(var(--h) 60% 42%); color: #fff; box-shadow: 0 8px 20px -8px hsl(var(--h) 60% 30%); }
.jcm-play svg, .jcv-play svg { width: 22px; height: 22px; }
.jcm-txt { min-width: 0; }
.jcm-txt b { display: block; font-size: 1.08rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jcm-txt span { display: block; color: var(--c-muted); font-size: .82rem; }
.jcm-bar, .jcv-ctl { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.jcm-bar input, .jcv-ctl input { flex: 1; min-width: 60px; accent-color: var(--xco-accent); }
.jcm-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jcm-acts button, .jcv-dl { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--c-fill); color: var(--c-text); font: inherit; font-size: .86rem; cursor: pointer; }
.jcm-acts button:hover, .jcv-dl:hover { background: color-mix(in srgb, var(--c-text) 10%, var(--c-fill)); }
.jcm-acts svg, .jcv-dl svg { width: 16px; height: 16px; }
.jcm-acts button:disabled { opacity: .6; cursor: progress; }
.jcm-by { margin-left: auto; color: var(--c-muted); font-size: .78rem; }
.jcm-lyrics { margin: 0; padding: 10px 14px 10px 32px; border-radius: 12px; background: var(--c-fill); line-height: 1.7; max-height: 260px; overflow: auto; }
.jcm-lyrics[hidden] { display: none; }
.jcm-lyrics li.on { color: var(--accent-text); font-weight: 600; }
.jcv { border-radius: 18px; overflow: hidden; background: #0b0c0f; box-shadow: var(--e2); }
.jcv-stage { position: relative; background: #000; }
.jcv-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 16/9; cursor: pointer; }
.jcv-stage:fullscreen { display: grid; place-items: center; }
.jcv-stage:fullscreen canvas { width: 100vw; height: auto; max-height: 100vh; object-fit: contain; }
.jcv-big { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); background: rgba(255,255,255,.92); color: #111; box-shadow: 0 12px 30px rgba(0,0,0,.4); transition: transform var(--t-instant); }
.jcv-big:hover { transform: translate(-50%, -50%) scale(1.06); }
.jcv-big[hidden] { display: none; }
.jcv-big svg { width: 32px; height: 32px; margin-left: 4px; }
.jcv-rec { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; font-size: .85rem; }
.jcv-rec[hidden] { display: none; }
.jcv-rec span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #ef4444; animation: jc-blink 1s steps(2) infinite; }
.jcv-rec button { border: 0; border-radius: 999px; padding: 3px 10px; background: rgba(255,255,255,.18); color: #fff; font: inherit; cursor: pointer; }
.jcv-ctl { padding: 8px 10px; color: #cbd5e1; }
.jcv-play { width: 36px; height: 36px; background: rgba(255,255,255,.12); color: #fff; }
.jcv-mute, .jcv-fs { border: 0; background: none; color: #e2e8f0; font-size: 1rem; cursor: pointer; padding: 4px; }
.jcv-dl { background: rgba(255,255,255,.12); color: #fff; }
.jcv-dl:hover { background: rgba(255,255,255,.22); }

/* Home */
.jc-home { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.jc-hero { flex: 1; width: 100%; max-width: var(--jc-w); margin: 0 auto; padding: clamp(28px, 10vh, 110px) clamp(14px, 3vw, 24px) 24px; display: flex; flex-direction: column; }
.jc-logo { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 18px; background: linear-gradient(135deg, var(--xco-accent), color-mix(in srgb, var(--xco-accent) 50%, #7c3aed)); color: #fff; box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--xco-accent) 80%, transparent); }
.jc-logo .xco-i { width: 28px; height: 28px; }
.jc-hello { margin: 0 0 6px; text-align: center; font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.12; }
.jc-sub { margin: 0 0 26px; text-align: center; color: var(--c-muted); font-size: 1.08rem; }
.jc-hero .jc-comp { margin-bottom: 16px; }
.jc-sugg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jc-sugg button { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 0; border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); box-shadow: var(--e1); font: inherit; text-align: left; cursor: pointer; transition: transform var(--t-instant), box-shadow var(--t-quick); }
.jc-sugg button:hover { transform: translateY(-1px); box-shadow: var(--e2); }
.jc-sugg .xco-i { flex: none; width: 20px; height: 20px; color: var(--accent-text); margin-top: 2px; }
.jc-sugg b { display: block; font-weight: 600; }
.jc-sugg small { color: var(--c-muted); font-size: .88rem; }
.jc-tiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 22px 0 0; }
.jc-tiers span { padding: 4px 12px; border-radius: 999px; background: var(--c-fill); color: var(--c-muted); font-size: .84rem; }
.jc-tiers span.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.jc-legal { margin: auto 0 0; padding-top: 24px; text-align: center; font-size: .8rem; color: var(--c-muted); }

/* Studio: what to make */
.jc-kinds { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 999px; background: var(--c-fill); }
.jc-kinds label { position: relative; }
.jc-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.jc-kinds span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; color: var(--c-muted); font-weight: 600; cursor: pointer; }
.jc-kinds .xco-i { width: 18px; height: 18px; }
.jc-kinds input:checked + span { background: var(--c-surface); color: var(--c-text); box-shadow: var(--e1); }
.jc-kinds input:focus-visible + span { outline: 2px solid var(--xco-accent); outline-offset: 2px; }
.jc-gen-opts[hidden] { display: none; }
.jc-gen-note { margin: 6px 0 0; color: var(--c-muted); font-size: .92rem; }
.jc-check { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; cursor: pointer; }
.jc-check input { accent-color: var(--xco-accent); width: 16px; height: 16px; }
.jc-gen-go { margin-top: 12px; padding-top: 12px; border-top: .5px solid var(--c-border); }
.jc-tier-hint { color: var(--c-muted); font-size: .85rem; }
.jc-progress { margin: 18px 0 0; padding: 16px; border-radius: 18px; background: var(--c-surface); box-shadow: var(--e1); display: grid; gap: 10px; }
.jc-progress[hidden] { display: none; }
.jc-progress-line { display: flex; align-items: center; gap: 10px; }
.jc-result-card { padding: 16px; border-radius: 22px; background: var(--c-surface); box-shadow: var(--e2); }
.jc-result-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.jc-result-h .xco-i { width: 18px; height: 18px; color: var(--accent-text); }
.jc-result-h .jc-act { margin-left: auto; }
.jc-result-card .jc-img, .jc-result-card .jc-media { max-width: 680px; margin: 0 auto; }
.jc-filter { margin-left: auto; }
.jc-cover { --h: 170; aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 14px; background: linear-gradient(135deg, hsl(var(--h) 55% 24%), hsl(calc(var(--h) + 60) 60% 36%)); color: #fff; text-align: center; }
.jc-cover .xco-i { width: 40px; height: 40px; opacity: .9; }
.jc-cover b { font-size: .95rem; line-height: 1.25; }
.jc-badge { position: absolute; top: 8px; left: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: .74rem; font-weight: 600; backdrop-filter: blur(6px); }
.jc-tile[hidden] { display: none; }
.jc-pl { width: min(96vw, 860px); }
.jc-pl-in { padding: 16px; display: grid; gap: 12px; max-height: 94vh; overflow: auto; }
.jc-pl-top { display: flex; align-items: center; gap: 10px; }
.jc-pl-title { flex: 1; font-size: 1.1rem; }
.jc-pl-stage .jc-media { max-width: none; }
.jc-pl .jc-lb-prompt { margin: 0; color: var(--c-muted); font-size: .9rem; }
.jc-pl-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.jc-pl-acts form { margin: 0; }

/* Imagine studio */
.jc-studio { max-width: 1080px; margin: 0 auto; width: 100%; }
.jc-studio-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.jc-studio-head h1 { margin: 0; }
.jc-studio-head p { margin: 2px 0 0; color: var(--c-muted); }
.jc-gen { padding: 16px; border-radius: 24px; background: var(--c-surface); box-shadow: 0 0 0 .5px var(--c-border-strong), 0 12px 32px -14px rgba(28,26,22,.2); }
.jc-gen textarea { width: 100%; min-height: 84px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--c-text); font: inherit; font-size: 1.1rem; line-height: 1.5; }
.jc-gen-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.jc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jc-chips label { position: relative; }
.jc-chips input { position: absolute; opacity: 0; pointer-events: none; }
.jc-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--c-fill); color: var(--c-text); font-size: .88rem; cursor: pointer; user-select: none; transition: background var(--t-instant); }
.jc-chips input:checked + span { background: var(--xco-accent); color: var(--xco-accent-ink); }
.jc-chips input:focus-visible + span { outline: 2px solid var(--xco-accent); outline-offset: 2px; }
.jc-ratio { display: inline-block; border: 1.5px solid currentColor; border-radius: 3px; }
.jc-gen-label { font-size: .8rem; color: var(--c-muted); margin-right: 2px; }
.jc-gen .pf-btn { margin-left: auto; min-width: 140px; }
.jc-result { margin: 22px 0 6px; }
.jc-result:empty { display: none; }
.jc-result .jc-painting { width: min(100%, 520px); margin: 0 auto; }
.jc-result figure { margin: 0 auto; max-width: 640px; }
.jc-result img { display: block; width: 100%; border-radius: 20px; box-shadow: var(--e3); }
.jc-gallery-h { display: flex; justify-content: space-between; align-items: baseline; margin: 30px 0 12px; }
.jc-gallery-h h2 { margin: 0; font-size: 1.2rem; }
.jc-gallery { columns: 4 220px; column-gap: 12px; }
.jc-tile { position: relative; break-inside: avoid; margin: 0 0 12px; border-radius: 16px; overflow: hidden; background: var(--c-fill); box-shadow: var(--e1); cursor: zoom-in; }
.jc-tile img { display: block; width: 100%; height: auto; transition: transform .4s cubic-bezier(.2,0,0,1); }
.jc-tile:hover img { transform: scale(1.03); }
.jc-tile figcaption { position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; font-size: .82rem; line-height: 1.35; opacity: 0; transition: opacity var(--t-quick); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jc-tile:hover figcaption, .jc-tile:focus-visible figcaption { opacity: 1; }
.jc-lb { width: min(96vw, 1100px); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: 22px; background: var(--c-surface); color: var(--c-text); box-shadow: var(--e3); overflow: hidden; }
.jc-lb::backdrop { background: rgba(10,10,12,.72); backdrop-filter: blur(6px); }
.jc-lb-in { display: grid; grid-template-columns: minmax(0, 1fr) 300px; max-height: 94vh; }
.jc-lb-img { background: #0e0f12; display: grid; place-items: center; min-height: 280px; }
.jc-lb-img img { max-width: 100%; max-height: 94vh; display: block; }
.jc-lb-side { padding: 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.jc-lb-side p { margin: 0; line-height: 1.5; }
.jc-lb-side .pf-btn { width: 100%; }
.jc-lb-meta { font-size: .84rem; color: var(--c-muted); }
.jc-lb-x { align-self: flex-end; }
@media (max-width: 760px) {
  .jc-sugg { grid-template-columns: minmax(0, 1fr); }
  .jc-sugg button:nth-child(n+4) { display: none; }
  .jc-create span, .jc-make-btn span { display: none; }
  .jc-make-menu { width: min(250px, calc(100vw - 40px)); }
  .jc-kinds span { padding: 7px 12px; }
  .jc-filter { margin-left: 0; }
  .jc-gallery-h { flex-direction: column; align-items: flex-start; gap: 8px; }
  .jcv-dl span { display: none; }
  .jc-pick-menu { width: min(300px, calc(100vw - 32px)); }
  .jc-lb-in { grid-template-columns: minmax(0, 1fr); }
  .jc-lb-img img { max-height: 60vh; }
  .jc-down { bottom: 140px; }
  .jc-bubble { max-width: 88%; }
  .jc-foot { font-size: .72rem; }
  .jc-foot .jc-hide-m { display: none; }
  .jc-gen .pf-btn { width: 100%; margin-left: 0; }
}
@keyframes jc-blink { 50% { opacity: 0; } }
@keyframes jc-rot { to { transform: rotate(360deg); } }
@keyframes jc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes jc-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes jc-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .jc-m, .jc-painting, .jc-typing i, .jc-spin { animation: none; } .jc-scroll { scroll-behavior: auto; } }

/* ---- Plans, files, sources, memory, Noxlumi (release 22) ---- */
.jc-plus { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: linear-gradient(135deg, #f59e0b, #db2777); color: #fff; font-size: .62rem; font-style: normal; font-weight: 700; letter-spacing: .04em; vertical-align: 2px; }
.jc-pick-menu [data-locked] b { color: var(--c-muted); }
.jc-pick-more { display: block; padding: 8px 12px 6px; border-top: .5px solid var(--c-border); margin-top: 4px; font-size: .84rem; color: var(--accent-text); text-decoration: none; }
.jc-web[aria-pressed=true] { background: color-mix(in srgb, #0ea5e9 14%, var(--c-surface)); color: #0369a1; }
.jc-web[hidden] { display: none; }
.jc-comp.drop { box-shadow: 0 0 0 2px var(--xco-accent), 0 14px 36px -14px rgba(28,26,22,.26); }
.jc-attach-prev { flex-wrap: wrap; }
.jc-chipf { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; padding: 4px 6px 4px 4px; border-radius: 12px; background: var(--c-fill); font-size: .84rem; }
.jc-chipf img { width: 40px; height: 40px; object-fit: cover; border-radius: 9px; }
.jc-chipf i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: var(--c-surface); color: var(--accent-text); font-size: .68rem; font-style: normal; font-weight: 700; box-shadow: var(--e1); }
.jc-chipf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-chipf button { border: 0; background: none; color: var(--c-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.jc-up { display: block; max-width: 260px; max-height: 260px; border-radius: 14px; margin-bottom: 8px; object-fit: cover; }
.jc-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.jc-file { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-surface) 70%, transparent); font-size: .82rem; }
.jc-file .xco-i { width: 14px; height: 14px; }
.jc-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.jc-sources-h { font-size: .76rem; color: var(--c-muted); margin-right: 2px; }
.jc-src { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--c-fill); color: var(--c-text); font-size: .8rem; text-decoration: none; }
.jc-src:hover { background: color-mix(in srgb, var(--c-text) 10%, var(--c-fill)); }
.jc-src b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--c-surface); font-size: .7rem; }
.jc-src span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-memnote { display: inline-flex; align-items: center; gap: 6px; margin: 8px 8px 0 0; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, #8b5cf6 12%, var(--c-surface)); color: #6d28d9; font-size: .78rem; text-decoration: none; }
.jc-memnote .xco-i { width: 13px; height: 13px; }
.jc-err-up { margin-left: 6px; font-weight: 600; color: inherit; }
.jc-toast { position: fixed; left: 50%; bottom: calc(24px + var(--jc-tab)); transform: translateX(-50%); z-index: 90; max-width: min(92vw, 520px); padding: 10px 16px; border-radius: 14px; background: #111827; color: #fff; box-shadow: var(--e3); font-size: .92rem; animation: jc-in .25s both; transition: opacity .4s; }
.jc-toast a { color: #93c5fd; margin-left: 6px; }
.jc-toast.out { opacity: 0; }
.jc-up-dlg { width: min(92vw, 440px); }
.jc-up-in { padding: 24px; text-align: center; }
.jc-up-in h2 { margin: 6px 0; }
.jc-up-in ul { text-align: left; margin: 14px auto; padding-left: 1.2em; line-height: 1.7; max-width: 340px; }
.jc-up-bolt { width: 56px; height: 56px; margin: 0 auto; border-radius: 18px; display: grid; place-items: center; font-size: 1.7rem; background: linear-gradient(135deg, #f59e0b, #db2777); box-shadow: 0 14px 30px -14px #db2777; }
.jc-up-msg { color: var(--c-muted); }
.jc-up-acts { display: flex; gap: 8px; justify-content: center; }
.jc-upsell { margin: 14px 0 0; text-align: center; font-size: .9rem; color: var(--c-muted); }
.jc-upsell .xco-i { width: 16px; height: 16px; vertical-align: -3px; color: #f59e0b; }
.jc-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.jc-plan { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 20px; background: var(--c-surface); box-shadow: var(--e1); }
.jc-plan h2 { margin: 0; font-size: 1.2rem; }
.jc-plan ul { margin: 4px 0 8px; padding-left: 1.1em; line-height: 1.6; font-size: .93rem; flex: 1; }
.jc-plan .pf-btn { width: 100%; }
.jc-plan-hot { box-shadow: 0 0 0 2px #f59e0b, 0 18px 40px -20px rgba(219,39,119,.45); }
.jc-plan-tag { position: absolute; top: -11px; right: 16px; padding: 2px 10px; border-radius: 999px; background: linear-gradient(135deg, #f59e0b, #db2777); color: #fff; font-size: .74rem; font-weight: 700; }
.jc-plan-ent { background: linear-gradient(160deg, color-mix(in srgb, var(--xco-accent) 10%, var(--c-surface)), var(--c-surface)); }
.jc-price { margin: 0; font-size: 1.5rem; font-weight: 800; }
.jc-price small { display: block; font-size: .8rem; font-weight: 500; color: var(--c-muted); }
.jc-memlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jc-memlist li { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: var(--c-fill); }
.jc-memlist li > span { min-width: 0; overflow-wrap: anywhere; }
.jc-memlist small { display: block; color: var(--c-muted); font-size: .78rem; margin-top: 2px; }
.jc-memlist form { margin: 0; flex: none; }
.jc-newkey { box-shadow: 0 0 0 2px var(--xco-accent); margin-bottom: 16px; }
.jc-keytext { display: inline-block; padding: 8px 12px; border-radius: 10px; background: var(--c-fill); font-family: var(--mono); font-size: .86rem; overflow-wrap: anywhere; }
.pf-input { width: 100%; min-height: 46px; padding: 10px 14px; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); font: inherit; resize: vertical; }
.pf-input:focus { outline: none; border-color: var(--xco-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--xco-accent) 18%, transparent); }
@media (max-width: 1100px) { .jc-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .jc-pick-menu, .jc-pick-menu.down, .jc-pick-menu.left { position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); width: auto; z-index: 70; transform-origin: bottom center; } .jc-plans { grid-template-columns: minmax(0, 1fr); } .jc-web span { display: none; } .jc-tools { gap: 2px; } .jc-pick-btn { padding: 0 8px 0 10px; font-size: .84rem; } }

/* ---------- Thinking panel (release 24) ---------- */
.jc-think{margin:2px 0 8px;border:1px solid var(--c-border);border-radius:14px;background:color-mix(in srgb,var(--xco-accent) 4%,var(--c-surface));font-size:.88rem;max-width:640px}
.jc-think[hidden]{display:none}
.jc-think summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--c-muted);user-select:none}
.jc-think summary::-webkit-details-marker{display:none}
.jc-think summary::after{content:"▾";margin-left:auto;transition:transform .2s}
.jc-think:not([open]) summary::after{transform:rotate(-90deg)}
.jc-think-h{font-weight:700;color:var(--c-text)}
.jc-think-s{font-variant-numeric:tabular-nums;opacity:.8}
.jc-think-dot{width:9px;height:9px;border-radius:50%;background:var(--xco-accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--xco-accent) 60%,transparent);animation:jcPulse 1.4s infinite}
.jc-think.done .jc-think-dot{animation:none;background:color-mix(in srgb,var(--xco-accent) 55%,var(--c-muted))}
@keyframes jcPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--xco-accent) 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.jc-think-l{margin:0;padding:0 12px 10px 30px;color:var(--c-muted)}
.jc-think-l li{margin:5px 0;line-height:1.45;animation:jcIn .35s ease both}
.jc-think-l li::marker{color:var(--xco-accent)}
.jc-think-l li.ok{opacity:.78}
.jc-think-l li.warn{color:var(--c-warning)}
.jc-think-l li.good{color:var(--c-success)}
@keyframes jcIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.jc-think-dot,.jc-think-l li{animation:none}}

/* ---------- Studio jobs: real video and full songs ---------- */
.jc-job-card{border:1px solid var(--c-border);border-radius:16px;padding:14px 16px;background:linear-gradient(145deg,color-mix(in srgb,var(--xco-accent) 10%,var(--c-surface)),var(--c-surface))}
.jc-job-top{display:flex;align-items:center;gap:10px}.jc-job-top b{flex:1}.jc-job-t{font-variant-numeric:tabular-nums;color:var(--c-muted)}
.jc-job-p{margin:6px 0 0;color:var(--c-muted);font-size:.9rem}
.jc-job-video{width:100%;max-width:640px;border-radius:14px;background:#000;display:block}
.jc-job-row{display:flex;justify-content:space-between;gap:10px;margin-top:8px;color:var(--c-muted);font-size:.9rem;max-width:640px}
.jc-song{display:flex;gap:12px;align-items:flex-start;padding:10px;border:1px solid var(--c-border);border-radius:14px;margin:8px 0;max-width:640px}
.jc-song img,.jc-song-ph{width:72px;height:72px;border-radius:12px;object-fit:cover;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--xco-accent) 18%,var(--c-surface));font-size:1.6rem}
.jc-song-m{display:grid;gap:4px;min-width:0;flex:1}.jc-song-m span{color:var(--c-muted);font-size:.85rem}.jc-song-m audio{width:100%}
.jc-song-m pre{white-space:pre-wrap;font:inherit;font-size:.88rem;margin:6px 0 0}

/* ---------- Games while you wait ---------- */
.jc-gamebox:empty{display:none}
.jcg{margin:10px 0 4px;border:1px solid var(--c-border);border-radius:16px;padding:10px;background:var(--c-surface);max-width:360px;animation:jcIn .35s ease both}
.jcg-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jcg-title{font-weight:700;font-size:.9rem;flex:1 1 100%}
.jcg-done .jcg-title{color:var(--c-success)}
.jcg-tabs{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.jcg-tabs button,.jcg-pad button{border:1px solid var(--c-border);background:var(--c-fill);color:var(--c-text);border-radius:999px;padding:5px 11px;font:inherit;font-size:.82rem;cursor:pointer}
.jcg-tabs button.on{background:var(--xco-accent);color:var(--xco-accent-ink);border-color:transparent}
.jcg-x{margin-left:auto;border:0;background:none;color:var(--c-muted);font-size:1.3rem;cursor:pointer;line-height:1}
.jcg-stage{margin-top:8px;display:grid;justify-items:center;gap:8px}
.jcg-stage canvas{border-radius:12px;display:block;outline:none}
.jcg-hud{font-size:.82rem;color:var(--c-muted);margin-top:6px;min-height:1.2em}
.jcg-pad{display:grid;grid-template-columns:repeat(4,44px);gap:6px}
.jcg-pad button{padding:8px 0;border-radius:10px}
.jcg-ttt{display:grid;grid-template-columns:repeat(3,64px);gap:6px}
.jcg-ttt button{height:64px;border-radius:12px;border:1px solid var(--c-border);background:var(--c-fill);font-size:1.6rem;font-weight:800;color:var(--c-text);cursor:pointer}
.jcg-ttt button:disabled{cursor:default}
.jc-act.jc-say.on{color:var(--xco-accent)}

/* ---------- Mic, camera and live talk (release 25) ---------- */
.jc-mic.on{color:#fff;background:#dc2626;border-radius:999px;animation:jcPulse 1.2s infinite}
.jc-live-btn{width:38px;height:38px;border-radius:50%;border:0;display:inline-grid;place-items:center;background:color-mix(in srgb,var(--xco-accent) 14%,var(--c-fill));color:var(--xco-accent);cursor:pointer;transition:transform .15s,background .2s}
.jc-live-btn:hover{transform:scale(1.06);background:color-mix(in srgb,var(--xco-accent) 24%,var(--c-fill))}
html.jc-live-open{overflow:hidden}
.jc-live{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 18px calc(24px + env(safe-area-inset-bottom));color:#f4fbf9;
  background:radial-gradient(80% 60% at 50% 35%,color-mix(in srgb,var(--xco-accent) 45%,#04110f),#030807 70%);animation:jcIn .3s ease both;text-align:center}
.jc-live-top{position:absolute;top:calc(14px + env(safe-area-inset-top));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.95rem}
.jc-live-net{color:#fbbf24;font-size:.85rem}
.jc-live-cam{width:min(320px,70vw);aspect-ratio:4/3;object-fit:cover;border-radius:20px;border:1px solid rgba(255,255,255,.2);box-shadow:0 20px 60px -20px #000}
.jc-orb{position:relative;width:min(190px,46vw);aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 35% 30%,#fff,color-mix(in srgb,var(--xco-accent) 70%,#7dd3fc) 45%,color-mix(in srgb,var(--xco-accent) 80%,#022c22));
  box-shadow:0 0 calc(30px + var(--lvl) * 90px) color-mix(in srgb,var(--xco-accent) 70%,transparent);transform:scale(calc(1 + var(--lvl) * .18));transition:transform .08s linear,box-shadow .08s linear}
.jc-live[data-state=think] .jc-orb{animation:jcBreath 1.6s ease-in-out infinite}
.jc-live[data-state=speak] .jc-orb{animation:jcBreath .9s ease-in-out infinite}
.jc-live[data-state=warn] .jc-orb{filter:grayscale(.6)}
@keyframes jcBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.jc-live-state{font-size:1.05rem;font-weight:600;margin:6px 0 0;min-height:1.4em}
.jc-live-you{opacity:.75;margin:0;max-width:640px;min-height:1.3em}
.jc-live-ai{margin:0;max-width:640px;max-height:24vh;overflow:auto;font-size:1.05rem;line-height:1.5}
.jc-live-acts{display:flex;gap:14px;margin-top:10px}
.jc-live-a{display:grid;justify-items:center;gap:4px;width:74px;padding:12px 0;border-radius:18px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:1.25rem;cursor:pointer}
.jc-live-a span{font-size:.75rem}.jc-live-a.off,.jc-live-a.on{background:rgba(255,255,255,.22)}.jc-live-end{background:#dc2626;border-color:#dc2626}
@media (prefers-reduced-motion:reduce){.jc-orb{transition:none;transform:none}.jc-live[data-state] .jc-orb{animation:none}}
.jc-camdlg{padding:0;border:0;border-radius:22px;background:#000;max-width:min(720px,96vw)}
.jc-cam-in video{display:block;width:100%;max-height:70vh;object-fit:contain;background:#000}
.jc-cam-acts{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px}
.jc-cam-shot{width:64px;height:64px;border-radius:50%;border:4px solid #fff;background:#fff;box-shadow:inset 0 0 0 3px #000;cursor:pointer}

/* ---------- Settings ---------- */
.jc-set{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start}
.jc-set-nav{position:sticky;top:76px;display:grid;gap:2px}
.jc-set-nav a{padding:8px 12px;border-radius:10px;color:var(--c-text);text-decoration:none}.jc-set-nav a:hover{background:var(--c-fill)}
.jc-set-main{display:grid;gap:14px;grid-column:2}.jc-set-main .pf-card{margin:0;scroll-margin-top:80px}.jc-set-main h2{margin:0 0 6px;font-size:1.15rem}
.jc-set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--c-border)}
.jc-set-row:first-of-type{border-top:0}.jc-set-row>div{display:grid;gap:2px}.jc-set-row span{color:var(--c-muted);font-size:.88rem}
.jc-set-row select{max-width:220px}.jc-set-inline{display:flex;gap:8px}.jc-set-inline input{width:110px}
.jc-set-save{position:sticky;bottom:12px;display:flex;justify-content:flex-end}
.jc-switch{position:relative;display:inline-block;width:46px;height:28px;flex:none}.jc-switch input{opacity:0;width:0;height:0}
.jc-switch span{position:absolute;inset:0;border-radius:999px;background:var(--c-border-strong);transition:.2s}.jc-switch span::before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.2s}
.jc-switch input:checked+span{background:var(--xco-accent)}.jc-switch input:checked+span::before{transform:translateX(18px)}.jc-switch input:focus-visible+span{outline:2px solid var(--xco-accent);outline-offset:2px}
.jc-danger{color:#dc2626!important}
@media (max-width:860px){.jc-set{grid-template-columns:1fr}.jc-set-nav{position:static;display:flex;overflow-x:auto;gap:6px}.jc-set-nav a{white-space:nowrap;background:var(--c-fill)}.jc-set-main{grid-column:1}.jc-set-row{flex-wrap:wrap}}

/* ---------- All chats ---------- */
.jc-hist-bar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.jc-hist-search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--c-border-strong);border-radius:14px;background:var(--c-surface)}
.jc-hist-search input{border:0;background:none;flex:1;padding:12px 0;font:inherit;color:inherit;outline:none}
.jc-hist-list{display:grid;gap:6px}
.jc-hist-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--c-border);border-radius:14px;background:var(--c-surface);transition:opacity .2s,transform .2s,background .15s}
.jc-hist-item:hover{background:var(--c-fill)}.jc-hist-item a{flex:1;min-width:0;display:grid;color:inherit;text-decoration:none}
.jc-hist-item b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jc-hist-item span{color:var(--c-muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jc-hist-check{display:none}.selecting .jc-hist-check{display:block}
.jc-hist-del{border:0;background:none;cursor:pointer;opacity:.45;font-size:1rem;padding:6px;border-radius:8px}.jc-hist-item:hover .jc-hist-del{opacity:1}

/* ---------- Fluid feel ---------- */
.jc-m{animation:jcIn .28s ease both}
.jc-send,.jc-tool,.jc-act{transition:transform .12s ease,background .15s ease,color .15s ease}
.jc-send:active,.jc-tool:active,.jc-act:active{transform:scale(.94)}
.jc-scroll{scroll-behavior:smooth;overscroll-behavior:contain}
.jc-dl-hero{display:flex;gap:18px;align-items:center}.jc-dl-hero img{border-radius:22px;box-shadow:0 14px 34px -14px rgba(0,0,0,.35)}.jc-dl-hero h2{margin:0 0 4px}
.jc-dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:16px}.jc-dl-card h3{margin:0}.jc-dl-card.is-mine{border-color:var(--xco-accent);box-shadow:0 0 0 1px var(--xco-accent)}
@media (max-width:600px){.jc-dl-hero{flex-direction:column;text-align:center}}

/* ---------- JoinCTT lock (Settings → Security, unlock page) ---------- */
.jc-set-sub{margin:14px 0 2px;font-size:.86rem;color:var(--c-muted)}.jc-set-sub b{color:var(--c-text)}
.jc-lock{border:1px solid var(--c-border);border-radius:14px;padding:4px 14px 12px;margin:6px 0 10px;background:var(--c-fill)}
.jc-lock .pf-btn-row{gap:8px;flex-wrap:wrap;margin:8px 0}
.jc-keys{list-style:none;margin:4px 0;padding:0;display:grid;gap:6px}
.jc-keys li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:var(--c-surface);border:1px solid var(--c-border);animation:jc-in .25s ease}
.jc-keys li>div{flex:1;display:grid;gap:1px;min-width:0}.jc-keys li span{color:var(--c-muted);font-size:.84rem}
.jc-key-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--xco-accent) 14%,transparent);color:var(--xco-accent);flex:none}
.jc-codes-dlg{border:0;border-radius:18px;padding:22px;max-width:440px;width:calc(100% - 32px);background:var(--c-surface);color:var(--c-text);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.jc-codes-dlg::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(3px)}
.jc-codes{font:600 1.05rem/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;columns:2;background:var(--c-fill);border-radius:12px;padding:12px 16px;margin:12px 0;user-select:all}
.jc-unlock{min-height:calc(100vh - 120px);display:grid;place-items:center;padding:24px}
.jc-unlock-card{width:min(420px,100%);text-align:center;background:var(--c-surface);border:1px solid var(--c-border);border-radius:24px;padding:34px 26px 22px;box-shadow:0 18px 50px rgba(0,0,0,.08);animation:jc-in .35s ease}
.jc-unlock-card h1{font-size:1.5rem;margin:12px 0 6px}.jc-unlock-card>p{color:var(--c-muted);margin:0 0 18px}
.jc-unlock-ico{width:72px;height:72px;margin:0 auto;border-radius:22px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--xco-accent),color-mix(in srgb,var(--xco-accent) 55%,#000));box-shadow:0 10px 30px color-mix(in srgb,var(--xco-accent) 40%,transparent)}
.jc-unlock-go{width:100%;justify-content:center;padding:13px;font-size:1.02rem}
.jc-unlock .jc-lock-err{margin:12px 0 0;text-align:left}
.jc-unlock-more{margin-top:16px;text-align:left}.jc-unlock-more summary{cursor:pointer;color:var(--c-muted);font-size:.9rem;text-align:center}
.jc-unlock-more form{display:grid;gap:6px;margin-top:10px}.jc-unlock-rc{display:flex;gap:8px}.jc-unlock-rc input{flex:1;font-family:ui-monospace,monospace}
.jc-unlock-out{display:inline-block;margin-top:14px;color:var(--c-muted);font-size:.86rem}
body.jc-unlocked .jc-unlock-card{transform:scale(.96);opacity:0;transition:.25s ease}

/* ---------- Creation models (JoinCTT Image / Video / Music 3.0 – 5.0) ---------- */
.jc-cm{position:relative}.jc-cm[hidden],.jc-pick[hidden]{display:none}
.jc-cm-btn{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 10px 0 12px;border:0;border-radius:999px;background:color-mix(in srgb,var(--xco-accent) 12%,var(--c-fill));color:var(--accent-text,var(--xco-accent));font:inherit;font-size:.9rem;font-weight:650;cursor:pointer;white-space:nowrap;transition:background var(--t-quick)}
.jc-cm-btn:hover{background:color-mix(in srgb,var(--xco-accent) 20%,var(--c-fill))}
.jc-cm-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jc-cm-menu{position:absolute;right:0;bottom:44px;z-index:40;width:320px;padding:6px;display:grid;gap:2px;background:var(--c-surface);border-radius:var(--r-lg,16px);box-shadow:var(--e3);animation:pf-pop var(--t-quick) both;transform-origin:bottom right}
.jc-cm-menu[hidden],.jc-cm-group[hidden]{display:none}.jc-cm-group{display:grid;gap:2px}
.jc-cm-menu [role=option]{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 34px;border:0;border-radius:10px;background:none;color:var(--c-text);font:inherit;text-align:left;cursor:pointer;position:relative}
.jc-cm-menu [role=option]>span{display:grid;gap:1px;flex:1}.jc-cm-menu small{color:var(--c-muted);font-size:.82rem}
.jc-cm-menu [role=option]:hover,.jc-cm-menu [role=option]:focus-visible{background:var(--c-fill);outline:0}
.jc-cm-menu [aria-selected=true]::before{content:"";position:absolute;left:12px;top:50%;margin-top:-6px;width:12px;height:7px;border-left:2px solid var(--xco-accent);border-bottom:2px solid var(--xco-accent);transform:rotate(-45deg)}
.jc-cm-menu [aria-disabled=true] b{color:var(--c-muted)}
.jc-cm-lock,.jc-cm-soon{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:3px 8px;border-radius:999px;flex:none}
.jc-cm-lock{background:linear-gradient(135deg,#f5c451,#e08a1e);color:#3b2400}.jc-cm-soon{background:var(--c-fill);color:var(--c-muted)}
.jc-cm-more{display:block;padding:8px 12px 6px;border-top:.5px solid var(--c-border);margin-top:4px;font-size:.84rem;color:var(--accent-text);text-decoration:none}
@media (max-width:760px){.jc-cm-menu{position:fixed;left:10px;right:10px;top:auto;bottom:calc(72px + env(safe-area-inset-bottom));width:auto;z-index:70;transform-origin:bottom center}}

/* ---------- Live talk v2: language, camera flip, softer orb, closing ---------- */
.jc-live.closing{opacity:0;transform:scale(.98);transition:.2s ease}
.jc-live-lang{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 6px 4px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.jc-live-lang svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.jc-live-lang select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:#fff;font:inherit;font-size:.86rem;padding:2px 6px;cursor:pointer;outline:0}
.jc-live-lang select option{color:#111}
.jc-live-camwrap{position:relative}.jc-live-camwrap[hidden]{display:none}
.jc-live-camwrap.mirror video{transform:scaleX(-1)}
.jc-live-flip{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;backdrop-filter:blur(6px)}
.jc-live-flip svg,.jc-live-a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.jc-orb i{position:absolute;inset:-6%;border-radius:50%;border:1px solid color-mix(in srgb,var(--xco-accent) 50%,#fff);opacity:0;pointer-events:none}
.jc-live[data-state=listen] .jc-orb i{animation:jcRing 2.4s ease-out infinite}.jc-live[data-state=listen] .jc-orb i:nth-child(2){animation-delay:.8s}.jc-live[data-state=listen] .jc-orb i:nth-child(3){animation-delay:1.6s}
@keyframes jcRing{0%{transform:scale(.92);opacity:.55}100%{transform:scale(1.5);opacity:0}}
@media (max-height:640px){.jc-orb{width:min(140px,38vw)}.jc-live-cam{width:min(240px,60vw)}}

/* ---------- Phones: the message bar always fits; icon-only actions ---------- */
@media (max-width:560px){
  .jc-tools{gap:2px;flex-wrap:nowrap;min-width:0}
  .jc-tools .jc-tool{width:34px;min-width:34px;padding:0;justify-content:center}
  .jc-tools .jc-tool>span{display:none}
  .jc-pick-btn,.jc-cm-btn{padding:0 6px 0 10px;height:34px}
  .jc-pick-name,.jc-cm-name{font-size:0}
  .jc-pick-name::after,.jc-cm-name::after{content:attr(data-short);font-size:.86rem}
  .jc-live-btn,.jc-send{width:36px;height:36px;flex:none}
  .jc-acts{flex-wrap:nowrap;gap:2px}
  .jc-acts .jc-act>span{display:none}
  .jc-acts .jc-act{padding:6px 8px}
  .jc-kind-chip span{max-width:62px;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:360px){.jc-tools .jc-cam{display:none}}

/* ---------- JoinCTT sidebar: calm, compact, chat-app style ---------- */
.pf-app-joinctt .pf-sidebar a{min-height:36px;padding:5px 10px;font-size:.93rem;border-radius:10px}
.pf-app-joinctt .pf-sidebar .pf-nav-icon{width:24px;height:24px;background:transparent;color:var(--c-muted);box-shadow:none}
.pf-app-joinctt .pf-sidebar a:hover .pf-nav-icon,.pf-app-joinctt .pf-sidebar a.is-active .pf-nav-icon{color:var(--xco-accent)}
.pf-app-joinctt .pf-sidebar a[href="/"]{font-weight:600}
.pf-app-joinctt .pf-sidebar a[href="/"] .pf-nav-icon{background:var(--xco-accent);color:var(--xco-accent-ink,#fff);border-radius:8px}
.pf-app-joinctt .pf-sidebar a[href^="/c.php?id="]{min-height:32px;padding:4px 10px 4px 12px;color:var(--c-muted)}
.pf-app-joinctt .pf-sidebar a[href^="/c.php?id="]:hover{color:var(--c-text)}
.pf-app-joinctt .pf-sidebar a[href^="/c.php?id="] .pf-nav-icon{display:none}
.pf-app-joinctt .pf-sidebar a[href^="/c.php?id="] span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pf-app-joinctt .pf-sidebar a[href="/download.php"]{margin-top:8px;border:1px dashed var(--c-border);}
/* Smooth, readable conversation */
.pf-app-joinctt .jc-m{animation:jc-in .22s ease both}
.pf-app-joinctt .jc-comp{transition:box-shadow .2s ease,border-color .2s ease}
.pf-app-joinctt .jc-comp:focus-within{box-shadow:0 8px 30px -12px color-mix(in srgb,var(--xco-accent) 45%,transparent)}

/* ---------- Message actions: edit, older answers, like / dislike, report ---------- */
.jc-act svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.jc-act.jc-rate.on{color:var(--xco-accent);background:color-mix(in srgb,var(--xco-accent) 12%,transparent)}
.jc-act.jc-rate.on svg{fill:color-mix(in srgb,var(--xco-accent) 22%,transparent)}
.jc-act[data-tip]{position:relative}.jc-act[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--c-text);color:var(--c-surface);font-size:.72rem;padding:3px 7px;border-radius:6px;white-space:nowrap;pointer-events:none}
.jc-m.user{flex-direction:column;align-items:flex-end;gap:2px}
.jc-uacts{display:flex;align-items:center;gap:2px;opacity:0;transition:opacity var(--t-quick)}
.jc-m.user:hover .jc-uacts,.jc-uacts:focus-within{opacity:1}
@media (hover:none){.jc-uacts{opacity:.75}}
.jc-uacts .jc-act{padding:4px 6px}.jc-edited{font-size:.74rem;color:var(--c-muted);margin-right:4px}
.jc-m.user.editing{align-items:stretch}.jc-m.user.editing .jc-uacts{display:none}
.jc-editbox{width:min(100%,680px);margin-left:auto;background:var(--c-surface);border:1px solid color-mix(in srgb,var(--xco-accent) 45%,var(--c-border));border-radius:18px;padding:10px 12px;box-shadow:0 6px 24px rgba(0,0,0,.08);animation:jc-in .2s ease}
.jc-editbox textarea{width:100%;border:0;outline:0;resize:none;background:none;color:var(--c-text);font:inherit;line-height:1.5}
.jc-editbar{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.jc-vers{display:inline-flex;align-items:center;gap:2px;margin-top:6px;color:var(--c-muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.jc-vers button{border:0;background:none;color:inherit;width:26px;height:26px;border-radius:8px;font-size:1.1rem;line-height:1;cursor:pointer}
.jc-vers button:hover:not(:disabled){background:var(--c-fill);color:var(--c-text)}.jc-vers button:disabled{opacity:.35;cursor:default}
.jc-vers+.jc-acts{display:inline-flex;vertical-align:middle}
.jc-v-q{font-size:.82rem;color:var(--c-muted);border-left:3px solid var(--c-border-strong);padding:2px 0 2px 10px;margin-bottom:8px}
.jc-body.jc-v-in{animation:jc-in .22s ease}
.jc-more{position:relative;display:inline-block}.jc-more>summary{list-style:none}.jc-more>summary::-webkit-details-marker{display:none}
.jc-more-pop{position:absolute;bottom:calc(100% + 6px);left:0;z-index:30;min-width:170px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;padding:5px;box-shadow:var(--e3,0 12px 32px rgba(0,0,0,.16));display:grid;animation:jc-in .16s ease}
.jc-more-pop button{border:0;background:none;text-align:left;padding:9px 12px;border-radius:8px;color:var(--c-text);font:inherit;font-size:.9rem;cursor:pointer}
.jc-more-pop button:hover{background:var(--c-fill)}.jc-more-pop .jc-report{color:var(--c-error)}
.jc-sheet{border:0;border-radius:20px;padding:22px;width:min(440px,calc(100% - 28px));background:var(--c-surface);color:var(--c-text);box-shadow:0 24px 70px rgba(0,0,0,.3)}
.jc-sheet::backdrop{background:rgba(0,0,0,.4);backdrop-filter:blur(3px)}
.jc-sheet h3{margin:0 0 12px;font-size:1.1rem}
.jc-sheet-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.jc-sheet-chips label{cursor:pointer}.jc-sheet-chips input{position:absolute;opacity:0;pointer-events:none}
.jc-sheet-chips span{display:inline-block;padding:7px 12px;border-radius:999px;border:1px solid var(--c-border);font-size:.88rem;transition:.15s}
.jc-sheet-chips input:checked+span{border-color:var(--xco-accent);background:color-mix(in srgb,var(--xco-accent) 12%,transparent);color:var(--xco-accent)}
.jc-sheet-chips input:focus-visible+span{outline:2px solid var(--xco-accent);outline-offset:2px}
.jc-sheet textarea{width:100%;border:1px solid var(--c-border);border-radius:12px;padding:10px;background:var(--c-fill);color:var(--c-text);font:inherit;resize:vertical;margin-bottom:12px}
@media (max-width:640px){.jc-sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;border-radius:22px 22px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom))}.jc-more-pop{left:auto;right:0}}
.jc-cm-menu{max-height:min(70vh,520px);overflow:auto;overscroll-behavior:contain}
.jc-cm-menu.down{bottom:auto;top:44px;transform-origin:top right}
@media (max-width:640px){.jc-cm-menu{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));top:auto;width:auto;max-height:70vh}.jc-cm-menu.down{top:auto}}

/* ---------- Tic-tac-toe while you wait (slides in and out by itself) ---------- */
.jcg{max-width:340px;margin:10px 0 4px;border:1px solid var(--c-border);border-radius:18px;padding:12px;background:var(--c-surface);box-shadow:0 6px 22px rgba(0,0,0,.06)}
.jcg.jcg-in{animation:jcg-in .32s cubic-bezier(.2,.9,.3,1.2) both}.jcg.jcg-out{animation:jcg-out .26s ease both}
@keyframes jcg-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes jcg-out{to{opacity:0;transform:translateY(-6px) scale(.97);height:0;margin:0;padding-top:0;padding-bottom:0}}
.jcg-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.jcg-title{font-weight:700;font-size:.88rem;flex:1}.jcg-done .jcg-title{color:var(--c-success)}
.jcg-score{font-size:.74rem;color:var(--c-muted);order:3;flex:1 1 100%}
.jcg-x{border:0;background:var(--c-fill);color:var(--c-muted);width:28px;height:28px;border-radius:50%;font-size:1.1rem;line-height:1;cursor:pointer}
.jcg-board{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;aspect-ratio:1;max-width:240px;margin:0 auto}
.jcg-line{display:none}
.jcg-cell{border:0;border-radius:14px;background:var(--c-fill);font:700 clamp(1.6rem,8vw,2.2rem)/1 system-ui,sans-serif;color:var(--c-text);cursor:pointer;transition:transform .12s ease,background .15s ease;touch-action:manipulation}
.jcg-cell:hover:not(:disabled){background:color-mix(in srgb,var(--xco-accent) 12%,var(--c-fill))}
.jcg-cell:active:not(:disabled){transform:scale(.93)}.jcg-cell:disabled{cursor:default}
.jcg-cell.x{color:var(--xco-accent);animation:jcg-pop .2s ease}.jcg-cell.o{color:#E0754F;animation:jcg-pop .2s ease}
.jcg-cell.win{background:color-mix(in srgb,var(--xco-accent) 22%,var(--c-fill));animation:jcg-win .5s ease 2}
.jcg-lost .jcg-cell.win{background:color-mix(in srgb,#E0754F 22%,var(--c-fill))}
@keyframes jcg-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes jcg-win{50%{transform:scale(1.08)}}
.jcg-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:.84rem;color:var(--c-muted)}
.jcg-again{border:0;background:var(--xco-accent);color:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:.82rem;cursor:pointer}
.jcg-won .jcg-msg{color:var(--c-success);font-weight:600}

/* ---------- Auto, agents, usage, limits, nudges, ads ---------- */
.jc-rec{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.02em;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--xco-accent) 16%,transparent);color:var(--xco-accent);margin-left:6px;vertical-align:1px}
.jc-pick-sep{border:0;border-top:1px solid var(--c-border);margin:4px 6px}
.jc-agent{position:relative}
.jc-agent-btn.on{color:var(--xco-accent);background:color-mix(in srgb,var(--xco-accent) 12%,transparent)}
.jc-agent-menu{position:absolute;left:0;bottom:44px;z-index:40;width:300px;max-height:min(70vh,480px);overflow:auto;padding:6px;display:grid;gap:2px;background:var(--c-surface);border-radius:16px;box-shadow:var(--e3,0 12px 32px rgba(0,0,0,.16));animation:jc-in .16s ease}
.jc-agent-menu[hidden]{display:none}
.jc-agent-menu [role=option]{display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:10px;background:none;color:var(--c-text);font:inherit;text-align:left;cursor:pointer}
.jc-agent-menu [role=option] svg,.jc-agent-menu [role=option] .xco-i{width:18px;height:18px;flex:none;color:var(--xco-accent)}
.jc-agent-menu [role=option]>span{display:grid;gap:1px}.jc-agent-menu small{color:var(--c-muted);font-size:.8rem}
.jc-agent-menu [role=option]:hover,.jc-agent-menu [aria-selected=true]{background:var(--c-fill)}
@media (max-width:640px){.jc-agent-menu{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto}.jc-agent-btn span{display:none}}
.jc-usage{display:grid;gap:10px;margin-top:10px}
.jc-use-h{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:4px}.jc-use-h b{font-variant-numeric:tabular-nums}
.jc-use-bar{height:8px;border-radius:999px;background:var(--c-fill);overflow:hidden}.jc-use-bar i{display:block;height:100%;border-radius:inherit;background:var(--xco-accent);transition:width .6s ease}
.jc-use.near .jc-use-bar i{background:#d97706}.jc-use.full .jc-use-bar i{background:var(--c-error)}
#usage .jc-upsell{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;margin-top:16px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--xco-accent) 8%,var(--c-fill))}
#usage .jc-upsell>div{display:grid;gap:2px}#usage .jc-upsell span{font-size:.84rem}
.jc-count{font-variant-numeric:tabular-nums}
.jc-limit{display:flex;gap:14px;padding:16px;border-radius:18px;border:1px solid color-mix(in srgb,#d97706 35%,var(--c-border));background:color-mix(in srgb,#d97706 7%,var(--c-surface));animation:jc-in .25s ease}
.jc-limit-ic{font-size:1.6rem}.jc-limit-t{display:grid;gap:6px}.jc-limit-t p{margin:0;color:var(--c-muted);font-size:.9rem}
.jc-limit-cd{font-size:1rem}.jc-limit-cd b{font-size:1.15rem;color:var(--c-text)}
.jc-limit-up{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}.jc-limit-up span{font-size:.8rem;color:var(--c-muted)}
.jc-nudge{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--xco-accent) 8%,var(--c-fill));font-size:.86rem;animation:jc-in .25s ease}
.jc-nudge svg{width:16px;height:16px;color:var(--xco-accent);flex:none}.jc-nudge span{flex:1}.jc-nudge a{font-weight:600;white-space:nowrap}
.jc-ad{margin-top:12px;border:1px solid var(--c-border);border-radius:14px;padding:10px 12px;background:var(--c-surface);max-width:560px;animation:jc-in .3s ease}
.jc-ad-h{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--c-muted);margin-bottom:6px}
.jc-ad-tag{font-weight:700;color:var(--c-text);border:1px solid var(--c-border);border-radius:6px;padding:1px 6px}
.jc-ad-why{margin-left:auto;border:0;background:none;color:var(--c-muted);cursor:pointer;font-size:.9rem}
.jc-ad-body{display:flex;gap:10px;color:inherit;text-decoration:none}.jc-ad-body img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none}
.jc-ad-body span{display:grid;gap:2px}.jc-ad-body small{color:var(--c-muted)}.jc-ad-body em{font-style:normal;font-size:.78rem;color:var(--xco-accent)}
.jc-ad-free{display:inline-block;margin-top:6px;font-size:.74rem;color:var(--c-muted)}
.jc-make-auto{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-top:4px;border-top:1px solid var(--c-border);cursor:pointer}
.jc-make-auto>span:first-child{display:grid;gap:1px;flex:1}.jc-make-auto small{color:var(--c-muted);font-size:.78rem}
.jc-think-l li.cmd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;color:var(--c-muted);background:var(--c-fill);border-radius:6px;padding:3px 8px;margin:3px 0;white-space:pre-wrap;word-break:break-word}
.jc-think-l li.cmd::before{display:none}
.jc-lyrics{margin-top:10px;border:1px solid var(--c-border);border-radius:12px;padding:8px 12px;background:var(--c-surface)}
.jc-lyrics summary{cursor:pointer;font-weight:600;font-size:.88rem}
.jc-lyrics pre{white-space:pre-wrap;font:inherit;font-size:.9rem;line-height:1.6;margin:8px 0 0;max-height:360px;overflow:auto}

/* ---------- Live: full-screen camera with the conversation written over it ---------- */
.jc-live{--lvl:0}
.jc-live-caps{display:grid;justify-items:center;gap:6px;max-width:min(680px,92vw);text-align:center}
.jc-live-wave{display:none;align-items:center;gap:4px;height:34px}
.jc-live-wave i{width:5px;border-radius:3px;background:#fff;opacity:.9;height:calc(6px + var(--lvl) * 26px);transition:height .08s linear}
.jc-live-wave i:nth-child(2),.jc-live-wave i:nth-child(6){height:calc(8px + var(--lvl) * 20px)}.jc-live-wave i:nth-child(4){height:calc(10px + var(--lvl) * 32px)}
.jc-live[data-state=speak] .jc-live-wave i{animation:jc-wave 1s ease-in-out infinite}.jc-live-wave i:nth-child(odd){animation-delay:-.4s}.jc-live-wave i:nth-child(3n){animation-delay:-.7s}
@keyframes jc-wave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.25)}}
.jc-live.cam{justify-content:flex-end;background:#000}
.jc-live.cam .jc-live-camwrap{position:fixed;inset:0;z-index:0}
.jc-live.cam .jc-live-cam{width:100%;height:100%;aspect-ratio:auto;max-width:none;border:0;border-radius:0;object-fit:cover;box-shadow:none}
.jc-live.cam .jc-live-flip{position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:3}
.jc-live.cam>*:not(.jc-live-camwrap){position:relative;z-index:2}
.jc-live.cam .jc-orb{display:none}
.jc-live.cam .jc-live-top{position:fixed;top:calc(12px + env(safe-area-inset-top));left:0;right:0;justify-content:center}
.jc-live.cam .jc-live-wave{display:flex}
.jc-live.cam .jc-live-caps{width:100%;max-width:none;padding:18px 18px 8px;background:linear-gradient(transparent,rgba(0,0,0,.72) 38%);margin:0 -18px}
.jc-live.cam .jc-live-you,.jc-live.cam .jc-live-ai{text-shadow:0 1px 3px rgba(0,0,0,.8);max-width:min(680px,92vw);margin:0 auto}
.jc-live.cam .jc-live-ai{font-size:1.12rem;font-weight:600;color:#fff;max-height:30vh;overflow:auto}
.jc-live.cam .jc-live-you{color:rgba(255,255,255,.78);font-size:.95rem}
.jc-live.cam .jc-live-state{color:rgba(255,255,255,.85);text-shadow:0 1px 3px #000}
.jc-live.cam .jc-live-a{background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ===================================================================================
   Desktop and phone are designed separately. Desktop: sidebar + full tool row.
   Phone (≤ 760px): a Gemini-style app — top bar with menu · JoinCTT model · avatar,
   a big greeting, chips, one pill composer at the bottom with a "+" sheet, no tab bar.
   =================================================================================== */
.jc-plus,.jc-top-model{display:none}
.jc-agent-chip{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 8px 0 12px;border:0;border-radius:999px;background:color-mix(in srgb,var(--xco-accent) 14%,var(--c-fill));color:var(--xco-accent);font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;animation:jc-in .2s ease}
.jc-agent-chip[hidden]{display:none}.jc-agent-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.pf-sidebar a.is-agent{background:color-mix(in srgb,var(--xco-accent) 12%,transparent);color:var(--xco-accent);font-weight:600}
.jc-lyr-btn.on{color:var(--xco-accent);background:color-mix(in srgb,var(--xco-accent) 12%,transparent)}
.jc-lyr{border:1px solid var(--c-border);border-radius:16px;padding:10px 12px;margin:2px 0 6px;background:var(--c-fill);animation:jc-in .2s ease}
.jc-lyr[hidden]{display:none}
.jc-lyr-h{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}.jc-lyr-h b{font-size:.9rem;white-space:nowrap}.jc-lyr-h small{flex:1;color:var(--c-muted);font-size:.78rem;line-height:1.35}
.jc-lyr-x{border:0;background:none;color:var(--c-muted);font-size:1.2rem;line-height:1;cursor:pointer;padding:0 2px}
.jc-lyr textarea{width:100%;min-height:120px;max-height:40vh;border:0;outline:0;resize:vertical;background:transparent;color:var(--c-text);font:inherit;font-size:.92rem;line-height:1.55}
.jc-plus-sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;border-radius:24px 24px 0 0;background:var(--c-surface);color:var(--c-text);box-shadow:0 -10px 40px rgba(0,0,0,.25);transform:translateY(100%);transition:transform .22s cubic-bezier(.2,.9,.3,1)}
.jc-plus-sheet.in{transform:none}.jc-plus-sheet::backdrop{background:rgba(0,0,0,.35)}
.jc-plus-sheet>*{margin-left:14px;margin-right:14px}
.jc-ps-grab{width:40px;height:4px;border-radius:2px;background:var(--c-border-strong);margin:10px auto 12px!important}
.jc-ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.jc-ps-grid.three{grid-template-columns:repeat(3,1fr)}
.jc-ps-grid button,.jc-ps-list button{display:flex;align-items:center;gap:10px;border:0;border-radius:16px;background:var(--c-fill);color:var(--c-text);font:inherit;text-align:left;padding:12px;cursor:pointer;min-height:56px}
.jc-ps-grid.three button{flex-direction:column;justify-content:center;text-align:center;gap:6px;padding:14px 8px}
.jc-ps-grid button:active,.jc-ps-list button:active{transform:scale(.97)}
.jc-ps-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--xco-accent) 14%,transparent);color:var(--xco-accent);flex:none}
.jc-ps-ic svg{width:20px;height:20px}
.jc-ps-grid b,.jc-ps-list b{font-size:.92rem}.jc-ps-grid small,.jc-ps-list small{display:block;color:var(--c-muted);font-size:.76rem;margin-top:1px}
.jc-ps-h{font-size:.78rem;font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:.04em;margin:14px 16px 8px!important}
.jc-ps-list{display:grid;gap:8px;margin-top:10px!important;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.jc-ps-list button{background:none;border:1px solid var(--c-border)}.jc-ps-list button.on .jc-ps-ic{background:var(--xco-accent);color:#fff}

@media (max-width: 760px) {
  :root { --jc-tab: env(safe-area-inset-bottom); }
  body.pf-app-joinctt .pf-tabbar { display: none !important; }
  body.pf-app-joinctt .pf-main { padding-bottom: 0; }
  /* top bar: ☰  JoinCTT ▾  (avatar) */
  body.pf-app-joinctt .pf-topbar { border-bottom: 0; background: var(--c-bg); gap: 6px; }
  body.pf-app-joinctt .pf-wordmark, body.pf-app-joinctt .pf-wordmark-fallback, body.pf-app-joinctt .pf-lockup-divider { display: none !important; }
  /* the Xcojo apps menu stays next to the account button on phones */
  body.pf-app-joinctt .pf-topbar-end { gap: 4px; }
  body.pf-app-joinctt [data-pf-toggle="apps"] { display: inline-grid !important; width: 38px; height: 38px; }
  body.pf-app-joinctt.jc-has-top-model .pf-lockup { display: none; }
  .jc-top-model { display: inline-flex; align-items: center; gap: 4px; margin: 0 auto; height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--c-text); font: inherit; font-size: 1.02rem; font-weight: 600; cursor: pointer; }
  .jc-top-model:active { background: var(--c-fill); }
  .jc-top-model small { color: var(--c-muted); font-weight: 500; font-size: .86rem; }
  .jc-top-model svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--c-muted); }
  .jc-comp .jc-pick-btn { display: none !important; } .jc-comp .jc-pick { width: 0; margin: 0; }
  /* drawer */
  body.pf-app-joinctt .pf-sidebar { width: min(86vw, 320px); top: 0; z-index: 60; border-radius: 0 24px 24px 0; padding-top: calc(16px + env(safe-area-inset-top)); transition: transform .26s cubic-bezier(.2,.9,.3,1); }
  body.pf-app-joinctt .pf-sidebar.is-open { box-shadow: 0 0 0 100vmax rgba(0,0,0,.32); }
  /* composer: a single pill with + · text · mic · live/send */
  .jc-comp { border-radius: 28px; padding: 8px 8px 8px 12px; box-shadow: 0 0 0 .5px var(--c-border-strong), 0 6px 22px -10px rgba(0,0,0,.25); }
  .jc-plus { display: inline-grid; place-items: center; }
  .jc-comp .jc-attach, .jc-comp .jc-cam, .jc-comp .jc-web, .jc-comp .jc-make { display: none !important; }
  .jc-comp textarea { font-size: 16px; }
  .jc-tools { gap: 4px; }
  .jc-cm-btn { height: 32px; font-size: .82rem; }
  /* home: greeting at the top, chips, composer pinned to the bottom */
  .jc-home { min-height: calc(100dvh - var(--topbar)); display: flex; flex-direction: column; justify-content: flex-start; padding: 6vh 18px 150px; }
  .jc-hero { text-align: left; width: 100%; }
  .jc-home .jc-logo, .jc-home .jc-tiers, .jc-home .jc-upsell { display: none; }
  .jc-hello { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; text-align: left; background: linear-gradient(90deg, var(--xco-accent), #6d5bd0 55%, #e0754f); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 6px; }
  .jc-sub { text-align: left; font-size: 1.15rem; color: var(--c-muted); margin: 0 0 22px; }
  .jc-home #jc-form { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--c-bg) 32%); }
  .jc-home .jc-sugg { display: flex; flex-direction: column; gap: 8px; overflow: visible; }
  .jc-home .jc-sugg button { width: 100%; padding: 12px 14px; border-radius: 16px; background: var(--c-fill); border: 0; text-align: left; }
  .jc-home .jc-sugg button:nth-child(n+5) { display: none; }
  .jc-home .jc-sugg small { display: none; }
  .jc-home .jc-legal { position: fixed; left: 0; right: 0; bottom: calc(4px + env(safe-area-inset-bottom)); z-index: 31; font-size: .66rem; margin: 0; opacity: .7; pointer-events: none; }
  .jc-home #jc-form { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  /* chat: full height, light header, composer at the bottom */
  .jc-head { border-bottom: 0; padding-top: 2px; padding-bottom: 2px; }
  .jc-title { font-size: .95rem; }
  .jc-dock { padding: 6px 10px calc(8px + env(safe-area-inset-bottom)); }
  .jc-foot { font-size: .7rem; }
  .jc-m.bot .jc-av { display: none; }
  .jc-m.bot .jc-main { width: 100%; }
  .jc-bubble { border-radius: 22px 22px 6px 22px; }
  .jc-acts { opacity: 1; }
  /* every tap feels instant */
  .jc-comp button, .jc-acts button, .pf-sidebar a { -webkit-tap-highlight-color: transparent; }
}
@media (min-width: 761px) { .jc-plus-sheet { display: none; } }
@media (max-width: 760px) {
  .jc-comp .jc-plus { width: 40px; height: 40px; border-radius: 50%; background: var(--c-fill) !important; color: var(--c-text) !important; box-shadow: none !important; }
  .jc-comp .jc-plus svg { width: 22px; height: 22px; }
  .jc-home .jc-legal { z-index: 29; }
  .jc-lyr-h small { display: none; }
  .jc-lyr textarea::placeholder { color: var(--c-muted); }
}
.jc-lyr-btn[hidden],.jc-plus[hidden]{display:none!important}

/* JoinCTT agent: words under a creation, and the tip in the + sheet */
.jc-note { margin-top: 10px; }
.jc-note > :first-child { margin-top: 0; }
.jc-ps-tip { margin: 10px 4px 2px; font-size: 13px; opacity: .7; text-align: center; }

/* Thinking shimmer (ChatGPT-style bars while JoinCTT starts) */
.jc-shimmer { display: flex; flex-direction: column; gap: 8px; padding: 6px 2px 2px; }
.jc-shimmer i { height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--pf-line, #e7e2d8) 25%, var(--pf-bg-soft, #f2ede3) 37%, var(--pf-line, #e7e2d8) 63%); background-size: 400% 100%; animation: jc-sh 1.3s ease infinite; }
.jc-shimmer i:nth-child(1) { width: 92%; } .jc-shimmer i:nth-child(2) { width: 78%; } .jc-shimmer i:nth-child(3) { width: 60%; }
@keyframes jc-sh { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .jc-shimmer i { animation: none; } }
.jc-think-l .cmd { opacity: .8; } .jc-think-l li:last-child:not(.ok) { position: relative; }
.jc-think-l li:last-child:not(.ok)::after { content: ''; display: inline-block; width: 1.6em; height: 1em; margin-left: 4px; vertical-align: -2px; border-radius: 4px; background: linear-gradient(90deg, var(--pf-line, #e7e2d8) 25%, var(--pf-bg-soft, #f2ede3) 37%, var(--pf-line, #e7e2d8) 63%); background-size: 400% 100%; animation: jc-sh 1.3s ease infinite; }

/* Stop button (the send button while JoinCTT is responding) */
.jc-send.stopping { background: var(--pf-ink, #1c1a16); color: #fff; }
.jc-stopped { margin-top: 10px; font-size: 13px; opacity: .65; }

/* Live code preview */
.jc-code-h .jc-prev-code { margin-left: auto; margin-right: 8px; background: none; border: 0; font: inherit; font-size: 12px; cursor: pointer; color: var(--pf-accent, #b3541e); }
.jc-code-h .jc-prev-code.on { font-weight: 600; }
.jc-code-h .jc-copy-code { margin-left: 0; }
.jc-preview { margin: -4px 0 14px; border: 1px solid var(--pf-line, #e7e2d8); border-radius: 12px; overflow: hidden; background: #fff; }
.jc-preview iframe { display: block; width: 100%; height: 360px; border: 0; background: #fff; }

/* Memory game board */
.jcg-mem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; }
.jcg-card { aspect-ratio: 1; border: 1px solid var(--pf-line, #e7e2d8); border-radius: 10px; background: var(--pf-bg-soft, #f2ede3); font-size: 24px; cursor: pointer; display: grid; place-items: center; transition: transform .12s, background .2s; }
.jcg-card.up { background: #fff; } .jcg-card.done { background: var(--pf-accent, #b3541e); color: #fff; border-color: transparent; opacity: .92; }
.jcg-card:active { transform: scale(.95); }

/* Download button in code blocks */
.jc-code-h .jc-dl-code { background: none; border: 0; font: inherit; font-size: 12px; cursor: pointer; color: var(--pf-accent, #b3541e); margin-right: 8px; }

/* Ghost (temporary) chat */
.jc-tool.jc-ghost[aria-pressed="true"] { color: var(--pf-accent, #b3541e); background: var(--pf-bg-soft, #f2ede3); }
.jc-is-ghost .jc-head::after, .jc-is-ghost .jc-home::before { content: "👻 Ghost chat — not saved, memory off"; display: block; font-size: 12px; opacity: .7; text-align: center; padding: 4px; }

/* Guest (signed-out) chat */
.jc-guest-box { display: flex; gap: 8px; align-items: flex-end; border: 1px solid var(--pf-line, #e7e2d8); border-radius: 16px; padding: 8px 10px; background: var(--pf-bg, #fff); max-width: 680px; margin: 0 auto; }
.jc-guest-box textarea { flex: 1; border: 0; outline: 0; resize: none; background: none; font: inherit; max-height: 180px; }
.jc-guest-note { text-align: center; font-size: 13px; opacity: .75; margin: 8px 0 0; }
.jc-guest-thread { max-width: 720px; margin: 18px auto 0; text-align: left; display: flex; flex-direction: column; gap: 14px; }


/* ================= JoinCTT 5.1 — canvas studio, search pictures, credits, voices, storage ================= */
/* Code studio panel beside the chat (desktop) / full-screen sheet (phone) */
:root { --jc-cv-w: min(46vw, 760px); }
.jc-canvas { position: fixed; z-index: 60; top: var(--topbar); right: 0; bottom: 0; width: var(--jc-cv-w); display: flex; flex-direction: column; background: var(--c-bg); border-left: .5px solid var(--c-border-strong); box-shadow: -18px 0 40px -28px rgba(0,0,0,.35); animation: jc-cv-in .28s cubic-bezier(.2,0,0,1) both; }
.jc-canvas[hidden] { display: none; }
@keyframes jc-cv-in { from { transform: translateX(24px); opacity: 0; } }
body.jc-cv-open .pf-main:has(.jc-app) { margin-right: var(--jc-cv-w); transition: margin .25s; }
body.jc-cv-dragging, body.jc-cv-dragging * { user-select: none; cursor: col-resize !important; }
.jc-cv-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 2; }
.jc-cv-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: .5px solid var(--c-border-strong); flex-wrap: wrap; }
.jc-cv-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 140px; }
.jc-cv-title b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-cv-title span { font-size: .76rem; color: var(--c-muted); }
.jc-cv-tabs { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--c-fill); }
.jc-cv-tabs button { border: 0; background: none; padding: 5px 12px; border-radius: 8px; font: inherit; font-size: .84rem; color: var(--c-muted); cursor: pointer; }
.jc-cv-tabs button[aria-selected="true"] { background: var(--c-bg); color: var(--c-text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.jc-cv-tools { display: inline-flex; align-items: center; gap: 4px; }
.jc-cv-tools button, .jc-cv-dev button { border: 0; background: none; color: var(--c-text); font: inherit; font-size: .84rem; padding: 6px 9px; border-radius: 8px; cursor: pointer; }
.jc-cv-tools button:hover, .jc-cv-dev button:hover, .jc-cv-dev button[aria-pressed="true"] { background: var(--c-fill); }
.jc-cv-dev { display: inline-flex; margin-right: 4px; }
.jc-cv-body { flex: 1; min-height: 0; display: grid; }
.jc-cv-body[data-view="preview"] { grid-template-rows: 1fr; } .jc-cv-body[data-view="preview"] .jc-cv-code { display: none; }
.jc-cv-body[data-view="code"] .jc-cv-stage { display: none; }
.jc-cv-body[data-view="split"] { grid-template-rows: 1fr 1fr; }
.jc-cv-stage { position: relative; display: flex; justify-content: center; background: repeating-conic-gradient(var(--c-fill) 0 25%, transparent 0 50%) 0 0 / 16px 16px; overflow: auto; }
.jc-cv-frame { width: 100%; height: 100%; border: 0; background: #fff; transition: width .25s; }
.jc-cv-code { margin: 0; overflow: auto; padding: 14px 16px; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; background: #0f1115; color: #e6e6e6; border-top: .5px solid var(--c-border-strong); }
@media (max-width: 1100px) { .jc-cv-only-wide { display: none !important; } }
@media (max-width: 760px) {
  .jc-canvas { top: 0; width: 100%; border-left: 0; z-index: 95; padding-top: env(safe-area-inset-top); }
  body.jc-cv-open .pf-main:has(.jc-app) { margin-right: 0; }
  .jc-cv-resize { display: none; }
  .jc-cv-head { padding: 8px 10px; }
  .jc-cv-tools button[data-act="open"] { display: none; }
}
.jc-prev-code.on { background: var(--xco-accent); color: #fff; }

/* Pictures from Ixchel search, shown with answers */
.jc-imgstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 2px 0 12px; }
.jc-imgstrip a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--c-fill); }
.jc-imgstrip img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.jc-imgstrip a:hover img { transform: scale(1.04); }
.jc-imgstrip span { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .jc-imgstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "Now using credits" */
.jc-credpill { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; background: color-mix(in srgb, #d97706 14%, transparent); color: #b45309; }
.jc-credits .jc-credit-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.jc-credits .jc-credit-top > div { display: flex; flex-direction: column; gap: 2px; }
.jc-credit-label { font-size: .8rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.jc-credit-bal { font-size: 1.6rem; line-height: 1.2; }
.jc-credit-meter { height: 8px; border-radius: 999px; background: var(--c-fill); overflow: hidden; margin-top: 12px; }
.jc-credit-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--xco-accent), #d97706); transition: width .4s; }
.jc-credit-form .pf-form { margin-top: 10px; }

/* Voice & speech */
.jc-voices { display: flex; flex-direction: column; gap: 14px; margin: 10px 0 16px; }
.jc-voice-group h3 { margin: 0 0 8px; font-size: .86rem; color: var(--c-muted); font-weight: 600; }
.jc-voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; }
.jc-voice { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 10px 40px 10px 12px; border-radius: 12px; border: .5px solid var(--c-border-strong); cursor: pointer; transition: border-color .2s, background .2s; }
.jc-voice input { position: absolute; opacity: 0; pointer-events: none; }
.jc-voice.on, .jc-voice:has(input:checked) { border-color: var(--xco-accent); background: color-mix(in srgb, var(--xco-accent) 9%, transparent); }
.jc-voice:has(input:focus-visible) { outline: 2px solid var(--xco-accent); outline-offset: 2px; }
.jc-voice-name { font-weight: 600; font-size: .92rem; }
.jc-voice-char { font-size: .78rem; color: var(--c-muted); }
.jc-voice-play { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--c-fill); color: var(--c-text); font-size: .7rem; cursor: pointer; }
.jc-voice-play.on, .jc-voice-play:hover { background: var(--xco-accent); color: #fff; }
.jc-rate { width: min(260px, 50vw); accent-color: var(--xco-accent); }
.jc-adj { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.jc-adj-b { border: .5px solid var(--c-border-strong); background: none; color: var(--c-text); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: .82rem; cursor: pointer; }
.jc-adj-b:hover { background: var(--c-fill); }

/* Uploads */
.jc-uploads { display: flex; flex-direction: column; gap: 18px; }
.jc-up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.jc-up-item { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px; border: .5px solid var(--c-border-strong); cursor: pointer; }
.jc-up-item input { position: absolute; top: 10px; left: 10px; z-index: 1; width: 18px; height: 18px; accent-color: var(--xco-accent); }
.jc-up-item:has(input:checked) { border-color: var(--xco-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--xco-accent) 30%, transparent); }
.jc-up-item img, .jc-up-gone { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--c-fill); display: grid; place-items: center; color: var(--c-muted); font-size: .8rem; }
.jc-up-meta { font-size: .76rem; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Recorded songs */
.jcm-rec .jcm-dl { text-decoration: none; }

/* Gemini Live badge */
.jc-live.gemini-live .jc-live-top b::after { content: ' · Live'; color: var(--xco-accent); font-weight: 600; }

/* polish: smoother message entrance and composer focus */
.jc-comp:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--xco-accent) 18%, transparent), var(--e2, 0 8px 24px -16px rgba(0,0,0,.3)); }
@media (prefers-reduced-motion: reduce) { .jc-canvas, .jc-imgstrip img { animation: none; transition: none; } }