/* 🧠 AI 도우미 — 탭(panels/tools_ai.js · panels/ai/*) + 대기함 카드 배지 · '지급할까요?' 줄 + 머리줄 🚗 띠 · 💰 칸.
   색은 controller.css 의 변수(--accent · --line · --muted · --paper …)만 쓴다. 바깥(CDN) 없음.
   꼬리표 색: ⚡ 서버 계산 = 초록(늘 맞다) · 🤖 AI = 파랑(말을 다듬음) · ℹ️ 안내 = 회색. */

/* ── 탭 ── */
.ai-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.ai-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ai-title h3 { font-size: 17px; font-weight: 900; margin: 0; }
.ai-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-tools .btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.ai-tools .ai-ap-btn.on { background: linear-gradient(135deg, #b3261e, #e8543f); border-color: transparent; color: #fff; }
.ai-tools .ai-al-btn:not(.on) { color: var(--muted); }

.ai-health { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ai-health i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.ai-health[data-state=ok] { color: #a8eec4; }
.ai-health[data-state=ok] i { background: var(--good); box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.2); }
.ai-health[data-state=busy] { color: #ffd28a; }
.ai-health[data-state=busy] i { background: var(--warn); box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.2); }
.ai-health[data-state=off] i { background: var(--bad); }

.ai-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1280px) { .ai-cols { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }
.ai-left, .ai-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* 이번 방송 후원 */
.ai-today { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 179, 107, 0.08); border: 1px solid rgba(255, 179, 107, 0.24); min-width: 0; }
.ai-today-k { color: var(--muted); font-size: 13px; font-weight: 800; }
.ai-today-v { font-size: 22px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.ai-today-s { color: var(--muted); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }

/* 상황판 네 칸 */
.ai-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ai-tile {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; padding: 10px 12px; text-align: left;
    border-radius: 16px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.18); color: var(--text); font: inherit; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ai-tile:hover { border-color: var(--accent-ring); background: rgba(255, 255, 255, 0.06); }
.ai-tile:active { transform: translateY(1px); }
.ai-board.busy .ai-tile { cursor: progress; opacity: 0.75; }
.ai-tile .k { font-size: 12.5px; font-weight: 800; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-tile .v { font-size: 17px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ai-tile .s { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.35em; }
.ai-tile .bar { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 4px; }
.ai-tile .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ff9a5c, #e8662a); transition: width 0.4s ease; }
.ai-tile.hot { border-color: rgba(245, 165, 36, 0.65); background: rgba(245, 165, 36, 0.09); }
.ai-tile.hot .k { color: #ffc46b; }
.ai-board-note { margin: 0; padding: 7px 11px; border-radius: 12px; background: rgba(245, 165, 36, 0.12); border: 1px solid rgba(245, 165, 36, 0.32); color: #ffd28a; font-size: 13px; font-weight: 700; }
.ai-legend { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.7; }
.ai-legend .ai-src { display: inline-flex; margin: 0 2px 0 0; }

/* 대화 */
.ai-log {
    display: flex; flex-direction: column; gap: 8px; min-height: 180px; max-height: 440px; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px; border-radius: 18px; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--line-soft);
}
.ai-msg { max-width: 92%; padding: 8px 12px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.ai-msg-user { align-self: flex-end; background: var(--accent-soft); border: 1px solid var(--accent-ring); color: var(--text); font-weight: 700; }
.ai-msg-ai { align-self: flex-start; background: var(--card); border: 1px solid var(--line); color: var(--text); }
.ai-msg-ai b { color: #fff; font-weight: 900; }
.ai-msg-sys { align-self: center; max-width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px dashed var(--line); color: var(--muted); font-size: 13.5px; text-align: left; }
.ai-msg-sys.ai-empty { border: 0; background: transparent; color: var(--dim); text-align: center; }
.ai-msg-alert { align-self: flex-start; background: rgba(245, 165, 36, 0.1); border: 1px solid rgba(245, 165, 36, 0.45); color: #ffe2b0; font-weight: 700; }
.ai-msg .ai-li { display: block; position: relative; padding-left: 14px; margin-top: 2px; }
.ai-msg .ai-li::before { content: ''; position: absolute; left: 3px; top: 0.66em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.ai-thinking { color: var(--muted); animation: aiPulse 1.2s ease-in-out infinite; }
@keyframes aiPulse { 50% { opacity: 0.45; } }
.ai-src { display: inline-flex; align-items: center; margin-top: 7px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ai-msg .ai-src { display: flex; width: fit-content; }
.ai-src-calc { background: rgba(61, 220, 132, 0.14); color: #8ef0b8; }
.ai-src-ai { background: rgba(124, 178, 255, 0.16); color: #b9d5ff; }
.ai-src-none { background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.ai-ap-undo { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ai-ap-undo .btn { justify-content: flex-start; white-space: normal; text-align: left; min-height: 38px; height: auto; padding: 6px 12px; }

.ai-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-q {
    min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06);
    color: var(--text); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.ai-q:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-hi); }
.ai-q:disabled { opacity: 0.5; cursor: progress; }
.ai-input-row { display: flex; gap: 8px; align-items: flex-end; }
.ai-input {
    flex: 1; min-width: 0; min-height: 46px; max-height: 120px; resize: none; padding: 11px 14px; border-radius: var(--r-m);
    border: 1px solid var(--line); background: var(--input); color: var(--text); font: inherit; font-size: 16px; font-weight: 600; line-height: 1.4;
}
.ai-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.ai-input::placeholder { color: var(--dim); font-weight: 500; }
.ai-cmd-hint { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.6; }
.ai-cmd-hint b { color: var(--muted); }

/* 탭 단추의 안 읽은 알림 숫자 */
.tabbar .tab .ai-unread {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px; border-radius: 999px;
    background: var(--bad); color: #fff; font-size: 11.5px; font-weight: 900;
}

/* ── 배지 · 지난 배정(흰 종이 위) — 대기함 카드는 10-17 부터 한 줄 '✦ AI'(css/side.css .pc-ai), 이 모양은 다른 곳 배지용 ── */
.ai-sug { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ai-badge {
    align-self: flex-start; max-width: 100%; padding: 4px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 800; line-height: 1.45;
    border: 1px solid #cfdcf7; background: #eef4ff; color: #2c5fb8; overflow-wrap: anywhere;
}
.ai-badge b { font-weight: 900; color: inherit; }
.ai-badge .ai-why { font-weight: 600; opacity: 0.85; }
.ai-badge.lv-auto { color: #1f8a52; background: #e9f8ef; border-color: #bfe6cf; }
.ai-badge.lv-unknown, .ai-badge.lv-wait { color: #9a6200; background: #fff4e0; border-color: #f3d9a6; }
.ai-badge.lv-asking { color: var(--ink-3); background: var(--paper-2); border-color: var(--paper-line); font-weight: 700; }
.ai-hist { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }

/* '지급할까요?' 줄(.ai-asks)은 10-17 시안 B 로 없앴다 — AI 가 고른 사람은 대기함 카드 선수 단추의 '추천'(css/side.css .pbtn.rec) */

/* ── 머리줄 — 🚗 오토파일럿 띠(켜져 있는 동안) · 💰 이번 방송 후원 칸 ── */
.ap-banner {
    flex: 1 1 100%; order: 99; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 8px 8px 14px; border-radius: 18px;
    background: linear-gradient(135deg, #b3261e, #e8543f); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 8px 22px rgba(179, 38, 30, 0.35);
}
.ap-banner .ap-text { flex: 1 1 260px; min-width: 0; }
.ap-banner .ap-count { font-weight: 900; white-space: nowrap; }
.ap-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; flex: none; animation: blink 1.2s ease-in-out infinite; }
.ap-banner .ap-off { background: #fff; color: #b3261e; border-color: transparent; }
.ap-banner .ap-off:hover:not(:disabled) { background: #ffe9e6; }
.today-pill { color: #ffe0bf; background: rgba(255, 179, 107, 0.12); border-color: rgba(255, 179, 107, 0.32); font-variant-numeric: tabular-nums; }
.today-pill b { font-weight: 900; color: var(--gold); }
.today-pill .tp-s { color: var(--muted); font-weight: 700; }

/* ── 📱 폰 ── */
@media (max-width: 899px) {
    .today-pill { display: none !important; }      /* 머리줄이 좁다 — AI 탭 위에 같은 숫자가 있다 */
    .ai-log { max-height: 55vh; min-height: 160px; }
    .ai-msg { max-width: 96%; font-size: 14px; }
    .ai-tile .v { font-size: 16px; }
    /* 머리줄이 화면 위에 붙어 있다 — 띠는 한 줄로(긴 설명은 뺀다) */
    .ap-banner { flex-wrap: nowrap; font-size: 13px; padding: 6px 6px 6px 12px; border-radius: 16px; }
    .ap-banner .ap-text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ap-banner .ap-long { display: none; }
    .ap-banner .ap-off { min-height: 34px; padding: 0 12px; }
}

/* ── 🗣️ 말로 조종 카드(panels/ai/cards.js — 대화창 · Ctrl+K 같이 씀) ── 넘치지 않게: 글은 줄바꿈, 단추는 오른쪽에 붙고 좁으면 아래로 */
.ai-msg-cards { align-self: stretch; max-width: 100%; background: var(--card); border: 1px solid var(--line); padding: 8px 10px; }
.aic { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aic-reply { margin: 0; color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
.aic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.aic-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 6px 8px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft); min-width: 0; }
.aic-row.s-ask:not(.safe) { border-color: rgba(245, 165, 36, 0.55); background: rgba(245, 165, 36, 0.08); }
.aic-row.s-ran { border-color: rgba(61, 220, 132, 0.4); }
.aic-row.s-failed { border-color: rgba(255, 120, 120, 0.5); }
.aic-row.s-cancel, .aic-row.s-undone { opacity: 0.6; }
.aic-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; flex: 1 1 180px; min-width: 0; }
.aic-i { flex: none; }
.aic-t { min-width: 0; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.aic-by { color: var(--muted); font-size: 12px; }
.aic-err { color: #ffb8b8; font-size: 12px; overflow-wrap: anywhere; }
.aic-b { display: flex; gap: 5px; flex: none; margin-left: auto; }
.aic-all { display: flex; flex-wrap: wrap; gap: 6px; }
.aic-note { margin: 0; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.aic-note.bad { color: #ffcf9a; }
.aic.compact .aic-row { padding: 5px 7px; }
.ai-tools .ai-dir-btn.on { background: rgba(61, 220, 132, 0.14); border-color: rgba(61, 220, 132, 0.5); color: var(--text); }