/* ==========================================================================
   charts.css —— 图表与可视化相关样式。
   覆盖：.c-chart（折线/柱状/环形/漏斗/雷达）、共享 tooltip、图例、迷你线、
        地图底图容器、元宇宙展厅伪 3D、IM 沟通窗口布局、手写签名画布。
   ========================================================================== */

/* ---------------- 图表容器 ---------------- */
.c-chart {
  display: block;
  width: 100%;
  background-color: var(--white);
  border-radius: 8px;
  overflow: visible;
}

.c-chart text { user-select: none; }

.c-chart [data-series-index].is-hidden { display: none; }

.c-chart [data-tip] { cursor: pointer; }

.c-chart-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.c-chart-row .c-chart-donut { flex: 1; min-width: 280px; max-width: 560px; }

/* hover 高亮（柱状/漏斗共用） */
.c-chart rect[data-tip]:hover,
.c-chart path[data-tip]:hover {
  opacity: 1;
  filter: brightness(1.05);
}

.c-funnel-item { transition: opacity 0.2s ease; }

/* ---------------- 图例 ---------------- */
.c-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.c-chart-legend-col { flex-direction: column; gap: 8px; margin-bottom: 0; }

.c-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-dark);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.c-chart-legend-item i {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
  flex: none;
}

button.c-chart-legend-item:hover { color: var(--orange); }
button.c-chart-legend-item.is-off { color: var(--gray-light); text-decoration: line-through; }
button.c-chart-legend-item.is-off i { opacity: 0.35; }

/* ---------------- 共享 tooltip ---------------- */
.c-chart-tip {
  position: fixed;
  z-index: 10002;
  max-width: 260px;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: rgba(26, 26, 26, 0.9);
  color: var(--white);
  font-size: 12px;
  line-height: 1.6;
  pointer-events: none;
  box-shadow: var(--shadow-deep);
}

/* ---------------- 迷你折线 ---------------- */
.c-sparkline { display: block; vertical-align: middle; }

/* ---------------- 地图底图容器（features.js 用） ---------------- */
.c-map {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: #F5F7FA;
  box-shadow: var(--shadow);
}

.c-map .g-map { display: block; width: 100%; height: auto; }

.c-map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  transition: transform 0.2s ease;
}

.c-map-pin:hover { transform: translate(-50%, -100%) scale(1.15); }
.c-map-pin.is-active { transform: translate(-50%, -100%) scale(1.25); }

.c-map-pin svg { display: block; }

.c-map-pin-label {
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: var(--blue-deep);
  color: var(--white);
  font-size: 11px;
}

/* ---------------- 元宇宙展厅伪 3D（meta.js 用） ---------------- */
.c-hall {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  background-color: var(--blue-deep);
}

.c-hall .g-hall { display: block; width: 100%; height: auto; }

.c-hall-hotspot {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background-color: var(--orange);
  border: 2px solid var(--white);
  cursor: pointer;
  animation: hallPulse 2s ease-in-out infinite;
}

.c-hall-hotspot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 122, 47, 0.6);
  animation: hallRipple 2s ease-out infinite;
}

.c-hall-hotspot-label {
  position: absolute;
  left: 28px;
  top: 2px;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: rgba(10, 36, 99, 0.85);
  color: var(--white);
  font-size: 11px;
}

@keyframes hallPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes hallRipple {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------------- IM 沟通窗口（chat.js 用） ---------------- */
.c-modal-chat .c-modal-body { padding: 0; }

.c-chat { display: flex; height: 460px; }

.c-chat-sessions {
  width: 220px;
  flex: none;
  border-right: 1px solid var(--silver);
  overflow-y: auto;
  background-color: #F8F9FA;
}

.c-chat-session {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  border-bottom: 1px solid #F0F2F5;
  transition: background-color 0.2s ease;
}

.c-chat-session:hover { background-color: #EEF1F6; }
.c-chat-session.is-active { background-color: var(--white); }

.c-chat-session-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c-chat-session-name { font-size: 13px; color: var(--blue-deep); font-weight: 600; }

.c-chat-session-last {
  font-size: 12px;
  color: var(--gray-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-chat-session-at { font-size: 11px; color: var(--gray-light); flex: none; }

.c-chat-unread {
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background-color: #ff4d4f;
  color: var(--white);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.c-chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.c-chat-stream {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: #F5F7FA;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c-chat-empty { margin: auto; font-size: 13px; color: var(--gray-light); }

.c-chat-msg { display: flex; gap: 8px; align-items: flex-start; }
.c-chat-msg.is-mine { flex-direction: row-reverse; }

.c-chat-avatar { flex: none; }

.c-chat-bubble {
  max-width: 68%;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: var(--white);
  box-shadow: var(--shadow);
}

.c-chat-msg.is-mine .c-chat-bubble { background-color: var(--blue-light); }
.c-chat-msg.is-mine .c-chat-text { color: var(--white); }

.c-chat-text { font-size: 13px; color: var(--gray-dark); line-height: 1.6; word-break: break-word; }
.c-chat-time { font-size: 11px; color: var(--gray-light); margin-top: 4px; text-align: right; }
.c-chat-msg.is-mine .c-chat-time { color: rgba(255, 255, 255, 0.8); }

.c-chat-composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--silver);
  background-color: var(--white);
}

.c-chat-input {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: 8px 10px;
  border: 1px solid var(--silver);
  border-radius: 4px;
  resize: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.6;
}

.c-chat-input:focus { border-color: var(--orange); }

/* ---------------- 手写签名画布（features.js 用） ---------------- */
.c-signature {
  position: relative;
  width: 100%;
  border: 1px dashed var(--silver);
  border-radius: 8px;
  background-color: var(--white);
  overflow: hidden;
}

.c-signature canvas {
  display: block;
  width: 100%;
  height: 220px;
  touch-action: none;
  cursor: crosshair;
}

.c-signature-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-light);
  font-size: 13px;
  pointer-events: none;
}

.c-signature.is-drawn .c-signature-hint { display: none; }

.c-signature-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- 图表区在首页之外的容器留白 ---------- */
.c-chart-panel {
  background-color: var(--white);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 24px;
}