/* ────────────────────────────────────────────────────────────
   앱 본문 & 왼쪽 패널 구조
──────────────────────────────────────────────────────────── */

:root {
  /* 처방표 min-width(560px) + panel-body 좌우 패딩(36px) + 여유(24px) */
  --left-panel-width: 620px;
}

.app-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.left-panel {
  width: var(--left-panel-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-subtle);
  overflow: hidden;
}

/* ────────────────────────────────────────────────────────────
   대화 로그 섹션 (왼쪽 패널 상단 고정)
──────────────────────────────────────────────────────────── */

.log-section {
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.log-section-header {
  display: flex;
  align-items: center;
  padding: 10px 18px 6px;
}

.log-section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* 5개 아이템 고정 높이 — 빈 상태에서도 영역 유지, 초과 시 세로 스크롤 */
.log-list {
  height: 185px;
  overflow-y: auto;
  padding: 0 12px 8px;
}

.log-list::-webkit-scrollbar { width: 3px; }
.log-list::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 3px; }

/* 로그 아이템: 환자이름 | 채팅시간 한 줄 가로 배치 */
.nav-log-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
  margin-bottom: 1px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  font-family: inherit;
}

.nav-log-item:hover { background: var(--bg-subtle); color: var(--text); }
.nav-log-item.active { background: #f0eaff; color: var(--primary); font-weight: 600; }

.nav-log-icon { font-size: 13px; flex-shrink: 0; }

.nav-log-content {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.nav-log-title-text {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  flex: 1;
}

.nav-log-meta {
  font-size: 10px;
  color: #c0c0c0;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────
   왼쪽 패널 하단 (버전)
──────────────────────────────────────────────────────────── */

.left-panel-footer {
  flex-shrink: 0;
  padding: 8px 18px;
  border-top: 1px solid var(--border-light);
  background: var(--bg);
}

/* ────────────────────────────────────────────────────────────
   헤더 로고 & 버튼
──────────────────────────────────────────────────────────── */

.header-logo-img {
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
}

.header-title-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 16px;
  margin: 0 4px;
}

.header-title-text {
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}

.btn-reset-header {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  padding: 5px 12px;
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.13s;
}

.btn-reset-header:hover { background: rgba(255, 255, 255, 0.25); }

.btn-delete-patients {
  background: rgba(220, 50, 50, 0.75);
  border: 1px solid rgba(255, 120, 120, 0.5);
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  transition: background 0.13s;
}
.btn-delete-patients:hover { background: rgba(200, 30, 30, 0.9); }

/* ────────────────────────────────────────────────────────────
   환자 정보 패널 (왼쪽 패널 내 하단)
──────────────────────────────────────────────────────────── */

.cdss-patient-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-subtle);
  overflow: hidden;
}

.cdss-panel-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cdss-panel-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}

.cdss-preset-row {
  display: flex;
  gap: 6px;
}

.cdss-preset-select {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

.cdss-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
}

.cdss-panel-body::-webkit-scrollbar { width: 3px; }
.cdss-panel-body::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 3px; }

/* ────────────────────────────────────────────────────────────
   환자정보 입력 필드
──────────────────────────────────────────────────────────── */

.cdss-field-group { margin-bottom: 14px; }

.cdss-field-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.cdss-field-row > .cdss-input,
.cdss-field-row > .cdss-select { flex: 1; }

.cdss-field-row:last-child { margin-bottom: 0; }

.cdss-input {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--text);
  transition: border-color 0.13s;
}

.cdss-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(84, 11, 255, 0.08);
}

.cdss-select {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

.cdss-unit {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  padding-left: 4px;
  align-self: center;
  min-width: 52px;
}

.cdss-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cdss-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.cdss-4col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 4px;
}

/* 필드별 소헤더 (기본정보·진단정보 내 항목명) — 신체정보/신장기능/간기능과 동일 */
.cdss-subfield-label {
  font-size: 10px;
  opacity: 0.7;
  margin-bottom: 3px;
  margin-top: 6px;
}

/* 신체 정보 / 신장 기능 / 간 기능 섹션 타이틀 */
.cdss-lab-section {
  font-weight: 700;
  opacity: 0.85;
}

.cdss-subfield-block {
  display: flex;
  flex-direction: column;
}

.cdss-field-row--mb {
  margin-bottom: 2px;
}

.cdss-lab-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.cdss-lab-cell .cdss-input-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.cdss-lab-cell .cdss-unit { padding-left: 0; min-width: unset; white-space: nowrap; }
.cdss-lab-cell .cdss-input { flex: 1; min-width: 0; }
.cdss-lab-cell--stretch { align-items: stretch; }

