/* LP palette adapted for the tenant workspace. Scoped so admin/chat keep their own theme. */
.tenant-theme {
  --tenant-paper: #eceee9;
  --tenant-surface: #f8f9f6;
  --tenant-control-surface: #fff;
  --tenant-control-hover: #f0ecff;
  --tenant-tint: #e1e4dd;
  --tenant-ink: #111412;
  --tenant-muted: #535b55;
  --tenant-line: #d3d8d0;
  --tenant-line-strong: #8a928b;
  --tenant-accent: #5b3cf5;
  --tenant-accent-hover: #4a2ee0;
  --tenant-accent-tint: #e4ddff;
  --tenant-accent-ink: #fff;
  --color-canvas: var(--tenant-paper);
  --color-ink: var(--tenant-ink);
  --color-muted: var(--tenant-muted);
  --color-line: var(--tenant-line);
  --color-brand-50: var(--tenant-accent-tint);
  --color-brand-100: var(--tenant-accent-tint);
  --color-brand-500: var(--tenant-accent);
  --color-brand-600: var(--tenant-accent);
  --color-brand-700: var(--tenant-accent-hover);
  --color-brand-900: var(--tenant-ink);
  --color-stone-50: var(--tenant-paper);
  --color-stone-100: var(--tenant-tint);
  --color-stone-200: var(--tenant-line);
  --color-stone-300: var(--tenant-line-strong);
  --color-stone-400: var(--tenant-muted);
  --color-stone-600: var(--tenant-muted);
  --color-stone-700: var(--tenant-ink);
  background: var(--tenant-paper);
  color: var(--tenant-ink);
  color-scheme: light;
  /* 일본어 화면은 fonts_ja.css 가 --font-sans 를 Pretendard JP 로 바꾼다. */
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1, "ss01" 1;
  accent-color: var(--tenant-accent);
  caret-color: var(--tenant-accent);
  scrollbar-color: var(--tenant-line-strong) var(--tenant-paper);
}

