.ai-assistant[hidden] { display: none !important; } .ai-result-view-column:has(> .ai-assistant:not([hidden])) > #ai-tool-modal-result { display: none !important; } .ai-assistant { flex: 1; min-height: 0; height: calc(100dvh - 160px); max-height: none; color: var(--ink, #172033); font-size: 14px; border: 1px solid var(--line, #e3e4e9); border-radius: 16px; background: var(--panel-bg, #fff); overflow: hidden; } .ai-assistant__content { display: flex; flex-direction: column; height: 100%; min-height: 0; box-sizing: border-box; } .ai-assistant__toolbar { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--line, #e3e4e9); position: relative; } .ai-assistant__back { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -4px 0 -4px -6px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; } .ai-assistant__back:hover:not(:disabled) { background: color-mix(in srgb, currentColor 10%, transparent); } .ai-assistant__back:disabled { opacity: .4; cursor: default; } .ai-assistant__back[hidden] { display: none; } .ai-assistant__name { font-weight: 600; margin-right: auto; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-assistant__log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; padding: 24px clamp(16px, 4vw, 48px); scrollbar-gutter: stable; } .ai-assistant__welcome { max-width: 440px; margin: 12% auto 0; text-align: center; } .ai-assistant__heading { font-size: 25px; letter-spacing: -.04em; margin: 0 0 16px; } .ai-assistant__intro, .ai-assistant__hint { opacity: .7; line-height: 1.7; } .ai-assistant__hint { margin-top: 24px; font-size: 13px; } .ai-assistant__message { margin: 0 0 24px; white-space: pre-wrap; line-height: 1.8; max-width: 100%; } /* A long message of the user, folded (2026-09-29): about eight lines, faded, with a button to see it all. */ .ai-assistant__message--user.is-folded .ai-assistant__fold-body { max-height: 12em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); } .ai-assistant__fold-toggle { display: block; margin: 8px 0 0 auto; padding: 3px 12px; border: 0; border-radius: 999px; background: rgba(127, 127, 127, .18); color: inherit; font: inherit; font-size: 12px; line-height: 1.5; cursor: pointer; } .ai-assistant__fold-toggle:hover { background: rgba(127, 127, 127, .28); } .ai-assistant__fold-toggle:focus-visible { outline: 2px solid var(--switch-on-bg, #8b7cf6); outline-offset: 2px; } .ai-assistant__message--user { margin-left: auto; width: fit-content; box-sizing: border-box; max-width: min(75%, 560px); padding: 12px 18px; border-radius: 20px 20px 4px 20px; background: var(--assistant-user-surface, #f0eff8); color: #292838; } .ai-assistant__message--assistant { padding: 0 2px; } .ai-assistant__message--error { color: #b83333; } .ai-assistant__form { flex: none; margin: 0 clamp(12px, 3vw, 28px); border: 1px solid var(--line, #dbdce5); border-radius: 20px; padding: 12px; background: var(--control-surface, #f7f9fc); box-shadow: 0 3px 12px #00000005; } /* Dragging files over the panel marks the composer as the place they land. */ .ai-assistant--drop .ai-assistant__form { border-color: #a38aef; box-shadow: 0 0 0 3px #a38aef33; } .ai-assistant__input { width: 100%; min-height: 70px; max-height: 150px; resize: vertical; box-sizing: border-box; padding: 4px 6px; border: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; line-height: 1.6; } .ai-assistant__composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ai-assistant__send { min-height: 38px; width: auto; border-radius: 22px; padding: 8px 18px; } .ai-assistant__secondary { color: inherit; background: transparent; border: 1px solid var(--line, #8884); border-radius: 9px; min-height: 32px; padding: 6px 10px; cursor: pointer; font-size: 12px; } .ai-assistant__footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 24px 14px; font-size: 11px; color: var(--muted, #737583); } .ai-assistant button:disabled { opacity: .45; cursor: default; } .ai-assistant__proposal { margin: -8px 0 24px; padding: 16px; border: 1px solid var(--line, #dedce8); border-radius: 12px; background: #f8f7fd; } .ai-assistant__change { margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; } .ai-assistant__attachment { display: flex; align-items: center; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; font-size: 12px; padding-bottom: 8px; } .ai-assistant :focus-visible { outline: 2px solid #8076ff; outline-offset: 3px; } .ai-assistant__history-menu > summary { list-style: none; } .ai-assistant__history-menu > summary::-webkit-details-marker { display: none; } /* Above the composer (2026-10-01, the user): a focused form is raised to z-index 5 and came later, so it covered the list. */ .ai-assistant__history-menu[open] .ai-assistant__history { position: absolute; top: 60px; right: 14px; z-index: 40; padding: 12px; width: min(300px, calc(100% - 28px)); box-sizing: border-box; border: 1px solid var(--line, #ddd); border-radius: 12px; background: var(--panel-bg, #fff); box-shadow: 0 6px 20px #0002; } .ai-assistant__history:not([hidden]) { display: flex; flex-wrap: wrap; gap: 8px; } .ai-assistant__history select { width: 100%; min-width: 0; color: inherit; background: inherit; } [data-theme="dark"] .ai-assistant { background: var(--panel-bg, #1b1c20); color: var(--ink, #eceef2); border-color: var(--line); } [data-theme="dark"] .ai-assistant__form, [data-theme="dark"] .ai-assistant__history { background: var(--control-surface, #24252a) !important; } [data-theme="dark"] .ai-assistant { --assistant-user-surface: #32313f; } [data-theme="dark"] .ai-assistant__message--user { color: #f4f2ff; } [data-theme="dark"] .ai-assistant__proposal { background: var(--control-surface, #24252a); } [data-theme="dark"] .ai-assistant__message--error { color: #ffb5b5; } @media (max-width: 767px) { .ai-assistant { height: 70dvh; min-height: 430px; max-height: 800px; } .ai-assistant__toolbar { padding: 12px; gap: 6px; } .ai-assistant__name { font-size: 11px; } .ai-assistant__footer { padding-inline: 12px; flex-wrap: wrap; } .ai-assistant__log { padding: 20px 14px; } } .ai-assistant__thinking { color: var(--muted, #888); animation: assistant-thinking 1.4s ease-in-out infinite; } .ai-assistant__message--typing::after { content: '▍'; color: #9b87ff; margin-left: 2px; } @keyframes assistant-thinking { 50% { opacity: .4; } } @media (prefers-reduced-motion: reduce) { .ai-assistant__thinking { animation: none; } } .ai-assistant__choices { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 24px; } /* Inside a card the card's padding is the space (2026-10-06, the user: the cast card stood tall — the row's own 12/24px went on top of the card's 16px): no outer margin at the card's top or bottom edge. */ .ai-assistant__proposal > .ai-assistant__choices:first-child { margin-top:0; } .ai-assistant__proposal > .ai-assistant__choices:last-child { margin-bottom:0; } .ai-assistant__choice { border:1px solid var(--line, #8885); border-radius:18px; padding:9px 14px; background:transparent; color:inherit; font:inherit; font-size:13px; text-align:left; overflow-wrap:anywhere; cursor:pointer; } .ai-assistant__choice:hover { background:#8b75ff18; border-color:#9b87ff; } .ai-assistant__attachments { display:flex; gap:10px; overflow-x:auto; max-height:128px; padding:4px 2px; } .ai-assistant__attachments:empty { display:none; } .ai-assistant__attachment { position:relative; flex:0 0 88px; display:flex; flex-direction:column; align-items:stretch; gap:5px; padding:0; min-width:0; } .ai-assistant__attachment-visual { height:72px; border-radius:10px; overflow:hidden; border:1px solid var(--line, #8884); background:#8881; display:grid; place-items:center; } .ai-assistant__thumbnail { width:100%; height:100%; object-fit:cover; min-height:0; } .ai-assistant__attachment-name { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; opacity:.75; } .ai-assistant__remove-image { position:absolute; top:3px; right:3px; width:26px; height:26px; border:1px solid #ffffff50; border-radius:50%; background:#171923dc; color:white; font-size:20px; line-height:20px; cursor:pointer; display:grid; place-items:center; } .ai-assistant__attachment-hint { margin:7px 2px 10px; font-size:11px; line-height:1.5; color:var(--muted, #888); } .ai-assistant__attach { display:inline-flex; align-items:center; gap:7px; border-radius:18px; padding:6px 12px 6px 8px; min-height:36px; } .ai-assistant__attach-icon { display:grid; place-items:center; border-radius:50%; width:22px; height:22px; background:#8b75ff24; color:#a38bff; font-size:22px; line-height:1; } .ai-assistant__attach:hover { border-color:#9b87ff; background:#8b75ff12; } .ai-assistant .ai-assistant__remove-image { box-sizing:border-box; appearance:none; padding:0; margin:0; width:26px; height:26px; min-width:26px; min-height:26px; max-width:26px; max-height:26px; line-height:1; font-size:0; box-shadow:0 1px 4px #0005; transform:none; z-index:1; } .ai-assistant .ai-assistant__remove-image::before, .ai-assistant .ai-assistant__remove-image::after { content:''; position:absolute; top:50%; left:50%; width:12px; height:2px; border-radius:1px; background:currentColor; transform:translate(-50%,-50%) rotate(45deg); } .ai-assistant .ai-assistant__remove-image::after { transform:translate(-50%,-50%) rotate(-45deg); } .ai-assistant .ai-assistant__remove-image:hover { background:#333540; } .ai-assistant__attach-wrap { position:relative; } .ai-assistant__attach-menu { color:var(--ink,#172033); position:absolute; bottom:calc(100% + 8px); left:0; z-index:4; width:max-content; min-width:180px; max-width:calc(100vw - 16px); padding:6px; border:1px solid var(--line,#8884); border-radius:12px; background:var(--panel-bg,#fff); box-shadow:0 4px 20px #0003; } .ai-assistant__attach-menu-item { display:block; width:100%; white-space:nowrap; text-align:left; color:inherit; background:transparent; border:0; border-radius:8px; padding:10px; cursor:pointer; font:inherit; } .ai-assistant__attach-menu-item:hover { background:#8b75ff22; } /* The line under [자동 생성] in a person's or place's photo menu. */ .ai-assistant__attach-menu-separator { height:1px; margin:4px 6px; background:var(--line,#8884); } /* A plan row's state ("make it in the chat card"): the size of the row's other buttons at every width, and pressable. */ .ai-assistant .ai-agent-plan__reference-new.ai-agent-plan__cast-state { font-size:12px; line-height:1.3; min-width:0; padding:4px 10px; cursor:pointer; } /* The chat card the row pointed at: a short ring. */ .ai-assistant__proposal.is-focused { animation:ai-cast-focus 1.6s ease-out; } @keyframes ai-cast-focus { 0%,40% { box-shadow:0 0 0 2px var(--switch-on-bg,#8b7cf6); } 100% { box-shadow:0 0 0 0 transparent; } } .ai-assistant__characters { margin:6px 2px; font-size:12px; line-height:1.5; color:var(--muted,#888); } .ai-assistant__attachment[data-kind='video'] { flex-basis:88px; } .ai-assistant__attachment[data-kind='audio'] { flex-basis:230px; } .ai-assistant__attachment[data-kind='audio'] .ai-assistant__thumbnail { width:100%; height:40px; } [data-theme='dark'] .ai-assistant__attach-menu { background:var(--panel-bg, #1b1c20); } @media (min-width:768px) { .ai-tool-workspace > .ai-result-view-column > .ai-assistant { flex:1 1 0; height:0; max-height:none; min-height:0; box-sizing:border-box; } } .ai-assistant__input::placeholder { color: var(--muted-soft, #737f90); opacity: 1; } html[data-theme="dark"] .ai-assistant__input::placeholder { color: #8f949e; opacity: .8; } .ai-assistant__mode-choices { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .ai-assistant__mode-choices button { min-height:38px; } .ai-assistant__character-cards { display:flex; gap:12px; flex-wrap:wrap; margin:0 0 24px; } .ai-assistant__character-card { display:flex; flex-direction:column; align-items:stretch; gap:8px; width:160px; max-width:100%; padding:10px; color:inherit; text-align:left; font:inherit; background:var(--control-surface,#f7f9fc); border:1px solid var(--line,#ddd); border-radius:12px; cursor:pointer; } .ai-assistant__character-card img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:8px; } .ai-assistant__character-card span { font-size:12px; line-height:1.5; } .ai-assistant__character-card:hover:not(:disabled) { border-color:#9b87ff; } .ai-assistant__character-action { margin-top:auto; padding-top:6px; color:var(--ink); font-weight:600; } .ai-assistant__character-card--picker { border-style:dashed; } .ai-assistant__character-picker-icon { display:grid; place-items:center; width:100%; aspect-ratio:3/4; border-radius:8px; background:var(--assistant-user-surface,rgba(120,110,170,.12)); color:var(--muted,#737583); font-size:34px; line-height:1; } .ai-assistant__question-option--picker { border-style:dashed; } .ai-assistant__generated-image { display:block; max-width:100%; max-height:280px; border-radius:10px; margin:12px 0; object-fit:contain; } .ai-assistant__table-scroll { max-width:100%; overflow-x:auto; margin:12px 0; white-space:normal; } .ai-assistant__scene-table { width:100%; border-collapse:collapse; font-size:13px; line-height:1.6; } .ai-assistant__scene-table th,.ai-assistant__scene-table td { padding:10px 12px; border:1px solid var(--line, #e3e4e9); text-align:left; vertical-align:top; min-width:70px; overflow-wrap:anywhere; } .ai-assistant__scene-table th { background:#f3f5f8; color:var(--ink, #172033); font-weight:600; } /* A heading word is never split (2026-10-08 multilingual test: Spanish 'Tiempo' broke as 'Tiemp/o'): the column widens to it. */ .ai-assistant__scene-table th { overflow-wrap:normal; } html[data-theme="dark"] .ai-assistant__scene-table th { background:var(--control-surface, #24242c); color:var(--ink, #f1f3f5); } /* Match the creation-history scrollbar, including nested horizontal scrollers. */ .ai-assistant { --assistant-scroll-thumb:rgba(86,101,122,.34); --assistant-scroll-hover:rgba(86,101,122,.52); } html[data-theme="dark"] .ai-assistant { --assistant-scroll-thumb:rgba(181,186,196,.36); --assistant-scroll-hover:rgba(181,186,196,.54); } .ai-assistant :is(.ai-assistant__log,.ai-assistant__input,.ai-assistant__attachments,.ai-assistant__table-scroll,.ai-assistant__library-list,.ai-assistant__missing-list,.ai-agent-plan,.ai-agent-plan__scroll,.ai-agent-plan__reference-table,.ai-assistant__clip-board,.ai-assistant__image-prompt-field) { scrollbar-width:thin; scrollbar-color:var(--assistant-scroll-thumb) transparent; } @supports selector(::-webkit-scrollbar) { .ai-assistant :is(.ai-assistant__log,.ai-assistant__input,.ai-assistant__attachments,.ai-assistant__table-scroll,.ai-assistant__library-list,.ai-assistant__missing-list,.ai-agent-plan,.ai-agent-plan__scroll,.ai-agent-plan__reference-table,.ai-assistant__clip-board,.ai-assistant__image-prompt-field) { scrollbar-width:auto; scrollbar-color:auto; } .ai-assistant :is(.ai-assistant__log,.ai-assistant__input,.ai-assistant__attachments,.ai-assistant__table-scroll,.ai-assistant__library-list,.ai-assistant__missing-list,.ai-agent-plan,.ai-agent-plan__scroll,.ai-agent-plan__reference-table,.ai-assistant__clip-board,.ai-assistant__image-prompt-field)::-webkit-scrollbar { width:10px; height:10px; } .ai-assistant ::-webkit-scrollbar-track,.ai-assistant ::-webkit-scrollbar-corner { background:transparent; } .ai-assistant ::-webkit-scrollbar-thumb { min-height:44px; min-width:44px; border:2px solid transparent; border-radius:999px; background:var(--assistant-scroll-thumb); background-clip:padding-box; } .ai-assistant ::-webkit-scrollbar-thumb:hover { background:var(--assistant-scroll-hover); background-clip:padding-box; } .ai-assistant ::-webkit-scrollbar-button { display:none; width:0; height:0; } } .ai-assistant__progress { display:flex; align-items:center; gap:4px; margin:8px 0 12px; color:var(--muted-soft,#8f949e); font-size:12px; line-height:1.6; } .ai-assistant__progress[data-running="true"]::before, .ai-assistant [data-generation-running="true"]::before { content:""; display:inline-block; vertical-align:middle; width:14px; height:14px; flex-shrink:0; margin-right:8px; border:2px solid #8b75ff35; border-top-color:#9b87ff; border-right-color:#9b87ff; border-radius:50%; animation:assistant-progress-spin 1.15s linear infinite; } .ai-assistant__elapsed { white-space:nowrap; font-variant-numeric:tabular-nums; } @keyframes assistant-progress-spin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { .ai-assistant__progress[data-running="true"]::before, .ai-assistant [data-generation-running="true"]::before { animation:none; } } .ai-assistant__questionnaire { margin:12px 0 24px; border:1px solid var(--line,#8884); border-radius:14px; padding:18px; background:var(--panel-bg); } .ai-assistant__questionnaire h3 { font-size:14px; margin:0 0 12px; line-height:1.6; } .ai-assistant__question-count { font-size:12px; color:var(--muted); } .ai-assistant__question-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .ai-assistant__question-option { text-align:left; padding:12px; white-space:normal; } .ai-assistant__question-option[aria-pressed="true"] { border-color:#9b87ff; background:#8b75ff20; } .ai-assistant__question-detail { box-sizing:border-box; width:100%; margin:14px 0; padding:10px; font:inherit; color:inherit; background:var(--control-surface,transparent); border:1px solid var(--line,#8884); border-radius:8px; resize:vertical; } .ai-assistant__question-nav { display:flex; flex-wrap:wrap; gap:8px; } @media(max-width:600px){.ai-assistant__question-options{grid-template-columns:1fr;}} .ai-assistant__rich-text { white-space:normal; font-weight:400; } .ai-assistant__rich-text p { margin:0 0 12px; line-height:1.8; } .ai-assistant__rich-text p:last-child { margin-bottom:0; } .ai-assistant__rich-text strong { font-weight:650; color:var(--ink,inherit); } .ai-assistant__reply-heading { margin:18px 0 8px; font-size:14px; font-weight:650; line-height:1.6; } .ai-assistant__reply-heading:first-child { margin-top:0; } .ai-assistant__rich-text ul,.ai-assistant__rich-text ol { margin:8px 0 14px; padding-inline-start:24px; } .ai-assistant__rich-text li { padding-inline-start:3px; margin:4px 0; } .ai-assistant__rich-text li::marker { color:var(--muted,#8f949e); } .ai-assistant__rich-text code { font-family:ui-monospace,monospace; font-size:.92em; padding:1px 5px; border-radius:4px; background:#8b75ff18; } .ai-assistant__previous-prompt { margin:8px 0 14px; color:var(--muted); font-size:12px; } .ai-assistant__previous-prompt summary { cursor:pointer; } .ai-assistant__questionnaire > button + button { margin-inline-start:8px; } .ai-assistant__production-plan { margin: 0 16px; border-bottom: 1px solid var(--border-color, #383940); font-size: 12px; } .ai-assistant__production-plan > summary { padding: 10px 0; cursor: pointer; } .ai-assistant__plan-body { max-height: 32vh; overflow: auto; padding: 0 2px 12px; scrollbar-width: thin; } .ai-assistant__plan-body label { display: block; margin: 8px 0; } .ai-assistant__plan-body textarea { display: block; width: 100%; box-sizing: border-box; color: inherit; background: transparent; border: 1px solid #6666; border-radius: 6px; padding: 6px; } .ai-assistant__plan-references select { margin: 4px 8px; max-width: 100%; background: var(--bg-secondary, #24252b); color: inherit; border: 1px solid #6666; border-radius: 6px; padding: 4px; } .ai-assistant__plan-body small { opacity: .7; } .ai-assistant__next-step { border-top: 1px solid #8883; padding: 12px 0; margin-top: 12px; } .ai-assistant__next-step p { margin: 6px 0 10px; } .ai-assistant__save-status { font-size: 11px; opacity: .65; margin-inline: 8px; } .ai-assistant__review-files { margin:12px 0; } .ai-assistant__review-file-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; } .ai-assistant__review-file { margin:0; width:125px; max-width:100%; min-width:0; padding:7px; border:1px solid var(--border-color,#383940); border-radius:10px; background:var(--bg-primary,#1b1c1f); box-sizing:border-box; } .ai-assistant__review-file[data-kind="audio"] { width:125px; } .ai-assistant__review-file-visual { position:relative; height:90px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:6px; background:#0002; } .ai-assistant__review-file-visual img,.ai-assistant__review-file-visual video { display:block; width:100%; height:100%; object-fit:contain; } .ai-assistant__review-file-badge { position:absolute; z-index:1; top:5px; left:5px; padding:2px 5px; border-radius:4px; background:#000b; color:#fff; font-size:10px; pointer-events:none; } .ai-assistant__review-audio-icon { font-size:36px; color:var(--muted,#b4b4c0); } .ai-assistant__review-file audio { width:100%; height:32px; margin-top:6px; } .ai-assistant__review-file figcaption { margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--muted,#b4b4c0); } /* Paid confirmation is the primary action inside a generation review. */ .ai-assistant .ai-assistant__generate { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; max-width:100%; margin-top:14px; padding:10px 20px; border:1px solid #7856d8; border-radius:10px; background:linear-gradient(110deg,#6254d9,#8246c7); color:#fff; font:inherit; font-size:14px; font-weight:600; line-height:1.5; box-shadow:0 3px 10px #6b48cc26; } /* No sparkle before a run button's words (2026-10-06, the user: it doubled the credit icon). */ .ai-assistant .ai-assistant__generate:hover:not(:disabled) { background:linear-gradient(110deg,#7162e4,#9154d5); box-shadow:0 4px 12px #6b48cc40; } .ai-assistant .ai-assistant__generate:disabled { box-shadow:none; } .ai-assistant .ai-assistant__review-action { min-height:38px; padding:8px 14px; border-color:#8e77dd; background:#8060d918; font-weight:600; } .ai-assistant__review-action:hover:not(:disabled) { background:#8060d930; } .ai-assistant__library {width:min(680px,90vw);max-height:80vh;overflow:auto;border:1px solid var(--line,#ddd);border-radius:16px;padding:20px;background:var(--panel-bg,#fff);color:var(--ink,#172033);} .ai-assistant__library-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:16px 0;} .ai-assistant__library-day {grid-column:1/-1;margin:6px 0 -4px;font-size:12px;font-weight:600;color:var(--muted, #8a8f98);} .ai-assistant__library-day:first-child {margin-top:0;} .ai-assistant__library-day[hidden] {display:none;} .ai-assistant__library-sentinel {height:1px;} .ai-assistant__library-card {display:flex;flex-wrap:wrap;gap:6px;align-content:start;cursor:pointer;border:1px solid var(--line,#ddd);border-radius:10px;padding:8px;overflow-wrap:anywhere;font-size:12px;} .ai-assistant__library-card:has(input:checked) {outline:2px solid #8b5cf6;} .ai-assistant__library-card img {width:100%;height:110px;object-fit:cover;border-radius:6px;} .ai-assistant__library > button {margin:4px;} .ai-assistant__notice {display:flex;gap:10px;align-items:flex-start;margin:14px 0;padding:12px 14px;border:1px solid var(--line,#e3e4e9);border-radius:10px;background:var(--notice-bg);--notice-accent:#64748b;--notice-bg:rgba(100,116,139,.07);} /* An action inside a notice keeps its label on one line; the text beside it wraps instead (2026-09-21). */ .ai-assistant__notice > button {flex:0 0 auto;white-space:nowrap;align-self:center;} .ai-assistant__notice--completed {--notice-accent:#23805b;--notice-bg:rgba(35,128,91,.07);} .ai-assistant__notice--failed {--notice-accent:#b45339;--notice-bg:rgba(180,83,57,.07);} .ai-assistant__notice--blocked {--notice-accent:#b7791f;--notice-bg:rgba(183,121,31,.08);} .ai-assistant__notice-icon {display:grid;place-items:center;flex:0 0 22px;height:22px;border:1px solid currentColor;border-radius:50%;color:var(--notice-accent);font-size:14px;font-weight:700;line-height:1;} .ai-assistant__notice-content {min-width:0;font-size:12px;line-height:1.65;} .ai-assistant__notice-content strong {display:block;color:var(--ink,#172033);font-size:13px;font-weight:600;} .ai-assistant__notice-content p {margin:4px 0 0;color:var(--muted,#697586);white-space:normal;} html[data-theme="dark"] .ai-assistant__notice {--notice-accent:#a0adbf;--notice-bg:rgba(160,173,191,.06);} html[data-theme="dark"] .ai-assistant__notice--completed {--notice-accent:#65c79f;--notice-bg:rgba(101,199,159,.06);} html[data-theme="dark"] .ai-assistant__notice--failed {--notice-accent:#ed9b86;--notice-bg:rgba(237,155,134,.06);} .ai-assistant__question-primary:not(:disabled) { border-color:#9b87ff; background:#8b75ff26; font-weight:650; } .ai-assistant__question-nav button:disabled { opacity:.45; cursor:default; } /* A compact primary action for each assistant phase. */ .ai-assistant__proposal-state { font-size:12px; font-weight:600; margin:0 0 12px; color:var(--ink,#172033); } [data-theme="dark"] .ai-assistant__proposal-state { color:#d6cef5; } .ai-assistant__refinements { margin:0 0 20px; font-size:13px; } .ai-assistant__refinements summary { cursor:pointer; color:var(--muted,#727487); padding:4px 0; } .ai-assistant__refinements .ai-assistant__choice { margin:8px 6px 0 0; } /* Theme-aware conversation picker: never use the OS select popup. */ .ai-assistant__history-menu[open] .ai-assistant__history { width:min(420px,calc(100% - 28px)); padding:12px; gap:10px; } .ai-assistant__history-heading { flex:1; align-self:center; font-size:13px; color:var(--ink); white-space:nowrap; } .ai-assistant__history select[hidden] { display:none; } .ai-assistant__history-rows { width:100%; min-width:0; max-height:min(640px,65dvh); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--muted,#888) transparent; } .ai-assistant__history-row { display:flex; flex-direction:column; gap:5px; width:100%; padding:12px 10px; border:0; border-radius:10px; background:transparent; color:var(--ink,inherit); text-align:left; cursor:pointer; font:inherit; } .ai-assistant__history-row:hover { background:transparent; } .ai-assistant__history-row[aria-pressed="true"] { border-color:transparent; background:transparent; } .ai-assistant__history-row:disabled { cursor:wait; opacity:.65; } .ai-assistant__history-title { font-size:13px; font-weight:500; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; } .ai-assistant__history-meta,.ai-assistant__history-empty { font-size:11px; line-height:1.5; color:var(--muted,#85858e); } .ai-assistant__history-rows::-webkit-scrollbar { width:8px; } .ai-assistant__history-rows::-webkit-scrollbar-thumb { background:var(--muted,#888); border:2px solid var(--panel-bg,#fff); border-radius:8px; } .ai-assistant__history-rows::-webkit-scrollbar-button { display:none; } .ai-assistant__history-refresh { width:32px; height:32px; padding:6px; display:inline-flex; align-items:center; justify-content:center; flex:none; } .ai-assistant__history-refresh svg { width:18px; height:18px; } .ai-assistant__send, .ai-assistant__attach { width:38px; min-width:38px; height:38px; min-height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; } .ai-assistant__send svg { width:20px; height:20px; } .ai-assistant__attach-icon { background:transparent; color:inherit; width:24px; height:24px; font-size:26px; } /* A single composer surface; shared auth form styles must not affect it. */ .ai-assistant__form { padding:12px; box-shadow:none; } .ai-assistant__input, .ai-assistant__input:hover, .ai-assistant__input:focus, .ai-assistant__input:focus-visible { display:block; margin:0; padding:2px 4px 10px; min-height:46px; resize:none; border:0 !important; border-radius:0; outline:none !important; box-shadow:none !important; background:transparent !important; color:inherit; } .ai-assistant__input::placeholder { color:var(--muted,#8d9099); opacity:1; } .ai-assistant__composer-actions { margin:0; padding:0; min-height:36px; align-items:center; } .ai-assistant__attach-wrap { display:flex; align-items:center; margin:0; } .ai-assistant__send, .ai-assistant__attach { box-sizing:border-box; flex:0 0 36px; width:36px; min-width:36px; height:36px; min-height:36px; margin:0; padding:0; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; border-radius:50%; line-height:1; cursor:pointer; } .ai-assistant__attach { border:0; background:transparent; color:var(--muted,#8d9099); } .ai-assistant__attach-icon { display:block; width:20px; height:20px; font-family:Arial,sans-serif; font-size:24px; line-height:20px; text-align:center; } .ai-assistant__send { border:0; background:var(--ink,#172033); color:var(--panel-bg,#fff); } .ai-assistant__send:hover:not(:disabled) { opacity:.85; } .ai-assistant__send svg { display:block; width:20px; height:20px; flex:none; } /* Keep the hit area while reducing the visible send circle. */ .ai-assistant__send { position:relative; isolation:isolate; background:transparent; } .ai-assistant__send::before { content:""; position:absolute; inset:4px; z-index:-1; border-radius:50%; background:var(--ink,#172033); } .ai-assistant__send svg { width:16px; height:16px; } .ai-assistant-reference-added { animation:assistant-reference-added 1.8s ease-out; } @keyframes assistant-reference-added { 0%,25% { outline:2px solid #ad9bff; outline-offset:-2px; box-shadow:inset 0 0 16px #9b87ff55,0 0 12px #9b87ff66; } 100% { outline:2px solid transparent; outline-offset:-2px; box-shadow:none; } } @media (prefers-reduced-motion:reduce) { .ai-assistant-reference-added { animation:none; outline:2px solid #ad9bff; outline-offset:-2px; } } .ai-assistant__composer-left { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; } /* Composer mode picker shares the site's rounded, theme-aware surfaces. */ .ai-assistant__mode-wrap { position:relative; } .ai-assistant .ai-assistant__apply-mode { display:inline-flex; align-items:center; gap:8px; height:32px; min-height:32px; padding:0 10px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted,#697586); font:inherit; font-size:12px; cursor:pointer; box-shadow:none; } .ai-assistant .ai-assistant__apply-mode:hover,.ai-assistant .ai-assistant__apply-mode[aria-expanded="true"] { background:var(--control-surface,#f3f2f7); color:var(--ink,#172033); border-color:var(--line,#e4e5eb); } .ai-assistant__mode-chevron { display:block; width:14px; height:14px; flex:none; } .ai-assistant__apply-mode[aria-expanded="true"] .ai-assistant__mode-chevron { transform:rotate(180deg); } .ai-assistant__mode-menu { position:absolute; left:0; bottom:calc(100% + 8px); z-index:30; width:260px; max-width:calc(100vw - 64px); padding:6px; border:1px solid var(--line,#e4e5eb); border-radius:12px; background:var(--panel-bg,#fff); box-shadow:0 8px 28px #0003; } .ai-assistant__mode-menu[hidden] { display:none; } /* Not enough room above (the empty-conversation composer sits near the top): open downward. */ .ai-assistant__mode-menu.is-below { bottom:auto; top:calc(100% + 8px); } .ai-assistant .ai-assistant__mode-option { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px; border:0; border-radius:8px; background:transparent; color:var(--ink,#172033); text-align:left; font:inherit; cursor:pointer; } .ai-assistant .ai-assistant__mode-option:hover { background:var(--control-surface,#f3f2f7); } .ai-assistant .ai-assistant__mode-option[aria-checked="true"] { background:#9575ef14; } .ai-assistant__mode-text { display:flex; flex-direction:column; gap:4px; } .ai-assistant__mode-text strong { font-size:12px; font-weight:600; } .ai-assistant__mode-text > span { font-size:11px; color:var(--muted,#697586); } .ai-assistant__mode-check { visibility:hidden; color:#a38aef; font-size:15px; } .ai-assistant__mode-option[aria-checked="true"] .ai-assistant__mode-check { visibility:visible; } .ai-assistant__mode-note { margin:6px 4px 2px; padding:8px 6px 4px; border-top:1px solid var(--line,#e4e5eb); font-size:11px; line-height:1.5; color:var(--muted,#697586); } .ai-assistant .ai-assistant__apply-mode:focus-visible,.ai-assistant .ai-assistant__mode-option:focus-visible { outline:2px solid #a38aef; outline-offset:2px; } /* One disclosure for the historical brief and proposal. */ .ai-assistant__saved-work { margin:0 0 20px; border:1px solid var(--line,#e4e5eb); border-radius:10px; background:transparent; overflow:hidden; } .ai-assistant__saved-work > summary { display:flex; align-items:center; gap:9px; padding:12px 14px; cursor:pointer; list-style:none; color:var(--muted,#697586); font-size:12px; font-weight:500; } .ai-assistant__saved-work > summary::-webkit-details-marker { display:none; } .ai-assistant__saved-work > summary::before { content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); flex:none; } .ai-assistant__saved-work[open] > summary::before { transform:rotate(45deg); } .ai-assistant__scene-changes .ai-assistant__saved-work-body { display:grid; gap:12px; padding:4px 14px 14px; } .ai-assistant__scene-change { display:grid; gap:6px; padding:10px 12px; border-radius:8px; background:var(--control-surface,#f3f2f7); } .ai-assistant__scene-change-op { font-size:12px; font-weight:600; color:var(--muted,#697586); letter-spacing:.02em; } .ai-assistant__scene-change-side { display:grid; gap:4px; } .ai-assistant__scene-change-label { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted,#697586); } .ai-assistant__scene-change-text { margin:0; font-size:13px; line-height:1.5; color:var(--ink,#172033); } .ai-assistant__scene-change--delete .ai-assistant__scene-change-text { text-decoration:line-through; color:var(--muted,#697586); } .ai-assistant__scene-change-note { margin:0; font-size:12px; color:var(--muted,#697586); } @media (min-width: 640px) { .ai-assistant__scene-change { grid-template-columns:auto 1fr 1fr; align-items:start; } .ai-assistant__scene-change:has(.ai-assistant__scene-change-side:only-of-type) { grid-template-columns:auto 1fr; } } .ai-assistant__saved-work > summary:hover { color:var(--ink,#172033); background:var(--control-surface,#f3f2f7); } .ai-assistant__saved-work > summary:focus-visible { outline:2px solid #a38aef; outline-offset:-3px; } .ai-assistant__saved-work-body { padding:0 14px 12px; font-size:12px; line-height:1.7; } .ai-assistant__saved-work-body section { padding:12px 0; border-top:1px solid var(--line,#e4e5eb); } .ai-assistant__saved-work-body h4 { margin:0 0 8px; font-size:12px; color:var(--ink,#172033); } .ai-assistant__saved-work-body dl { margin:0; } .ai-assistant__saved-work-body dt { color:var(--muted,#697586); margin:10px 0 2px; } .ai-assistant__saved-work-body dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; } .ai-assistant__saved-work-body .ai-assistant__change { margin:6px 0; white-space:pre-wrap; overflow-wrap:anywhere; } .ai-assistant__saved-work-note { margin:0; color:var(--muted,#697586); font-size:11px; } .ai-assistant .ai-assistant__apply-mode { line-height:16px; } .ai-assistant__apply-mode > span { display:block; line-height:16px; } /* "Prompt: English" must never push the composer wider than a narrow panel. */ .ai-assistant__composer-left > .ai-assistant__mode-wrap { min-width:0; max-width:100%; } .ai-assistant .ai-assistant__prompt-language { max-width:100%; } .ai-assistant__prompt-language > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ai-assistant__mode-chevron { position:relative; top:1px; width:12px; height:12px; } .ai-assistant .ai-assistant__remove-image { width:18px; height:18px; min-width:18px; min-height:18px; max-width:18px; max-height:18px; top:4px; right:4px; } .ai-assistant .ai-assistant__remove-image::before,.ai-assistant .ai-assistant__remove-image::after { width:8px; height:1.5px; } /* Keep the conversation as the sole scroll surface above the composer. */ .ai-assistant__content { overflow:hidden; } .ai-assistant__toolbar,.ai-assistant__footer { flex-shrink:0; } .ai-assistant__log { flex:1 1 0px; min-height:0; overflow-anchor:none; scroll-padding-bottom:24px; } .ai-assistant__log:focus-visible { outline:none; } .ai-assistant__image-preview { cursor:zoom-in; } .ai-assistant__image-preview:focus-visible { outline:2px solid #a38aef; outline-offset:2px; } .ai-assistant__sent-attachments { justify-content:flex-end; margin:20px 0 -6px; } .ai-assistant__image-model { position:relative; margin:12px 0; } .ai-assistant .ai-assistant__image-model-button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:10px 14px; border:1px solid var(--line,#e3e4e9); border-radius:10px; color:var(--ink,#172033); background:var(--panel-bg,#fff); font:inherit; font-size:13px; line-height:20px; text-align:left; cursor:pointer; } .ai-assistant__image-model-button svg { width:14px; height:14px; flex:none; } .ai-assistant__image-model-button[aria-expanded="true"] { border-color:#a38aef; } .ai-assistant__image-model-button[aria-expanded="true"] svg { transform:rotate(180deg); } .ai-assistant__image-model--with-quality { display:flex; align-items:stretch; gap:8px; } .ai-assistant__image-model--with-quality .ai-assistant__image-model-button { flex:1 1 auto; width:auto; min-width:0; } .ai-assistant__image-quality { position:relative; flex:0 0 auto; } .ai-assistant .ai-assistant__image-quality-button { width:auto; min-width:0; gap:10px; } .ai-assistant__image-quality-caption { font-size:12px; color:var(--muted,#8d9099); } .ai-assistant__image-quality-value { white-space:nowrap; } .ai-assistant__image-quality-menu { left:auto; right:0; min-width:168px; } .ai-assistant__image-model-menu { position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0; padding:5px; border:1px solid var(--line,#e3e4e9); border-radius:12px; background:var(--panel-bg,#fff); box-shadow:0 8px 24px #0003; } .ai-assistant__image-model-menu[hidden] { display:none; } .ai-assistant .ai-assistant__image-model-option { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px; border:0; border-radius:8px; background:transparent; color:var(--ink,#172033); font:inherit; font-size:13px; text-align:left; cursor:pointer; } .ai-assistant__image-model-option:hover { background:var(--control-surface,#f3f2f7); } .ai-assistant__image-model-option[aria-checked="true"] { background:#9575ef18; } .ai-assistant__image-model-check { color:#a38aef; visibility:hidden; } .ai-assistant__image-model-option[aria-checked="true"] .ai-assistant__image-model-check { visibility:visible; } .ai-assistant__role-picker { position:relative; display:inline-block; flex:none; } .ai-assistant .ai-assistant__role-trigger { display:inline-flex; align-items:center; justify-content:space-between; gap:12px; min-width:100px; min-height:34px; padding:6px 10px; border:1px solid var(--line,#e3e4e9); border-radius:8px; background:var(--panel-bg,#fff); color:var(--ink,#172033); font:inherit; font-size:12px; line-height:20px; cursor:pointer; } .ai-assistant__role-arrow { width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); } .ai-assistant__role-trigger[aria-expanded="true"] { border-color:#a38aef; } .ai-assistant__role-trigger[aria-expanded="true"] .ai-assistant__role-arrow { transform:translateY(1px) rotate(225deg); } .ai-assistant__role-menu { position:absolute; z-index:25; right:0; top:calc(100% + 5px); min-width:150px; max-height:240px; overflow-y:auto; padding:5px; border:1px solid var(--line,#e3e4e9); border-radius:10px; background:var(--panel-bg,#fff); box-shadow:0 8px 24px #0003; } .ai-assistant__role-menu[hidden] { display:none; } .ai-assistant .ai-assistant__role-option { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 10px; border:0; border-radius:6px; background:transparent; color:var(--ink,#172033); font:inherit; font-size:12px; text-align:left; cursor:pointer; } .ai-assistant__role-option:hover { background:var(--control-surface,#f3f2f7); } .ai-assistant__role-option[aria-checked="true"] { background:#9575ef18; } .ai-assistant__role-check { visibility:hidden; color:#a38aef; } .ai-assistant__role-option[aria-checked="true"] .ai-assistant__role-check { visibility:visible; } .ai-assistant__role-row { display:flex; align-items:center; gap:12px; margin:12px 0; } .ai-assistant .ai-assistant__role-thumbnail { flex:none; width:58px; height:58px; padding:0; border:1px solid var(--line,#e3e4e9); border-radius:8px; overflow:hidden; background:transparent; cursor:zoom-in; } .ai-assistant__role-thumbnail img { display:block; width:100%; height:100%; object-fit:cover; } .ai-assistant__role-info { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; font-size:12px; } .ai-assistant__role-info span { color:var(--muted,#697586); font-size:11px; } /* The same replace/remove menu the dock tiles carry, laid out in a row instead of over a thumbnail. */ .ai-assistant__role-actions { flex:none; } .ai-assistant__role-actions .ai-agent-plan__reference-menu { position:static; opacity:1; pointer-events:auto; } .ai-assistant .ai-assistant__role-actions .ai-agent-plan__reference-menu>button { width:32px; height:32px; min-height:32px; border:1px solid var(--line,#e3e4e9); background:var(--panel-bg,#fff); color:var(--ink,#172033); } .ai-assistant__chat-character { background:var(--panel-bg,#fff);color:var(--ink,#172033);font:inherit;text-align:left; } .ai-assistant__chat-character:hover {border-color:#a38aef;background:var(--control-surface,#f3f2f7);} .ai-assistant__chat-character img {height:auto;aspect-ratio:3/4;object-fit:contain;object-position:center top;} .ai-assistant__thumbnail.ai-assistant__character-cover {object-position:center top;} /* Generation review: quiet row dividers and consistent section spacing. */ .ai-assistant__generation-review {display:flex;flex-direction:column;align-items:stretch;gap:18px;padding:20px;margin:0 0 24px;} .ai-assistant__review-heading {font-size:14px;line-height:1.5;} .ai-assistant__review-settings {width:100%;border-collapse:collapse;font-size:12px;line-height:1.6;} .ai-assistant__review-settings th,.ai-assistant__review-settings td {padding:10px 12px;border:0;border-bottom:1px solid var(--line,#e3e4e9);background:transparent;text-align:left;vertical-align:top;} .ai-assistant__review-settings th {width:100px;color:var(--muted,#697586);font-weight:500;padding-left:0;} .ai-assistant__review-settings td {color:var(--ink,#172033);padding-right:0;} .ai-assistant__review-settings tr:first-child th,.ai-assistant__review-settings tr:first-child td {padding-top:0;} .ai-assistant__generation-review > p,.ai-assistant__generation-review .ai-assistant__review-files {margin:0;} .ai-assistant__generation-review .ai-assistant__review-files > strong {font-size:12px;} .ai-assistant__generation-review .ai-assistant__review-file {width:99px;border-color:var(--line,#e3e4e9);background:var(--control-surface,#f7f9fc);} .ai-assistant__generation-review .ai-assistant__review-file[data-kind='audio'] {width:99px;} .ai-assistant__generation-review .ai-assistant__review-file-visual {height:80px;background:transparent;} .ai-assistant__generation-review details {font-size:12px;line-height:1.65;} .ai-assistant__generation-review summary {cursor:pointer;color:var(--muted,#697586);} .ai-assistant__generation-review details p {margin:10px 0 0;white-space:pre-wrap;} .ai-assistant__review-cost {padding-top:16px;border-top:1px solid var(--line,#e3e4e9);font-size:12px;line-height:1.65;color:var(--muted,#697586);} .ai-assistant .ai-assistant__generation-review .ai-assistant__generate {align-self:flex-start;margin-top:-6px;} @media(max-width:600px){.ai-assistant__generation-review{padding:16px;gap:16px;}.ai-assistant__review-settings th{width:80px;}} .ai-assistant__completed-video {margin:0 0 24px;} .ai-assistant__completed-video video {display:block;width:100%;max-width:640px;max-height:440px;object-fit:contain;border-radius:12px;background:#111;} .ai-assistant__completed-video p {font-size:12px;color:var(--muted,#697586);} .ai-assistant__library-card video,.ai-assistant__library-audio{width:100%;height:110px;object-fit:cover;border-radius:8px;background:var(--surface-muted,#202126)} .ai-assistant__library-audio{display:grid;place-items:center;font-size:16px} /* Compact, aligned creative notes; distinct action rows. */ .ai-assistant__brief-card {padding:18px 20px;} .ai-assistant__brief-header {display:flex;align-items:center;justify-content:space-between;gap:16px;} .ai-assistant__brief-note {margin:8px 0 14px;font-size:12px;line-height:1.6;color:var(--muted,#697586);} .ai-assistant__brief-details {margin:0;display:grid;gap:10px;font-size:13px;line-height:1.65;} .ai-assistant__brief-details > div {display:grid;grid-template-columns:minmax(86px,120px) minmax(0,1fr);gap:16px;} .ai-assistant__brief-details dt {margin:0;color:var(--muted,#697586);font-weight:500;} .ai-assistant__brief-details dd {margin:0;overflow-wrap:anywhere;} .ai-assistant__brief-settings-heading {display:block;margin:20px 0 12px;padding-top:16px;border-top:1px solid var(--line,#e3e4e9);font-size:12px;} .ai-assistant__brief-card .ai-assistant__review-settings tr:last-child > * {border-bottom:0;padding-bottom:0;} .ai-assistant__choices > strong {flex-basis:100%;font-size:12px;font-weight:600;line-height:1.5;margin-bottom:2px;color:var(--muted,#697586);} .ai-assistant__library--files[open] {display:flex;flex-direction:column;overflow:hidden;max-height:80dvh;box-sizing:border-box;} .ai-assistant__library--files > h3 {margin:0 0 8px;font-size:16px;} .ai-assistant__library--files > p {margin:0 0 12px;font-size:13px;color:var(--muted,#697586);} .ai-assistant__library-list {min-height:0;overflow:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding:3px;} .ai-assistant__library-list .ai-assistant__library-grid {margin:0 0 12px;} .ai-assistant__library--files .ai-assistant__library-card {position:relative;display:flex;flex-direction:column;flex-wrap:nowrap;gap:8px;min-width:0;overflow:hidden;} .ai-assistant__library--files .ai-assistant__library-card img {object-fit:contain;background:var(--control-surface,#f7f9fc);} .ai-assistant__library--files .ai-assistant__library-card input {position:absolute;top:12px;right:12px;margin:0;accent-color:#8b75e8;} .ai-assistant__library-name {display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted,#697586);} .ai-assistant__library-footer {flex:none;display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line,#e3e4e9);} .ai-assistant__library-count {margin-right:auto;font-size:12px;color:var(--muted,#697586);} @media(max-width:600px){.ai-assistant__brief-card{padding:16px;}.ai-assistant__brief-details > div{grid-template-columns:1fr;gap:2px;}.ai-assistant__library-footer{flex-wrap:wrap;}.ai-assistant__library-count{flex-basis:100%;}} .ai-assistant__reference-visuals{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;} .ai-assistant__reference-tile{margin:0;width:84px;min-width:0;} .ai-assistant__reference-thumb,.ai-assistant__reference-placeholder{display:block;box-sizing:border-box;width:84px;height:72px;object-fit:contain;border:1px solid var(--line,#e3e4e9);border-radius:9px;background:var(--panel-bg,#fff);} .ai-assistant__reference-placeholder{display:grid;place-items:center;color:var(--muted,#697586);font-size:24px;} .ai-assistant__reference-tile figcaption{margin-top:5px;font-size:11px;color:var(--muted,#697586);} .ai-assistant__library-audio{color:#eceef2;} .ai-assistant__library--files .ai-assistant__library-card[data-kind="video"]::after{content:'▶';position:absolute;top:46px;left:calc(50% - 14px);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0007;color:#fff;font-size:13px;pointer-events:none;} /* Match the conversation content edges, including its reserved scrollbar. */ .ai-assistant { --assistant-content-width:800px; --assistant-inline-space:max(clamp(16px,4vw,48px),calc((100% - var(--assistant-content-width) - var(--assistant-scrollbar-width,0px))/2)); } .ai-assistant__log { padding-inline:var(--assistant-inline-space); } .ai-assistant__form { margin-left:var(--assistant-inline-space); margin-right:calc(var(--assistant-inline-space) + var(--assistant-scrollbar-width,0px)); } .ai-assistant__footer { padding-left:var(--assistant-inline-space); padding-right:calc(var(--assistant-inline-space) + var(--assistant-scrollbar-width,0px)); } .ai-assistant__input { height:46px; max-height:min(240px,30dvh); overflow-y:hidden; } @media(max-width:767px){ .ai-assistant { --assistant-inline-space:14px; } } /* Keep a compact bottom inset after removing the composer footer. */ .ai-assistant__form { margin-bottom:14px; } .ai-assistant__library-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;flex:none;} .ai-assistant__library-filters button[aria-pressed="true"]{border-color:#9276ef;background:#8b75e81c;color:var(--ink,#172033);} .ai-assistant__library--files .ai-assistant__library-card[hidden]{display:none;} .ai-assistant__library--files .ai-assistant__library-card.is-selected{border-color:#9276ef;box-shadow:inset 0 0 0 1px #9276ef;background:#8b75e812;} .ai-assistant__library--files .ai-assistant__library-card:focus-within{outline:2px solid #9276ef;outline-offset:1px;} .ai-assistant__library--files .ai-assistant__library-card audio{display:block;width:100%;height:32px;} /* Stack only the assistant workspace when two usable columns cannot fit. */ @media(max-width:1000px){ .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-video-workspace:has(.ai-assistant:not([hidden])){grid-template-columns:minmax(0,1fr);} .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-video-workspace:has(.ai-assistant:not([hidden])) > .ai-result-view-column{grid-column:1;min-width:0;width:100%;max-width:none;} .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-video-workspace:has(.ai-assistant:not([hidden])) > .ai-tool-settings-panel{grid-column:1;width:100%;max-width:none;} .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-video-workspace:has(.ai-assistant:not([hidden])) .ai-assistant__content{min-height:480px;} .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-video-workspace:has(.ai-assistant:not([hidden])) .ai-assistant:not(.ai-assistant--standalone){flex:none;height:calc(100dvh - 100px);min-height:520px;} } /* Resource picker: uniform full-bleed cards, separate original preview. */ .ai-assistant__library--files {width:min(1120px,94vw);padding:26px;} .ai-assistant__library--files[open] {max-height:88dvh;} .ai-assistant__library--files > h3 {font-size:20px;margin-bottom:6px;} .ai-assistant__library--files > p {margin-bottom:18px;} .ai-assistant__library--files .ai-assistant__library-grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;} .ai-assistant__library--files .ai-assistant__library-card {display:block;padding:0;aspect-ratio:1;border:0;border-radius:12px;background:var(--control-surface,#f7f9fc);isolation:isolate;} .ai-assistant__library--files .ai-assistant__library-card img, .ai-assistant__library--files .ai-assistant__library-card video, .ai-assistant__library--files .ai-assistant__library-audio {width:100%;height:100%;object-fit:cover;border-radius:0;} .ai-assistant__library--files .ai-assistant__library-audio {background:linear-gradient(145deg,#494059,#242330);font-size:38px;padding-bottom:28px;} /* Light mode: a soft lavender card instead of the dark one, so a page of audio items is not heavy (2026-10-26, the user). */ html:not([data-theme="dark"]) .ai-assistant__library--files .ai-assistant__library-audio {background:linear-gradient(145deg,#efeaf9,#ddd5f0);color:#5b4b8f;} .ai-assistant__library--files .ai-assistant__library-card audio {display:none;} .ai-assistant__library--files .ai-assistant__library-card input {appearance:none;width:24px;height:24px;top:10px;right:10px;border:1px solid #ffffffb3;border-radius:50%;background:#16171b70;z-index:2;display:grid;place-items:center;cursor:pointer;} .ai-assistant__library--files .ai-assistant__library-card input:checked {background:#805ce1;border-color:#c5b2ff;} .ai-assistant__library--files .ai-assistant__library-card input:checked::after {content:'✓';color:#fff;font-size:14px;} .ai-assistant__library--files .ai-assistant__library-card.is-selected {outline:3px solid #9276ef;outline-offset:-3px;box-shadow:none;} .ai-assistant__library--files .ai-assistant__library-card:focus-within {outline:3px solid #b7a0ff;outline-offset:-3px;} /* The name strip is see-through over the picture (2026-10-26, the user); the blur and shadow keep it readable on light images. */ .ai-assistant__library--files .ai-assistant__library-name {position:absolute;left:0;right:0;bottom:0;padding:5px 9px;color:#fff;background:#15151c73;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 1px 2px #000a;border-radius:0 0 12px 12px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;} .ai-assistant__library--files .ai-assistant__library-badge {position:absolute;top:10px;left:10px;z-index:2;padding:3px 8px;border-radius:9px;background:#15151cb3;color:#fff;font-size:11px;line-height:1.2;pointer-events:none;} .ai-assistant__library--files .ai-assistant__library-card:is([data-kind="image"],[data-kind="video"]) .ai-assistant__library-badge {left:50px;} .ai-assistant__library-enlarge,.ai-assistant__library-play {position:absolute;display:grid;place-items:center;border:1px solid #ffffff40;background:#18182099;color:white;width:32px;height:32px;border-radius:8px;cursor:pointer;z-index:2;} .ai-assistant__library-enlarge {left:10px;top:10px;font-size:21px;} .ai-assistant__library-play {left:calc(50% - 20px);top:56%;width:40px;height:40px;border-radius:50%;} .ai-assistant__library--files .ai-assistant__library-card[data-kind="video"]::after {top:calc(50% - 18px);left:calc(50% - 18px);width:36px;height:36px;} .ai-assistant__library-filters {gap:8px;margin-bottom:18px;} .ai-assistant__library-filters button {border-radius:20px;padding:7px 16px;} .ai-assistant__library-footer {margin-top:18px;padding-top:18px;} .ai-assistant__library-preview {width:min(1000px,94vw);max-height:94dvh;border:1px solid var(--line,#444);border-radius:16px;padding:16px;background:var(--panel-bg,#fff);color:var(--ink,#172033);} .ai-assistant__library-preview[open] {display:flex;flex-direction:column;align-items:center;gap:12px;} .ai-assistant__library-preview img,.ai-assistant__library-preview video {max-width:100%;max-height:76dvh;object-fit:contain;min-height:0;} @media(max-width:900px){.ai-assistant__library--files .ai-assistant__library-grid{grid-template-columns:repeat(4,minmax(0,1fr));}} @media(max-width:650px){.ai-assistant__library--files{padding:18px;}.ai-assistant__library--files .ai-assistant__library-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}} @media(max-width:440px){.ai-assistant__library--files .ai-assistant__library-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} /* Reserve matching gutters on both sides, with breathing room before the scroll track. */ .ai-assistant__library--files .ai-assistant__library-list {scrollbar-gutter:stable both-edges;padding:3px 12px;margin-inline:-10px;} /* Consistent picker controls: quiet secondary actions and one solid primary. */ .ai-assistant__library--files .ai-assistant__secondary, .ai-assistant__library-preview .ai-assistant__secondary {min-height:40px;padding:9px 18px;border:1px solid var(--line,#dedee7);border-radius:9px;background:transparent;color:var(--ink,#172033);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s;} .ai-assistant__library--files .ai-assistant__secondary:hover:not(:disabled), .ai-assistant__library-preview .ai-assistant__secondary:hover:not(:disabled) {background:var(--control-surface,#f7f9fc);border-color:#9992af;} .ai-assistant__library--files .ai-assistant__secondary:focus-visible, .ai-assistant__library-enlarge:focus-visible,.ai-assistant__library-play:focus-visible, .ai-assistant__library-preview button:focus-visible {outline:2px solid #aa91ef;outline-offset:3px;} .ai-assistant__library--files .ai-assistant__secondary:disabled {opacity:.45;cursor:default;} .ai-assistant__library--files .ai-assistant__library-filters button {min-height:34px;padding:6px 16px;border-radius:20px;color:var(--muted,#697586);} .ai-assistant__library--files .ai-assistant__library-filters button[aria-pressed="true"] {background:#eeeafc;border-color:#eeeafc;color:#342749;} .ai-assistant__library--files .ai-assistant__library-filters button[aria-pressed="true"]:hover {background:#e4dcf8;border-color:#e4dcf8;} .ai-assistant__library--files .ai-assistant__question-primary {background:#8865e6;border-color:#8865e6;color:#fff;font-weight:600;min-width:114px;} .ai-assistant__library--files .ai-assistant__question-primary:hover:not(:disabled) {background:#7854d8;border-color:#7854d8;} .ai-assistant__library--files .ai-assistant__library-list > button {display:block;margin:18px auto 4px;min-width:120px;} /* Keep the picker and footer steady from the first loading frame. */ .ai-assistant__library--files[open] {height:min(960px,92dvh);max-height:92dvh;} .ai-assistant__library--files .ai-assistant__library-list {flex:1;} .ai-assistant__library--files .ai-assistant__library-skeleton[hidden] {display:none;} .ai-assistant__library-placeholder {aspect-ratio:1;border-radius:12px;background:linear-gradient(100deg,transparent 20%,rgba(150,145,170,.13) 45%,transparent 70%),var(--control-surface,#f0f1f5);background-size:220% 100%;animation:assistant-library-shimmer 1.6s ease-in-out infinite;} @keyframes assistant-library-shimmer {from{background-position:120% 0;}to{background-position:-120% 0;}} @media(prefers-reduced-motion:reduce){.ai-assistant__library-placeholder{animation:none;}} .ai-assistant__library-filters[hidden]{display:none;} .ai-assistant__image-source {width:min(400px,92vw);} .ai-assistant__image-source > h3 {margin:0 0 18px;} .ai-assistant__image-source > button {display:block;width:100%;margin:8px 0;padding:12px 16px;text-align:left;border-radius:10px;} /* Separate the expanded brief heading from its first definition row. */ .ai-assistant__brief-card > details[open] > summary {margin-bottom:18px;} /* A persistent close action at the top right of both resource pickers. */ .ai-assistant__library--files > h3 {padding-right:44px;} .ai-assistant__library--files > .ai-assistant__library-close {position:absolute;top:18px;right:18px;display:grid;place-items:center;width:34px;height:34px;min-height:34px;padding:0;margin:0;border:0;border-radius:8px;background:var(--control-surface,#f1f2f6);color:var(--muted,#697586);font-size:25px;font-weight:400;line-height:1;z-index:2;} @media(max-width:650px){.ai-assistant__library--files > .ai-assistant__library-close{top:12px;right:12px;}} .ai-assistant__library--files .ai-assistant__library-card[data-kind="video"].is-previewing::after {display:none;} /* Subtle hover feedback without moving the grid or hiding selection state. */ .ai-assistant__library--files .ai-assistant__library-card {transition:outline-color .16s ease,box-shadow .16s ease;} .ai-assistant__library--files .ai-assistant__library-card > img, .ai-assistant__library--files .ai-assistant__library-card > video {transition:transform .2s ease;} @media(hover:hover) and (pointer:fine){ .ai-assistant__library--files .ai-assistant__library-card:hover:not(.is-selected):not(:focus-within) {outline:2px solid #b8b0cf;outline-offset:-2px;box-shadow:0 3px 10px #0002;} .ai-assistant__library--files .ai-assistant__library-card:hover > img, .ai-assistant__library--files .ai-assistant__library-card:hover > video {transform:scale(1.025);} .ai-assistant__library--files .ai-assistant__library-card:hover > input:not(:checked) {background:#494052cc;border-color:#e1d5ff;} .ai-assistant__library--files .ai-assistant__library-card:hover .ai-assistant__library-enlarge {background:#35303cdd;border-color:#e0d4ff99;} .ai-assistant__library-enlarge:hover,.ai-assistant__library-play:hover {background:#7353cce6;} } @media(prefers-reduced-motion:reduce){ .ai-assistant__library--files .ai-assistant__library-card, .ai-assistant__library--files .ai-assistant__library-card > img, .ai-assistant__library--files .ai-assistant__library-card > video {transition:none;} .ai-assistant__library--files .ai-assistant__library-card:hover > img, .ai-assistant__library--files .ai-assistant__library-card:hover > video {transform:none;} } .ai-assistant__library-enlarge {padding:0;line-height:1;} .ai-assistant__library-enlarge > svg {display:block;width:18px;height:18px;pointer-events:none;} .ai-assistant__library--files .ai-assistant__library-card.is-thumbnail-loading {background:linear-gradient(100deg,transparent 20%,rgba(150,145,170,.15) 45%,transparent 70%),var(--control-surface,#f0f1f5);background-size:220% 100%;animation:assistant-library-shimmer 1.6s ease-in-out infinite;} .ai-assistant__library--files .ai-assistant__library-card.is-thumbnail-loading > video {opacity:0;} @media(prefers-reduced-motion:reduce){.ai-assistant__library--files .ai-assistant__library-card.is-thumbnail-loading {animation:none;}} .ai-assistant__refinements {flex-basis:100%;color:var(--muted,#697586);font-size:13px;} .ai-assistant__refinements > summary {cursor:pointer;padding:6px 0;} .ai-assistant__refinements[open] > summary {margin-bottom:8px;} .ai-assistant__refinements .ai-assistant__choice {margin:0 8px 8px 0;} @media(max-width:767px){.ai-assistant__message--user{max-width:88%;}} .ai-assistant__welcome[hidden]{display:none;} .ai-assistant__history-loading{padding:24px 2px;color:var(--muted,#737583);font-size:13px;} .ai-assistant__history-placeholder{height:52px;margin-top:24px;border-radius:14px;background:var(--assistant-user-surface,#f0eff8);opacity:.55;} .ai-assistant__history-placeholder:nth-child(2){width:64%;margin-left:auto;} .ai-assistant__history-placeholder:nth-child(3){width:88%;height:84px;} .ai-assistant__history-placeholder:nth-child(4){width:48%;margin-left:auto;} .ai-assistant__history-item{display:flex;align-items:flex-start;gap:12px;border-radius:10px;transition:background .15s;} .ai-assistant__history-item[data-selected="true"],.ai-assistant__history-item[data-current="true"]{background:#8b70ed18;} .ai-assistant__history-item:hover{background:#8b70ed12;} .ai-assistant__history-item[data-selected="true"]:hover,.ai-assistant__history-item[data-current="true"]:hover{background:#8b70ed20;} .ai-assistant__history-item .ai-assistant__history-check{flex:none;appearance:none;width:20px;height:20px;margin:14px 0 0 10px;border:2px solid #a79ac7!important;border-radius:5px;background:#8b70ed1f!important;cursor:pointer;display:grid;place-content:center;transition:background .15s,border-color .15s;} .ai-assistant__history-item .ai-assistant__history-row{flex:1;min-width:0;width:auto;padding-left:0;} .ai-assistant__history-selection{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} @media(max-height:600px){.ai-assistant__history-rows{max-height:45dvh;}} .ai-assistant__history-check[hidden]{display:none!important;} .ai-assistant__history-check:checked{background:#8b70ed!important;border-color:#8b70ed!important;} .ai-assistant__history-check:checked::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);} .ai-assistant__history-check:focus-visible{outline:2px solid #b39aff;outline-offset:3px;} .ai-assistant__history-item .ai-assistant__history-check:hover:not(:checked){border-color:#c5b2ff!important;background:#8b70ed38!important;} .ai-assistant__prompt-decision{width:min(480px,calc(100vw - 40px));box-sizing:border-box;padding:24px;border:1px solid var(--line,#45434e);border-radius:16px;background:var(--panel-bg,#242428);color:var(--ink,#eee);font:inherit;box-shadow:0 16px 60px #0006;} .ai-assistant__review-cost.is-short{color:#b45339;} [data-theme="dark"] .ai-assistant__review-cost.is-short{color:#f0997b;} .ai-assistant__prompt-decision > strong{display:block;font-size:15px;line-height:1.5;} .ai-assistant__prompt-decision p{line-height:1.6;color:var(--muted,#aaa);margin:10px 0 20px;} .ai-assistant__prompt-decision .ai-assistant__choices{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;} .ai-assistant__prompt-decision .ai-assistant__choice{min-height:42px;padding:10px 12px;border-radius:10px;text-align:center;} @media(max-width:440px){.ai-assistant__prompt-decision{padding:20px;}.ai-assistant__prompt-decision .ai-assistant__choices{grid-template-columns:1fr;}} .ai-assistant-promo{grid-column:1/-1;margin:28px 0 12px;padding:22px;border:1px solid var(--line,#ded9e8);border-radius:14px;background:color-mix(in srgb,var(--panel-bg,#fff) 94%,#8b70ed);color:var(--ink,#292532);} .ai-assistant-promo[hidden]{display:none!important;} .ai-assistant-promo__label{display:block;color:#9976dc;font-size:12px;font-weight:600;margin-bottom:12px;} .ai-assistant-promo__title{margin:0 0 10px;font-size:20px;line-height:1.4;letter-spacing:-.4px;} .ai-assistant-promo__copy{margin:0 0 20px;max-width:310px;font-size:14px;line-height:1.6;color:var(--muted,#777);} .ai-assistant-promo__start{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:11px 13px;border:1px solid var(--line,#ded9e8);border-radius:9px;background:color-mix(in srgb,var(--panel-bg,#fff) 84%,#8b70ed);color:inherit;font:inherit;font-size:13px;font-weight:600;cursor:pointer;} .ai-assistant-promo__start:hover{border-color:#9c7dea;} @media(max-width:760px),(max-height:760px){.ai-assistant-promo{padding:16px;margin-top:20px;}.ai-assistant-promo__label{margin-bottom:8px;}.ai-assistant-promo__title{font-size:16px;}.ai-assistant-promo__copy{display:none;}} .ai-assistant-promo{position:relative;} .ai-assistant-promo__body[hidden],.ai-assistant-promo__confirm[hidden],.ai-assistant-promo__close[hidden]{display:none!important;} .ai-assistant-promo__close{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted,#888);font-size:24px;line-height:1;cursor:pointer;} .ai-assistant-promo__close:hover{background:var(--control-surface,#ddd5);color:var(--ink);} .ai-assistant-promo__label{padding-right:22px;} .ai-assistant-promo__remember{display:flex;gap:10px;align-items:center;min-height:32px;margin:14px 0 20px;font-size:13px;cursor:pointer;} .ai-assistant-promo__remember input{appearance:none;flex:none;display:grid;place-content:center;width:20px;height:20px;margin:0;border:2px solid #a79ac7!important;border-radius:5px;background:#8b70ed1f!important;cursor:pointer;} .ai-assistant-promo__actions{display:flex;justify-content:flex-end;gap:8px;} .ai-assistant__history-rows{display:grid;align-content:start;gap:6px;padding-right:4px;} .ai-assistant__history-check[hidden]+.ai-assistant__history-row{padding-left:10px;} .ai-assistant__history-delete{color:#b74450;} [data-theme="dark"] .ai-assistant__history-delete{color:#ed929b;} .ai-assistant-promo__confirm>strong{display:block;font-size:15px;line-height:1.5;} .ai-assistant-promo__remember input:checked{background:#8b70ed!important;border-color:#8b70ed!important;} .ai-assistant-promo__remember input:checked::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);} .ai-assistant-promo__remember input:focus-visible{outline:2px solid #b39aff;outline-offset:3px;} .ai-assistant-promo__actions button{min-width:76px;min-height:38px;padding:8px 16px;border-radius:9px;font-size:13px;font-weight:600;line-height:1.5;} .ai-assistant-promo__actions button:hover{border-color:#9c7dea;} .ai-assistant-promo__actions .ai-assistant-promo__hide{background:#805ce1;border-color:#805ce1;color:#fff;} .ai-assistant-promo__actions .ai-assistant-promo__hide:hover{background:#7250ce;border-color:#7250ce;} #ai-tools-assistant-tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;} #ai-tools-assistant-tab svg{width:16px;height:16px;flex:none;color:var(--portal-accent);} .ai-assistant__content:has(.ai-assistant__welcome:not([hidden])){overflow-y:auto;scrollbar-width:none;} .ai-assistant__content:has(.ai-assistant__welcome:not([hidden]))::-webkit-scrollbar{display:none;} .ai-assistant__content:has(.ai-assistant__welcome:not([hidden]))>.ai-assistant__log{flex:none;overflow:visible;padding:clamp(24px,4vh,44px) 24px 18px;scrollbar-gutter:auto;} .ai-assistant__content:has(.ai-assistant__welcome:not([hidden])) .ai-assistant__welcome{max-width:760px;margin:0 auto;} .ai-assistant__welcome .ai-assistant__heading{margin:0 0 14px;font-size:26px;line-height:1.4;letter-spacing:-.6px;} .ai-assistant__welcome .ai-assistant__intro{margin:0;color:var(--muted);opacity:1;line-height:1.6;} .ai-assistant__welcome .ai-assistant__mode-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0;} .ai-assistant__welcome-example{padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:12px;cursor:pointer;} .ai-assistant__welcome-example:hover{background:#8b70ed12;border-color:#aa8cdd;} .ai-assistant__content:has(.ai-assistant__welcome:not([hidden]))>.ai-assistant__form{width:calc(100% - 48px);max-width:760px;margin:0 auto;padding:14px 16px;border-radius:22px;} /* A fresh conversation invites a longer idea: two lines tall and a size up; back to 46px once the chat starts (resizeInput reads min-height). */ .ai-assistant__content:has(.ai-assistant__welcome:not([hidden])) .ai-assistant__input{min-height:78px;font-size:15px;line-height:1.6;padding:4px 6px 12px;} .ai-assistant__transform-preview{box-sizing:border-box;width:calc(100% - 112px);max-width:1080px;margin:48px auto 28px;color:var(--ink,#292532);} .ai-assistant__transform-preview[hidden],.ai-assistant__transform-preview:empty{display:none!important;} .ai-assistant__transform-header{display:flex;align-items:center;gap:9px;margin:0 0 12px;} .ai-assistant__transform-badge{flex:none;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--portal-accent,#805ce1) 13%,transparent);color:var(--portal-accent,#805ce1);font-size:10px;font-weight:700;line-height:1.2;} .ai-assistant__transform-title{font-size:17px;line-height:1.4;} .ai-assistant__transform-bridge{color:var(--portal-accent,#805ce1);font-size:16px;line-height:1;} @media(max-width:760px){.ai-assistant__transform-preview{width:calc(100% - 32px);margin-top:28px;}} @media(max-height:720px) and (min-width:768px){.ai-assistant__content:has(.ai-assistant__welcome:not([hidden]))>.ai-assistant__log{padding-top:16px;padding-bottom:12px;}.ai-assistant__welcome .ai-assistant__heading{margin-bottom:8px;font-size:22px;}.ai-assistant__welcome .ai-assistant__mode-choices{margin-top:12px;}.ai-assistant__content:has(.ai-assistant__welcome:not([hidden]))>.ai-assistant__form{max-width:680px;}.ai-assistant__content:has(.ai-assistant__welcome:not([hidden])) .ai-assistant__input{min-height:62px;}.ai-assistant__transform-preview{width:calc(100% - 112px);max-width:900px;margin-top:28px;margin-bottom:16px;}.ai-assistant__transform-header,} .ai-assistant__toolbar { flex-wrap: wrap; } .ai-assistant__storyboard-brief { display:block; width:100%; min-height:160px; max-height:320px; box-sizing:border-box; margin:8px 0 16px; padding:12px; border:1px solid var(--line,#e3e4e9); border-radius:8px; background:var(--panel-bg,#fff); color:inherit; font:inherit; line-height:1.6; resize:vertical; overflow-y:auto; } .ai-assistant__storyboard-brief:focus-visible { outline:2px solid var(--accent,#8257e5); outline-offset:2px; } .ai-assistant__storyboard-option{border:1px solid var(--line,#dfe2ea);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:16px;text-align:center;background:var(--panel-bg,transparent)} .ai-assistant__storyboard-heading{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:18px} .ai-assistant__optional-badge{font-size:12px;font-weight:500;color:var(--muted,#8e96a7);border:1px solid var(--line,#dfe2ea);border-radius:20px;padding:3px 9px} .ai-assistant__storyboard-option>p,.ai-assistant__storyboard-skip{color:var(--muted,#8e96a7);font-size:13px;margin:0;text-align:center} .ai-assistant__storyboard-actions{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap} .ai-assistant__storyboard-selected{max-height:260px;max-width:100%;object-fit:contain;border-radius:8px;cursor:zoom-in;align-self:center} .ai-assistant .ai-assistant__storyboard-remove{border:0;background:transparent;text-decoration:underline;color:var(--muted,#8e96a7)} .ai-assistant .ai-assistant__generation-review .ai-assistant__generate{width:100%;align-self:stretch;justify-content:center;min-height:48px;font-size:15px;font-weight:700;margin-top:0;background:#8055ff;color:#fff;border:1px solid #8055ff;border-radius:10px;white-space:normal} .ai-assistant .ai-assistant__generation-review .ai-assistant__generate:disabled{opacity:.45} @media(max-width:600px){.ai-assistant__storyboard-option{padding:18px 14px}.ai-assistant__storyboard-heading{font-size:16px}} /* Generated storyboard stays inside the optional section without a nested card. */ .ai-assistant__storyboard-result{display:flex;flex-direction:column;gap:16px;min-width:0;text-align:center} .ai-assistant__storyboard-candidate{display:flex;justify-content:center;min-width:0} .ai-assistant__storyboard-candidate .ai-assistant__generated-image{display:block;width:auto;height:auto;max-width:100%;margin:0 auto;border-radius:10px;cursor:zoom-in} .ai-assistant__storyboard-result>p{margin:0;color:var(--muted);font-size:13px;line-height:1.6} .ai-assistant__storyboard-result>p:empty{display:none} .ai-assistant__storyboard-result-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px} .ai-assistant__storyboard-result-actions>button{min-height:40px;padding:9px 16px;border-radius:9px;font:inherit;font-size:13px} .ai-assistant .ai-assistant__storyboard-result-actions .ai-assistant__storyboard-accept{background:var(--portal-accent,#8055ff);border-color:var(--portal-accent,#8055ff);color:#fff;font-weight:600} .ai-assistant__storyboard-option:has(.ai-assistant__storyboard-result)>.ai-assistant__storyboard-actions>button:first-child{display:none} @media(max-width:480px){.ai-assistant__storyboard-result-actions{align-items:stretch;flex-direction:column}.ai-assistant__storyboard-result-actions>button{width:100%}} /* Concept A: independent chat + live production plan. */ .ai-assistant--standalone { display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,35%); height:calc(100dvh - 100px); min-height:520px; border-radius:14px; } .ai-assistant--standalone > .ai-assistant__content { min-width:0; overflow:hidden; } .ai-assistant--standalone .ai-assistant__toolbar { min-height:55px; padding:12px 20px; } .ai-assistant--standalone .ai-assistant__log { padding:28px clamp(18px,3vw,44px); } .ai-assistant--standalone .ai-assistant__form { flex-shrink:0; width:calc(100% - 40px); max-width:none; margin:14px 20px 22px; } .ai-assistant--standalone .ai-assistant__transform-preview { width:calc(100% - 112px); max-width:1080px; margin:48px auto 32px; } .ai-assistant--standalone .ai-assistant__welcome { margin:6% auto 18px; } .ai-agent-plan { --agent-plan-inline-space:24px; min-width:0; overflow-y:auto; overscroll-behavior:contain; border-left:1px solid var(--line); padding:26px var(--agent-plan-inline-space) 0; background:var(--control-surface,#f8f9fc); scrollbar-gutter:stable; } .ai-agent-plan__header h2 { font-size:20px; margin:0 0 8px; } .ai-agent-plan__header p,.ai-agent-plan__empty { color:var(--muted); font-size:13px; line-height:1.65; } .ai-agent-plan__chips { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; } .ai-agent-plan__chips > span { border:1px solid var(--line); border-radius:22px; padding:7px 18px; font-size:13px; } .ai-agent-plan__notes { font-size:13px; line-height:1.65; } .ai-agent-plan__notes p { margin:9px 0; overflow-wrap:anywhere; } .ai-agent-plan__notes strong { font-weight:500; color:var(--muted); } .ai-agent-plan__section { border-top:1px solid var(--line); padding-top:20px; margin-top:22px; } .ai-agent-plan__section h3 { font-size:14px; margin:0 0 14px; } /* The scene heading with its fold-all button (2026-09-28). */ .ai-agent-plan__scenes-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 14px; } .ai-agent-plan__section .ai-agent-plan__scenes-head h3 { margin:0; } /* above the section heading rule further down (its 14px bottom margin lifted the title off the button, 2026-10-06) */ .ai-assistant .ai-agent-plan__fold { margin-left:auto; } .ai-agent-plan__references { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,88px),1fr)); gap:10px; } /* Reference rows: the panel grows by row, the splitter's extra width goes to the description, and the list scrolls inside itself so the scene plan and the next step keep their place. */ .ai-agent-plan__reference-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .ai-agent-plan__reference-head h3 { margin:0; } .ai-assistant .ai-agent-plan__reference-new { margin-left:auto; min-height:26px; padding:4px 10px; border:1px solid var(--line,#e3e4e9); border-radius:8px; background:transparent; color:var(--muted,#697586); font:inherit; font-size:11.5px; font-weight:500; cursor:pointer; } .ai-assistant .ai-agent-plan__reference-new:hover:not(:disabled) { background:color-mix(in srgb,var(--ink,#172033) 8%,transparent); color:var(--ink,#172033); } .ai-assistant .ai-agent-plan__reference-new:disabled { opacity:.45; cursor:default; } .ai-agent-plan__reference-table { border-color:color-mix(in srgb,var(--ink,#172033) 10%,transparent); container-type:inline-size; display:grid; grid-template-columns:auto minmax(52px,auto) minmax(64px,auto) minmax(72px,1fr) auto; align-content:start; max-height:min(70vh,511px); overflow:auto; border:1px solid var(--line,#e3e4e9); border-radius:10px; } /* Every row shares the table's columns, so names, roles and descriptions line up down the list instead of each row sizing itself to its own chip. */ .ai-agent-plan__reference-row { display:grid; grid-column:1 / -1; grid-template-columns:subgrid; align-items:center; gap:10px; padding:6px 8px; } @supports not (grid-template-columns: subgrid) { .ai-agent-plan__reference-table { display:flex; flex-direction:column; } .ai-agent-plan__reference-row { grid-template-columns:38px 52px 96px minmax(0,1fr) 26px; } } .ai-agent-plan__reference-row + .ai-agent-plan__reference-row { border-top:1px solid color-mix(in srgb,var(--ink,#172033) 10%,transparent); } .ai-assistant .ai-agent-plan__reference-row .ai-agent-plan__reference-preview { width:38px; height:38px; min-height:0; padding:0; border:0; border-radius:8px; background:transparent; } /* Every asset shows in the same square, whatever it is: a photo fills it, a video shows its poster, an audio file gets a centred glyph. Left to the tile styles they came out at different sizes. */ .ai-agent-plan__reference-row .ai-agent-plan__thumbnail { display:block; position:relative; width:38px; height:38px; border-radius:8px; overflow:hidden; background:color-mix(in srgb,var(--ink,#172033) 8%,transparent); } .ai-assistant .ai-agent-plan__reference-row .ai-agent-plan__thumbnail :is(img,video) { width:100%; height:100%; border-radius:0; object-fit:cover; } .ai-agent-plan__reference-row .ai-agent-plan__media { display:grid; place-items:center; width:100%; height:100%; font-size:14px; line-height:1; color:var(--muted,#697586); } .ai-agent-plan__reference-row .ai-agent-plan__reference-badge, .ai-agent-plan__reference-row .ai-assistant__sent-duration { display:none; } .ai-agent-plan__reference-name { font-size:12.5px; font-weight:500; color:var(--ink,#172033); letter-spacing:-.1px; } .ai-agent-plan__reference-role { min-width:0; font-size:12px; color:var(--muted,#697586); } .ai-agent-plan__reference-desc { min-width:0; font-size:12px; line-height:1.5; color:color-mix(in srgb,var(--ink,#172033) 78%,transparent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:text; } .ai-agent-plan__reference-desc--character { color:var(--muted,#697586); cursor:default; } .ai-assistant .ai-agent-plan__reference-desc-edit { display:block; box-sizing:border-box; width:100%; min-height:0; padding:2px 0; border:0; border-radius:5px; background:transparent; color:inherit; font:inherit; font-size:12px; line-height:1.5; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:text; } .ai-assistant .ai-agent-plan__reference-desc-edit:hover:not(:disabled) { background:color-mix(in srgb,var(--ink,#172033) 6%,transparent); } .ai-assistant .ai-agent-plan__reference-add { padding:2px 0; min-height:0; border:0; background:transparent; color:var(--muted,#697586); font:inherit; font-size:12px; text-decoration:underline; text-underline-offset:2px; cursor:pointer; } .ai-assistant .ai-agent-plan__reference-add:hover { color:var(--ink,#172033); } /* An empty description is only an invitation: faint and without an underline until the row is pointed at or focused, so it does not compete with the names and roles around it. */ .ai-assistant .ai-agent-plan__reference-desc .ai-agent-plan__reference-add:not(.ai-agent-plan__reference-analyzing) { color:color-mix(in srgb,var(--muted,#697586) 55%,transparent); text-decoration-color:transparent; transition:color .15s ease,text-decoration-color .15s ease; } .ai-assistant .ai-agent-plan__reference-row:not(.is-selectable):hover .ai-agent-plan__reference-desc .ai-agent-plan__reference-add:not(.ai-agent-plan__reference-analyzing), .ai-assistant .ai-agent-plan__reference-desc .ai-agent-plan__reference-add:not(.ai-agent-plan__reference-analyzing):focus-visible { color:var(--muted,#697586); text-decoration-color:currentColor; } .ai-assistant .ai-agent-plan__reference-desc .ai-agent-plan__reference-add:not(.ai-agent-plan__reference-analyzing):not(:disabled):hover { color:var(--ink,#172033); text-decoration-color:currentColor; } .ai-assistant .ai-agent-plan__reference-row.is-selectable .ai-agent-plan__reference-desc-edit { cursor:inherit; background:transparent; } /* Disabled only so a click picks the row: the text itself looks as it always does, not greyed out. */ .ai-assistant .ai-agent-plan__reference-row.is-selectable .ai-agent-plan__reference-desc-edit:disabled { opacity:1; } /* Quota strip under the reference heading: images by count, video and audio by total length. In selection mode the same strip holds the count and the remove button. The section is the container so the strip folds with the dock: names go below 360px, bars go and the items become chips below 260px. */ .ai-agent-plan__section--references { container-type:inline-size; } /* The generic section heading keeps a 14px bottom margin; in this row it pushed the title 7px above the select box and the add button, so the heading here has none and the row's height. */ .ai-agent-plan__section .ai-agent-plan__reference-head h3 { margin:0; line-height:26px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .ai-agent-plan__reference-head { min-height:26px; } .ai-agent-plan__reference-select { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted,#697586); cursor:pointer; user-select:none; white-space:nowrap; } .ai-agent-plan__reference-select[hidden] { display:none; } /* Just the box: its words stay for screen readers and the tooltip; the strip below already says how many are picked. */ .ai-agent-plan__reference-select > span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .ai-agent-plan__reference-select { position:relative; padding:5px; border-radius:7px; } .ai-agent-plan__reference-select:hover { background:color-mix(in srgb,var(--ink,#172033) 8%,transparent); } .ai-agent-plan__reference-select input,.ai-agent-plan__reference-check { width:14px; height:14px; margin:0; accent-color:#8b5cf6; cursor:pointer; } .ai-assistant .ai-agent-plan__reference-select:not([hidden]) + .ai-agent-plan__reference-new { margin-left:0; } /* One fixed height for the quota and the selection bar: switching between them never moves the list. */ .ai-agent-plan__reference-strip { box-sizing:border-box; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:center; gap:10px 28px; height:34px; margin:2px 0 16px; } /* A hairline between the three items, so one item's number never reads as the next item's label. */ .ai-agent-plan__quota-scope { align-self:center; margin-right:2px; font-size:11px; color:var(--muted,#697586); white-space:nowrap; } /* The clip board (2026-09-28, B): in long form, once a batch was approved, the chat column shows the clips under centred tabs; the grid takes the whole column; a card is a big poster (number on it, edited mark, enlarge), the start time and the scene titles, the clip's references with edit / add-reference / remake; an editor row opens under the card's row. */ .ai-assistant__board-tabs { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 20px 10px; } .ai-assistant__board-tabs[hidden] { display:none; } /* 탭 알약은 아래 페이드(::after, z-index 2) 위에(2026-09-29, 사용자: 처음 나타날 때의 빛 아랫부분이 페이드에 가려 잘림). */ .ai-assistant__board-seg { position:relative; z-index:3; display:inline-flex; padding:3px; border-radius:999px; border:1px solid var(--line,#e3e4e9); background:var(--control-surface,#f8f9fc); } .ai-assistant .ai-assistant__board-tab { position:relative; min-height:26px; padding:3px 18px; border:0; border-radius:999px; background:transparent; color:var(--muted,#697586); font:inherit; font-size:13px; cursor:pointer; } .ai-assistant .ai-assistant__board-tab[aria-pressed="true"] { background:color-mix(in srgb,var(--accent,#8666ed) 26%,transparent); color:var(--ink,#172033); } /* the tabs' first appearance (2026-09-28, the user's pick A3): the pill bounces in, a halo for three seconds, the clips tab fills with the primary gradient three times */ .ai-assistant__board-seg.is-new { animation:ai-board-seg-in .7s cubic-bezier(.3,1.5,.4,1) both,ai-board-seg-halo 3.2s ease-in-out .2s; } .ai-assistant .ai-assistant__board-seg.is-new .ai-assistant__board-tab:first-child { color:#fff; animation:ai-board-tab-fill .9s ease-out .5s 3; } @keyframes ai-board-seg-in { from { opacity:0; transform:translateY(-14px) scale(.85); } to { opacity:1; transform:none; } } @keyframes ai-board-seg-halo { 15%,80% { box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#8666ed) 45%,transparent),0 0 36px 10px color-mix(in srgb,var(--accent,#8666ed) 35%,transparent); } 100% { box-shadow:0 0 0 0 transparent; } } @keyframes ai-board-tab-fill { 0% { background:linear-gradient(110deg,#6254d9,#8246c7); transform:scale(1.08); box-shadow:0 0 0 0 color-mix(in srgb,var(--switch-on-bg,#6d4df2) 80%,transparent); } 70% { box-shadow:0 0 0 16px color-mix(in srgb,var(--switch-on-bg,#6d4df2) 0%,transparent); } 100% { background:color-mix(in srgb,var(--accent,#8666ed) 26%,transparent); transform:scale(1); box-shadow:0 0 0 0 transparent; } } @media (prefers-reduced-motion:reduce) { .ai-assistant__board-seg.is-new, .ai-assistant .ai-assistant__board-seg.is-new .ai-assistant__board-tab:first-child { animation:none; } .ai-assistant__board-seg.is-new { outline:2px solid var(--switch-on-bg,#6d4df2); outline-offset:2px; } } .ai-assistant__board-dot { position:absolute; top:5px; right:7px; width:6px; height:6px; border-radius:50%; background:var(--accent,#8666ed); } .ai-assistant__board-notice { box-sizing:border-box; max-width:100%; min-height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:12px; color:var(--muted,#697586); } .ai-assistant__board-notice:empty { display:none; } .ai-assistant__clip-board { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:30px 20px 16px; } .ai-assistant__clip-board[hidden] { display:none; } /* a soft fade over the top of the board, hung from the tab row (outside the scroller: a sticky fade inside it was pushed down onto the cards, since sticky cannot leave its container's content box). At rest it covers the board's top padding only. */ .ai-assistant__board-tabs { position:relative; } .ai-assistant__board-tabs:not([hidden])::after { content:""; /* on both tabs: the chat too (2026-09-28, the user) */ position:absolute; left:0; right:0; top:100%; height:34px; z-index:2; background:linear-gradient(to bottom,var(--panel-bg,#fff) 0%,var(--panel-bg,#fff) 30%,color-mix(in srgb,var(--panel-bg,#fff) 70%,transparent) 62%,transparent 100%); pointer-events:none; } .ai-assistant--board .ai-assistant__form { max-width:none; } .ai-assistant__board-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 12px; margin:2px 0 0; font-size:12.5px; color:var(--muted,#697586); } .ai-assistant__board-head:empty { display:none; } .ai-assistant .ai-assistant__board-stop { padding:2px 10px; font-size:11.5px; min-height:0; } /* a batch being made stops here (2026-10-06: the plan's progress line is gone) */ .ai-assistant__board-head[hidden] { display:none; } .ai-assistant__board-progress { font-weight:600; color:var(--ink,#172033); font-variant-numeric:tabular-nums; } /* the wait card in the middle of the board while the Director works; the reply modal (2026-09-28, the user) */ /* a veil over the visible board (sticky at the top of the scroller, clipped by it) and the card at its middle */ /* Every popup's backdrop, one rule (2026-10-06, the user: "a light blur like the other popups, so the popup holds the eye; one common rule for the blur"): the same dim and the same blur behind each dialog of the assistant; a picture viewed large is dimmer. */ :is(.ai-assistant__library,.ai-assistant__prompt-decision,dialog.ai-assistant__clip-editor,.ai-agent-plan__duration-models,.ai-shot-dialog,dialog.ai-assistant__audio-request-dialog)::backdrop { background:rgba(12,14,20,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .ai-assistant__library-preview::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } /* "Make again" (2026-10-06): a clip-editor dialog, narrower; its note in the warning colour. */ dialog.ai-assistant__clip-editor.ai-assistant__regen-dialog { width:min(520px,calc(100vw - 32px)); } dialog.ai-assistant__regen-dialog .ai-assistant__regen-note { color:#c2410c; } /* The Director's word on the clips tab (2026-10-06, the user): a card at the top of the action bar, just above the composer — the reply being prepared, the last reply folded to three lines, its answers; never over the clips. Clips tab only. */ /* The Director's word stands out from the panel (2026-10-06, the user): an accent border and a faint accent tint. */ .ai-assistant .ai-assistant__board-reply { box-sizing:border-box; margin:0 0 8px; padding:10px 14px 12px; border:1px solid color-mix(in srgb,var(--switch-on-bg,#8666ed) 55%,transparent); border-radius:14px; background:linear-gradient(color-mix(in srgb,var(--switch-on-bg,#8666ed) 7%,transparent),color-mix(in srgb,var(--switch-on-bg,#8666ed) 7%,transparent)),var(--panel-bg,#fff); color:var(--ink,#172033); box-shadow:0 5px 18px #00000012; } .ai-assistant:not(.ai-assistant--board) .ai-assistant__board-reply, .ai-assistant .ai-assistant__board-reply[hidden] { display:none !important; } .ai-assistant .ai-assistant__board-reply { cursor:pointer; } .ai-assistant .ai-assistant__board-reply :is(.ai-assistant__board-reply-ask,.ai-assistant__board-reply-input) { cursor:auto; } .ai-assistant .ai-assistant__board-reply.is-new { animation:ai-board-reply-in 1.4s ease-out 1; } @keyframes ai-board-reply-in { 0% { box-shadow:0 0 0 3px color-mix(in srgb,var(--switch-on-bg,#8666ed) 45%,transparent),0 5px 18px #00000012; } 100% { box-shadow:0 0 0 0 transparent,0 5px 18px #00000012; } } @media (prefers-reduced-motion: reduce) { .ai-assistant .ai-assistant__board-reply.is-new { animation:none; } } .ai-assistant__board-reply-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 4px; font-size:12.5px; color:var(--muted,#697586); } .ai-assistant .ai-assistant__board-reply-x { flex:none; width:24px; height:24px; margin:-4px -6px -4px 0; padding:0; border:0; border-radius:6px; background:transparent; color:inherit; opacity:.7; font:inherit; font-size:18px; line-height:1; cursor:pointer; } .ai-assistant .ai-assistant__board-reply-x:hover { opacity:1; background:color-mix(in srgb, currentColor 10%, transparent); } .ai-assistant__board-reply-body { max-height:calc(1.6em * 3); overflow:hidden; font-size:14px; line-height:1.6; overflow-wrap:anywhere; } .ai-assistant__board-reply-body .ai-assistant__message { margin:0; padding:0; white-space:pre-wrap; background:none; border:0; } .ai-assistant__board-reply.is-waiting .ai-assistant__board-reply-body { max-height:none; } .ai-assistant__board-reply-wait { display:flex; align-items:center; gap:8px; margin:0; font-size:13.5px; font-weight:600; } .ai-assistant__board-reply-wait::before { content:""; width:14px; height:14px; border-radius:50%; border:2px solid color-mix(in srgb,var(--accent,#8666ed) 30%,transparent); border-top-color:var(--accent,#8666ed); animation:ai-board-wait-spin .9s linear infinite; } @keyframes ai-board-wait-spin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ai-assistant__board-reply-wait::before { animation:none; } } .ai-assistant .ai-assistant__board-reply-more { margin:4px 0 0; padding:0; border:0; background:none; color:var(--accent-ink,var(--switch-on-bg,#8666ed)); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; } .ai-assistant .ai-assistant__board-reply-more[hidden] { display:none; } .ai-assistant__board-reply-ask { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line,#e3e4e9); } .ai-assistant__board-reply-ask[hidden] { display:none; } .ai-assistant__board-reply-ask strong { flex-basis:100%; font-size:13.5px; line-height:1.5; } .ai-assistant__board-reply-note { font-size:13px; color:var(--muted,#697586); } .ai-assistant__board-reply-choices { display:flex; flex-wrap:wrap; gap:8px; flex-basis:100%; } .ai-assistant .ai-assistant__board-reply-choice { min-height:32px; padding:5px 12px; border:1px solid var(--line-strong,var(--line,#cfd1d8)); border-radius:9px; background:transparent; color:inherit; font:inherit; font-size:13px; line-height:1.4; cursor:pointer; } .ai-assistant .ai-assistant__board-reply-choice:hover:not(:disabled) { border-color:var(--switch-on-bg,#8666ed); background:color-mix(in srgb, var(--switch-on-bg,#8666ed) 10%, transparent); } .ai-assistant .ai-assistant__board-reply-choice:disabled { opacity:.5; cursor:default; } .ai-assistant__board-reply-answer { display:flex; gap:8px; align-items:flex-end; flex-basis:100%; } .ai-assistant .ai-assistant__board-reply-input { flex:1; min-width:0; box-sizing:border-box; resize:vertical; min-height:36px; padding:7px 11px; border:1px solid var(--line-strong,var(--line,#cfd1d8)); border-radius:9px; background:transparent; color:inherit; font:inherit; font-size:13px; line-height:1.5; } .ai-assistant .ai-assistant__board-reply-input:focus { outline:none; border-color:var(--switch-on-bg,#8666ed); } .ai-assistant .ai-assistant__board-reply-send { flex:none; } /* the background music card (stage 5b): the last card — a make button, the pending effect, then a player */ .ai-assistant .ai-assistant__clip-thumb.is-music { cursor:default; flex-direction:column; gap:8px; background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent,#8666ed) 22%,transparent),transparent 62%),color-mix(in srgb,var(--ink,#172033) 8%,transparent); } .ai-assistant__clip-music-mark { font-size:30px; line-height:1; color:var(--accent-ink,#c9bcff); } .ai-assistant .ai-assistant__clip-music-make { display:flex; flex-direction:column; align-items:center; gap:8px; min-height:0; padding:12px 20px; border:1px solid color-mix(in srgb,var(--accent,#8666ed) 45%,transparent); border-radius:12px; background:color-mix(in srgb,var(--accent,#8666ed) 10%,transparent); color:var(--ink,#172033); font:inherit; font-size:13px; font-weight:600; cursor:pointer; } .ai-assistant .ai-assistant__clip-music-make:hover:not(:disabled) { background:color-mix(in srgb,var(--accent,#8666ed) 20%,transparent); } .ai-assistant .ai-assistant__clip-music-make:disabled { opacity:.5; cursor:default; } .ai-assistant__clip-audio { width:calc(100% - 24px); height:36px; } .ai-assistant__clip--music .ai-assistant__clip-scene-title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:11.5px; color:var(--muted,#697586); } dialog.ai-assistant__clip-editor .ai-assistant__music-box { height:150px; } /* the extra audio dialog (2026-09-28): two switches, the voice chips, the cued script; the card's badges */ /* laid out as the site's form (2026-09-28, the user: "match our design"): the head and foot stay, the body scrolls; the two parts are setting cards with the form's switch; the voice line and chips take the prompt box's surface and line */ dialog.ai-assistant__music-dialog[open] { overflow:hidden; } /* taller when the screen allows (2026-09-28, the user): the dialog up to the screen's height, the boxes grow with it */ dialog.ai-assistant__clip-editor.ai-assistant__music-dialog { max-height:calc(100dvh - 32px); } dialog.ai-assistant__clip-editor.ai-assistant__music-dialog .ai-assistant__music-box { height:clamp(150px,26vh,300px); } dialog.ai-assistant__clip-editor.ai-assistant__music-dialog .ai-assistant__narration-box { height:clamp(176px,30vh,360px); } /* the dialogs live in the page's body, outside .ai-assistant: the panel's scrollbar (thin, rounded, the theme's thumb) */ dialog.ai-assistant__clip-editor { --assistant-scroll-thumb:rgba(86,101,122,.34); --assistant-scroll-hover:rgba(86,101,122,.52); } html[data-theme="dark"] dialog.ai-assistant__clip-editor { --assistant-scroll-thumb:rgba(181,186,196,.36); --assistant-scroll-hover:rgba(181,186,196,.54); } dialog.ai-assistant__clip-editor, dialog.ai-assistant__clip-editor * { scrollbar-width:thin; scrollbar-color:var(--assistant-scroll-thumb) transparent; } @supports selector(::-webkit-scrollbar) { dialog.ai-assistant__clip-editor, dialog.ai-assistant__clip-editor * { scrollbar-width:auto; scrollbar-color:auto; } dialog.ai-assistant__clip-editor::-webkit-scrollbar, dialog.ai-assistant__clip-editor *::-webkit-scrollbar { width:10px; height:10px; } dialog.ai-assistant__clip-editor::-webkit-scrollbar-track, dialog.ai-assistant__clip-editor *::-webkit-scrollbar-track, dialog.ai-assistant__clip-editor *::-webkit-scrollbar-corner { background:transparent; } dialog.ai-assistant__clip-editor::-webkit-scrollbar-thumb, dialog.ai-assistant__clip-editor *::-webkit-scrollbar-thumb { min-height:44px; border:2px solid transparent; border-radius:999px; background:var(--assistant-scroll-thumb); background-clip:padding-box; } dialog.ai-assistant__clip-editor::-webkit-scrollbar-thumb:hover, dialog.ai-assistant__clip-editor *::-webkit-scrollbar-thumb:hover { background:var(--assistant-scroll-hover); background-clip:padding-box; } dialog.ai-assistant__clip-editor::-webkit-scrollbar-button, dialog.ai-assistant__clip-editor *::-webkit-scrollbar-button { display:none; width:0; height:0; } } dialog.ai-assistant__music-dialog .ai-assistant__music-body { flex:1 1 auto; min-height:0; overflow:auto; padding-bottom:4px; } /* The parts as cards (2026-10-01, the user: music and narration ran together): a coloured edge each, the switch in the head. */ dialog.ai-assistant__music-dialog .ai-assistant__audio-card { --audio-edge:var(--switch-on-bg,#6d5dfc); margin:14px 22px 0; padding:0 0 14px; border:1px solid var(--line,#e3e4e9); border-left:3px solid var(--audio-edge); border-radius:0 12px 12px 0; background:var(--control-surface,#f7f9fc); } dialog.ai-assistant__music-dialog .ai-assistant__audio-card--narration { --audio-edge:#1d9e75; } dialog.ai-assistant__music-dialog .ai-assistant__audio-card > .ai-assistant__audio-toggle { width:100%; padding:12px 14px; border:0; border-bottom:1px solid var(--line,#e3e4e9); border-radius:0 12px 0 0; background:transparent; } dialog.ai-assistant__music-dialog .ai-assistant__audio-card > .ai-assistant__audio-toggle[aria-pressed="true"] { background:color-mix(in srgb,var(--audio-edge) 8%,transparent); } dialog.ai-assistant__music-dialog .ai-assistant__audio-card > .ai-assistant__audio-toggle[aria-pressed="true"] .ai-assistant__audio-switch { background:var(--audio-edge); box-shadow:none; } dialog.ai-assistant__music-dialog .ai-assistant__audio-card > .ai-assistant__audio-toggle[aria-pressed="false"] { border-bottom:0; border-radius:0 12px 12px 0; } dialog.ai-assistant__music-dialog .ai-assistant__audio-card:has(> .ai-assistant__audio-toggle[aria-pressed="false"]) { padding-bottom:0; opacity:.85; } dialog.ai-assistant__music-dialog .ai-assistant__audio-card .ai-assistant__clip-editor-scene { padding:12px 14px 0; } dialog.ai-assistant__music-dialog .ai-assistant__clip-editor-foot { border-top:1px solid var(--line,#e3e4e9); } dialog.ai-assistant__clip-editor .ai-assistant__audio-toggles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:16px 22px 2px; } dialog.ai-assistant__clip-editor .ai-assistant__audio-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:11px 12px 11px 14px; border:1px solid var(--line,#e3e4e9); border-radius:10px; background:var(--control-surface,#f7f9fc); color:var(--muted,#536174); font:inherit; text-align:left; cursor:pointer; transition:border-color .14s ease,background .14s ease; } dialog.ai-assistant__clip-editor .ai-assistant__audio-toggle:hover { border-color:var(--line-strong,#c9cdd6); } dialog.ai-assistant__clip-editor .ai-assistant__audio-toggle:focus-visible { outline:2px solid color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 60%,transparent); outline-offset:2px; } dialog.ai-assistant__clip-editor .ai-assistant__audio-toggle[aria-pressed="true"] { border-color:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 45%,var(--line,#e3e4e9)); background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 7%,var(--control-surface,#f7f9fc)); color:var(--ink,#172033); } dialog.ai-assistant__clip-editor .ai-assistant__audio-toggle-words { display:grid; grid-template-columns:auto 1fr; column-gap:8px; row-gap:1px; align-items:center; min-width:0; } dialog.ai-assistant__clip-editor .ai-assistant__audio-toggle-icon { grid-row:1 / span 2; font-size:16px; line-height:1; } dialog.ai-assistant__clip-editor .ai-assistant__audio-toggle-words strong { font-size:13px; font-weight:700; color:inherit; } dialog.ai-assistant__clip-editor .ai-assistant__audio-toggle-words small { font-size:11.5px; font-weight:500; color:var(--muted,#536174); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } dialog.ai-assistant__clip-editor .ai-assistant__audio-switch { position:relative; flex:0 0 auto; width:40px; height:22px; border-radius:999px; background:var(--line-strong,#c9cdd6); transition:background .14s ease,box-shadow .14s ease; } dialog.ai-assistant__clip-editor .ai-assistant__audio-switch::before { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(23,32,51,.18); transition:transform .14s ease; } dialog.ai-assistant__clip-editor .ai-assistant__audio-toggle[aria-pressed="true"] .ai-assistant__audio-switch { background:var(--switch-on-bg,#6d5dfc); box-shadow:0 6px 14px rgba(109,93,252,.24); } dialog.ai-assistant__clip-editor .ai-assistant__audio-toggle[aria-pressed="true"] .ai-assistant__audio-switch::before { transform:translateX(18px); } dialog.ai-assistant__clip-editor .ai-assistant__audio-chips { display:flex; flex-wrap:wrap; gap:6px; } dialog.ai-assistant__clip-editor .ai-assistant__audio-chip { min-height:28px; padding:0 12px; border:1px solid var(--line,#e3e4e9); border-radius:999px; background:var(--control-surface,#f7f9fc); color:var(--ink,#172033); font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:border-color .14s ease,background .14s ease; } dialog.ai-assistant__clip-editor .ai-assistant__audio-chip:hover { border-color:var(--line-strong,#c9cdd6); } dialog.ai-assistant__clip-editor .ai-assistant__audio-chip.is-on { border-color:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 60%,transparent); background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 14%,var(--control-surface,#f7f9fc)); } dialog.ai-assistant__clip-editor .ai-assistant__audio-voice { width:100%; height:40px; box-sizing:border-box; padding:0 14px; border:1px solid var(--line,#e3e4e9); border-radius:8px; background:var(--control-surface,#f7f9fc); color:var(--ink,#172033); font:inherit; font-size:13px; font-weight:500; outline:none; transition:border-color .16s ease; } dialog.ai-assistant__clip-editor .ai-assistant__audio-voice::placeholder { color:var(--muted,#536174); opacity:.8; } dialog.ai-assistant__clip-editor .ai-assistant__audio-voice:focus { border-color:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 60%,transparent); } dialog.ai-assistant__clip-editor .ai-assistant__audio-quiet { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin-top:2px; padding:9px 12px 9px 14px; border:1px solid var(--line,#e3e4e9); border-radius:10px; background:var(--control-surface,#f7f9fc); color:var(--ink,#172033); font:inherit; text-align:left; cursor:pointer; transition:border-color .14s ease; } dialog.ai-assistant__clip-editor .ai-assistant__audio-quiet:hover { border-color:var(--line-strong,#c9cdd6); } dialog.ai-assistant__clip-editor .ai-assistant__audio-quiet:focus-visible { outline:2px solid color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 60%,transparent); outline-offset:2px; } dialog.ai-assistant__clip-editor .ai-assistant__audio-quiet-words { display:flex; flex-direction:column; gap:1px; min-width:0; } dialog.ai-assistant__clip-editor .ai-assistant__audio-quiet-words strong { font-size:12.5px; font-weight:700; } dialog.ai-assistant__clip-editor .ai-assistant__audio-quiet-words small { font-size:11.5px; font-weight:500; color:var(--muted,#536174); } dialog.ai-assistant__clip-editor .ai-assistant__audio-quiet[aria-pressed="true"] .ai-assistant__audio-switch { background:var(--switch-on-bg,#6d5dfc); box-shadow:0 6px 14px rgba(109,93,252,.24); } dialog.ai-assistant__clip-editor .ai-assistant__audio-quiet[aria-pressed="true"] .ai-assistant__audio-switch::before { transform:translateX(18px); } dialog.ai-assistant__clip-editor .ai-assistant__audio-quiet-spans { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:var(--muted,#536174); } dialog.ai-assistant__clip-editor .ai-assistant__audio-quiet-spans[hidden] { display:none; } dialog.ai-assistant__clip-editor .ai-assistant__audio-quiet-label { font-weight:600; } dialog.ai-assistant__clip-editor .ai-assistant__audio-quiet-span { padding:2px 8px; border-radius:999px; background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 12%,var(--control-surface,#f7f9fc)); color:var(--ink,#172033); font-variant-numeric:tabular-nums; font-weight:600; } @media (max-width:520px) { dialog.ai-assistant__clip-editor .ai-assistant__audio-toggles { grid-template-columns:1fr; } } dialog.ai-assistant__clip-editor .ai-assistant__narration-box { height:176px; } dialog.ai-assistant__clip-editor .ai-assistant__clip-editor-scene[hidden] { display:none; } dialog.ai-assistant__clip-editor .ai-assistant__clip-editor-redo { margin-right:auto; } dialog.ai-assistant__clip-editor .ai-assistant__clip-editor-redo[hidden] { display:none; } .ai-assistant__clip-audio-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; } .ai-assistant__clip-audio-badge { font-size:11px; padding:2px 9px; border-radius:999px; border:1px solid var(--line-strong,#c9cdd6); background:color-mix(in srgb,var(--panel-bg,#fff) 85%,transparent); color:var(--ink,#172033); } /* the foot: the join button under every clip, then the finished video, big */ .ai-assistant__board-foot { display:flex; flex-direction:column; align-items:stretch; gap:14px; margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line,#e3e4e9); } .ai-assistant__board-finish-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px; font-size:12.5px; color:var(--muted,#697586); } .ai-assistant .ai-assistant__board-finish { min-width:260px; min-height:46px; padding:10px 28px; border:0; border-radius:12px; font-size:15px; background:linear-gradient(110deg,#6254d9,#8246c7); color:#fff; font:inherit; font-size:14px; font-weight:600; box-shadow:0 3px 10px #6b48cc26; cursor:pointer; } .ai-assistant .ai-assistant__board-finish:disabled { opacity:.45; cursor:default; } .ai-assistant__board-finish-note { font-size:12.5px; } .ai-assistant__board-finish-link { font-weight:500; } /* design A (2026-09-28): the finished video, and beside it the mix and the join; before the first join, the side alone */ .ai-assistant__board-final { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; } .ai-assistant__board-final:has(> .ai-assistant__board-result[hidden]) { grid-template-columns:minmax(0,420px); justify-content:center; } @media (max-width:900px) { .ai-assistant__board-final { grid-template-columns:minmax(0,1fr); } } .ai-assistant__board-side { display:grid; gap:12px; align-content:start; min-width:0; } .ai-assistant__board-side .ai-assistant__board-finish-row { flex-direction:column; align-items:stretch; gap:6px; } .ai-assistant .ai-assistant__board-side .ai-assistant__board-finish { width:100%; min-width:0; } .ai-assistant__board-side .ai-assistant__board-finish-note { text-align:left; color:var(--muted,#697586); } /* While it is being joined the badge and the picture already say so (2026-09-30, the user: the lone line sat oddly). */ .ai-assistant__board-final-card[data-state="making"] .ai-assistant__board-side .ai-assistant__board-finish-note { display:none; } .ai-assistant__board-dirty { font-size:12px; font-weight:700; color:var(--switch-on-bg,#6d5dfc); text-align:center; } .ai-assistant__board-dirty[hidden] { display:none; } .ai-assistant__board-mixer { display:grid; gap:10px; padding:14px; border:1px solid var(--line,#e3e4e9); border-radius:12px; background:var(--control-surface,#f7f9fc); } .ai-assistant__board-mixer[hidden] { display:none; } .ai-assistant__board-mixer-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; } .ai-assistant__board-mixer-head strong { font-size:13px; color:var(--ink,#172033); } .ai-assistant__board-mixer-head small { font-size:11.5px; color:var(--muted,#536174); } /* The name on one line (2026-10-08, the user: "🎙 배경음악·나레이션" broke in two) — the slider gives the room. */ .ai-assistant__board-mixer-row { display:grid; grid-template-columns:136px minmax(0,1fr) 40px; align-items:center; gap:8px; } .ai-assistant__board-mixer-name { font-size:12.5px; font-weight:600; color:var(--ink,#172033); line-height:1.25; overflow-wrap:break-word; /* a long track name (another language, "Music & narration") wraps instead of being cut, 2026-10-06 */ } .ai-assistant__board-mixer-note { display:block; font-size:12px; color:var(--muted,#536174); } .ai-assistant__board-mixer-value { font-size:12px; color:var(--muted,#536174); text-align:right; font-variant-numeric:tabular-nums; } .ai-assistant__board-mixer-row input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:22px; margin:0; background:transparent; cursor:pointer; } .ai-assistant__board-mixer-row input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:999px; background:linear-gradient(90deg,var(--switch-on-bg,#6d5dfc) var(--p,50%),var(--line-strong,#c9cdd6) var(--p,50%)); } .ai-assistant__board-mixer-row input[type=range]::-moz-range-track { height:4px; border-radius:999px; background:var(--line-strong,#c9cdd6); } .ai-assistant__board-mixer-row input[type=range]::-moz-range-progress { height:4px; border-radius:999px; background:var(--switch-on-bg,#6d5dfc); } .ai-assistant__board-mixer-row input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; margin-top:-6px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(23,32,51,.3); } .ai-assistant__board-mixer-row input[type=range]::-moz-range-thumb { width:16px; height:16px; border:0; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(23,32,51,.3); } .ai-assistant__board-mixer-chips { display:flex; flex-wrap:wrap; gap:6px; } .ai-assistant .ai-assistant__board-mixer-chip { min-height:28px; padding:0 11px; border:1px solid var(--line-strong,#c9cdd6); border-radius:999px; background:var(--panel-bg,#fff); color:var(--ink,#172033); font:inherit; font-size:12px; font-weight:600; cursor:pointer; } .ai-assistant .ai-assistant__board-mixer-chip.is-on { border-color:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 60%,transparent); background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 14%,var(--panel-bg,#fff)); } .ai-assistant .ai-assistant__board-mixer-preview { justify-self:start; min-height:32px; padding:0 12px; border-radius:8px; font-size:12.5px; } .ai-assistant__board-result { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; } .ai-assistant__board-result[hidden] { display:none; } .ai-assistant__board-result-video { display:block; width:auto; height:auto; max-width:min(100%,960px); max-height:70vh; border-radius:12px; background:#000; box-shadow:0 12px 32px rgba(0,0,0,.28); } .ai-assistant__board-result-caption { font-size:12.5px; color:var(--muted,#697586); font-variant-numeric:tabular-nums; } .ai-assistant__board-result-pending { position:relative; box-sizing:border-box; width:100%; max-width:960px; max-height:70vh; border:1px solid var(--line,#e3e4e9); border-radius:12px; overflow:hidden; } .ai-assistant__board-result-pending .ai-creation-history-card__loader { width:76px; height:76px; border-radius:19px; } /* the finished video while it is joined: the chat's generating stage (2026-09-28), as wide as the video will be */ .ai-assistant__board-result-stage { width:100%; max-width:960px; margin:0 auto; } .ai-assistant__board-result-stage .ai-assistant__generation-frame { max-height:70vh; } .ai-assistant__board-result-stage .ai-assistant__generation-frame.is-portrait { height:min(70vh,640px); } .ai-assistant__board-result-pending .ai-creation-history-card__loader-mark { font-size:1.05rem; } .ai-assistant__board-result-pending .ai-creation-history-card__pending-title { top:18px; font-size:.86rem; } .ai-assistant__board-result-pending .ai-creation-history-card__pending-text { bottom:18px; font-size:.84rem; } .ai-assistant__clips-head { display:none; } .ai-assistant__clips-change { margin:0 0 10px; padding:8px 12px; border-radius:9px; background:color-mix(in srgb, var(--switch-on-bg,#8666ed) 10%, transparent); color:var(--ink,inherit); font-size:12.5px; line-height:1.5; } .ai-assistant__clips-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; min-width:0; } @media(max-width:560px){ .ai-assistant__clips-list { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; } } .ai-assistant__clips.is-portrait .ai-assistant__clips-list { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); } .ai-assistant__clip { display:flex; flex-direction:column; border:1px solid color-mix(in srgb,var(--ink,#172033) 14%,transparent); border-radius:10px; background:var(--control-surface,#f8f9fc); overflow:hidden; } .ai-assistant__clip.is-selected { outline:2px solid var(--accent,#8666ed); outline-offset:-1px; } .ai-assistant__clip-frame { position:relative; } .ai-assistant .ai-assistant__clip-thumb { display:flex; align-items:center; justify-content:center; position:relative; width:100%; aspect-ratio:var(--clip-aspect,16/9); margin:0; padding:0; border:0; border-radius:0; background:color-mix(in srgb,var(--ink,#172033) 8%,transparent); color:var(--muted,#697586); cursor:pointer; overflow:hidden; } .ai-assistant .ai-assistant__clip-thumb.is-wait { cursor:default; border-bottom:1px dashed color-mix(in srgb,var(--ink,#172033) 20%,transparent); } .ai-assistant .ai-assistant__clip-thumb.is-playing { cursor:default; background:#000; } /* a clip being made: the site's pending effect (creation history) in the video area, sized for the card */ .ai-assistant .ai-assistant__clip-thumb.is-generating { cursor:default; gap:8px; padding:18px 12px 24px; border-bottom:0; } .ai-assistant .ai-assistant__clip-thumb.is-generating .ai-creation-history-card__pending-text { bottom:12px; } .ai-assistant__clip-genbar { position:absolute; left:0; right:0; bottom:0; z-index:1; height:3px; background:rgba(255,255,255,.08); } .ai-assistant__clip-genbar i { display:block; height:100%; width:12%; background:linear-gradient(90deg,#6254d9,#a78bfa); animation:ai-clip-genbar 180s linear forwards; } @keyframes ai-clip-genbar { 0% { width:12%; } 100% { width:96%; } } @media (prefers-reduced-motion: reduce) { .ai-assistant__clip-genbar i { animation:none; width:40%; } } .ai-assistant .ai-assistant__clip-thumb:disabled { opacity:1; } .ai-assistant__clip-poster, .ai-assistant__clip-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .ai-assistant__clip-video { object-fit:contain; background:#000; } .ai-assistant__clip-play { position:relative; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.92); color:#222; font-size:13px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.35); } /* 왼쪽 아래(2026-09-29, 사용자: 오른쪽 아래 워터마크 로고와 겹침) */ .ai-assistant__clip-dur { position:absolute; left:6px; bottom:6px; font-size:10.5px; padding:0 5px; border-radius:3px; background:rgba(0,0,0,.6); color:#fff; } .ai-assistant__clip-state { font-size:11.5px; line-height:1.3; text-align:center; padding:0 6px; } .ai-assistant__clip-state.is-bad { color:#d14343; } /* Why a clip failed (2026-10-01): under the state, at most four lines; the full words on hover. */ .ai-assistant .ai-assistant__clip-thumb:has(> .ai-assistant__clip-reason) { flex-direction:column; } .ai-assistant__clip-reason { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; max-width:92%; margin-top:6px; font-size:11px; line-height:1.4; text-align:center; color:var(--muted,#8b87a8); } .ai-assistant .ai-assistant__clip-num { position:absolute; left:7px; top:7px; min-height:0; padding:1px 8px; border:0; border-radius:999px; background:rgba(0,0,0,.62); color:#fff; font:inherit; font-size:11.5px; font-weight:600; line-height:1.5; cursor:pointer; } .ai-assistant .ai-assistant__clip-num:hover { background:rgba(0,0,0,.85); } .ai-assistant .ai-assistant__clip-enlarge { position:absolute; right:6px; top:6px; width:26px; height:26px; min-height:0; padding:0; border:0; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; font:inherit; font-size:14px; line-height:1; cursor:pointer; } .ai-assistant .ai-assistant__clip-enlarge:hover { background:rgba(0,0,0,.85); } /* 번호와 수정 배지를 위쪽에 나란히(2026-09-28) */ .ai-assistant__clip-tags { position:absolute; left:7px; top:7px; right:40px; z-index:2; display:flex; align-items:center; gap:6px; flex-wrap:wrap; pointer-events:none; } .ai-assistant__clip-tags > * { pointer-events:auto; } .ai-assistant .ai-assistant__clip-tags .ai-assistant__clip-num { position:static; } .ai-assistant__clip-tags .ai-assistant__clip-edited { position:static; } .ai-assistant__clip-edited { position:absolute; left:7px; bottom:6px; padding:1px 7px; border-radius:999px; background:rgba(214,120,20,.92); color:#fff; font-size:10.5px; font-weight:600; line-height:1.5; } .ai-assistant__clip.is-edited { border-color:rgba(214,120,20,.6); } .ai-assistant__clip-meta { display:flex; flex-direction:column; gap:6px; padding:7px 9px 8px; font-size:12px; } .ai-assistant__clip-line { display:flex; align-items:center; gap:8px; min-width:0; } .ai-assistant__clip-time { color:var(--muted,#697586); font-variant-numeric:tabular-nums; } .ai-assistant__clip-count { margin-left:auto; color:var(--muted,#697586); font-size:11.5px; } .ai-assistant__clip-scene-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; } /* Cards in a row end alike (2026-10-05, the user: a card with fewer scenes had its notice and buttons higher than its neighbour's): the details fill the card and the scene list takes the spare height, so what follows it sits at the bottom. */ .ai-assistant__clip:not(.ai-assistant__clip--music) > .ai-assistant__clip-meta { flex:1 1 auto; } .ai-assistant__clip:not(.ai-assistant__clip--music) > .ai-assistant__clip-meta > .ai-assistant__clip-scene-list { flex:1 0 auto; } .ai-assistant__clip-scene { display:flex; align-items:baseline; gap:6px; min-width:0; font-size:12px; line-height:1.4; } .ai-assistant__clip-scene b { color:var(--muted,#697586); font-weight:600; font-variant-numeric:tabular-nums; } .ai-assistant__clip-scene-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink,#172033); } .ai-assistant__clip-scene-secs { color:var(--muted,#697586); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; } .ai-assistant__clip-foot { display:flex; align-items:center; gap:5px; min-height:26px; } .ai-assistant__clip-refs { display:flex; flex:1; min-width:0; gap:4px; overflow:hidden; } .ai-assistant__clip-refs .ai-assistant__clip-ref { display:inline-flex; } .ai-assistant__clip-refs .ai-assistant__ref-thumb { width:26px; height:26px; border-radius:6px; } .ai-assistant .ai-assistant__clip-edit, .ai-assistant .ai-assistant__clip-remake, .ai-assistant .ai-assistant__clip-at { box-sizing:border-box; min-height:24px; height:24px; padding:0 8px; border:1px solid var(--line,#e3e4e9); border-radius:6px; background:transparent; color:var(--muted,#697586); font:inherit; font-size:11.5px; line-height:1; cursor:pointer; } .ai-assistant .ai-assistant__clip-remake, .ai-assistant .ai-assistant__clip-at { width:26px; min-width:26px; padding:0; font-size:13px; } .ai-assistant .ai-assistant__clip-edit:hover:not(:disabled), .ai-assistant .ai-assistant__clip-remake:hover:not(:disabled), .ai-assistant .ai-assistant__clip-at:hover:not(:disabled), .ai-assistant .ai-assistant__clip-at[aria-expanded="true"] { color:var(--ink,#172033); background:color-mix(in srgb,var(--ink,#172033) 8%,transparent); } .ai-assistant .ai-assistant__clip-edit.is-on { color:var(--ink,#172033); border-color:var(--accent,#8666ed); background:color-mix(in srgb,var(--accent,#8666ed) 16%,transparent); } .ai-assistant .ai-assistant__clip-edit:disabled, .ai-assistant .ai-assistant__clip-remake:disabled, .ai-assistant .ai-assistant__clip-at:disabled { opacity:.45; cursor:default; } /* the card's confirm strip (2026-09-28, the user's design A): what is made, its price, the next clip, make / cancel */ .ai-assistant .ai-assistant__clip-remake.is-on { color:var(--switch-on-bg,#6d5dfc); border-color:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 55%,transparent); background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 12%,transparent); } .ai-assistant__clip-confirm { display:grid; gap:7px; margin:2px -9px -8px; padding:9px 9px 10px; border-top:1px solid color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 25%,transparent); background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 9%,transparent); } .ai-assistant__clip-confirm-line { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:11.5px; color:var(--ink,#172033); } .ai-assistant__clip-confirm-what { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ai-assistant__clip-confirm-cost { flex:none; font-variant-numeric:tabular-nums; } .ai-assistant__clip-confirm-note { font-size:11.5px; color:var(--muted,#697586); } .ai-assistant__clip-confirm-note.is-bad { color:#d4553b; } /* 만든 모델·해상도(2026-09-28): 작게, 지금 설정과 다르면 다시 만들 때의 값을 보라색으로 */ /* 잠긴 목표 길이·화면 비율과 새 대화 안내(2026-09-28) */ .ai-agent-plan__locked-value, .ai-agent-plan__read-value { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 10px; border:1px dashed var(--line-strong,#c9cdd6); border-radius:8px; color:var(--muted,#697586); font-size:13px; cursor:default; } .ai-agent-plan__locked-value::after { content:"🔒"; font-size:11px; opacity:.7; } /* 부분 생성 체크(2026-09-28) */ .ai-assistant .ai-assistant__batch-pick { margin:0 6px 0 0; vertical-align:-2px; accent-color:var(--switch-on-bg,#6d5dfc); cursor:pointer; } .ai-assistant__batch-picks { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; } .ai-assistant .ai-assistant__batch-pick-chip { min-height:28px; padding:0 11px; border:1px solid var(--line-strong,#c9cdd6); border-radius:999px; background:transparent; color:inherit; font:inherit; font-size:12px; font-weight:600; cursor:pointer; } .ai-assistant .ai-assistant__batch-pick-chip.is-on { border-color:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 60%,transparent); background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 14%,transparent); } .ai-assistant__batch-chain { color:#b86f14; } /* 클립 보드 라이트 모드 A안(2026-09-29, 사용자: 라벤더 톤) — 다크 모드는 그대로 */ html:not([data-theme="dark"]) .ai-assistant .ai-assistant__board-seg { background:#fff; border-color:#e0dcf7; box-shadow:0 1px 2px rgba(60,40,140,.06); } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__board-tab { color:#6b6f80; } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__board-tab[aria-pressed="true"] { background:var(--switch-on-bg,#6d5dfc); color:#fff; font-weight:700; } /* 2026-10-04 (the user, A): the plan's boxes in light mode were grey on the grey panel (#f8f9fc) — white cards, a faint head. */ html:not([data-theme="dark"]) :is(.ai-agent-plan__decl,.ai-agent-plan__scenes li.ai-agent-plan__clip) { background:#fff; border-color:color-mix(in srgb,var(--ink,#172033) 10%,transparent); box-shadow:0 1px 2px rgba(23,32,51,.04); } html:not([data-theme="dark"]) :is(.ai-agent-plan__decl>summary,.ai-agent-plan__clip-head) { background:#fbfbfd; border-bottom-color:color-mix(in srgb,var(--ink,#172033) 7%,transparent); } html:not([data-theme="dark"]) .ai-agent-plan__reference-table { background:#fff; } html:not([data-theme="dark"]) .ai-agent-plan__reference-row--cast { outline-color:color-mix(in srgb,var(--ink,#172033) 16%,transparent); } html:not([data-theme="dark"]) .ai-agent-plan__reference-row .ai-agent-plan__cast-mark { border-color:color-mix(in srgb,var(--ink,#172033) 22%,transparent); background:#fafbfd; } /* 2026-10-04 (the user, A): the scene body under the pointer was blue-grey (#eef2f6) on the white card — a faint violet, one piece with the violet pencil. */ html:not([data-theme="dark"]) .ai-agent-plan__scene-body.is-editable:is(:hover,:focus-visible) { background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 6%,#fff); border-color:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 22%,transparent); } /* 2026-10-04 (the user, A): in dark mode the boxes a little lighter (4%, heads 7%) and the scene body under the pointer a faint violet — it stayed transparent and only the pencil changed. */ html[data-theme="dark"] :is(.ai-agent-plan__decl,.ai-agent-plan__scenes li.ai-agent-plan__clip) { background:color-mix(in srgb,var(--ink,#eceef2) 4%,transparent); border-color:color-mix(in srgb,var(--ink,#eceef2) 12%,transparent); } html[data-theme="dark"] :is(.ai-agent-plan__decl>summary,.ai-agent-plan__clip-head) { background:color-mix(in srgb,var(--ink,#eceef2) 7%,transparent); } html[data-theme="dark"] .ai-agent-plan__reference-table { background:color-mix(in srgb,var(--ink,#eceef2) 3%,transparent); } html[data-theme="dark"] .ai-agent-plan__scene-body.is-editable:is(:hover,:focus-visible) { background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 14%,transparent); border-color:color-mix(in srgb,#a99bff 35%,transparent); } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__clip { background:#fff; border-color:#e6e3f3; box-shadow:0 1px 3px rgba(40,30,90,.05); } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__clip-thumb:not(.is-ready):not(.is-playing):not(.is-music):not(.is-generating):not(.is-flowing) { background-color:#f7f6fd; background-image:radial-gradient(#e3def9 1px,transparent 1px); background-size:14px 14px; } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__clip-thumb.is-wait { border-bottom:1px solid #efedf8; } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__clip-state { color:#7c78a0; } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__clip-num { background:#fff; color:#4b3fc4; border:1px solid #d9d3fb; box-shadow:0 1px 2px rgba(0,0,0,.06); } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__clip-num:hover { background:#f3f0ff; } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__clip-edit, html:not([data-theme="dark"]) .ai-assistant .ai-assistant__clip-remake, html:not([data-theme="dark"]) .ai-assistant .ai-assistant__clip-at { border-color:#e3e0f2; color:#5b5f73; background:#fff; } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__clip-thumb.is-music { background:linear-gradient(135deg,#f3f0ff,#eaf6ff); } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__clip-music-make { background:#fff; border-color:#ddd6fe; color:#4b3fc4; box-shadow:0 2px 8px rgba(80,60,200,.08); } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__clip-music-mark { color:#8b7cf6; } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__clip-bulk { background:#f6f4ff; border:1px solid #e0dafc; } /* 클립 보드 다크 모드 A안(2026-09-29, 사용자: 라이트 A와 짝 — 짙은 보라빛 차콜) */ html[data-theme="dark"] .ai-assistant .ai-assistant__board-seg { background:#201f2b; border-color:#36315a; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-tab { color:#a3a0b8; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-tab[aria-pressed="true"] { background:var(--switch-on-bg,#6d5dfc); color:#fff; font-weight:700; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip { background:#211f2c; border-color:#332f48; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-thumb:not(.is-ready):not(.is-playing):not(.is-music):not(.is-generating):not(.is-flowing) { background-color:#1b1a25; background-image:radial-gradient(rgba(150,130,255,.16) 1px,transparent 1px); background-size:14px 14px; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-thumb.is-wait { border-bottom:1px solid #2c2940; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-state { color:#a39cd6; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-num { background:#2c2745; color:#cfc6ff; border:1px solid #473f73; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-num:hover { background:#3a3360; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-edit, html[data-theme="dark"] .ai-assistant .ai-assistant__clip-remake, html[data-theme="dark"] .ai-assistant .ai-assistant__clip-at { border-color:#3a3552; color:#c4c0da; background:#26233a; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-thumb.is-music { background:linear-gradient(135deg,#2a2350,#1b2b3d); } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-music-make { background:rgba(255,255,255,.06); border-color:rgba(167,155,255,.45); color:#e4dfff; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-bulk { background:#221e36; border:1px solid #3a3460; } /* 생성 흐름 B-1(2026-09-29, 사용자): 반짝이는 자리 + 가운데 칩 + 흐르는 막대, 라이트·다크 */ .ai-assistant .ai-assistant__clip-thumb.is-flowing { display:grid; place-items:center; cursor:default; background:linear-gradient(100deg,#f1eefc 30%,#fbfaff 50%,#f1eefc 70%); background-size:200% 100%; animation:ai-clip-shimmer 2.2s linear infinite; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-thumb.is-flowing { background:linear-gradient(100deg,#1f1d2b 30%,#2b2840 50%,#1f1d2b 70%); background-size:200% 100%; } @keyframes ai-clip-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } } .ai-assistant .ai-assistant__clip-flow { display:grid; justify-items:center; gap:6px; } .ai-assistant .ai-assistant__clip-flow-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; border:1px solid #ddd6fe; background:#fff; color:#4b3fc4; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; box-shadow:0 2px 8px rgba(80,60,200,.08); white-space:nowrap; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-flow-chip { border-color:#473f73; background:rgba(20,18,32,.72); color:#e4dfff; box-shadow:none; } .ai-assistant .ai-assistant__clip-flow-dot { width:8px; height:8px; border-radius:50%; background:#8b7cf6; animation:ai-clip-breathe 1.2s ease-in-out infinite; } @keyframes ai-clip-breathe { 50% { opacity:.45; transform:scale(.85); } } .ai-assistant .ai-assistant__clip-flow-sub { font-size:11px; color:var(--muted,#697586); } @media (prefers-reduced-motion:reduce) { .ai-assistant .ai-assistant__clip-thumb.is-flowing, .ai-assistant .ai-assistant__clip-flow-dot { animation:none; } } /* 클립마다 모델 선택(2026-09-29, 사용자) */ .ai-assistant .ai-assistant__clip-model { position:relative; flex:1; min-width:0; } .ai-assistant .ai-assistant__clip-model-btn { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:30px; padding:0 10px; border:1px solid var(--line-strong,#c9cdd6); border-radius:8px; background:var(--control-surface,#f8f9fc); color:var(--ink,#172033); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; } .ai-assistant .ai-assistant__clip-model-btn:disabled { opacity:.55; cursor:default; } .ai-assistant .ai-assistant__clip-model-caret { color:var(--muted,#697586); font-size:11px; } .ai-assistant .ai-assistant__clip-model-list { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; display:grid; gap:2px; max-height:260px; overflow:auto; padding:4px; border:1px solid var(--line-strong,#c9cdd6); border-radius:10px; background:var(--panel-bg,#fff); box-shadow:0 12px 32px rgba(20,16,50,.18); } .ai-assistant .ai-assistant__clip-model-opt { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:30px; padding:0 10px; border:0; border-radius:7px; background:transparent; color:var(--ink,#172033); font:inherit; font-size:12.5px; text-align:left; cursor:pointer; } .ai-assistant .ai-assistant__clip-model-opt small { color:var(--muted,#697586); font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap; } .ai-assistant .ai-assistant__clip-model-opt:hover { background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 10%,transparent); } .ai-assistant .ai-assistant__clip-model-opt.is-on { background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 16%,transparent); font-weight:700; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-model-btn { background:#26233a; border-color:#3a3552; color:#e4dfff; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-model-list { background:#221f30; border-color:#3a3552; box-shadow:0 12px 32px rgba(0,0,0,.45); } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-model-opt { color:#e4dfff; } .ai-assistant .ai-assistant__clip-confirm-model { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted,#697586); } .ai-assistant .ai-assistant__clip-confirm-model select { flex:1; min-width:0; min-height:28px; padding:0 8px; border:1px solid var(--line-strong,#c9cdd6); border-radius:7px; background:var(--control-surface,#f8f9fc); color:var(--ink,#172033); font:inherit; font-size:12.5px; } /* 남은 클립 일괄 생성(2026-09-29, 사용자): 보드 맨 아래 */ .ai-assistant .ai-assistant__clip-bulk { display:grid; gap:8px; margin:14px 0 4px; padding:12px 14px; border:1px dashed var(--line-strong,#c9cdd6); border-radius:12px; } .ai-assistant .ai-assistant__clip-bulk.is-open { border-style:solid; border-color:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 45%,transparent); background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 6%,transparent); } .ai-assistant .ai-assistant__clip-bulk-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px; } .ai-assistant .ai-assistant__clip-bulk-go { min-height:32px; padding:0 16px; border:0; border-radius:999px; background:linear-gradient(110deg,#6254d9,#8246c7); color:#fff; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; } .ai-assistant .ai-assistant__clip-bulk-go:disabled { opacity:.45; cursor:default; } .ai-assistant .ai-assistant__clip-bulk-spec, .ai-assistant .ai-assistant__clip-bulk-note { font-size:12px; color:var(--muted,#697586); } .ai-assistant .ai-assistant__clip-bulk-cost { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; } .ai-assistant .ai-assistant__clip-bulk-progress { font-size:12px; color:var(--ink,#172033); font-variant-numeric:tabular-nums; } /* 준비 중 단계 A안(2026-09-29, 사용자) */ .ai-assistant .ai-assistant__clip-thumb.is-prep { position:relative; display:grid; place-items:center; overflow:hidden; } .ai-assistant .ai-assistant__clip-prep { display:grid; gap:6px; width:min(80%,260px); font-size:11.5px; text-align:left; } .ai-assistant .ai-assistant__clip-prep-title { font-size:12px; font-weight:700; color:var(--ink,#172033); margin-bottom:2px; font-variant-numeric:tabular-nums; } .ai-assistant .ai-assistant__clip-prep-step { display:flex; align-items:center; gap:8px; color:var(--muted,#697586); } .ai-assistant .ai-assistant__clip-prep-step i { flex:none; width:15px; height:15px; border-radius:50%; border:2px solid var(--line-strong,#c9cdd6); display:grid; place-items:center; font-style:normal; font-size:9px; line-height:1; box-sizing:border-box; } .ai-assistant .ai-assistant__clip-prep-step small { margin-left:auto; font-size:10.5px; } .ai-assistant .ai-assistant__clip-prep-step.is-done { color:var(--ink,#172033); } .ai-assistant .ai-assistant__clip-prep-step.is-done i { border-color:#1f9d63; background:#1f9d63; color:#fff; } .ai-assistant .ai-assistant__clip-prep-step.is-now { color:var(--ink,#172033); font-weight:700; } .ai-assistant .ai-assistant__clip-prep-step.is-now i { border-color:var(--switch-on-bg,#6d5dfc); border-top-color:transparent; animation:ai-clip-prep-spin .9s linear infinite; } @keyframes ai-clip-prep-spin { to { transform:rotate(360deg); } } .ai-assistant .ai-assistant__clip-genbar.is-flow { position:absolute; left:0; right:0; bottom:0; height:3px; overflow:hidden; background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 18%,transparent); } .ai-assistant .ai-assistant__clip-genbar.is-flow i { position:absolute; top:0; bottom:0; width:35%; background:linear-gradient(110deg,#6254d9,#8246c7); animation:ai-clip-prep-flow 1.4s ease-in-out infinite; } @keyframes ai-clip-prep-flow { from { left:-35%; } to { left:100%; } } @media (prefers-reduced-motion:reduce) { .ai-assistant .ai-assistant__clip-prep-step.is-now i, .ai-assistant .ai-assistant__clip-genbar.is-flow i { animation:none; } } /* 수정된 클립의 다시 생성 띠 A안(2026-09-29, 사용자) */ .ai-assistant .ai-assistant__clip-redo { display:flex; align-items:center; gap:8px; margin-top:6px; padding:7px 8px 7px 10px; border-radius:8px; background:rgba(234,120,20,.12); color:#b45a0c; font-size:11.5px; font-weight:600; line-height:1.35; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-redo { background:rgba(240,150,60,.14); color:#f0a050; } .ai-assistant .ai-assistant__clip-redo span { flex:1; min-width:0; } .ai-assistant .ai-assistant__clip-redo-go { flex:none; min-height:26px; padding:0 10px; border:0; border-radius:7px; background:linear-gradient(110deg,#6254d9,#8246c7); color:#fff; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap; } .ai-assistant .ai-assistant__clip-redo-go.is-on { box-shadow:0 0 0 2px color-mix(in srgb,#8246c7 45%,transparent); } .ai-assistant .ai-assistant__clip-redo-go:disabled { opacity:.45; cursor:default; } /* 만든 뒤의 전체 길이는 화면 비율 칸과 같은 모양, 자물쇠 없이(사용자 10/6) */ .ai-agent-plan__read-value { font-variant-numeric:tabular-nums; } .ai-agent-plan__length-hint { margin:2px 0 0; font-size:11.5px; color:var(--muted,#697586); } .ai-agent-plan__lock-note { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:6px; font-size:12px; color:var(--muted,#697586); } .ai-assistant .ai-agent-plan__lock-new { min-height:28px; padding:0 10px; font-size:12px; } .ai-assistant__clip-spec { display:flex; flex-wrap:wrap; gap:4px 8px; font-size:11px; color:var(--muted,#697586); } .ai-assistant__clip-spec-next { color:var(--switch-on-bg,#6d5dfc); font-weight:600; } /* The model and resolution on the video's top right corner, left of the enlarge button (2026-10-05, the user); a narrow card cuts it short (the whole of it in the title). */ .ai-assistant .ai-assistant__clip-frame > .ai-assistant__clip-spec { position:absolute; top:6px; right:6px; display:block; max-width:calc(100% - 140px); padding:0 7px; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; line-height:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:default; } .ai-assistant .ai-assistant__clip-frame:has(> .ai-assistant__clip-enlarge) > .ai-assistant__clip-spec { right:38px; } /* The make/remake confirm floats beside its button (2026-10-05, the user: inside the card it made the card longer). */ .ai-assistant .ai-assistant__clip-confirm.is-floating { position:fixed; z-index:1000; box-sizing:border-box; width:min(360px,calc(100vw - 16px)); margin:0; padding:12px; border:1px solid var(--line,#e3e4e9); border-radius:12px; background:var(--panel,#fff); box-shadow:0 12px 32px rgba(15,23,42,.22); } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-confirm.is-floating { background:#221f2e; border-color:#352f4d; box-shadow:0 14px 36px rgba(0,0,0,.5); } /* The floating confirm on one left edge (2026-10-06, the user: its parts did not line up): the title over its spec, the model's label over its picker, every control 34px high, even gaps. */ .ai-assistant .ai-assistant__clip-confirm.is-floating { gap:12px; padding:14px 16px 16px; } .ai-assistant .ai-assistant__clip-confirm.is-floating .ai-assistant__clip-confirm-line { display:grid; gap:2px; justify-content:stretch; } .ai-assistant .ai-assistant__clip-confirm.is-floating .ai-assistant__clip-confirm-what { font-size:13.5px; font-weight:700; color:var(--ink,#172033); } .ai-assistant .ai-assistant__clip-confirm.is-floating .ai-assistant__clip-confirm-spec { font-size:12px; color:var(--muted,#697586); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ai-assistant .ai-assistant__clip-confirm.is-floating .ai-assistant__clip-confirm-model { display:grid; gap:5px; } .ai-assistant .ai-assistant__clip-confirm.is-floating .ai-assistant__clip-confirm-model > span { font-size:12px; color:var(--muted,#697586); } .ai-assistant .ai-assistant__clip-confirm.is-floating :is(.ai-assistant__clip-model-btn,.ai-assistant__clip-confirm-go,.ai-assistant__clip-confirm-cancel) { min-height:34px; box-sizing:border-box; } .ai-assistant .ai-assistant__clip-confirm.is-floating .ai-assistant__clip-model-btn { font-size:13px; font-weight:600; padding:0 12px; } .ai-assistant .ai-assistant__clip-confirm.is-floating .ai-assistant__clip-confirm-row { gap:8px; margin-top:2px; } .ai-assistant .ai-assistant__clip-confirm.is-floating .ai-assistant__clip-confirm-go { font-size:13px; } .ai-assistant .ai-assistant__clip-confirm.is-floating .ai-assistant__clip-confirm-cancel { padding:0 16px; font-size:13px; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-confirm.is-floating .ai-assistant__clip-confirm-what { color:#ece8ff; } .ai-assistant__clip-confirm-note.is-warn { color:#b86f14; } html[data-theme="dark"] .ai-assistant__clip-confirm-note.is-warn { color:#e0a54a; } .ai-assistant__clip-confirm-hint { display:grid; gap:4px; padding:6px 8px; border-radius:7px; background:rgba(214,140,40,.13); color:#b86f14; font-size:11.5px; line-height:1.45; } html[data-theme="dark"] .ai-assistant__clip-confirm-hint { color:#e0a54a; } .ai-assistant__clip-confirm-check { display:flex; align-items:center; gap:6px; color:var(--ink,#172033); font-weight:600; cursor:pointer; } .ai-assistant__clip-confirm-check input { margin:0; accent-color:var(--switch-on-bg,#6d5dfc); } .ai-assistant__clip-confirm-row { display:flex; gap:6px; } .ai-assistant .ai-assistant__clip-confirm-go { flex:1; min-width:0; min-height:30px; padding:0 10px; border:0; border-radius:8px; background:linear-gradient(110deg,#6254d9,#8246c7); color:#fff; font:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ai-assistant .ai-assistant__clip-confirm-go:disabled { opacity:.55; cursor:default; } /* A cost: the credit icon and the number (credit-cost.mjs, 2026-10-06, the user), after a run button's words. */ .ai-credit-cost { display:inline-flex; align-items:center; gap:3px; font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; vertical-align:middle; } .ai-credit-cost__icon { width:1.1em; height:1.1em; fill:currentColor; flex:none; } /* Any run button carrying a cost (the clip confirm, the join, the music dialog's make, the action bar): its words and the cost on one centred line. */ button:has(> .ai-credit-cost) { display:inline-flex; align-items:center; justify-content:center; gap:8px; } .ai-assistant .ai-assistant__clip-model-opt small .ai-credit-cost { font-weight:600; } /* 아직 만들지 않은 클립의 생성 버튼(2026-09-29, 사용자) */ .ai-assistant .ai-assistant__clip-thumb.is-makeable { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; } .ai-assistant .ai-assistant__clip-make { min-height:28px; padding:0 14px; border:0; border-radius:999px; background:linear-gradient(110deg,#6254d9,#8246c7); color:#fff; font:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; } .ai-assistant .ai-assistant__clip-make:hover:not(:disabled) { filter:brightness(1.08); } .ai-assistant .ai-assistant__clip-make.is-on { box-shadow:0 0 0 2px color-mix(in srgb,#8246c7 45%,transparent); } .ai-assistant .ai-assistant__clip-make:disabled { opacity:.45; cursor:default; } .ai-assistant .ai-assistant__clip-confirm-cancel { flex:none; min-height:30px; padding:0 12px; border:1px solid var(--line,#e3e4e9); border-radius:8px; background:var(--panel-bg,#fff); color:var(--ink,#172033); font:inherit; font-size:12px; font-weight:600; cursor:pointer; } .ai-assistant .ai-assistant__clip-remake--wide { width:auto; min-width:0; margin-left:auto; padding:0 10px; font-size:11.5px; white-space:nowrap; } .ai-assistant__clip-foot .ai-assistant__reference-picker { display:inline-flex; } .ai-assistant__reference-list-caption { margin:2px 6px 4px; font-size:11px; color:var(--muted,#697586); } /* the editor row: under the card's row, the whole width */ dialog.ai-assistant__clip-editor { box-sizing:border-box; width:min(680px,calc(100vw - 32px)); max-height:min(760px,calc(100dvh - 48px)); margin:auto; padding:0; border:1px solid var(--line-strong,var(--line,#e3e4e9)); border-radius:16px; background:var(--panel-bg,#fff); color:var(--ink,#172033); box-shadow:0 28px 80px rgba(0,0,0,.34); overflow:auto; font-family:inherit; } dialog.ai-assistant__clip-editor[open] { display:flex; flex-direction:column; } dialog.ai-assistant__clip-editor:focus { outline:none; } .ai-assistant__clip-editor-head { display:flex; align-items:flex-start; gap:12px; padding:18px 18px 12px 22px; border-bottom:1px solid var(--line,#e3e4e9); } .ai-assistant__clip-editor-title { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; } .ai-assistant__clip-editor-title strong { font-size:15px; font-weight:700; color:var(--ink,#172033); } .ai-assistant__clip-editor-title span { font-size:12px; color:var(--muted,#697586); } dialog.ai-assistant__clip-editor .ai-assistant__clip-editor-close { flex:none; width:32px; height:32px; min-height:0; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted,#697586); font:inherit; font-size:22px; line-height:1; cursor:pointer; } dialog.ai-assistant__clip-editor .ai-assistant__clip-editor-close:hover { background:color-mix(in srgb,var(--ink,#172033) 8%,transparent); color:var(--ink,#172033); } .ai-assistant__clip-editor-scene { display:flex; flex-direction:column; gap:6px; padding:14px 22px 0; } .ai-assistant__clip-editor-label { display:flex; align-items:baseline; gap:8px; font-size:12px; font-weight:600; color:var(--muted,#697586); } .ai-assistant__clip-editor-label b { color:var(--ink,#172033); font-size:13px; } /* the site's prompt box, sized for a scene's words; the @ sits at the toolbar's left with the toolbar's 26px shape */ dialog.ai-assistant__clip-editor .ai-assistant__clip-editor-box { height:118px; min-height:96px; } dialog.ai-assistant__clip-editor .ai-assistant__clip-editor-box .ai-tools-textarea { padding:12px 24px 8px 14px; font-weight:500; } dialog.ai-assistant__clip-editor .ai-video-prompt-toolbar { justify-content:flex-start; padding:4px 14px 6px 8px; } dialog.ai-assistant__clip-editor .ai-video-prompt-toolbar .ai-assistant__reference-picker { pointer-events:auto; } dialog.ai-assistant__clip-editor .ai-video-prompt-toolbar .ai-assistant__reference-trigger { width:26px; min-width:26px; height:26px; min-height:26px; border-radius:6px; font-size:17px; font-weight:800; color:#526174; } html[data-theme="dark"] dialog.ai-assistant__clip-editor .ai-video-prompt-toolbar .ai-assistant__reference-trigger { color:#9aa5b8; } dialog.ai-assistant__clip-editor .ai-video-prompt-toolbar .ai-assistant__reference-trigger:hover, dialog.ai-assistant__clip-editor .ai-video-prompt-toolbar .ai-assistant__reference-trigger[aria-expanded="true"] { background:color-mix(in srgb,var(--ink,#172033) 8%,transparent); color:var(--ink,#172033); } /* The buttons sit on the right whether or not a note is beside them (2026-10-06, the user: with the note hidden, the reference regenerate dialog's buttons fell to the left). */ .ai-assistant__clip-editor-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; padding:14px 22px 18px; } .ai-assistant__clip-editor-note { flex:1 1 240px; min-width:0; font-size:12px; color:var(--muted,#697586); } dialog.ai-assistant__clip-editor .ai-assistant__clip-editor-cancel { min-height:34px; padding:6px 14px; border-radius:9px; font-size:13px; } dialog.ai-assistant__clip-editor .ai-assistant__clip-editor-apply { min-height:34px; padding:6px 18px; border:0; border-radius:9px; background:linear-gradient(110deg,#6254d9,#8246c7); color:#fff; font:inherit; font-size:13px; font-weight:600; cursor:pointer; box-shadow:0 3px 10px #6b48cc26; } dialog.ai-assistant__clip-editor .ai-assistant__clip-editor-apply:disabled, dialog.ai-assistant__clip-editor .ai-assistant__clip-editor-cancel:disabled { opacity:.5; cursor:default; } .ai-agent-plan__quota + .ai-agent-plan__quota { position:relative; } .ai-agent-plan__quota + .ai-agent-plan__quota::before { content:''; position:absolute; left:-14px; top:1px; bottom:1px; width:1px; background:color-mix(in srgb,var(--ink,#172033) 12%,transparent); } .ai-agent-plan__reference-strip[hidden] { display:none; } /* Long form (2026-09-28): the work as a whole is one line of counts and lengths; the limits are on the clip boxes. */ .ai-agent-plan__reference-strip.is-summary { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; height:auto; min-height:24px; margin:2px 0 12px; font-size:11.5px; color:var(--muted,#697586); font-variant-numeric:tabular-nums; } .ai-agent-plan__quota-summary { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; color:var(--ink,#172033); } .ai-agent-plan__quota-summary.is-empty { color:var(--muted,#697586); } .ai-agent-plan__quota-summary .ai-agent-plan__quota-icon { color:var(--muted,#697586); } .ai-agent-plan__quota { min-width:0; } .ai-agent-plan__quota-line { display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted,#697586); white-space:nowrap; } .ai-agent-plan__quota-icon { flex:none; font-size:10.5px; } .ai-agent-plan__quota-name { min-width:0; overflow:hidden; text-overflow:ellipsis; } .ai-agent-plan__quota-value { margin-left:auto; color:var(--ink,#172033); font-variant-numeric:tabular-nums; } .ai-agent-plan__quota-bar { display:block; height:4px; margin-top:5px; border-radius:2px; background:color-mix(in srgb,var(--ink,#172033) 10%,transparent); overflow:hidden; } .ai-agent-plan__quota-bar i { display:block; height:100%; border-radius:2px; background:#8b5cf6; } .ai-agent-plan__quota.is-full .ai-agent-plan__quota-bar i { background:#e0a33a; } .ai-agent-plan__quota.is-full .ai-agent-plan__quota-value { color:color-mix(in srgb,#d8921f 82%,var(--ink,#172033)); } .ai-agent-plan__quota.is-empty { opacity:.6; } .ai-agent-plan__reference-strip.is-selecting { display:flex; align-items:center; gap:8px; padding:0 4px 0 10px; border-radius:9px; background:color-mix(in srgb,var(--ink,#172033) 6%,transparent); } .ai-agent-plan__reference-picked { margin-right:auto; font-size:12px; font-weight:500; white-space:nowrap; } .ai-assistant .ai-agent-plan__reference-cancel { min-height:26px; padding:3px 10px; border:1px solid var(--line,#e3e4e9); border-radius:7px; background:transparent; color:inherit; font:inherit; font-size:12px; cursor:pointer; } .ai-assistant .ai-agent-plan__reference-remove { min-height:26px; padding:3px 12px; border:0; border-radius:7px; background:#c2453a; color:#fff; font:inherit; font-size:12px; font-weight:600; cursor:pointer; } .ai-assistant .ai-agent-plan__reference-remove:disabled,.ai-assistant .ai-agent-plan__reference-cancel:disabled { opacity:.45; cursor:default; } /* Cancel and remove are one size whatever the page's generic button styles say: same box, same line. */ .ai-assistant .ai-agent-plan__reference-strip.is-selecting :is(.ai-agent-plan__reference-cancel,.ai-agent-plan__reference-remove) { box-sizing:border-box; height:26px; min-height:26px; padding-top:0; padding-bottom:0; line-height:24px; border:1px solid transparent; } .ai-assistant .ai-agent-plan__reference-strip.is-selecting .ai-agent-plan__reference-cancel { border-color:var(--line,#e3e4e9); } .ai-agent-plan__reference-pick { display:inline-flex; align-items:center; gap:8px; } .ai-agent-plan__reference-row.is-selectable { cursor:pointer; } .ai-agent-plan__reference-row.is-selectable > :not(.ai-agent-plan__reference-pick),.ai-agent-plan__reference-pick .ai-agent-plan__reference-preview { pointer-events:none; } .ai-agent-plan__reference-row.is-picked { background:color-mix(in srgb,#8b5cf6 12%,transparent); } .ai-agent-plan__reference-table.is-selecting .ai-agent-plan__reference-actions { visibility:hidden; } @container (max-width: 360px) { .ai-agent-plan__quota-name { display:none; } .ai-agent-plan__reference-new-label { display:none; } .ai-assistant .ai-agent-plan__reference-new { min-width:26px; padding:4px 8px; font-size:14px; line-height:1; } .ai-agent-plan__reference-strip { column-gap:20px; } .ai-agent-plan__quota + .ai-agent-plan__quota::before { left:-10px; } .ai-agent-plan__reference-row .ai-agent-plan__reference-pick { grid-row:1 / span 2; grid-column:1; align-self:center; } } @container (max-width: 260px) { .ai-agent-plan__reference-strip:not(.is-selecting) { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; } .ai-agent-plan__quota { display:inline-flex; padding:3px 8px; border-radius:999px; background:color-mix(in srgb,var(--ink,#172033) 6%,transparent); } .ai-agent-plan__quota.is-full { background:color-mix(in srgb,#e0a33a 16%,transparent); } .ai-agent-plan__quota-bar { display:none; } .ai-agent-plan__quota + .ai-agent-plan__quota::before { content:none; } .ai-agent-plan__reference-picked { display:none; } .ai-agent-plan__reference-strip.is-selecting { justify-content:flex-end; } } /* A person the draft names with nothing standing for them yet (2026-09-28): a dashed row in the reference table with a "?" mark and an add button; the reference attached for them takes the row's place. */ .ai-agent-plan__reference-row--cast { outline:1px dashed color-mix(in srgb,var(--ink,#172033) 24%,transparent); outline-offset:-3px; border-radius:8px; } .ai-agent-plan__reference-row .ai-agent-plan__cast-mark { display:block; width:38px; height:38px; border:1px dashed color-mix(in srgb,var(--ink,#172033) 30%,transparent); border-radius:8px; font-size:16px; } .ai-agent-plan__reference-row--cast .ai-agent-plan__reference-name { font-size:13px; } /* A long name (2026-09-30, the user: "cozinha simples de uma casa do interior de Minas" stood one word a line): two lines at most, never narrower than a short word; the whole name is its title. The role word stays on one line. */ .ai-agent-plan__reference-row--cast .ai-agent-plan__reference-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.35; } .ai-agent-plan__reference-row--cast .ai-agent-plan__reference-role { white-space:nowrap; } .ai-agent-plan__cast-scenes { color:var(--muted,#697586); } .ai-assistant .ai-agent-plan__cast-add { margin-left:0; justify-self:end; white-space:nowrap; } .ai-agent-plan__cast-actions { display:inline-flex; gap:4px; justify-self:end; } .ai-assistant .ai-agent-plan__cast-generate { margin-left:0; white-space:nowrap; } /* Drawn as the AI's (2026-10-05, the user, A 안): a blue-violet-pink gradient border, drawn by a masked layer so the inside stays the card's own (translucent) background; the sparkles carry the same gradient. */ .ai-assistant .ai-agent-plan__cast-actions .ai-agent-plan__cast-generate { border-color:transparent; } .ai-agent-plan__cast-generate::before { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(135deg,#5fb4ff,#8b7cff,#d46bff); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); pointer-events:none; } .ai-assistant .ai-agent-plan__cast-actions .ai-agent-plan__cast-generate:hover:not(:disabled) { background:color-mix(in srgb,#8b7cff 16%,transparent); } .ai-assistant .ai-agent-plan__cast-state { margin-left:0; justify-self:end; white-space:nowrap; border-style:dashed; cursor:default; opacity:.85; } /* 빈 자리 행 정리(2026-09-28, 사용자: 두 줄일 때 여백·줄 맞춤): 행 사이 여백(겹친 테두리 대신), 버튼 높이 통일; 두 줄이면 ? 칸은 두 줄 가운데, 버튼·상태는 첫 줄 오른쪽, 장면 줄은 이름 아래에 맞춤 */ .ai-agent-plan__reference-row--cast { padding:8px 10px; } .ai-agent-plan__reference-row--cast + .ai-agent-plan__reference-row, .ai-agent-plan__reference-row + .ai-agent-plan__reference-row--cast { margin-top:6px; border-top:0; } .ai-agent-plan__cast-actions { align-items:center; } .ai-assistant .ai-agent-plan__cast-actions .ai-agent-plan__reference-new { min-height:28px; padding:0 10px; font-size:12px; line-height:1; } .ai-agent-plan__cast-title { display:contents; } /* The cast row's actions as icons with the site's tooltip (2026-09-30, the user: translated buttons ran too long). The table scrolls, so the tooltip opens to the button's left, inside the row. */ .ai-assistant .ai-agent-plan__cast-actions .ai-agent-plan__cast-icon { position:relative; display:inline-grid; place-items:center; width:28px; min-width:28px; min-height:28px; height:28px; padding:0; font-size:0; } .ai-agent-plan__cast-icon svg { display:block; } .ai-agent-plan__cast-icon[data-tooltip]::after { content:attr(data-tooltip); position:absolute; z-index:12; top:50%; right:calc(100% + 8px); width:max-content; max-width:220px; padding:6px 9px; border:1px solid color-mix(in srgb,var(--line-strong,#4b5260) 82%,transparent); border-radius:7px; background:#20242d; box-shadow:0 7px 18px rgba(0,0,0,.24); color:#fff; font-size:12px; font-weight:650; line-height:1.35; white-space:normal; text-align:left; pointer-events:none; opacity:0; visibility:hidden; transform:translate(4px,-50%); transition:opacity 120ms ease,transform 120ms ease,visibility 120ms ease; } .ai-agent-plan__cast-icon[data-tooltip]:is(:hover,:focus-visible)::after { opacity:1; visibility:visible; transform:translate(0,-50%); } .ai-agent-plan__cast-icon:disabled::after { display:none; } /* The reference-image card's prompt, editable before the quote (2026-09-28). */ /* Space under the card title (2026-10-05, the user: the title sat on the field). */ .ai-assistant .ai-assistant__image-prompt-field { box-sizing:border-box; width:100%; min-height:96px; margin:10px 0 8px; padding:8px 10px; border:1px solid var(--line,#e3e4e9); border-radius:8px; background:transparent; color:inherit; font:inherit; font-size:13px; line-height:1.5; resize:vertical; } .ai-agent-plan__cast-hint { margin:6px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted,#697586); } .ai-agent-plan__reference-empty { margin:0; padding:12px; border:1px dashed color-mix(in srgb,var(--ink,#172033) 16%,transparent); border-radius:10px; font-size:12.5px; line-height:1.5; color:var(--muted,#697586); } /* A description the image analysis wrote: the text keeps its ellipsis, the AI mark always shows at its end. */ .ai-assistant .ai-agent-plan__reference-desc-edit--ai { display:flex; align-items:center; gap:6px; } .ai-agent-plan__reference-desc-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ai-agent-plan__reference-ai { flex:none; padding:0 5px; border-radius:4px; background:linear-gradient(110deg,#6254d9,#8246c7); color:#fff; font-size:10px; font-weight:700; line-height:16px; letter-spacing:.02em; } .ai-assistant .ai-agent-plan__reference-analyzing { text-decoration:none; color:var(--muted,#697586); animation:ai-agent-plan-analyzing 1.4s ease-in-out infinite; } @keyframes ai-agent-plan-analyzing { 50% { opacity:.45; } } @media (prefers-reduced-motion: reduce) { .ai-assistant .ai-agent-plan__reference-analyzing { animation:none; } } /* The role control sits in a row now, not under a tile: it sets the row height, so it stays small. */ .ai-assistant .ai-agent-plan__reference-row .ai-agent-plan__setting-trigger { min-height:28px; padding:4px 9px; gap:6px; font-size:12px; border-radius:7px; } .ai-assistant .ai-agent-plan__reference-row .ai-agent-plan__reference-menu>button { width:26px; height:26px; border-radius:7px; background:transparent; color:var(--muted,#697586); font-size:15px; box-shadow:none; } .ai-assistant .ai-agent-plan__reference-row .ai-agent-plan__reference-menu>button:hover:not(:disabled) { background:color-mix(in srgb,var(--ink,#172033) 10%,transparent); color:var(--ink,#172033); } /* Writing a description gets its own line across the row, with the count under it. */ .ai-agent-plan__reference-editor { grid-column:1 / -1; display:flex; flex-direction:column; gap:4px; margin-top:2px; } .ai-assistant .ai-agent-plan__reference-input { box-sizing:border-box; width:100%; padding:7px 9px; border:1px solid color-mix(in srgb,var(--ink,#172033) 24%,transparent); border-radius:8px; background:var(--panel-bg,#fff); color:inherit; font:inherit; font-size:12px; line-height:1.5; resize:vertical; } .ai-assistant .ai-agent-plan__reference-input:focus-visible { outline:none; border-color:#8b5cf6; box-shadow:0 0 0 3px color-mix(in srgb,#8b5cf6 22%,transparent); } .ai-agent-plan__reference-counter { align-self:flex-end; font-size:10.5px; color:var(--muted,#697586); } .ai-agent-plan__reference-row:has(.ai-agent-plan__reference-editor) { row-gap:2px; padding-bottom:8px; } .ai-agent-plan__reference-row .ai-agent-plan__reference-actions { justify-self:end; } .ai-agent-plan__reference-row .ai-agent-plan__reference-menu { position:static; opacity:1; pointer-events:auto; } /* A narrow dock cannot hold five columns: name and role ride above the description. The default dock still fits one line, so only a dock squeezed below that - or a phone - wraps. */ @container (max-width: 360px) { /* Too narrow for shared columns: each row becomes its own two-line block. */ .ai-agent-plan__reference-table { display:flex; flex-direction:column; } .ai-agent-plan__reference-row { grid-template-columns:auto auto minmax(0,1fr) auto; row-gap:4px; } /* The thumbnail sits in the middle of the two lines, not against the first. */ .ai-assistant .ai-agent-plan__reference-row .ai-agent-plan__reference-preview { grid-row:1 / span 2; grid-column:1; align-self:center; } .ai-agent-plan__reference-name { grid-row:1; grid-column:2; } .ai-agent-plan__reference-role { grid-row:1; grid-column:3; justify-self:start; min-width:0; } .ai-agent-plan__reference-row .ai-agent-plan__reference-actions { grid-row:1; grid-column:4; } .ai-agent-plan__reference-desc { grid-row:2; grid-column:2 / -1; } .ai-assistant .ai-agent-plan__reference-row .ai-agent-plan__setting-trigger { min-height:26px; padding:3px 8px; font-size:11.5px; } } .ai-agent-plan__reference { display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:0; border:0; background:none; color:inherit; text-align:left; cursor:pointer; min-width:0; } .ai-agent-plan__reference img,.ai-agent-plan__media { width:100%; aspect-ratio:1; object-fit:cover; border-radius:9px; border:1px solid var(--line); } .ai-agent-plan__thumbnail { display:block; position:relative; aspect-ratio:1; min-width:0; } .ai-agent-plan__thumbnail img { display:block; height:100%; } .ai-agent-plan__reference-badge { position:absolute; left:6px; bottom:6px; max-width:calc(100% - 12px); padding:2px 6px; border-radius:5px; background:rgba(0,0,0,.72); color:#fff; font-size:11px; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ai-agent-plan__reference-role { font-size:12px; line-height:1.5; overflow-wrap:anywhere; } .ai-agent-plan__media { display:grid; place-items:center; } .ai-agent-plan__scenes { list-style:none; padding:0; margin:0; } .ai-agent-plan__scenes li { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:start; gap:9px; padding:10px 0; } .ai-agent-plan__scenes p { font-size:13px; line-height:1.6; margin:0; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } .ai-agent-plan__number { border:1px solid var(--line); width:25px; height:25px; display:grid; place-items:center; border-radius:50%; } .ai-agent-plan__scenes time { font-size:12px; color:var(--muted); padding-top:4px; white-space:nowrap; } .ai-agent-plan__prompt { margin-top:22px; font-size:13px; } .ai-agent-plan__prompt summary,.ai-agent-plan__text-button,.ai-agent-plan__manual { color:var(--accent,#8666ed); cursor:pointer; } .ai-agent-plan__prompt p { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; } .ai-agent-plan__text-button,.ai-agent-plan__manual { background:none; border:0; padding:10px 0; font:inherit; font-size:12px; } .ai-agent-plan__footer { position:sticky; bottom:0; z-index:2; padding:18px 0 12px; background:var(--control-surface,#f8f9fc); margin-top:20px; border-top:1px solid var(--line); } .ai-agent-plan__footer > button { width:100%; } .ai-agent-plan .ai-assistant__current-plan { margin-top:22px; } .ai-agent-plan .ai-assistant__proposal { padding:16px 12px; margin:12px 0; } .ai-agent-plan .ai-assistant__generation-review > .ai-assistant__review-settings, .ai-agent-plan .ai-assistant__generation-review > .ai-assistant__review-files, .ai-agent-plan .ai-assistant__generation-review > details { display:none; } .ai-agent-plan .ai-assistant__storyboard-option { padding:14px 10px; } .ai-agent-plan .ai-assistant__storyboard-heading strong { font-size:15px; } .ai-agent-plan .ai-assistant__storyboard-selected { max-height:260px; } .ai-agent-plan .ai-assistant__storyboard-option p { font-size:12px; } .ai-agent-plan button:focus-visible { outline:2px solid var(--accent,#8666ed); outline-offset:3px; } @media(max-width:1100px){.ai-assistant--standalone{grid-template-columns:minmax(0,1fr) 320px}.ai-agent-plan{--agent-plan-inline-space:16px;padding:22px var(--agent-plan-inline-space) 0}.ai-assistant--standalone .ai-assistant__transform-preview{display:none}} @media(max-width:800px){.ai-assistant--standalone{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none;overflow:visible}.ai-assistant--standalone>.ai-assistant__content{height:72dvh;min-height:480px}.ai-agent-plan{border-left:0;border-top:1px solid var(--line);max-height:none;overflow:visible}.ai-agent-plan__footer{position:static}.ai-assistant--standalone .ai-assistant__form{margin:12px 14px 18px;width:calc(100% - 28px)}} .ai-agent-plan [hidden] { display:none !important; } .ai-agent-plan { display:flex; flex-direction:column; } .ai-agent-plan__footer { margin-top:auto; } .ai-agent-plan__summary { padding-bottom:18px; } .ai-agent-plan__model { color:var(--muted); font-size:13px; margin:0 0 14px; } /* Keep creative decisions readable without pushing references out of reach. */ .ai-agent-plan__notes strong { display:block; font-size:12px; margin-bottom:3px; } .ai-agent-plan__notes > p { margin:12px 0; } .ai-agent-plan__details { margin:12px 0; font-size:13px; } .ai-agent-plan__details summary { color:var(--muted); cursor:pointer; padding:6px 0; } .ai-agent-plan__details[open] summary { margin-bottom:8px; } .ai-agent-plan__details summary:focus-visible { outline:2px solid var(--portal-accent,#8055ff); outline-offset:3px; border-radius:3px; } .ai-agent-plan__audio { padding-top:10px; border-top:1px solid var(--line); } .ai-assistant__library-footer {flex-wrap:wrap;} .ai-assistant__library-error {flex-basis:100%;margin:0 0 6px;font-size:13px;line-height:1.5;color:var(--danger,#d64d4d);overflow-wrap:anywhere;} .ai-assistant__library-extract {position:absolute;bottom:8px;left:8px;right:8px;z-index:3;border:1px solid #ffffff60;border-radius:7px;padding:7px 4px;color:#fff;background:#181820dc;font:inherit;font-size:12px;line-height:1.3;cursor:pointer;} .ai-assistant__library-extract:disabled {opacity:.55;cursor:wait;} .ai-assistant__library-extract:hover:not(:disabled) {background:#7353cce6;} .ai-assistant__library-extract:focus-visible {outline:2px solid #aa91ef;outline-offset:2px;} /* The caption sits above the last-frame button only where that button is; elsewhere (the narrator picker) it stays at the bottom edge like an image card's, instead of floating mid-card (2026-11-01, the user). At the edge it rounds its own corners: its backdrop blur is not clipped by the card's rounded overflow, so it showed square corners (same day). */ .ai-assistant__library-card:has(.ai-assistant__library-extract) .ai-assistant__library-name {bottom:48px;border-radius:0;} .ai-assistant__frame-actions {display:flex;flex-wrap:wrap;justify-content:center;gap:8px;} .ai-assistant__frame-actions a {text-decoration:none;} /* Adjustable standalone workspace; chat and composer share a 760px cap. */ .ai-assistant--standalone {--assistant-content-width:760px;--assistant-inline-space:max(20px,calc((100% - var(--assistant-content-width) - var(--assistant-scrollbar-width,0px))/2));grid-template-columns:minmax(0,1fr) 0px var(--agent-plan-width,clamp(35%,calc(100% - 860px),620px));} .ai-assistant--standalone .ai-assistant__log {padding-inline:var(--assistant-inline-space);} .ai-assistant--standalone .ai-assistant__form {width:calc(100% - 40px - var(--assistant-scrollbar-width,0px));max-width:760px;margin:14px calc(var(--assistant-inline-space) + var(--assistant-scrollbar-width,0px)) 22px var(--assistant-inline-space);} .ai-assistant--standalone > .ai-agent-plan {border-left:0;} @media(min-width:801px){.ai-assistant--standalone > .ai-assistant__content {margin-right:10px;}} .ai-agent-splitter {position:relative;z-index:5;width:12px;transform:translateX(-6px);cursor:col-resize;touch-action:none;outline:none;} .ai-agent-splitter::after {content:'';position:absolute;inset:0 5px;background:var(--accent,#8666ed);opacity:0;transition:opacity .12s;} .ai-agent-splitter:hover::after,.ai-agent-splitter:focus-visible::after,.is-resizing > .ai-agent-splitter::after {opacity:1;} .ai-assistant--standalone.is-resizing,.ai-assistant--standalone.is-resizing * {cursor:col-resize!important;user-select:none;} @media(max-width:800px){.ai-agent-splitter{display:none}.ai-assistant--standalone{--assistant-inline-space:14px}.ai-assistant--standalone .ai-assistant__form{width:calc(100% - 28px - var(--assistant-scrollbar-width,0px));margin-top:12px;margin-bottom:18px;}} /* The separator uses its central line as the focus cue, never a box. */ .ai-assistant .ai-agent-splitter:focus-visible {outline:none;box-shadow:none;} /* Applied edits are receipts, not approval panels. */ .ai-assistant .ai-assistant__proposal.ai-assistant__applied-change {padding:8px 0;margin:8px 0 16px;border:0;background:transparent;box-shadow:none;min-height:0;} .ai-assistant__applied-header {display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .ai-assistant__applied-header .ai-assistant__proposal-state {margin:0;font-size:12px;line-height:1.6;font-weight:500;} .ai-assistant .ai-assistant__undo-inline {margin:0;padding:4px 6px;min-height:28px;border:0;background:transparent;font-size:12px;text-decoration:underline;text-underline-offset:3px;} .ai-assistant__applied-details {margin-top:6px;font-size:12px;} .ai-assistant__applied-details > summary {cursor:pointer;color:var(--muted,#727487);padding:4px 0;} .ai-assistant__applied-details[open] > summary {margin-bottom:8px;} /* Direct plan controls retain compact chips and native keyboard selection. */ .ai-agent-plan__setting { display:inline-flex; max-width:100%; position:relative; } .ai-agent-plan__setting select { appearance:auto; width:auto; max-width:100%; min-height:34px; border:1px solid var(--line); border-radius:22px; padding:6px 10px 6px 14px; background:transparent; color:var(--text); font:inherit; font-size:13px; cursor:pointer; } .ai-agent-plan__setting select:hover { border-color:var(--accent,#8666ed); background:var(--surface-hover,rgba(128,110,160,.08)); } .ai-agent-plan__setting select:focus-visible { outline:2px solid var(--accent,#8666ed); outline-offset:2px; } .ai-agent-plan__setting select:disabled { opacity:.55; cursor:default; } .ai-agent-plan__setting option { background:var(--control-surface,#242529); color:var(--text); } .ai-agent-plan__model .ai-agent-plan__setting select { border-radius:8px; padding-left:10px; } .ai-agent-plan__notes .ai-agent-plan__edit-hint { color:var(--muted); font-size:12px; margin-top:18px; } /* The list's end while the next conversations come in (scrolling loads them; no button — 2026-10-13). */ .ai-assistant__history-more { flex:0 0 100%; width:100%; margin:4px 0 0; text-align:center; color:var(--muted,#737583); font-size:12px; } .ai-assistant__history-more[hidden] { display:none; } /* Restored draft disclosures and following actions must stay in normal flow. */ .ai-assistant__saved-brief { margin:12px 0; font-size:13px; line-height:1.65; } .ai-assistant__saved-brief > summary { padding:4px 0; cursor:pointer; overflow-wrap:anywhere; } .ai-assistant__saved-brief[open] > summary { margin-bottom:10px; } .ai-assistant__saved-brief + .ai-assistant__choices { margin-top:12px; } /* Keep extraction quiet until its video card is being used. Touch retains access. */ .ai-assistant__library-extract { transition:opacity .15s ease,background .15s ease; } .ai-assistant__library-card:not(:hover):not(:focus-within) .ai-assistant__library-extract { opacity:0; pointer-events:none; } @media (prefers-reduced-motion:reduce) { .ai-assistant__library-extract { transition:none; } } /* One media library, with source tabs distinct from media-type filters. */ .ai-assistant__library-tabs {display:flex;gap:24px;flex-shrink:0;border-bottom:1px solid var(--line,#dedee7);margin:6px 0 16px;padding-right:30px;} .ai-assistant__library-tab {position:relative;min-height:42px;padding:8px 2px 12px;border:0;background:transparent;color:var(--muted,#697586);font:inherit;font-size:14px;font-weight:600;cursor:pointer;} .ai-assistant__library-tab[aria-selected="true"] {color:var(--ink,#172033);} .ai-assistant__library-tab[aria-selected="true"]::after {content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;border-radius:3px;background:#9276ef;} .ai-assistant__library-tab:hover {color:var(--ink,#172033);} .ai-assistant__library-tab:focus-visible {outline:2px solid #aa91ef;outline-offset:2px;border-radius:4px;} @media(max-width:480px){.ai-assistant__library-tabs {gap:18px;padding-right:0;}.ai-assistant__library-tab {font-size:13px;}} /* Put source tabs beside the title, with natural wrapping on narrow screens. */ .ai-assistant__library-header {display:flex;align-items:center;flex-wrap:wrap;gap:4px 36px;flex-shrink:0;padding:0 44px 8px 0;margin-bottom:16px;border-bottom:1px solid var(--line,#dedee7);} .ai-assistant__library-header > h3 {margin:0;font-size:20px;line-height:1.4;} .ai-assistant__library-header .ai-assistant__library-tabs {margin:0;padding:0;border:0;flex-shrink:1;flex-wrap:wrap;max-width:100%;} .ai-assistant__library-header .ai-assistant__library-tab {padding:8px 2px;} .ai-assistant__library-header .ai-assistant__library-tab[aria-selected="true"]::after {bottom:-9px;} @media(max-width:650px){.ai-assistant__library-header {gap:4px 24px;}.ai-assistant__library-header > h3 {font-size:18px;}} /* The plan body scrolls independently; required progress stays in one footer. */ .ai-assistant--standalone > .ai-agent-plan{overflow:hidden;min-height:0;padding-top:0;scrollbar-gutter:auto;} /* 좌우 여백을 같게(2026-09-28, 사용자): 늘 비워 두는 스크롤바 자리(10px)를 오른쪽 여백에 포함 — 오른쪽 = 여백 14px + 스크롤바 자리 10px = 왼쪽 24px */ .ai-agent-plan__scroll{--agent-plan-scrollbar:10px;flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;margin-right:calc(0px - var(--agent-plan-inline-space));padding:26px calc(var(--agent-plan-inline-space) - var(--agent-plan-scrollbar)) 0 0;} @supports not selector(::-webkit-scrollbar){.ai-agent-plan__scroll{--agent-plan-scrollbar:8px;}} .ai-agent-plan__footer{position:relative;flex:0 0 auto;margin-top:0;padding-top:16px;} .ai-agent-plan__progress{font-size:13px;line-height:1.55;} .ai-agent-plan__progress p{margin:6px 0 12px;overflow-wrap:anywhere;} .ai-assistant .ai-agent-plan__progress button{box-sizing:border-box;width:100%;max-width:100%;min-height:44px;white-space:normal;text-align:center;} .ai-agent-plan__footer[data-state="busy"] .ai-agent-plan__progress p,.ai-agent-plan__footer[data-state="idle"] .ai-agent-plan__progress p{margin-top:0;color:var(--muted);} @media(max-width:800px){.ai-assistant--standalone > .ai-agent-plan{height:70dvh;min-height:360px;max-height:760px;}.ai-agent-plan__scroll{padding-top:20px;}} /* Plan settings share the site's rounded, violet-selected dropdown treatment. */ .ai-assistant .ai-agent-plan__setting-trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;max-width:100%;min-height:36px;padding:7px 12px;border:1px solid var(--line,#e3e4e9);border-radius:22px;background:var(--panel-bg,#fff);color:var(--ink,#172033);font:inherit;font-size:13px;line-height:20px;cursor:pointer;} .ai-agent-plan__setting-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ai-agent-plan__setting-arrow{flex:none;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7;} .ai-assistant .ai-agent-plan__setting-trigger:hover:not(:disabled),.ai-assistant .ai-agent-plan__setting-trigger[aria-expanded="true"]{border-color:#9472df;background:var(--control-surface,#f3f2f7);} .ai-agent-plan__setting-trigger[aria-expanded="true"] .ai-agent-plan__setting-arrow{transform:translateY(1px) rotate(225deg);} .ai-assistant .ai-agent-plan__setting-trigger:disabled{opacity:.55;cursor:default;} .ai-agent-plan__model .ai-agent-plan__setting{width:100%;max-width:320px;} .ai-agent-plan__model .ai-agent-plan__setting-trigger{width:100%;border-radius:10px;text-align:left;} .ai-agent-plan__setting-menu{box-sizing:border-box;z-index:30;overflow-y:auto;padding:6px;border:1px solid var(--line,#e3e4e9);border-radius:12px;background:var(--panel-bg,#fff);color:var(--ink,#172033);box-shadow:0 8px 28px #0002;font:inherit;font-size:13px;scrollbar-width:auto;overscroll-behavior:contain;} .ai-agent-plan__setting-menu[hidden]{display:none!important;} /* Target length popup (long clips): floats over the plan like the setting menus, so nothing below it moves. */ .ai-agent-plan__target-panel{display:flex;flex-direction:column;gap:12px;padding:14px;overflow-y:auto;} .ai-agent-plan__target-presets{display:flex;flex-wrap:wrap;gap:6px;} .ai-agent-plan__target-preset{min-width:44px;min-height:30px;padding:4px 10px;border:1px solid var(--line,#e3e4e9);border-radius:999px;background:var(--panel-bg,#fff);color:var(--ink,#172033);font:inherit;font-size:13px;cursor:pointer;} .ai-agent-plan__target-preset:hover{background:var(--control-surface,#f3f2f7);} .ai-agent-plan__target-preset[aria-pressed="true"]{border-color:var(--switch-on-bg,#7c5cff);background:var(--switch-on-bg,#7c5cff);color:#fff;} .ai-agent-plan__target-row{display:flex;align-items:center;gap:8px;} .ai-agent-plan__target-row .ai-agent-plan__target-slider{flex:1;min-width:0;gap:10px;padding:8px 12px;grid-template-columns:minmax(0,1fr) auto;} .ai-agent-plan__target-row .ai-video-duration-slider__value{min-width:48px;text-align:right;font-variant-numeric:tabular-nums;} .ai-agent-plan__target-step{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--line,#e3e4e9);border-radius:50%;background:var(--panel-bg,#fff);color:var(--ink,#172033);font:inherit;font-size:16px;line-height:1;cursor:pointer;} .ai-agent-plan__target-step:hover:not(:disabled){background:var(--control-surface,#f3f2f7);} .ai-agent-plan__target-step:disabled{opacity:.4;cursor:default;} .ai-agent-plan__target-preset:focus-visible,.ai-agent-plan__target-step:focus-visible{outline:2px solid #9472df;outline-offset:2px;} .ai-agent-plan__target-hint{margin:0;color:var(--muted,#6b7080);font-size:12px;line-height:1.45;} .ai-agent-plan__setting-option{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:9px 11px;border-radius:7px;line-height:20px;cursor:pointer;overflow-wrap:anywhere;} .ai-agent-plan__setting-option:hover,.ai-agent-plan__setting-option.is-active{background:var(--control-surface,#f3f2f7);} .ai-agent-plan__setting-option[aria-selected="true"]{background:#9575ef18;color:#7352b9;font-weight:600;} .ai-agent-plan__setting-option.is-active{outline:1px solid var(--line,#ded9ec);outline-offset:-1px;} .ai-agent-plan__setting-check{flex:none;visibility:hidden;color:#9472df;} .ai-agent-plan__setting-option[aria-selected="true"] .ai-agent-plan__setting-check{visibility:visible;} .ai-assistant .ai-agent-plan__setting-trigger:focus-visible{outline:2px solid #9472df;outline-offset:2px;} .ai-agent-plan__setting-menu::-webkit-scrollbar{width:10px;} .ai-agent-plan__setting-menu::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:var(--assistant-scroll-thumb,#9b99a566);background-clip:padding-box;} .ai-agent-plan__setting-menu::-webkit-scrollbar-track{background:transparent;} .ai-agent-plan__setting-menu::-webkit-scrollbar-button{display:none;width:0;height:0;} html[data-theme="dark"] .ai-agent-plan__setting-option[aria-selected="true"]{color:#c6afff;} .ai-agent-plan__setting-option-label{display:flex;align-items:center;gap:10px;min-width:0;} .ai-agent-plan__setting-icon.ai-model-option__mark{width:22px;height:22px;flex:0 0 22px;border-radius:4px;line-height:22px;font-size:20px;color:var(--muted);} .ai-agent-plan__model .ai-agent-plan__setting-value{flex:1;text-align:left;} /* Selected option B: the fixed next action is a separate card, not plan content. */ .ai-agent-plan__footer{border-top:0;padding-top:12px;} .ai-agent-plan__progress-card{padding:18px;border:1px solid #dccbf9;border-radius:12px;background:#fff;} .ai-agent-plan__progress-card > .ai-assistant__generate{width:100%;} .ai-agent-plan__progress > strong{display:flex;align-items:center;gap:8px;} .ai-agent-plan__progress-icon{color:#7545d5;font-size:16px;line-height:1;} .ai-agent-plan__footer[data-state="busy"] .ai-agent-plan__progress p,.ai-agent-plan__footer[data-state="idle"] .ai-agent-plan__progress p{margin-bottom:0;} .ai-agent-plan__progress-card > .ai-agent-plan__manual{display:block;width:100%;margin-top:10px;padding:4px 0;text-align:center;} html[data-theme="dark"] .ai-agent-plan__progress-card{background:#2d2e34;border-color:#62517e;} html[data-theme="dark"] .ai-agent-plan__progress-icon{color:#c0a6ff;} @media(max-width:480px){.ai-agent-plan__progress-card{padding:16px;}} /* Keep the shared chat/plan shell; strengthen only the light plan contrast. */ html:not([data-theme="dark"]) .ai-assistant--standalone > .ai-agent-plan{background:#eef1f6;border-left:1px solid #d9dfea;} html:not([data-theme="dark"]) .ai-assistant--standalone .ai-agent-plan__footer{background:#eef1f6;} @media(max-width:800px){html:not([data-theme="dark"]) .ai-assistant--standalone > .ai-agent-plan{border-left:0;border-top:1px solid #d9dfea;}} /* Quoted generation is ready: explain the state and point to the chat review. */ .ai-agent-plan__footer[data-state="review"] .ai-agent-plan__progress > strong{font-size:15px;margin-bottom:8px;} .ai-agent-plan__footer[data-state="review"] .ai-agent-plan__progress-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;height:18px;border:1px solid currentColor;border-radius:50%;font-size:12px;} .ai-agent-plan__footer[data-state="review"] .ai-agent-plan__progress p{margin:0 0 16px;color:var(--muted);line-height:1.7;} /* On stacked Agent pages, the document owns the outer scroll. */ @media(max-width:800px){body.ai-agent-page{overflow-x:clip;overflow-y:visible;}.ai-assistant--standalone>.ai-assistant__content,.ai-assistant--standalone>.ai-agent-plan{flex-shrink:0;}} /* Reference image confirmation: approved full-width A layout. */ .ai-assistant .ai-assistant__image-generate {width:100%;min-height:48px;box-sizing:border-box;white-space:normal;margin-top:12px;} .ai-assistant .ai-assistant__image-generate[hidden],.ai-assistant__image-generate-hint[hidden] {display:none;} .ai-assistant__proposal .ai-assistant__image-generate-hint {margin:12px 0 0;text-align:center;color:var(--text-secondary,#a6a8b1);font-size:12px;line-height:1.6;} .ai-assistant__image-model-label {display:flex;align-items:center;gap:10px;min-width:0;} .ai-assistant__image-model-icon {width:22px;height:22px;object-fit:contain;border-radius:4px;flex:none;} /* Filled secondary actions (option A); paid generation keeps its primary style. */ .ai-assistant{--assistant-action-bg:#f1f3f8;--assistant-action-border:#dbe0ea;--assistant-action-hover:#e7eaf2;--assistant-action-hover-border:#b6a3d5;} html[data-theme="dark"] .ai-assistant{--assistant-action-bg:#303239;--assistant-action-border:#50535e;--assistant-action-hover:#3e414b;--assistant-action-hover-border:#86729f;} .ai-assistant .ai-agent-plan__footer[data-state] .ai-assistant__review-action, .ai-assistant .ai-assistant__log :is(.ai-assistant__next-step > .ai-assistant__secondary, .ai-assistant__choices > .ai-assistant__secondary, .ai-assistant__plan-action > .ai-assistant__choice){box-sizing:border-box;min-height:36px;padding:7px 13px;border:1px solid var(--assistant-action-border);border-radius:9px;background:var(--assistant-action-bg);color:var(--ink,#172033);font-size:13px;font-weight:600;line-height:1.4;text-align:center;transition:background .15s,border-color .15s;} .ai-assistant .ai-agent-plan__footer[data-state] .ai-assistant__review-action:hover:not(:disabled), .ai-assistant .ai-assistant__log :is(.ai-assistant__apply:hover:not(:disabled), .ai-assistant__next-step > .ai-assistant__secondary:hover:not(:disabled), .ai-assistant__choices > .ai-assistant__secondary:hover:not(:disabled), .ai-assistant__plan-action > .ai-assistant__choice):hover:not(:disabled){background:var(--assistant-action-hover);border-color:var(--assistant-action-hover-border);} .ai-assistant .ai-agent-plan__footer[data-state] .ai-assistant__review-action{width:100%;min-height:44px;margin:0;padding:10px 15px;} @media(max-width:767px) and (pointer:coarse){.ai-assistant .ai-agent-plan__footer[data-state] .ai-assistant__review-action, .ai-assistant .ai-assistant__log :is(.ai-assistant__next-step > .ai-assistant__secondary, .ai-assistant__choices > .ai-assistant__secondary, .ai-assistant__plan-action > .ai-assistant__choice){min-height:44px;}} @media(prefers-reduced-motion:reduce){.ai-assistant .ai-agent-plan__footer[data-state] .ai-assistant__review-action, .ai-assistant .ai-assistant__log :is(.ai-assistant__next-step > .ai-assistant__secondary, .ai-assistant__choices > .ai-assistant__secondary, .ai-assistant__plan-action > .ai-assistant__choice){transition:none;}} /* Optional manual editing is quieter than the next production action. */ .ai-assistant .ai-assistant__log .ai-assistant__choices > .ai-assistant__manual-prompt-edit{background:transparent;border-color:var(--line,#444751);font-weight:500;} .ai-assistant .ai-assistant__log .ai-assistant__choices > .ai-assistant__manual-prompt-edit:hover:not(:disabled){background:var(--assistant-action-bg);border-color:var(--assistant-action-border);} @media(max-width:767px) and (pointer:coarse){.ai-assistant .ai-assistant__log .ai-assistant__choices > .ai-assistant__manual-prompt-edit{min-height:44px;}} .ai-agent-plan__reference-preview{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:zoom-in;} .ai-agent-plan__reference-actions{display:flex;align-items:center;position:relative;} .ai-agent-plan__reference-actions>.ai-agent-plan__setting{flex:1;min-width:0;} .ai-assistant .ai-agent-plan__reference-actions .ai-agent-plan__setting-trigger{padding:4px 6px;min-height:28px;border:0;border-radius:5px;font-size:12px;line-height:20px;gap:6px;width:100%;max-width:100%;box-sizing:border-box;background:transparent;box-shadow:none;text-align:left;} .ai-agent-plan__reference-actions .ai-agent-plan__setting-value{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;} .ai-agent-plan__reference-actions .ai-agent-plan__setting-arrow{opacity:0;} .ai-assistant .ai-agent-plan__reference-actions .ai-agent-plan__setting-trigger:is(:hover,:focus-visible,[aria-expanded="true"]){background:var(--assistant-action-hover);text-decoration:none;} .ai-agent-plan__reference-actions .ai-agent-plan__setting-trigger:is(:hover,:focus-visible,[aria-expanded="true"]) .ai-agent-plan__setting-arrow{opacity:1;} /* Keep reference captions close; reveal the chevron only on interaction. */ .ai-agent-plan__reference{gap:2px;} .ai-agent-plan__reference-preview img{display:block;} .ai-assistant__generation-live .ai-assistant__review-heading{display:flex;align-items:center;gap:8px;font-size:16px;} .ai-assistant__generation-spec{color:var(--muted);font-size:13px;margin:12px 0 8px;} /* The close button of a quote or an image card: top right, quiet until pointed at. */ .ai-assistant :is(.ai-assistant__proposal,.ai-assistant__generation-review):has(> .ai-assistant__card-close) { position:relative; } .ai-assistant :is(.ai-assistant__proposal,.ai-assistant__generation-review):has(> .ai-assistant__card-close) > :is(strong,.ai-assistant__review-heading):first-of-type { padding-right:30px; } .ai-assistant .ai-assistant__card-close { position:absolute; top:10px; right:10px; width:26px; height:26px; min-height:0; padding:0; border:0; border-radius:7px; background:transparent; color:var(--muted,#697586); font:inherit; font-size:18px; line-height:26px; text-align:center; cursor:pointer; } .ai-assistant .ai-assistant__card-close:hover { background:color-mix(in srgb,var(--ink,#172033) 8%,transparent); color:var(--ink,#172033); } .ai-assistant__generation-reason{margin:10px 0 0;padding:10px 12px;border:1px solid rgba(180,83,57,.35);border-radius:8px;background:rgba(180,83,57,.07);font-size:13px;line-height:1.55;overflow-wrap:anywhere;} .ai-assistant__generation-reason[hidden]{display:none;} .ai-assistant__generation-refund{margin:8px 0 0;padding:9px 12px;border:1px solid rgba(46,139,87,.35);border-radius:8px;background:rgba(46,139,87,.08);font-size:13px;line-height:1.55;overflow-wrap:anywhere;} .ai-assistant__generation-refund[hidden]{display:none;} .ai-assistant__generation-details{border-top:1px solid var(--border);padding-top:16px;margin-top:20px;} .ai-assistant__generation-details>summary{font-size:13px;color:var(--muted);cursor:pointer;} .ai-assistant__generation-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;} /* The live card is a flex column with its own gap: margins on top of it left a ~50px hole above the details. */ .ai-assistant__generation-live .ai-assistant__generation-actions{margin:0;} /* Waiting: the frame the video will fill, light drifting through it. The result replaces it in place. */ .ai-assistant__generation-stage[hidden]{display:none;} .ai-assistant__generation-frame{position:relative;width:100%;max-height:360px;border-radius:10px;overflow:hidden;background:#eef0fa;box-shadow:inset 0 0 0 1px rgba(23,32,51,.06);isolation:isolate;} .ai-assistant__generation-frame.is-portrait{width:auto;height:360px;max-width:100%;margin:0 auto;} .ai-assistant__generation-glow{position:absolute;inset:-25%;background:radial-gradient(circle at 30% 40%,#c4b5fd 0,transparent 34%),radial-gradient(circle at 72% 58%,#a5f3fc 0,transparent 30%),radial-gradient(circle at 48% 82%,#fbcfe8 0,transparent 28%);filter:blur(30px);opacity:.9;animation:ai-generation-drift 7s ease-in-out infinite alternate;} .ai-assistant__generation-scan{position:absolute;left:0;right:0;height:32%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.55),transparent);animation:ai-generation-scan 2.8s linear infinite;} .ai-assistant__generation-phrase{position:absolute;left:12px;bottom:10px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.72);color:#3b3363;font-size:12px;line-height:1.4;} /* Dark theme: the deeper frame, where the light reads as light. */ html[data-theme="dark"] .ai-assistant__generation-frame{background:#17152a;box-shadow:none;} html[data-theme="dark"] .ai-assistant__generation-glow{background:radial-gradient(circle at 30% 40%,#8b5cf6 0,transparent 34%),radial-gradient(circle at 72% 58%,#22d3ee 0,transparent 30%),radial-gradient(circle at 48% 82%,#f472b6 0,transparent 28%);opacity:.72;} html[data-theme="dark"] .ai-assistant__generation-scan{background:linear-gradient(to bottom,transparent,rgba(255,255,255,.16),transparent);} html[data-theme="dark"] .ai-assistant__generation-phrase{background:rgba(0,0,0,.38);color:#fff;} .ai-assistant__generation-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-top:8px;font-size:12px;color:var(--muted,#697586);font-variant-numeric:tabular-nums;} /* Slower than usual (GENERATION_SLOW_MS): the hint turns amber, the frame keeps moving. */ .ai-assistant__generation-hint.is-slow{color:#b86f14;} /* A conversation picked while busy: opens when the step is done. */ .ai-assistant__history-row[data-pending="true"]{outline:1px dashed var(--accent,#8b7cf6);outline-offset:-2px;} html[data-theme="dark"] .ai-assistant__generation-hint.is-slow{color:#e0a54a;} @keyframes ai-generation-drift{to{transform:translate(8%,-6%) scale(1.15) rotate(8deg);}} @keyframes ai-generation-scan{from{top:-32%;}to{top:100%;}} @media (prefers-reduced-motion: reduce){.ai-assistant__generation-glow,.ai-assistant__generation-scan{animation:none;}.ai-assistant__generation-scan{display:none;}} .ai-assistant__generation-live .ai-assistant__generation-details{margin-top:0;} .ai-assistant__generation-live .ai-assistant__review-cost[hidden]{display:none;} .ai-assistant__generation-actions[hidden]{display:none;} .ai-assistant__generation-result:empty{display:none;} .ai-assistant__generation-live .ai-assistant__completed-video{margin:16px 0;} .ai-assistant__action-message { color:var(--muted);font-size:13px;line-height:1.6;margin:16px 0;max-width:100%;overflow-wrap:anywhere; } .ai-assistant__action-message details { margin-top:4px; } .ai-assistant__action-message summary { cursor:pointer;width:fit-content; } .ai-assistant__action-details { white-space:pre-wrap;margin-top:8px;padding:10px 12px;border-left:2px solid var(--border); } /* Current plan A: flat sections, aligned settings and readable scene hierarchy. */ .ai-agent-plan__header{margin-bottom:22px;} .ai-agent-plan__header h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.35px;} .ai-agent-plan__model{margin:0 0 12px;} .ai-agent-plan__model .ai-agent-plan__setting{max-width:none;} .ai-agent-plan__chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 22px;} .ai-agent-plan__field{min-width:0;} .ai-agent-plan__field-label{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-bottom:4px;overflow-wrap:anywhere;} .ai-agent-plan__field>.ai-agent-plan__setting{width:100%;} .ai-assistant .ai-agent-plan__field .ai-agent-plan__setting-trigger{width:100%;min-height:34px;border-radius:7px;padding:6px 9px;gap:6px;} .ai-agent-plan__notes{border-top:1px solid var(--line);padding-top:18px;} .ai-agent-plan__notes>p{margin:0 0 14px;font-size:14px;line-height:1.7;} .ai-agent-plan__notes strong{font-size:12px;font-weight:500;margin-bottom:5px;} .ai-agent-plan__details{font-size:12px;margin:10px 0;} .ai-agent-plan__audio{margin-top:20px!important;padding-top:18px;font-size:13px!important;} .ai-shot-pics__pick.is-switch.is-off{border-style:dashed;opacity:.7} .ai-shot-pics__pick.is-switch.is-off strong{text-decoration:line-through} .ai-agent-plan__gap.is-unsupported .ai-agent-plan__gap-toggle{border-style:dashed;opacity:.75} .ai-agent-plan__gap.is-unsupported .ai-agent-plan__gap-words{color:var(--warning,#c98a1b)} .ai-shot-editor__line-at{display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--muted,#8a8a8a);white-space:nowrap} .ai-shot-editor__line-at input{width:46px;padding:4px 4px;text-align:right} .ai-agent-plan__audio-hint{margin:4px 0 0!important;font-size:12px!important;color:var(--muted,#8a8a8a);} /* No brief notes above it (long form): the audio line is the first thing in the notes block, whose own rule and top line already space it — the second line and gap made an empty band (2026-09-28, the user). */ .ai-agent-plan__notes > .ai-agent-plan__audio:first-child{margin-top:0!important;padding-top:0;border-top:0;} .ai-agent-plan__section{padding-top:20px;margin-top:22px;} .ai-agent-plan__section h3{font-size:14px;font-weight:600;margin-bottom:14px;} .ai-agent-plan__empty{font-size:12px;} .ai-agent-plan__scenes li{display:block;padding:14px 0;border-bottom:1px solid var(--line);} .ai-agent-plan__scenes li:first-child{padding-top:0;} .ai-agent-plan__scenes li:last-child{border-bottom:0;padding-bottom:0;} /* A clip box per generation segment (design A, 2026-09-28): a head band with the range and the references its scenes name against the model's capacity (a word, a small bar, n/max), the scenes inside. After the item rules above, which win on `li`. */ .ai-agent-plan__scenes li.ai-agent-plan__clip { display:block; margin:6px 0 0; padding:0; border:1px solid color-mix(in srgb,var(--ink,#172033) 14%,transparent); border-bottom-width:1px; border-radius:10px; overflow:hidden; background:color-mix(in srgb,var(--ink,#172033) 2%,transparent); } .ai-agent-plan__scenes li.ai-agent-plan__clip:first-child { margin-top:0; padding-top:0; } .ai-agent-plan__scenes li.ai-agent-plan__clip:last-child { border-bottom:1px solid color-mix(in srgb,var(--ink,#172033) 14%,transparent); padding-bottom:0; } .ai-agent-plan__clip-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 10px; background:color-mix(in srgb,var(--ink,#172033) 6%,transparent); border-bottom:1px solid color-mix(in srgb,var(--ink,#172033) 10%,transparent); font-size:11.5px; line-height:1.4; } .ai-agent-plan__clip-head strong { font-weight:600; white-space:nowrap; } /* The switch between scenes (2026-10-04, the user, B; one line, the user): one toggle centred on the line between two scenes. In a clip that line is the gap's alone (the scene above drops its border): a plain line where they cut — the toggle floats over it on hover or focus, so nothing moves — and a violet dotted line with the toggle where they go on. */ .ai-agent-plan__scenes li.ai-agent-plan__gap { position:relative; list-style:none; margin:0; padding:0 12px; border:0; min-height:12px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:11px; line-height:1.4; } .ai-agent-plan__clip-scenes > li:has(+ li.ai-agent-plan__gap) { border-bottom:0; padding-bottom:8px; } .ai-agent-plan__clip-scenes > li.ai-agent-plan__gap + li { padding-top:8px; } .ai-agent-plan__clip-scenes > li.ai-agent-plan__gap { padding:0; } .ai-agent-plan__clip-scenes > li.ai-agent-plan__gap::before, .ai-agent-plan__clip-scenes > li.ai-agent-plan__gap::after { content:''; flex:1 1 0; border-top:1px solid var(--line); } .ai-agent-plan__clip-scenes > li.ai-agent-plan__gap.is-editable:is(:hover,:focus-within):not(.is-on)::before, .ai-agent-plan__clip-scenes > li.ai-agent-plan__gap.is-editable:is(:hover,:focus-within):not(.is-on)::after { border-top-style:dashed; border-top-color:color-mix(in srgb,var(--ink,#172033) 32%,transparent); } .ai-agent-plan__scenes li.ai-agent-plan__gap.is-on { min-height:30px; } /* A (2026-10-04, the user: the violet kept, its saturation and light lowered — the first was too loud in dark mode; light mode too faint with the same values, so each theme has its own). */ .ai-assistant, .ai-shot-dialog { --link-dot:color-mix(in srgb,var(--chain-color,#7f77dd) 60%,transparent); --link-border:color-mix(in srgb,var(--chain-color,#7f77dd) 55%,transparent); --link-text:color-mix(in srgb,var(--chain-color,#7f77dd) 82%,var(--ink,#172033)); --link-track:color-mix(in srgb,var(--chain-color,#7f77dd) 78%,transparent); --link-off-border:color-mix(in srgb,var(--ink,#172033) 24%,transparent); --link-off-track:color-mix(in srgb,var(--ink,#172033) 26%,transparent); } [data-theme="dark"] .ai-assistant, [data-theme="dark"] .ai-shot-dialog { --link-dot:color-mix(in srgb,var(--chain-color,#7f77dd) 38%,transparent); --link-border:color-mix(in srgb,var(--chain-color,#7f77dd) 28%,transparent); --link-text:color-mix(in srgb,var(--chain-color,#7f77dd) 62%,var(--ink,#172033)); --link-track:color-mix(in srgb,var(--chain-color,#7f77dd) 48%,transparent); --link-off-border:color-mix(in srgb,var(--ink,#172033) 16%,transparent); --link-off-track:color-mix(in srgb,var(--ink,#172033) 18%,transparent); } .ai-agent-plan__scenes li.ai-agent-plan__gap.is-on::before, .ai-agent-plan__scenes li.ai-agent-plan__gap.is-on::after { content:''; flex:1 1 0; border-top:1px dotted var(--link-dot); } /* Between two clips: the same toggle, shown where the second is made from the first (the left bracket is gone, 2026-10-04 the user). */ .ai-agent-plan__gap:not(.is-on) .ai-agent-plan__gap-toggle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4; background:var(--control-surface,#fff); } .ai-agent-plan__gap-toggle { display:inline-flex; align-items:center; gap:7px; padding:3px 10px 3px 4px; border:1px solid var(--link-off-border); border-radius:999px; background:var(--control-surface,#fff); color:var(--muted,#697586); font-size:11px; line-height:1.2; } .ai-agent-plan__gap:not(.is-on) .ai-agent-plan__gap-toggle { display:none; } .ai-agent-plan__gap.is-editable:is(:hover,:focus-within) .ai-agent-plan__gap-toggle { display:inline-flex; } /* Between two clips: the clip after the gap drops its own top margin, so the toggle sits halfway between the two boxes. */ .ai-agent-plan__scenes li.ai-agent-plan__gap.is-edge + li.ai-agent-plan__clip { margin-top:0; } .ai-agent-plan__scenes li.ai-agent-plan__gap.is-edge:not(.is-on) { min-height:6px; } .ai-agent-plan__gap.is-saving .ai-agent-plan__gap-toggle { opacity:.6; cursor:progress; } .ai-assistant button.ai-agent-plan__gap-toggle { min-height:24px; cursor:pointer; } .ai-agent-plan__gap-toggle.is-on { border-color:var(--link-border); color:var(--link-text); } .ai-agent-plan__gap-knob { position:relative; flex:none; width:26px; height:14px; border-radius:999px; background:var(--link-off-track); } .ai-agent-plan__gap-knob::after { content:''; position:absolute; left:2px; top:2px; width:10px; height:10px; border-radius:50%; background:color-mix(in srgb,#fff 88%,var(--ink,#172033)); transition:transform 120ms ease; } .ai-agent-plan__gap-toggle.is-on .ai-agent-plan__gap-knob { background:var(--link-track); } .ai-agent-plan__gap-toggle.is-on .ai-agent-plan__gap-knob::after { transform:translateX(12px); } /* Wrapped (2026-10-13: a long tooltip ran past the plan panel on one line). */ .ai-agent-plan__gap-toggle[data-tooltip]::before { content:attr(data-tooltip); position:absolute; z-index:12; bottom:calc(100% + 8px); left:50%; width:max-content; max-width:min(280px,calc(100vw - 32px)); padding:6px 9px; border:1px solid color-mix(in srgb,var(--line-strong,#4b5260) 82%,transparent); border-radius:7px; background:#20242d; box-shadow:0 7px 18px rgba(0,0,0,.24); color:#fff; font-size:12px; font-weight:650; line-height:1.35; white-space:normal; text-align:left; overflow-wrap:anywhere; pointer-events:none; opacity:0; visibility:hidden; transform:translate(-50%,4px); transition:opacity 120ms ease,transform 120ms ease,visibility 120ms ease; } .ai-agent-plan__gap-toggle[data-tooltip]:hover::before { opacity:1; visibility:visible; transform:translate(-50%,0); } .ai-agent-plan__gap-toggle { position:relative; } /* The editor's "from the scene before" toggle on top (2026-10-04, the user, B). */ .ai-shot-editor__link { display:flex; align-items:center; gap:10px; margin:0 0 8px; } .ai-shot-editor__link-label { font-size:12px; color:var(--muted,#697586); min-width:84px; } .ai-assistant .ai-shot-editor__link-toggle, .ai-shot-dialog .ai-shot-editor__link-toggle { display:inline-flex; align-items:center; gap:8px; min-height:28px; padding:3px 12px 3px 5px; border:1px solid var(--link-off-border); border-radius:999px; background:none; font-size:12px; color:var(--muted,#697586); cursor:pointer; } .ai-assistant .ai-shot-editor__link-toggle.is-on, .ai-shot-dialog .ai-shot-editor__link-toggle.is-on { border-color:var(--link-border); color:var(--link-text); } .ai-shot-editor__link-knob { position:relative; flex:none; width:28px; height:16px; border-radius:999px; background:var(--link-off-track); } .ai-shot-editor__link-knob::after { content:''; position:absolute; left:2px; top:2px; width:12px; height:12px; border-radius:50%; background:color-mix(in srgb,#fff 88%,var(--ink,#172033)); transition:transform 120ms ease; } .ai-shot-editor__link-toggle.is-on .ai-shot-editor__link-knob { background:var(--link-track); } .ai-shot-editor__link-toggle.is-on .ai-shot-editor__link-knob::after { transform:translateX(12px); } .ai-shot-editor__link-note { display:flex; flex-direction:column; gap:4px; margin:0 0 10px; padding:8px 10px; border-radius:8px; background:color-mix(in srgb,var(--chain-color,#7f77dd) 9%,transparent); font-size:12px; line-height:1.5; color:var(--muted,#697586); } .ai-shot-editor__link-clip { color:var(--ink,#172033); } .ai-agent-plan__cut-free-mark { width:10px; height:0; border-top:2px dotted var(--chain-color,#7f77dd); } .ai-agent-plan__clip-head .ai-agent-plan__segment-gauge { margin-left:auto; } .ai-assistant .ai-agent-plan__clip-manual { margin-left:4px; min-height:20px; padding:1px 7px; font-size:10.5px; white-space:nowrap; display:inline-flex; align-items:center; text-decoration:none; } .ai-assistant .ai-agent-plan__clip-manual.is-disabled { opacity:.45; pointer-events:none; } /* The references the clip's scenes name, as the thumbnails the scene texts show (the tokens are decorated). */ .ai-agent-plan__clip-refs { display:inline-flex; align-items:center; gap:2px; min-width:0; overflow:hidden; white-space:nowrap; } .ai-assistant .ai-agent-plan__clip-refs .ai-assistant__ref-thumb { width:18px; height:18px; margin:0; vertical-align:middle; } .ai-agent-plan__clip-ref { display:inline-flex; align-items:center; font-size:10.5px; color:var(--muted,#697586); } .ai-agent-plan__clip .ai-agent-plan__clip-scenes { padding:8px 10px 10px; } .ai-agent-plan__clip .ai-agent-plan__clip-scenes li { padding:9px 0; } .ai-agent-plan__clip .ai-agent-plan__clip-scenes li:first-child { padding-top:0; } .ai-agent-plan__clip .ai-agent-plan__clip-scenes li:last-child { padding-bottom:0; } .ai-agent-plan__scenes li.ai-agent-plan__clip.is-over { border-color:color-mix(in srgb,#d14343 60%,transparent); } .ai-agent-plan__clip-over { margin:0; padding:6px 10px 0; font-size:11.5px; line-height:1.5; color:#d14343; } .ai-agent-plan__segment-gauge { display:flex; align-items:center; gap:10px; min-width:0; color:var(--muted,#697586); font-variant-numeric:tabular-nums; white-space:nowrap; } .ai-agent-plan__segment-quota { display:inline-flex; align-items:center; gap:5px; } .ai-agent-plan__segment-bar { display:inline-block; width:40px; height:4px; border-radius:2px; background:color-mix(in srgb,var(--ink,#172033) 12%,transparent); overflow:hidden; } .ai-agent-plan__segment-bar b { display:block; height:100%; background:color-mix(in srgb,var(--ink,#172033) 45%,transparent); } .ai-agent-plan__segment-quota.is-full .ai-agent-plan__segment-value { color:var(--ink,#172033); } .ai-agent-plan__segment-quota.is-over { color:#d14343; font-weight:600; } .ai-agent-plan__segment-quota.is-over .ai-agent-plan__segment-bar b { background:#d14343; } .ai-agent-plan__scene summary{display:flex;align-items:baseline;gap:9px;list-style:none;cursor:pointer;min-height:24px;} .ai-agent-plan__scene summary::-webkit-details-marker{display:none;} .ai-agent-plan__scene summary::after{content:'⌄';font-size:12px;color:var(--muted);flex:none;} .ai-agent-plan__scene[open] summary::after{content:'⌃';} .ai-agent-plan__number{display:inline;border:0;border-radius:0;width:auto;height:auto;font-size:11px;color:var(--accent,#8666ed);font-variant-numeric:tabular-nums;flex:none;} .ai-agent-plan__scene-title{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.6;overflow-wrap:anywhere;} .ai-agent-plan__scenes time{font-size:11px;padding:0;flex:none;font-variant-numeric:tabular-nums;} .ai-agent-plan__scenes p{display:block;overflow:visible;-webkit-line-clamp:unset;margin:4px 0 0 24px;font-size:13px;line-height:1.7;} .ai-agent-plan__scenes p:empty{display:none;} .ai-agent-plan__prompt{font-size:12px;margin-top:20px;} .ai-agent-plan__footer{padding-top:16px;} .ai-agent-plan__progress-card,html[data-theme="dark"] .ai-agent-plan__progress-card{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:16px 0 0;} .ai-agent-plan__footer[data-state="review"] .ai-agent-plan__progress>strong{font-size:13px;margin-bottom:12px;} .ai-agent-plan__footer[data-state="review"] .ai-agent-plan__progress p{display:none;} .ai-assistant .ai-agent-plan__footer[data-state] .ai-assistant__review-action{font-size:13px;font-weight:500;border-color:transparent;background:color-mix(in srgb,var(--accent,#8666ed) 12%,var(--control-surface));color:var(--text);border-radius:8px;} .ai-agent-plan__progress-card>.ai-agent-plan__manual{font-size:12px;color:var(--muted);margin-top:8px;padding:6px 0;} .ai-agent-plan__scene summary:focus-visible{outline:2px solid var(--accent,#8666ed);outline-offset:3px;border-radius:3px;} /* A 44px touch target without a taller row: the summary's hit area grows past its box (a min-height left a folded row with 20px of blank under its title, 2026-09-27). */ @media(pointer:coarse){.ai-agent-plan__scene summary{padding-block:10px;margin-block:-10px;}} /* Unconfigured status occupies its own row, not one setting column. */ .ai-agent-plan__chips > span{grid-column:1 / -1;justify-self:start;white-space:nowrap;} .ai-assistant__photo-source-menu{position:fixed;inset:auto;margin:0;max-width:calc(100vw - 16px);overflow-y:auto;} /* Disclosure labels own their click target; trailing row whitespace is inert. */ .ai-assistant summary{box-sizing:border-box;width:fit-content;max-width:100%;} /* Adjacent manual-edit and draft actions share a row when space permits. */ .ai-assistant__log > .ai-assistant__choices:has(> .ai-assistant__manual-prompt-edit):has(+ .ai-assistant__plan-action), .ai-assistant__log > .ai-assistant__choices:has(> .ai-assistant__manual-prompt-edit) + .ai-assistant__plan-action{display:inline-flex;vertical-align:middle;max-width:100%;margin-block:12px 20px;} .ai-assistant__log > .ai-assistant__choices:has(> .ai-assistant__manual-prompt-edit):has(+ .ai-assistant__plan-action){margin-inline-end:8px;} .ai-assistant__sent-attachments{max-height:none;flex-wrap:wrap;overflow:visible;align-items:flex-start;} .ai-assistant__sent-file{margin:0;max-width:220px;min-width:0;} .ai-assistant__sent-file img{display:block;width:88px;height:88px;object-fit:cover;border-radius:9px;cursor:zoom-in;} .ai-assistant__sent-file video{display:block;width:160px;height:100px;object-fit:contain;background:#111;border-radius:9px;} .ai-assistant__sent-file audio{display:block;width:220px;max-width:100%;height:40px;} .ai-assistant__sent-file figcaption{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted);margin-top:5px;} /* Conversation actions share metrics; emphasis is conveyed by surface and border. */ .ai-assistant .ai-assistant__log > button.ai-assistant__secondary{box-sizing:border-box;min-height:36px;padding:7px 13px;font-size:13px;line-height:1.4;} @media(max-width:767px) and (pointer:coarse){.ai-assistant .ai-assistant__log > button.ai-assistant__secondary{min-height:44px;}} .ai-agent-plan__reference{position:relative} .ai-agent-plan__reference-actions{position:static;display:flex;align-items:center;gap:4px} .ai-agent-plan__reference-frame{position:relative;} .ai-agent-plan__reference-menu{position:absolute;inset-block-start:6px;inset-inline-end:6px;z-index:20;opacity:0;pointer-events:none} .ai-agent-plan__reference-frame:hover .ai-agent-plan__reference-menu,.ai-agent-plan__reference-menu:has(>button:focus-visible),.ai-agent-plan__reference-menu[open]{opacity:1;pointer-events:auto} .ai-assistant .ai-agent-plan__reference-menu>button{display:flex;align-items:center;justify-content:center;list-style:none;cursor:pointer;box-sizing:border-box;width:26px;height:20.5px;min-height:0;padding:2px 6px;border:0;border-radius:5px;background:rgba(0,0,0,.72);color:#fff;font-family:inherit;font-size:16px;line-height:16.5px;font-weight:600;box-shadow:none} .ai-agent-plan__reference-menu>button:focus-visible{outline:2px solid #b7a0ff;outline-offset:2px} .ai-agent-plan__reference-menu>button::-webkit-details-marker{display:none} .ai-agent-plan__reference-menu-items{position:fixed;inset:auto;margin:0;box-sizing:border-box;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto} .ai-assistant__reference-picker{display:flex;align-items:center;} .ai-assistant__reference-trigger{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;min-height:36px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted,#8d9099);font-family:Arial,sans-serif;font-size:18px;font-weight:400;line-height:1;vertical-align:middle;cursor:pointer;} .ai-assistant__reference-trigger:hover:not(:disabled),.ai-assistant__reference-trigger[aria-expanded="true"]{background:var(--control-surface,#f3f2f7);color:var(--ink,#172033);} .ai-assistant__reference-trigger:focus-visible{outline:2px solid #a38aef;outline-offset:2px;} .ai-assistant__reference-trigger:disabled{opacity:.4;cursor:default;} .ai-assistant__reference-list{position:fixed;inset:auto;margin:0;padding:6px;box-sizing:border-box;width:220px;max-width:calc(100vw - 16px);max-height:min(320px,calc(100vh - 16px));overflow:auto;border:1px solid var(--line,#8884);border-radius:12px;background:var(--surface,#25262b);color:var(--ink,#eee);box-shadow:0 12px 32px #0004;} .ai-assistant__reference-list button{display:flex;align-items:center;gap:10px;width:100%;padding:6px;border:0;border-radius:7px;background:transparent;color:inherit;font:inherit;font-size:13px;text-align:left;cursor:pointer;} .ai-assistant__reference-list button:hover,.ai-assistant__reference-list button:focus-visible{background:var(--line,#8883);} .ai-assistant__reference-list img,.ai-assistant__reference-kind{width:40px;height:40px;border-radius:6px;object-fit:cover;display:grid;place-items:center;background:#8882;} .ai-assistant__reference-list p{margin:8px;font-size:13px;} /* Sent references share the multi-reference uploader's square card treatment. */ .ai-assistant__sent-file{width:128px;max-width:128px;} .ai-assistant__sent-card{position:relative;display:block;width:128px;height:128px;padding:0;overflow:hidden;border:1px solid var(--border,#36383f);border-radius:12px;background:var(--panel,#242529);cursor:pointer;color:var(--ink);} .ai-assistant__sent-card:focus-visible{outline:2px solid var(--accent,#8c71ff);outline-offset:2px;} .ai-assistant__sent-card img,.ai-assistant__sent-card video{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;pointer-events:none;} .ai-assistant__sent-card audio{display:none;} .ai-assistant__sent-badge,.ai-assistant__sent-duration{position:absolute;z-index:1;bottom:6px;font-size:11px;font-weight:600;line-height:18px;color:#fff;pointer-events:none;} .ai-assistant__sent-badge{left:6px;padding:0 6px;border-radius:9px;background:rgba(15,18,26,.8);} .ai-assistant__sent-duration{right:7px;text-shadow:0 1px 3px #000;} .ai-assistant__attachment[data-kind='audio'],.ai-assistant__attachment[data-kind='video']{width:88px;flex-basis:88px;} .ai-assistant__composer-media{position:relative;display:block;width:88px;height:88px;padding:0;border:1px solid var(--border,#36383f);border-radius:10px;overflow:hidden;background:var(--panel,#242529);cursor:pointer;} .ai-assistant__composer-media .ai-assistant__sent-badge,.ai-assistant__composer-media .ai-assistant__sent-duration{font-size:9px;bottom:3px;} .ai-assistant__composer-media .ai-assistant__sent-badge{left:3px;padding:0 3px;} .ai-assistant__composer-media .ai-assistant__sent-duration{right:3px;} .ai-assistant__composer-media .ai-assistant__media-cover,.ai-agent-plan__thumbnail .ai-assistant__media-cover,.ai-assistant__sent-card .ai-assistant__media-cover{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;pointer-events:none;} .ai-assistant__media-cover[hidden]{display:none!important;} .ai-assistant__media-unavailable{display:grid;width:100%;height:100%;place-items:center;color:var(--muted);} .ai-agent-plan__thumbnail{position:relative;overflow:hidden;border-radius:10px;} .ai-assistant__reference-list-thumb{display:block;flex:0 0 40px;width:40px;height:40px;overflow:hidden;border-radius:6px;background:var(--panel,#242529);} .ai-assistant__reference-list-thumb .ai-assistant__media-cover{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;} .ai-assistant__sent-duration:not(:empty){padding:0 5px;border-radius:5px;background:rgba(15,18,26,.88);color:#fff;font-variant-numeric:tabular-nums;text-shadow:none;} .ai-assistant .ai-agent-plan__reference-menu>button{background:#252830;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.1);} button.ai-assistant__review-file-visual{width:100%;padding:0;border:0;cursor:pointer;color:inherit;} .ai-assistant__review-file-visual .ai-assistant__media-cover{display:block;width:100%;height:100%;object-fit:cover;} .ai-assistant__review-file-visual .ai-assistant__media-cover[hidden]{display:none;} /* Composer C: keep the conversation continuous beneath an opaque input surface. */ .ai-assistant--standalone > .ai-assistant__content{position:relative;isolation:isolate;} .ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))) > .ai-assistant__form{position:absolute;z-index:3;bottom:18px;left:var(--assistant-inline-space);margin:0;width:calc(100% - 2 * var(--assistant-inline-space) - var(--assistant-scrollbar-width,0px));box-shadow:0 5px 18px #00000012;} .ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))) > .ai-assistant__log{padding-bottom:calc(var(--assistant-composer-height,120px) + 70px);scroll-padding-bottom:calc(var(--assistant-composer-height,120px) + 70px);} /* The clip board sits under the same floating composer: the last row of cards must clear it (2026-09-28, the user). */ .ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))) > .ai-assistant__clip-board{padding-bottom:calc(var(--assistant-composer-height,120px) + 70px);scroll-padding-bottom:calc(var(--assistant-composer-height,120px) + 70px);} .ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))) > .ai-assistant__clip-board::-webkit-scrollbar-track{margin-bottom:calc(var(--assistant-composer-height,120px) + 18px);} .ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden])))::after{content:"";position:absolute;z-index:2;pointer-events:none;inset:auto max(12px,var(--assistant-scrollbar-width,0px)) 0 0;height:calc(var(--assistant-composer-height,120px) + 82px);background:linear-gradient(to bottom,transparent 0,color-mix(in srgb,var(--panel-bg,#fff) 65%,transparent) 82px,color-mix(in srgb,var(--panel-bg,#fff) 65%,transparent) 100%);} @media(max-width:767px){.ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))) > .ai-assistant__form{bottom:12px;}} .ai-agent-plan__duration-models{margin:auto;width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;color:var(--ink);padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--panel-bg,#fff);} .ai-agent-plan__duration-models>p{font-size:12px;color:var(--muted);margin:8px 0;} .ai-agent-plan__duration-model{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer;} .ai-agent-plan__duration-model input{margin-top:5px;flex-shrink:0;} .ai-agent-plan__duration-model span{min-width:0;overflow-wrap:anywhere;} .ai-agent-plan__duration-model small{display:block;color:var(--muted);margin-top:4px;} .ai-agent-plan__duration-model:has(input:disabled){opacity:.65;cursor:default;} .ai-agent-plan__duration-models>button{margin:12px 6px 0 0;} [data-theme="dark"] .ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden])))::after{background:linear-gradient(to bottom,transparent 0,var(--panel-bg,#1b1c20) 66px,var(--panel-bg,#1b1c20) 100%);} /* Hide scrolled content below the rounded composer without covering the scrollbar. */ .ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden])))::before{content:"";position:absolute;z-index:2;pointer-events:none;inset:auto max(12px,var(--assistant-scrollbar-width,0px)) 0 0;height:38px;background:var(--panel-bg,#fff);} @media(max-width:767px){.ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden])))::before{height:32px;}} .ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))) > .ai-assistant__log::-webkit-scrollbar-track{margin-bottom:calc(var(--assistant-composer-height,120px) + 18px);} @media(max-width:767px){.ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))) > .ai-assistant__log::-webkit-scrollbar-track{margin-bottom:calc(var(--assistant-composer-height,120px) + 12px);}} .ai-agent-plan__duration-model-name{display:flex;align-items:center;gap:10px;} .ai-agent-plan__duration-header{display:flex;align-items:center;justify-content:space-between;gap:16px;} .ai-agent-plan__duration-close{font-size:24px;line-height:1;flex-shrink:0;} .ai-agent-plan__duration-footer{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:20px;} .ai-assistant .ai-agent-plan__duration-footer>button{min-height:38px;margin:0;padding:8px 16px;border-radius:8px;font:inherit;line-height:20px;} .ai-assistant .ai-agent-plan__duration-footer>.ai-agent-plan__duration-apply{background:var(--primary-cta);border-color:var(--primary-cta);color:var(--primary-cta-text);} .ai-assistant .ai-agent-plan__duration-footer>.ai-agent-plan__duration-apply:hover:not(:disabled){background:var(--primary-cta-hover);border-color:var(--primary-cta-hover);} /* Standalone Agent owns its height, including the compact desktop breakpoint. */ /* The column already ends where the page's bottom padding starts; a guessed viewport height left a band of empty space under the composer, so the panel simply fills the column. */ .ai-agent-page .ai-tool-workspace > .ai-result-view-column > .ai-assistant--standalone {flex:1 1 auto;height:auto;min-height:520px;max-height:none;} @media(max-width:800px){.ai-agent-page .ai-tool-workspace > .ai-result-view-column > .ai-assistant--standalone{height:auto;min-height:0;}} /* styles-ai.css only stretches the tool workspace to the viewport from 1121px, because narrower tool pages stack settings above results. The director has no settings panel, so between 801 and 1120px the panel collapsed to its 520px minimum and left the rest of the screen empty. Keep the column filling the shell there too, and use the wide layout's 16px bottom padding instead of the 54-78px the stacked tool pages keep below their results. */ /* 801~1120px(2026-09-30, 사용자: 클립 화면 스크롤이 사라짐): 넓은 화면(styles-ai 1121px~)처럼 셸을 화면 높이에 묶어야 클립·대화 칸이 제 안에서 스크롤된다. */ @media(min-width:801px) and (max-width:1120px){.dashboard-page.ai-agent-page .dashboard-shell.ai-tool-shell{display:flex;flex-direction:column;padding-bottom:16px;height:100dvh;overflow:hidden;}.ai-agent-page .dashboard-shell.ai-tool-shell .ai-tool-workspace{display:flex !important;flex-direction:column;flex:1 1 auto;min-height:0;}.ai-agent-page .ai-tool-workspace > .ai-result-view-column{flex:1 1 auto;min-height:0;}} /* Composer menus share typography and theme surfaces; reference previews retain their size. */ :is(.ai-assistant,.ai-shot-dialog) :is(.ai-assistant__attach-menu,.ai-assistant__reference-list,.ai-assistant__mode-menu){box-sizing:border-box;padding:6px;border:1px solid var(--line,#e4e5eb);border-radius:12px;background:var(--panel-bg,#fff);color:var(--ink,#172033);font-family:inherit;font-size:13px;font-weight:500;line-height:1.5;box-shadow:0 8px 24px #0003;} :is(.ai-assistant,.ai-shot-dialog) :is(.ai-assistant__attach-menu-item,.ai-assistant__reference-list>button,.ai-assistant__mode-option){padding:8px 10px;border-radius:8px;color:var(--ink,#172033);font-family:inherit;font-size:13px;font-weight:500;line-height:1.5;} .ai-assistant .ai-assistant__mode-option>strong{font:inherit;color:inherit;} :is(.ai-assistant,.ai-shot-dialog) :is(.ai-assistant__attach-menu-item,.ai-assistant__reference-list>button,.ai-assistant__mode-option):is(:hover,:focus-visible){background:color-mix(in srgb,var(--accent,#8666ed) 12%,transparent);} :is(.ai-assistant,.ai-shot-dialog) :is(.ai-assistant__attach-menu-item,.ai-assistant__reference-list>button,.ai-assistant__mode-option):focus-visible{outline:2px solid var(--accent,#8666ed);outline-offset:-2px;} .ai-assistant :is(.ai-assistant__reference-list>p,.ai-assistant__mode-note){font-family:inherit;font-size:12px;font-weight:400;line-height:1.5;color:var(--muted,#697586);} /* Reference captions share the role selector's typography. */ .ai-assistant .ai-agent-plan__reference-actions .ai-agent-plan__setting-trigger, .ai-assistant .ai-agent-plan__character{font-family:inherit;font-size:12px;font-weight:400;line-height:20px;} .ai-assistant .ai-agent-plan__character{display:block;box-sizing:border-box;padding:4px 6px;color:var(--ink,#172033);overflow-wrap:anywhere;} @media(max-width:600px){.ai-assistant__scene-table{min-width:680px;}.ai-assistant__scene-table th,.ai-assistant__scene-table td{overflow-wrap:normal;word-break:normal;}} /* Inline reference thumbnails before [Image N] tokens, and their hover preview. */ :is(.ai-assistant,dialog.ai-assistant__board-reply) .ai-assistant__ref-thumb { display:inline-block; width:22px; height:22px; margin:0 4px 0 0; vertical-align:-6px; border-radius:5px; object-fit:cover; border:1px solid var(--line,#8884); background:#8881; cursor:zoom-in; } .ai-assistant__ref-hover { position:fixed; z-index:60; padding:4px; border:1px solid var(--line,#8884); border-radius:12px; background:var(--panel-bg,#1b1c20); box-shadow:0 12px 32px #0006; pointer-events:none; } .ai-assistant__ref-hover img, .ai-assistant__ref-hover video { display:block; max-width:min(420px,36vw); max-height:48vh; border-radius:8px; } .ai-assistant__ref-hover [hidden] { display:none; } .ai-assistant__asset-decision .ai-assistant__choice[aria-pressed="true"] { border-color:#9b87ff; background:#8b75ff20; } /* Plan panel skeleton while a conversation loads. */ .ai-agent-plan__skeleton { pointer-events:none; } /* The highlight layer is fixed to the viewport, so every bone shows the same band at the same screen position and the sweep reads as one motion across the panel; moving the position by one full tile loops seamlessly. */ .ai-agent-plan__bone { --bone-base:rgba(23,32,51,.09); --bone-shine:rgba(255,255,255,.75); display:block; border-radius:8px; background-color:var(--bone-base); background-image:linear-gradient(100deg,transparent 0%,transparent 40%,var(--bone-shine) 50%,transparent 60%,transparent 100%); background-size:200% 100%; background-repeat:repeat-x; background-attachment:fixed; animation:agent-plan-band 2.4s linear infinite; } @keyframes agent-plan-band { from { background-position:0% 0; } to { background-position:200% 0; } } [data-theme="dark"] .ai-agent-plan__bone { --bone-base:rgba(255,255,255,.09); --bone-shine:rgba(255,255,255,.14); } .ai-agent-plan__bone--chip { height:32px; border-radius:22px; } .ai-agent-plan__bone--line { height:12px; margin:11px 0; } .ai-agent-plan__bone--title { height:14px; margin:0 0 14px; } .ai-agent-plan__bone--tile { aspect-ratio:1; border-radius:9px; } /* Bones shaped like the current plan: control and field boxes, label lines, table rows and scene rows. */ .ai-agent-plan__bone--control { height:36px; border-radius:10px; } .ai-agent-plan__bone--label { height:9px; margin:0 0 7px; border-radius:5px; } .ai-agent-plan__bone--field { height:34px; border-radius:7px; } .ai-agent-plan__bone--button { height:26px; margin-left:auto; border-radius:8px; } .ai-agent-plan__bone--bar { height:4px; border-radius:2px; } .ai-agent-plan__bone--thumb { flex:none; width:38px; height:38px; border-radius:8px; } .ai-agent-plan__bone--name { flex:none; height:12px; } .ai-agent-plan__bone--index { width:20px; height:20px; border-radius:50%; } .ai-agent-plan__bone--time { height:10px; margin-top:5px; } .ai-agent-plan__skeleton .ai-agent-plan__reference-head .ai-agent-plan__bone--title { margin:0; } .ai-agent-plan__skel-row { margin:14px 0; } .ai-agent-plan__skel-row > .ai-agent-plan__bone--line { margin:0; } .ai-agent-plan__skel-table { border:1px solid var(--line,#e3e4e9); border-radius:10px; } .ai-agent-plan__skel-reference { display:flex; align-items:center; gap:12px; padding:7px 8px; } .ai-agent-plan__skel-reference + .ai-agent-plan__skel-reference { border-top:1px solid color-mix(in srgb,var(--ink,#172033) 10%,transparent); } .ai-agent-plan__skel-reference > .ai-agent-plan__bone--line { margin:0; } .ai-agent-plan__skel-scene { display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:9px; padding:10px 0; } .ai-agent-plan__skel-scene .ai-agent-plan__bone--line { margin:4px 0 10px; } @media (prefers-reduced-motion:reduce) { .ai-agent-plan__bone { animation:none; background-image:none; } } /* Restored video: the frame reserves the box before the player has metadata, so the log does not jump. */ .ai-assistant__completed-video-frame {display:flex;align-items:center;justify-content:center;width:100%;max-width:640px;max-height:440px;aspect-ratio:var(--video-ar,16/9);overflow:hidden;border-radius:12px;background:#111;} .ai-assistant__completed-video-frame p {margin:0;padding:12px 16px;text-align:center;color:#c8cad3;} .ai-assistant__completed-video-frame video {height:100%;max-width:none;border-radius:0;} /* The plan panel joins with the first turn: a fresh conversation keeps the chat at full width. */ .ai-assistant--standalone { transition:grid-template-columns .45s cubic-bezier(.2,.7,.2,1); } .ai-assistant--standalone.ai-assistant--plan-hidden { grid-template-columns:minmax(0,1fr) 0 0; } .ai-assistant--standalone.ai-assistant--plan-hidden > .ai-agent-splitter,.ai-agent-plan[hidden] { display:none !important; } @media(min-width:801px){ .ai-assistant--standalone.ai-assistant--plan-hidden > .ai-assistant__content { margin-right:0; } } /* Sections arrive as the conversation settles them; empty ones are never drawn. While a reply is on its way, writing bones stand in for the next section (the same band as the loading skeleton). */ .ai-agent-plan__empty--idle { margin:18px 0 0; } .ai-agent-plan__pending { display:grid; gap:0; pointer-events:none; } .ai-agent-plan__pending--empty { margin-top:18px; } .ai-agent-plan__pending--section { border-top:1px solid var(--line); padding-top:20px; margin-top:22px; } .ai-agent-plan__pending > .ai-agent-plan__bone--line { margin:9px 0; } .ai-agent-plan__section--in { animation:agent-plan-in .45s cubic-bezier(.2,.7,.2,1) both; } .ai-agent-plan__section--in .ai-agent-plan__scenes li { animation:agent-plan-in .4s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * 80ms); } @keyframes agent-plan-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { .ai-assistant--standalone { transition:none; } .ai-agent-plan__section--in,.ai-agent-plan__section--in .ai-agent-plan__scenes li { animation:none; } } /* Generation confirm card, compact layout: summary line, thumbnail strip, one-line quality note with model chips. */ .ai-assistant .ai-assistant__generation-review:not(.ai-assistant__generation-live) { gap:12px; } .ai-assistant__generation-review p.ai-assistant__review-summary { margin:-4px 0 0; font-size:13px; line-height:1.6; color:var(--ink,#172033); } .ai-assistant__generation-review .ai-assistant__review-meta { margin:-8px 0 0; font-size:12px; line-height:1.5; color:var(--muted,#697586); } .ai-assistant__generation-review:not(.ai-assistant__generation-live) .ai-assistant__review-cost:not(.is-short) { display:none; } .ai-assistant__generation-review .ai-assistant__review-cost.is-short { padding-top:0; border-top:0; } /* Pressed: the line tells what is happening (checking the price, uploading, a refusal). */ /* (2026-10-01, the user: a minute with no sign) the same weight as the rule that hides the cost line, after it — the shorter selector lost and the line stayed hidden. */ .ai-assistant__generation-review:not(.ai-assistant__generation-live) .ai-assistant__review-cost.is-working { display:block; padding-top:0; border-top:0; } .ai-assistant__generation-review .ai-assistant__review-file-grid { gap:8px; margin-top:0; } .ai-assistant__generation-review .ai-assistant__review-file, .ai-assistant__generation-review .ai-assistant__review-file[data-kind='audio'] { width:60px; padding:0; border:0; border-radius:0; background:transparent; } /* Audio shares the image tiles' square: a wider waveform tile broke the row's rhythm. */ .ai-assistant__generation-review .ai-assistant__review-file-visual { height:56px; border:1px solid var(--line,#e3e4e9); border-radius:8px; background:var(--control-surface,#f1f3f7); } .ai-assistant__generation-review .ai-assistant__review-file-visual img, .ai-assistant__generation-review .ai-assistant__review-file-visual video { object-fit:cover; } .ai-assistant .ai-assistant__generation-review .ai-assistant__review-file-visual .ai-assistant__ref-thumb { width:100%; height:100%; margin:0; border:0; border-radius:0; vertical-align:top; object-fit:cover; } .ai-assistant__generation-review .ai-assistant__review-file-badge { top:3px; left:3px; padding:1px 4px; font-size:10px; } .ai-assistant__generation-review .ai-assistant__review-file figcaption { margin-top:4px; text-align:center; } .ai-assistant__quality-notice { display:grid; gap:6px; margin:0; padding:8px 10px; border:1px solid rgba(239,159,39,.35); border-radius:8px; background:rgba(239,159,39,.1); } .ai-assistant__quality-notice-text { margin:0; font-size:12px; line-height:1.55; color:#854f0b; } [data-theme="dark"] .ai-assistant__quality-notice-text { color:#fac775; } .ai-assistant__quality-notice-models { display:flex; flex-wrap:wrap; gap:6px; } .ai-assistant .ai-assistant__quality-notice-model { display:inline-flex; align-items:center; gap:6px; min-height:0; padding:3px 10px 3px 5px; border-radius:999px; font-size:12px; line-height:1.4; text-align:left; } .ai-assistant__quality-notice-model:not(:has(.ai-assistant__quality-notice-icon)) { padding-left:10px; } .ai-assistant__quality-notice-icon { width:16px; height:16px; border-radius:4px; object-fit:contain; } .ai-assistant__quality-notice-model strong { font-size:12px; font-weight:600; } .ai-assistant__quality-notice-model small { font-size:11px; color:var(--muted,#697586); } /* Restored-proposal recovery notice: message, then its actions stacked (was squeezed into one flex row). */ .ai-assistant__notice.ai-assistant__notice--recovery { flex-direction:column; align-items:stretch; gap:10px; } .ai-assistant__notice--recovery > p { margin:0; } .ai-assistant__notice--recovery > button { align-self:flex-start; } .ai-assistant__notice--recovery > .ai-assistant__previous-prompt { margin:0; } /* Video reference without a poster frame: a video icon instead of a broken image. */ :is(.ai-assistant,dialog.ai-assistant__board-reply) .ai-assistant__ref-thumb--icon { position:relative; box-sizing:border-box; background:color-mix(in srgb, var(--accent,#8666ed) 14%, transparent); border-color:color-mix(in srgb, var(--accent,#8666ed) 40%, transparent); } :is(.ai-assistant,dialog.ai-assistant__board-reply) .ai-assistant__ref-thumb--icon::before { content:""; position:absolute; inset:3px; background:var(--accent,#8666ed); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='13' height='14' rx='2'/%3E%3Cpath d='M16 10l5-3v10l-5-3z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='13' height='14' rx='2'/%3E%3Cpath d='M16 10l5-3v10l-5-3z'/%3E%3C/svg%3E") center/contain no-repeat; } /* Description question before a prompt update: in the dock's next-step slot, or in the chat when the update was asked for from there. Theme-neutral lines so it reads in light and dark alike; the purple is fixed like the generate button's, because --accent is navy in the light theme. */ .ai-assistant__description-ask { display:flex; flex-direction:column; gap:12px; padding:14px; border:1px solid rgba(139,92,246,.45); border-radius:12px; background:color-mix(in srgb,var(--ink,#172033) 3%,transparent); color:var(--ink,#172033); } .ai-assistant__description-ask--chat { max-width:560px; margin:6px 0; } .ai-assistant__description-ask-head { display:flex; flex-direction:column; gap:4px; } .ai-assistant__description-ask-head strong { font-size:13.5px; font-weight:600; } .ai-assistant__description-ask-head p { margin:0; color:var(--muted,#697586); font-size:12px; line-height:1.6; } .ai-assistant__description-ask-row { display:flex; align-items:center; gap:10px; } .ai-assistant__description-ask-thumb { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; overflow:hidden; border-radius:8px; background:color-mix(in srgb,var(--ink,#172033) 8%,transparent); color:var(--muted,#697586); font-size:14px; } .ai-assistant__description-ask-thumb img { width:100%; height:100%; object-fit:cover; } .ai-assistant__description-ask-field { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; } .ai-assistant__description-ask-field label { color:var(--muted,#697586); font-size:11.5px; } .ai-assistant .ai-assistant__description-ask-field input { box-sizing:border-box; width:100%; min-height:34px; padding:7px 10px; border:1px solid color-mix(in srgb,var(--ink,#172033) 16%,transparent); border-radius:8px; background:var(--panel-bg,#fff); color:inherit; font:inherit; font-size:12.5px; } .ai-assistant .ai-assistant__description-ask-field input:focus { outline:none; border-color:#8b5cf6; box-shadow:0 0 0 2px rgba(139,92,246,.25); } html[data-theme="dark"] .ai-assistant .ai-assistant__description-ask-field input { background:#121316; } .ai-assistant__description-ask-actions { display:flex; flex-direction:column; align-items:stretch; gap:6px; } .ai-assistant__description-ask--chat .ai-assistant__description-ask-actions { flex-direction:row; align-items:center; gap:12px; } .ai-assistant .ai-assistant__description-ask-save { min-height:40px; padding:9px 16px; border:0; border-radius:9px; background:linear-gradient(110deg,#6254d9,#8246c7); color:#fff; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; } .ai-assistant .ai-assistant__description-ask-skip { align-self:center; padding:4px 6px; border:0; background:transparent; color:var(--muted,#697586); font:inherit; font-size:12px; text-decoration:underline; cursor:pointer; } .ai-assistant .ai-assistant__description-ask-save:focus-visible,.ai-assistant .ai-assistant__description-ask-skip:focus-visible { outline:2px solid #8b5cf6; outline-offset:2px; } .ai-agent-plan__progress-card > .ai-assistant__description-ask { margin-bottom:4px; } /* The history list refreshes in the background when opened; the refresh icon turns meanwhile. */ .ai-assistant__history-refresh[aria-busy="true"] svg { animation:assistant-progress-spin .9s linear infinite; } @media (prefers-reduced-motion:reduce) { .ai-assistant__history-refresh[aria-busy="true"] svg { animation:none; opacity:.6; } } /* The card of references this browser does not have (W9): a column with one compact list, the × per row quiet until hovered, and two actions under it — not one chip column per file (2026-09-25). It keeps the notice's neutral tint and the panel's thin scrollbar (the list is in the shared scrollbar rule above). */ .ai-assistant__missing {flex-direction:column;} .ai-assistant__missing-content {width:100%;} .ai-assistant__missing-list {list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:216px;overflow:auto;} .ai-assistant__missing-row {display:flex;align-items:center;gap:8px;min-height:28px;padding:2px 4px;border-radius:6px;font-size:12px;} .ai-assistant__missing-row:hover {background:rgba(128,128,128,.08);} .ai-assistant__missing-kind {flex:0 0 16px;text-align:center;color:var(--muted,#697586);font-size:11px;} .ai-assistant__missing-label {flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink,#172033);} .ai-assistant__missing-drop {flex:0 0 auto;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted,#697586);font-size:16px;line-height:1;cursor:pointer;} .ai-assistant__missing-drop:hover:not(:disabled) {background:rgba(180,83,57,.12);color:#b45339;} .ai-assistant__missing-drop:disabled {opacity:.5;cursor:default;} .ai-assistant__missing-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;} /* Menu items carry a small stroke icon in front of their words (menu-icons.mjs, 2026-09-25). */ :is(.ai-assistant,.ai-shot-dialog) .ai-assistant__attach-menu-item {display:flex;align-items:center;gap:9px;} .ai-assistant__attach-menu-icon {flex:0 0 16px;width:16px;height:16px;color:var(--muted,#697586);} .ai-assistant .ai-assistant__attach-menu-item:is(:hover,:focus-visible) .ai-assistant__attach-menu-icon {color:var(--accent,#8666ed);} /* An audio reference's tile in the plan (light theme): the waveform cover sits on a light accent tint instead of the grey ink tint, its white ground blended away (user: the audio icon looked dull in light mode, 2026-09-25). */ html:not([data-theme="dark"]) .ai-agent-plan__reference-row .ai-agent-plan__thumbnail:has(> img.ai-assistant__media-cover[src*="audio-creation-cover"]) { background:color-mix(in srgb,var(--switch-on-bg,#8666ed) 12%,#fff); } html:not([data-theme="dark"]) .ai-agent-plan__reference-row .ai-agent-plan__thumbnail > img.ai-assistant__media-cover[src*="audio-creation-cover"] { mix-blend-mode:multiply; } /* The finished card's "generation details" block: the review card's parts are moved in here with the review card's zero and negative margins, so the settings line, the file grid and the prompt sat on top of each other (user: cramped, 2026-09-26). Room between them again, and the block's own inner padding. */ .ai-assistant .ai-assistant__generation-details { padding:16px 2px 6px; } .ai-assistant .ai-assistant__generation-details[open] > summary { margin-bottom:14px; } .ai-assistant .ai-assistant__generation-details p.ai-assistant__review-summary, .ai-assistant .ai-assistant__generation-details p.ai-assistant__review-settings { margin:0 0 14px; } .ai-assistant .ai-assistant__generation-details .ai-assistant__review-files { margin:0 0 16px; } .ai-assistant .ai-assistant__generation-details .ai-assistant__review-file-grid { gap:12px; margin-top:0; } .ai-assistant .ai-assistant__generation-details > details { margin-top:14px; } .ai-assistant .ai-assistant__generation-details > details > summary { padding:4px 0; } /* The missing-reference row: an attach button (paperclip) beside the ×, both quiet until hovered (2026-09-26). */ .ai-assistant__missing-attach {flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted,#697586);cursor:pointer;} .ai-assistant__missing-attach .ai-assistant__attach-menu-icon {width:15px;height:15px;color:inherit;} .ai-assistant__missing-attach:hover:not(:disabled) {background:color-mix(in srgb,var(--switch-on-bg,#8666ed) 14%,transparent);color:var(--switch-on-bg,#8666ed);} .ai-assistant__missing-attach:disabled {opacity:.5;cursor:default;} /* The missing row's words: the file name with, under it, the reference's number, role and description (2026-09-26). */ .ai-assistant__missing-text {flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;} .ai-assistant__missing-text .ai-assistant__missing-label {flex:0 0 auto;} .ai-assistant__missing-meta {font-size:11px;line-height:1.4;color:var(--muted,#697586);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ai-assistant__missing-row {align-items:flex-start;padding:4px 4px;} .ai-assistant__missing-row .ai-assistant__missing-kind,.ai-assistant__missing-row .ai-assistant__missing-attach,.ai-assistant__missing-row .ai-assistant__missing-drop {margin-top:1px;} .ai-assistant__missing-list {max-height:260px;} /* The cast card (2026-09-28): one row per person, the button opens the photo menu with the role character. */ /* 실행 바 A(2026-09-29, 사용자: 제작안 패널 오른쪽 아래 버튼이 눈에 잘 안 띔): 다음 단계·생성 버튼을 작성창 바로 위 한 줄로. 작성창과 같은 폭, 작성창 높이(--assistant-form-height) 위 8px에 뜬다. 왼쪽 요약은 생성 준비(ready)·생성 확인(review) 때만. */ .ai-assistant__action-dock{display:none;} .ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))) > .ai-assistant__action-dock{display:block;position:absolute;z-index:3;left:var(--assistant-inline-space);bottom:calc(18px + var(--assistant-form-height,120px) + 8px);width:calc(100% - 2 * var(--assistant-inline-space) - var(--assistant-scrollbar-width,0px));} @media(max-width:767px){.ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))) > .ai-assistant__action-dock{bottom:calc(12px + var(--assistant-form-height,120px) + 8px);}} .ai-assistant .ai-assistant__action-dock [hidden]{display:none !important;} /* The bottom Clips/Chat switch (2026-09-30, the user): inside the action bar, left of its summary; in the composer's toolbar before send only while the bar shows no row. */ .ai-assistant .ai-assistant__dock-seg{flex:0 0 auto;align-self:center;padding:2px;} .ai-assistant .ai-assistant__composer-actions > .ai-assistant__dock-seg{margin-left:auto;margin-right:8px;} .ai-assistant .ai-agent-plan__footer > .ai-assistant__dock-seg{order:-1;margin:0 2px 0 -6px;} .ai-assistant .ai-assistant__dock-seg[hidden]{display:none;} .ai-assistant .ai-assistant__dock-seg .ai-assistant__dock-tab{display:inline-grid;place-items:center;width:32px;min-width:32px;height:28px;min-height:28px;padding:0;font-size:0;} .ai-assistant__dock-tab svg{display:block;} .ai-assistant__dock-tab .ai-assistant__board-dot{position:absolute;top:3px;right:4px;} /* The site's tooltip (as on the cast-row icons), opening upward: the bar sits at the bottom. */ .ai-assistant__dock-tab[data-tooltip]::after{content:attr(data-tooltip);position:absolute;z-index:12;bottom:calc(100% + 8px);left:50%;width:max-content;max-width:200px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--line-strong,#4b5260) 82%,transparent);border-radius:7px;background:#20242d;box-shadow:0 7px 18px rgba(0,0,0,.24);color:#fff;font-size:12px;font-weight:650;line-height:1.35;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,4px);transition:opacity 120ms ease,transform 120ms ease,visibility 120ms ease;} .ai-assistant__dock-tab[data-tooltip]:is(:hover,:focus-visible)::after{opacity:1;visibility:visible;transform:translate(-50%,0);} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer{position:static;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:0;padding:8px 8px 8px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-bg,#fff);box-shadow:0 5px 18px #00000012;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer[data-state="idle"]{display:none;} html[data-theme="dark"] .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer{background:var(--panel-bg,#1b1c20);border-color:#3f3a5c;box-shadow:0 6px 20px #00000040;} .ai-agent-plan__dock-summary{flex:1 1 200px;min-width:0;display:grid;gap:1px;font-size:12px;line-height:1.45;} .ai-agent-plan__dock-summary strong{font-size:13px;color:var(--ink);} .ai-agent-plan__dock-summary span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ai-agent-plan__footer--dock:not([data-state="ready"]):not([data-state="review"]) .ai-agent-plan__dock-summary{display:none;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__progress-card{display:flex;align-items:center;justify-content:flex-end;gap:8px 12px;flex-wrap:wrap;flex:1 1 auto;min-width:0;padding:0;border:0;border-radius:0;background:transparent;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__progress{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;flex:1 1 220px;min-width:0;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__progress > strong{margin:0;font-size:13px;white-space:nowrap;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer .ai-agent-plan__progress p{margin:0;flex:1 1 160px;min-width:0;font-size:12.5px;line-height:1.5;color:var(--muted);} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer[data-state] .ai-assistant__review-action{width:auto;min-height:36px;padding:6px 14px;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__progress-card > .ai-assistant__generate{width:auto;min-width:180px;min-height:38px;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__progress-card > .ai-agent-plan__manual{display:inline-block;width:auto;margin:0;padding:4px 2px;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__progress-card > .ai-assistant__description-ask{flex:1 1 100%;} @media(max-width:520px){.ai-assistant .ai-assistant__action-dock .ai-agent-plan__progress-card > .ai-assistant__generate{flex:1 1 100%;min-width:0;}} /* 실행 바 얇게(2026-09-29, 사용자: 세로로 너무 두꺼움): 요약은 한 줄, 버튼은 작성창 도구 줄 높이로. */ .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer{padding:6px 6px 6px 14px;border-radius:12px;} .ai-agent-plan__footer--dock .ai-agent-plan__dock-summary{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;overflow:hidden;} .ai-agent-plan__footer--dock .ai-agent-plan__dock-summary strong{font-size:12.5px;white-space:nowrap;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__progress-card > .ai-assistant__generate{margin:0;min-height:34px;padding:6px 16px;font-size:13px;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer[data-state] .ai-assistant__review-action{min-height:32px;padding:5px 12px;font-size:12.5px;} /* 제작안 패널 위아래 옅은 그라디언트(2026-09-29, 사용자): 버튼이 실행 바로 옮겨 가 패널 끝이 잘려 보이던 것을 부드럽게. 스크롤바는 덮지 않는다. */ .ai-assistant--standalone > .ai-agent-plan{position:relative;--agent-plan-fade-bg:var(--control-surface,#f8f9fc);} html:not([data-theme="dark"]) .ai-assistant--standalone > .ai-agent-plan{--agent-plan-fade-bg:#eef1f6;} .ai-assistant--standalone > .ai-agent-plan::before,.ai-assistant--standalone > .ai-agent-plan::after{content:"";position:absolute;left:0;right:12px;z-index:2;pointer-events:none;} .ai-assistant--standalone > .ai-agent-plan::before{top:0;height:20px;background:linear-gradient(to bottom,var(--agent-plan-fade-bg),transparent);} .ai-assistant--standalone > .ai-agent-plan::after{bottom:0;height:36px;background:linear-gradient(to top,var(--agent-plan-fade-bg),transparent);} .ai-assistant--standalone > .ai-agent-plan[hidden]::before,.ai-assistant--standalone > .ai-agent-plan[hidden]::after{display:none;} /* 작성창 여백 줄임(2026-09-29, 사용자: 채팅 영역도 세로로 조금 줄이자): 대화 중 떠 있는 작성창만(첫 화면의 큰 작성창은 그대로). */ .ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))) > .ai-assistant__form{padding:8px 12px 4px;} .ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))) > .ai-assistant__form .ai-assistant__input{min-height:34px;padding:4px 4px 4px;} /* 실행 바 + 작성창 한 몸 카드(2026-09-29, 사용자 A안): 실행 바가 작성창 카드의 윗단이 된다 — 틈 없이 붙고 사이에는 가는 선 하나, 윗단 왼쪽에 옅은 보라빛. 실행 바가 보일 때만 작성창의 위쪽 모서리를 편다. */ .ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))) > .ai-assistant__action-dock{z-index:4;bottom:calc(18px + var(--assistant-form-height,120px) - 1px);} @media(max-width:767px){.ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))) > .ai-assistant__action-dock{bottom:calc(12px + var(--assistant-form-height,120px) - 1px);}} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer{border:1px solid rgba(23,32,51,.09);border-bottom-color:rgba(23,32,51,.07);border-radius:20px 20px 0 0;box-shadow:none;padding:7px 7px 7px 16px;background:linear-gradient(to right,#f1eefe,rgba(241,238,254,0) 70%),#f7f9fc;} html[data-theme="dark"] .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer{border-color:rgba(235,237,240,.055);border-bottom-color:rgba(235,237,240,.08);box-shadow:none;background:linear-gradient(to right,rgba(130,115,255,.15),rgba(130,115,255,0) 70%),#24252a;} .ai-assistant--standalone > .ai-assistant__content:not(:has(.ai-assistant__welcome:not([hidden]))):has(> .ai-assistant__action-dock .ai-agent-plan__footer:not([hidden]):not([data-state="idle"])) > .ai-assistant__form{border-top-left-radius:0;border-top-right-radius:0;} /* 생성 확인 대기 실행 바 한 줄(2026-10-05, 사용자: 정리 필요 — 요약이 줄을 다 차지해 상태·버튼 두 개가 아랫줄로 밀림): 왼쪽 요약은 남는 폭에서 줄임표, 오른쪽 [생성 확인 카드로 이동][고급 모델로 다시 쓰기]. "생성 준비가 완료됐어요"는 버튼이 같은 말을 해 화면에서는 숨기고 읽기 도구에는 남긴다. 좁은 공간도 실행 버튼을 같은 줄에 유지한다. */ .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer:is([data-state="ready"],[data-state="review"]){flex-wrap:nowrap;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer:is([data-state="ready"],[data-state="review"]) .ai-agent-plan__dock-summary{flex:1 1 auto;flex-wrap:nowrap;min-width:0;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer:is([data-state="ready"],[data-state="review"]) .ai-agent-plan__dock-summary strong{min-width:0;overflow:hidden;text-overflow:ellipsis;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer:is([data-state="ready"],[data-state="review"]) .ai-agent-plan__dock-summary > span{display:inline;min-width:0;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer:is([data-state="ready"],[data-state="review"]) .ai-agent-plan__progress-card, .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer:is([data-state="ready"],[data-state="review"]) .ai-agent-plan__progress{flex:0 0 auto;flex-wrap:nowrap;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer:is([data-state="ready"],[data-state="review"]) :is(.ai-assistant__generate,.ai-agent-plan__premium-button){flex:0 0 auto;min-width:0;white-space:nowrap;} /* 필요한 것만(2026-10-05, 사용자): 상태 줄은 버튼과 같은 말, 고급 다시 쓰기는 생성 확인 카드의 다듬기 선택이 맡는다(다시 쓰면 받은 견적도 무효). */ .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer[data-state="review"] :is(.ai-agent-plan__progress > strong,.ai-agent-plan__premium){display:none;} /* 실행 바가 채팅 끝 카드의 버튼을 대신 보여 줄 때(2026-09-29, 사용자: 직전 답변이 이미지 생성 카드면 그 버튼): 제작안 줄은 숨긴다. */ .ai-assistant .ai-assistant__action-dock.is-taken > .ai-agent-plan__footer:not(.ai-assistant__dock-take){display:none;} .ai-assistant .ai-assistant__action-dock .ai-assistant__dock-take > .ai-assistant__generate{width:auto;margin:0;min-height:34px;padding:6px 16px;font-size:13px;flex:0 0 auto;} @media(max-width:520px){.ai-assistant .ai-assistant__action-dock .ai-assistant__dock-take > .ai-assistant__generate{flex:1 1 100%;}} /* 실행 바 오른쪽 빈 칸 없애기(2026-09-29, 사용자): 버튼은 늘 오른쪽 끝. 요약이 보이는 단계(생성 확인)에서는 안내·버튼 묶음이 오른쪽으로 붙는다. */ .ai-assistant .ai-assistant__action-dock .ai-agent-plan__progress > .ai-assistant__review-action{margin-left:auto;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer--dock:is([data-state="review"],[data-state="ready"]) .ai-agent-plan__progress{flex:0 1 auto;} /* 작성창의 위로 열리는 메뉴(프롬프트 언어·@ 참조·첨부)가 실행 바 아래로 깔리지 않게(2026-09-29, 사용자): 메뉴가 열렸거나 작성창에 포커스가 있으면 작성창을 위로. */ .ai-assistant--standalone > .ai-assistant__content > .ai-assistant__form:is(:focus-within,:has([role="menu"]:not([hidden])),:has(.ai-assistant__attach-menu:not([hidden]))){z-index:5;} /* 제작안의 오디오 스위치(2026-09-29, 사용자): "♫ 오디오 포함/없음" 옆에서 바로 켜고 끈다. */ .ai-agent-plan__audio--toggle{display:flex;align-items:center;gap:10px;} .ai-agent-plan__audio-switch{position:relative;flex:none;width:34px;height:20px;padding:0;border:0;border-radius:999px;background:var(--line-strong,#c9cdd6);cursor:pointer;transition:background .15s;} .ai-agent-plan__audio-switch::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:left .15s;} .ai-agent-plan__audio-switch[aria-checked="true"]{background:var(--switch-on-bg,#6d5dfc);} .ai-agent-plan__audio-switch[aria-checked="true"]::after{left:17px;} .ai-agent-plan__audio-switch:disabled{opacity:.5;cursor:default;} .ai-agent-plan__audio-switch:focus-visible{outline:2px solid var(--switch-on-bg,#6d5dfc);outline-offset:2px;} html[data-theme="dark"] .ai-agent-plan__audio-switch:not([aria-checked="true"]){background:#3a3552;} @media (prefers-reduced-motion:reduce){.ai-agent-plan__audio-switch,.ai-agent-plan__audio-switch::after{transition:none;}} /* 추가 오디오 A안(2026-09-29, 사용자): 부분마다 "자동으로 다시 쓰기", 나레이션 언어, 분위기에 맞춘 목소리 3개 + 직접 묘사, 대화상자 안 확인. */ dialog.ai-assistant__music-dialog .ai-assistant__audio-label { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } dialog.ai-assistant__music-dialog .ai-assistant__audio-rewrite { margin-left:auto; min-height:26px; padding:0 10px; border:1px solid color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 35%,var(--line,#e3e4e9)); border-radius:999px; background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 10%,transparent); color:var(--switch-on-bg,#6d5dfc); font:inherit; font-size:11.5px; font-weight:700; white-space:nowrap; cursor:pointer; } dialog.ai-assistant__music-dialog .ai-assistant__audio-rewrite--ghost { margin-left:0; background:transparent; } dialog.ai-assistant__music-dialog .ai-assistant__audio-rewrite:disabled { opacity:.5; cursor:default; } dialog.ai-assistant__music-dialog .ai-assistant__audio-row { display:grid; grid-template-columns:60px minmax(0,1fr); gap:8px; align-items:start; margin:8px 0; } dialog.ai-assistant__music-dialog .ai-assistant__audio-row-label { padding-top:5px; font-size:12px; color:var(--muted,#536174); } dialog.ai-assistant__music-dialog .ai-assistant__audio-voice-box { display:grid; gap:8px; min-width:0; } dialog.ai-assistant__music-dialog .ai-assistant__audio-voices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } @media (max-width:640px) { dialog.ai-assistant__music-dialog .ai-assistant__audio-voices { grid-template-columns:repeat(2,minmax(0,1fr)); } } dialog.ai-assistant__music-dialog .ai-assistant__audio-vcard { display:grid; gap:3px; align-content:start; min-width:0; padding:8px 10px; border:1px solid var(--line,#e3e4e9); border-radius:10px; background:var(--panel-bg,#fff); color:var(--ink,#172033); font:inherit; font-size:12px; text-align:left; cursor:pointer; } dialog.ai-assistant__music-dialog .ai-assistant__audio-vcard b { font-size:12.5px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-vcard span { color:var(--muted,#536174); font-size:11.5px; line-height:1.45; } dialog.ai-assistant__music-dialog .ai-assistant__audio-vcard:hover { border-color:var(--line-strong,#c9cdd6); } dialog.ai-assistant__music-dialog .ai-assistant__audio-vcard.is-on { border-color:var(--switch-on-bg,#6d5dfc); box-shadow:0 0 0 1px var(--switch-on-bg,#6d5dfc) inset; background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 9%,var(--panel-bg,#fff)); } dialog.ai-assistant__music-dialog .ai-assistant__audio-vcard.is-on b { color:var(--switch-on-bg,#6d5dfc); } dialog.ai-assistant__music-dialog .ai-assistant__audio-vcard--own { border-style:dashed; } /* One timeline (2026-10-05, the user): the parts fixed above, a scene a row below; the cards step aside. */ dialog.ai-assistant__music-dialog.is-timeline .ai-assistant__audio-card { display:none; } /* 머리글·버튼 줄과 같은 좌우 여백 22px(2026-10-06, 사용자: 위 묶음과 표가 창 가장자리에 붙어 있었음) */ dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-top { display:grid; gap:8px; padding:12px 22px 10px; border-bottom:1px solid var(--line,#e3e4e9); } dialog.ai-assistant__music-dialog .ai-assistant__audio-timeline { padding:0 22px; } /* A cell to write in (2026-10-06, the user): it looks like text until pointed at; a written one waits marked until applied. */ dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-table td:is(.ai-assistant__audio-tl-m,.ai-assistant__audio-tl-n) { padding:3px 4px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-cell { display:block; width:100%; box-sizing:border-box; min-height:30px; padding:5px 6px; border:1px solid transparent; border-radius:7px; background:none; color:inherit; font:inherit; text-align:left; cursor:text; overflow-wrap:anywhere; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-cell:hover { border-color:var(--line-strong,#c9cdd6); background:color-mix(in srgb,currentColor 5%,transparent); } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-cell.is-add { color:var(--switch-on-bg,#6d5dfc); } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-cell.is-pending { border-color:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 55%,transparent); background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 10%,transparent); } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-input { display:block; width:100%; box-sizing:border-box; padding:5px 6px; border:1px solid var(--switch-on-bg,#6d5dfc); border-radius:7px; background:var(--control-surface,#f8f9fc); color:inherit; font:inherit; resize:vertical; } html[data-theme="dark"] dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-input { background:#26233a; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-apply[hidden] { display:none; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-parts { display:flex; gap:10px; flex-wrap:wrap; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-part { flex:1 1 280px; display:flex; align-items:center; gap:10px; min-width:0; padding:8px 12px; border:1px solid var(--line,#e3e4e9); border-radius:12px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-icon { flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 16%,transparent); } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-part--narration .ai-assistant__audio-tl-icon { background:rgba(47,163,107,.16); } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-words { min-width:0; flex:1; display:grid; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-words b { font-size:13px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-words small { font-size:12px; color:var(--muted,#536174); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-switch { flex:none; position:relative; width:36px; height:21px; border:0; border-radius:999px; background:var(--switch-on-bg,#6d5dfc); cursor:pointer; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-part--narration .ai-assistant__audio-tl-switch { background:#2fa36b; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-switch::after { content:""; position:absolute; top:3px; right:3px; width:15px; height:15px; border-radius:50%; background:#fff; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-switch.is-off { background:var(--line-strong,#9aa1ad); } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-switch.is-off::after { right:18px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-meta { display:flex; gap:10px; font-size:12px; color:var(--muted,#536174); } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-count { margin-left:auto; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-top .ai-assistant__audio-row { margin:0; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-top .ai-assistant__audio-voice-sum, dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-top .ai-assistant__audio-row-label { display:none; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-top .ai-assistant__audio-row { grid-template-columns:minmax(0,1fr); } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:13px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-table th { position:sticky; top:0; z-index:1; text-align:left; font-weight:500; font-size:12px; color:var(--muted,#536174); padding:6px 8px; background:var(--panel-bg,#fff); border-bottom:1px solid var(--line-strong,#c9cdd6); } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-table td { padding:8px; border-bottom:1px solid var(--line,#e3e4e9); vertical-align:top; overflow-wrap:anywhere; } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-t { width:84px; color:var(--muted,#536174); font-variant-numeric:tabular-nums; white-space:nowrap; } dialog.ai-assistant__music-dialog td.ai-assistant__audio-tl-n.is-quiet, dialog.ai-assistant__music-dialog td.ai-assistant__audio-tl-m.is-quiet { color:var(--muted,#536174); } dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-go { width:30px; text-align:right; } dialog.ai-assistant__music-dialog th:last-child { width:30px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-timeline.no-music .ai-assistant__audio-tl-m, dialog.ai-assistant__music-dialog .ai-assistant__audio-timeline.no-narr .ai-assistant__audio-tl-n { display:none; } @media (max-width:640px) { dialog.ai-assistant__music-dialog .ai-assistant__audio-tl-t { width:64px; font-size:12px; } } dialog.ai-assistant__music-dialog .ai-assistant__audio-music-dir { display:flex; align-items:baseline; gap:8px; font-size:13px; margin:2px 0 8px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-music-dir .ai-assistant__audio-row-label { flex:none; width:52px; color:var(--muted,#536174); } dialog.ai-assistant__music-dialog .ai-assistant__audio-music-dir-text { min-width:0; } dialog.ai-assistant__music-dialog .ai-assistant__audio-voice-wrap { display:grid; gap:8px; min-width:0; } dialog.ai-assistant__music-dialog .ai-assistant__audio-voice-sum { display:flex; align-items:baseline; gap:6px; min-width:0; font-size:13px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-voice-sum-desc { color:var(--muted,#536174); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } dialog.ai-assistant__music-dialog .ai-assistant__audio-voice-change { margin-left:auto; flex:none; border:0; background:none; color:var(--switch-on-bg,#6d5dfc); font:inherit; font-size:12.5px; cursor:pointer; padding:0 2px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-row.is-compact .ai-assistant__audio-voice-box { padding:10px 12px; border:1px solid var(--line,#e3e4e9); border-radius:10px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-row.is-compact .ai-assistant__audio-voices { display:flex; flex-wrap:wrap; gap:6px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-row.is-compact .ai-assistant__audio-vcard { display:inline-flex; padding:4px 11px; border-radius:999px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-row.is-compact .ai-assistant__audio-vcard span { display:none; } dialog.ai-assistant__music-dialog .ai-assistant__audio-voice-picked { margin:0; font-size:12px; color:var(--muted,#536174); } dialog.ai-assistant__music-dialog .ai-assistant__audio-voice-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11.5px; color:var(--muted,#536174); } dialog.ai-assistant__music-dialog .ai-assistant__audio-voices[hidden] + .ai-assistant__audio-voice + .ai-assistant__audio-voice-foot span { display:none; } dialog.ai-assistant__music-dialog .ai-assistant__clip-editor-foot { flex-wrap:wrap; } dialog.ai-assistant__music-dialog .ai-assistant__audio-ask { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1 1 100%; padding:8px 10px; border:1px solid color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 30%,var(--line,#e3e4e9)); border-radius:10px; background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 8%,transparent); font-size:12.5px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-ask > span { flex:1 1 180px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-ask[hidden] { display:none; } html[data-theme="dark"] dialog.ai-assistant__music-dialog .ai-assistant__audio-vcard { background:#221f30; border-color:#3a3552; color:#e4dfff; } html[data-theme="dark"] dialog.ai-assistant__music-dialog .ai-assistant__audio-vcard.is-on { background:#2d2650; border-color:#9d90ff; box-shadow:0 0 0 1px #9d90ff inset; } html[data-theme="dark"] dialog.ai-assistant__music-dialog .ai-assistant__audio-vcard.is-on b { color:#c9c0ff; } html[data-theme="dark"] dialog.ai-assistant__music-dialog .ai-assistant__audio-rewrite { color:#c9c0ff; border-color:#4a4270; background:#2a2540; } /* 완성본 A′(2026-09-29, 사용자): ① 클립 만들기 → ② 완성본 카드(상태 칩·내려받기·정보·소리 섞기·합치기), 라이트·다크. */ .ai-assistant .ai-assistant__board-step { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:4px 0 10px; font-size:13.5px; font-weight:700; } .ai-assistant .ai-assistant__board-step small { font-weight:500; font-size:12px; color:var(--muted,#5a6679); } .ai-assistant .ai-assistant__board-step-n { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:800; color:var(--switch-on-bg,#6d5dfc); background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 14%,transparent); } .ai-assistant__board-foot:has(.ai-assistant__board-final-card) { border-top:0; padding-top:0; gap:10px; } .ai-assistant .ai-assistant__board-flow { display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; color:var(--muted,#5a6679); } .ai-assistant .ai-assistant__board-flow i { flex:1; max-width:200px; height:1px; background:linear-gradient(90deg,transparent,var(--line-strong,#c9cdd6),transparent); } .ai-assistant .ai-assistant__board-flow span { padding:4px 12px; border:1px solid var(--line,#e3e4e9); border-radius:999px; background:var(--panel-bg,#fff); } .ai-assistant .ai-assistant__board-final-card { display:grid; gap:12px; padding:14px; border:1px solid var(--line,#e3e4e9); border-radius:14px; background:var(--panel-bg,#fff); } .ai-assistant .ai-assistant__board-final-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .ai-assistant .ai-assistant__board-final-head strong { font-size:14.5px; } .ai-assistant .ai-assistant__board-final-sp { flex:1; } .ai-assistant .ai-assistant__board-final-links { display:flex; gap:6px; flex-wrap:wrap; } .ai-assistant .ai-assistant__board-final-link { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border:1px solid var(--line-strong,#c9cdd6); border-radius:8px; color:var(--ink,#172033); font-size:12px; font-weight:600; text-decoration:none; } .ai-assistant .ai-assistant__board-final-link[hidden] { display:none; } .ai-assistant .ai-assistant__board-chip { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; color:var(--switch-on-bg,#6d5dfc); background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 12%,transparent); } .ai-assistant .ai-assistant__board-chip::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } .ai-assistant .ai-assistant__board-chip.is-fresh { color:#1f9d63; background:rgba(31,157,99,.12); } .ai-assistant .ai-assistant__board-chip:is(.is-dirty,.is-none,.is-failed) { color:#b7791f; background:rgba(183,121,31,.13); } .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-final { grid-template-columns:minmax(0,1fr) 280px; } @media (max-width:900px) { .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-final { grid-template-columns:minmax(0,1fr); } } /* F1 (2026-09-30, the user: the finished video grew with the window; portrait works too): the picture stops at 640px wide (a 16:9 work 360px high) or, for a portrait work, 480px high (270px wide); the facts take the side, the card starts left. */ .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-final { grid-template-columns:minmax(0,640px) minmax(240px,340px); justify-content:start; } .ai-assistant .ai-assistant__board-final-card.is-portrait .ai-assistant__board-final { grid-template-columns:minmax(0,270px) minmax(240px,380px); } @media (max-width:900px) { .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-final { grid-template-columns:minmax(0,640px); } .ai-assistant .ai-assistant__board-final-card.is-portrait .ai-assistant__board-final { grid-template-columns:minmax(0,270px); } } .ai-assistant .ai-assistant__board-final-card :is(.ai-assistant__board-result-video,.ai-assistant__board-result-pending,.ai-assistant__board-result-stage .ai-assistant__generation-frame) { max-width:100%; max-height:480px; } .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-result-stage { max-width:100%; } .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-result-stage .ai-assistant__generation-frame.is-portrait { height:min(480px,70vh); } .ai-assistant .ai-assistant__board-final-empty { display:grid; place-items:center; aspect-ratio:var(--clip-aspect,16/9); max-width:100%; padding:14px; border:1px dashed var(--line-strong,#c9cdd6); border-radius:10px; text-align:center; font-size:12.5px; color:var(--muted,#5a6679); background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 7%,transparent) 0 10px,transparent 10px 20px); } .ai-assistant .ai-assistant__board-final-empty[hidden] { display:none; } .ai-assistant .ai-assistant__board-final-facts { display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:0; font-size:12px; } .ai-assistant .ai-assistant__board-final-facts dt { color:var(--muted,#5a6679); } .ai-assistant .ai-assistant__board-final-facts dd { margin:0; } .ai-assistant .ai-assistant__board-final-card:is([data-state="ready"],[data-state="dirty"],[data-state="failed"]) .ai-assistant__board-finish { border:0; background:linear-gradient(110deg,#6254d9,#8246c7); color:#fff; font-weight:700; min-height:38px; } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__board-final-card { background:#fff; border-color:#e3dcfa; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-final-card { background:#221f2e; border-color:#352f4d; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-flow span { background:#221f2e; border-color:#352f4d; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-final-link { color:#e4dfff; border-color:#3a3552; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-chip { color:#c9c0ff; background:rgba(157,144,255,.16); } html[data-theme="dark"] .ai-assistant .ai-assistant__board-chip.is-fresh { color:#3fbf85; background:rgba(63,191,133,.14); } html[data-theme="dark"] .ai-assistant .ai-assistant__board-chip:is(.is-dirty,.is-none,.is-failed) { color:#e0a54a; background:rgba(224,165,74,.14); } html[data-theme="dark"] .ai-assistant .ai-assistant__board-final-empty { border-color:#3a3552; color:#a8a3c0; } /* 추가 오디오 대화상자 크기(2026-09-29, 사용자: 음악 설명·나레이션 칸이 세로로 너무 길고, 가로는 더 넓게). */ dialog.ai-assistant__clip-editor.ai-assistant__music-dialog { width:min(860px,calc(100vw - 32px)); } /* The scenes' table wider (2026-10-07, the user): the narration column keeps its sentences on fewer lines. */ dialog.ai-assistant__clip-editor.ai-assistant__music-dialog.is-timeline { width:min(1060px,calc(100vw - 32px)); } /* The A plan's popup over the audio dialog (2026-10-07, the user): one part's request or voice and its own generate. */ dialog.ai-assistant__clip-editor.ai-assistant__audio-pop { width:min(520px,calc(100vw - 32px)); } /* The narration popup wider (2026-10-08, the user): the voice lines on one line, the option beside the buttons. */ dialog.ai-assistant__clip-editor.ai-assistant__audio-pop:has(.ai-assistant__audio-voices) { width:min(640px,calc(100vw - 32px)); } .ai-assistant__audio-pop-quiet { display:inline-flex; align-items:center; gap:6px; margin-right:auto; font-size:12.5px; color:var(--ink,#172033); cursor:pointer; } .ai-assistant__audio-pop-quiet input { width:15px; height:15px; margin:0; accent-color:var(--switch-on-bg,#6d5dfc); } .ai-assistant__audio-tl-tone { display:inline-flex; align-items:center; gap:4px; margin-top:5px; padding:1px 9px; border:1px dashed var(--line,#d5dae3); border-radius:999px; background:transparent; font:inherit; font-size:11.5px; color:var(--muted,#697586); cursor:pointer; } .ai-assistant__audio-tl-tone:hover { border-style:solid; color:var(--ink,#172033); } .ai-assistant__audio-tl-tone.is-pending { border-style:solid; border-color:var(--switch-on-bg,#6d5dfc); color:var(--switch-on-bg,#6d5dfc); } .ai-assistant__audio-tl-tone.is-add { opacity:.8; } .ai-assistant__audio-tl-tone-edit { margin-top:5px; } .ai-assistant__audio-tl-tone-input { width:100%; box-sizing:border-box; padding:5px 8px; border:1.5px solid var(--switch-on-bg,#6d5dfc); border-radius:8px; font:inherit; font-size:12.5px; background:var(--field-bg,transparent); color:inherit; } .ai-assistant__audio-tl-tone-picks { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; } /* The popup's box as the rewrite request's (2026-10-08, the user: the editor border was not ours). */ dialog.ai-assistant__audio-pop .ai-assistant__audio-request-field { width:100%; box-sizing:border-box; min-height:72px; resize:vertical; font:inherit; font-size:13px; line-height:1.55; padding:8px 10px; border:1px solid #e3e4e9; border-radius:10px; background:#f7f9fc; color:inherit; } dialog.ai-assistant__audio-pop .ai-assistant__audio-request-field:focus { outline:none; border-color:#6d5dfc; box-shadow:0 0 0 3px rgba(109,93,252,.16); } html[data-theme="dark"] dialog.ai-assistant__audio-pop .ai-assistant__audio-request-field { background:#1b1924; border-color:#3a3552; } .ai-assistant__audio-pop-quiet + .ai-assistant__audio-pop-note { margin-left:0; } .ai-assistant__audio-pop-body { padding:14px 22px 4px; display:flex; flex-direction:column; gap:10px; } .ai-assistant__audio-pop-hint { margin:0; font-size:12.5px; color:var(--muted,#697586); } .ai-assistant__audio-pop-label { font-size:13px; font-weight:600; } .ai-assistant__audio-pop-foot { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 22px 18px; } .ai-assistant__audio-pop-note { margin:0 auto 0 0; font-size:12.5px; color:var(--muted,#697586); } .ai-assistant__audio-pop-row { display:flex; align-items:center; justify-content:space-between; gap:8px; } dialog.ai-assistant__audio-pop .ai-assistant__audio-voices { display:flex; flex-direction:column; gap:6px; } dialog.ai-assistant__audio-pop .ai-assistant__audio-vcard { display:grid; grid-template-columns:minmax(120px,30%) minmax(0,1fr); align-items:center; gap:12px; width:100%; padding:9px 12px; text-align:left; border-radius:10px; } dialog.ai-assistant__audio-pop .ai-assistant__audio-vcard b { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } dialog.ai-assistant__audio-pop .ai-assistant__audio-vcard span { display:block; font-size:12px; line-height:1.45; } dialog.ai-assistant__audio-pop .ai-assistant__audio-voice { width:100%; box-sizing:border-box; } .ai-assistant__audio-voices.is-loading { opacity:.45; pointer-events:none; transition:opacity .15s; } .ai-assistant__audio-rewrite.is-busy { pointer-events:none; opacity:.85; } .ai-assistant__audio-voice-status { color:var(--danger,#d64545); } dialog.ai-assistant__clip-editor.ai-assistant__music-dialog .ai-assistant__music-box { height:clamp(96px,15vh,170px); } dialog.ai-assistant__clip-editor.ai-assistant__music-dialog .ai-assistant__narration-box { height:clamp(120px,19vh,220px); } /* 남은 클립 만들기를 완성본 카드의 빈 영상 자리에(2026-09-29, 사용자). */ .ai-assistant .ai-assistant__board-final-bulk:empty { display:none; } .ai-assistant .ai-assistant__board-final-bulk { display:grid; align-content:center; min-width:0; aspect-ratio:var(--clip-aspect,16/9); max-width:100%; padding:16px; border:1px dashed var(--line-strong,#c9cdd6); border-radius:10px; background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 7%,transparent) 0 10px,transparent 10px 20px); } .ai-assistant .ai-assistant__board-final-bulk > .ai-assistant__clip-bulk { margin:0; } .ai-assistant .ai-assistant__board-final:has(> .ai-assistant__board-final-bulk:not(:empty)) > .ai-assistant__board-final-empty { display:none; } .ai-assistant .ai-assistant__board-final-card[data-state="none"] .ai-assistant__board-finish-row { display:none; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-final-bulk { border-color:#3a3552; } /* 머리 버튼 아이콘(2026-09-29, 사용자): 대화 기록·새 영상 앞의 작은 선 아이콘. */ .ai-assistant .ai-assistant__history-menu > summary:has(> .ai-assistant__head-icon), .ai-assistant button:has(> .ai-assistant__head-icon) { display:inline-flex; align-items:center; gap:5px; } .ai-assistant .ai-assistant__head-icon { width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.85; } /* 잠금 안내 속 "새 영상" 링크(2026-09-29, 사용자: 버튼 대신 글자를 링크로). */ .ai-assistant .ai-agent-plan__lock-link { display:inline; padding:0; border:0; background:none; font:inherit; font-weight:700; color:var(--switch-on-bg,#6d5dfc); text-decoration:underline; text-underline-offset:2px; cursor:pointer; } .ai-assistant .ai-agent-plan__lock-link:disabled { cursor:default; opacity:.6; } html[data-theme="dark"] .ai-assistant .ai-agent-plan__lock-link { color:#b9adff; } /* 생성 카드에서 클립 보드로(2026-09-29, 사용자). */ .ai-assistant .ai-assistant__to-clips { display:inline-flex; align-self:flex-start; margin:2px 0 6px; padding:0; border:0; background:none; font:inherit; font-size:12.5px; font-weight:700; color:var(--switch-on-bg,#6d5dfc); cursor:pointer; } .ai-assistant .ai-assistant__to-clips:hover { text-decoration:underline; text-underline-offset:2px; } .ai-assistant:not(.ai-assistant--has-board) .ai-assistant__to-clips { display:none; } /* The batch quote's two paths (2026-10-01, the user: make it now / make them yourself in the Clips tab): same shape, a title and one line. */ .ai-assistant .ai-assistant__generate.ai-assistant__generate--two-line { flex-direction:column; gap:0; } /* The sparkle sits before the title, not on a line of its own (2026-10-01, the user: the icon made the button too tall). */ .ai-assistant .ai-assistant__generate.ai-assistant__generate--two-line::before { content:none; } .ai-assistant .ai-assistant__generate-title { display:block; font-weight:700; line-height:1.3; } .ai-assistant .ai-assistant__generate-sub { display:block; margin-top:2px; font-size:12px; font-weight:500; line-height:1.35; opacity:.85; } .ai-assistant .ai-assistant__make-manual { display:flex; flex-direction:column; align-items:center; width:100%; margin-top:8px; padding:8px 16px; border:1px solid rgba(120,86,216,.55); border-radius:10px; background:transparent; color:inherit; font:inherit; font-size:14px; text-align:center; cursor:pointer; } .ai-assistant .ai-assistant__make-manual:hover { background:rgba(120,86,216,.08); } .ai-assistant .ai-assistant__make-manual .ai-assistant__generate-sub { opacity:.7; } .ai-assistant .ai-assistant__make-manual[hidden], .ai-assistant:not(.ai-assistant--has-board) .ai-assistant__make-manual { display:none; } .ai-assistant .ai-assistant__row-clip { float:right; margin:0 0 0 8px; font-size:13px; font-weight:400; opacity:.6; } .ai-assistant .ai-assistant__row-clip:hover { opacity:1; text-decoration:none; } html[data-theme="dark"] .ai-assistant .ai-assistant__to-clips { color:#b9adff; } /* 클립이 남아 있으면 "남은 N개 만들기" 줄만(2026-09-29, 사용자: 완성본 자리가 공간 낭비). 만들 클립이 없어지면 카드가 돌아온다. */ html .ai-assistant .ai-assistant__board-final-card[data-state="none"]:has(.ai-assistant__board-final-bulk:not(:empty)) { padding:0; border:0; background:none; } html .ai-assistant .ai-assistant__board-final-card[data-state="none"]:has(.ai-assistant__board-final-bulk:not(:empty)) > .ai-assistant__board-final-head { display:none; } html .ai-assistant .ai-assistant__board-final-card[data-state="none"] .ai-assistant__board-final-bulk { aspect-ratio:auto; padding:0; border:0; background:none; } html .ai-assistant .ai-assistant__board-foot:has(.ai-assistant__board-final-card[data-state="none"] .ai-assistant__board-final-bulk:not(:empty)) > .ai-assistant__board-step { display:none; } /* 채팅의 생성 카드 버튼 높이 살짝 줄임(2026-09-29, 사용자): 48px → 40px. */ .ai-assistant .ai-assistant__log .ai-assistant__generation-review .ai-assistant__generate { min-height:40px; padding-top:7px; padding-bottom:7px; font-size:14px; } /* 이전 완성본(2026-09-29, 사용자 A안): 예상 가격 안내 줄. 영상은 흐리지 않음(2026-10-06, 사용자: 클립 수정 뒤 어두워 보임 — 상태는 머리글 배지가 알림). */ .ai-assistant .ai-assistant__board-result.is-previous .ai-assistant__board-result-caption { color:#b7791f; font-weight:700; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-result.is-previous .ai-assistant__board-result-caption { color:#e0a54a; } .ai-assistant .ai-assistant__estimate-note { color:var(--muted,#5a6679); font-size:12px; } /* 차례를 기다리는 클립(2026-09-29, 사용자): 배경 애니메이션 없이, 칩의 점도 멈춤. */ .ai-assistant .ai-assistant__clip-thumb.is-queued { display:grid; place-items:center; } .ai-assistant .ai-assistant__clip-thumb.is-queued .ai-assistant__clip-flow-dot { animation:none; opacity:.55; } .ai-assistant .ai-assistant__clip-thumb.is-queued { cursor:default; background:#f1eefc; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-thumb.is-queued { background:#1f1d2b; } /* 다시 생성이 기다리는 이유(2026-09-29, 사용자). */ .ai-assistant .ai-assistant__clip-redo-wait { display:block; margin-top:2px; font-size:11px; font-weight:500; opacity:.8; } /* A안(2026-09-30, 사용자): 다시 합치기를 누르면 바로 만드는 중 — 기다림 틀(그대로) 아래 단계 */ .ai-assistant .ai-assistant__board-steps{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted,#8b93a7)} .ai-assistant .ai-assistant__board-step{display:flex;align-items:center;gap:6px} .ai-assistant .ai-assistant__board-step-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;flex:none} .ai-assistant .ai-assistant__board-step.is-done{color:#3fb883}.ai-assistant .ai-assistant__board-step.is-done .ai-assistant__board-step-dot{background:currentColor} .ai-assistant .ai-assistant__board-step.is-active{color:var(--text,#e8eaf0);font-weight:600} .ai-assistant .ai-assistant__board-step.is-active .ai-assistant__board-step-dot{border-color:var(--switch-on-bg,#7c5cff);border-top-color:transparent;animation:ai-assistant-step-spin .9s linear infinite} .ai-assistant .ai-assistant__board-step-time{font-weight:400;color:var(--muted,#8b93a7)} @keyframes ai-assistant-step-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.ai-assistant .ai-assistant__board-step.is-active .ai-assistant__board-step-dot{animation:none}} /* 참조를 바꾼 뒤 클립 다시 생성(2026-09-30, 사용자): 초안이 맞지 않다는 안내 옆의 "초안 업데이트" */ .ai-assistant .ai-assistant__clip-confirm-fix{align-self:flex-start;margin-top:2px;padding:5px 12px;border-radius:8px;border:1px solid var(--switch-on-bg,#7c5cff);background:transparent;color:var(--text,#e8eaf0);font-size:12px;font-weight:600;cursor:pointer} .ai-assistant .ai-assistant__clip-confirm-fix:hover:not(:disabled){background:color-mix(in srgb,var(--switch-on-bg,#7c5cff) 18%,transparent)} .ai-assistant .ai-assistant__clip-confirm-fix:disabled{opacity:.5;cursor:default} /* A declared work (scene declarations design §7, C 안, 2026-10-02): the common settings above the scenes, chips under each. */ .ai-agent-plan__decl{border:1px solid var(--border-color,#383940);border-radius:8px;padding:6px 10px;margin:0 0 10px;font-size:12px} .ai-agent-plan__decl>summary{cursor:pointer;display:flex;justify-content:space-between;gap:8px} .ai-agent-plan__decl-title{font-weight:600} .ai-agent-plan__decl-count{opacity:.65} .ai-agent-plan__decl-list{margin:6px 0 2px;padding:0;list-style:none;display:grid;gap:3px;line-height:1.45} .ai-agent-plan__decl-list span{opacity:.8} .ai-agent-plan__shot-tags{display:flex;flex-wrap:wrap;gap:4px;margin:3px 0 2px 26px} .ai-agent-plan__shot-tag{display:inline-flex;align-items:center;gap:3px;font-size:11px;line-height:16px;padding:0 6px;border-radius:4px;border:1px solid var(--border-color,#383940);background:none;opacity:.85;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} .ai-agent-plan__shot-tag--icon::before{content:"";flex:none;width:10px;height:10px;background:currentColor;opacity:.85;-webkit-mask:var(--chip-icon) center/contain no-repeat;mask:var(--chip-icon) center/contain no-repeat} .ai-agent-plan__shot-tag[data-icon="camera"]{--chip-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 10l4.55-2.28A1 1 0 0 1 21 8.62v6.76a1 1 0 0 1-1.45.9L15 14z'/%3E%3Crect x='3' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E")} .ai-agent-plan__shot-tag[data-icon="music"]{--chip-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='17' r='3'/%3E%3Ccircle cx='16' cy='15' r='3'/%3E%3Cpath d='M9 17V4h10v11'/%3E%3C/svg%3E")} .ai-agent-plan__shot-tag.is-continued{opacity:.72;font-style:italic} .ai-agent-plan__shot-tag[data-icon="sound"]{--chip-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 8a5 5 0 0 1 0 8'/%3E%3Cpath d='M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z'/%3E%3C/svg%3E")} .ai-agent-plan__shot-tag[data-icon="line"]{--chip-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9h8M8 13h6'/%3E%3Cpath d='M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z'/%3E%3C/svg%3E")} /* The shot editor under a scene (scene declarations design §5.1, 2026-10-02): compact fields, 11–12px. */ .ai-agent-plan__shot-tags.is-editable{cursor:pointer;border-radius:4px} .ai-agent-plan__shot-tags.is-editable:hover .ai-agent-plan__shot-tag,.ai-agent-plan__shot-tags.is-editable:focus-visible .ai-agent-plan__shot-tag{border-color:var(--switch-on-bg,#8b7cf6);opacity:1} .ai-agent-plan__shot-tags.is-editable:focus-visible{outline:1px solid var(--switch-on-bg,#8b7cf6);outline-offset:2px} .ai-shot-dialog{margin:auto;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;color:var(--ink);padding:16px 18px;border:1px solid var(--line,#383940);border-radius:12px;background:var(--panel-bg,#1b1c20);box-sizing:border-box} .ai-shot-dialog__head{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px} .ai-shot-dialog__time{font-size:12px;opacity:.6;flex:1} .ai-shot-dialog__close{font:inherit;font-size:22px;line-height:1;border:0;background:none;color:inherit;cursor:pointer;opacity:.7;padding:0 2px} .ai-shot-editor{font-size:12px;display:grid;gap:8px} .ai-shot-editor__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .ai-shot-editor__row--two{grid-template-columns:repeat(2,minmax(0,1fr))} .ai-shot-editor__field{display:flex;flex-direction:column;gap:2px;min-width:0} .ai-shot-editor__field>span{font-size:11px;opacity:.65} .ai-shot-editor select,.ai-shot-editor input{font:inherit;font-size:12px;height:26px;padding:0 6px;border:1px solid var(--border-color,#383940);border-radius:5px;background:transparent;color:inherit;min-width:0;width:100%;box-sizing:border-box} .ai-shot-editor select option{background:var(--bg-primary,#1b1c1f)} .ai-shot-editor__tags{display:flex;flex-wrap:wrap;gap:4px} .ai-shot-editor__tag{font:inherit;font-size:11px;line-height:18px;padding:0 7px;border-radius:4px;border:1px solid var(--border-color,#383940);background:none;color:inherit;opacity:.6;cursor:pointer} .ai-shot-editor__tag.is-on{opacity:1;border-color:var(--switch-on-bg,#8b7cf6);background:color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 14%,transparent)} .ai-shot-editor__lines{display:grid;gap:4px} .ai-shot-editor__line{display:grid;grid-template-columns:90px minmax(0,1fr) 72px 22px 22px;gap:4px;align-items:center} .ai-shot-editor__icon{font:inherit;font-size:12px;height:22px;width:22px;padding:0;border:1px solid var(--border-color,#383940);border-radius:4px;background:none;color:inherit;cursor:pointer} .ai-shot-editor__icon:disabled{opacity:.35;cursor:default} .ai-shot-editor__add{justify-self:start;font:inherit;font-size:11px;padding:0 6px;height:22px;border:1px dashed var(--border-color,#383940);border-radius:4px;background:none;color:inherit;cursor:pointer} .ai-shot-editor__add:disabled{opacity:.4;cursor:default} .ai-shot-editor__hint{margin:0;font-size:11px;opacity:.6;line-height:1.4} .ai-shot-editor__foot{display:flex;align-items:center;gap:6px} .ai-shot-editor__foot .ai-shot-editor__hint{flex:1} .ai-shot-editor__foot button{font-size:12px;padding:3px 10px} .ai-shot-editor__apply{background:var(--switch-on-bg,#8b7cf6)!important;border-color:transparent!important;color:#fff!important} .ai-shot-editor__apply:disabled{opacity:.5} /* The term pickers with pictures (2026-10-02): the chosen picture in the field, a grid of every choice under the row. */ .ai-shot-term{display:flex;align-items:center;gap:6px;height:34px;padding:2px 6px 2px 2px;border:1px solid var(--border-color,#383940);border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer;min-width:0;width:100%;text-align:left} .ai-shot-term:hover,.ai-shot-term:focus-visible{border-color:var(--switch-on-bg,#8b7cf6)} .ai-shot-term__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ai-shot-term__more{opacity:.6;font-size:10px} .ai-shot-pic{display:block;flex:none;overflow:hidden;border-radius:4px;background:color-mix(in srgb,currentColor 10%,transparent);position:relative} .ai-shot-term .ai-shot-pic{width:28px;height:28px} .ai-shot-pic img{display:block;width:100%;height:100%;object-fit:cover} .ai-shot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:6px;padding:8px;border:1px solid var(--border-color,#383940);border-radius:8px;height:320px;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box} .ai-shot-dialog{--assistant-scroll-thumb:rgba(86,101,122,.34);--assistant-scroll-hover:rgba(86,101,122,.52)} html[data-theme="dark"] .ai-shot-dialog{--assistant-scroll-thumb:rgba(181,186,196,.36);--assistant-scroll-hover:rgba(181,186,196,.54)} /* Everything inside the scene editor too (2026-10-05, the user: the hand-edited prompt showed the browser scrollbar). */ .ai-shot-dialog,.ai-shot-dialog *,.ai-shot-grid{scrollbar-width:thin;scrollbar-color:var(--assistant-scroll-thumb) transparent} @supports selector(::-webkit-scrollbar){ .ai-shot-dialog,.ai-shot-dialog *,.ai-shot-grid{scrollbar-width:auto;scrollbar-color:auto} .ai-shot-dialog::-webkit-scrollbar,.ai-shot-dialog *::-webkit-scrollbar,.ai-shot-grid::-webkit-scrollbar{width:10px;height:10px} .ai-shot-dialog::-webkit-scrollbar-track,.ai-shot-dialog *::-webkit-scrollbar-track,.ai-shot-dialog *::-webkit-scrollbar-corner,.ai-shot-grid::-webkit-scrollbar-track{background:transparent} .ai-shot-dialog::-webkit-scrollbar-thumb,.ai-shot-dialog *::-webkit-scrollbar-thumb,.ai-shot-grid::-webkit-scrollbar-thumb{min-height:44px;border:2px solid transparent;border-radius:999px;background:var(--assistant-scroll-thumb);background-clip:padding-box} .ai-shot-dialog::-webkit-scrollbar-thumb:hover,.ai-shot-dialog *::-webkit-scrollbar-thumb:hover,.ai-shot-grid::-webkit-scrollbar-thumb:hover{background:var(--assistant-scroll-hover);background-clip:padding-box} .ai-shot-dialog::-webkit-scrollbar-button,.ai-shot-dialog *::-webkit-scrollbar-button,.ai-shot-grid::-webkit-scrollbar-button{display:none;width:0;height:0}} .ai-shot-grid__tile{display:flex;flex-direction:column;gap:4px;padding:4px;border:1px solid var(--border-color,#383940);border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:11px;cursor:pointer;text-align:center} .ai-shot-grid__tile:hover,.ai-shot-grid__tile:focus-visible{border-color:var(--switch-on-bg,#8b7cf6)} .ai-shot-grid__tile.is-on{border:2px solid var(--switch-on-bg,#8b7cf6);padding:3px} .ai-shot-grid__tile .ai-shot-pic{width:100%;aspect-ratio:16/9} .ai-shot-grid--angle .ai-shot-grid__tile .ai-shot-pic{aspect-ratio:9/10} .ai-shot-pic.is-empty::after{content:"—";position:absolute;inset:0;display:grid;place-items:center;opacity:.5} .ai-shot-pic__move{transform-origin:50% 55%} .ai-shot-pic .move-slow-push-in{animation:shot-push 3.4s ease-in-out infinite} .ai-shot-pic .move-push-in{animation:shot-push 2.2s ease-in-out infinite} .ai-shot-pic .move-slow-pull-back{animation:shot-pull 3.4s ease-in-out infinite} .ai-shot-pic .move-pull-back{animation:shot-pull 2.2s ease-in-out infinite} .ai-shot-pic .move-slow-pan-left{animation:shot-pan-left 3.6s ease-in-out infinite} .ai-shot-pic .move-pan-left{animation:shot-pan-left 2.4s ease-in-out infinite} .ai-shot-pic .move-slow-pan-right{animation:shot-pan-right 3.6s ease-in-out infinite} .ai-shot-pic .move-pan-right{animation:shot-pan-right 2.4s ease-in-out infinite} .ai-shot-pic .move-tilt-up{animation:shot-tilt-up 3s ease-in-out infinite} .ai-shot-pic .move-tilt-down{animation:shot-tilt-down 3s ease-in-out infinite} .ai-shot-pic .move-dolly-left{animation:shot-dolly-left 3.2s ease-in-out infinite} .ai-shot-pic .move-dolly-right{animation:shot-dolly-right 3.2s ease-in-out infinite} .ai-shot-pic .move-tracking{animation:shot-tracking 3.4s ease-in-out infinite} .ai-shot-pic .move-orbit{animation:shot-orbit 3.8s ease-in-out infinite} .ai-shot-pic .move-crane-up{animation:shot-crane-up 3.4s ease-in-out infinite} .ai-shot-pic .move-crane-down{animation:shot-crane-down 3.4s ease-in-out infinite} .ai-shot-pic .move-handheld{animation:shot-handheld 1.4s linear infinite} @keyframes shot-push{0%,12%{transform:scale(1)}82%,100%{transform:scale(1.7)}} @keyframes shot-pull{0%,12%{transform:scale(1.7)}82%,100%{transform:scale(1)}} /* A pan left turns the camera to the left: the left part of the picture comes into view (2026-10-03: the two were swapped). */ @keyframes shot-pan-left{0%,12%{transform:scale(1.5) translateX(-10%)}82%,100%{transform:scale(1.5) translateX(10%)}} @keyframes shot-pan-right{0%,12%{transform:scale(1.5) translateX(10%)}82%,100%{transform:scale(1.5) translateX(-10%)}} @keyframes shot-tilt-up{0%,12%{transform:scale(1.6) translateY(-8%)}82%,100%{transform:scale(1.6) translateY(9%)}} @keyframes shot-tilt-down{0%,12%{transform:scale(1.6) translateY(9%)}82%,100%{transform:scale(1.6) translateY(-8%)}} @keyframes shot-dolly-left{0%,12%{transform:scale(1.35) translateX(9%)}82%,100%{transform:scale(1.35) translateX(-9%)}} @keyframes shot-dolly-right{0%,12%{transform:scale(1.35) translateX(-9%)}82%,100%{transform:scale(1.35) translateX(9%)}} @keyframes shot-tracking{0%,12%{transform:scale(1.8) translateX(8%)}82%,100%{transform:scale(1.8) translateX(-6%)}} @keyframes shot-orbit{0%,12%{transform:scale(1.5) perspective(300px) rotateY(-14deg)}82%,100%{transform:scale(1.5) perspective(300px) rotateY(14deg)}} @keyframes shot-crane-up{0%,12%{transform:scale(1.25) translateY(6%)}82%,100%{transform:scale(1.6) translateY(-6%)}} @keyframes shot-crane-down{0%,12%{transform:scale(1.6) translateY(-6%)}82%,100%{transform:scale(1.25) translateY(6%)}} @keyframes shot-handheld{0%{transform:scale(1.2) translate(0,0) rotate(0)}25%{transform:scale(1.2) translate(1.2%,-.8%) rotate(.5deg)}50%{transform:scale(1.2) translate(-.8%,1%) rotate(-.4deg)}75%{transform:scale(1.2) translate(.8%,.6%) rotate(.3deg)}100%{transform:scale(1.2) translate(0,0) rotate(0)}} @media (prefers-reduced-motion:reduce){.ai-shot-pic .ai-shot-pic__move{animation:none!important}} .ai-shot-pic video{display:block;width:100%;height:100%;object-fit:cover} /* The shot editor in the site's own design (2026-10-02, the user: light and dark as the site): the site's colour tokens (styles.css), soft hairlines, filled controls, 10px corners; the chosen tile and the open field ringed in the accent. */ .ai-shot-dialog{font-family:var(--font-sans,inherit);background:var(--panel-bg,#fff);color:var(--ink,#172033);border:1px solid var(--line,rgba(23,32,51,.09));border-radius:16px;box-shadow:var(--shadow-lg,0 18px 42px rgba(23,32,51,.1));padding:18px 20px} html[data-theme="dark"] .ai-shot-dialog{border-color:var(--line-strong,rgba(235,237,240,.09));box-shadow:0 18px 42px rgba(0,0,0,.35)} .ai-shot-dialog .ai-shot-dialog__time,.ai-shot-dialog .ai-shot-dialog__close{color:var(--muted,#536174);opacity:1} .ai-shot-dialog .ai-shot-editor__field>span{color:var(--muted,#536174);opacity:1;font-size:11px} .ai-shot-dialog .ai-shot-editor input,.ai-shot-dialog .ai-shot-editor select{height:32px;padding:0 10px;border:1px solid var(--line,rgba(23,32,51,.09));border-radius:10px;background:var(--control-surface,#f7f9fc);color:var(--ink,#172033)} .ai-shot-dialog .ai-shot-editor input:focus,.ai-shot-dialog .ai-shot-editor select:focus{outline:none;border-color:var(--switch-on-bg,#6d5dfc);box-shadow:0 0 0 3px color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 16%,transparent)} .ai-shot-dialog .ai-shot-editor input::placeholder{color:var(--muted-soft,#737f90)} .ai-shot-dialog .ai-shot-term{height:36px;padding:3px 8px 3px 3px;border:1px solid var(--line,rgba(23,32,51,.09));border-radius:10px;background:var(--control-surface,#f7f9fc);color:var(--ink,#172033)} .ai-shot-dialog .ai-shot-term:hover{border-color:var(--line-strong,rgba(23,32,51,.16))} .ai-shot-dialog .ai-shot-term[aria-expanded="true"],.ai-shot-dialog .ai-shot-term:focus-visible{outline:none;border-color:var(--switch-on-bg,#6d5dfc);box-shadow:0 0 0 3px color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 16%,transparent)} .ai-shot-dialog .ai-shot-term .ai-shot-pic{width:28px;height:28px;border-radius:7px} .ai-shot-dialog .ai-shot-term__more{color:var(--muted,#536174)} .ai-shot-dialog .ai-shot-grid{border:0;border-radius:12px;background:var(--surface,#eef2f6);padding:8px} .ai-shot-dialog .ai-shot-grid__tile{border:1px solid transparent;border-radius:9px;background:var(--panel-bg,#fff);color:var(--muted,#536174);padding:4px} .ai-shot-dialog .ai-shot-grid__tile:hover{border-color:var(--line-strong,rgba(23,32,51,.16))} .ai-shot-dialog .ai-shot-grid__tile:focus-visible{outline:none;border-color:var(--switch-on-bg,#6d5dfc)} .ai-shot-dialog .ai-shot-grid__tile.is-on{border:1px solid var(--switch-on-bg,#6d5dfc);box-shadow:0 0 0 2px color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 18%,transparent);color:var(--ink,#172033);padding:4px} .ai-shot-dialog .ai-shot-grid__tile .ai-shot-pic{border-radius:6px} .ai-shot-dialog .ai-shot-editor__tag{border:0;border-radius:999px;padding:2px 10px;line-height:18px;background:var(--surface,#eef2f6);color:var(--muted,#536174);opacity:1} .ai-shot-dialog .ai-shot-editor__tag.is-on{background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 14%,transparent);color:var(--switch-on-bg,#6d5dfc);border:0} .ai-shot-dialog .ai-shot-editor__add{height:30px;border:1px dashed var(--line-strong,rgba(23,32,51,.16));border-radius:10px;color:var(--muted,#536174);width:100%;justify-self:stretch} .ai-shot-dialog .ai-shot-editor__icon{border:1px solid var(--line,rgba(23,32,51,.09));border-radius:8px;background:var(--control-surface,#f7f9fc);color:var(--muted,#536174);height:28px;width:28px} .ai-shot-dialog .ai-shot-editor__line{grid-template-columns:132px minmax(0,1fr) 80px 28px 28px} .ai-shot-dialog .ai-shot-editor__hint{color:var(--muted,#536174);opacity:1} .ai-shot-dialog .ai-shot-editor__foot button{border-radius:10px;padding:7px 14px;font-size:12px} .ai-shot-dialog .ai-shot-editor__foot .ai-assistant__secondary:not(.ai-shot-editor__apply){background:var(--panel-bg,#fff);border:1px solid var(--line-strong,rgba(23,32,51,.16));color:var(--ink,#172033)} .ai-shot-dialog .ai-shot-editor__apply{padding:7px 16px!important} .ai-shot-dialog .ai-shot-editor{gap:12px} .ai-shot-pic.is-auto{background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 14%,var(--panel-bg,#fff))} .ai-shot-pic.is-auto::after{content:"";position:absolute;inset:0;margin:auto;width:42%;max-width:28px;aspect-ratio:1;background:var(--switch-on-bg,#6d5dfc);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/%3E%3C/svg%3E") center/contain no-repeat} .ai-shot-term .ai-shot-pic.is-auto::after{width:60%} .ai-shot-dialog{color-scheme:light} html[data-theme="dark"] .ai-shot-dialog{color-scheme:dark} .ai-shot-dialog .ai-shot-editor select{appearance:none;-webkit-appearance:none;padding-right:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23858a94' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:12px;cursor:pointer} .ai-shot-dialog .ai-shot-editor select option{background:var(--panel-bg,#fff);color:var(--ink,#172033)} .ai-shot-editor__spacer{flex:1} .ai-shot-dialog .ai-shot-speaker{position:relative;min-width:0} .ai-shot-dialog .ai-shot-speaker__button{display:flex;align-items:center;gap:6px;width:100%;height:32px;padding:0 10px;border:1px solid var(--line,rgba(23,32,51,.09));border-radius:10px;background:var(--control-surface,#f7f9fc);color:var(--ink,#172033);font:inherit;font-size:12px;cursor:pointer;text-align:left} .ai-shot-dialog .ai-shot-speaker__button:hover{border-color:var(--line-strong,rgba(23,32,51,.16))} .ai-shot-dialog .ai-shot-speaker__button[aria-expanded="true"],.ai-shot-dialog .ai-shot-speaker__button:focus-visible{outline:none;border-color:var(--switch-on-bg,#6d5dfc);box-shadow:0 0 0 3px color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 16%,transparent)} .ai-shot-dialog .ai-shot-speaker__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ai-shot-dialog .ai-shot-speaker__menu{position:absolute;z-index:5;left:0;top:calc(100% + 4px);min-width:100%;width:max-content;max-width:240px;padding:4px;border:1px solid var(--line-strong,rgba(23,32,51,.16));border-radius:10px;background:var(--panel-bg,#fff);box-shadow:var(--shadow-lg,0 18px 42px rgba(23,32,51,.1));display:grid;gap:2px} .ai-shot-dialog .ai-shot-speaker__option{display:block;width:100%;text-align:left;padding:6px 10px;border:0;border-radius:7px;background:none;color:var(--ink,#172033);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-shot-dialog .ai-shot-speaker__option:hover,.ai-shot-dialog .ai-shot-speaker__option:focus-visible{outline:none;background:var(--surface,#eef2f6)} .ai-shot-dialog .ai-shot-speaker__option.is-on{color:var(--switch-on-bg,#6d5dfc);background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 12%,transparent)} /* "Add a narrator" (2026-10-05, the user, A 안): the last choice, under a line, while the work has no voice. */ .ai-shot-dialog .ai-shot-speaker__option.is-new:not(.is-on){margin-top:4px;border-top:1px solid var(--line,rgba(23,32,51,.12));border-radius:0 0 7px 7px;padding-top:8px;color:var(--switch-on-bg,#6d5dfc);font-weight:600} .ai-shot-dialog .ai-shot-editor__add{cursor:pointer;transition:border-color .15s,color .15s,background-color .15s} .ai-shot-dialog .ai-shot-editor__add:hover:not(:disabled),.ai-shot-dialog .ai-shot-editor__add:focus-visible{outline:none;border-color:var(--switch-on-bg,#6d5dfc);color:var(--switch-on-bg,#6d5dfc);background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 8%,transparent)} .ai-shot-dialog .ai-shot-editor__icon:hover:not(:disabled){border-color:var(--line-strong,rgba(23,32,51,.16));color:var(--ink,#172033)} /* The scene's shot row as one button (2026-10-02, the user, A 안): a soft bar of the shot size, angle, camera and sound; on hover the whole bar lights up, ringed in the accent, with "Edit" at its end. */ .ai-agent-plan__shot-tags{gap:2px 6px;padding:3px 6px;border:1px solid transparent;border-radius:8px;background:var(--surface,#eef2f6);align-items:center} .ai-agent-plan__shot-tags .ai-agent-plan__shot-tag{border:0;padding:0 2px;background:none;opacity:1;color:var(--muted,#536174)} .ai-agent-plan__shot-tags .ai-agent-plan__shot-tag--icon::before{opacity:.75} .ai-agent-plan__shot-tags.is-editable{cursor:pointer;transition:background-color .15s,border-color .15s} .ai-agent-plan__shot-tags.is-editable:hover,.ai-agent-plan__shot-tags.is-editable:focus-visible{outline:none;background:var(--surface-strong,#dce4ed);border-color:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 55%,transparent)} .ai-agent-plan__shot-tags.is-editable:hover .ai-agent-plan__shot-tag,.ai-agent-plan__shot-tags.is-editable:focus-visible .ai-agent-plan__shot-tag{border-color:transparent;color:var(--ink,#172033)} .ai-agent-plan__shot-edit{display:none;margin-left:auto;align-items:center;gap:3px;font-size:11px;line-height:16px;color:var(--switch-on-bg,#6d5dfc);font-weight:600} .ai-agent-plan__shot-edit::before{content:"";width:10px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") center/contain no-repeat} .ai-agent-plan__shot-tags.is-editable:hover .ai-agent-plan__shot-edit,.ai-agent-plan__shot-tags.is-editable:focus-visible .ai-agent-plan__shot-edit{display:inline-flex} .ai-agent-plan__shot-tag[data-icon="framing"]{--chip-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4v12a2 2 0 0 0 2 2h10'/%3E%3Cpath d='M4 8h12a2 2 0 0 1 2 2v10'/%3E%3C/svg%3E")} /* A scene's lines, whole (2026-10-05, the user): speaker · tone small, the words bold, a yellow rule on the left. */ /* Lighter (2026-10-05, the user: the bar ran each line's height): a 2px rule beside the words only, room between lines, and each speaker one colour (data-tone 0~4: the declared people in order, then the voices). */ .ai-agent-plan__lines{display:grid;gap:10px;margin:8px 0 2px 26px} /* On the scene text's left edge, the speaker tight on its words (2026-10-05, the user): the body's paragraph margin does not reach here. */ .ai-agent-plan__scene-body .ai-agent-plan__lines{margin:8px 0 2px 0;gap:12px} .ai-agent-plan__scene-body .ai-agent-plan__lines .ai-agent-plan__line p{margin:0} .ai-agent-plan__scene-body .ai-agent-plan__lines .ai-agent-plan__line-who{margin-bottom:1px;line-height:1.35} .ai-agent-plan__line{--line-c:#d9a52b;padding:0} .ai-agent-plan__line[data-tone="1"]{--line-c:#4a9fd8} .ai-agent-plan__line[data-tone="2"]{--line-c:#9b7be0} .ai-agent-plan__line[data-tone="3"]{--line-c:#3fa877} .ai-agent-plan__line[data-tone="4"]{--line-c:#e07a5f} .ai-agent-plan__line-who{margin:0 0 2px;font-size:11.5px;line-height:1.4;color:var(--muted,#697586)} .ai-agent-plan__line-name{color:var(--line-c);font-weight:600} .ai-assistant__audio-scene-lines{display:grid;border:1px solid var(--line,rgba(127,127,127,.25));border-radius:8px;overflow:hidden;font-size:13px} .ai-assistant__audio-scene-line{display:grid;grid-template-columns:82px minmax(0,1fr) 28px;gap:8px;align-items:start;padding:8px 10px;border-top:1px solid var(--line,rgba(127,127,127,.18))} .ai-assistant__audio-scene-line:first-child{border-top:0} .ai-assistant__audio-scene-line.is-quiet{opacity:.65} .ai-assistant__audio-scene-time{font-variant-numeric:tabular-nums;color:var(--muted,#8a8a8a)} .ai-assistant__audio-scene-go{border:0;background:none;color:inherit;cursor:pointer;padding:0 4px;font-size:14px} .ai-assistant__audio-scene-empty{margin:0;font-size:13px;color:var(--muted,#8a8a8a)} .ai-agent-plan__line-say{margin:0;font-size:13px;line-height:1.5;font-weight:600;color:var(--ink,#172033);overflow-wrap:anywhere} html[data-theme="dark"] .ai-agent-plan__line-say{color:#eceef2} .ai-agent-plan__shot-tag[data-icon="composition"]{--chip-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M9 5v14M15 5v14M3 12h18'/%3E%3C/svg%3E")} .ai-agent-plan__shot-tag[data-icon="angle"]{--chip-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M22 12c-2.7 4.7-6 7-10 7s-7.3-2.3-10-7c2.7-4.7 6-7 10-7s7.3 2.3 10 7'/%3E%3C/svg%3E")} .ai-assistant__scene-change-fields{grid-column:1/-1;margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:var(--muted,#536174)} .ai-assistant__scene-change-fields li::before{content:"·";margin-right:4px;opacity:.6} /* The scene body as the edit button (2026-10-02, the user, B 안): no bar around the chips; the body lights up on hover and the title line's pencil with it. */ .ai-agent-plan__scene-body{margin:4px 0 0 18px;padding:4px 6px;border-radius:9px;border:1px solid transparent} .ai-agent-plan__scenes .ai-agent-plan__scene-body>p{margin:0} .ai-agent-plan__scene-body .ai-agent-plan__shot-tags{margin:4px 0 0;padding:0;background:none;border:0} .ai-agent-plan__scene-body .ai-agent-plan__shot-edit{display:none!important} .ai-agent-plan__scene-body.is-editable{cursor:pointer;transition:background-color .15s,border-color .15s} .ai-agent-plan__scene-body.is-editable:hover,.ai-agent-plan__scene-body.is-editable:focus-visible{outline:none;background:var(--surface,#eef2f6);border-color:var(--line,rgba(23,32,51,.09))} .ai-agent-plan__scene-body.is-editable:hover .ai-agent-plan__shot-tag{color:var(--ink,#172033)} .ai-agent-plan__scene-edit{flex:none;align-self:center;width:24px;height:24px;padding:0;border-radius:7px;border:1px solid var(--line,rgba(23,32,51,.09));background:transparent;color:var(--muted,#536174);cursor:pointer;display:grid;place-items:center;transition:background-color .15s,border-color .15s,color .15s} .ai-agent-plan__scene-edit::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") center/contain no-repeat} .ai-agent-plan__scene-edit:hover,.ai-agent-plan__scene-edit:focus-visible,.ai-agent-plan__scene.has-scene-edit:has(.ai-agent-plan__scene-body:hover) .ai-agent-plan__scene-edit{outline:none;background:var(--switch-on-bg,#6d5dfc);border-color:var(--switch-on-bg,#6d5dfc);color:#fff} .ai-shot-dialog .ai-shot-editor textarea{font:inherit;font-size:12px;line-height:1.5;min-height:52px;padding:7px 10px;border:1px solid var(--line,rgba(23,32,51,.09));border-radius:10px;background:var(--control-surface,#f7f9fc);color:var(--ink,#172033);resize:vertical;width:100%;box-sizing:border-box} .ai-shot-dialog .ai-shot-editor textarea:focus{outline:none;border-color:var(--switch-on-bg,#6d5dfc);box-shadow:0 0 0 3px color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 16%,transparent)} /* The pencil at the right end of the scene's title line, away from the fold mark (2026-10-02, the user). */ .ai-agent-plan__scene.has-scene-edit>summary{width:auto;align-self:stretch;box-sizing:border-box} .ai-agent-plan__scene.has-scene-edit>summary .ai-agent-plan__scene-edit{margin-left:auto;order:2} .ai-agent-plan__scene-edit:disabled{opacity:.4;cursor:not-allowed;background:transparent} .ai-agent-plan__decl-open:disabled{opacity:.4;cursor:not-allowed} .ai-agent-plan__scene-body.is-waiting{cursor:progress} .ai-agent-plan__scene.has-scene-edit>summary .ai-agent-plan__scene-title{flex:0 1 auto;min-width:0} /* A clip card's edit menu: its scenes (2026-10-02, the user). */ .ai-assistant__clip-scene-menu{min-width:220px;max-width:300px;padding:6px;border-radius:12px;border:1px solid var(--line,rgba(23,32,51,.09));background:var(--panel,#fff);box-shadow:0 12px 32px rgba(15,23,42,.22);display:grid;gap:2px} .ai-assistant__clip-scene-menu-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:8px;background:transparent;color:var(--ink,#172033);font:inherit;font-size:12px;text-align:left;cursor:pointer} .ai-assistant__clip-scene-menu-item b{font-variant-numeric:tabular-nums;color:var(--muted,#536174);font-weight:600} .ai-assistant__clip-scene-menu-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .ai-assistant__clip-scene-menu-item small{color:var(--muted,#536174);font-size:11px} .ai-assistant__clip-scene-menu-item:hover,.ai-assistant__clip-scene-menu-item:focus-visible{outline:none;background:var(--surface,#eef2f6)} /* ② 배경음악·나레이션 넣기(2026-10-02, 사용자 A안): 클립 아래 자기 단계, 한 줄 플레이어 — 재생 · 들어 있는 것과 시간 · 나레이션 쉬는 구간이 보이는 막대 · 첫 대사 · 오른쪽 다시 만들기. */ .ai-assistant .ai-assistant__board-music { margin:18px 0 4px; } .ai-assistant .ai-assistant__board-music:has(> .ai-assistant__board-music-list:empty) { display:none; } .ai-assistant .ai-assistant__clip--music.is-row { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px; padding:12px 14px; width:auto; max-width:none; } .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-thumb { aspect-ratio:auto; width:auto; min-width:0; height:auto; min-height:0; padding:0; background:none; border:0; border-radius:0; overflow:visible; } .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-thumb:not(.is-player) { width:260px; min-height:64px; border-radius:10px; overflow:hidden; background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 10%,transparent); } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-audio { display:none; } /* The narration captions switch on the finished card (2026-10-05, the user). */ .ai-assistant .ai-assistant__board-captions { display:grid; gap:6px; padding:12px 14px; border:1px solid var(--line,#e3e4e9); border-radius:12px; } .ai-assistant .ai-assistant__board-captions[hidden] { display:none; } .ai-assistant .ai-assistant__board-captions-switch { display:inline-flex; align-items:center; gap:10px; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; justify-self:start; } .ai-assistant .ai-assistant__board-captions-switch b { font-size:13px; font-weight:600; } .ai-assistant .ai-assistant__board-captions-knob { position:relative; width:34px; height:20px; flex:none; border-radius:999px; background:#8a8f9c; transition:background .15s; } .ai-assistant .ai-assistant__board-captions-knob::after { content:""; position:absolute; left:3px; top:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .15s; } .ai-assistant .ai-assistant__board-captions-switch.is-on .ai-assistant__board-captions-knob { background:var(--switch-on-bg,#6d5dfc); } .ai-assistant .ai-assistant__board-captions-switch.is-on .ai-assistant__board-captions-knob::after { left:17px; } .ai-assistant .ai-assistant__board-captions-hint { font-size:11.5px; color:var(--muted,#5a6679); } .ai-assistant .ai-assistant__board-captions-hint[hidden] { display:none; } /* The switch with its ⓘ, and the preview strip (2026-10-05, the user: B 안). */ .ai-assistant .ai-assistant__board-captions-head { display:flex; align-items:center; gap:8px; } .ai-assistant .ai-assistant__board-captions-info { font-size:13px; color:var(--muted,#5a6679); cursor:help; } .ai-assistant .ai-assistant__board-captions-preview { position:relative; height:56px; border-radius:8px; overflow:hidden; background:radial-gradient(120% 140% at 18% 0%,rgba(139,124,246,.42) 0%,transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(130,70,199,.38) 0%,transparent 60%),linear-gradient(135deg,#1d1a2c 0%,#262140 55%,#2e2349 100%); } /* Darker, in the site's colours (2026-10-05, the user); a clip behind is dimmed a little so the sample reads on any frame. */ .ai-assistant .ai-assistant__board-captions-preview-img::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,12,20,.15) 0%,rgba(14,12,20,.45) 100%); } .ai-assistant .ai-assistant__board-captions-preview[hidden] { display:none; } .ai-assistant .ai-assistant__board-captions-preview-img { position:absolute; inset:0; background-size:cover; background-position:center 72%; background-repeat:no-repeat; } .ai-assistant .ai-assistant__board-captions-cue { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:max-content; max-width:92%; white-space:nowrap; text-align:center; line-height:1.3; color:#fff; pointer-events:none; } .ai-assistant .ai-assistant__board-captions-cue.is-cinema { letter-spacing:.02em; text-shadow:0 0 1px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.8); } .ai-assistant .ai-assistant__board-captions-cue.is-tube { letter-spacing:.02em; background:rgba(0,0,0,.72); padding:.45em .7em; text-shadow:none; } .ai-assistant .ai-assistant__board-captions-cue.is-show { letter-spacing:.02em; text-shadow:.1em 0 0 #102040,-.1em 0 0 #102040,0 .1em 0 #102040,0 -.1em 0 #102040,.07em .07em 0 #102040,-.07em .07em 0 #102040,.07em -.07em 0 #102040,-.07em -.07em 0 #102040,0 .16em .14em rgba(0,0,0,.6); } .ai-assistant .ai-assistant__board-captions-cue.is-mood { letter-spacing:.07em; text-shadow:0 0 .3em rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.6); } .ai-assistant .ai-assistant__board-captions-step { position:absolute; top:50%; transform:translateY(-50%); width:22px; height:22px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:10px; cursor:pointer; } .ai-assistant .ai-assistant__board-captions-step:disabled { opacity:.25; cursor:default; } .ai-assistant .ai-assistant__board-captions-step.is-back { left:5px; } .ai-assistant .ai-assistant__board-captions-step.is-next { right:5px; } .ai-assistant .ai-assistant__board-captions-count { position:absolute; top:4px; right:7px; font-size:10px; color:rgba(255,255,255,.85); text-shadow:0 1px 2px rgba(0,0,0,.8); } /* The captions' look (2026-10-05, the user: docs/mockups/final-caption-style.html). */ .ai-assistant .ai-assistant__board-captions-opts { display:grid; gap:8px; margin-top:2px; } .ai-assistant .ai-assistant__board-captions-opts.is-off { opacity:.4; pointer-events:none; } /* Before there is anything to mix (2026-10-05, the user): the mixer dimmed with its line; the captions' switch dimmed. */ .ai-assistant .ai-assistant__board-mixer.is-waiting :is(.ai-assistant__board-mixer-row,.ai-assistant__board-mixer-chips,.ai-assistant__board-mixer-preview) { opacity:.45; } .ai-assistant .ai-assistant__board-mixer-wait { font-size:11.5px; color:var(--muted,#5a6679); } .ai-assistant .ai-assistant__board-mixer-wait[hidden] { display:none; } .ai-assistant .ai-assistant__board-captions.is-waiting .ai-assistant__board-captions-switch { opacity:.45; cursor:default; } /* 아직 켤 수 없을 때는 예시 자막도 스위치처럼 흐리게(사용자 10/6); 아래 고르기 칸은 is-off로 흐리고 막음 */ .ai-assistant .ai-assistant__board-captions.is-waiting .ai-assistant__board-captions-cue { opacity:.45; } .ai-assistant .ai-assistant__board-captions-row { display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px; align-items:center; } .ai-assistant .ai-assistant__board-captions-label { font-size:12px; color:var(--muted,#5a6679); } .ai-assistant .ai-assistant__board-captions-seg { display:flex; flex-wrap:wrap; gap:5px; } .ai-assistant .ai-assistant__board-captions-chip { border:1px solid var(--line-strong,#c9cdd6); background:none; color:inherit; border-radius:8px; padding:2px 9px; font:inherit; font-size:12px; cursor:pointer; } .ai-assistant .ai-assistant__board-captions-chip.is-on, .ai-assistant .ai-assistant__board-captions-color.is-on { border-color:var(--switch-on-bg,#6d5dfc); box-shadow:0 0 0 2px color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 30%,transparent); } .ai-assistant .ai-assistant__board-captions-chip.is-on { background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 16%,transparent); } .ai-assistant .ai-assistant__board-captions-color { width:22px; height:22px; padding:0; border-radius:50%; border:1px solid rgba(0,0,0,.25); cursor:pointer; } /* The chosen colour (2026-10-05, the user: it did not stand out): a ring with a gap, a little larger, a check mark. */ .ai-assistant .ai-assistant__board-captions-seg:has(.ai-assistant__board-captions-color) { gap:9px; padding:3px 2px; } .ai-assistant .ai-assistant__board-captions-color { position:relative; transition:transform .12s; } .ai-assistant .ai-assistant__board-captions-color.is-on { transform:scale(1.12); border-color:transparent; box-shadow:0 0 0 2px var(--panel-bg,#fff),0 0 0 4px var(--switch-on-bg,#6d5dfc) !important; } .ai-assistant .ai-assistant__board-captions-color.is-on::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font-size:12px; font-weight:800; line-height:1; color:#1b1a22; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-captions-color.is-on { box-shadow:0 0 0 2px #221f2e,0 0 0 4px #8b7cf6 !important; } .ai-assistant .ai-assistant__board-captions-combo { position:relative; } .ai-assistant .ai-assistant__board-captions-font { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--line-strong,#c9cdd6); background:var(--control-surface,#f7f9fc); color:inherit; border-radius:8px; padding:4px 10px; font:inherit; font-size:13px; cursor:pointer; } .ai-assistant .ai-assistant__board-captions-font i { font-style:normal; font-size:10px; color:var(--muted,#5a6679); } .ai-assistant .ai-assistant__board-captions-menu { position:absolute; left:0; right:0; overflow-x:hidden; top:calc(100% + 4px); z-index:20; display:grid; gap:2px; padding:5px; border:1px solid var(--line-strong,#c9cdd6); border-radius:10px; background:var(--panel-bg,#fff); box-shadow:0 10px 28px rgba(0,0,0,.2); max-height:260px; overflow-y:auto; overflow-x:hidden; } .ai-assistant .ai-assistant__board-captions-menu[hidden] { display:none; } .ai-assistant .ai-assistant__board-captions-opt { display:flex; align-items:baseline; justify-content:space-between; gap:8px; border:0; background:none; color:inherit; text-align:left; padding:6px 8px; border-radius:7px; font:inherit; font-size:13px; cursor:pointer; } .ai-assistant .ai-assistant__board-captions-opt small { font-size:11px; color:var(--muted,#5a6679); flex:none; } .ai-assistant .ai-assistant__board-captions-name { flex:1; min-width:0; } .ai-assistant .ai-assistant__board-captions-name { display:flex; align-items:center; gap:10px; min-width:0; } .ai-assistant .ai-assistant__board-captions-name-text { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ai-assistant .ai-assistant__board-captions-sample { display:block; flex:0 1 134px; min-width:40px; height:22px; margin-left:auto; background:currentColor; opacity:.85; -webkit-mask:var(--cap-font) right center / auto 100% no-repeat; mask:var(--cap-font) right center / auto 100% no-repeat; } .ai-assistant .ai-assistant__board-captions-opt:hover, .ai-assistant .ai-assistant__board-captions-opt:focus-visible { background:color-mix(in srgb,currentColor 7%,transparent); outline:none; } .ai-assistant .ai-assistant__board-captions-opt.is-on { background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 18%,transparent); } html[data-theme="dark"] .ai-assistant .ai-assistant__board-captions-font { background:rgba(0,0,0,.2); border-color:#4a4466; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-captions-menu { background:#2a2638; border-color:#4a4466; box-shadow:0 10px 28px rgba(0,0,0,.45); } html[data-theme="dark"] .ai-assistant .ai-assistant__board-captions-chip { border-color:#4a4466; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-captions { border-color:#352f4d; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-captions-knob { background:#4a4a55; } /* The extra audio being made (2026-10-05, the user: A 안, docs/mockups/extra-audio-creating.html): the finished row's frame. */ .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-thumb.is-making:not(.is-player) { width:auto; min-height:0; background:none; border-radius:0; overflow:visible; } .ai-assistant .ai-assistant__clip-audio-spin { position:relative; display:block; width:40px; height:40px; border-radius:50%; background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 14%,transparent); } .ai-assistant .ai-assistant__clip-audio-spin::after { content:""; position:absolute; inset:4px; border-radius:50%; border:3px solid color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 25%,transparent); border-top-color:var(--switch-on-bg,#6d5dfc); animation:ai-audio-spin 1s linear infinite; } @keyframes ai-audio-spin { to { transform:rotate(360deg); } } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-audio-making { grid-column:1; display:flex; align-items:baseline; gap:8px; font-size:13px; min-width:0; } .ai-assistant .ai-assistant__clip-audio-making b { font-weight:600; } .ai-assistant .ai-assistant__clip-audio-making .ai-assistant__clip-prep-clock { color:var(--switch-on-bg,#6d5dfc); font-variant-numeric:tabular-nums; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-audio-making .ai-assistant__clip-prep-clock { color:#c9c4ff; } .ai-assistant .ai-assistant__clip-audio-making small { font-size:11.5px; color:var(--muted,#5a6679); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ai-assistant .ai-assistant__clip-audio-making .ai-assistant__clip-count { margin-left:auto; color:var(--muted,#5a6679); font-variant-numeric:tabular-nums; } .ai-assistant .ai-assistant__clip-audio-bar.is-flowing { overflow:hidden; cursor:default; } .ai-assistant .ai-assistant__clip-audio-bar.is-flowing::after { content:""; position:absolute; top:0; bottom:0; width:30%; border-radius:999px; background:linear-gradient(90deg,transparent,var(--switch-on-bg,#6d5dfc),transparent); animation:ai-audio-flow 1.6s ease-in-out infinite; } @keyframes ai-audio-flow { from { left:-30%; } to { left:100%; } } @media (prefers-reduced-motion: reduce) { .ai-assistant .ai-assistant__clip-audio-spin::after, .ai-assistant .ai-assistant__clip-audio-bar.is-flowing::after { animation:none; } } .ai-assistant .ai-assistant__clip-audio-play { width:40px; height:40px; border-radius:50%; border:0; display:grid; place-items:center; background:linear-gradient(110deg,#6254d9,#8246c7); color:#fff; cursor:pointer; box-shadow:0 6px 16px rgba(98,84,217,.32); } .ai-assistant .ai-assistant__clip-audio-play::before { content:""; width:0; height:0; margin-left:3px; border-left:12px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent; } .ai-assistant .ai-assistant__clip-audio-play.is-playing::before { width:11px; height:13px; margin:0; border:0; background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px,currentColor 7px 11px); } .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-meta { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:7px; padding:0; min-width:0; } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-line { grid-column:1; margin:0; display:flex; align-items:center; gap:8px; } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-line .ai-assistant__clip-count { margin-left:auto; font-variant-numeric:tabular-nums; } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-audio-badges { position:static; display:flex; gap:6px; margin:0; } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-audio-bar { grid-column:1; } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-scene { grid-column:1; margin:0; } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-scene-title { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; color:var(--muted,#5a6679); } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-foot { grid-column:2; grid-row:1 / span 3; align-self:center; margin:0; padding:0; border:0; } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-foot .ai-assistant__clip-refs { display:none; } .ai-assistant .ai-assistant__clip-audio-bar { position:relative; height:6px; border-radius:999px; background:var(--line,#e3e4e9); cursor:pointer; } .ai-assistant .ai-assistant__clip-audio-fill { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:999px; background:var(--switch-on-bg,#6d5dfc); pointer-events:none; } .ai-assistant .ai-assistant__clip-audio-quiet { position:absolute; top:-3px; bottom:-3px; border-radius:3px; background:rgba(224,165,74,.28); pointer-events:none; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-audio-bar { background:#3a3552; } @media (max-width:640px) { .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-meta { grid-template-columns:minmax(0,1fr); } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-foot { grid-column:1; grid-row:auto; } } /* ③ 완성본 A안(2026-10-02, 사용자): 높이가 고정된 어두운 무대에 영상은 비율대로 가운데, 오른쪽은 폭 고정 패널 — 9:16도 같은 틀. */ .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-final, .ai-assistant .ai-assistant__board-final-card.is-portrait .ai-assistant__board-final { grid-template-columns:minmax(0,1fr) 360px; justify-content:stretch; align-items:stretch; } .ai-assistant .ai-assistant__board-final-card :is(.ai-assistant__board-result,.ai-assistant__board-final-empty,.ai-assistant__board-final-bulk) { box-sizing:border-box; height:auto; min-height:360px; aspect-ratio:auto; width:100%; } /* The stage grows with the card (2026-10-05, the user): the side panel decides the row's height, the video fills it at its ratio. */ .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-side { align-self:start; } .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-result { justify-content:center; padding:0; border-radius:12px; background:#0e0c14; overflow:hidden; } /* A 안(2026-10-06, the user): the video is as large as the stage allows, at its ratio, at any card width (no 540px stop). */ .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-result .ai-assistant__board-result-video { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; border-radius:0; box-shadow:none; } .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-result-caption { display:none; } .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-result:has(.ai-assistant__board-result-stage) { height:auto; background:none; overflow:visible; justify-content:flex-start; aspect-ratio:auto; } /* The stage keeps its height (2026-10-05, the user: while joining, the frame and its time line spilled over the head and the card's edge). */ .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-result-stage { flex:1 1 auto; display:flex; flex-direction:column; width:100%; } .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-result-stage .ai-assistant__generation-frame { flex:1 1 auto; width:100%; height:auto; min-height:300px; max-height:none; aspect-ratio:auto !important; } /* A taller video column (2026-10-04, the user: the video sat short, with bars at its sides): a landscape work fills the column's width (its aspect, 360–540px), and the column is never shorter than the side beside it (the mixer grew a third slider). Only the two-column layout — the narrow ones below keep their own heights. */ @media (min-width:901px) { @container (min-width:721px) { .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-final, .ai-assistant .ai-assistant__board-final-card.is-portrait .ai-assistant__board-final { align-items:stretch; } .ai-assistant .ai-assistant__board-final-card :is(.ai-assistant__board-result,.ai-assistant__board-final-empty,.ai-assistant__board-final-bulk) { height:auto; min-height:360px; } .ai-assistant .ai-assistant__board-final-card:not(.is-portrait) :is(.ai-assistant__board-result,.ai-assistant__board-final-empty,.ai-assistant__board-final-bulk) { aspect-ratio:var(--clip-aspect,16/9); } } } @media (max-width:900px) { .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-final, .ai-assistant .ai-assistant__board-final-card.is-portrait .ai-assistant__board-final { grid-template-columns:minmax(0,1fr); } .ai-assistant .ai-assistant__board-final-card :is(.ai-assistant__board-result,.ai-assistant__board-final-empty,.ai-assistant__board-final-bulk) { height:min(360px,62vw); } } /* 추가 오디오 창 카드 1안(2026-10-02, 사용자: 오른쪽만 둥근 게 어색): 옆 색 줄을 없애고 네 모서리 모두 둥글게, 아이콘 타일로 구분. */ dialog.ai-assistant__music-dialog .ai-assistant__audio-card { border:1px solid var(--line,#e3e4e9); border-radius:12px; overflow:hidden; } dialog.ai-assistant__music-dialog .ai-assistant__audio-card > .ai-assistant__audio-toggle, dialog.ai-assistant__music-dialog .ai-assistant__audio-card > .ai-assistant__audio-toggle[aria-pressed="false"] { border-radius:0; } dialog.ai-assistant__music-dialog .ai-assistant__audio-card > .ai-assistant__audio-toggle[aria-pressed="true"] { background:transparent; } dialog.ai-assistant__music-dialog .ai-assistant__audio-card .ai-assistant__audio-toggle-icon { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:15px; color:var(--audio-edge); background:color-mix(in srgb,var(--audio-edge) 16%,transparent); } html[data-theme="dark"] .ai-assistant__clip-scene-menu { background:#221f2e; border-color:#352f4d; box-shadow:0 14px 36px rgba(0,0,0,.5); } html[data-theme="dark"] .ai-assistant__clip-scene-menu-item { color:#ece9fb; } html[data-theme="dark"] .ai-assistant__clip-scene-menu-item :is(b,small) { color:#a8a3c0; } html[data-theme="dark"] .ai-assistant__clip-scene-menu-item:is(:hover,:focus-visible) { background:rgba(157,144,255,.14); } /* 단계 사이를 넓게(2026-10-02, 사용자: 단계가 붙어 보여 눈에 잘 안 들어옴): ①→②, ②→③ 모두 40px. */ .ai-assistant .ai-assistant__board-music { margin:40px 0 0; } .ai-assistant .ai-assistant__board-foot:has(.ai-assistant__board-final-card) { margin-top:40px; } /* The bar is dragged (2026-10-02, the user): a taller hit area, a knob at the playhead, no text selection or scrolling while dragging. */ .ai-assistant .ai-assistant__clip-audio-bar { touch-action:none; user-select:none; } .ai-assistant .ai-assistant__clip-audio-bar::before { content:""; position:absolute; left:0; right:0; top:-9px; bottom:-9px; } .ai-assistant .ai-assistant__clip-audio-fill::after { content:""; position:absolute; right:-6px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px var(--switch-on-bg,#6d5dfc); opacity:0; transition:opacity .12s; } .ai-assistant .ai-assistant__clip-audio-bar:hover .ai-assistant__clip-audio-fill::after, .ai-assistant .ai-assistant__clip-audio-bar.is-dragging .ai-assistant__clip-audio-fill::after { opacity:1; } /* The scene's prompt written by hand (design §5.1, 2026-10-02, the user). */ .ai-shot-dialog .ai-shot-editor__manual { border:1px solid var(--line,rgba(23,32,51,.09)); border-radius:10px; padding:8px 12px; } .ai-shot-dialog .ai-shot-editor__manual > summary { cursor:pointer; font-size:12px; font-weight:600; display:flex; align-items:center; gap:8px; list-style:none; } .ai-shot-dialog .ai-shot-editor__manual > summary::before { content:"▸"; font-size:10px; color:var(--muted,#536174); transition:transform .15s; } .ai-shot-dialog .ai-shot-editor__manual[open] > summary::before { transform:rotate(90deg); } .ai-shot-dialog .ai-shot-editor__manual > summary::-webkit-details-marker { display:none; } .ai-shot-dialog .ai-shot-editor__manual-badge { font-size:11px; font-weight:600; padding:1px 8px; border-radius:999px; color:#b7791f; background:rgba(183,121,31,.14); } .ai-shot-dialog .ai-shot-editor__manual textarea { margin-top:6px; min-height:84px; } .ai-shot-dialog .ai-shot-editor__manual .ai-shot-editor__hint { margin:6px 0 0; font-size:11.5px; color:var(--muted,#536174); } .ai-shot-dialog .ai-shot-editor__manual-back { margin-top:8px; font-size:12px; } .ai-shot-dialog .ai-shot-editor__problem { font-size:12px; color:#d9534f; } .ai-agent-plan__shot-tag--icon[data-icon="manual"] { color:#b7791f; } .ai-agent-plan__shot-tag[data-icon="manual"] { --chip-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); } /* Narrow board columns (2026-10-02, the user: the audio row's words broke letter by letter and the finished video vanished when the chat column was narrow — the window was wide, so the viewport queries never fired): lay out by the box's own width. */ .ai-assistant .ai-assistant__board-music-list, .ai-assistant .ai-assistant__board-final-card { container-type:inline-size; } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-audio-badge, .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-count, .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-remake { white-space:nowrap; } @container (max-width:560px) { .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-meta { grid-template-columns:minmax(0,1fr); } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-foot { grid-column:1; grid-row:auto; justify-self:start; } } @container (max-width:380px) { .ai-assistant .ai-assistant__clip--music.is-row { grid-template-columns:minmax(0,1fr); } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-line { flex-wrap:wrap; } } @container (max-width:720px) { .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-final, .ai-assistant .ai-assistant__board-final-card.is-portrait .ai-assistant__board-final { grid-template-columns:minmax(0,1fr); } .ai-assistant .ai-assistant__board-final-card :is(.ai-assistant__board-result,.ai-assistant__board-final-empty,.ai-assistant__board-final-bulk) { height:auto; aspect-ratio:var(--clip-aspect,16/9); max-height:420px; } .ai-assistant .ai-assistant__board-final-card.is-portrait :is(.ai-assistant__board-result,.ai-assistant__board-final-empty,.ai-assistant__board-final-bulk) { height:420px; aspect-ratio:auto; } } /* B 안 (2026-10-02, the user): the narration lane over the playhead, with names; the line under says what is heard now. */ .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-meta { grid-template-columns:minmax(0,1fr) auto; } /* The knob and the narration marks sit centred on the bar's 0% (half outside it): the gap leaves them clear of the lane names (2026-10-13, the user). */ .ai-assistant .ai-assistant__clip-audio-lanes { grid-column:1; display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px 20px; align-items:center; } .ai-assistant .ai-assistant__clip-audio-lanes.is-single { grid-template-columns:minmax(0,1fr); } .ai-assistant .ai-assistant__clip-audio-lane { font-size:11.5px; color:var(--muted,#5a6679); white-space:nowrap; } .ai-assistant .ai-assistant__clip-audio-narr { position:relative; height:16px; } .ai-assistant .ai-assistant__clip-audio-seg { position:absolute; top:0; bottom:0; box-sizing:border-box; border-radius:5px; background:rgba(29,158,117,.2); border:1px solid rgba(29,158,117,.5); transition:background-color .15s; } .ai-assistant .ai-assistant__clip-audio-seg.is-now { background:rgba(29,158,117,.55); } .ai-assistant .ai-assistant__clip-audio-gap { position:absolute; top:0; bottom:0; border-radius:5px; background:repeating-linear-gradient(135deg,rgba(183,121,31,.3) 0 4px,transparent 4px 8px); } .ai-assistant .ai-assistant__clip-audio-knob { position:absolute; top:50%; left:0; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px var(--switch-on-bg,#6d5dfc); pointer-events:none; transition:transform .12s; } .ai-assistant .ai-assistant__clip-audio-bar:hover .ai-assistant__clip-audio-knob, .ai-assistant .ai-assistant__clip-audio-bar.is-dragging .ai-assistant__clip-audio-knob { transform:scale(1.15); } .ai-assistant .ai-assistant__clip-audio-fill::after { display:none; } .ai-assistant .ai-assistant__clip-audio-now { grid-column:1; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted,#5a6679); min-width:0; } .ai-assistant .ai-assistant__clip-audio-now-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ai-assistant .ai-assistant__clip-audio-now .ai-assistant__clip-count { font-variant-numeric:tabular-nums; white-space:nowrap; } .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-foot { grid-row:1 / span 2; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-audio-seg { background:rgba(63,191,133,.2); border-color:rgba(63,191,133,.5); } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-audio-seg.is-now { background:rgba(63,191,133,.5); } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-audio-gap { background:repeating-linear-gradient(135deg,rgba(224,165,74,.28) 0 4px,transparent 4px 8px); } @container (max-width:560px) { .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-foot { grid-row:auto; } } /* The join button on the stage's bottom line (2026-10-02, the user): the side panel is as tall as the stage and the button sits at its foot; the note under the button keeps its place below it. */ .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-side { align-self:stretch; display:flex; flex-direction:column; gap:12px; } .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-side > .ai-assistant__board-finish-row { margin-top:auto; } @container (max-width:720px) { .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-side > .ai-assistant__board-finish-row { margin-top:0; } } /* The playhead bar sits in the lanes' second column (an older rule put it in the first, beside its own name). */ .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-audio-lanes > .ai-assistant__clip-audio-bar { grid-column:auto; } /* 줄 안의 재생 버튼·만드는 중 칸은 배경 없이(2026-10-06, 사용자: 버튼 뒤 사각형이 카드 배경과 달랐음 — 테마별 is-music 배경이 덮고 있었음) */ html .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-thumb:is(.is-player,.is-making) { background:none; } /* 배경음악만 있는 줄(2026-10-06, 사용자 시안): 이름·막대·시간·버튼을 재생 버튼과 한 줄, 세로 가운데에. 나레이션 칸이 있으면 기존 두 줄. */ .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-meta:has(> .ai-assistant__clip-audio-lanes.is-single) { grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; column-gap:12px; row-gap:8px; } /* Room between the label and the bar (2026-10-13, the user): the playhead knob stands half outside the bar at either end. */ .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-meta > .ai-assistant__clip-audio-lanes.is-single { padding-inline:14px 10px; } .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-meta:has(> .ai-assistant__clip-audio-lanes.is-single) > .ai-assistant__clip-audio-now { display:contents; } .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-meta:has(> .ai-assistant__clip-audio-lanes.is-single) > .ai-assistant__clip-audio-now > .ai-assistant__clip-audio-now-text { grid-column:1; grid-row:1; flex:none; max-width:180px; } .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-meta:has(> .ai-assistant__clip-audio-lanes.is-single) > .ai-assistant__clip-audio-lanes { grid-column:2; grid-row:1; } .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-meta:has(> .ai-assistant__clip-audio-lanes.is-single) > .ai-assistant__clip-audio-now > .ai-assistant__clip-count { grid-column:3; grid-row:1; } .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-meta:has(> .ai-assistant__clip-audio-lanes.is-single) > .ai-assistant__clip-foot { grid-column:4; grid-row:1; align-self:center; } @container (max-width:560px) { .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-meta:has(> .ai-assistant__clip-audio-lanes.is-single) > .ai-assistant__clip-foot { grid-column:1 / -1; grid-row:2; justify-self:start; } } /* The rewrite request box (2026-10-02, the user, A 안). */ dialog.ai-assistant__music-dialog .ai-assistant__audio-request { margin:0 0 10px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 45%,var(--line,#e3e4e9)); border-radius:10px; background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 7%,transparent); } dialog.ai-assistant__music-dialog .ai-assistant__audio-request[hidden] { display:none; } dialog.ai-assistant__music-dialog .ai-assistant__audio-request > p { margin:0 0 6px; font-size:12px; color:var(--muted,#5a6679); } dialog.ai-assistant__music-dialog .ai-assistant__audio-request-field { width:100%; box-sizing:border-box; min-height:52px; resize:vertical; font:inherit; font-size:13px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-request-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-request-chip { border:1px solid var(--line,#e3e4e9); background:transparent; color:var(--muted,#5a6679); border-radius:999px; padding:2px 10px; font:inherit; font-size:11.5px; cursor:pointer; } dialog.ai-assistant__music-dialog .ai-assistant__audio-request-chip:hover { color:var(--ink,#172033); border-color:var(--switch-on-bg,#6d5dfc); } dialog.ai-assistant__music-dialog .ai-assistant__audio-request-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; } dialog.ai-assistant__music-dialog .ai-assistant__audio-request-go { border:0; background:linear-gradient(110deg,#6254d9,#8246c7); color:#fff; font-weight:700; } dialog.ai-assistant__music-dialog .ai-assistant__audio-rewrite[aria-expanded="true"] { background:var(--switch-on-bg,#6d5dfc); color:#fff; border-color:var(--switch-on-bg,#6d5dfc); } html[data-theme="dark"] dialog.ai-assistant__music-dialog .ai-assistant__audio-request-chip:hover { color:#ece9fb; } /* 1번 (2026-10-02, the user): the narration lane shows where each line starts — a dot on a thin line; the dot of the line heard now glows, those passed are filled; a dot seeks there. */ .ai-assistant .ai-assistant__clip-audio-narr::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line,#e3e4e9); } .ai-assistant .ai-assistant__clip-audio-pin { position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; padding:0; border-radius:50%; box-sizing:border-box; border:2px solid #1d9e75; background:var(--panel-bg,#fff); cursor:pointer; z-index:1; transition:background-color .15s,box-shadow .15s; } .ai-assistant .ai-assistant__clip-audio-pin.is-done { background:#1d9e75; } .ai-assistant .ai-assistant__clip-audio-pin.is-now { background:#1d9e75; box-shadow:0 0 0 4px rgba(29,158,117,.25); } .ai-assistant .ai-assistant__clip-audio-pin:hover, .ai-assistant .ai-assistant__clip-audio-pin:focus-visible { outline:none; box-shadow:0 0 0 4px rgba(29,158,117,.3); } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-audio-narr::before { background:#3a3552; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-audio-pin { border-color:#3fbf85; background:#221f2e; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-audio-pin:is(.is-done,.is-now) { background:#3fbf85; } html[data-theme="dark"] .ai-assistant .ai-assistant__clip-audio-pin.is-now { box-shadow:0 0 0 4px rgba(63,191,133,.25); } /* Less empty height in the extra audio dialog (2026-10-02, the user: too tall): the parts start close to a few lines and grow by dragging; the count strip under them is thinner. */ dialog.ai-assistant__clip-editor.ai-assistant__music-dialog .ai-assistant__music-box { height:clamp(84px,11vh,130px); } dialog.ai-assistant__clip-editor.ai-assistant__music-dialog .ai-assistant__narration-box { height:clamp(84px,12vh,150px); } dialog.ai-assistant__music-dialog .ai-assistant__clip-editor-box .ai-video-prompt-toolbar { min-height:0; padding-top:2px; padding-bottom:4px; } /* The rewrite request as a popup dialog over the extra audio dialog (2026-10-02, the user). */ dialog.ai-assistant__audio-request-dialog { margin:auto; width:min(460px,calc(100vw - 32px)); padding:16px 18px; border:1px solid #e3e4e9; border-radius:14px; background:#fff; color:#172033; box-shadow:0 18px 48px rgba(15,23,42,.28); box-sizing:border-box; font-size:13px; } dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request-title { display:block; font-size:14px; margin-bottom:6px; } dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request > p { margin:0 0 8px; font-size:12px; color:#5a6679; } dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request-field { width:100%; box-sizing:border-box; min-height:72px; resize:vertical; font:inherit; font-size:13px; line-height:1.55; padding:8px 10px; border:1px solid #e3e4e9; border-radius:10px; background:#f7f9fc; color:inherit; } dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request-field:focus { outline:none; border-color:#6d5dfc; box-shadow:0 0 0 3px rgba(109,93,252,.16); } dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request-chip { border:1px solid #e3e4e9; background:transparent; color:#5a6679; border-radius:999px; padding:3px 10px; font:inherit; font-size:11.5px; cursor:pointer; } dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request-chip:hover { color:#172033; border-color:#6d5dfc; } dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; } dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request-foot button { min-height:34px; padding:0 14px; border-radius:9px; font:inherit; font-size:12.5px; cursor:pointer; border:1px solid #c9cdd6; background:transparent; color:inherit; } dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request-go { border:0 !important; background:linear-gradient(110deg,#6254d9,#8246c7) !important; color:#fff !important; font-weight:700; } html[data-theme="dark"] dialog.ai-assistant__audio-request-dialog { background:#221f2e; border-color:#352f4d; color:#ece9fb; box-shadow:0 18px 48px rgba(0,0,0,.55); } html[data-theme="dark"] dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request > p { color:#a8a3c0; } html[data-theme="dark"] dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request-field { background:#1b1924; border-color:#3a3552; } html[data-theme="dark"] dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request-chip { border-color:#3a3552; color:#a8a3c0; } html[data-theme="dark"] dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request-chip:hover { color:#ece9fb; border-color:#8b7cf6; } html[data-theme="dark"] dialog.ai-assistant__audio-request-dialog .ai-assistant__audio-request-foot button { border-color:#3a3552; } /* The music and the script boxes the same height (2026-10-02, the user: the script one shorter, to the music one). */ dialog.ai-assistant__clip-editor.ai-assistant__music-dialog .ai-assistant__narration-box { height:clamp(84px,11vh,130px); } /* ② before any extra audio (A 안, 2026-10-02): one row like the player row. */ .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-thumb.is-empty-row { display:flex; gap:8px; width:auto; min-height:0; background:none; border-radius:0; overflow:visible; } .ai-assistant .ai-assistant__clip-audio-tile { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:18px; color:var(--switch-on-bg,#6d5dfc); background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 16%,transparent); } .ai-assistant .ai-assistant__clip-audio-tile.is-narration { color:#1d9e75; background:rgba(29,158,117,.16); } .ai-assistant .ai-assistant__clip-audio-empty { grid-column:1; display:grid; gap:2px; min-width:0; } .ai-assistant .ai-assistant__clip-audio-empty b { font-size:13.5px; } .ai-assistant .ai-assistant__clip-audio-empty span { font-size:12px; color:var(--muted,#5a6679); } .ai-assistant .ai-assistant__clip-music-make.is-row-go { border:0; border-radius:10px; padding:9px 16px; font:inherit; font-weight:700; font-size:13px; color:#fff; background:linear-gradient(110deg,#6254d9,#8246c7); cursor:pointer; white-space:nowrap; box-shadow:0 6px 16px rgba(98,84,217,.3); width:auto; height:auto; } /* ③ remaining clips in the finished video's stage (A 안, 2026-10-02 — replaces the 9/29 row-only look): the card stays, the stage shows how many are made and the button; the side says when the join comes. */ html .ai-assistant .ai-assistant__board-final-card[data-state="none"]:has(.ai-assistant__board-final-bulk:not(:empty)) { padding:14px; border:1px solid var(--line,#e3e4e9); background:var(--panel-bg,#fff); } html .ai-assistant .ai-assistant__board-final-card[data-state="none"]:has(.ai-assistant__board-final-bulk:not(:empty)) > .ai-assistant__board-final-head { display:flex; } html .ai-assistant .ai-assistant__board-final-card[data-state="none"]:has(.ai-assistant__board-final-bulk:not(:empty)) .ai-assistant__board-final { grid-template-columns:minmax(0,1fr) 300px; } html .ai-assistant .ai-assistant__board-final-card[data-state="none"]:has(.ai-assistant__board-final-bulk:not(:empty)) .ai-assistant__board-side { display:flex; } html .ai-assistant .ai-assistant__board-foot:has(.ai-assistant__board-final-card[data-state="none"] .ai-assistant__board-final-bulk:not(:empty)) > .ai-assistant__board-step { display:flex; } /* The left side fills the row beside the settings column (2026-10-08, the user: the box stopped short of the column). */ html .ai-assistant .ai-assistant__board-final-card[data-state="none"] .ai-assistant__board-final-bulk:not(:empty) { height:auto; min-height:360px; align-self:stretch; box-sizing:border-box; display:grid; place-items:center; padding:20px; border:0; border-radius:12px; background:#0e0c14; aspect-ratio:auto; } .ai-assistant .ai-assistant__board-final-bulk > .ai-assistant__clip-bulk { width:min(420px,100%); margin:0; padding:0; border:0; background:none; box-shadow:none; color:#ece9fb; text-align:center; display:grid; gap:10px; justify-items:center; } .ai-assistant .ai-assistant__board-final-bulk > .ai-assistant__clip-bulk::after { content:attr(data-later); font-size:11.5px; color:#8f89aa; } .ai-assistant .ai-assistant__board-final-bulk .ai-assistant__clip-bulk-progress-line { font-size:13px; color:#d6d1f0; } .ai-assistant .ai-assistant__board-final-bulk .ai-assistant__clip-bulk-bar { width:220px; height:6px; border-radius:999px; background:rgba(214,209,240,.18); overflow:hidden; } .ai-assistant .ai-assistant__board-final-bulk .ai-assistant__clip-bulk-bar > i { display:block; height:100%; background:var(--switch-on-bg,#8b7cf6); } .ai-assistant .ai-assistant__board-final-bulk .ai-assistant__clip-bulk-head { justify-content:center; } .ai-assistant .ai-assistant__board-final-bulk .ai-assistant__clip-bulk-head > b { display:none; } .ai-assistant .ai-assistant__board-final-bulk .ai-assistant__clip-bulk.is-open :is(.ai-assistant__clip-bulk-spec,.ai-assistant__clip-bulk-cost,.ai-assistant__clip-bulk-note,.ai-assistant__clip-bulk-progress) { color:#d6d1f0; } .ai-assistant .ai-assistant__board-final-card[data-state="none"] .ai-assistant__board-side::after { content:attr(data-wait); margin-top:auto; font-size:12px; color:var(--muted,#5a6679); padding:10px 12px; border:1px dashed var(--line,#e3e4e9); border-radius:10px; text-align:center; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-final-card[data-state="none"]:has(.ai-assistant__board-final-bulk:not(:empty)) { background:#221f2e; border-color:#352f4d; } html[data-theme="dark"] .ai-assistant .ai-assistant__board-final-card[data-state="none"] .ai-assistant__board-side::after { border-color:#3a3552; color:#a8a3c0; } @container (max-width:720px) { html .ai-assistant .ai-assistant__board-final-card[data-state="none"]:has(.ai-assistant__board-final-bulk:not(:empty)) .ai-assistant__board-final { grid-template-columns:minmax(0,1fr); } html .ai-assistant .ai-assistant__board-final-card[data-state="none"] .ai-assistant__board-final-bulk:not(:empty) { height:auto; min-height:220px; } } /* ② waiting for the clips (2026-10-02): the button is dim. ③ the remaining-clips box sits bare in the stage, centred. */ .ai-assistant .ai-assistant__clip--music.is-row.is-waiting .ai-assistant__clip-music-make.is-row-go { opacity:.45; cursor:not-allowed; box-shadow:none; } html .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-final-bulk > .ai-assistant__clip-bulk { margin:0; padding:0; border:0; background:none; box-shadow:none; align-self:center; justify-self:center; } html .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-final-bulk > .ai-assistant__clip-bulk { gap:12px; } html .ai-assistant .ai-assistant__board-final-card .ai-assistant__board-final-bulk .ai-assistant__clip-bulk-bar { margin-top:-4px; } html .ai-assistant .ai-assistant__clip--music.is-row > .ai-assistant__clip-thumb.is-empty-row { display:flex; flex-direction:row; align-items:center; gap:8px; width:auto; height:auto; min-height:0; aspect-ratio:auto; padding:0; border:0; background:none; } html .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-music-make.is-row-go { display:inline-flex; align-items:center; gap:6px; width:auto; height:auto; min-height:36px; padding:0 16px; border:0; border-radius:10px; font-size:13px; font-weight:700; color:#fff; background:linear-gradient(110deg,#6254d9,#8246c7); box-shadow:0 6px 16px rgba(98,84,217,.3); } html .ai-assistant .ai-assistant__clip--music.is-row.is-waiting .ai-assistant__clip-music-make.is-row-go { opacity:.45; cursor:not-allowed; box-shadow:none; } /* ② empty row: the title and its line on one line when there is room, wrapping when narrow (2026-10-02, the user). */ html .ai-assistant .ai-assistant__clip-audio-empty { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; row-gap:2px; } html .ai-assistant .ai-assistant__clip--music.is-row:has(.ai-assistant__clip-audio-empty) > .ai-assistant__clip-meta { grid-template-rows:auto; align-items:center; row-gap:6px; } html .ai-assistant .ai-assistant__clip--music.is-row:has(.ai-assistant__clip-audio-empty) .ai-assistant__clip-foot { grid-row:1; align-self:center; } html .ai-assistant .ai-assistant__clip--music.is-row:has(.ai-assistant__clip-audio-empty) .ai-assistant__clip-audio-empty { align-self:center; } @container (max-width:560px) { html .ai-assistant .ai-assistant__clip--music.is-row:has(.ai-assistant__clip-audio-empty) .ai-assistant__clip-foot { grid-row:auto; } } /* The audio row's button as tall as the icon tiles, with a minimum size (2026-10-02, the user: misaligned and too small). */ html .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-music-make.is-row-go, html .ai-assistant .ai-assistant__clip--music.is-row .ai-assistant__clip-remake--wide { min-height:40px; min-width:120px; justify-content:center; box-sizing:border-box; } /* Light mode: the remaining-clips stage is light (2026-10-02, the user); the stage of a finished video stays dark for the picture. */ html:not([data-theme="dark"]) .ai-assistant .ai-assistant__board-final-card[data-state="none"] .ai-assistant__board-final-bulk:not(:empty) { background:#f4f2fb; border:1px solid #e3dcfa; } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__board-final-bulk > .ai-assistant__clip-bulk { color:#172033; } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__board-final-bulk .ai-assistant__clip-bulk-progress-line { color:#2a2f45; } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__board-final-bulk .ai-assistant__clip-bulk-bar { background:rgba(109,93,252,.16); } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__board-final-bulk .ai-assistant__clip-bulk-bar > i { background:#6d5dfc; } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__board-final-bulk > .ai-assistant__clip-bulk::after { color:#5a6679; } html:not([data-theme="dark"]) .ai-assistant .ai-assistant__board-final-bulk .ai-assistant__clip-bulk.is-open :is(.ai-assistant__clip-bulk-spec,.ai-assistant__clip-bulk-cost,.ai-assistant__clip-bulk-note,.ai-assistant__clip-bulk-progress) { color:#2a2f45; } /* The two ways to make (2026-10-02, the user: less space between them): the card's 18px gap less 10px. */ .ai-assistant .ai-assistant__generation-review .ai-assistant__make-manual { margin-top:-4px; } /* The common settings in the clip boxes' look (2026-10-02, the user: match our design): a head band, then the list. */ .ai-agent-plan__decl { padding:0; border:1px solid color-mix(in srgb,var(--ink,#172033) 14%,transparent); border-radius:10px; overflow:hidden; background:color-mix(in srgb,var(--ink,#172033) 2%,transparent); margin:0 0 8px; } .ai-agent-plan__decl>summary { list-style:none; width:100%; box-sizing:border-box; align-items:center; justify-content:flex-start; gap:8px; padding:6px 10px; background:color-mix(in srgb,var(--ink,#172033) 6%,transparent); font-size:11.5px; line-height:1.4; } .ai-agent-plan__decl>summary::-webkit-details-marker { display:none; } .ai-agent-plan__decl>summary::after { content:'⌃'; margin-left:auto; color:var(--muted,#697586); transform:rotate(180deg); transition:transform .15s; } .ai-agent-plan__decl[open]>summary { border-bottom:1px solid color-mix(in srgb,var(--ink,#172033) 10%,transparent); } .ai-agent-plan__decl[open]>summary::after { transform:none; } .ai-agent-plan__decl-count { color:var(--muted,#697586); opacity:1; font-variant-numeric:tabular-nums; } .ai-agent-plan__decl-list { margin:0; padding:8px 10px 10px; gap:4px; font-size:12px; } .ai-agent-plan__decl-list strong { font-weight:600; } .ai-agent-plan__decl-list span { opacity:1; color:var(--muted,#697586); } /* Shot terms 2026-10-03 (the user): the zoom is the lens, the same picture scaled at an even pace; the camera's speed is its own row of three buttons under the camera. */ .ai-shot-pic .move-zoom-in{animation:shot-push 1.8s linear infinite} .ai-shot-pic .move-zoom-out{animation:shot-pull 1.8s linear infinite} .ai-shot-editor__speed{display:flex;align-items:center;gap:6px;margin:6px 0 2px;font-size:12px} .ai-shot-editor__speed[hidden]{display:none} .ai-shot-editor__speed-label{color:var(--muted,#697586);margin-right:2px} .ai-shot-editor__speed-option{min-height:26px;padding:2px 12px;border:1px solid var(--border-color,#383940);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer} .ai-shot-editor__speed-option:hover,.ai-shot-editor__speed-option:focus-visible{border-color:var(--switch-on-bg,#8b7cf6)} .ai-shot-editor__speed-option.is-on{border-color:var(--switch-on-bg,#8b7cf6);background:color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 18%,transparent);font-weight:600} /* The rig beside size, angle and move (2026-10-03): four fields in a row, two on a narrow editor. */ .ai-shot-editor__row--four{grid-template-columns:repeat(4,minmax(0,1fr))} @container (max-width:520px){.ai-shot-editor__row--four{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:600px){.ai-shot-editor__row--four{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Premium redraft (2026-10-03, the user): the button beside generate and its menu of models with prices. */ .ai-agent-plan__premium { position:relative; flex:0 0 auto; } .ai-agent-plan__premium-button { white-space:nowrap; } .ai-agent-plan__premium-mark { width:14px; height:14px; margin-right:6px; vertical-align:-2px; fill:currentColor; flex:none; } .ai-agent-plan__premium-menu { position:absolute; right:0; bottom:calc(100% + 8px); z-index:40; width:min(340px,calc(100vw - 32px)); display:grid; gap:8px; padding:12px; border:1px solid var(--line-strong,#c9cdd6); border-radius:12px; background:var(--panel-bg,#fff); color:var(--ink,#172033); box-shadow:0 12px 32px rgba(20,16,50,.18); text-align:left; } .ai-agent-plan__premium-title { font-size:14px; } .ai-agent-plan__premium-note { margin:0; color:var(--muted,#697586); font-size:12px; line-height:1.5; } .ai-agent-plan__premium-opt { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--line,#e3e4e9); border-radius:10px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; } .ai-agent-plan__premium-opt:hover, .ai-agent-plan__premium-opt:focus-visible { background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 10%,transparent); border-color:var(--switch-on-bg,#6d5dfc); } .ai-agent-plan__premium-name { display:grid; gap:2px; } .ai-agent-plan__premium-name small { color:var(--muted,#697586); font-size:12px; } .ai-agent-plan__premium-price { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; } html[data-theme="dark"] .ai-agent-plan__premium-menu { background:#221f30; border-color:#3a3552; box-shadow:0 12px 32px rgba(0,0,0,.45); } /* A wider scene editor (2026-10-03, the user: about 1.5 times as wide): six picture columns, four on a narrow screen. */ .ai-shot-dialog{width:min(840px,calc(100vw - 32px))} .ai-shot-grid{grid-template-columns:repeat(6,minmax(0,1fr))} @media (max-width:760px){.ai-shot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} /* The line and its tone share the row 3:2 (2026-10-03, the user: the tone was cut at 80px — a little less line, more tone). */ .ai-shot-dialog .ai-shot-editor__line{grid-template-columns:132px minmax(0,3fr) minmax(0,2fr) 28px 28px} /* The start boxes (2026-10-05): small, inline beside their words, never the field's full width. */ .ai-shot-dialog .ai-shot-editor__line-at{display:inline-flex;align-items:center;gap:3px;width:auto;justify-self:start} .ai-shot-dialog .ai-shot-editor__line-at input{width:42px!important;min-width:0;flex:none;padding:6px 4px;text-align:right} .ai-shot-dialog .ai-shot-editor__cam-head{display:flex;align-items:center;gap:10px;font-size:13px} .ai-shot-dialog .ai-shot-editor__cam-switch{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong,rgba(255,255,255,.16));border-radius:999px;padding:3px 10px 3px 4px;background:none;color:inherit;font:inherit;font-size:12.5px;cursor:pointer} .ai-shot-dialog .ai-shot-editor__cam-switch i{position:relative;width:30px;height:18px;border-radius:999px;background:var(--line-strong,#9aa1ad)} .ai-shot-dialog .ai-shot-editor__cam-switch i::after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .15s} .ai-shot-dialog .ai-shot-editor__cam-switch.is-on i{background:var(--switch-on-bg,#6d5dfc)} .ai-shot-dialog .ai-shot-editor__cam-switch.is-on i::after{left:15px} .ai-shot-dialog .ai-shot-editor__row.is-auto,.ai-shot-dialog .ai-shot-editor__speed.is-auto{display:none!important} .ai-shot-dialog .ai-shot-editor__manual-box{margin-top:6px} .ai-shot-dialog .ai-shot-editor__manual-box .ai-tools-textarea,.ai-shot-dialog .ai-shot-editor__manual-box .ai-tools-textarea:focus{min-height:120px;margin-top:0;border:0;border-radius:0;background:transparent;box-shadow:none} /* Each list in full (2026-10-03, the user: no scrollbar in the term grids — they grow with their tiles). */ .ai-shot-grid{height:auto;overflow:visible} /* The wait under the Director's thinking line: expected-time bar, its words, a tip card (turn-wait.mjs, 2026-10-03). */ .ai-turn-wait { margin:-6px 0 14px; max-width:440px; } .ai-turn-wait__bar { height:4px; max-width:360px; border-radius:999px; background:#8b75ff26; overflow:hidden; } .ai-turn-wait__bar i { display:block; height:100%; width:0; border-radius:999px; background:var(--switch-on-bg,#8b7cf6); transition:width .9s linear; } .ai-turn-wait__eta { margin-top:4px; font-size:11.5px; color:var(--muted-soft,#8f949e); } @media (prefers-reduced-motion: reduce) { .ai-turn-wait__bar i { transition:none; } } /* The scene editor's previous / next arrows (2026-10-04, the user's A 안): beside the dialog on a wide screen, held to the viewport (position:fixed) so the dialog's own scroll does not clip them; in its header as "‹ 2 / 5 ›" on a narrow one. */ .ai-shot-dialog__nav{position:fixed;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line,rgba(23,32,51,.12));background:var(--panel-bg,#fff);color:var(--ink,#172033);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18);padding:0;font:inherit} html[data-theme="dark"] .ai-shot-dialog__nav{border-color:var(--line-strong,rgba(235,237,240,.14));box-shadow:0 8px 22px rgba(0,0,0,.45)} .ai-shot-dialog__nav-mark{font-size:24px;line-height:1;margin-top:-2px} .ai-shot-dialog__nav--prev{left:calc(50vw - min(420px, 50vw - 16px) - 64px)} .ai-shot-dialog__nav--next{right:calc(50vw - min(420px, 50vw - 16px) - 64px)} .ai-shot-dialog__nav:hover:not(:disabled){border-color:var(--switch-on-bg,#8b7cf6);color:var(--switch-on-bg,#8b7cf6)} .ai-shot-dialog__nav:focus-visible{outline:2px solid var(--switch-on-bg,#8b7cf6);outline-offset:2px} .ai-shot-dialog__nav:disabled{opacity:.35;cursor:default} .ai-shot-dialog__nav-tip{position:absolute;top:52px;white-space:nowrap;font-size:11px;color:var(--muted,#536174);opacity:0;pointer-events:none;transition:opacity .15s} .ai-shot-dialog__nav:hover .ai-shot-dialog__nav-tip{opacity:1} .ai-shot-dialog__count{display:none} .ai-shot-dialog__head .ai-shot-dialog__close{margin-left:auto} @media (max-width:960px){ .ai-shot-dialog__nav{position:static;transform:none;width:28px;height:28px;box-shadow:none;border-radius:8px} .ai-shot-dialog__nav-mark{font-size:18px} .ai-shot-dialog__nav-tip{display:none} .ai-shot-dialog__nav--prev{margin-left:auto} .ai-shot-dialog__count{display:inline;font-size:12px;color:var(--muted,#536174);font-variant-numeric:tabular-nums} .ai-shot-dialog__head .ai-shot-dialog__close{margin-left:4px} } /* After a turn changed made clips (2026-10-04): the two ways — keep the change, or undo the draft. */ .ai-assistant__made-changed p{margin:0 0 4px} /* The notice box lays its children in a row (icon, content, button); this card is words then its two buttons, so it stacks them — the buttons sat beside the words, pushed down by their own top margin (2026-10-04, the user). */ .ai-assistant__notice.ai-assistant__made-changed{flex-direction:column;align-items:stretch;gap:0} .ai-assistant__made-changed-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;justify-content:flex-end} /* The work's declarations with their pictures and the style editor (2026-10-04, the user; docs/mockups/decl-refs-and-style.html). */ .ai-agent-plan__decl-row{display:flex;align-items:flex-start;gap:8px;min-width:0} .ai-agent-plan__decl-text{min-width:0;flex:1;opacity:1} .ai-agent-plan__decl-list .ai-agent-plan__decl-text>span{opacity:.8} .ai-agent-plan__decl-fix{margin-left:6px;font:inherit;font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid var(--switch-on-bg,#8b7cf6);background:color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 10%,transparent);color:inherit;cursor:pointer;white-space:nowrap} .ai-agent-plan__decl-style{align-items:center} /* The video-style tile's larger picture (2026-10-05, the user). */ .ai-style-editor__peek{position:fixed;z-index:60;display:grid;gap:6px;padding:6px;border-radius:12px;background:var(--panel-bg,#fff);border:1px solid var(--line,#e3e4e9);box-shadow:0 14px 36px rgba(0,0,0,.35);pointer-events:none;animation:ai-style-peek .14s ease-out} .ai-style-editor__peek-pic{display:block;aspect-ratio:16/9;border-radius:8px;background-size:cover;background-position:center} .ai-style-editor__peek-cap{font-size:12.5px;font-weight:600;padding:0 4px 2px} html[data-theme="dark"] .ai-style-editor__peek{background:#221f2e;border-color:#3a3552} @keyframes ai-style-peek{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){.ai-style-editor__peek{animation:none}} .ai-agent-plan__decl-chips{display:flex;flex-wrap:wrap;gap:4px;min-width:0;flex:1} /* The style badge (2026-10-04, the user: match the site; in dark mode a bare outline did not read as a badge). */ .ai-agent-plan__decl-list .ai-agent-plan__decl-chip{opacity:1;font-size:11px;font-weight:600;line-height:18px;padding:0 9px;border-radius:999px;border:0;color:var(--ink,#172033);background:color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 14%,transparent)} html[data-theme="dark"] .ai-agent-plan__decl-list .ai-agent-plan__decl-chip{color:var(--ink,#eceef2);background:color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 30%,transparent)} .ai-agent-plan__decl-extra{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .ai-agent-plan__decl-pen{margin-left:auto} .ai-agent-plan__reference-row.is-flash{box-shadow:0 0 0 2px var(--switch-on-bg,#8b7cf6);border-radius:6px;transition:box-shadow .3s} .ai-shot-dialog.ai-style-dialog{width:min(1060px,calc(100vw - 32px))} .ai-style-editor{font-size:12px;display:grid;gap:10px} .ai-style-editor__sub{margin:-4px 0 0;opacity:.7} .ai-style-editor__preset{border:1px dashed color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 70%,transparent);background:color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 5%,transparent);border-radius:12px;padding:10px 12px 8px} .ai-style-editor__label{display:flex;align-items:baseline;gap:6px;margin:0 0 6px;font-size:12px} .ai-style-editor__label em{font-style:normal;font-size:11px;opacity:.65} .ai-style-editor__tag{font-size:10.5px;font-weight:700;color:#fff;background:var(--switch-on-bg,#8b7cf6);border-radius:5px;padding:0 6px} .ai-style-editor__note{margin:6px 0 0;font-size:11px;opacity:.75} .ai-style-editor__section{font-weight:700;padding-top:10px;border-top:1px solid var(--border-color,#383940)} .ai-style-editor__tiles{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px} @media (max-width:760px){.ai-style-editor__tiles{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}} .ai-style-editor__tile{border:1px solid var(--border-color,#383940);border-radius:10px;background:none;color:inherit;font:inherit;padding:0;overflow:hidden;cursor:pointer;text-align:left;display:flex;flex-direction:column} .ai-style-editor__tile.is-selected{border-color:var(--switch-on-bg,#8b7cf6);box-shadow:0 0 0 2px color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 45%,transparent)} .ai-style-editor__pic{display:block;aspect-ratio:16/9;background:center/cover no-repeat color-mix(in srgb,currentColor 6%,transparent)} .ai-style-editor__pic.is-auto{display:flex;align-items:center;justify-content:center;font-size:18px;opacity:.6} /* One line per caption; the full name is the tile's tooltip (2026-10-04, the user). */ .ai-style-editor__cap{font-size:11.5px;padding:4px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-style-editor__extra{width:100%;box-sizing:border-box;font:inherit;font-size:12px;padding:7px 9px;border-radius:8px;border:1px solid var(--border-color,#383940);background:none;color:inherit;resize:vertical} .ai-style-editor__warn{display:flex;align-items:center;gap:6px;margin:0;font-size:11.5px;padding:6px 9px;border-radius:8px;color:#b8860b;background:color-mix(in srgb,#f0b45a 12%,transparent)} .ai-style-editor__warn-thumb{width:22px;height:22px;border-radius:5px;object-fit:cover} .ai-style-editor__foot{display:flex;align-items:center;gap:6px} .ai-style-editor__how{font-size:11px;opacity:.7} /* The reference manager (2026-10-04, the user; docs/mockups/decl-ref-manager.html): the row's pictures and the dialog. */ .ai-agent-plan__decl-refs{display:flex;align-items:center;gap:3px;flex:none;margin-left:auto} .ai-agent-plan__decl-refs img{width:22px;height:22px;border-radius:5px;object-fit:cover;border:1px solid var(--border-color,#383940)} .ai-agent-plan__decl-refs-none{font-size:11px;opacity:.55;white-space:nowrap} .ai-agent-plan__decl-refs-more{font-size:11px;opacity:.7;padding-left:2px} .ai-agent-plan__decl-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-agent-plan__decl-refbtn{flex:none} .ai-shot-dialog.ai-ref-dialog{width:min(960px,calc(100vw - 32px));padding:0;display:flex;flex-direction:column;overflow:hidden} .ai-ref-dialog .ai-shot-dialog__head{padding:14px 18px;margin:0;border-bottom:1px solid var(--border-color,#383940)} .ai-ref-manager{display:flex;flex-direction:column;min-height:0;font-size:12px} .ai-ref-manager__body{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:0;max-height:calc(100dvh - 190px)} @media (max-width:720px){.ai-ref-manager__body{grid-template-columns:1fr}} .ai-ref-manager__side{border-right:1px solid var(--border-color,#383940);overflow:auto;padding:8px} .ai-ref-manager__group{font-size:11px;opacity:.6;padding:8px 8px 4px} .ai-ref-manager__entry{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;color:inherit;font:inherit;padding:7px 8px;border-radius:8px;cursor:pointer} .ai-ref-manager__entry:hover{background:color-mix(in srgb,currentColor 7%,transparent)} .ai-ref-manager__entry.is-selected{background:color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 55%,transparent)} .ai-ref-manager__name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-ref-manager__mini{display:flex;gap:2px}.ai-ref-manager__mini img{width:18px;height:18px;border-radius:4px;object-fit:cover} .ai-ref-manager__count{font-size:11px;opacity:.65}.ai-ref-manager__count.is-zero{color:#d9822b;opacity:1} .ai-ref-manager__main{overflow:auto;padding:14px 18px;display:grid;gap:12px;align-content:start} .ai-ref-manager__title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .ai-ref-manager__title em{font-style:normal;font-size:11px;opacity:.65} .ai-ref-manager__desc{margin:-6px 0 0;font-size:12px;opacity:.7} .ai-ref-manager__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px} .ai-ref-manager__card{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--border-color,#383940);border-radius:10px;overflow:hidden;background:none;color:inherit;font:inherit} button.ai-ref-manager__card{cursor:pointer}button.ai-ref-manager__card:disabled{opacity:.4;cursor:default} .ai-ref-manager__card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:color-mix(in srgb,currentColor 6%,transparent)} .ai-ref-manager__card.is-on{border-color:var(--switch-on-bg,#8b7cf6);box-shadow:0 0 0 2px color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 45%,transparent)} .ai-ref-manager__pic{position:relative;display:block} .ai-ref-manager__card>.ai-ref-manager__use{padding-top:5px} .ai-ref-manager__use{font-size:10.5px;opacity:.65;padding:0 7px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-ref-manager__use.is-unused{color:#d9822b;opacity:1} .ai-ref-manager__shared{position:absolute;left:5px;top:5px;font-size:10px;color:#fff;background:#000a;border-radius:5px;padding:0 5px;max-width:calc(100% - 36px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-ref-manager__del{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:0;background:#000a;color:#fff;cursor:pointer;font-size:13px;line-height:22px;padding:0} .ai-ref-manager__check{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:#0006} .ai-ref-manager__card.is-on .ai-ref-manager__check{background:var(--switch-on-bg,#8b7cf6);border-color:var(--switch-on-bg,#8b7cf6)} .ai-ref-manager__card.is-on .ai-ref-manager__check::after{content:"✓";display:block;text-align:center;line-height:14px;font-size:11px;color:#fff} .ai-ref-manager__add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1;border:1px dashed var(--border-color,#383940);border-radius:10px;background:none;color:inherit;font:inherit;cursor:pointer;opacity:.75} .ai-ref-manager__add:hover{border-color:var(--switch-on-bg,#8b7cf6);opacity:1}.ai-ref-manager__add b{font-size:20px;font-weight:400} .ai-ref-manager__foot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--border-color,#383940);flex-wrap:wrap} .ai-ref-manager__fix{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.85} .ai-ref-manager__warn{font-size:12px;color:#d9822b}.ai-ref-manager__note{font-size:12px;opacity:.75} /* The scene's picture choices (2026-10-04, docs/mockups/scene-pictures.html). */ .ai-shot-pics__list{display:flex;gap:8px;flex-wrap:wrap} .ai-shot-pics__card{position:relative;width:72px;padding:0;border:1px solid var(--border-color,#383940);border-radius:9px;overflow:hidden;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left} .ai-shot-pics__card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;opacity:.45} .ai-shot-pics__card.is-on{border-color:var(--switch-on-bg,#8b7cf6);box-shadow:0 0 0 2px color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 45%,transparent)} .ai-shot-pics__card.is-on img{opacity:1} /* A picture's number on its lower left (the reference manager and the shot editor, 2026-10-04). */ .ai-ref-manager__badge,.ai-shot-pics__badge{position:absolute;left:5px;bottom:5px;max-width:calc(100% - 10px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;font-weight:600;line-height:17px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;pointer-events:none} .ai-agent-plan__shot-tag--pics{display:inline-flex;align-items:center;gap:3px} .ai-agent-plan__shot-tag--pics img{width:16px;height:16px;border-radius:50%;object-fit:cover} /* A 안 (2026-10-04, docs/mockups/scene-pictures-compact.html): one line of buttons, one entry's pictures open below. */ .ai-shot-pics__bar{display:flex;gap:8px;flex-wrap:wrap} .ai-shot-pics__pick{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 9px 0 4px;border:1px solid var(--border-color,#383940);border-radius:999px;background:none;color:inherit;font:inherit;cursor:pointer} .ai-shot-pics__pick:hover,.ai-shot-pics__pick[aria-expanded="true"]{border-color:var(--switch-on-bg,#8b7cf6)} .ai-shot-pics__pick em{font-style:normal;font-size:12px;opacity:.7} .ai-shot-pics__pick.is-chosen em{opacity:1;color:var(--switch-on-bg,#8b7cf6)} .ai-shot-pics__stack{display:flex} .ai-shot-pics__stack img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:2px solid var(--panel-bg,#1e1f24);margin-left:-8px} .ai-shot-pics__stack img:first-child{margin-left:0} .ai-shot-pics__slot{position:relative;display:inline-flex} .ai-shot-pics__popup{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:max-content;max-width:min(560px,80vw);padding:10px;border:1px solid var(--border-color,#383940);border-radius:12px;background:var(--panel-bg,#1e1f24);box-shadow:0 10px 30px rgba(0,0,0,.35);outline:none} .ai-shot-pics__popup.is-end{left:auto;right:0} .ai-shot-pics__head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px} .ai-shot-pics__head span{opacity:.75} .ai-shot-pics__reset{margin-left:auto;border:1px solid var(--border-color,#383940);background:none;color:inherit;border-radius:999px;padding:1px 10px;font:inherit;font-size:11.5px;cursor:pointer} .ai-shot-pics__reset:disabled{opacity:.4;cursor:default} /* Video and sound references of a scene (2026-10-04, docs/mockups/scene-extras.html). */ .ai-shot-pics__sep{width:1px;align-self:stretch;background:var(--border-color,#383940);margin:0 2px} .ai-shot-pics__icon{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,currentColor 10%,transparent);font-size:12px} .ai-shot-media{width:min(520px,80vw)} .ai-shot-media__row{display:flex;align-items:flex-start;gap:10px;padding:8px 2px} .ai-shot-media__row+.ai-shot-media__row{border-top:1px solid var(--border-color,#383940)} .ai-shot-media__tile{position:relative;flex:none;width:64px;height:42px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,currentColor 10%,transparent);font-size:15px} .ai-shot-media__tile .ai-shot-pics__badge{left:4px;bottom:3px;font-size:10px;line-height:15px;padding:0 5px} .ai-shot-media__txt{min-width:0;flex:1} .ai-shot-media__txt strong{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-shot-media__use{display:inline-block;margin-right:4px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent);font-size:10.5px} .ai-shot-media__scope{font-size:11.5px;opacity:.7} .ai-shot-media__scope.is-scoped{opacity:1;color:var(--switch-on-bg,#8b7cf6)} .ai-shot-media__how{display:block;width:100%;margin-top:6px;padding:5px 8px;border:1px solid var(--border-color,#383940);border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:12px} .ai-shot-media__chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px} .ai-shot-media__chip{border:1px dashed var(--border-color,#383940);background:none;color:inherit;opacity:.75;border-radius:999px;padding:0 8px;font:inherit;font-size:11px;cursor:pointer} .ai-shot-media__chip:hover{opacity:1;border-color:var(--switch-on-bg,#8b7cf6)} .ai-shot-media__switch{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-color,#383940);background:none;color:inherit;border-radius:999px;padding:2px 10px 2px 3px;font:inherit;font-size:11.5px;cursor:pointer} .ai-shot-media__switch i{width:26px;height:16px;border-radius:999px;background:color-mix(in srgb,currentColor 25%,transparent);position:relative} .ai-shot-media__switch i::after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#bbb;transition:left .15s} .ai-shot-media__switch.is-on{border-color:var(--switch-on-bg,#8b7cf6)} .ai-shot-media__switch.is-on i{background:var(--switch-on-bg,#8b7cf6)} .ai-shot-media__switch.is-on i::after{left:12px;background:#fff} /* The common settings dialog (2026-10-04, docs/mockups/decl-settings-tabs.html). */ .ai-shot-dialog.ai-decl-dialog{width:min(1080px,calc(100vw - 32px));height:min(900px,calc(100vh - 32px));padding:0;display:flex;flex-direction:column;overflow:hidden} .ai-decl-dialog .ai-shot-dialog__head{padding:14px 18px 0;margin:0} .ai-decl-dialog__tabs{display:flex;gap:4px;padding:6px 14px 0;border-bottom:1px solid var(--border-color,#383940)} .ai-decl-dialog__tab{display:inline-flex;align-items:center;gap:6px;border:0;border-bottom:2px solid transparent;background:none;color:inherit;opacity:.65;font:inherit;font-weight:600;padding:8px 14px 10px;cursor:pointer} .ai-decl-dialog__tab.is-on{opacity:1;border-bottom-color:var(--switch-on-bg,#8b7cf6)} .ai-decl-dialog__dot{width:7px;height:7px;border-radius:50%;background:#f0b45a;display:none} .ai-decl-dialog__tab.is-changed .ai-decl-dialog__dot{display:inline-block} .ai-decl-dialog__body{flex:1;min-height:0;overflow:auto} .ai-decl-dialog__body>.ai-style-editor{padding:14px 18px} .ai-decl-dialog__foot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--border-color,#383940)} .ai-decl-dialog__sum{font-size:12px;opacity:.75} .ai-decl-dialog__problem{font-size:12px;color:#e06c6c} .ai-agent-plan__decl-open{margin-left:auto;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--switch-on-bg,#8b7cf6);background:color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 16%,transparent);color:inherit;border-radius:999px;padding:1px 10px;font:inherit;font-size:11.5px;cursor:pointer} .ai-agent-plan__decl-row.is-openable,.ai-agent-plan__decl-list>li.is-openable{cursor:pointer;border-radius:6px} .ai-agent-plan__decl-list>li.is-openable:hover{background:color-mix(in srgb,currentColor 6%,transparent)} /* The edit button sits at the header's right end next to the fold mark (both took margin-left:auto and split the gap), and the dialog's buttons look like the scene editor's: a plain cancel and a filled apply (2026-10-04, the user). */ .ai-agent-plan__decl>summary:has(.ai-agent-plan__decl-open)::after{margin-left:2px} /* Quiet (2026-10-05, the user: A 안): muted words, no border or fill; brighter on a light fill under the pointer. */ .ai-agent-plan__decl-open{padding:2px 6px;font-weight:500;line-height:18px;border:0;border-radius:6px;background:none;color:var(--muted,#5a6679)} .ai-agent-plan__decl-open:hover,.ai-agent-plan__decl-open:focus-visible{background:color-mix(in srgb,currentColor 8%,transparent);color:var(--ink,#172033);outline:none} html[data-theme="dark"] .ai-agent-plan__decl-open:hover,html[data-theme="dark"] .ai-agent-plan__decl-open:focus-visible{color:#e4e0ff} .ai-decl-dialog__foot button{font:inherit;font-size:12.5px;font-weight:600;border-radius:10px;padding:8px 16px;cursor:pointer;line-height:1.2} .ai-decl-dialog__foot .ai-assistant__secondary{background:var(--panel-bg,#fff);border:1px solid var(--line-strong,rgba(23,32,51,.16));color:var(--ink,#172033)} .ai-decl-dialog__foot .ai-assistant__secondary:hover{background:color-mix(in srgb,var(--ink,#172033) 6%,var(--panel-bg,#fff))} .ai-decl-dialog__foot .ai-assistant__primary{background:var(--switch-on-bg,#6d5dfc);border:1px solid transparent;color:#fff;padding:8px 20px} .ai-decl-dialog__foot .ai-assistant__primary:hover:not(:disabled){filter:brightness(1.08)} .ai-decl-dialog__foot .ai-assistant__primary:disabled{opacity:.45;cursor:default} /* The dialog takes the height of its tab (2026-10-04, the user: no scrollbar when it fits; a tab switch may change the size, the top stays and only the bottom moves) and its scrollers wear the house scrollbar (the dialog lives outside .ai-assistant). */ .ai-shot-dialog.ai-decl-dialog{height:auto;max-height:calc(100dvh - 32px);bottom:auto;margin:max(16px,calc((100dvh - 900px) / 2)) auto 0} .ai-decl-dialog .ai-ref-manager__body{max-height:calc(100dvh - 240px)} .ai-decl-dialog :is(.ai-decl-dialog__body,.ai-ref-manager__side,.ai-ref-manager__main){scrollbar-width:thin;scrollbar-color:var(--assistant-scroll-thumb) transparent} @supports selector(::-webkit-scrollbar){ .ai-decl-dialog :is(.ai-decl-dialog__body,.ai-ref-manager__side,.ai-ref-manager__main){scrollbar-width:auto;scrollbar-color:auto} .ai-decl-dialog :is(.ai-decl-dialog__body,.ai-ref-manager__side,.ai-ref-manager__main)::-webkit-scrollbar{width:10px;height:10px} .ai-decl-dialog__body::-webkit-scrollbar-track,.ai-decl-dialog ::-webkit-scrollbar-corner{background:transparent} .ai-decl-dialog ::-webkit-scrollbar-thumb{min-height:44px;border:2px solid transparent;border-radius:999px;background:var(--assistant-scroll-thumb);background-clip:padding-box} .ai-decl-dialog ::-webkit-scrollbar-thumb:hover{background:var(--assistant-scroll-hover);background-clip:padding-box} .ai-decl-dialog ::-webkit-scrollbar-button{display:none;width:0;height:0} } /* A scene that sends none of an entry's pictures (2026-10-04, the user): the button and the scene chip show a dash, the cards dim. */ .ai-shot-pics__none{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px dashed var(--border-color,#383940);font-size:12px;opacity:.7} .ai-shot-pics__pick.is-off em{color:var(--muted,#8a8f99)} .ai-shot-pics__list.is-off .ai-shot-pics__card{opacity:.45} .ai-shot-pics__head .ai-shot-pics__reset+.ai-shot-pics__reset{margin-left:4px} .ai-agent-plan__shot-tag--pics.is-off .ai-shot-pics__none{width:16px;height:16px;font-size:10px;margin-right:3px} /* The style editor's extra words in the scene editor's field look (2026-10-04, the user: the browser's white focus ring). */ .ai-style-editor__extra{font:inherit;font-size:12px;line-height:1.5;min-height:52px;padding:7px 10px;border:1px solid var(--line,rgba(23,32,51,.09));border-radius:10px;background:var(--control-surface,#f7f9fc);color:var(--ink,#172033);resize:vertical} .ai-style-editor__extra:focus{outline:none;border-color:var(--switch-on-bg,#6d5dfc);box-shadow:0 0 0 3px color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 16%,transparent)} .ai-style-editor__extra::placeholder{color:var(--muted-soft,#737f90)} /* The length choices under a reply (2026-10-05, the user, A 안): one row — the whole length now and how long it can go, the lengths up to the longest (the current one marked), "set it yourself" opening the length setting, the parts note. */ .ai-assistant__length-offer { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:2px 0 14px; padding:10px 12px; border:1px solid var(--line-strong,color-mix(in srgb,var(--ink,#172033) 16%,transparent)); border-radius:12px; background:color-mix(in srgb,var(--ink,#172033) 3%,transparent); } .ai-assistant__length-offer-text { font-size:12.5px; color:var(--muted,#697586); margin-right:4px; } .ai-assistant__length-offer-text strong { color:var(--ink,#172033); font-weight:650; } .ai-assistant .ai-assistant__length-offer-pick { min-height:26px; padding:3px 12px; border:1px solid color-mix(in srgb,var(--ink,#172033) 22%,transparent); border-radius:999px; background:none; color:var(--ink,#172033); font:inherit; font-size:12.5px; cursor:pointer; } .ai-assistant .ai-assistant__length-offer-pick:hover:not(:disabled):not(.is-on) { background:color-mix(in srgb,var(--ink,#172033) 6%,transparent); } .ai-assistant .ai-assistant__length-offer-pick.is-on { border-color:var(--switch-on-bg,#6d5dfc); background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 14%,transparent); color:var(--switch-on-bg,#6d5dfc); font-weight:650; cursor:default; } .ai-assistant .ai-assistant__length-offer-pick:disabled:not(.is-on) { opacity:.5; cursor:default; } .ai-assistant .ai-assistant__length-offer-own { border:0; background:none; padding:0 2px; color:var(--muted,#697586); font:inherit; font-size:12.5px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; } /* The whole length setting (2026-10-05, the user, B 안): the longest and a link to make it longer, in the note under the row. */ .ai-agent-plan__target-under { grid-column:1 / -1; margin:-4px 0 0; font-size:11px; line-height:1.4; color:var(--muted,#697586); } .ai-assistant .ai-agent-plan__target-more { border:0; background:none; padding:0; color:var(--switch-on-bg,#6d5dfc); font:inherit; font-size:11px; font-weight:600; cursor:pointer; } .ai-assistant .ai-agent-plan__target-more:hover { text-decoration:underline; text-underline-offset:2px; } /* The outline of a draft being written (2026-10-05, the user): its scenes as they come, a check on each whose details landed. */ .ai-agent-plan__outline { margin:4px 0 8px; padding:12px 14px; border:1px solid var(--line-strong,color-mix(in srgb,var(--ink,#172033) 16%,transparent)); border-radius:12px; background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 5%,transparent); } .ai-assistant__plan-link { padding:0; border:0; background:none; font:inherit; color:var(--switch-on-bg,#6d5dfc); text-decoration:underline; text-underline-offset:2px; cursor:pointer; } .ai-assistant__outline-chat { margin:6px 0 10px; } .ai-assistant__turn-card { margin:6px 0 10px; padding:12px 14px; border:1px solid var(--line-strong,color-mix(in srgb,var(--ink,#172033) 16%,transparent)); border-radius:12px; background:color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 5%,transparent); } .ai-assistant__turn-card.is-done { margin:0; padding:0; border:0; border-radius:0; background:none; } .ai-assistant__turn-card.is-done .ai-agent-plan__outline-row:not(.is-done) .ai-agent-plan__outline-mark::before { animation:none; opacity:.35; } .ai-assistant__turn-card > .ai-assistant__message { margin:0; } .ai-assistant__turn-card > .ai-turn-wait { margin:8px 0 0; max-width:none; } .ai-assistant__turn-card > .ai-turn-wait .ai-turn-wait__bar { max-width:none; } .ai-assistant__turn-card:not(.is-done) .ai-assistant__outline-chat { margin:10px 0 0; } .ai-assistant__turn-card:not(.is-done) .ai-assistant__outline-chat-summary { display:none; } .ai-assistant__turn-card:not(.is-done) .ai-assistant__outline-chat .ai-agent-plan__outline { margin:0; padding:0; border:0; border-radius:0; background:none; } .ai-assistant__turn-steps { margin:8px 0 0; font-size:12px; color:var(--muted,#697586); } .ai-assistant__turn-made { font-size:11.5px; color:var(--muted,#697586); } .ai-assistant__outline-chat-summary { cursor:pointer; font-size:12px; color:var(--muted,#697586); list-style-position:inside; } .ai-assistant__outline-chat .ai-agent-plan__outline-head, .ai-assistant__outline-chat .ai-agent-plan__outline-sub { display:none; } .ai-assistant__outline-chat .ai-agent-plan__outline { margin-top:6px; } .ai-assistant__outline-chat .ai-agent-plan__outline-list { margin-top:0; } .ai-agent-plan__outline-head { font-size:13px; font-weight:650; color:var(--ink,#172033); } .ai-agent-plan__outline-sub { margin-top:2px; font-size:11.5px; color:var(--muted,#697586); } .ai-agent-plan__outline-list { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:4px; } .ai-agent-plan__outline-row { display:grid; grid-template-columns:24px 76px 1fr 18px; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; font-size:12.5px; color:var(--muted,#697586); background:color-mix(in srgb,var(--ink,#172033) 3%,transparent); } .ai-agent-plan__outline-row.is-done { color:var(--ink,#172033); } .ai-agent-plan__outline-n { font-variant-numeric:tabular-nums; font-weight:650; } .ai-agent-plan__outline-time { font-variant-numeric:tabular-nums; font-size:11.5px; } .ai-agent-plan__outline-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ai-agent-plan__outline-mark { color:var(--switch-on-bg,#6d5dfc); font-weight:700; text-align:center; } .ai-agent-plan__outline-row:not(.is-done) .ai-agent-plan__outline-mark::before { content:''; display:inline-block; width:10px; height:10px; border:2px solid color-mix(in srgb,var(--switch-on-bg,#6d5dfc) 30%,transparent); border-top-color:var(--switch-on-bg,#6d5dfc); border-radius:50%; animation:ai-outline-spin 0.9s linear infinite; } @keyframes ai-outline-spin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { .ai-agent-plan__outline-row:not(.is-done) .ai-agent-plan__outline-mark::before { animation:none; } } /* The cast row at every width (2026-10-05, the user, A 안): ? | the name on one line (… when long), "kind · scenes" under it | the buttons, centred on the two lines. */ .ai-agent-plan__reference-row--cast { display:grid; grid-template-columns:38px minmax(0,1fr) auto; column-gap:10px; row-gap:2px; align-items:center; } .ai-agent-plan__reference-row--cast .ai-agent-plan__cast-mark { grid-row:1 / span 2; grid-column:1; } .ai-agent-plan__reference-row--cast .ai-agent-plan__cast-title { display:block; grid-row:1; grid-column:2; min-width:0; overflow:hidden; } .ai-agent-plan__reference-row--cast .ai-agent-plan__cast-scenes { grid-row:2; grid-column:2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1.4; } .ai-agent-plan__reference-row--cast .ai-agent-plan__cast-actions, .ai-agent-plan__reference-row--cast .ai-agent-plan__cast-state { grid-row:1 / span 2; grid-column:3; align-self:center; } /* The common settings: a dashed empty box where an entry's picture goes, the picture when there is one (2026-10-05, the user). */ .ai-agent-plan__decl-refs-empty { display:inline-block; width:22px; height:22px; border:1px dashed color-mix(in srgb,var(--ink,#172033) 30%,transparent); border-radius:5px; vertical-align:middle; } /* Room enough (2026-10-05, the user): the name and "kind · scenes" on one line; two lines only when the plan is narrow. */ @container (min-width: 440px) { .ai-agent-plan__reference-row--cast { grid-template-columns:38px minmax(0,max-content) minmax(0,1fr) auto; column-gap:12px; } .ai-agent-plan__reference-row--cast .ai-agent-plan__cast-mark { grid-row:1; } .ai-agent-plan__reference-row--cast .ai-agent-plan__cast-title { grid-row:1; grid-column:2; max-width:28ch; } .ai-agent-plan__reference-row--cast .ai-agent-plan__cast-scenes { grid-row:1; grid-column:3; } .ai-agent-plan__reference-row--cast .ai-agent-plan__cast-actions, .ai-agent-plan__reference-row--cast .ai-agent-plan__cast-state { grid-row:1; grid-column:4; } } /* The picture slot on each common-settings row (2026-10-06, the user: "the rows don't line up"): the row centred on its line, the picture and the empty box the same size, a little under the line height, border included. */ .ai-agent-plan__decl-list .ai-agent-plan__decl-row { align-items:center; } .ai-agent-plan__decl-refs img, .ai-agent-plan__decl-refs-empty { box-sizing:border-box; width:20px; height:20px; display:block; } /* The picture itself also carries the chat's .ai-assistant__ref-thumb (22px, a 4px right margin), which won over the rule above and pushed it left of the empty boxes (2026-10-06, the user: the pictures and the empty boxes did not line up). */ .ai-assistant .ai-agent-plan__decl-refs .ai-assistant__ref-thumb { box-sizing:border-box; width:20px; height:20px; margin:0; vertical-align:top; display:block; } /* The conversation's text at 15px (2026-10-06, the user: 14px read small): the messages and the box you write in; the progress line, the scene tables and the cards' small print keep their own sizes. */ .ai-assistant .ai-assistant__log .ai-assistant__message:not(.ai-assistant__progress) { font-size:15px; } .ai-assistant .ai-assistant__log .ai-assistant__message .ai-assistant__table-scroll { font-size:14px; } .ai-assistant .ai-assistant__input { font-size:15px; } /* The next step is the one thing to do now (2026-10-07, the user, A): filled like the generate button (a paid one says its credits); the choices among several stay secondary. */ .ai-assistant .ai-agent-plan__footer[data-state] .ai-assistant__review-action, .ai-assistant .ai-assistant__log .ai-assistant__next-step > .ai-assistant__secondary { border:1px solid #7856d8; background:linear-gradient(110deg,#6254d9,#8246c7); color:#fff; font-weight:600; } .ai-assistant .ai-agent-plan__footer[data-state] .ai-assistant__review-action:hover:not(:disabled), .ai-assistant .ai-assistant__log .ai-assistant__next-step > .ai-assistant__secondary:hover:not(:disabled) { border-color:#7856d8; background:linear-gradient(110deg,#7162e4,#9154d5); color:#fff; } .ai-assistant .ai-agent-plan__footer[data-state] .ai-assistant__review-action:disabled, .ai-assistant .ai-assistant__log .ai-assistant__next-step > .ai-assistant__secondary:disabled { opacity:.5; } /* 안내 막대(2026-10-08, 사용자: 긴 설명이면 클립·대화 전환만 윗줄로 떨어지던 것 → "평소엔 한 줄, 좁으면 두 줄"): 전환·제목·설명·버튼을 한 줄에 두고, 설명이 칸보다 길면 그 칸 안에서 두 줄이 된다. 휴대폰 폭은 설명 칸이 너무 좁아 제목·버튼 아래 줄 전체 폭으로. 요약이 함께 보이는 생성 확인 단계(review·ready)는 위의 한 줄 배치를 그대로 쓴다. */ .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer--dock:not([data-state="review"]):not([data-state="ready"]){flex-wrap:nowrap;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer--dock:not([data-state="review"]):not([data-state="ready"]) > .ai-assistant__dock-seg{flex:none;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer--dock:not([data-state="review"]):not([data-state="ready"]) .ai-agent-plan__progress-card{flex:1 1 auto;min-width:0;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer--dock:not([data-state="review"]):not([data-state="ready"]) .ai-agent-plan__progress{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"title text action";align-items:center;column-gap:12px;row-gap:2px;flex:1 1 auto;min-width:0;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer--dock:not([data-state="review"]):not([data-state="ready"]) .ai-agent-plan__progress > strong{grid-area:title;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer--dock:not([data-state="review"]):not([data-state="ready"]) .ai-agent-plan__progress p{grid-area:text;} .ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer--dock:not([data-state="review"]):not([data-state="ready"]) .ai-agent-plan__progress > .ai-assistant__review-action{grid-area:action;margin-left:0;} @media(max-width:640px){.ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer--dock:not([data-state="review"]):not([data-state="ready"]){align-items:flex-start;}.ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer--dock:not([data-state="review"]):not([data-state="ready"]) > .ai-assistant__dock-seg{margin-top:2px;}.ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer--dock:not([data-state="review"]):not([data-state="ready"]) .ai-agent-plan__progress{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title action" "text text";}.ai-assistant .ai-assistant__action-dock .ai-agent-plan__footer--dock:not([data-state="review"]):not([data-state="ready"]) .ai-agent-plan__progress > strong{white-space:normal;word-break:keep-all;}} /* A public sample (sample-source.mjs): the box stays, read only; a note over it says so when something that would change the sample is pressed (and once on opening), with the way to start a conversation from the sample's request. */ .ai-assistant__sample-note{position:absolute;z-index:6;left:0;right:0;bottom:calc(100% + 10px);display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px 12px;padding:12px 14px;border:1px solid #aa8cdd;border-radius:16px;background:var(--panel-bg,#fff);box-shadow:0 8px 24px #0000002e;} .ai-assistant__sample-note[hidden]{display:none;} .ai-assistant__sample-label{grid-column:1;font-size:13px;} .ai-assistant__sample-why{grid-column:1;margin:0;color:var(--muted,#686b7b);font-size:12px;line-height:1.5;} /* The page's own primary button (the dock's size). */ .ai-assistant .ai-assistant__sample-note .ai-assistant__sample-start{grid-column:2;grid-row:1 / span 2;margin:0;min-height:34px;padding:6px 16px;font-size:13px;white-space:nowrap;} .ai-assistant__sample-close{grid-column:3;grid-row:1 / span 2;align-self:start;border:0;background:none;color:var(--muted,#686b7b);font-size:18px;line-height:1;cursor:pointer;padding:2px 4px;} @media(max-width:560px){.ai-assistant__sample-note{grid-template-columns:minmax(0,1fr) auto;}.ai-assistant .ai-assistant__sample-note .ai-assistant__sample-start{grid-column:1;grid-row:3;justify-self:start;}.ai-assistant__sample-close{grid-column:2;grid-row:1;}} /* The welcome's finished samples (plan B, 2026-10-13): cards — poster, name, length, clips, model and the first request; the whole card opens the sample. */ .ai-assistant__transform-preview--samples .ai-assistant__transform-header{flex-wrap:wrap;} .ai-assistant__sample-gallery-sub{margin-left:auto;color:var(--muted,#737583);font-size:12px;} .ai-assistant__sample-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;} .ai-assistant__sample-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--line,#ded9e8) 80%,transparent);border-radius:16px;background:var(--control-surface,#f7f9fc);color:inherit;text-decoration:none;transition:border-color .15s ease;} .ai-assistant__sample-card:hover,.ai-assistant__sample-card:focus-visible{border-color:#aa8cdd;} .ai-assistant__sample-poster{position:relative;display:block;aspect-ratio:16/9;background:#0d0d12;overflow:hidden;} .ai-assistant__sample-poster img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease;} .ai-assistant__sample-card:hover .ai-assistant__sample-poster img{transform:scale(1.025);} .ai-assistant__sample-play-mark{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:-26px 0 0 -26px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(15,15,20,.62);color:#fff;font-size:18px;} .ai-assistant__sample-time{position:absolute;right:10px;bottom:10px;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:600;} .ai-assistant__sample-body{display:flex;flex-direction:column;gap:9px;padding:14px 16px 16px;} .ai-assistant__sample-name{color:var(--ink,#292532);font-size:15px;} .ai-assistant__sample-chips{display:flex;flex-wrap:wrap;gap:6px;} .ai-assistant__sample-chips span{padding:4px 8px;border:1px solid var(--line,#ded9e8);border-radius:7px;color:var(--muted,#737583);font-size:11.5px;} .ai-assistant__sample-gallery-note{display:flex;align-items:center;gap:6px;margin:14px 2px 0;color:var(--assistant-link,#6b4fd8);font-size:12.5px;font-weight:600;line-height:1.45;} .ai-assistant__sample-gallery-note::before{content:"✓";flex:none;} .ai-assistant__sample-request{display:-webkit-box;overflow:hidden;color:var(--muted,#737583);font-size:12.5px;line-height:1.5;-webkit-line-clamp:2;-webkit-box-orient:vertical;} @media(max-width:900px){.ai-assistant__sample-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:560px){.ai-assistant__sample-gallery{grid-template-columns:1fr;}.ai-assistant__sample-gallery-sub{margin-left:0;}} /* The visitor's own card closing a short row: the same frame as a sample — a tinted panel as its poster, a body with chips and the way to the box. */ .ai-assistant__sample-card--own{padding:0;border-style:dashed;font:inherit;text-align:left;cursor:pointer;} .ai-assistant__sample-own-strip{background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--portal-accent,#805ce1) 38%,transparent),transparent 60%),linear-gradient(135deg,#1d1a2b,#2b2440);} .ai-assistant__sample-own-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 14px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(15,15,20,.68);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;} .ai-assistant__sample-own-go{color:var(--assistant-link,#6b4fd8);font-size:13px;font-weight:600;line-height:1.5;} /* The finished samples stay on narrow screens : on a laptop, a tablet or a phone they are the only way to a sample (2026-10-13 live test). Cards go two then one per row (above). */ @media(max-width:1100px){.ai-assistant--standalone .ai-assistant__transform-preview.ai-assistant__transform-preview--samples{display:block;width:calc(100% - 32px);margin:28px auto 24px;}} /* The front page's recent conversations (plan B, 2026-10-13): one bordered list above the samples, a row per conversation. */ .ai-assistant__recent{margin:0 0 30px;} .ai-assistant__recent[hidden]{display:none;} .ai-assistant__recent-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px;} .ai-assistant__recent-head strong{color:var(--ink,#292532);font-size:16px;} .ai-assistant__recent-sub{color:var(--muted,#737583);font-size:12px;} .ai-assistant__recent-all{margin-left:auto;padding:0;border:0;background:none;color:var(--assistant-link,#6b4fd8);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;} .ai-assistant__recent-list{overflow:hidden;border:1px solid color-mix(in srgb,var(--line,#ded9e8) 80%,transparent);border-radius:14px;background:var(--control-surface,#f7f9fc);} .ai-assistant__recent-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;width:100%;padding:11px 16px;border:0;border-top:1px solid color-mix(in srgb,var(--line,#ded9e8) 60%,transparent);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;} .ai-assistant__recent-row:first-child{border-top:0;} .ai-assistant__recent-row:hover,.ai-assistant__recent-row:focus-visible{background:#8b70ed12;} .ai-assistant__recent-mark{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;overflow:hidden;background:color-mix(in srgb,var(--portal-accent,#805ce1) 18%,transparent);color:var(--assistant-link,#6b4fd8);font-size:12px;} .ai-assistant__recent-title{overflow:hidden;color:var(--ink,#292532);font-size:13.5px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;} .ai-assistant__recent-meta{color:var(--muted,#737583);font-size:11.5px;white-space:nowrap;} .ai-assistant__recent-go{color:var(--assistant-link,#6b4fd8);font-size:12px;font-weight:600;white-space:nowrap;} @media(max-width:560px){.ai-assistant__recent-row{grid-template-columns:auto minmax(0,1fr) auto;}.ai-assistant__recent-meta{display:none;}} /* Conversation thumbnails (2026-10-13): the poster of the conversation's latest finished video, cropped square (the user, 2026-10-13), left of its row in History and in the front page's recent conversations; a conversation without one keeps the ✦ mark. */ .ai-assistant__history-row:has(> .ai-assistant__history-thumb){display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:3px;align-items:center;} .ai-assistant__history-thumb{grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;overflow:hidden;border-radius:8px;background:color-mix(in srgb,var(--portal-accent,#805ce1) 14%,transparent);color:var(--assistant-link,#6b4fd8);font-size:13px;} .ai-assistant__history-thumb:not(.has-poster)::before{content:"✦";} .ai-assistant__history-thumb img,.ai-assistant__recent-mark img{display:block;width:100%;height:100%;object-fit:cover;} /* Link-coloured text on the front page, History and the gallery (2026-10-13): a deep violet on light, the soft one on dark. */ .ai-assistant{--assistant-link:#6b4fd8;} [data-theme="dark"] .ai-assistant{--assistant-link:#b9a3ff;} .ai-assistant__text-model-picker{margin-left:auto;flex:0 1 auto;min-width:0;max-width:min(230px,45vw);} .ai-assistant .ai-assistant__text-model-trigger{height:32px;min-height:32px;max-width:100%;padding:0 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted,#697586);font:inherit;font-size:12px;line-height:16px;box-shadow:none;} .ai-assistant .ai-assistant__text-model-trigger:is(:hover,[aria-expanded="true"]){background:var(--control-surface,#f3f2f7);color:var(--ink,#172033);border-color:var(--line,#e4e5eb);} /* Reserve the same model, free-label and check columns in every writing-model row. */ .ai-agent-plan__setting-menu--columns .ai-agent-plan__setting-option{display:grid;grid-template-columns:minmax(0,1fr) 3.2em 14px;gap:10px;align-items:center} .ai-agent-plan__setting-menu--columns .ai-agent-plan__setting-option-suffix{margin-left:0;text-align:right;font-weight:400;white-space:nowrap} .ai-agent-plan__setting-menu--columns .ai-agent-plan__setting-check{justify-self:end} .ai-agent-plan__cost-dots{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;vertical-align:middle} .ai-agent-plan__cost-dot{display:block;width:6px;height:6px;border-radius:50%;background:var(--line-strong)} .ai-agent-plan__cost-dot.is-filled{background:var(--portal-accent)} .ai-agent-plan__cost-legend{border-top:1px solid var(--line-strong);margin:7px 6px 1px;padding:10px 3px 4px;color:var(--muted);font-size:11px;line-height:1.5} .ai-agent-plan__cost-levels{display:flex;justify-content:space-between;gap:12px;margin-top:8px} .ai-agent-plan__cost-level{display:inline-flex;align-items:center;gap:6px} .ai-assistant__text-model-picker .ai-agent-plan__setting-separator{height:0;border-top:1px solid var(--line-strong,var(--line));margin:6px 7px} .ai-agent-plan__setting-menu--columns .ai-agent-plan__setting-group{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;padding:5px 11px 7px;letter-spacing:.3px} .ai-agent-plan__setting-menu--columns .ai-agent-plan__setting-option{min-height:41px;padding:10px;border-radius:8px} .ai-agent-plan__setting-menu--columns .ai-agent-plan__setting-option-label{white-space:nowrap;font-size:13px;font-weight:600} .ai-agent-plan__setting-menu--columns .ai-agent-plan__setting-option-suffix{font-size:12px;color:var(--portal-accent,var(--assistant-link,#7148ca))} .ai-agent-plan__setting-menu--columns .ai-agent-plan__setting-separator{height:0;border-top:1px solid var(--line-strong,var(--line));margin:7px 5px} /* Accepted settings while the draft is being written: label/value rows, independent of the horizontal action notice. */ .ai-agent-plan__decisions {margin:0 0 16px;padding:14px;border:1px solid var(--line,#e3e4e9);border-radius:12px;background:rgba(100,116,139,.07);font-size:12px;line-height:1.5;} .ai-agent-plan__decisions-title {display:block;font-size:13px;font-weight:600;margin-bottom:10px;} .ai-agent-plan__decisions-list {display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:6px 12px;margin:0;} .ai-agent-plan__decisions-list dt {margin:0;color:var(--muted,#697586);} .ai-agent-plan__decisions-list dd {margin:0;min-width:0;overflow-wrap:anywhere;font-weight:500;} .ai-agent-plan__decisions-note {display:block;margin-top:10px;padding-top:9px;border-top:1px solid var(--line,#e3e4e9);color:var(--muted,#697586);font-size:11px;} /* The cast card (2026-10-15): a heading and the one "why" line above the buttons — the reply no longer repeats it. */ .ai-assistant__cast-prompt .ai-assistant__cast-heading{display:block;font-size:14px;font-weight:600;line-height:1.5;color:var(--ink,#172033);} .ai-assistant__cast-prompt .ai-assistant__cast-why{margin:2px 0 12px;font-size:13px;line-height:1.6;color:var(--text-secondary,#6b6f7b);} .ai-assistant__cast-choice[data-kind="person"]::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E") center/contain no-repeat;} .ai-assistant__cast-choice[data-kind="product"]::before,.ai-assistant__cast-choice[data-kind="place"]::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M12 12l8-4.5M12 12v9M12 12L4 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M12 12l8-4.5M12 12v9M12 12L4 7.5'/%3E%3C/svg%3E") center/contain no-repeat;} .ai-assistant__cast-choice:disabled::before{content:none;} [data-theme="dark"] .ai-assistant__cast-prompt .ai-assistant__cast-why{color:#a6a8b1;} /* The work's look card above the common settings (2026-10-18, the user; docs/mockups/director-style-card.html, A 안). */ .ai-agent-plan__look-card{display:grid;gap:8px;padding:10px;margin:0} .ai-agent-plan__look-card.is-openable{cursor:pointer} .ai-agent-plan__look-card.is-openable:hover,.ai-agent-plan__look-card.is-openable:focus-visible{background:color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 6%,transparent);outline:none} .ai-agent-plan__look-name{font-size:14px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis} .ai-agent-plan__look-name small{display:block;font-size:11px;font-weight:500;color:var(--muted,#697586);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* C 안: the picture and the four tiles one block of equal height; a tile's words sit on its picture over a dark fade */ .ai-agent-plan__look-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px} .ai-agent-plan__look-hero{position:relative;display:block;min-height:100%;border-radius:8px;background:color-mix(in srgb,var(--ink,#172033) 10%,transparent) center/cover no-repeat;overflow:hidden} .ai-agent-plan__look-hero em{position:absolute;left:6px;bottom:4px;font-style:normal;font-size:10.5px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65)} .ai-agent-plan__look-hero.is-auto,.ai-agent-plan__look-tile i.is-auto{background:repeating-linear-gradient(45deg,transparent 0 4px,color-mix(in srgb,var(--ink,#172033) 8%,transparent) 4px 5px);border:1px dashed color-mix(in srgb,var(--ink,#172033) 22%,transparent);box-sizing:border-box} .ai-agent-plan__look-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .ai-agent-plan__look-tile{position:relative;display:block;min-width:0;aspect-ratio:16/10;border-radius:6px;overflow:hidden} .ai-agent-plan__look-tile i{position:absolute;inset:0;display:block;background:color-mix(in srgb,var(--ink,#172033) 10%,transparent) center/cover no-repeat} .ai-agent-plan__look-cap{position:absolute;left:0;right:0;bottom:0;display:block;padding:12px 6px 3px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.6)} .ai-agent-plan__look-cap span{display:block;font-size:10px;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-agent-plan__look-cap b{display:block;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-agent-plan__look-tile.is-unset .ai-agent-plan__look-cap{background:none;color:var(--muted,#697586);text-shadow:none} .ai-agent-plan__look-tile.is-unset .ai-agent-plan__look-cap span{color:var(--muted,#697586)} .ai-agent-plan__look-extra{margin:0;font-size:11.5px;line-height:1.45;color:var(--muted,#697586);border-left:3px solid color-mix(in srgb,var(--switch-on-bg,#8b7cf6) 45%,transparent);padding:1px 0 1px 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ai-agent-plan__decl-list.ai-agent-plan__look-facts{padding:6px 10px 8px;border-top:1px solid color-mix(in srgb,var(--ink,#172033) 10%,transparent)} .ai-agent-plan__look-facts>li{display:flex;align-items:center;gap:8px;min-width:0} .ai-agent-plan__look-facts>li>strong{flex:none} .ai-agent-plan__look-facts .ai-agent-plan__look-fact{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[data-theme="dark"] .ai-agent-plan__look-facts{border-top-color:color-mix(in srgb,var(--ink,#eceef2) 12%,transparent)} /* by the plan's own width, not the window's (2026-10-18 TEST: a 1000px window left the plan 248px and the tiles unreadable) */ .ai-agent-plan__look{container-type:inline-size} .ai-agent-plan__look>summary .ai-agent-plan__decl-title,.ai-agent-plan__decl>summary .ai-agent-plan__decl-open{white-space:nowrap;flex:none} .ai-agent-plan__look>summary .ai-agent-plan__decl-count{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* a narrow plan: the picture across the top, the four tiles one row of squares with their values only; very narrow, two by two */ @container (max-width:300px){.ai-agent-plan__look-row{grid-template-columns:minmax(0,1fr)}.ai-agent-plan__look-hero{min-height:0;aspect-ratio:16/9}.ai-agent-plan__look-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.ai-agent-plan__look-tile{aspect-ratio:1/1}.ai-agent-plan__look-cap span{display:none}.ai-agent-plan__look-cap b{font-size:10px}} @container (max-width:220px){.ai-agent-plan__look-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-agent-plan__look-tile{aspect-ratio:16/10}} /* The scene list while a draft is written (2026-10-18, the user): the same rows, unsaved — a badge, the details count, a check on a scene whose details are in, placeholders where its chips will be; nothing in it can be edited. */ .ai-agent-plan__draft-badge {margin-right:auto;margin-left:8px;padding:2px 8px;border-radius:6px;background:rgba(217,119,6,.14);color:#b45309;font-size:11px;font-weight:600;white-space:nowrap;} [data-theme="dark"] .ai-agent-plan__draft-badge {background:rgba(251,191,36,.16);color:#fbbf24;} .ai-agent-plan__draft-count {color:var(--muted,#697586);font-size:12px;font-variant-numeric:tabular-nums;} .ai-agent-plan__draft-note {margin:-6px 0 12px;color:var(--muted,#697586);font-size:12px;line-height:1.5;} .ai-agent-plan__draft-decl {pointer-events:none;} .ai-agent-plan__draft-decl>summary::after {content:none;} .ai-agent-plan__draft-decl>.ai-agent-plan__pending {padding:2px 10px 4px;} .ai-agent-plan__draft-mark {margin-left:6px;color:#16a34a;font-weight:700;} .ai-agent-plan__scene.is-writing .ai-agent-plan__scene-title {opacity:.8;} .ai-agent-plan__draft-chips {pointer-events:none;} .ai-agent-plan__draft-chips > .ai-agent-plan__bone--chip {display:inline-block;height:20px;border-radius:10px;} .ai-agent-plan__scene-body > .ai-agent-plan__pending--lines > .ai-agent-plan__bone--line {margin:6px 0;} /* Storyboard source is distinct from optional identity references. */ .ai-director-storyboard {padding:18px 0;border-top:1px solid var(--line);} .ai-director-storyboard h3 {margin:0;font-size:14px;} .ai-director-storyboard__board {margin-top:14px;min-width:0;} .ai-director-storyboard__board > strong {display:block;overflow-wrap:anywhere;margin-bottom:10px;} .ai-director-storyboard__preview {display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--bg-primary);overflow:hidden;} .ai-director-storyboard__preview img {display:block;width:100%;max-height:260px;object-fit:contain;} .ai-director-storyboard__status,.ai-director-storyboard__hint,.ai-director-storyboard__notice {font-size:12px;color:var(--text-secondary);margin:10px 0;} .ai-director-storyboard__panels summary,.ai-director-storyboard__supporting > summary {cursor:pointer;padding:10px 0;} .ai-director-storyboard__panels ol {padding-left:24px;margin:8px 0;} .ai-director-storyboard__panels li {padding:8px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere;} .ai-director-storyboard__panels li p {font-size:12px;margin:4px 0;} .ai-director-storyboard__time {font-size:12px;color:var(--text-secondary);} .ai-director-storyboard__supporting {border-top:1px solid var(--line);} /* A storyboard work's references are not edited (panel.js syncStoryboardLock, 2026-10-18): no attach, add or reference menu. */ .ai-assistant[data-storyboard-work] .ai-assistant__attach, .ai-assistant[data-storyboard-work] .ai-agent-plan__reference-new, .ai-assistant[data-storyboard-work] .ai-agent-plan__reference-actions, .ai-assistant[data-storyboard-work] .ai-director-storyboard__supporting{display:none!important} /* A storyboard work's mode beside the plan's title (agent-plan modeBadge, 2026-10-18). */ .ai-agent-plan__mode{display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.6;color:var(--accent,#8b7cf6);background:color-mix(in srgb,var(--accent,#8b7cf6) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent,#8b7cf6) 35%,transparent);white-space:nowrap;} .ai-agent-plan__mode[hidden]{display:none;}