/* ===== Avatar Grid — Phase 4 멀티 아바타 패널 ===== */

:root {
  --agent-hana-color: var(--accent-pink);
  --agent-hana-color-glow: rgba(255, 107, 138, 0.4);
  --agent-sori-color: var(--agent-sori-name);
  --agent-sori-color-glow: rgba(255, 159, 67, 0.4);
  --agent-seoyeon-color: var(--agent-seoyeon-name);
  --agent-seoyeon-color-glow: rgba(108, 92, 231, 0.4);
  --agent-jihyun-color: var(--agent-jihyun-name);
  --agent-jihyun-color-glow: rgba(0, 184, 148, 0.4);
}

/* ===== Avatar Panel (좌우) ===== */
.avatar-panel {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  transition: width 0.4s ease, margin 0.4s ease, opacity 0.35s ease;
}

/* 좌측 패널: 항상 300px (하나가 항상 있으므로) */
.avatar-panel--left {
  width: 300px;
  border-right: 1px solid var(--border);
}

/* 우측 패널: 활성 에이전트가 있을 때만 펼침 */
.avatar-panel--right {
  width: 0;
  border-left: none;
}

.avatar-panel--right.avatar-panel--has-active {
  width: 300px;
  border-left: 1px solid var(--border);
}

/* ===== Avatar Cell (상하 50%) ===== */
.avatar-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: flex 0.4s ease;
}

/* 하나 셀 — 항상 활성 */
.avatar-cell--hana .avatar-cell-bg {
  background: linear-gradient(180deg, #F8FAFF 0%, #E8EDFF 100%);
}

/* 에이전트별 배경 (활성 시에만 표시) */
.avatar-cell[data-agent="sori"] .avatar-cell-bg {
  background: var(--agent-sori-bg);
}
.avatar-cell[data-agent="seoyeon"] .avatar-cell-bg {
  background: var(--agent-seoyeon-bg);
}
.avatar-cell[data-agent="jihyun"] .avatar-cell-bg {
  background: var(--agent-jihyun-bg);
}

/* 비참여 셀: 오버레이/캔버스 숨김 (배경은 유지) */
.avatar-cell:not(.avatar-cell--hana):not(.avatar-cell--active) .avatar-cell-overlay,
.avatar-cell:not(.avatar-cell--hana):not(.avatar-cell--active) .avatar-cell-canvas {
  opacity: 0;
  pointer-events: none;
}

/* 활성 셀 */
.avatar-cell--active .avatar-cell-bg,
.avatar-cell--active .avatar-cell-overlay,
.avatar-cell--active .avatar-cell-canvas {
  opacity: 1;
}

/* ===== Cell 내부 요소 ===== */
.avatar-cell-bg {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s ease, background 0.4s ease;
}

.avatar-cell-canvas {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.avatar-cell-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 16px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.4));
  z-index: 2;
  transition: opacity 0.3s ease;
}

.avatar-cell-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-on-card);
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.avatar-cell-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.9);
  margin-top: 2px;
}