.tenant-theme ::selection { background: var(--tenant-accent-tint); color: var(--tenant-ink); }
.tenant-theme :focus-visible { outline: 2px solid var(--tenant-accent); outline-offset: 3px; }
.tenant-theme a { text-underline-offset: .2em; }
.tenant-theme .tenant-sidebar { background: var(--tenant-surface); border-color: var(--tenant-line); }
.tenant-theme .tenant-avatar { background: var(--tenant-accent); color: var(--tenant-accent-ink); border-radius: var(--ui-radius-control); }
/* 고객사 프로필 이미지(shared/_tenant_avatar). 첫 글자 위에 같은 크기의 배경 층으로 겹치고 모서리는 아바타를 따른다. 불러오지 못하면 아래 글자가 보인다. */
.tenant-avatar-frame { position: relative; overflow: hidden; }
.tenant-avatar-image { position: absolute; inset: 0; border-radius: inherit; background-position: center; background-size: cover; background-repeat: no-repeat; }
/* 모서리, 높이, 여백, 글자 크기는 app/assets/tailwind/application.css 의 콘솔 공통 모양(--ui-*)이 정한다. 여기는 색만 둔다. */
.tenant-theme .tenant-content { max-width: 1440px; margin-inline: auto; }
.tenant-theme .nav-link { color: var(--tenant-muted); }
.tenant-theme .nav-link:hover { background: var(--tenant-paper); color: var(--tenant-ink); }
.tenant-theme .nav-link-active,
.tenant-theme .nav-link-active:hover { background: var(--tenant-accent-tint); color: var(--tenant-accent); box-shadow: none; }
.tenant-theme .card { background: var(--tenant-surface); border-color: var(--tenant-line); }
.tenant-theme .bg-white { background-color: var(--tenant-surface); }
.tenant-theme .btn svg { flex-shrink: 0; }
.tenant-theme .btn-primary { background: var(--tenant-accent); color: var(--tenant-accent-ink); }
.tenant-theme .btn-primary:hover:not(:disabled) { background: var(--tenant-accent-hover); }
.tenant-theme :is(.btn-secondary, .btn-outline) { border: 1px solid var(--tenant-line-strong); background: var(--tenant-control-surface); color: var(--tenant-ink); }
.tenant-theme :is(.btn-secondary, .btn-outline):hover:not(:disabled):not([aria-pressed="true"]):not([aria-selected="true"]) { background: var(--tenant-control-hover); color: var(--tenant-ink); border-color: var(--tenant-accent); }
/* Selected controls keep their foreground and surface paired in every interaction state. */
.tenant-theme :is(.btn-secondary, .btn-outline):is([aria-pressed], [aria-selected]) { transition: border-color .16s ease; }
.tenant-theme :is(.btn-secondary, .btn-outline):is([aria-pressed="true"], [aria-selected="true"]) { background: var(--tenant-accent); color: var(--tenant-accent-ink); border-color: var(--tenant-accent); }
.tenant-theme :is(.btn-secondary, .btn-outline):is([aria-pressed="true"], [aria-selected="true"]):is(:hover, :active):not(:disabled) { background: var(--tenant-accent-hover); color: var(--tenant-accent-ink); border-color: var(--tenant-accent-hover); }
.tenant-theme .btn-ghost { color: var(--tenant-muted); }
.tenant-theme .btn-ghost:hover:not(:disabled) { background: var(--tenant-tint); color: var(--tenant-ink); }
.tenant-theme .btn:disabled { background: var(--tenant-tint); color: var(--tenant-muted); border-color: var(--tenant-line-strong); opacity: 1; cursor: not-allowed; transition: none; }
.tenant-theme .btn-primary:disabled,
.tenant-theme :is(.btn-secondary, .btn-outline):is([aria-pressed="true"], [aria-selected="true"]):disabled { background: var(--tenant-accent-tint); color: var(--tenant-accent-hover); border-color: var(--tenant-accent); }
.tenant-theme .field-input { border-color: var(--tenant-line-strong); background-color: var(--tenant-control-surface); color: var(--tenant-ink); }
.tenant-theme .field-input::placeholder { color: var(--tenant-muted); opacity: 1; }
.tenant-theme .field-input:focus { border-color: var(--tenant-accent); outline: 2px solid var(--tenant-accent); outline-offset: 2px; box-shadow: none; }
.tenant-theme .field-input[aria-invalid="true"],
.tenant-theme .field-input:user-invalid { border-color: var(--color-red-700); outline-color: var(--color-red-700); }
.tenant-theme .field_with_errors .field-input { border-color: var(--color-red-700); }
.tenant-theme .field-input:disabled { background-color: var(--tenant-tint); color: var(--tenant-muted); cursor: not-allowed; }
.tenant-theme select.field-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23535b55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.tenant-theme select.field-input:hover:not(:disabled) { border-color: var(--tenant-accent); }
.tenant-theme select option { background: var(--tenant-control-surface); color: var(--tenant-ink); }
/* Choice cards share a control surface; selection remains distinct from hover. */
.tenant-theme .tenant-choice { background: var(--tenant-control-surface); border-color: var(--tenant-line-strong); border-radius: var(--ui-radius-control); transition: background-color .16s ease, border-color .16s ease; }
.tenant-theme label.tenant-choice:hover:not(:has(:disabled, :checked)),
.tenant-theme .peer:not(:disabled):not(:checked) ~ .tenant-choice:hover { background: var(--tenant-control-hover); border-color: var(--tenant-accent); }
.tenant-theme .tenant-choice:has(:checked),
.tenant-theme .peer:checked ~ .tenant-choice { background: var(--tenant-accent-tint); border-color: var(--tenant-accent); }
.tenant-theme .tenant-choice:has(:focus-visible),
.tenant-theme .peer:focus-visible ~ .tenant-choice { outline: 2px solid var(--tenant-accent); outline-offset: 3px; }
.tenant-theme .tenant-choice:has(:disabled),
.tenant-theme .peer:disabled ~ .tenant-choice { background: var(--tenant-tint); color: var(--tenant-muted); border-color: var(--tenant-line-strong); opacity: 1; cursor: not-allowed; transition: none; }
.tenant-theme input:is([type="checkbox"], [type="radio"]) { accent-color: var(--tenant-accent); }
.tenant-theme .data-table { position: relative; font-variant-numeric: tabular-nums; }
.tenant-theme .data-table thead th { background-color: var(--tenant-surface); }
.tenant-theme .data-table tbody tr { --tenant-row-background: var(--tenant-surface); background-color: var(--tenant-row-background); }
.tenant-theme .data-table tbody tr:not(.bg-brand-50):hover { --tenant-row-background: color-mix(in srgb, var(--tenant-accent-tint) 45%, var(--tenant-surface)); background-color: var(--tenant-row-background); }
.tenant-theme .data-table tbody tr.bg-brand-50 { --tenant-row-background: var(--tenant-accent-tint); background-color: var(--tenant-row-background); }
/* Sticky cells stay opaque while sharing the row's hover and selection surface. */
.tenant-theme .data-table tbody td.sticky { z-index: 1; background-color: var(--tenant-row-background); transition: inherit; }
.tenant-theme .data-table thead th.sticky { z-index: 2; }
.tenant-theme .data-table th:first-child { border-top-left-radius: var(--ui-radius-panel); }
.tenant-theme .data-table th:last-child { border-top-right-radius: var(--ui-radius-panel); }

