/* ============================================================
   User Chat Page - Apple Design Style
   Uses shared tokens from apple-design-system.css
   命名规范：BEM（block__element--modifier），与 admin 端一致
   ============================================================ */

/* ----- Page Reset (CRITICAL: height chain for flex layout) ----- */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ----- Chat Container ----- */
.chat-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-primary);
  overflow: hidden;
}

/* ===========================
   WS STATUS BANNER
   =========================== */

#ws-status-banner {
  display: none;
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-caption1);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  text-align: center;
  flex-shrink: 0;
  z-index: 20;
}

#ws-status-banner[data-type="connecting"] {
  background: #FFF3CD;
  color: #856404;
  border-bottom: 1px solid #FFEEBA;
}

#ws-status-banner[data-type="connected"] {
  background: #D4EDDA;
  color: #155724;
  border-bottom: 1px solid #C3E6CB;
}

#ws-status-banner[data-type="failed"] {
  background: #F8D7DA;
  color: #721C24;
  border-bottom: 1px solid #F5C6CB;
}

/* ===========================
   HEADER - Translucent Material
   =========================== */

.chat-header {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 var(--space-4);
  color: var(--color-label-primary);
  background: var(--material-header);
  -webkit-backdrop-filter: var(--blur-header);
  backdrop-filter: var(--blur-header);
  border-bottom: 1px solid var(--color-separator);
  flex-shrink: 0;
  z-index: 10;
}

.chat-header__logo {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.chat-header__title {
  margin-left: var(--space-3);
  font-family: var(--font-system);
  font-size: var(--text-subheadline);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-label-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Scroll edge fade (content meets sticky header) */
.chat-header::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05), transparent);
  pointer-events: none;
}

/* 窄屏（H5）尺寸覆盖 */
@media (max-width: 768px) {
  .chat-header {
    height: 44px;
    padding: 0 var(--space-3);
  }
  .chat-header__logo {
    width: 30px;
    height: 30px;
  }
  .chat-header__title {
    margin-left: var(--space-2);
    font-size: var(--text-footnote);
    letter-spacing: -0.008em;
  }
}

/* ===========================
   CHAT CONTENT - Message Area
   =========================== */

.chat-content {
  flex: 1;
  min-height: 0;
  padding: var(--space-3) 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--color-bg-primary);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.chat-content::-webkit-scrollbar { width: 3px; }
.chat-content::-webkit-scrollbar-track { background: transparent; }
.chat-content::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: var(--radius-full);
}

/* ===========================
   MESSAGE BUBBLES
   .message--left（客服，头像左）/ .message--right（自己，头像右）
   =========================== */

.message {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin: 2px var(--space-4);
  padding: 2px 0;
}

/* 客服消息：头像在左 */
.message--left {
  flex-direction: row;
}

/* 自己消息：头像在右 */
.message--right {
  flex-direction: row-reverse;
}

/* 头像列 */
.message__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* 消息体（meta + 气泡） */
.message__body {
  max-width: calc(100% - 50px);
  display: flex;
  flex-direction: column;
}

/* 自己消息：meta 行右对齐 */
.message--right .message__meta {
  flex-direction: row-reverse;
}

.message__bubble-wrap {
  max-width: 100%;
}

/* 发送者名称 + 时间 */
.message__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 2px;
  font-size: var(--text-caption2);
  color: var(--color-label-secondary);
  padding: 0 var(--space-1);
}

.message__meta span:first-child {
  font-weight: var(--weight-medium);
}

.message__time {
  font-weight: var(--weight-regular);
  color: var(--color-label-tertiary);
}

/* == 气泡（文字/图片通用背景圆角，方向由 .message--left/--right 控制） == */
.message__bubble {
  position: relative;
}

.message--left .message__bubble {
  background: var(--bubble-other);
  color: var(--bubble-other-text);
  border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg);
}

.message--right .message__bubble {
  background: var(--bubble-self);
  color: var(--bubble-self-text);
  border-radius: var(--radius-lg) 4px var(--radius-lg) var(--radius-lg);
}

/* 文字气泡 */
.message__bubble--text {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-subheadline);
  line-height: var(--leading-normal);
  letter-spacing: -0.008em;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 图片气泡 */
.message__bubble--image {
  padding: var(--space-1);
  overflow: hidden;
}