/* 검사수치 대제목 */
.cdss-section-label {
  padding: 8px 0 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.cdss-input--mb     { margin-bottom: 6px; }
.cdss-input--narrow { width: 80px; flex: none; }
.cdss-select--mb    { margin-bottom: 6px; }
.cdss-select--narrow { width: 80px; flex: none; }
.cdss-select--sm    { width: 100%; font-size: 11px; }
.cdss-field-row--mt { margin-top: 6px; }

/* 생년월일 + 나이 행 */
.cdss-birth-age-row { align-items: flex-start; gap: 6px; }
.cdss-birth-age-row > .cdss-input { flex: 1.2; }
.cdss-age-inputs { display: flex; gap: 4px; flex: 1; }
.cdss-age-inputs > .cdss-input { flex: 1; min-width: 0; }

/* 나이 불일치 / 범위 에러 공통 */
.cdss-age-error,
.cdss-field-error {
  font-size: 11px;
  color: #e53935;
  margin-top: 2px;
  min-height: 14px;
  display: none;
}
.cdss-age-error.visible,
.cdss-field-error.visible { display: block; }

/* ────────────────────────────────────────────────────────────
   처방 정보 테이블
──────────────────────────────────────────────────────────── */

.cdss-rx-table-wrap {
  overflow-x: auto;
  margin-top: 6px;
}

.cdss-rx-table {
  min-width: 560px;
  border-collapse: collapse;
  font-size: 11px;
  width: 100%;
  table-layout: fixed;
}

.cdss-rx-table th:nth-child(1), .cdss-rx-table td:nth-child(1) { width: 16%; }
.cdss-rx-table th:nth-child(2), .cdss-rx-table td:nth-child(2) { width: 27%; }
.cdss-rx-table th:nth-child(3), .cdss-rx-table td:nth-child(3) { width: 11%; }
.cdss-rx-table th:nth-child(4), .cdss-rx-table td:nth-child(4) { width: 9%;  }
.cdss-rx-table th:nth-child(5), .cdss-rx-table td:nth-child(5) { width: 11%; }
.cdss-rx-table th:nth-child(6), .cdss-rx-table td:nth-child(6) { width: 11%; }
.cdss-rx-table th:nth-child(7), .cdss-rx-table td:nth-child(7) { width: 10%; }

.cdss-rx-table th {
  white-space: nowrap;
  background: #ede8ff;
  color: var(--primary);
  font-weight: 800;
  padding: 6px 8px;
  text-align: left;
  border: 1px solid #d4c8ff;
}

.cdss-rx-table td {
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  color: var(--text);
  vertical-align: middle;
}

.cdss-rx-table tr:nth-child(even) td { background: #fafafa; }

.cdss-rx-input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 5px;
  border: none;
  border-radius: 0;
  font-size: 11px;
  font-family: inherit;
  color: var(--text);
  background: transparent;
}

.cdss-rx-input:focus {
  outline: none;
  background: rgba(84, 11, 255, 0.05);
}

.cdss-rx-input[type="number"]::-webkit-inner-spin-button,
.cdss-rx-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cdss-rx-input[type="number"] { -moz-appearance: textfield; }

.cdss-add-rx {
  margin-top: 8px;
  width: 100%;
  padding: 8px;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

.cdss-add-rx:hover { border-color: var(--primary); color: var(--primary); }

.cdss-confirm-btn {
  width: 100%;
  padding: 9px;
  margin-top: 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}

.cdss-confirm-btn:hover { background: var(--primary-light); }

/* ────────────────────────────────────────────────────────────
   리사이즈 핸들
──────────────────────────────────────────────────────────── */

.cdss-resize-handle {
  width: 6px;
  flex-shrink: 0;
  background: transparent;
  cursor: col-resize;
  transition: background 0.15s;
}

.cdss-resize-handle:hover,
.cdss-resize-handle.dragging {
  background: var(--primary);
  opacity: 0.25;
}

/* ────────────────────────────────────────────────────────────
   CDSS 채팅 영역
──────────────────────────────────────────────────────────── */

.cdss-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── 환자정보 바 ── */
.cdss-patient-bar {
  flex-shrink: 0;
  background: #f0f3fa;
  border-top: 1px solid var(--border-light);
  font-size: 12px;
  color: #1a2a6c;
  font-weight: 700;
  min-height: 0;
  display: none;
}

.cdss-patient-bar.visible { display: block; }

.cdss-patient-bar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 14px;
  line-height: 1.7;
}

/* ── 입력창 no-border ── */
.input-area--no-border { border-top: none; }

/* ── 퀵버튼 영역 — feed-inner와 동일 정렬 ── */
.cdss-quick-area {
  flex-shrink: 0;
  padding: 10px 0;
  border-top: 1px solid var(--border-light);
}

.cdss-quick-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cdss-quick-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.13s, color 0.13s;
}

.cdss-quick-btn:hover { background: var(--primary); color: #fff; }

.cdss-quick-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  margin: 2px 4px;
}

.cdss-emr-send-btn {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.13s, background 0.13s;
  margin-left: auto;
}
.cdss-emr-send-btn:hover { opacity: 0.85; }
.cdss-emr-send-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.cdss-emr-send-btn.sent {
  background: var(--text-muted);
  border-color: var(--text-muted);
}

/* ────────────────────────────────────────────────────────────
   EMR 자동 입력 하이라이트
──────────────────────────────────────────────────────────── */
@keyframes autofill-flash {
  0%   { background: color-mix(in srgb, var(--primary) 18%, transparent); }
  100% { background: transparent; }
}

.autofill-highlight {
  animation: autofill-flash 1.2s ease-out forwards;
  border-radius: 4px;
}

/* 환자 정보 폼 전체 영역 flash (패널 배경) */
@keyframes panel-incoming {
  0%   { box-shadow: inset 0 0 0 2px var(--primary); }
  100% { box-shadow: inset 0 0 0 2px transparent; }
}

.panel-incoming {
  animation: panel-incoming 1.5s ease-out forwards;
}