/* 문의 채팅 — base.html(관리 화면)과 전체현황 보드에서 함께 쓴다. */
:root { --chat-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
/* --- 문의 채팅 (떠 있는 버튼 + 팝업) --- */
.chat-fab {
  /* 모달·마스크(관리 40 · 전체현황 300)보다 위 — 팝업이 떠 있어도 문의 버튼은 늘 누를 수 있다 */
  position: fixed; right: 22px; bottom: 22px; z-index: 350;
  width: 52px; height: 52px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--black, #1c1c1c); color: #fff; box-shadow: var(--chat-shadow, 0 8px 24px rgba(0,0,0,.12));
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .14s, background .14s;
}
.chat-fab:hover { transform: translateY(-2px); background: var(--black-80, rgba(28,28,28,.8)); }
.chat-fab-ico { font-size: var(--fs-title-l); line-height: 1; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.chat-panel {
  position: fixed; right: 22px; bottom: 86px; z-index: 350;
  width: min(360px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 110px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-page, #ffffff); border: 1px solid var(--border, rgba(28,28,28,.10));
  border-radius: var(--radius-xl, 20px); box-shadow: var(--chat-shadow, 0 8px 24px rgba(0,0,0,.12));
}
.chat-panel.hidden { display: none; }
/* hidden 속성이 클래스 규칙에 밀리지 않게 한다 (설정에서 버튼을 끌 때 쓴다) */
.chat-fab[hidden], .chat-panel[hidden] { display: none !important; }
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--border, rgba(28,28,28,.10));
  background: linear-gradient(180deg, var(--surface-1, #f7f9fb) 0%, var(--bg-page, #ffffff) 100%);
}
.chat-head h2 { margin: 0; font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); }
/* 내용이 길어지면 폼 안에서 스크롤하고, 접수 버튼 줄은 아래에 붙어 늘 보인다 */
.chat-form { display: flex; flex-direction: column; gap: 8px; padding: 14px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.chat-actions {
  position: sticky; bottom: -14px; z-index: 1; margin: 0 -14px -14px; padding: 8px 14px 14px;
  background: var(--bg-page, #ffffff); border-top: 1px solid var(--border, rgba(28,28,28,.10));
}
.chat-hint { margin: 0; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40, rgba(28,28,28,.4)); }
.chat-form textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: var(--fs-body); line-height: var(--lh-body);
  border: 1px solid var(--border, rgba(28,28,28,.10)); border-radius: 10px;
  background: var(--bg-page, #ffffff); resize: vertical; min-height: 96px;
}
.chat-form textarea:focus { outline: 2px solid var(--brand, #95a4fc); outline-offset: -1px; }
.chat-field { display: flex; flex-direction: column; gap: 4px; }
.chat-field > span { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40, rgba(28,28,28,.4)); }
.chat-field .req { color: #d6456f; font-style: normal; }
.chat-field input, .chat-field select {
  height: 34px; padding: 0 10px; font: inherit; font-size: var(--fs-body); line-height: var(--lh-body);
  border: 1px solid var(--border, rgba(28,28,28,.10)); border-radius: 8px;
  background: var(--bg-page, #ffffff);
}
.chat-field input:focus, .chat-field select:focus {
  outline: 2px solid var(--brand, #95a4fc); outline-offset: -1px;
}
/* 제목 — 타입 셀렉트는 내용만큼, 텍스트가 남은 폭을 채운다 */
.chat-title { display: flex; align-items: center; gap: 8px; }
.chat-title select { flex: 0 0 auto; min-width: 84px; }
.chat-title input { flex: 1; min-width: 0; }
.chat-field input[type="file"] { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
.chat-attach { display: flex; align-items: center; gap: 8px; }
/* 파일 입력은 화면에서 감추되 키보드 초점은 남긴다(label 이 대신 연다) */
.chat-attach .chat-file-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.chat-attach .chat-file-input:focus-visible + label { outline: 2px solid var(--black, #1c1c1c); outline-offset: 2px; }
.chat-shots { list-style: none; margin: 2px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 4px; }
.chat-shots li {
  display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m);
  padding: 3px 8px; border-radius: 999px; background: var(--surface-1, #f7f9fb);
  border: 1px solid var(--border, rgba(28,28,28,.10));
}
.chat-shots li { padding: 4px 8px; border-radius: 10px; }
.chat-thumb {
  width: 40px; height: 30px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--border, rgba(28,28,28,.10)); background: #fff; flex: none;
}
.chat-shot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.chat-shot-x { border: none; background: none; cursor: pointer; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m);
  color: var(--black-40, rgba(28,28,28,.4)); }
.chat-note { font-style: normal; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40, rgba(28,28,28,.4)); }
.chat-status { margin: 0; min-height: 16px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
.chat-status.ok { color: #16a34a; }
.chat-status.error { color: #d6456f; }
.chat-actions { display: flex; justify-content: flex-end; }


/* 접수 중 로딩 막대 — 완료될 때까지 흐른다 */
.chat-progress { position: relative; height: 4px; margin: 6px 0 2px; border-radius: 2px; background: var(--black-5, rgba(28,28,28,.05)); overflow: hidden; }
.chat-progress[hidden] { display: none; }
.chat-progress i { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 2px; background: var(--brand, #95a4fc); animation: chat-progress-run 1.1s ease-in-out infinite; }
@keyframes chat-progress-run { 0% { left: -40%; } 100% { left: 100%; } }

/* 화면 캡처 — 드래그로 오리기 */
.chat-crop { position: fixed; inset: 0; z-index: 10000; background: #000; cursor: crosshair; user-select: none; }
.chat-crop-img { position: absolute; inset: 0; width: 100vw; height: 100vh; }
.chat-crop-shade { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.chat-crop-rect { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; }
.chat-crop-bar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(28,28,28,.92); color: #fff; font-size: var(--fs-body); line-height: var(--lh-body); cursor: default; }
.chat-crop-bar .btn { background: #fff; color: #1c1c1c; }