/* Изолированные стили экспериментальных медиа: обычные поля и карточки не затронуты. */
.cm-greeting-editor { min-height: 110px; white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(var(--fg-rgb), .04); color: var(--text-primary); font: inherit; line-height: 1.5; }
.cm-greeting-editor:focus { outline: 1px solid var(--primary-color); }
#char-greeting[hidden], #cm-avatars[hidden], #cm-greeting-add[hidden] { display: none !important; }
.cm-image-chip { display: flex; width: fit-content; max-width: 100%; gap: 6px; margin: 4px 0; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); white-space: normal; user-select: none; }
.cm-image-chip button, .cm-action { padding: 7px 9px; color: var(--text-primary); background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; font-size: 12px; }
.cm-image-chip button { border: 0; }
.cm-image-chip button:first-child { text-align: left; }
.cm-avatar-headings, .cm-avatar-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cm-avatar-headings { margin-bottom: 8px; font-size: 12px; color: var(--text-secondary); }
.cm-avatar-headings, .cm-avatar-rail { padding-right: 8px; }
.cm-avatar-headings span:last-child { grid-column: span 2; }
.cm-primary-slot { position: relative; z-index: 3; grid-column: 1; grid-row: 1; min-width: 0; align-self: start; }
.cm-primary-empty { width: 100%; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; text-align: center; font: inherit; font-size: 12px; color: var(--text-secondary); background: rgba(var(--fg-rgb), .04); border: 1px dashed rgba(var(--fg-rgb), .2); border-radius: 10px; cursor: pointer; }
.cm-primary-empty[hidden] { display: none !important; }
.cm-avatar-window { position: relative; grid-column: 1 / -1; grid-row: 1; min-width: 0; align-self: start; width: calc(100% + 8px); }
.cm-avatar-list { position: relative; display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: calc((100% - 28px) / 3 + 18px); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cm-avatar-list::-webkit-scrollbar { display: none; }
.cm-avatar-nav { display: none; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.cm-avatar-nav[hidden] { display: none !important; }
.cm-avatar-nav button { width: 36px; height: 32px; padding: 0; border: 1px solid rgba(var(--fg-rgb), .25); border-radius: 8px; background: rgba(var(--fg-rgb), .04); color: var(--text-primary); font-size: 20px; cursor: pointer; }
.cm-avatar-nav button:disabled { opacity: .35; cursor: default; }
@media (any-pointer: fine) { .cm-avatar-nav { display: flex; } }
.cm-avatar, #cm-avatar-add, .cm-avatar-spacer { position: relative; flex: 0 0 calc((100% - 28px) / 3); min-width: 0; aspect-ratio: 3/4; box-sizing: border-box; scroll-snap-align: start; }
.cm-avatar-spacer { pointer-events: none; scroll-snap-align: none; }
.cm-avatar-covered .cm-avatar-remove { visibility: hidden; }
.cm-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
#cm-avatar-add { display: flex; align-items: center; justify-content: center; padding: 0; border: 1px dashed rgba(var(--fg-rgb), .3); border-radius: 10px; background: rgba(var(--fg-rgb), .04); color: var(--text-primary); font-size: 32px; cursor: pointer; }
#cm-avatar-add:disabled { opacity: .35; cursor: default; }
#cm-avatars #image-preview-container { margin: 0; }
#cm-avatars .create-image-preview-wrap { display: block; width: 100%; aspect-ratio: 3/4; }
#cm-avatars #image-preview-img { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; box-sizing: border-box; object-fit: cover; border-radius: 10px; }
#cm-avatars .create-image-source { display: none; }
#cm-avatars #remove-image-btn, #cm-avatars .cm-avatar-remove { position: absolute; top: 4px; right: 4px; z-index: 4; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(0,0,0,.65); color: white; font-size: 18px; line-height: 1; cursor: pointer; }
.cm-note { color: var(--text-secondary); font-size: 12px; margin: 7px 0; }
.cm-legacy-image-actions { display: none !important; }
.cm-avatar-rail [data-photo-index] { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.cm-avatar-rail img { -webkit-user-drag: none; }
/* Telegram Android открывает собственное меню над img при удержании.
   В редакторе Mini App показываем фото фоном, сохраняя img как источник для drag. */
.cm-avatar-rail .cm-native-photo { background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 10px; -webkit-touch-callout: none; }
.cm-avatar-rail .cm-native-photo > img { display: none !important; pointer-events: none; }
.cm-dragging .cm-avatar-list { scroll-snap-type: none; }
.cm-photo-drag-source { opacity: .35; }
.cm-photo-drop { outline: 2px solid var(--text-primary); outline-offset: -2px; border-radius: 10px; }
.cm-photo-drag-ghost { position: fixed; z-index: 20000; pointer-events: none; object-fit: cover; border-radius: 10px; opacity: .9; box-shadow: 0 8px 24px rgba(0,0,0,.45); transform: scale(1.04); }
.cm-photos-busy .cm-avatar-rail { pointer-events: none; opacity: .6; }
#cm-picker { z-index: 10100; }
#cm-picker .modal-body { display: flex; flex-direction: column; gap: 12px; }
.cm-carousel { position: relative; }
.cm-carousel-controls { position: absolute; z-index: 4; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(var(--cm-photo-count), 30px); align-items: center; gap: 4px; background: rgba(0,0,0,.55); border-radius: 8px; padding: 5px; user-select: none; }
.cm-carousel-controls .cm-carousel-thumb-button { display: block; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; touch-action: manipulation; }
.cm-carousel-thumb-button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.cm-carousel-controls .cm-carousel-thumbnail { width: 30px; height: 30px; box-sizing: border-box; object-fit: cover; object-position: top center; border: 2px solid transparent; border-radius: 4px; transform: scale(.8); opacity: .65; transition: transform .15s ease, opacity .15s ease, border-color .15s ease; }
.cm-carousel-controls .cm-carousel-thumb-button.is-active .cm-carousel-thumbnail { transform: scale(1); opacity: 1; border-color: white; }
.cm-carousel .character-name-overlay { padding-right: calc(var(--cm-photo-count) * 34px + 26px); }
.cm-greeting-image { display: block; width: 100%; max-height: 600px; object-fit: contain; border-radius: 10px; margin: 10px 0; }

.cm-greeting-header { flex-wrap: wrap; gap: 6px; }
.cm-greeting-header .textarea-var-btns { margin-left: auto; max-width: 100%; }
#cm-picker .modal-content { height: auto; max-height: 60vh; }

.ca-open { display: block; width: auto; padding: 7px 14px; margin-top: 8px; }
.ca-modal { z-index: 10200; }
.ca-modal .modal-content { max-width: 560px; }
.ca-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.ca-photos { display: flex; gap: 8px; }
.ca-photos button { border: 2px solid transparent; border-radius: 8px; padding: 0; background: transparent; overflow: hidden; cursor: pointer; }
.ca-photos button[aria-pressed="true"] { border-color: #a78bfa; }
.ca-photos img { display: block; width: 56px; height: 74px; object-fit: cover; }
.ca-models { margin: 0; padding: 8px; border: 1px solid var(--border-color); border-radius: 10px; }
.ca-model { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; }
.ca-model label { flex: 1; display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; }
.ca-model details { max-width: 45%; font-size: 12px; }
.ca-model summary { cursor: pointer; width: 24px; text-align: center; border: 1px solid var(--border-color); border-radius: 50%; }
.ca-prompt { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px; border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); }
.ca-result img { display: block; max-width: 100%; max-height: 360px; margin: 0 auto 10px; border-radius: 10px; }
.ca-status { font-size: 13px; overflow-wrap: anywhere; }
.ca-history { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ca-modal [hidden] { display: none !important; }
.ca-model-list { max-height: 270px; overflow-y: auto; overscroll-behavior: contain; }
.ca-model label span { overflow-wrap: anywhere; min-width: 0; }
.ca-model input { flex-shrink: 0; }

/* Compact character video tile and generation form. */
.ca-tile { position:relative; width:calc((100% - 28px) / 3); aspect-ratio:16/9; margin-top:12px; flex:none; box-sizing:border-box; }
.ca-tile-main { display:block; box-sizing:border-box; min-width:0; min-height:0; padding:0; width:100%; height:100%; border:1px solid var(--border-color); border-radius:12px; background:rgba(128,128,128,.08) center/cover; color:var(--text-primary); cursor:pointer; overflow:hidden; }
.ca-tile-main span { font-size:14px; font-weight:600; }
.ca-tile.has-video .ca-tile-main span { position:absolute; left:0; right:0; bottom:0; padding:5px; border-radius:0 0 12px 12px; color:white; background:linear-gradient(transparent,rgba(0,0,0,.7)); font-size:12px; }
.ca-tile-remove { position:absolute; top:5px; right:5px; width:25px; height:25px; padding:0; border:1px solid #ffffff50; border-radius:50%; background:#000b; color:white; font-size:20px; line-height:21px; cursor:pointer; }
.ca-tile[hidden], .ca-tile [hidden] { display:none !important; }
.ca-simple .modal-content { position:relative; max-width:420px; }
.ca-simple .ca-close { position:absolute; right:12px; top:10px; z-index:2; }
.ca-simple .modal-body { padding:46px 20px 20px; }
.ca-simple label { display:block; margin-bottom:12px; font-size:17px; font-weight:600; }
.ca-simple textarea { width:100%; box-sizing:border-box; resize:vertical; }
.ca-simple .ca-price { display:flex; justify-content:space-between; margin:18px 0; }
.ca-simple .ca-start, .ca-simple .ca-new { width:100%; min-height:44px; }
.ca-simple .ca-status { padding:0 20px 16px; margin:0; }
.ca-gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px; max-height:45vh; overflow:auto; }
.ca-pick-video { padding:0; border:1px solid var(--border-color); border-radius:10px; overflow:hidden; aspect-ratio:16/9; background:var(--bg-primary); cursor:pointer; }
.ca-pick-video img { width:100%; height:100%; object-fit:cover; display:block; }

.ca-preview video { display:block; width:auto; height:auto; max-width:100%; max-height:55vh; align-self:center; object-fit:contain; border-radius:12px; background:transparent; }
.ca-preview-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ca-preview-actions button { min-width:0; min-height:44px; padding:10px 6px; }

.ca-preview .ca-preview-actions, .ca-preview .ca-replace { width:var(--ca-video-width, 100%); max-width:100%; align-self:center; box-sizing:border-box; }
.ca-preview-actions button { overflow-wrap:anywhere; }

.ca-video-stage { display:grid; width:100%; min-width:0; }
.ca-video-stage video, .ca-video-loading { grid-area:1 / 1; }
.ca-video-stage video { justify-self:center; min-width:0; }
.ca-video-stage.is-loading { min-height:min(55vh, 400px); }
.ca-video-stage.is-loading video { visibility:hidden; }
.ca-video-loading { align-self:center; justify-self:center; text-align:center; padding:20px; color:var(--text-secondary); font-size:14px; }

.toggle-video-btn { left:75%; }
.toggle-video-btn.active { color:#5cc8ff; }
.header:has(.search-input.active) .toggle-video-btn { display:none; }

.toggle-video-btn[aria-pressed="false"], .toggle-video-btn[aria-pressed="false"]:hover { color:#9a9aa2; }
.toggle-video-btn[aria-pressed="false"] .border-svg path { stroke:#9a9aa2; }

.generated-image-carousel { position:relative; display:grid; grid-template-columns:minmax(0, 1fr); }
.generated-image-carousel > .generated-image, .generated-image-carousel > .chat-generated-video { grid-area:1 / 1; }
.chat-image-animation-controls { position:relative; grid-area:1 / 1; align-self:end; justify-self:end; margin:7px; display:flex; gap:5px; z-index:3; white-space:normal; }
.chat-image-animation-controls button { padding:5px 8px; border:1px solid #ffffff30; border-radius:7px; color:#242428; background:rgba(210,210,215,.94); font-size:11px; line-height:1.2; cursor:pointer; }
.chat-image-animation-controls [hidden] { display:none !important; }
.chat-generated-video { display:block; width:100%; max-width:300px; height:auto; border-radius:12px; cursor:pointer; }

/* Админский стенд видео: выбор движка, длительность, статус карты, секундомер. */
.ca-admin { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ca-admin-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.ca-admin-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ca-admin-pills label { cursor: pointer; }
.ca-admin-pills input { position: absolute; opacity: 0; pointer-events: none; }
.ca-admin-pills span { display: inline-block; padding: 6px 12px; border-radius: 999px; background: transparent; border: 2px solid rgba(255, 255, 255, 0.2); color: var(--text-primary); font-size: 13px; }
.ca-admin-pills input:checked + span { border-color: var(--primary-color); background: var(--primary-color); color: #fff; }
.ca-admin-pills input:focus-visible + span { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.ca-pod-status { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.ca-pod-status:empty { display: none; }
.ca-simple .ca-timer { padding: 0 20px; margin: 0 0 8px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.ca-gen-meta { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: center; }