/* Metalogy Spatial Editor — AI 에이전트 탭 (v2.4.0-beta1). AI 는 보라(#9b87ff)로 편집기 초록(--accent)과 나눈다. */

/* v2.4.3 (사용자 '왼쪽 UI 하단에 대화와 저장소가 겹치거나 짤림 — 스크롤 방식으로') 칸이 낮으면 탭 전체가 스크롤 — 예전엔 넘친 칸이 줄어들며 겹쳤다.
   칸이 넉넉하면 대화 목록이 남은 높이를 채운다 (.ai-wrap · .ai-chat-box 는 내용보다 작아지지 않음) */
.ai-tabpanel:not([hidden]) { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 8px 8px 10px; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }
.ai-wrap { display: flex; flex-direction: column; gap: 8px; flex: 1 0 auto; }

/* 연결 칩 */
.ai-top { display: flex; align-items: center; gap: 6px; }
.ai-conn-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: #ffffff08; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .15s, background-color .15s; }
.ai-conn-chip:hover { border-color: #9b87ff80; background: #9b87ff14; }
.ai-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ff6b81; box-shadow: 0 0 0 3px #ff6b8122; }
.ai-dot.is-ok { background: #2fd3a8; box-shadow: 0 0 0 3px #2fd3a822; }

/* 아바타 카드 */
.ai-agent-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 10px; border: 1px solid #9b87ff33; border-radius: 12px; background: linear-gradient(180deg, #9b87ff12, #9b87ff05); }
.ai-face { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ai-color, #7c5cff); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 0 0 2px #ffffffb0; }
.ai-agent-meta { display: grid; gap: 1px; min-width: 0; }
.ai-agent-name { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-agent-status { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-agent-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.ai-agent-actions .btn { gap: 4px; }
#tab-ai.is-working .ai-face { animation: ai-face-pulse 1.6s ease-in-out infinite; }
@keyframes ai-face-pulse { 50% { box-shadow: 0 0 0 2px #ffffffb0, 0 0 0 6px #9b87ff44; } }

/* 빠른 일 · 제안 가구 */
.ai-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ai-quick .btn { padding: 0 6px; gap: 4px; font-size: 11.5px; min-width: 0; }
.ai-quick .btn svg { width: 14px; height: 14px; }
.ai-props-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border: 1px dashed #f0a04b66; border-radius: 10px; background: #f0a04b0d; font-size: 12px; color: #f6cf9f; }
.ai-props-bar > span { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
.ai-props-bar svg { width: 14px; height: 14px; }

/* 대화 */
/* v2.4.3 기준 높이 220 px (px 라 내용만큼 늘지 않음 — 칸이 넉넉하면 남은 높이를 채우고, 긴 대화는 목록 안에서 스크롤) */
.ai-log { flex: 1 1 220px; min-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 6px; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }
/* 넘치면 항목이 눌리지 않고 목록이 스크롤 (세로 flex 의 기본 줄어듦 — 그림 미리보기가 2 px 로 눌렸다) */
.ai-log > * { flex-shrink: 0; }
.ai-msg { max-width: 100%; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
.ai-msg.is-user { align-self: flex-end; max-width: 88%; background: #2fd3a81f; border: 1px solid #2fd3a840; color: #e9fbf5; white-space: pre-wrap; }
.ai-msg.is-ai { align-self: stretch; background: #ffffff07; border: 1px solid #ffffff12; color: var(--text); }
.ai-msg code { padding: 0 4px; border-radius: 4px; background: #ffffff14; font-size: 11.5px; }
.ai-think { margin-bottom: 4px; font-size: 11px; color: #b9b0ee; font-style: italic; }
.ai-think::before { content: '생각 · '; font-style: normal; color: #8e84c9; }
.ai-step { border: 1px solid #ffffff12; border-radius: 9px; padding: 6px 8px; background: #0b1016; font-size: 11.5px; }
.ai-step-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ai-step-name { flex: none; color: #cfc7ff; font-weight: 600; }
.ai-step-arg { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-step-status { flex: none; max-width: 48%; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-step.is-run .ai-step-status { color: #b9b0ee; }
.ai-step.is-run .ai-step-name::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #9b87ff; animation: ai-tab-pulse 1.2s ease-out infinite; vertical-align: 1px; }
.ai-step.is-ok .ai-step-status { color: #7fe3c4; }
.ai-step.is-fail { border-color: #ff6b8140; }
.ai-step.is-fail .ai-step-status { color: #ff9aa9; }
.ai-thumbs { display: flex; flex-wrap: wrap; gap: 4px; }
.ai-thumbs:not(:empty) { margin-top: 6px; }
.ai-thumb { padding: 0; border: 1px solid #ffffff1f; border-radius: 6px; overflow: hidden; background: #000; cursor: zoom-in; line-height: 0; }
.ai-thumb img { display: block; width: 136px; height: auto; }
.ai-thumb.is-small img { width: 64px; }
.ai-thumb:hover { border-color: #9b87ffaa; }
.ai-log > .ai-thumb img { width: 100%; }
.ai-note-line { font-size: 11.5px; color: var(--dim); text-align: center; }
.ai-note-line.is-warn { color: #f6cf9f; }
.ai-note-line.is-error { color: #ff9aa9; text-align: left; padding: 6px 8px; border: 1px solid #ff6b8140; border-radius: 8px; background: #ff6b810d; }
.ai-result { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #2fd3a840; border-radius: 10px; background: #2fd3a80d; font-size: 12px; color: #c9f6e8; }
.ai-result > span { flex: 1; }
.ai-generated { border: 1px solid #9b87ff40; border-radius: 10px; overflow: hidden; background: #000; }
.ai-gen-img { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; }
.ai-gen-img img { width: 100%; height: auto; display: block; }
.ai-gen-row { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #0b1016; }
.ai-gen-model { flex: 1; font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-welcome { display: grid; gap: 6px; padding: 12px; border: 1px solid #9b87ff40; border-radius: 12px; background: #9b87ff0d; font-size: 12.5px; color: var(--text); }
.ai-welcome p { margin: 0; color: var(--muted); line-height: 1.6; }
.ai-welcome .ai-welcome-where { color: #cfc7ff; font-size: 12px; } /* v2.4.0-beta14 연결 자리 (머리줄 AI Agent · ADMIN ▾) */
.ai-welcome ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.ai-welcome .btn { justify-self: start; }
.ai-past { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px dashed #ffffff1a; opacity: .7; }
.ai-past-head { font-size: 11px; color: var(--dim); }

/* 입력 */
.ai-compose { display: grid; gap: 6px; }
.ai-input { width: 100%; min-height: 54px; max-height: 160px; resize: vertical; font-size: 12.5px; line-height: 1.5; padding: 8px 10px; }
.ai-compose-row { display: flex; align-items: center; gap: 6px; }
.ai-usage { flex: 1; min-width: 0; font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-send { min-width: 64px; }
/* v2.4.3 바닥 줄 — 이번 대화 토큰 · 값 / 저장소 (왼쪽 탭 · AI 대화 리모컨 같은 모양) */
.ai-foot { display: grid; gap: 4px; font-size: 11px; color: var(--dim); }
.ai-foot-row { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 26px; }
.ai-store-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 연결 설정 · 저장소 창 */
.ai-connect { width: min(640px, calc(100vw - 32px)); }
.ai-connect-body { display: grid; gap: 4px; max-height: min(74vh, 760px); }
.ai-sec { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid #ffffff10; }
.ai-sec h3 { margin: 0; font-size: 13px; color: #dfe6ee; }
.ai-note { margin: 0 !important; font-size: 12px !important; line-height: 1.6; color: var(--muted); }
.ai-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.ai-seg button { height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff06; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.ai-seg button[aria-checked="true"] { border-color: #9b87ffaa; background: #9b87ff22; color: #fff; }
/* v2.4.2 칸 안 줄(모델 · 질감 · 지역 · 만들기 전 · 값 안내)도 칸 사이와 같은 8 px — 예전엔 0 px 로 붙었다 */
.ai-model-box { display: grid; gap: 8px; }
.ai-model-box select { width: 100%; }
.ai-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.ai-row-label { flex: none; min-width: 64px; color: var(--muted); font-size: 12px; }
.ai-row .field { flex: 1; min-width: 160px; }
.ai-key-row { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid #ffffff10; border-radius: 10px; background: #ffffff04; }
.ai-key-label { display: flex; align-items: baseline; gap: 4px; font-size: 12.5px; }
.ai-key-label span { color: var(--dim); font-size: 11.5px; }
.ai-key-link { margin-left: auto; font-size: 11.5px; color: #b9b0ee; }
.ai-key-input { display: flex; gap: 4px; align-items: center; }
.ai-key-input .field { flex: 1; min-width: 0; font-size: 12px; }
.ai-key-status { font-size: 11.5px; color: var(--dim); min-height: 1em; }
.ai-key-status[data-ok="true"] { color: #7fe3c4; }
.ai-key-status[data-ok="false"] { color: #ff9aa9; }
.ai-color { width: 40px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.ai-connect-foot { align-items: center; flex-wrap: wrap; }
.ai-grow { flex: 1; }
.ai-store-pick { gap: 6px; }
.ai-lightbox { width: min(1280px, calc(100vw - 32px)); }
.ai-lightbox img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* 3D 화면 위 아바타 (온라인 모드 참여자와 같은 모양) */
.ai-avatar-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.ai-avatar-cone { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* v2.4.7 시야 사각뿔 — 온라인 모드 참여자와 같은 테두리 (.mse-online-cone-edge) */
.ai-avatar-cone-edge { fill: none; stroke-width: 1.2; stroke-opacity: .6; stroke-linejoin: round; }
.ai-avatar { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 4px; transform-origin: 50% 32px; will-change: transform; }
.ai-avatar[hidden] { display: none; }
/* v2.4.7 온라인 모드 참여자 얼굴과 같은 크기 · 테두리 (56 px, 자기 색 테두리 3 px) */
.ai-avatar-face { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ai-color, #7c5cff) 78%, #0b0f14); color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .02em; border: 3px solid var(--ai-color, #7c5cff); box-shadow: 0 0 0 1.5px #ffffffb0, 0 4px 16px rgba(0, 0, 0, .45); }
.ai-avatar.is-walking .ai-avatar-face { animation: ai-bob .55s ease-in-out infinite alternate; }
@keyframes ai-bob { to { transform: translateY(-3px); } }
.ai-avatar-name { max-width: 160px; padding: 3px 10px; border-radius: 999px; background: rgba(8, 14, 18, .78); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-avatar-name::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ai-color, #7c5cff); vertical-align: 1px; }
.ai-avatar-doing { padding: 1px 7px; border-radius: 6px; background: #2a2250d8; color: #e3dcff; font-size: 11px; white-space: nowrap; }
.ai-avatar-doing:empty { display: none; }
/* v2.5.12 이름표 옆 숨기기 단추(층은 누름을 통과 — 이 단추만 받음) · 가려지면 숨기지 않고 흐리게 */
.ai-avatar-tag { display: flex; align-items: center; gap: 4px; max-width: 190px; }
.ai-avatar-hide { pointer-events: auto; flex: none; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 1px solid #ffffff30; border-radius: 50%; background: rgba(8, 14, 18, .78); color: #fff; font: inherit; font-size: 14px; line-height: 1; opacity: .8; cursor: pointer; transform: scale(var(--ai-hide-k, 1)); transform-origin: 0 50%; }
.ai-avatar-hide:hover { opacity: 1; border-color: #ffffff80; background: rgba(40, 46, 56, .92); }
.ai-avatar.is-behind { opacity: .5; }
.ai-avatar-cone.is-behind { opacity: .4; }
@media (prefers-reduced-motion: reduce) { .ai-avatar.is-walking .ai-avatar-face, #tab-ai.is-working .ai-face, .ai-step.is-run .ai-step-name::before { animation: none; } }

/* AI 가 보는 동안 (화면 밖 그리기 — 사용자 화면은 잠깐 멈춤) */
.viewer-host.ai-looking::after { content: attr(data-ai-busy); position: absolute; left: 50%; top: 14px; z-index: 6; transform: translateX(-50%); padding: 5px 12px; border: 1px solid #9b87ff66; border-radius: 999px; background: #120f24e0; color: #e3dcff; font-size: 12px; pointer-events: none; }

/* ---- '선정' (2026-10-19): 온라인 주석처럼 번호 핀 — 빠른 선정은 둥근 핀, 범위 선정은 둥근 네모(상자 위 가운데). 분홍 = 뷰어 mark 상자 선과 같은 색 */
.ai-marks { display: grid; gap: 6px; padding: 8px 9px; border: 1px solid #ff6bb840; border-radius: 12px; background: linear-gradient(180deg, #ff6bb80f, #ff6bb805); }
.ai-marks-head { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: #ffd3ea; }
.ai-marks-count:not(:empty) { padding: 0 6px; border-radius: 999px; background: #ff6bb833; font-size: 10.5px; line-height: 17px; color: #ffe1f0; }
.ai-marks-hint { margin-left: auto; font-size: 11px; color: var(--dim); }
/* v2.4.3 (사용자 '빠른 선정, 범위 선정 아래 컨테이너 간격') 단추 줄 · 목록 · 안내 사이 6 px — 예전엔 칸에 규칙이 없어 0 px 로 붙었다 */
.ai-marks-body { display: grid; gap: 6px; }
.ai-mark-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ai-mark-tools .btn { gap: 4px; font-size: 11.5px; padding: 0 6px; min-width: 0; }
.ai-mark-tools .btn svg { width: 14px; height: 14px; }
.ai-mark-tools .btn.is-active { border-color: #ff6bb8aa; background: #ff6bb826; color: #ffe1f0; }
.ai-mark-empty { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--dim); }
.ai-mark-list { display: grid; gap: 4px; max-height: 210px; overflow: auto; scrollbar-width: thin; }
.ai-mark-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; align-items: center; padding: 7px 8px; border: 1px solid #ffffff10; border-radius: 9px; background: #0b1016; }
.ai-mark-row.is-selected { border-color: #ff6bb8aa; background: #ff6bb812; }
.ai-mark-badge { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 2px solid #ffffffd0; border-radius: 50%; background: #ff5fae; color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ai-mark-row.is-box .ai-mark-badge { border-radius: 7px; }
.ai-mark-main { display: grid; gap: 5px; min-width: 0; }
.ai-mark-name { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-mark-name small { color: var(--dim); font-size: 10.5px; }
.ai-mark-note { height: 26px; font-size: 11.5px; padding: 0 8px; }
/* v2.4.2 (사용자 '선정 1 을 만든 뒤 단추 간격이 어색') 단추 사이 2 → 4 px, 메모 칸과 2 → 6 px, AI 단추(ai-fx-soft)도 쉴 때 테두리를 보여
   테두리 있는 단추 · 없는 단추가 섞여 들쭉날쭉하던 간격을 고르게 */
.ai-mark-acts { grid-column: 2; display: flex; gap: 4px; justify-content: flex-end; }
.ai-mark-acts .btn.icon.small { width: 26px; height: 24px; }
.ai-mark-acts .ai-fx-soft { --ai-fx-rest: .4; }
.ai-mark-acts svg { width: 14px; height: 14px; }

/* 3D 화면 위 선정 핀 */
.ai-mark-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.ai-mark-pin { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 4px; will-change: transform; transition: opacity .25s; }
.ai-mark-pin[hidden] { display: none; }
.ai-mark-dot { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #ff5fae; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 0 0 3px #ffffffd8, 0 4px 14px #0009; animation: ai-mark-glow 2.2s ease-in-out infinite; }
.ai-mark-pin.is-box .ai-mark-dot { border-radius: 8px; }
.ai-mark-pin.is-selected .ai-mark-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 7px #ff5fae66, 0 4px 14px #0009; }
.ai-mark-label { max-width: 180px; padding: 2px 8px; border-radius: 999px; background: #0b0f14d8; color: #ffe1f0; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes ai-mark-glow { 50% { box-shadow: 0 0 0 3px #ffffffd8, 0 0 0 8px #ff5fae33, 0 4px 14px #0009; } }
@media (prefers-reduced-motion: reduce) { .ai-mark-dot { animation: none; } }
.viewer-host.ai-mark-placing canvas { cursor: crosshair; }
/* v2.4.0-beta3 선정 완료 — 3D 화면에서 숨기고 목록에 '완료' (다시 보이기 · 다시 열기) */
.ai-mark-row.is-done { border-color: #3ccf9130; background: #0a1511; }
.ai-mark-row.is-done .ai-mark-badge { background: #2fa877; }
.ai-mark-row.is-done .ai-mark-name { color: var(--dim); }
.ai-mark-chip { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #3ccf9126; color: #9af0c8; font-size: 10.5px; line-height: 16px; }
.ai-mark-done { font-size: 11px; line-height: 1.45; color: #9af0c8; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ai-mark-check { font-size: 13px; font-weight: 700; line-height: 1; }
.ai-mark-pin.is-done .ai-mark-dot { background: #2fa877; animation: none; }
.ai-mark-pin.is-done .ai-mark-label { color: #c8f7e1; }
/* v2.5.10 잠근 선정 — 줄의 '잠김' 칩 · 켠 자물쇠 단추 · 읽기만 하는 메모 · 3D 화면 핀 이름 앞 자물쇠 */
.ai-mark-chip.is-lock { background: #ffd47922; color: #ffd479; }
.ai-mark-acts .btn.ai-mark-lock.is-active { color: #ffd479; background: #ffd4791f; }
.ai-mark-row.is-locked .ai-mark-note[readonly] { opacity: .65; cursor: default; }
/* v2.5.11 선정 수정 요청 — 주황 줄 · '수정 요청' 칩 · 요청 글 · 적는 칸(줄 아래 전체 폭) */
.ai-mark-row.is-revise { border-color: #ffb45a55; background: #160f08; }
.ai-mark-row.is-revise .ai-mark-badge { background: #e38b2c; }
.ai-mark-chip.is-revise { background: #ffb45a26; color: #ffc98a; }
.ai-mark-revise-line { font-size: 11px; line-height: 1.45; color: #ffc98a; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ai-mark-revise-line b { font-weight: 600; }
.ai-mark-acts .btn.icon.small.is-active { color: #ffc98a; background: #ffb45a1f; }
.ai-mark-revise { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 7px; border-top: 1px solid #ffffff12; }
textarea.field.ai-mark-revise-text { display: block; width: 100%; height: auto; min-height: 58px; padding: 6px 8px; resize: vertical; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.ai-mark-revise-row { display: flex; align-items: center; gap: 8px; }
.ai-mark-revise-mode { flex: 1; min-width: 0; }
.ai-mark-revise-mode button { flex: 1; height: 28px; padding: 0 8px; }
.ai-mark-revise-hint { margin: 0; font-size: 11px; line-height: 1.45; color: var(--dim); }
.ai-mark-revise-acts { display: flex; justify-content: flex-end; gap: 6px; }
.ai-mark-list:has(.ai-mark-revise) { max-height: 400px; }
.ai-mark-pin.is-locked .ai-mark-label::before { content: ''; display: inline-block; width: 9px; height: 10px; margin: 0 4px -1px 0; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7.5a4 4 0 0 1 8 0V11'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7.5a4 4 0 0 1 8 0V11'/></svg>") center / contain no-repeat; }

/* v2.4.0-beta4 3D 오브젝트 내보내기 창 (assets/ai/export.js — 형식 골라 ZIP) */
dialog.modal.ai-export { width: min(560px, calc(100vw - 32px)); }
.ai-export-body { display: grid; gap: 10px; }
.ai-export-what { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.ai-export-what svg { width: 16px; height: 16px; flex: none; color: #b9a7ff; }
.ai-export-body .hint { margin: 0; }
.ai-export-formats { display: grid; gap: 4px; }
.ai-export-fmt { display: grid; grid-template-columns: auto 44px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: #ffffff05; font-size: 12px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ai-export-fmt:hover { border-color: #9b87ff66; background: #9b87ff0d; }
.ai-export-fmt b { font-size: 12.5px; color: var(--text); }
.ai-export-fmt span { color: var(--dim); line-height: 1.45; }
.ai-export-fmt.is-off { opacity: .6; cursor: not-allowed; }
.ai-export-fmt.is-off:hover { border-color: var(--line); background: #ffffff05; }
.ai-export-opts { display: grid; gap: 6px; padding-top: 2px; }
.ai-export-opt { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); cursor: pointer; }
.ai-export-status { margin: 0; min-height: 18px; font-size: 12px; line-height: 1.5; color: #9af0c8; overflow-wrap: anywhere; }
.ai-export-status.is-warn { color: #ffc46b; }
.ai-export.is-busy .ai-export-formats, .ai-export.is-busy .ai-export-opts { opacity: .65; pointer-events: none; }
.ai-export-foot { justify-content: flex-end; gap: 8px; }

/* v2.4.0-beta7 걷기 충돌이 없는 맵 — AI 잠금 (연결 줄만 남기고 안내 카드) · 탭 단추 표시 */
.ai-body { display: contents; }
#tab-ai.is-locked .ai-body { display: none; }
.ai-lock { display: grid; gap: 8px; padding: 12px 12px 13px; border: 1px solid #ffc46b55; border-radius: 12px; background: linear-gradient(180deg, #ffc46b14, #ffc46b06); font-size: 12px; line-height: 1.55; color: var(--text); }
.ai-lock[hidden] { display: none; }
.ai-lock-head { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #ffe2b0; }
.ai-lock-head svg { width: 16px; height: 16px; flex: none; color: #ffc46b; }
.ai-lock-text p { margin: 0; }
.ai-lock-text ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--dim); }
.ai-lock-text ul b { color: var(--text); }
.ai-lock-note { margin-top: 6px !important; color: var(--dim); font-size: 11.5px; }
.ai-lock .btn { justify-self: start; }
#tabbtn-ai.is-locked { opacity: .72; }
#tabbtn-ai.is-locked::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: #ffc46b; vertical-align: 2px; }

/* v2.4.0-beta9 그림 첨부 (attach.js) — 붙이기 칸 · 대화 그림 · 끌어 놓기 · 그림 보관함 */
.ai-attach-tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 2px 2px; }
.ai-attach { position: relative; width: 64px; height: 48px; border-radius: 7px; border: 1px solid #ffffff22; background: #0b1016; }
.ai-attach-img { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #000; cursor: zoom-in; line-height: 0; }
.ai-attach-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ai-attach-img.is-wait { display: grid; place-items: center; color: var(--dim); cursor: default; background: #ffffff08; }
.ai-attach-dot { position: absolute; left: 4px; bottom: 4px; width: 8px; height: 8px; border-radius: 50%; background: #8a93a3; box-shadow: 0 0 0 2px #0b1016; pointer-events: none; }
.ai-attach.is-shrink .ai-attach-dot, .ai-attach.is-upload .ai-attach-dot { background: #f5b84a; animation: ai-face-pulse 1.2s ease-in-out infinite; }
.ai-attach.is-saved .ai-attach-dot { background: #2fd3a8; }
.ai-attach.is-unsaved .ai-attach-dot { background: #f5b84a; }
.ai-attach.is-failed { border-color: #ff6b6b88; }
.ai-attach.is-failed .ai-attach-dot { background: #ff6b6b; }
.ai-attach-x { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid #ffffff38; background: #1a2029; color: #fff; display: grid; place-items: center; cursor: pointer; }
.ai-attach-x:hover { background: #3a2230; border-color: #ff6b6b99; }
.ai-attach-x svg { width: 11px; height: 11px; }
#tab-ai.is-drop .ai-compose { outline: 2px dashed #9b87ff; outline-offset: 3px; border-radius: 10px; background: #9b87ff10; }
.ai-msg-imgs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; margin-bottom: 6px; white-space: normal; }
.ai-msg-imgs .ai-thumb.is-small img { width: 72px; height: 54px; object-fit: cover; }
.ai-msg-img-gone { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px dashed #ffffff26; border-radius: 6px; font-size: 11px; color: var(--dim); }
.ai-msg-img-gone svg { width: 13px; height: 13px; }
.ai-imgbox { width: min(760px, calc(100vw - 32px)); }
.ai-imgbox-body { display: grid; gap: 10px; }
.ai-imgbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: min(60vh, 560px); overflow: auto; padding: 2px; }
.ai-imgbox-card { display: grid; border: 1px solid #ffffff1a; border-radius: 9px; overflow: hidden; background: #0b1016; transition: border-color .15s, box-shadow .15s; }
.ai-imgbox-card.is-picked { border-color: #9b87ff; box-shadow: 0 0 0 1px #9b87ff; }
.ai-imgbox-img { padding: 0; border: 0; background: #000; aspect-ratio: 4 / 3; cursor: zoom-in; line-height: 0; }
.ai-imgbox-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ai-imgbox-meta { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px 0; font-size: 12px; cursor: pointer; }
.ai-imgbox-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-imgbox-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 4px 4px 8px; font-size: 11px; color: var(--dim); }
.ai-imgbox-empty { grid-column: 1 / -1; }

/* ---- v2.4.0-beta12 AI 단추 효과 (사용자 요청 2026-10-20 — 제미나이 AI 단추처럼) ----
   AI 를 부르는 단추에만: 탭 단추 'AI 에이전트' · 빠른 일 셋 · 보내기 · 연결 설정 · 선정 줄의 'AI: 3D 오브젝트 만들기'.
   - 테두리: 파랑 → 보라 → 장미 원뿔 그라데이션(::before — 테두리 1 px 만 남기는 mask). 각도 --ai-fx-a 를 @property 로 돌린다
   - 빛: box-shadow 세 색 (단추 안은 물들지 않음) · 아이콘: SVG 그라데이션 #ai-fx-grad (editor.html) — 반짝이 별은 칠까지
   - 가만히 있을 땐 멈춤 — 마우스를 올리거나(키보드 초점) AI 가 일하는 동안만 돈다 (3D 화면과 같이 그려도 가볍게). 움직임 줄이기면 돌지 않음
   - 채운 단추(.ai-fx-fill — 보내기 · 연결 설정): 같은 그라데이션 바탕이 올리면 옆으로 흐르고 빛 띠가 한 번 지나감 */
@property --ai-fx-a { syntax: '<angle>'; inherits: false; initial-value: 135deg; }
:root {
  --ai-fx-1: #4285f4; --ai-fx-2: #9b72cb; --ai-fx-3: #d96570;
  /* 세기 (v2.4.0-beta13 사용자 요청 '더 은은하게 — 테두리 · 빛 약하게'): 쉴 때 테두리 · 올렸을 때 테두리 · 빛 */
  --ai-fx-ring-rest: .45; --ai-fx-ring-on: .75;
  --ai-fx-glow: -3px 0 10px -6px #4285f466, 3px 0 10px -6px #d9657066, 0 2px 12px -7px #9b72cb66;
}
.ai-fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ai-fx { position: relative; border-color: transparent !important; transition: color .25s ease, background-color .2s, box-shadow .35s ease, opacity .35s, filter .35s; }
.ai-fx::before {
  content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--ai-fx-a), var(--ai-fx-1), var(--ai-fx-2) 25%, var(--ai-fx-3) 50%, var(--ai-fx-2) 75%, var(--ai-fx-1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--ai-fx-rest, var(--ai-fx-ring-rest)); transition: opacity .3s ease;
  animation: ai-fx-spin 3.2s linear infinite paused;
}
.ai-fx:hover::before, .ai-fx:focus-visible::before, .ai-fx.is-working::before { opacity: var(--ai-fx-ring-on); animation-play-state: running; }
.ai-fx:hover, .ai-fx:focus-visible { box-shadow: var(--ai-fx-glow); }
.ai-fx svg { stroke: url(#ai-fx-grad); }
.ai-fx-soft { --ai-fx-rest: 0; }
.ai-quick .ai-fx { --ai-fx-rest: .25; }
.ai-fx:disabled::before { opacity: .15; animation-play-state: paused; }
.ai-fx:disabled:hover { box-shadow: none; }
@keyframes ai-fx-spin { to { --ai-fx-a: 495deg; } }

/* 탭 단추 — 반짝이 별을 칠하고, 올리면 별이 한 번 돌고, 고르면 글자도 그라데이션. 일하는 중이면 테두리 · 빛 · 별이 계속 (다른 탭을 보고 있어도) */
#tabbtn-ai > svg path { fill: url(#ai-fx-grad); stroke: url(#ai-fx-grad); }
#tabbtn-ai > svg path { transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
#tabbtn-ai:hover > svg path:first-child { transform: rotate(90deg); }
/* 글자 그라데이션은 글자만 감싼 .ai-fx-label 에 (단추 전체 폭에 걸면 가운데 글자에는 보라 한 색만 걸림) */
#tabbtn-ai:not(.is-locked):is(:hover, [aria-selected="true"]) .ai-fx-label { background: linear-gradient(90deg, #8ab4f8, #c3a6f7 50%, #f4a3ab); -webkit-background-clip: text; background-clip: text; color: transparent; }
#tabbtn-ai[aria-selected="true"]:not(.is-locked) { box-shadow: -3px 0 10px -8px #4285f455, 3px 0 10px -8px #d9657055; }
#tabbtn-ai.is-working { animation: ai-fx-breathe 2.6s ease-in-out infinite; }
#tabbtn-ai.is-working > svg path:first-child { animation: ai-fx-twinkle 1.8s ease-in-out infinite; }
#tabbtn-ai.is-working > svg path:nth-child(2) { animation: ai-fx-blink 1.8s ease-in-out infinite; }
@keyframes ai-fx-breathe {
  0%, 100% { box-shadow: -4px 0 12px -7px #4285f477, 4px 0 12px -7px #d9657077, 0 2px 12px -8px #9b72cb77; }
  50% { box-shadow: 4px 0 13px -6px #4285f488, -4px 0 13px -6px #d9657088, 0 3px 14px -7px #9b72cb88; }
}
@keyframes ai-fx-twinkle { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(90deg) scale(.78); } 100% { transform: rotate(180deg) scale(1); } }
@keyframes ai-fx-blink { 50% { transform: scale(.45); opacity: .55; } }
.tabs .tab-ai .ai-tab-state { background: linear-gradient(135deg, var(--ai-fx-1), var(--ai-fx-2), var(--ai-fx-3)); }
/* 잠김(걷기 충돌 없음) — 효과를 끄고 주황 점만 */
#tabbtn-ai.is-locked::before { opacity: .2; filter: grayscale(1); animation-play-state: paused; }
#tabbtn-ai.is-locked, #tabbtn-ai.is-locked:hover { box-shadow: none; animation: none; }
#tabbtn-ai.is-locked > svg path { fill: none; stroke: currentColor; }

/* AI 탭 입력 칸 초점도 AI 색 (편집기 초록 대신 — 보내기 그라데이션과 나란히) */
:is(#tab-ai, .remote-ai) .ai-input:focus { border-color: #9b72cb; outline-color: #9b72cb33; }

/* 채운 단추 (보내기 · 연결 설정) — 일하는 중 '멈춤'(빨강)이면 primary 가 빠져 그대로 빨강 */
:is(#tab-ai, .remote-ai) .btn.primary.ai-fx-fill { position: relative; isolation: isolate; overflow: hidden; border: 0; background: linear-gradient(100deg, #3a78e8, #8b62c6 50%, #c95468) 0 50% / 200% 100%; transition: background-position .7s ease, box-shadow .35s ease, opacity .35s, filter .35s; }
:is(#tab-ai, .remote-ai) .btn.primary.ai-fx-fill:hover:not(:disabled), :is(#tab-ai, .remote-ai) .btn.primary.ai-fx-fill:focus-visible { background-position: 100% 50%; box-shadow: var(--ai-fx-glow); }
:is(#tab-ai, .remote-ai) .btn.primary.ai-fx-fill::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 25%, #ffffff3d 50%, transparent 75%); transform: translateX(-120%); pointer-events: none; }
:is(#tab-ai, .remote-ai) .btn.primary.ai-fx-fill:hover:not(:disabled)::after { transform: translateX(120%); transition: transform 1s ease; }
:is(#tab-ai, .remote-ai) .btn.primary.ai-fx-fill svg { stroke: currentColor; }

/* 고대비(강제 색) 모드 — 그라데이션 글자 · 테두리를 빼고 시스템 색 그대로 */
@media (forced-colors: active) {
  .ai-fx::before, :is(#tab-ai, .remote-ai) .btn.primary.ai-fx-fill::after { display: none; }
  #tabbtn-ai .ai-fx-label { background: none; color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-fx::before, #tabbtn-ai.is-working, #tabbtn-ai.is-working > svg path { animation: none !important; }
  #tabbtn-ai > svg path, :is(#tab-ai, .remote-ai) .btn.primary.ai-fx-fill, :is(#tab-ai, .remote-ai) .btn.primary.ai-fx-fill::after { transition: none; }
  :is(#tab-ai, .remote-ai) .btn.primary.ai-fx-fill:hover::after { transform: translateX(-120%); }
  #tabbtn-ai:hover > svg path:first-child { transform: none; }
}

/* ---- v2.4.2 대화 칸 펼치기 / 숨기기 (왼쪽 탭) · AI 대화 리모컨 (chat-remote.js — 3D 화면 위, 탭의 대화를 비추고 입력도)
   사용자 2026-10-21: 대화 내역은 리모컨 컨테이너로 편하게 — 탭과 리모컨 둘 다, 왼쪽은 펼치기 / 숨기기 */
.ai-chat-head { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 2px 2px 0; font-size: 12.5px; color: var(--text); }
.ai-chat-hint { flex: 1; min-width: 0; font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-chat-fold { flex: none; gap: 4px; }
.ai-chat-fold svg { width: 13px; height: 13px; transition: transform .5s cubic-bezier(.22, .68, .2, 1); }
.ai-chat-head.is-folded .ai-chat-fold svg { transform: rotate(-90deg); }
.ai-chat-box { flex: 1 0 auto; display: flex; flex-direction: column; gap: 8px; }
.ai-chat-box[hidden] { display: none; }
.remote.remote-ai { width: 340px; }
.remote-ai .remote-icon svg { color: #b9a7ff; }
.remote-ai .remote-title { color: #cfc7ff; }
.remote-ai.is-working .remote-icon svg { animation: ai-face-pulse 1.6s ease-in-out infinite; border-radius: 50%; }
.remote-ai .ai-log-mirror { flex: none; min-height: 0; max-height: min(46vh, 440px); padding: 2px 2px 4px; -webkit-user-select: text; user-select: text; }
.remote-ai .ai-log-mirror[hidden] { display: none; }
.remote-ai .ai-remote-empty { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--dim); }
.remote-ai .ai-remote-empty[hidden] { display: none; }
.remote-ai .ai-remote-compose { gap: 6px; }
.remote-ai .ai-remote-compose .ai-input { min-height: 44px; -webkit-user-select: text; user-select: text; }
.ai-remote-attach { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 11px; color: #cfc7ff; white-space: nowrap; }
.ai-remote-attach[hidden] { display: none; }
.ai-remote-attach svg { width: 13px; height: 13px; flex: none; }
@media (prefers-reduced-motion: reduce) { .remote-ai.is-working .remote-icon svg, .ai-chat-fold svg { animation: none; transition: none; } }

/* ---- v2.4.3 앱 방식 (docs/ai-app-mode.md) — 연결 창 맨 위 'API 방식 / 앱 방식' · 앱 방식 칸 · AI 탭 '앱 연결' 칸 (app-bridge.js)
   사용자 2026-10-21: 큰 틀로 API 방식 / 앱 방식, Claude Code · Codex · Claude 앱 연결 (1단계 = 원격 MCP 처리기 + 탭 중계) */
.ai-mode-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 4px; }
.ai-mode-seg button { height: 34px; font-size: 12.5px; }
.ai-connect-body > [hidden], .ai-connect-foot .btn[hidden] { display: none; }
.ai-app-body { display: grid; gap: 8px; }
.ai-app-body h4 { margin: 4px 0 0; font-size: 12.5px; color: #dfe6ee; }
.ai-app-url-row { flex-wrap: nowrap; }
.ai-app-url { flex: 1; min-width: 0; padding: 4px 8px; border-radius: 6px; background: #ffffff0d; font-size: 11.5px; color: #cfc7ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-user-select: all; user-select: all; }
.ai-app-made { display: grid; gap: 8px; padding: 10px; border: 1px solid #9b87ff55; border-radius: 10px; background: #9b87ff0f; }
.ai-app-warn { color: #f6cf9f !important; }
.ai-app-cmd { display: grid; gap: 4px; }
.ai-app-cmd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.ai-app-pre { margin: 0; padding: 8px 10px; border: 1px solid #ffffff14; border-radius: 8px; background: #0b1016; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.ai-app-conns { display: grid; gap: 4px; }
.ai-app-conn { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #ffffff10; border-radius: 9px; background: #ffffff04; }
.ai-app-conn-main { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 12px; }
.ai-app-conn-main span { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-app-members { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text); cursor: pointer; }
.ai-app-members small { flex-basis: 100%; padding-left: 24px; font-size: 11px; color: var(--dim); }
.ai-app-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 12px; line-height: 1.55; color: var(--muted); }
/* v2.4.7 앱 방식: 쓰는 앱 고르기 → 그 앱에서 할 일 (줄마다 글 + 복사 칸) */
.ai-app-pick-row { align-items: center; }
.ai-app-pick { flex: 1; min-width: 0; }
.ai-app-flow { gap: 8px; }
.ai-app-flow > li > p { margin: 0 0 4px; }
.ai-app-flow > li > p:last-child { margin-bottom: 0; }
.ai-app-token { display: grid; gap: 8px; padding: 10px; border: 1px solid #ffffff10; border-radius: 10px; background: #ffffff04; }
.ai-app-token h4 { margin: 0; }
/* v2.5.10 설정 파일 줄 — 경로 · 경로 복사 · 파일 열기 · 새로 만들기 (connect.js fileBox) */
.ai-app-file { display: grid; gap: 6px; margin-top: 6px; padding: 8px 10px; border: 1px solid #ffffff12; border-radius: 9px; background: #ffffff05; }
.ai-app-file-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text); }
.ai-app-file-head small { font-size: 11px; color: var(--dim); }
.ai-app-path { display: block; min-width: 0; padding: 4px 8px; border-radius: 6px; background: #ffffff0d; font-size: 11.5px; color: #cfc7ff; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.ai-app-file-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-app-file .ai-note { margin: 0; }
.ai-app-preview { max-height: 220px; overflow: auto; text-align: left; -webkit-user-select: text; user-select: text; }
/* v2.5.12 연결 창 위 안내 — 맵 안에서 열 때의 까닭(키 없이 보내기 등) · 계정마다 한 곳 (예전 'AI 연결은 AI Agent 에서' 확인 창을 합침) */
.ai-connect-notice { margin: 0 0 10px; padding: 8px 10px; border: 1px solid #ffb45a55; border-radius: 9px; background: #ffb45a14; color: #ffd8a8; font-size: 12.5px; line-height: 1.5; }
.ai-connect-body > .ai-connect-where { margin: 0 0 10px !important; } /* .ai-note 의 margin 0 !important 를 이김 */
/* v2.5.10 앱 방식으로 이어진 채 대화 칸에서 보냄 — 그 앱에서 말하라는 안내 + 적은 글 복사 */
.ai-note-line.ai-note-app { display: grid; justify-items: start; gap: 6px; padding: 7px 9px; border: 1px solid #f6cf9f40; border-radius: 9px; background: #f6cf9f0d; text-align: left; line-height: 1.5; }
/* v2.4.5 칸 폭을 넘지 않게 (꺼짐 안내 글이 길면 머리 줄이 글 폭만큼 넓어져 '켜기' 가 칸 밖으로 밀렸다) */
.ai-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 9px; border: 1px solid #ffffff14; border-radius: 12px; background: #ffffff05; }
.ai-app[hidden] { display: none; }
.ai-app-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); }
.ai-app-text { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-app-more { display: grid; gap: 6px; }
.ai-app-more[hidden] { display: none; }
.ai-app-row { display: flex; align-items: center; gap: 6px; }
.ai-app-row.is-end { justify-content: flex-end; }
/* v2.4.5 AI 작업 창이 열려 있음 */
.ai-app-row .btn.is-active { border-color: #9b87ffaa; background: #9b87ff22; color: #fff; }
.ai-app-code { width: 128px; height: 28px; font-size: 12px; letter-spacing: .06em; }
.ai-app .ai-dot.is-off { background: #8a93a3; box-shadow: none; }
.ai-app .ai-dot.is-warn { background: #ffc46b; box-shadow: 0 0 0 3px #ffc46b22; }
.ai-app .ai-dot.is-run { background: #9b87ff; box-shadow: 0 0 0 3px #9b87ff33; animation: ai-face-pulse 1.6s ease-in-out infinite; }
.ai-step-from { flex: none; padding: 0 6px; border-radius: 999px; background: #9b87ff26; color: #cfc7ff; font-size: 10.5px; line-height: 16px; }
@media (prefers-reduced-motion: reduce) { .ai-app .ai-dot.is-run { animation: none; } }