/* 전자차트 「진료 녹음」 탭. 규격: 글자 12px(작은 글자 11px), 입력과 버튼 24px, 묶음 사이 6px, 모서리 0, 그림자 없음 */
.chart-voice { display: flex; flex-direction: column; gap: 6px; padding: 6px; overflow: hidden; }
.chart-voice-bar { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.chart-voice-bar .right { flex: 1 1 auto; }
.chart-voice-consent { display: flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }
.chart-voice-timer { font-variant-numeric: tabular-nums; min-width: 40px; color: var(--muted); }
.chart-voice-timer.on { color: var(--red); font-weight: 700; }
.chart-voice-ai { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 330px; }
.chart-voice-steps { flex: 0 0 auto; font-size: 11px; border: 1px solid var(--line-soft); background: var(--panel); padding: 2px 6px; min-height: 22px; }
.chart-voice-step { color: var(--muted); }
.chart-voice-step.on { color: var(--blue); font-weight: 700; }
.chart-voice-demo { float: right; }
.chart-voice-busy { margin-left: 10px; color: var(--orange); font-weight: 700; }
.chart-voice-top { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 6px; flex: 0 0 168px; min-height: 0; }
.chart-voice-top > .panel { display: flex; flex-direction: column; min-height: 0; }
.chart-voice-top > .panel > .panel-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.chart-voice-list, .chart-voice-text { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chart-voice-tools { display: flex; align-items: center; gap: 4px; padding: 3px 5px; border-bottom: 1px solid var(--line-soft); flex: 0 0 auto; }
.chart-voice-tools audio { height: 24px; flex: 1 1 auto; min-width: 120px; }
.chart-voice-fixed { font-size: 11px; padding: 1px 6px; flex: 0 0 auto; }
.chart-voice-lines { flex: 1 1 auto; overflow-y: auto; padding: 3px 6px; }
.chart-voice-line { line-height: 1.5; }
.chart-voice-none { padding: 10px 8px; }
.chart-voice > .panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chart-voice > .panel > .panel-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chart-voice-draft { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 5px 6px; }
.chart-voice-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding-right: 2px; }
.chart-voice-scroll > * { flex: 0 0 auto; }
.chart-voice-dhead { font-size: 11px; }
.chart-voice-soap { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
.chart-voice-soapcell { display: flex; flex-direction: column; }
.chart-voice-soaplbl { font-size: 11px; font-weight: 700; color: var(--primary); }
.chart-voice-soapcell textarea { resize: vertical; line-height: 1.4; }
.chart-voice-next { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 4px; }
.chart-voice-twrap { max-height: none; }
.chart-voice-tbl td { vertical-align: top; }
.chart-voice-tbl tr.off td { color: var(--muted); background: #f3f4f6; }
.chart-voice-tbl tr.bad td { background: #fdeceb; }
.chart-voice-teeth, .chart-voice-kcd { min-height: 20px; padding: 0 3px; }
.chart-voice-kname { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px; }
.chart-voice-item { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; }
.chart-voice-iname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chart-voice-qtybox { display: flex; align-items: center; gap: 4px; white-space: nowrap; flex: 0 0 auto; }
.chart-voice-qty { width: 36px; min-height: 18px; padding: 0 2px; text-align: right; }
.chart-voice-qty.changed { background: var(--yellow); }
.chart-voice-iamt { min-width: 44px; }
.chart-voice-ev { font-size: 11px; color: var(--muted); max-width: 124px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.chart-voice-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.chart-voice-checks, .chart-voice-qs { border: 1px solid var(--line-soft); padding: 3px 6px; font-size: 11px; max-height: 96px; overflow-y: auto; }
.chart-voice-sub { font-weight: 700; }
.chart-voice-check, .chart-voice-q { line-height: 1.5; }
.chart-voice-money { display: flex; flex-wrap: wrap; gap: 4px 14px; border: 1px solid var(--line); background: var(--head); padding: 3px 8px; }
.chart-voice-foot { display: flex; align-items: center; gap: 6px; }
.chart-voice-foot .right { flex: 1 1 auto; }
.chart-voice-ack { display: flex; align-items: center; gap: 3px; color: var(--red); cursor: pointer; }
.chart-voice-ok { font-weight: 700; }
.tag.purple { border-color: #c5b8e6; background: #efeaf9; color: #4b3a86; }
.chart-voice-pick { display: block; margin-top: 2px; }

/* AI 를 부르는 버튼과 AI 초안 창의 표시(js/parts/ai_mark.js). 다른 버튼과 색을 달리하고 AI 도우미 캐릭터를 붙인다 */
.ai-mark { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle; user-select: none; }
.ai-mark.lg { width: 34px; height: 34px; }
.btn.ai { display: inline-flex; align-items: center; gap: 4px; background: var(--purple); border: 1px solid #4a3d7a; color: #fff; font-weight: 700; padding: 2px 10px 2px 5px; min-height: 26px; }
.btn.ai:hover { background: #5a4790; }
.btn.ai:disabled { background: #b7afcf; border-color: #a49bbd; color: #f1eef8; }
.btn.ai:disabled .ai-mark { opacity: 0.55; }
.btn.ai.sm { padding: 1px 8px 1px 4px; min-height: 24px; font-size: 11px; }
.tab .ai-mark { width: 16px; height: 16px; margin-right: 3px; }
/* 캐릭터가 붙어 넓어진 만큼: 전자차트 가운데 탭은 좌우 여백을 줄이고, 차트 기록의 도구 줄은 넘치면 다음 줄로 내린다 */
.chart-tabs > .tabs-head .tab { padding: 4px 8px; }
.chart-hist-head > .chart-hist-tools { flex-wrap: wrap; row-gap: 2px; }
.ai-head { display: flex; align-items: center; gap: 8px; border: 1px solid #c9bfe6; background: #f4f1fb; padding: 4px 8px; font-size: 12px; }

/* AI 가 일하는 동안: 돌아가는 고리(img/ai-ring.svg) 안에 캐릭터. 화면 가운데 상자(.ai-busy)와 글자 옆 작은 것(.ai-spin.sm) */
@keyframes ai-turn { to { transform: rotate(360deg); } }
.ai-spin { position: relative; display: inline-block; width: 64px; height: 64px; flex: 0 0 auto; vertical-align: middle; }
.ai-spin .ai-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: ai-turn 1s linear infinite; }
.ai-spin .ai-spin-bot { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; }
.ai-spin.sm { width: 22px; height: 22px; margin-right: 5px; }
.ai-busy-back { position: fixed; inset: 0; background: rgba(28, 36, 48, 0.28); display: flex; align-items: center; justify-content: center; z-index: 3000; }
.ai-busy { display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid var(--purple); padding: 14px 20px; font-size: 13px; line-height: 1.6; }
.chart-voice-busy { display: inline-flex; align-items: center; }
/* 차트 기록의 날짜 칸에 붙는 작은 AI 버튼 */
.ai-day { display: inline-flex; align-items: center; gap: 2px; margin-top: 2px; padding: 0 5px 0 2px; height: 20px; background: var(--purple); border: 1px solid #4a3d7a; color: #fff; font-size: 10px; font-weight: 700; cursor: pointer; }
.ai-day:hover { background: #5a4790; }
.ai-day .ai-mark { width: 15px; height: 15px; }

/* AI 영상 소견 초안 창 */
.ai-caution { border: 1px solid var(--red); color: var(--red); background: #fdf1ef; padding: 3px 8px; font-size: 12px; font-weight: 700; }
.ai-image-row { display: flex; gap: 8px; align-items: flex-start; }
.ai-image { width: 420px; max-height: 300px; object-fit: contain; background: #111; flex: 0 0 auto; }

/* 병원 학습 모델의 영상 분석 결과 창: 영상 위를 훑는 선과 치아 순서 표 */
.ai-m-imgbox { position: relative; background: #111; height: 400px; max-width: 100%; margin: 0 auto; overflow: hidden; }
.ai-m-img { width: 100%; height: 100%; object-fit: fill; display: block; }
@keyframes ai-sweep { from { left: 0; } to { left: 100%; } }
.ai-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 46px; margin-left: -46px; background: rgba(170, 140, 255, 0.28); border-right: 3px solid #c9b6ff; animation: ai-sweep 2.8s linear 0.25s both; }
.ai-m-state { position: absolute; left: 8px; bottom: 6px; display: inline-flex; align-items: center; gap: 5px; background: rgba(20, 20, 30, 0.72); color: #fff; padding: 2px 8px; font-size: 12px; }
.ai-m-tables { display: flex; flex-direction: column; gap: 4px; }
.ai-m-tbl { table-layout: fixed; width: 100%; }
.ai-m-tbl th, .ai-m-tbl td { text-align: center; padding: 1px 0; font-size: 11px; height: 20px; }
.ai-m-tbl .ai-m-name { width: 92px; text-align: left; padding-left: 5px; background: #eef1f6; font-weight: 700; }
.ai-m-tbl .ai-m-mid { border-left: 2px solid #333; }
.ai-m-cell { color: transparent; background-image: none; }
.ai-m-cell:not(.on) { background: #f4f1fb !important; }
.ai-m-cell.on { color: var(--text); transition: color 0.2s; }
.ai-m-cell.hi.on { font-weight: 700; }
.ai-m-sites span { display: inline-block; width: 33%; font-size: 10px; }
.ai-m-cell .deep, .ai-m-cell.deep.on { color: var(--red); font-weight: 700; }
.ai-m-cell:not(.on) .deep, .ai-m-cell:not(.on) b { color: transparent; }
.ai-m-sum { border: 1px solid var(--line-soft); padding: 3px 8px; font-size: 12px; line-height: 1.6; }

/* 같은 진료의 진단 비교 창 */
.ai-dx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.ai-dx-box { border: 1px solid var(--line); padding: 5px 7px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ai-dx-title { font-weight: 700; font-size: 13px; }
.ai-dx-big { font-size: 13px; }
.ai-dx-big b { color: var(--primary); font-size: 15px; }
.ai-dx-tbl td { height: 22px; }
.ai-dx-same td { background: #eef7f0; }
.ai-dx-barcell { position: relative; }
.ai-dx-bar { height: 14px; background: #b9c2d0; }
.ai-dx-bar.same { background: var(--green); }
.ai-dx-pct { position: absolute; right: 5px; top: 3px; font-size: 11px; font-weight: 700; }

/* 영상 위에 그리는 것: 치아 상자, 값, 치조골 능선. 좌표는 0~1000 비율이라 % 로 놓는다 */
.ai-m-over { position: absolute; inset: 0; }
.ai-m-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ai-m-bone { fill: none; stroke: #4fc3ff; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 6 3; }
.ai-m-box { position: absolute; border: 1px solid rgba(255, 255, 255, 0.5); opacity: 0; transition: opacity 0.25s; }
.ai-m-box.on { opacity: 1; }
.ai-m-box.perio { border: 2px solid #ffa726; }
.ai-m-box.deep { border: 2px solid #ff5252; background: rgba(255, 82, 82, 0.12); }
.ai-m-box.imp { border: 2px solid #c58cff; background: rgba(197, 140, 255, 0.18); }
.ai-m-box.car { border: 2px solid #ffe14d; background: rgba(255, 225, 77, 0.15); }
.ai-m-box.api { border: 2px solid #ff7ab8; background: rgba(255, 122, 184, 0.15); }
.ai-m-no { position: absolute; left: 0; top: 0; font-size: 9px; line-height: 11px; color: #fff; background: rgba(0, 0, 0, 0.6); padding: 0 2px; }
.ai-m-mm { position: absolute; right: 0; bottom: 0; font-size: 9px; line-height: 11px; color: #dfe9ff; background: rgba(0, 0, 0, 0.6); padding: 0 2px; }
.ai-m-mm.deep { color: #fff; background: #d32f2f; font-weight: 700; }
.ai-m-tag { position: absolute; left: 0; bottom: 12px; font-size: 9px; line-height: 11px; color: #111; background: #ffe14d; padding: 0 2px; white-space: nowrap; font-weight: 700; }
.ai-m-box.imp .ai-m-tag { background: #c58cff; }
.ai-m-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 11px; }
.ai-m-key { display: inline-block; width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px; border: 2px solid #999; }
.ai-m-key.deep { border-color: #ff5252; } .ai-m-key.perio { border-color: #ffa726; } .ai-m-key.imp { border-color: #c58cff; } .ai-m-key.car { border-color: #ffe14d; } .ai-m-key.api { border-color: #ff7ab8; }
.ai-m-key.bone { height: 0; border: 0; border-top: 3px dashed #4fc3ff; vertical-align: 3px; width: 18px; }
.ai-m-bar { position: absolute; left: 50%; width: 4px; margin-left: -2px; background: #7dffa0; }
.ai-m-bar.deep { background: #ff5252; width: 5px; }
.ai-m-key.bar { width: 4px; border: 0; background: #7dffa0; }