.jch-home { width: 100%; min-width: 0; color: rgba(255,255,255,.85); font: 14px/24px 'CapCut Sans','PingFang SC','Microsoft YaHei',Arial,sans-serif; color-scheme: dark; }
.jch-home *, .jch-home *::before, .jch-home *::after { box-sizing: border-box; }
.jch-home [hidden] { display: none !important; }
.jch-home button, .jch-home input, .jch-home textarea { font: inherit; }
.jch-home button { color: inherit; cursor: pointer; }
.jch-home button:disabled { cursor: not-allowed; opacity: .4; }
.jch-home :is(button,input,textarea):focus-visible { outline: 2px solid #8dcbf0; outline-offset: 3px; }
.jch-home svg { display: block; width: 20px; height: 20px; flex: 0 0 auto; }
.jch-home .jch-main { width: min(100%,1320px); margin: 0 auto; padding: 24px 0 56px; }
.jch-home .jch-recent { width: min(100%,1200px); margin: 0 auto; }
.jch-home .jch-section-heading { display: flex; align-items: center; gap: 12px; min-width: 0; height: 36px; margin-bottom: 12px; }
.jch-home .jch-title { margin: 0; color: rgba(255,255,255,.85); font-size: 14px; line-height: 22px; font-weight: 500; }
.jch-home:not(.is-all-grid) .jch-title { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.jch-home:not(.is-all-grid) .jch-section-heading { margin-bottom: 0; }
.jch-home .jch-all { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 32px; margin-left: auto; padding: 2px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: 13px; line-height: 22px; }
.jch-home .jch-back { display: grid; place-items: center; width: 30px; height: 30px; padding: 5px; border: 0; border-radius: 6px; background: transparent; }
.jch-home .jch-search { width: min(260px,45%); height: 32px; min-width: 0; margin-left: auto; padding: 4px 12px; border: 1px solid #ffffff14; border-radius: 8px; background: #ffffff06; color: inherit; font-size: 13px; }
.jch-home .jch-project-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.jch-home .jch-project-card, .jch-home .jch-new-card { position: relative; width: 100%; min-width: 0; aspect-ratio: 16/9; overflow: hidden; border: 0; border-radius: 16px; background: #2c2d30; }
.jch-home .jch-project-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; text-align: left; }
.jch-home .jch-thumbnail { position: absolute; inset: 0; display: grid; place-items: center; }
.jch-home .jch-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.jch-home .jch-thumbnail:has(img)::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.72)); pointer-events: none; }
.jch-home .jch-canvas-glyph { width: 30px; height: 30px; color: #ffffff40; }
.jch-home .jch-project-meta { position: absolute; right: 44px; bottom: 12px; left: 16px; display: flex; flex-direction: column; gap: 1px; min-width: 0; text-shadow: 0 1px 4px #0008; }
.jch-home .jch-project-meta strong { overflow: hidden; font-size: 13px; line-height: 20px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.jch-home .jch-project-meta time { color: #ffffff73; font-size: 11px; line-height: 16px; }
.jch-home .jch-project-more { position: absolute; right: 12px; bottom: 14px; display: grid; place-items: center; width: 24px; height: 24px; padding: 2px; border: 0; border-radius: 5px; background: transparent; color: #ffffffa6; }
.jch-home .jch-project-more:hover { background: #ffffff14; }
.jch-home .jch-new-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background-image: linear-gradient(180deg,rgba(26,26,26,.72),rgba(42,42,42,.72) 106.67%); }
.jch-home .jch-new-card::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#ffffff24 .6px,transparent .8px); background-size: 12px 12px; mask-image: radial-gradient(ellipse at center,#0009,transparent 75%); }
.jch-home .jch-new-decoration { position: absolute; inset: 0; width: 100%; height: 100%; color: #ffffff0d; stroke-width: 1; }
.jch-home .jch-new-plus { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #fff; color: #191919; }
.jch-home .jch-new-plus svg { width: 20px; height: 20px; }
.jch-home .jch-new-label { position: relative; color: #fff; font-size: 12px; line-height: 20px; }
.jch-home .jch-empty-search { margin: 20px 0 0; color: #ffffff73; font-size: 13px; }
.jch-home .jch-composer { position: relative; width: min(100%,1000px); min-height: 70px; margin: 32px auto 0; padding: 22px 17px; border: 1px solid #ffffff0a; border-radius: 20px; background: linear-gradient(180deg,rgba(26,26,26,.72),rgba(42,42,42,.72) 106.67%); }
.jch-home .jch-draft-input { display: block; width: 100%; min-height: 24px; max-height: 176px; padding: 0 124px 0 0; resize: none; border: 0; outline: none; background: transparent; color: #ffffffe0; font-size: 14px; line-height: 24px; }
.jch-home .jch-draft-input::placeholder { color: #ffffff59; }
.jch-home .jch-draft-input:focus-visible { outline: none; }
.jch-home .jch-composer:focus-within { border-color: #ffffff26; }
.jch-home .jch-composer-actions { position: absolute; right: 17px; bottom: 19px; display: flex; align-items: center; gap: 10px; }
.jch-home .jch-composer-tools { display: flex; align-items: center; gap: 4px; }
.jch-home .jch-composer-tools button { display: grid; place-items: center; width: 28px; height: 28px; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: #ffffff73; font-size: 16px; }
.jch-home .jch-composer-tools button:hover { background: #ffffff0d; color: #fff; }
.jch-home .jch-composer-tools .jch-upload-trigger { display: none; }
.jch-home .jch-submit { display: grid; place-items: center; width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 50%; background: #ffffff33; color: #fff; }
.jch-home .jch-submit:disabled { opacity: .4; }
.jch-home .jch-composer.is-focused .jch-composer-actions { position: static; justify-content: space-between; margin-top: 12px; }
.jch-home .jch-composer.is-focused .jch-draft-input { padding-right: 0; }
.jch-home .jch-composer.is-focused .jch-upload-trigger { display: grid; }
.jch-home .jch-draft-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jch-home .jch-draft-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 8px; border: 1px solid #ffffff14; border-radius: 6px; background: #ffffff0a; color: #d9e9f2; font-size: 12px; line-height: 20px; }
.jch-home .jch-draft-chip button { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; background: transparent; color: #ffffff73; }
.jch-home .jch-draft-chip svg { width: 12px; height: 12px; }
.jch-home .jch-attachments { display: flex; gap: 8px; max-width: 100%; margin-top: 12px; overflow-x: auto; }
.jch-home .jch-attachment { position: relative; display: flex; flex: 0 0 128px; flex-direction: column; justify-content: center; min-width: 0; min-height: 86px; overflow: hidden; border: 1px solid #ffffff14; border-radius: 8px; background: #ffffff08; }
.jch-home .jch-attachment :is(img,video) { width: 128px; height: 72px; object-fit: cover; }
.jch-home .jch-attachment:has(audio) { flex-basis: 220px; }
.jch-home .jch-attachment audio { width: 220px; height: 40px; }
.jch-home .jch-attachment-name { display: block; overflow: hidden; padding: 2px 8px; font-size: 11px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.jch-home .jch-attachment-remove { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 20px; height: 20px; padding: 3px; border: 0; border-radius: 50%; background: #0009; color: #fff; }
.jch-home .jch-attachment-remove svg { width: 14px; height: 14px; }
.jch-home .jch-notice { max-width: 1000px; min-height: 20px; margin: 8px auto 0; color: #ffffff73; font-size: 12px; line-height: 20px; }
.jch-home .jch-menu { position: fixed; z-index: 3200; display: flex; flex-direction: column; gap: 4px; width: min(196px,calc(100vw - 16px)); max-height: calc(100dvh - 16px); min-height: min(132px,calc(100dvh - 16px)); overflow-y: auto; padding: 4px; border: 1px solid #ffffff0a; border-radius: 12px; background: #262626; box-shadow: 0 8px 32px #0005; }
.jch-home .jch-menu-item { display: flex; flex: 0 0 36px; flex-direction: column; justify-content: center; width: 100%; min-height: 36px; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 13px; line-height: 20px; }
.jch-home .jch-menu-item:hover { background: #ffffff0a; }
.jch-home .jch-menu-item.is-danger { color: #f18b8b; }
.jch-home .jch-menu-reason { display: block; overflow: hidden; max-width: 100%; font-size: 10px; line-height: 12px; text-overflow: ellipsis; white-space: nowrap; }
.jch-home .jch-menu-separator { height: 1px; margin: 0 4px; background: #ffffff0d; }
.jch-home .jch-skill-menu { width: min(216px,calc(100vw - 16px)); min-height: auto; }
.jch-home .jch-modal-backdrop { position: fixed; z-index: 3300; inset: 0; display: grid; place-items: center; padding: 16px; background: #0008; }
.jch-home .jch-modal { display: flex; flex-direction: column; width: min(456px,100%); min-width: 0; max-height: calc(100dvh - 32px); min-height: min(216px,calc(100dvh - 32px)); overflow-y: auto; padding: 32px; border-radius: 16px; background: #333; box-shadow: 0 16px 60px #0005; }
.jch-home .jch-modal-title { margin: 0 0 16px; color: #fff; font-size: 16px; line-height: 24px; font-weight: 500; }
.jch-home .jch-rename-label { display: block; font-size: 0; line-height: 0; }
.jch-home .jch-rename-field { position: relative; }
.jch-home .jch-rename-input { display: block; width: 100%; height: 36px; padding: 6px 54px 6px 10px; border: 1px solid #ffffff26; border-radius: 8px; background: #ffffff08; color: #fff; font-size: 13px; line-height: 22px; }
.jch-home .jch-input-count { position: absolute; top: 8px; right: 10px; color: #ffffff59; font-size: 11px; line-height: 20px; pointer-events: none; }
.jch-home .jch-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 20px; }
.jch-home .jch-modal-actions button { min-width: 64px; height: 32px; padding: 5px 16px; border: 0; border-radius: 8px; font-size: 13px; line-height: 22px; }
.jch-home .jch-cancel { background: #ffffff0d; color: #ffffffbf; }
.jch-home .jch-confirm { background: #fff; color: #171717; }
.jch-home .jch-confirm.is-danger { background: #d85a5a; color: #fff; }
.jch-home .jch-delete-copy { margin: 0; overflow-wrap: anywhere; color: #ffffffa6; font-size: 13px; line-height: 22px; }
@media (max-width: 760px) {
  .jch-home .jch-main { padding-top: 12px; }
  .jch-home .jch-project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .jch-home .jch-project-meta { left: 12px; bottom: 9px; }
  .jch-home .jch-project-more { right: 8px; bottom: 9px; }
  .jch-home .jch-composer { margin-top: 24px; padding: 19px 13px; }
  .jch-home .jch-composer-actions { right: 13px; bottom: 15px; }
  .jch-home .jch-modal { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { .jch-home *, .jch-home *::before, .jch-home *::after { scroll-behavior: auto; transition: none !important; animation: none !important; } }

/* Enlarged creation entry above the real project list, as requested. */
.jch-home .jch-new-card { width: 100%; min-height: 260px; aspect-ratio: auto; margin-bottom: 28px; border: 1px solid #ffffff12; border-radius: 20px; gap: 14px; background-color: #151719; }
.jch-home .jch-new-plus { width: 48px; height: 48px; border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease; }
.jch-home .jch-new-plus svg { width: 28px; height: 28px; }
.jch-home .jch-new-label { font-size: 17px; line-height: 26px; font-weight: 500; }
.jch-home .jch-new-card:hover .jch-new-plus { transform: translateY(-2px); box-shadow: 0 6px 24px #ffffff20; }
.jch-home .jch-new-decoration { overflow: hidden; pointer-events: none; color: #b6d0e333; }
.jch-home .jch-new-decoration path { stroke-width: .7px; vector-effect: non-scaling-stroke; stroke-dasharray: 90 40 12 40; animation: jch-create-flow 12s linear infinite; }
.jch-home .jch-new-decoration path:nth-child(2) { animation-duration: 17s; animation-direction: reverse; }
.jch-home .jch-new-card::before { background-size: 18px 18px; animation: jch-create-grid 14s linear infinite; }
.jch-home .jch-new-card::after { content: ''; position: absolute; inset: -40%; pointer-events: none; background: radial-gradient(ellipse at 25% 50%,#9ab7d60d,transparent 45%); animation: jch-create-glow 12s ease-in-out infinite alternate; }
.jch-home .jch-project-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.jch-home .jch-section-heading { margin-bottom: 12px; }
.jch-home .jch-project-more { color: #ffffffb3; background: #00000014; }
.jch-home .jch-project-more:hover { background: #ffffff26; color: #fff; }
.jch-home .jch-notice:empty { display: none; }
.rsa-workspace[data-canvas-editor-open] .jch-new-card *,
.rsa-workspace[data-canvas-editor-open] .jch-new-card::before,
.rsa-workspace[data-canvas-editor-open] .jch-new-card::after { animation-play-state: paused; }
@keyframes jch-create-flow { to { stroke-dashoffset: -364; } }
@keyframes jch-create-grid { to { background-position: 36px -36px; } }
@keyframes jch-create-glow { from { transform: translateX(-10%); } to { transform: translateX(35%); } }
@media (max-width: 760px) {
  .jch-home .jch-new-card { min-height: 210px; margin-bottom: 20px; }
  .jch-home .jch-project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
}
@media (max-width: 440px) { .jch-home .jch-project-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .jch-home .jch-new-card, .jch-home .jch-new-card *, .jch-home .jch-new-card::before, .jch-home .jch-new-card::after { animation: none !important; transition: none !important; }
}

/* Reference home: charcoal surface, top blue glow, and a faded star pattern. */
.rsa-workspace.rsa-layout-canvas[data-agent-workspace="infinite-canvas"] > .jch-home-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #121212; }
.rsa-workspace.rsa-layout-canvas[data-agent-workspace="infinite-canvas"] .jch-home-backdrop * { pointer-events: none; }
.rsa-workspace.rsa-layout-canvas[data-agent-workspace="infinite-canvas"] .jch-home-bg-art { position: absolute; top: 0; left: 50%; display: block; width: 1200px; height: 400px; max-width: none; transform: translateX(-50%); }
.rsa-workspace.rsa-layout-canvas[data-agent-workspace="infinite-canvas"] .jch-home-bg-glow { opacity: .28; animation: jch-home-bg-breathe 14s ease-in-out infinite; }
.rsa-workspace.rsa-layout-canvas[data-agent-workspace="infinite-canvas"][data-canvas-editor-open] .jch-home-bg-glow,
[hidden] .rsa-workspace.rsa-layout-canvas[data-agent-workspace="infinite-canvas"] .jch-home-bg-glow { animation-play-state: paused; }
@keyframes jch-home-bg-breathe { 0%,100% { opacity: .24; } 50% { opacity: .28; } }
@media (prefers-reduced-motion: reduce) {
  .rsa-workspace.rsa-layout-canvas[data-agent-workspace="infinite-canvas"] .jch-home-bg-glow { animation: none; opacity: .28; }
}

/* Reference entry history reuses the same live project actions in a compact list. */
.jch-home.is-rolala-entry .jch-history-panel { position: absolute; z-index: 8; top: 6.5rem; left: 1.2rem; width: min(31rem,calc(100% - 2.4rem)); max-height: min(32rem,calc(100dvh - 7.5rem)); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 1rem; border: 1px solid #ffffff14; border-radius: .75rem; background: rgba(12,19,29,.98); box-shadow: 0 16px 50px #0006; font-family: system-ui,'PingFang SC','Microsoft YaHei',sans-serif; }
.jch-home.is-rolala-entry .jch-recent { width: 100%; }
.jch-home.is-rolala-entry .jch-project-grid { display: flex; flex-direction: column; gap: .4rem; }
.jch-home.is-rolala-entry .jch-project-card { height: 4.1rem; min-height: 4.1rem; aspect-ratio: auto; border-radius: .5rem; background: #ffffff04; }
.jch-home.is-rolala-entry .jch-project-card:hover { background: #06b6d40c; }
.jch-home.is-rolala-entry .jch-thumbnail { inset: .5rem auto .5rem .5rem; width: 3.1rem; overflow: hidden; border-radius: .3rem; background: #ffffff06; }
.jch-home.is-rolala-entry .jch-canvas-glyph { width: 1.4rem; height: 1.4rem; }
.jch-home.is-rolala-entry .jch-project-meta { left: 4.2rem; right: 3rem; top: .65rem; bottom: auto; gap: .1rem; }
.jch-home.is-rolala-entry .jch-project-more { right: .7rem; top: 1.3rem; bottom: auto; }
.jch-home.is-rolala-entry .jch-empty-search { padding: 1rem; text-align: center; line-height: 1.8; }
.jch-home.is-rolala-entry .jch-history-note { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid #ffffff0a; color: #8c99a0; font-size: 11px; line-height: 1.8; }
@media (max-width: 440px) {
  .jch-home.is-rolala-entry .jch-section-heading { height: auto; flex-wrap: wrap; gap: 8px; }
  .jch-home.is-rolala-entry .jch-search { order: 1; flex: 1 0 100%; width: 100%; }
}