/* ===== 화자 하이라이트 (4.3) ===== */
.avatar-cell--talking {
  border: 3px solid var(--agent-color);
  box-shadow: 0 0 12px var(--agent-color-glow);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.avatar-cell[data-agent="hana"].avatar-cell--talking {
  --agent-color: var(--agent-hana-color);
  --agent-color-glow: var(--agent-hana-color-glow);
}
.avatar-cell[data-agent="sori"].avatar-cell--talking {
  --agent-color: var(--agent-sori-color);
  --agent-color-glow: var(--agent-sori-color-glow);
}
.avatar-cell[data-agent="seoyeon"].avatar-cell--talking {
  --agent-color: var(--agent-seoyeon-color);
  --agent-color-glow: var(--agent-seoyeon-color-glow);
}
.avatar-cell[data-agent="jihyun"].avatar-cell--talking {
  --agent-color: var(--agent-jihyun-color);
  --agent-color-glow: var(--agent-jihyun-color-glow);
}

/* 하이라이트 해제 시 부드러운 전환 */
.avatar-cell:not(.avatar-cell--talking) {
  border: 3px solid transparent;
  box-shadow: none;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

/* ===== 등장/퇴장 애니메이션 (4.2) ===== */
/* 기본(우측 슬롯): 슬라이드 + 페이드 */
.avatar-cell--entering {
  animation: avatarCellSlideIn 0.5s ease-out forwards;
}
.avatar-cell--exiting {
  animation: avatarCellSlideOut 0.5s ease-out forwards;
}

/* 좌상 슬롯: 페이드만 */
.avatar-cell--entering.avatar-cell--left-top {
  animation: avatarCellFadeIn 0.5s ease-out forwards;
}
.avatar-cell--exiting.avatar-cell--left-top {
  animation: avatarCellFadeOut 0.5s ease-out forwards;
}

@keyframes avatarCellSlideIn {
  from { opacity: 0; transform: translateX(-100%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes avatarCellSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}
@keyframes avatarCellFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes avatarCellFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ===== 뷰 전환 시 패널 숨김 ===== */
.avatar-panel--hidden {
  display: none;
}

/* ===== 아바타 토글 OFF — 데스크탑 슬라이드+페이드 ===== */
body.avatar-off .avatar-panel--left {
  margin-left: -300px;
  opacity: 0;
  pointer-events: none;
  border-right: none;
}

body.avatar-off .avatar-panel--right.avatar-panel--has-active {
  margin-right: -300px;
  opacity: 0;
  pointer-events: none;
  border-left: none !important;
}

/* ===== 반응형: 태블릿 (4.6) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .avatar-panel--left {
    width: 200px;
  }

  .avatar-panel--right.avatar-panel--has-active {
    width: 200px;
  }

  /* 태블릿 아바타 토글 OFF */
  body.avatar-off .avatar-panel--left {
    margin-left: -200px;
  }

  body.avatar-off .avatar-panel--right.avatar-panel--has-active {
    margin-right: -200px;
  }

  .avatar-cell-name {
    font-size: 16px;
  }

  .avatar-cell-overlay {
    padding: 20px 12px 12px;
  }
}

/* ===== 반응형: 모바일 (4.7) ===== */
@media (max-width: 767px) {
  /* 데스크톱 좌우 패널 숨김 */
  .avatar-panel {
    display: none;
  }

  /* 모바일 아바타 스트립: 상단 고정, 가로 분할 */
  .mobile-avatar-strip {
    display: flex;
    flex-direction: row;
    position: fixed;
    top: 48px; /* 모바일 헤더 아래 */
    left: 0;
    right: 0;
    height: 28svh;
    min-height: 160px;
    max-height: 240px;
    z-index: 20;
    overflow: hidden;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    box-shadow: var(--shadow-card);
    transition: transform 0.4s ease, opacity 0.35s ease;
  }

  /* 스트립 내 셀: flex로 균등 분할, 부드러운 전환 */
  .mobile-avatar-strip .avatar-cell {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: flex 0.4s ease, opacity 0.3s ease;
    border-right: 1px solid rgba(255,255,255,0.15);
  }

  .mobile-avatar-strip .avatar-cell:last-child {
    border-right: none;
  }

  /* 등장: flex 0 → 1 전환 */
  .mobile-avatar-strip .avatar-cell.mobile-cell--entering {
    flex: 0.001;
    animation: mobileStripGrow 0.4s ease forwards;
  }

  /* 퇴장: flex 1 → 0 전환 */
  .mobile-avatar-strip .avatar-cell.mobile-cell--exiting {
    animation: mobileStripShrink 0.4s ease forwards;
  }

  @keyframes mobileStripGrow {
    from { flex: 0.001; opacity: 0; }
    to { flex: 1; opacity: 1; }
  }

  @keyframes mobileStripShrink {
    from { flex: 1; opacity: 1; }
    to { flex: 0.001; opacity: 0; }
  }

  /* 하나 셀은 항상 활성 — 모바일 스트립에서도 */
  .mobile-avatar-strip .avatar-cell--hana .avatar-cell-bg,
  .mobile-avatar-strip .avatar-cell--hana .avatar-cell-overlay,
  .mobile-avatar-strip .avatar-cell--hana .avatar-cell-canvas {
    opacity: 1;
  }

  /* 모바일 셀 오버레이 축소 */
  .mobile-avatar-strip .avatar-cell-overlay {
    padding: 16px 8px 8px;
  }

  .mobile-avatar-strip .avatar-cell-name {
    font-size: 15px;
  }

  .mobile-avatar-strip .avatar-cell-status {
    font-size: 10px;
  }

  /* 스트립 숨김 (토글 OFF 또는 비채팅 뷰) */
  .mobile-avatar-strip.avatar-strip--hidden {
    display: none;
  }

  /* 아바타 토글 OFF: 스트립 위로 슬라이드+페이드 */
  body.avatar-off .mobile-avatar-strip {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }

  /* 아바타 토글 OFF: 헤더 아바타 그레이스케일 + 반투명 */
  body.avatar-off .mobile-header-avatar {
    filter: grayscale(1);
    opacity: 0.5;
    transition: filter 0.3s ease, opacity 0.3s ease;
  }

  .mobile-header-avatar {
    cursor: pointer;
    transition: filter 0.3s ease, opacity 0.3s ease;
  }
}

/* 데스크톱에서 모바일 스트립 숨김 */
@media (min-width: 768px) {
  .mobile-avatar-strip {
    display: none;
  }
}