/* 일시와 대화 내용을 왼쪽부터 읽고, 보조 정보는 일정한 열 너비로 정렬한다. */
/* 접수함처럼 한 줄에 한 건. 모서리와 여백을 줄이고 색은 확인할 것에만 쓴다. */
.tenant-theme .conversation-history-table { width: 100%; min-width: 0; table-layout: fixed; }
.tenant-theme .conversation-history-table th:first-child,
.tenant-theme .conversation-history-table th:last-child { border-radius: 0; }
.tenant-theme .conversation-history-table thead th:nth-child(1) { width: 7rem; }
.tenant-theme .conversation-history-table thead th:nth-child(3) { width: 11rem; }
.tenant-theme .conversation-history-table thead th:nth-child(4) { width: 9rem; }
.tenant-theme .conversation-history-table thead th:nth-child(5) { width: 7rem; }
.tenant-theme .conversation-history-table tbody tr { position: relative; }
.tenant-theme .conversation-history-table tbody td { vertical-align: middle; }
.history-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: var(--ui-radius-tag); font-size: 12px; font-weight: 500; white-space: nowrap; }
.history-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.history-link:focus-visible { outline: none; }
.history-link:focus-visible::after { box-shadow: inset 0 0 0 2px var(--tenant-accent); border-radius: var(--ui-radius-tag); }
/* 날짜 구분 줄(같은 날 대화 묶음의 제목). 바탕은 콘솔 바탕 토큰이라 행과 구분되고, 오늘과 어제는 흐린 글자로 덧붙인다. */
.tenant-theme .conversation-history-table .history-day th {
  padding: 6px 16px; border-top: 1px solid var(--tenant-line); border-bottom: 1px solid var(--tenant-line);
  background: var(--tenant-paper); color: var(--tenant-ink); font-size: 12px; font-weight: 600; text-align: left; font-variant-numeric: tabular-nums;
}
.tenant-theme .conversation-history-table tbody:first-of-type .history-day th { border-top: 0; }
.tenant-theme .conversation-history-table tbody tr.history-day:hover { background-color: transparent; }
.history-day-relative { font-weight: 400; color: var(--tenant-muted); }
/* 목록 행의 세부 한 줄(메시지 수, 통화 시간). */
/* 기간의 시작일과 종료일 칸(늘 보인다). */
.history-range { display: flex; align-items: center; gap: 6px; }
/* 표 칸이 좁을 때 쌓는 기준은 화면 폭이 아니라 카드 폭이다(사이드바를 접었는지, 확대했는지와 상관없이 오른쪽 열이 잘리지 않게). */
.conversation-history-card { container-type: inline-size; }

/* 카드가 56rem(896px)보다 좁으면 고정 폭 열(34rem)을 빼고 대화 내용 열이 22rem 이 안 되어 오른쪽 열이 밀리거나 잘린다. 그때는 한 건을 칸으로 쌓는다:
   왼쪽 위 시각, 그 아래 채널과 담당, 오른쪽에 대화 내용과 그 아래 처리 결과(사이드바가 보이는 화면 폭 약 1180px 미만, 휴대폰 포함). */
@container (max-width: 56rem) {
  .tenant-theme .conversation-history-table,
  .tenant-theme .conversation-history-table tbody { display: block; }
  .tenant-theme .conversation-history-table thead { display: none; }
  .tenant-theme .conversation-history-table tbody tr {
    display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px;
  }
  .tenant-theme .conversation-history-table tbody td { min-width: 0; padding: 0; border: 0; }
  .tenant-theme .conversation-history-table tbody tr + tr { border-top: 1px solid var(--tenant-line); }
  .conversation-history-table .history-date { grid-column: 1; grid-row: 1; }
  .conversation-history-table .history-content { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .conversation-history-table .history-channel { grid-column: 1; grid-row: 2; }
  .conversation-history-table .history-result { grid-column: 2; grid-row: 3; }
  .conversation-history-table .history-agent { grid-column: 1; grid-row: 3; align-self: center; }
  .tenant-theme .conversation-history-table tbody tr.history-day { display: block; padding: 0; }
  .tenant-theme .conversation-history-table .history-day th { display: block; padding: 6px 12px; border-bottom: 0; }
}
.tenant-theme :is(dialog, [popover]) { color: var(--tenant-ink); background-color: var(--tenant-surface); border-color: var(--tenant-line); }
.tenant-theme dialog::backdrop { background: rgb(14 16 15 / .55); }
.tenant-theme.tenant-auth { background: var(--tenant-paper); }

@media (max-width: 767px) {
  .tenant-theme .tenant-sidebar nav { padding-bottom: 12px; scrollbar-width: thin; }
}

@media (prefers-reduced-motion: reduce) {
  .tenant-theme :is(.btn, .nav-link, .field-input, .tenant-choice, .data-table tbody tr) { transition: none; }
}

/* 담당자 연결 설정: 파일 사용 여부를 명확하게 보여 주는 네이티브 스위치. */
.staff-connection-form { max-width: 48rem; display: grid; gap: 1rem; }
.staff-wait-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem; border: 1px solid var(--tenant-line); border-radius: var(--ui-radius-control); background: var(--tenant-control-surface); cursor: pointer; }
.staff-wait-mode-copy { display: grid; gap: .25rem; }
.staff-wait-mode-label { font-size: .875rem; font-weight: 600; color: var(--tenant-ink); }
.staff-wait-mode-state { font-size: .75rem; color: var(--tenant-muted); }
.tenant-theme .staff-wait-switch { appearance: none; position: relative; flex: 0 0 42px; width: 42px; height: 24px; margin: 0; border: 1px solid var(--tenant-line-strong); border-radius: 999px; background: var(--tenant-line-strong); cursor: pointer; transition: background-color 160ms, border-color 160ms; }
.staff-wait-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .15); transition: transform 160ms; }
.tenant-theme .staff-wait-switch:checked { background: var(--tenant-accent); border-color: var(--tenant-accent); }
.staff-wait-switch:checked::after { transform: translateX(18px); }
.staff-wait-switch:focus-visible { outline: 2px solid var(--tenant-accent); outline-offset: 3px; }
.tenant-theme .staff-wait-text-group.is-disabled .field-input { background: var(--tenant-paper); border-color: var(--tenant-line); color: var(--tenant-muted); cursor: not-allowed; }
.staff-wait-text-group.is-disabled .field-label { color: var(--tenant-muted); }
.staff-wait-text-group.is-disabled audio { display: none; }
.staff-connection-form fieldset[hidden], .staff-wait-file-group[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .staff-wait-switch, .staff-wait-switch::after { transition: none; } }
.staff-connection-form, .staff-connection-form > .card { min-width: 0; width: 100%; }
.tenant-theme .staff-wait-section.is-inactive { background: var(--tenant-paper); color: var(--tenant-muted); }
.tenant-theme .staff-wait-section.is-inactive .staff-wait-mode-row { background: var(--tenant-paper); cursor: not-allowed; }
.tenant-theme .staff-wait-section.is-inactive .field-input { background: var(--tenant-paper); border-color: var(--tenant-line); color: var(--tenant-muted); cursor: not-allowed; }
.staff-wait-section.is-inactive .field-label, .staff-wait-section.is-inactive .staff-wait-mode-label { color: var(--tenant-muted); }
.staff-wait-section.is-inactive audio { display: none; }
.tenant-theme .staff-wait-switch:disabled { background: var(--tenant-line); border-color: var(--tenant-line); cursor: not-allowed; }
.staff-wait-music-list { min-width: 0; display: grid; gap: .5rem; }
.staff-wait-music-option { min-width: 0; padding: .75rem; border: 1px solid var(--tenant-line); border-radius: var(--ui-radius-control); background: var(--tenant-control-surface); }
.staff-wait-music-option:has(.staff-wait-music-radio:checked) { border-color: var(--tenant-accent); }
.staff-wait-music-heading { display: flex; align-items: center; gap: .625rem; }
.staff-wait-music-radio { flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0; accent-color: var(--tenant-accent); }
.staff-wait-music-label { flex: 1; font-size: .875rem; font-weight: 600; cursor: pointer; }
.staff-wait-music-preview { display: block; width: 100%; height: 40px; margin-top: .5rem; }
.staff-wait-custom-upload[hidden] { display: none !important; }