/* == Copy Button - inside text bubbles == */

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: var(--space-1);
  padding: 0;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-label-tertiary);
  font-size: 12px;
  cursor: pointer;
  vertical-align: middle;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}

/* Desktop: hover message row -> show copy */
.message:hover .copy-btn {
  opacity: 1;
}

/* Touch devices: always show copy button */
@media (hover: none) and (pointer: coarse) {
  .copy-btn {
    opacity: 0.55;
  }
}

.copy-btn:hover {
  color: var(--color-accent);
  background: rgba(0, 122, 255, 0.08);
}

.copy-btn:active {
  transform: scale(0.88);
  color: var(--color-accent-hover);
  background: rgba(0, 122, 255, 0.15);
}

/* Copied feedback state */
.copy-btn.copied {
  opacity: 1;
  color: var(--color-success);
  background: rgba(52, 199, 89, 0.12);
}

/* == 图片元素 == */
.message__img {
  display: block;
  max-width: 220px;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.message__img:hover { opacity: 0.85; }
.message__img:active { opacity: 0.7; }

/* ===========================
   QUICK BUTTONS - Pill Style
   =========================== */

.quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--material-input-bar);
  -webkit-backdrop-filter: var(--blur-input);
  backdrop-filter: var(--blur-input);
  border-top: 1px solid var(--color-separator);
  flex-shrink: 0;
}

.quick-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--space-4);
  background: var(--color-bg-secondary);
  color: var(--color-accent);
  border: 1px solid rgba(0, 122, 255, 0.18);
  border-radius: var(--radius-full);
  font-size: var(--text-caption1);
  font-family: var(--font-system);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-default),
              transform var(--duration-instant) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.quick-btn:hover {
  background: var(--color-accent-subtle);
  box-shadow: var(--shadow-sm);
}
.quick-btn:active {
  transform: scale(0.96);
  background: rgba(0, 122, 255, 0.2);
}

/* ===========================
   INPUT AREA - Translucent
   =========================== */

.chat-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--material-input-bar);
  -webkit-backdrop-filter: var(--blur-input);
  backdrop-filter: var(--blur-input);
  border-top: 1px solid var(--color-separator);
  flex-shrink: 0;
}

/* 窄屏（H5）尺寸覆盖 */
@media (max-width: 768px) {
  .chat-input {
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
  }
}

.chat-input__upload { display: flex; align-items: center; }

.chat-input__btn--image {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--color-accent);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-default),
              transform var(--duration-instant) var(--ease-default);
  -webkit-tap-highlight-color: transparent;
}
.chat-input__btn--image:hover { background: var(--color-accent-subtle); }
.chat-input__btn--image:active {
  transform: scale(0.92);
  background: rgba(0, 122, 255, 0.2);
}

.chat-input__textarea {
  flex: 1;
  min-height: 38px;
  max-height: 82px;
  padding: 8px var(--space-4);
  border: 1px solid var(--color-separator);
  border-radius: 19px;
  background: var(--color-bg-secondary);
  color: var(--color-label-primary);
  font-size: var(--text-subheadline);
  font-family: var(--font-system);
  line-height: 22px;
  letter-spacing: -0.008em;
  outline: none;
  resize: none;
  overflow-y: auto;
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
  -webkit-appearance: none;
}
.chat-input__textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}
.chat-input__textarea::placeholder { color: var(--color-label-tertiary); }

.chat-input__btn--send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-label-on-accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-default),
              transform var(--duration-instant) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
  -webkit-tap-highlight-color: transparent;
}
.chat-input__btn--send:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.35);
}
.chat-input__btn--send:active {
  transform: scale(0.9);
  background: var(--color-accent-pressed);
}

/* ===========================
   ANIMATIONS
   =========================== */

@keyframes messageIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fade {
  animation: messageIn 0.35s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
}

/* ===========================
   RESPONSIVE (mobile)
   =========================== */

@media (max-width: 768px) {
  .message {
    margin: 2px var(--space-2);
  }

  .message__bubble--text {
    font-size: var(--text-footnote);
    padding: var(--space-2) var(--space-3);
  }

  /* Larger touch target on mobile */
  .copy-btn {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .message__img {
    max-width: 160px;
    max-height: 160px;
  }

  .quick-buttons {
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .quick-buttons::-webkit-scrollbar { display: none; }

  .quick-btn {
    flex-shrink: 0;
    padding: 5px var(--space-3);
    font-size: var(--text-caption2);
  }
}