/* ===== Artifact Panel (Phase 3, T4 artifact-substrate) ===== */
/* 드로어 골격(.ax-detail-sidepanel-*)은 ax-work-surface.css를 그대로 재사용한다 — 여기서는
   본문(#artifact-detail-sidepanel-body) 안의 display별 콘텐츠 스타일만 추가한다. 모바일 폴백
   (max-width: 720px)은 ax-work-surface.css의 .ax-detail-sidepanel 브레이크포인트를 그대로
   상속한다. */

.artifact-panel-video {
  width: 100%;
  border-radius: var(--radius-md);
}

.artifact-panel-file,
.artifact-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
}

.artifact-panel-file:hover,
.artifact-panel-link:hover {
  text-decoration: underline;
}

.artifact-panel-markdown {
  font-size: 14px;
  line-height: 1.6;
}

/* ===== 액션 툴바 + 팝오버 (Phase 3, T5 artifact-plugin-action) =====
   .ax-detail-sidepanel-body 다음 형제로 붙어 하단에 고정된다(패널 grid의 암묵 행).
   팝오버는 work-badge.ts의 .work-badge-popover 패턴(로딩/성공/에러/빈 목록 4상태)을
   툴바 로컬 좌표로 미러링한다. */
.ax-detail-sidepanel-actions {
  position: relative;
  border-top: 1px solid var(--border);
  padding: 12px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.artifact-panel-send-btn {
  width: 100%;
}

/* ===== 다른 방에 전달 room picker (Phase 5, T6 bigtionax-chat-item-transfer) =====
   .artifact-panel-actions-popover(플러그인 액션)와 같은 액션바 로컬 좌표(position:relative)를
   쓰지만, 플러그인 팝오버와 혼동하지 않도록 별도 클래스로 분리한다. */
#artifact-detail-sidepanel-actions .item-transfer-picker {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 100%;
  margin-bottom: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
}

#artifact-detail-sidepanel-actions .item-transfer-picker-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 13.5px;
  font-family: inherit;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

#artifact-detail-sidepanel-actions .item-transfer-picker-item:hover {
  background: var(--bg-hover);
}

#artifact-detail-sidepanel-actions .item-transfer-picker-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.artifact-panel-actions-popover {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 100%;
  margin-bottom: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.artifact-panel-actions-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 13.5px;
  font-family: inherit;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.artifact-panel-actions-item:hover {
  background: var(--bg-hover);
}

.artifact-panel-actions-empty {
  padding: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .ax-detail-sidepanel-actions {
    padding: 10px 16px 14px;
  }

  .artifact-panel-actions-popover {
    left: 16px;
    right: 16px;
  }

  #artifact-detail-sidepanel-actions .item-transfer-picker {
    left: 16px;
    right: 16px;
  }

}

/* ===== 파일 미리보기 모드 (room file drawer 재사용) =====
   패널 껍데기(.ax-detail-sidepanel-*)와 열고닫기는 아티팩트 모드와 동일하고, 여기서는
   파일 본문(Markdown / CSV)의 표현만 추가한다. 이미지와 PDF는 공용 미디어 실행기가
   새 창으로 보내므로 이 패널에서 렌더링하지 않는다. */

.artifact-panel-file-state {
  margin: 0;
  padding: 28px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.artifact-panel-file-state[data-kind="error"] { color: var(--status-error); }

/* 메시지 미리보기 모드(고정 근거). 원문을 그대로 보여주는 게 목적이라 마크다운 변환 없이
   pre-wrap 으로만 흘린다 — artifact-panel.ts#openMessage 가 textContent 로 채운다. */
.artifact-panel-message {
  display: grid;
  gap: 8px;
}

.artifact-panel-message-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}

/* 본문은 markdown-body 서식을 그대로 쓴다(말풍선과 동일). pre-wrap 을 주면 안 된다 —
   renderMarkdown 결과는 블록 요소라 줄바꿈이 이중으로 적용된다(marked breaks:true 가 이미 <br>). */
.artifact-panel-message-text {
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.artifact-panel-message-text > :first-child { margin-top: 0; }
.artifact-panel-message-text > :last-child { margin-bottom: 0; }

/* 링크는 눌러서 이동할 수 있는 것으로 보여야 한다. */
.artifact-panel-message-text a {
  color: var(--accent);
  text-decoration: underline;
}

.artifact-panel-csv {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.artifact-panel-csv table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.artifact-panel-csv th,
.artifact-panel-csv td {
  max-width: 260px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artifact-panel-csv th {
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-weight: 650;
}

.artifact-panel-csv-note {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 11px;
}

/* ===== 패널 폭 조절 =====
   ax-work-surface.css가 index.html에서 이 시트보다 뒤에 로드되므로, .ax-detail-sidepanel의
   width(min(520px,100vw))를 이기려면 특이도를 한 단계 올려야 한다(같은 특이도면 순서로 진다).
   업무 상세 패널은 같은 껍데기를 쓰지만 이 범위 밖이라 아티팩트 패널로만 스코프한다. */
.artifact-detail-sidepanel-root {
  --artifact-panel-width: 520px;
}

.ax-detail-sidepanel.artifact-detail-sidepanel {
  width: min(var(--artifact-panel-width), 100vw);
}

.artifact-panel-resizer {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
  margin-left: -7px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}

/* 강조 경계선 — 평상시엔 패널 자신의 border-left가 선 역할을 하므로 투명이다. */
.artifact-panel-resizer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: transparent;
  transition: background 120ms;
}

/* 그립 — 항상 보인다. 투명한 히트 영역만 두면 조절할 수 있다는 걸 알 수 없다. */
.artifact-panel-resizer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 46px;
  margin: -23px 0 0 -3px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
  transition: background 120ms;
}

.artifact-panel-resizer:hover::before,
.artifact-panel-resizer:focus-visible::before,
.artifact-panel-resizer[data-dragging="true"]::before,
.artifact-panel-resizer:hover::after,
.artifact-panel-resizer:focus-visible::after,
.artifact-panel-resizer[data-dragging="true"]::after {
  background: var(--accent);
}

@media (max-width: 720px) {
  /* 모바일 폴백은 전폭이다 — 조절할 폭 자체가 없다. */
  .ax-detail-sidepanel.artifact-detail-sidepanel {
    width: 100vw;
  }

  .artifact-panel-resizer {
    display: none;
  }
}

/* 파일 모드 액션 배타 계약: 아티팩트 액션(플러그인 전송·방 전달)과 다운로드는 동시에 보이면
   안 된다. .ui-btn 이 display:inline-flex 를 author 선언으로 갖고 있어 UA 의 [hidden] 규칙을
   이기므로, hidden 속성만으로는 화면에서 사라지지 않는다 — 프리미티브를 덧칠하지 않고 이
   패널 스코프에서만 복원한다(business-documents.css 선례).
   file: id 로는 /api/artifacts 액션이 성립하지 않으므로 이건 표시 문제가 아니라 오동작 방지다. */
#artifact-detail-sidepanel-actions > [hidden] {
  display: none;
}