/* Reusable live call monitor: page and embedded/modal layouts share the same UI. */
.live-call-monitor { min-width: 0; }
.live-call-monitor [hidden] { display: none !important; }
.live-call-monitor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; margin-bottom: .75rem; }
.live-call-monitor-status { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--tenant-muted); }
.live-call-monitor-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--tenant-line-strong); flex-shrink: 0; }
.live-call-monitor-status.is-receiving::before { background: var(--tenant-accent); animation: live-call-receiving 2s ease-in-out infinite; }
@keyframes live-call-receiving { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.live-call-monitor-grid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.live-call-monitor-grid.live-call-monitor-single { grid-template-columns: minmax(0, 1fr); }
.live-call-monitor-calls { padding: 1rem; }
.live-call-monitor h2 { font-size: .95rem; font-weight: 650; margin: 0; }
.live-call-monitor-list { display: grid; gap: .5rem; margin-top: .75rem; max-height: 60vh; overflow-y: auto; }
.live-call-monitor-call { display: grid; grid-template-columns: minmax(0, 1fr) auto; text-align: left; gap: .25rem .5rem; padding: .6rem .75rem; border: 1px solid var(--tenant-line); border-radius: var(--ui-radius-control); background: var(--tenant-control-surface); color: var(--tenant-ink); cursor: pointer; }
.live-call-monitor-call strong { grid-column: 1 / -1; font-size: .875rem; overflow-wrap: anywhere; }
.live-call-monitor-call span, .live-call-monitor-call time { font-size: .75rem; color: var(--tenant-muted); }
.live-call-monitor-call [data-field="number"] { grid-column: 1 / -1; }
.live-call-monitor-call[aria-pressed="true"] { border-color: var(--tenant-accent); background: var(--tenant-accent-tint); }
.live-call-monitor-call:focus-visible, .live-call-monitor button:focus-visible, .live-call-monitor-messages:focus-visible { outline: 2px solid var(--tenant-accent); outline-offset: 3px; }
.live-call-monitor-pagination { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; font-size: .8rem; }
.live-call-monitor-pagination button { cursor: pointer; }
.live-call-monitor-pagination button:disabled { opacity: .35; cursor: default; }
.live-call-monitor-detail { overflow: hidden; position: relative; }
.live-call-monitor-detail-heading { padding: .75rem 1rem; border-bottom: 1px solid var(--tenant-line); }
.live-call-monitor-detail-heading p { font-size: .75rem; color: var(--tenant-muted); margin-top: .4rem; overflow-wrap: anywhere; }
.live-call-monitor-detail-heading a { display: inline-block; margin-top: .6rem; font-size: .8rem; color: var(--tenant-accent); text-decoration: underline; text-underline-offset: 3px; }
.live-call-monitor-note { padding: .6rem 1rem; font-size: .8rem; color: var(--tenant-muted); background: var(--tenant-control-surface); border-bottom: 1px solid var(--tenant-line); }
.live-call-monitor-messages { height: clamp(280px, 54vh, 620px); overflow-y: auto; overscroll-behavior: contain; padding: 1rem; }
.live-call-monitor-empty { color: var(--tenant-muted); font-size: .85rem; padding: 1.5rem 0; }
.live-call-monitor-message-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.live-call-monitor-message { width: fit-content; min-width: 0; max-width: 90%; justify-self: start; }
.live-call-monitor-message[data-role="assistant"] { justify-self: end; }
.live-call-monitor-message-meta { display: flex; gap: .65rem; align-items: center; margin-bottom: .2rem; font-size: var(--ui-text-meta); color: var(--tenant-muted); }
.live-call-monitor-message-meta strong { font-weight: 600; }
.live-call-monitor-message > p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.6; padding: .5rem .8rem; border-radius: var(--ui-radius-panel); background: var(--tenant-control-surface); border: 1px solid var(--tenant-line); }
.live-call-monitor-message[data-role="assistant"] > p { background: var(--tenant-accent-tint); border-color: transparent; }
.live-call-monitor-new { display: block; margin: .5rem auto 1rem; padding: .55rem 1rem; font-size: .8rem; border-radius: var(--ui-radius-control); background: var(--tenant-accent); color: white; cursor: pointer; }
@media (max-width: 760px) {
  .live-call-monitor-grid { grid-template-columns: minmax(0, 1fr); }
  .live-call-monitor-list { max-height: 240px; }
  .live-call-monitor-messages { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .live-call-monitor-status.is-receiving::before { animation: none; } }

.live-call-monitor-phase { display: flex; align-items: center; gap: .85rem; margin: 1.75rem 0 .75rem; color: #a16207; }
.live-call-monitor-phase::before, .live-call-monitor-phase::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .25; }
.live-call-monitor-phase-content { display: flex; align-items: center; gap: .6rem; padding: .5rem .85rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--ui-radius-tag); font-size: .75rem; font-weight: 600; }
.live-call-monitor-phase[data-state="staff"] { color: #0f766e; }
.live-call-monitor-phase[data-state="staff"] .live-call-monitor-phase-content { background: #f0fdfa; border-color: #99f6e4; }
.live-call-monitor-wave { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.live-call-monitor-wave i { display: block; width: 3px; height: 12px; border-radius: 2px; background: currentColor; animation: live-call-wave 1.1s ease-in-out infinite; transform-origin: center; }
.live-call-monitor-wave i:nth-child(2) { animation-delay: -.6s; }
.live-call-monitor-wave i:nth-child(3) { animation-delay: -.3s; }
.live-call-monitor-wave i:nth-child(4) { animation-delay: -.8s; }
@keyframes live-call-wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.live-call-monitor-call[data-state="staff_connecting"] [data-field="state"] { color: #a16207; font-weight: 600; }
.live-call-monitor-call[data-state="staff_connected"] [data-field="state"] { color: #0f766e; font-weight: 600; }
.live-call-monitor-call[data-state="staff_connected"][aria-pressed="true"] { background: #f0fdfa; border-color: #0d9488; }
@media (prefers-reduced-motion: reduce) { .live-call-monitor-wave i { animation: none; } }

/* 대화 기록과 실시간 화면은 같은 말풍선과 구간 구분선을 사용한다. */
.live-call-monitor-history .live-call-monitor-message-list { gap: .6rem; }
.live-call-monitor-message[data-role="staff"] { justify-self: end; }
.live-call-monitor-message[data-role="staff"] > p { background: #f0fdfa; border-color: #99f6e4; }
.live-call-monitor-message[data-role="staff"] .live-call-monitor-message-meta strong { color: #0f766e; }
.live-call-monitor-message > details, .live-call-monitor-message > div:last-child { margin-top: .45rem; }
.live-call-monitor-phase { grid-column: 1 / -1; }
.live-call-monitor-phase time { font-variant-numeric: tabular-nums; font-size: var(--ui-text-meta); font-weight: 400; }
.live-call-monitor-phase:is([data-state="ended"], [data-state="recording"]) { color: var(--tenant-muted); }
.live-call-monitor-phase:is([data-state="ended"], [data-state="recording"]) .live-call-monitor-phase-content { background: var(--tenant-control-surface); border-color: var(--tenant-line); }
.live-call-monitor-phase[data-state="failed"] { color: #b91c1c; }
.live-call-monitor-phase[data-state="failed"] .live-call-monitor-phase-content { background: #fef2f2; border-color: #fecaca; }

/* 대화 상세: 대화 내용 카드가 화면 아래 끝까지 차고, 메시지가 많으면 카드 안에서 스크롤한다.
   가려진 메시지가 있는 쪽은 흐리게 덮고(scroll-hint 컨트롤러가 data-scroll-* 를 켠다) 아래로 더 보기 버튼을 띄운다. */
.conversation-transcript { position: relative; display: flex; flex-direction: column; min-width: 0; max-height: 75dvh; overflow: hidden; }
.conversation-transcript-viewport { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; }
.conversation-transcript::before, .conversation-transcript::after { content: ""; position: absolute; inset-inline: 0; z-index: 1; height: 3.5rem; pointer-events: none; opacity: 0; transition: opacity .15s ease-out; }
.conversation-transcript::before { top: 0; background: linear-gradient(var(--tenant-surface), transparent); }
.conversation-transcript::after { bottom: 0; background: linear-gradient(transparent, var(--tenant-surface) 85%); }
.conversation-transcript[data-scroll-above]::before, .conversation-transcript[data-scroll-below]::after { opacity: 1; }
.conversation-transcript-more { position: absolute; bottom: .75rem; left: 50%; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .9rem .4rem .7rem; translate: -50% 0; border: 1px solid var(--tenant-line); border-radius: var(--ui-radius-control); background: var(--tenant-surface); color: var(--tenant-ink); font-size: .75rem; font-weight: 600; box-shadow: 0 6px 18px rgb(14 16 15 / .14); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .15s ease-out, visibility .15s; }
.conversation-transcript-more:hover { background: var(--tenant-paper); }
.conversation-transcript[data-scroll-below] .conversation-transcript-more { opacity: 1; visibility: visible; }

/* 녹음이 있는 대화는 메시지를 눌러 그 부분부터 들을 수 있다(recording-seek 컨트롤러). 말풍선 글자는 끌어서 고를 수 있게 글자 커서를 둔다. */
.live-call-monitor-message.is-seekable { cursor: pointer; }
.live-call-monitor-message.is-seekable > p { cursor: text; }
/* 콘솔의 글자 선택 색(accent-tint)이 AI 말풍선 배경과 같아 고른 글자가 안 보였다. 말풍선 안에서는 진하게 칠한다. */
.live-call-monitor-message > p ::selection, .live-call-monitor-message > p::selection { background: var(--tenant-accent); color: var(--tenant-accent-ink); }
.live-call-monitor-message.is-seekable > p { transition: box-shadow .15s ease-out; }
.live-call-monitor-message.is-seekable:hover > p { box-shadow: 0 0 0 2px var(--tenant-accent-tint), 0 0 0 3px var(--tenant-accent); }
.live-call-monitor-seek { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 999px; color: var(--tenant-accent); background: var(--tenant-accent-tint); cursor: pointer; opacity: .55; transition: opacity .15s ease-out; }
.live-call-monitor-message.is-seekable:hover .live-call-monitor-seek, .live-call-monitor-seek:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .live-call-monitor-message.is-seekable > p, .live-call-monitor-seek { transition: none; }
}

/* 통화 녹음 재생기: 재생한 부분을 강조색으로 채우고 위치 손잡이를 크게 해 재생 중 위치가 한눈에 보이게 한다. */
.conversation-player { --player-track: 6px; display: flex; flex: 1 1 12rem; align-items: center; gap: .75rem; min-width: 0; }
.conversation-player-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--tenant-accent); color: var(--tenant-accent-ink); cursor: pointer; transition: filter .15s ease-out; }
.conversation-player-toggle:hover { filter: brightness(1.1); }
.conversation-player .conversation-player-pause, .conversation-player[data-playing] .conversation-player-play { display: none; }
.conversation-player[data-playing] .conversation-player-pause { display: block; }
.conversation-player-time { flex: none; white-space: nowrap; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--tenant-muted); }
.conversation-player-progress { --progress: 0%; flex: 1; min-width: 3rem; height: 1.25rem; margin: 0; background: transparent; cursor: pointer; appearance: none; }
.conversation-player-progress::-webkit-slider-runnable-track { height: var(--player-track); border-radius: 999px; background: linear-gradient(to right, var(--tenant-accent) var(--progress), color-mix(in srgb, var(--tenant-ink) 14%, transparent) var(--progress)); }
.conversation-player-progress::-moz-range-track { height: var(--player-track); border-radius: 999px; background: color-mix(in srgb, var(--tenant-ink) 14%, transparent); }
.conversation-player-progress::-moz-range-progress { height: var(--player-track); border-radius: 999px; background: var(--tenant-accent); }
.conversation-player-progress::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: calc((var(--player-track) - 16px) / 2); border: 3px solid var(--tenant-surface); border-radius: 50%; background: var(--tenant-accent); box-shadow: 0 0 0 1px var(--tenant-accent), 0 1px 4px rgb(14 16 15 / .25); appearance: none; }
.conversation-player-progress::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid var(--tenant-surface); border-radius: 50%; background: var(--tenant-accent); box-shadow: 0 0 0 1px var(--tenant-accent), 0 1px 4px rgb(14 16 15 / .25); }
.conversation-player-progress:focus-visible { outline: 2px solid var(--tenant-accent); outline-offset: 3px; border-radius: var(--ui-radius-tag); }
@media (prefers-reduced-motion: reduce) { .conversation-player-toggle { transition: none; } }

/* 녹음 막대는 대화와 오른쪽 열 아래를 가로질러 한 줄로 두고, 페이지가 스크롤되는 작은 화면에서는 화면 아래에 붙여 늘 보이게 한다. */
.conversation-detail > .conversation-recording { grid-column: 1 / -1; position: sticky; bottom: .75rem; z-index: 5; box-shadow: 0 8px 28px rgb(14 16 15 / .16); }
@media (min-width: 1024px) and (min-height: 600px) {
  .tenant-theme main:has(.conversation-detail) { display: flex; flex-direction: column; height: 100dvh; }
  .tenant-theme .tenant-content:has(.conversation-detail) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .conversation-detail { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .conversation-transcript { min-height: 0; max-height: none; }
  .conversation-detail-side { min-height: 0; overflow-y: auto; }
  .conversation-detail > .conversation-recording { position: static; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .conversation-transcript::before, .conversation-transcript::after, .conversation-transcript-more { transition: none; }
}

.live-call-count-badge { min-width: 1.4rem; padding: .1rem .4rem; border-radius: 100px; background: var(--tenant-accent); color: white; font-size: var(--ui-text-meta); font-weight: 650; line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums; }
.live-call-count-badge[hidden] { display: none; }

.live-call-monitor-empty.is-selection-prompt { white-space: pre-line; margin: 2rem auto; max-width: 30rem; padding: 1.25rem; border: 1px dashed var(--tenant-accent); border-radius: var(--ui-radius-panel); color: var(--tenant-accent); background: var(--tenant-accent-tint); font-size: 1rem; font-weight: 650; line-height: 1.8; text-align: center; }

.menu-hint-link { display: inline; white-space: nowrap; font-size: inherit; line-height: inherit; text-underline-offset: .15em; }
.menu-hint-link > svg { display: inline-block; width: 1em; height: 1em; margin-right: .2em; vertical-align: -.125em; }

.service-usage-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
.service-usage-overview > div { padding: 1rem; border-bottom: 1px solid var(--tenant-line); }
.service-usage-value { margin-top: .4rem; font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.service-usage-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: .3rem; margin-top: 1.5rem; }
.service-usage-hours > div { text-align: center; font-size: var(--ui-text-meta); color: var(--tenant-muted); }
.service-usage-hour-track { display: flex; align-items: flex-end; height: 5rem; border-bottom: 1px solid var(--tenant-line); margin-bottom: .4rem; }
.service-usage-hour-bar { width: 100%; background: var(--tenant-accent); border-radius: 3px 3px 0 0; }
@media (max-width: 640px) {
  .service-usage-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-usage-value { font-size: 1.3rem; }
  .service-usage-hours { gap: .15rem; }
  .service-usage-hours > div:nth-child(even) span { visibility: hidden; }
}

/* Admin tenant list: only active rows grow; the shared monitor is mounted on demand. */
.admin-tenant-calls [hidden] { display: none !important; }
.admin-tenant-call-row.is-active > td { padding-block: 1.25rem; }
.admin-tenant-call-badge { display: flex; align-items: center; gap: .45rem; width: fit-content; margin-block: .65rem .25rem; padding: .4rem .65rem; border-radius: var(--ui-radius-control); background: #ecfdf5; color: #166534; font-size: .8rem; font-weight: 650; cursor: pointer; }
.admin-tenant-call-badge:hover, .admin-tenant-call-badge[aria-expanded="true"] { background: #d1fae5; }
.admin-tenant-call-badge:focus-visible { outline: 2px solid #15803d; outline-offset: 3px; }
.admin-tenant-call-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #16a34a; }
.admin-live-call-panel { --tenant-surface: #fff; --tenant-control-surface: #fff; --tenant-control-hover: #f0fdf4; --tenant-ink: #111827; --tenant-muted: #64748b; --tenant-line: #e2e8f0; --tenant-accent: #3f766b; --tenant-accent-tint: #e7f3ef; padding: 1rem; background: #f8faf9; border-radius: var(--ui-radius-panel); }

/* 부가 기능 관리: 한 줄에 기능 하나. 이름과 소개(두 줄까지) | 상태 배지 | 버튼. 상태와 버튼 열은 너비를 고정해 모든 행에서 같은 자리에 둔다.
   버튼 무게: 켜기는 주 버튼, 설정은 보조 버튼, 끄기는 글자 버튼. 너비는 세 언어 중 가장 긴 문구(導入のお問い合わせ, Settings + Turn off)에 맞춘다. */
.plugin-row { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) 8rem 9.5rem; align-items: center; column-gap: 12px; padding: 10px 16px; }
.plugin-row + .plugin-row { border-top: 1px solid var(--tenant-line); }
.plugin-row-icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--ui-radius-control); background: var(--tenant-tint, #f1f0ee); color: var(--tenant-ink); }
.plugin-row-state { white-space: nowrap; }
.plugin-row-actions { display: flex; justify-content: flex-end; gap: 6px; }
@media (max-width: 640px) {
  /* 좁은 화면: 이름과 설명이 위, 상태와 버튼이 아래 줄. */
  .plugin-row { grid-template-columns: 1.75rem minmax(0, 1fr) auto; row-gap: 8px; align-items: start; }
  .plugin-row > .min-w-0 { grid-column: 2 / -1; }
  .plugin-row-state { grid-column: 2; grid-row: 2; align-self: center; }
  .plugin-row-actions { grid-column: 3; grid-row: 2; }
}

/* 예약 설정의 반복 줄(예약 항목, 예약 때 물어볼 정보): 작은 입력칸과 각진 모서리로 한눈에 보이게. */
.booking-items-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 13px; }
.booking-items-table th { padding: 0 6px 6px; font-size: var(--ui-text-meta); font-weight: 500; text-align: left; color: var(--tenant-muted); white-space: nowrap; }
.booking-items-table td { padding: 4px 6px; vertical-align: middle; }
.booking-row-remove { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--ui-radius-control); color: var(--tenant-muted); }
.booking-row-remove:hover { background: var(--tenant-control-hover, #f5f5f4); color: var(--tenant-ink); }

/* 예약 설정 탭(기본, 예약 항목, AI 안내)과 예약 항목 탭의 자동 저장 상태. */
/* 탭 모양은 공통 .tabs. 탭 줄은 예약 항목 탭의 표와 미리보기를 합친 너비에 맞춘다(다른 탭은 그 안에서 왼쪽 칸만 쓴다). */
.booking-settings-tabs { max-width: 48rem; }
@media (min-width: 1280px) { .booking-settings-tabs { max-width: calc(48rem + 20px + 18rem); } }
.booking-items-status { font-size: 12px; color: var(--tenant-muted); white-space: nowrap; }
.booking-items-status:empty { display: none; }
.booking-items-status.is-unsaved { padding: 2px 8px; border-radius: var(--ui-radius-tag); background: #fef08a; color: #713f12; font-weight: 600; }
.booking-items-status.is-saved { padding: 2px 8px; border-radius: var(--ui-radius-tag); background: #c6f6a8; color: #14532d; font-weight: 600; }
.booking-items-status.is-error { padding: 2px 8px; border-radius: var(--ui-radius-tag); background: #fde8e7; color: #b42318; font-weight: 600; }

/* 예약 항목 탭 오른쪽의 AI 대화 미리보기. 넓은 화면에서만 옆에 두고, 좁으면 아래로 내려간다. */
.booking-items-layout { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1280px) { .booking-items-layout { grid-template-columns: minmax(0, 48rem) 18rem; } }
.tenant-theme .card.booking-preview { font-size: var(--ui-text-meta); }
@media (min-width: 1280px) { .booking-preview { position: sticky; top: 16px; } }
.booking-preview-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.booking-preview-group { display: flex; flex-direction: column; gap: 8px; }
/* 같은 설정에서 나온 말들을 점선 영역으로 묶고 위에 이름표를 붙인다. */
.booking-preview-group.is-labeled { position: relative; margin-top: 8px; padding: 14px 8px 8px; border: 1px dashed var(--tenant-accent, #5b3cf5); border-radius: var(--ui-radius-panel); background: color-mix(in srgb, var(--tenant-accent, #5b3cf5) 4%, transparent); }
.booking-preview-label { position: absolute; top: -9px; left: 8px; padding: 0 6px; border-radius: var(--ui-radius-tag); background: var(--tenant-accent, #5b3cf5); color: #fff; font-size: var(--ui-text-meta); font-weight: 600; line-height: 18px; }
.booking-preview-bubble { max-width: 88%; padding: 7px 10px; border-radius: var(--ui-radius-panel); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.booking-preview-bubble.is-guest { align-self: flex-end; background: var(--tenant-accent, #5b3cf5); color: #fff; }
.booking-preview-bubble.is-ai { align-self: flex-start; background: var(--tenant-tint, #f1f0ee); color: var(--tenant-ink); }

/* "예약 받는 방식": 문장 속 입력칸과 예시 한 줄. */
.booking-window-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; line-height: 2.2; }
.tenant-theme .booking-settings-form .booking-inline-input { display: inline-block; width: auto; }
.booking-window-example { padding: 8px 10px; border-radius: var(--ui-radius-control); background: color-mix(in srgb, var(--tenant-accent, #5b3cf5) 6%, transparent); color: var(--tenant-ink); font-size: 13px; }

/* 예약 설정 저장 버튼 위의 "저장하면 이렇게 적용됩니다" 안내. */
.booking-apply-note { display: flex; gap: 8px; padding: 10px 12px; border-radius: var(--ui-radius-control); background: var(--tenant-tint, #f1f0ee); color: var(--tenant-muted); font-size: 12px; line-height: 1.6; }
.booking-apply-note ul { display: flex; flex-direction: column; gap: 2px; list-style: disc; padding-left: 16px; }