/*!
 * PiG Agent Widget — Reduced CSS for current v2 templates/pages only
 */

/* (전역 box-sizing `*` 룰은 호스트 페이지를 침범하므로 제거.
    위젯 root 하위 box-sizing 은 :root 블록 아래의 scoped 룰에서 처리한다.) */

/* ============================================================
   부모 페이지 격리 (CSS isolation)
   - SDK 위젯은 호스트 페이지의 CSS / 색상 / 배경 / 폰트에 의존하지 않는다.
   - rgba(...,<1)·backdrop-filter 같이 부모를 비치는 효과는 모두 제거.
   - 위젯 root 두 요소(#chatbotPanelWidget, #btnSupportFloating)에 명시 reset 적용.
   - 글래스 무드 → 솔리드 카드. v2 원본의 유리 효과는 의도적으로 포기.
   ============================================================ */
#chatbotPanelWidget,
#btnSupportFloating {
  /* === 부모 침투 차단 reset (명시 속성만 — all:revert 는 position:fixed 도 날려서 금지) === */
  box-sizing: border-box;
  color: #1d1d1f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  font-style: normal;
  direction: ltr;
  word-break: normal;
  white-space: normal;

  /* === 색상 시스템 (모두 opaque) === */
  --pig-color-text: #1d1d1f;
  --pig-color-subtext: #5a5a60;
  --pig-color-bg: #ffffff;
  /* 패널 베이스: 솔리드 화이트 */
  --pig-color-border: #e3e3e7;
  --pig-color-bg-content: #ffffff;
  --pig-color-bg-lighter: #fafafb;
  --pig-color-bg-subtle: #f5f5f7;
  --pig-color-hover-bg: #f0f0f3;
  --pig-color-surface-selected: #ebeaf7;
  --pig-scrollbar-thumb: #c8c8cd;
  --pig-scrollbar-thumb-hover: #a8a8af;
  --pig-scrollbar-track: transparent;
  --pig-color-primary: #1d1d1f;
  --pig-color-primary-rgb: 29, 29, 31;
  --pig-color-primary-contrast: #ffffff;
  --pig-color-text-muted: #8a8a90;

  /* === Glass 변수 (호환용 — 모두 솔리드 fallback) === */
  --pig-glass-surface: #ffffff;
  --pig-glass-surface-strong: #ffffff;
  --pig-glass-border: #e3e3e7;
  --pig-glass-border-subtle: #ececef;
  --pig-glass-highlight: #ffffff;
  --pig-glass-shadow: 0 30px 80px rgba(29, 29, 31, 0.16), 0 8px 24px rgba(29, 29, 31, 0.08);
  --pig-channel-summary-shadow: 0 10px 18px rgba(29, 29, 31, 0.03);
  --pig-glass-filter: none;
  /* backdrop-filter 비활성화 */
  --pig-focus-ring: 0 0 0 3px rgba(139, 184, 255, 0.35);
  --pig-panel-glass-bg: #ffffff;
  /* 단색으로 단순화 (부모 안 비침) */
  --pig-titlebar-bg: #fafafb;
  /* 솔리드 타이틀바 */
  --pig-main-bg: #ffffff;
  /* 솔리드 메인 영역 */

  /* === 레이아웃 변수 === */
  --pig-channel-summary-max-height: min(var(--pig-channel-summary-height, 420px), 40vh);
  --pig-send-button-bg: var(--pig-color-primary);
  --pig-send-button-color: #ffffff;
  --pig-send-button-hover-bg: var(--pig-color-primary);
  --pig-send-button-size: 32px;
  --pig-send-button-icon-size: 18px;
  --pig-chat-textarea-min-height: calc(1rem * 1.7 * 2);
  --pig-chat-textarea-max-height: calc(1rem * 1.7 * 8);
  --pig-figure-atlas: url('/v1/pig_figure.png');
  --pig-thumb-atlas: url('/v1/pig_thumb.png');
}

/* root 내부 모든 요소 box-sizing/색/폰트 재상속 보장
   (`all: revert`가 root에만 걸리고 자식은 다시 부모 cascade를 받기 때문) */
#chatbotPanelWidget *,
#chatbotPanelWidget *::before,
#chatbotPanelWidget *::after,
#btnSupportFloating *,
#btnSupportFloating *::before,
#btnSupportFloating *::after {
  box-sizing: border-box;
}

.chatbot-panel .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;
}

#chatbotPanelWidget .agent-sidebar-section,
#chatbotPanelWidget .channel-summary.is-expanded,
#chatbotPanelWidget .chatbot-scroll-container,
#chatbotPanelWidget .chatbot-textarea,
#chatbotPanelWidget .view-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--pig-scrollbar-thumb) var(--pig-scrollbar-track);
  overscroll-behavior: contain;
}

#chatbotPanelWidget .agent-sidebar-section::-webkit-scrollbar,
#chatbotPanelWidget .channel-summary.is-expanded::-webkit-scrollbar,
#chatbotPanelWidget .chatbot-scroll-container::-webkit-scrollbar,
#chatbotPanelWidget .chatbot-textarea::-webkit-scrollbar,
#chatbotPanelWidget .view-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#chatbotPanelWidget .agent-sidebar-section::-webkit-scrollbar-track,
#chatbotPanelWidget .channel-summary.is-expanded::-webkit-scrollbar-track,
#chatbotPanelWidget .chatbot-scroll-container::-webkit-scrollbar-track,
#chatbotPanelWidget .chatbot-textarea::-webkit-scrollbar-track,
#chatbotPanelWidget .view-scroll::-webkit-scrollbar-track {
  background: var(--pig-scrollbar-track);
}

#chatbotPanelWidget .agent-sidebar-section::-webkit-scrollbar-thumb,
#chatbotPanelWidget .channel-summary.is-expanded::-webkit-scrollbar-thumb,
#chatbotPanelWidget .chatbot-scroll-container::-webkit-scrollbar-thumb,
#chatbotPanelWidget .chatbot-textarea::-webkit-scrollbar-thumb,
#chatbotPanelWidget .view-scroll::-webkit-scrollbar-thumb {
  background-color: var(--pig-scrollbar-thumb);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

#chatbotPanelWidget .agent-sidebar-section::-webkit-scrollbar-thumb:hover,
#chatbotPanelWidget .channel-summary.is-expanded::-webkit-scrollbar-thumb:hover,
#chatbotPanelWidget .chatbot-scroll-container::-webkit-scrollbar-thumb:hover,
#chatbotPanelWidget .chatbot-textarea::-webkit-scrollbar-thumb:hover,
#chatbotPanelWidget .view-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--pig-scrollbar-thumb-hover);
}

#chatbotPanelWidget .agent-sidebar-section::-webkit-scrollbar-corner,
#chatbotPanelWidget .channel-summary.is-expanded::-webkit-scrollbar-corner,
#chatbotPanelWidget .chatbot-scroll-container::-webkit-scrollbar-corner,
#chatbotPanelWidget .chatbot-textarea::-webkit-scrollbar-corner,
#chatbotPanelWidget .view-scroll::-webkit-scrollbar-corner {
  background: transparent;
}

@keyframes pig-agent-breath {

  0%,
  100% {
    transform: translateY(var(--breath-y-0, 0)) scale(var(--breath-scale-0, 1));
  }

  50% {
    transform: translateY(var(--breath-y-50, -3px)) scale(var(--breath-scale-50, 1.03));
  }
}

@keyframes pig-feedback-toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

#chatbotPanelWidget .btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pig-send-button-size);
  height: var(--pig-send-button-size);
  flex: 0 0 var(--pig-send-button-size);
  border: none;
  border-radius: 50%;
  padding: 0;
  outline: none;
  box-shadow: none;
  font: inherit;
  background-color: var(--pig-send-button-bg);
  color: var(--pig-send-button-color);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

#chatbotPanelWidget .btn-submit:hover,
#chatbotPanelWidget .btn-submit:focus {
  background-color: var(--pig-send-button-hover-bg);
  transform: translateY(-1px);
}

#chatbotPanelWidget .btn-submit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

.agent-sidebar-menu {
  padding-top: 8px;
}


#chatbotPanelWidget .btn-submit svg {
  width: var(--pig-send-button-icon-size);
  height: var(--pig-send-button-icon-size);
}

.chatbot-panel {
  display: flex;
  flex-direction: column;
}

.chatbot-panel.widget {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(1400px, calc(100vw - 48px));
  height: min(880px, calc(100vh - 48px));
  min-width: 320px;
  min-height: 620px;
  background: var(--pig-panel-glass-bg);
  color: var(--pig-color-text);
  border: 1px solid var(--pig-glass-border);
  border-radius: 16px;
  box-shadow: var(--pig-glass-shadow);
  backdrop-filter: var(--pig-glass-filter);
  -webkit-backdrop-filter: var(--pig-glass-filter);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 12px));
  transition: opacity 0.24s ease, transform 0.24s ease;
  z-index: 9999;
}

.chatbot-panel.widget.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.chatbot-panel.widget.pignito-window-panel {
  top: 80px;
  left: 80px;
  width: min(1180px, calc(100vw - 160px));
  height: min(760px, calc(100vh - 120px));
  min-width: min(800px, calc(100vw - 24px));
  min-height: 420px;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 0.18s ease, box-shadow 0.18s ease;
}

.chatbot-panel.widget.pignito-window-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.chatbot-panel.widget.pignito-window-panel.is-window-dragging,
.chatbot-panel.widget.pignito-window-panel.is-window-resizing {
  user-select: none;
  transition: none;
}

/* floating/dom 패널 드래그/리사이즈 중에도 transform/opacity transition 차단.
   안 그러면 inline transform:none 으로 바뀌는 순간 translate(-50%,-50%) → none 이
   0.24s 동안 보간되어 패널이 좌상단으로 미끄러져 갔다가 오는 현상이 발생함. */
.chatbot-panel.widget.is-window-dragging,
.chatbot-panel.widget.is-window-resizing {
  user-select: none;
  transition: none;
}

.chatbot-panel.widget.pignito-window-panel.is-window-fullscreen {
  box-sizing: border-box;
  border-radius: 0;
}

body.pignito-window-fullscreen-lock {
  overflow: hidden !important;
}

.chatbot-panel .pignito-window-titlebar {
  height: 45px;
  flex: 0 0 45px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 11px 0 11px;
  background: var(--pig-titlebar-bg);
  border-bottom: 1px solid var(--pig-glass-border-subtle);
  cursor: move;
  position: relative;
  z-index: 3;
}

.chatbot-panel .pignito-window-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pig-color-subtext);
  font-size: 14px;
  font-weight: 600;
}

.chatbot-panel .pignito-window-close {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.js-close-panel {
  margin-left: 8px;
}

.chatbot-panel .pignito-window-close-icon,
.chatbot-panel .pignito-window-close-icon.icon {
  width: 20px;
  height: 20px;
  display: block;
  color: var(--pig-color-subtext);
}

.chatbot-panel .pignito-window-sidebar-toggle .pignito-window-close-icon,
.chatbot-panel .pignito-window-sidebar-toggle .pignito-window-close-icon.icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

.chatbot-panel .pignito-window-close:hover,
.chatbot-panel .pignito-window-close:focus-visible {
  background: rgba(var(--pig-color-primary-rgb), 0.08);
  color: var(--pig-color-text);
  opacity: 1;
}

.chatbot-panel .pignito-window-resize-handle {
  position: absolute;
  z-index: 4;
  background: transparent;
}

.chatbot-panel.widget.pignito-window-panel.is-window-fullscreen .pignito-window-titlebar {
  cursor: default;
}

.chatbot-panel.widget.pignito-window-panel.is-window-fullscreen .pignito-window-resize-handle {
  display: none;
}

.chatbot-panel .pignito-window-resize-handle.is-n {
  top: 0;
  left: 12px;
  right: 12px;
  height: 8px;
  cursor: ns-resize;
}

.chatbot-panel .pignito-window-resize-handle.is-s {
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 10px;
  cursor: ns-resize;
}

.chatbot-panel .pignito-window-resize-handle.is-e {
  top: 12px;
  right: 0;
  bottom: 12px;
  width: 10px;
  cursor: ew-resize;
}

.chatbot-panel .pignito-window-resize-handle.is-w {
  top: 12px;
  left: 0;
  bottom: 12px;
  width: 10px;
  cursor: ew-resize;
}

.chatbot-panel .pignito-window-resize-handle.is-ne,
.chatbot-panel .pignito-window-resize-handle.is-nw,
.chatbot-panel .pignito-window-resize-handle.is-se,
.chatbot-panel .pignito-window-resize-handle.is-sw {
  width: 16px;
  height: 16px;
}

.chatbot-panel .pignito-window-resize-handle.is-ne {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}

.chatbot-panel .pignito-window-resize-handle.is-nw {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.chatbot-panel .pignito-window-resize-handle.is-se {
  right: 0;
  bottom: 0;
  cursor: nwse-resize;
}

/* floating 패널(window 모드 아님)의 우하단 핸들은 챗봇 모달과 동일한
   3x3 도트 패턴으로 시각화. .pignito-window-panel 은 8방향 모두 grab 영역이라
   투명 유지. */
.chatbot-panel.widget:not(.pignito-window-panel) .pignito-window-resize-handle.is-se {
  z-index: 5;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.chatbot-panel.widget:not(.pignito-window-panel) .pignito-window-resize-handle.is-se::before {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 10px;
  height: 10px;
  background-image:
    radial-gradient(circle at 2px 2px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 6px 2px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 2px 6px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 10px 2px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 6px 6px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 2px 10px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 10px 6px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 6px 10px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 10px 10px, var(--pig-color-subtext) 1px, transparent 1px);
  background-size: 12px 12px;
}

.chatbot-panel.widget:not(.pignito-window-panel) .pignito-window-resize-handle.is-se:hover {
  opacity: 1;
}

.chatbot-panel .pignito-window-resize-handle.is-sw {
  left: 0;
  bottom: 0;
  cursor: nesw-resize;
}

.chatbot-panel.widget::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--pig-glass-highlight);
  pointer-events: none;
  z-index: 0;
}

.chatbot-panel .chatbot-workspace {
  flex: 1 1 auto;
  height: auto;
  display: flex;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.chatbot-panel .agent-sidebar {
  width: 290px;
  flex: 0 0 290px;
  border-right: 1px solid var(--pig-glass-border-subtle);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.58);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: width 0.22s ease, flex-basis 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.chatbot-panel .agent-sidebar>* {
  position: relative;
  z-index: 1;
}

.chatbot-panel .sidebar-conts {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 0px 8px 0;
}

.chatbot-panel .agent-primary-action {
  width: 100%;
  border-radius: 6px;
  padding: 8px 12px 8px 11px;
  color: var(--pig-color-text);
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  border: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chatbot-panel .agent-primary-action:hover {
  background: rgba(var(--pig-color-primary-rgb), 0.08);
  color: var(--pig-color-text);
}

.chatbot-panel .agent-primary-action.active,
.chatbot-panel .agent-chat-group.is-active .agent-chat-group-row {
  color: var(--pig-color-primary);
  font-weight: 600;
}

.chatbot-panel .agent-primary-action span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbot-panel .agent-action-icon,
.chatbot-panel .agent-action-icon .icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  color: var(--pig-color-subtext);
}

.chatbot-panel .agent-sidebar-section {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.chatbot-panel .agent-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chatbot-panel .agent-chat-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.chatbot-panel .agent-chat-group-row-label {
  min-width: 0;
  flex: 1;
  padding-right: 32px;
}

.chatbot-panel .agent-chat-group-row-label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbot-panel .agent-chat-session-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: max-height 0.24s ease, opacity 0.18s ease, transform 0.24s ease;
}

.chatbot-panel .agent-chat-session-list[hidden] {
  display: none;
}

.chatbot-panel .agent-chat-group.is-expanded .agent-chat-session-list {
  max-height: 520px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  padding-top: 2px;
}

.chatbot-panel .agent-chat-empty {
  display: flex;
  align-items: center;
  padding: 0px 8px 10px 36px;
  color: var(--pig-color-subtext);
  font-size: 0.85rem;
  opacity: 0.55;
}

.chatbot-panel .agent-chat-session-wrap {
  position: relative;
}

.chatbot-panel .agent-chat-session {
  position: relative;
  width: 100%;
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pig-color-subtext);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px 8px 36px;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.chatbot-panel.is-sidebar-collapsed .agent-sidebar {
  width: 0;
  flex-basis: 0;
  border-right: 0;
  box-shadow: none;
  visibility: hidden;
  pointer-events: none;
}

.chatbot-panel .agent-session-pin-btn {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8f8f95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.16s ease, background-color 0.16s ease, color 0.16s ease;
  z-index: 1;
}

.chatbot-panel .agent-chat-session:hover>.agent-session-pin-btn,
.chatbot-panel .agent-chat-session:focus-visible>.agent-session-pin-btn,
.chatbot-panel .agent-session-pin-btn.is-pinned {
  opacity: 1;
  pointer-events: auto;
}

.chatbot-panel .agent-session-pin-btn:hover,
.chatbot-panel .agent-session-pin-btn:focus-visible {
  color: var(--pig-color-text);
}

.chatbot-panel .agent-session-pin-icon,
.chatbot-panel .agent-session-pin-icon .icon {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chatbot-panel .agent-chat-session:hover,
.chatbot-panel .agent-chat-session.active {
  background: rgba(var(--pig-color-primary-rgb), 0.08);
  color: var(--pig-color-text);
}

.chatbot-panel .agent-chat-session-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbot-panel .agent-chat-session-time {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--pig-color-subtext);
  font-size: 0.78rem;
  line-height: 1;
  opacity: 0.72;
  white-space: nowrap;
}

.chatbot-panel .agent-chat-session:hover .agent-chat-session-time,
.chatbot-panel .agent-chat-session.active .agent-chat-session-time {
  color: var(--pig-color-subtext);
}

.chatbot-panel .chatbot-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--pig-main-bg);
}

.chatbot-panel .chatbot-main-view {
  display: none;
  flex: 1;
  min-height: 0;
}

.chatbot-panel .chatbot-main-view.is-active {
  display: flex;
  flex-direction: column;
}

.chatbot-panel .chatbot-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.chatbot-panel .chatbot-page.is-intro:not(.has-selected-channel) .view-header {
  visibility: hidden;
}

.chatbot-panel .channel-summary {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 20px;
  pointer-events: none;
  transform: translateY(-6px);
  transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.28s ease, transform 0.28s ease;
}

.chatbot-panel .channel-summary.is-expanded {
  max-height: var(--pig-channel-summary-max-height);
  opacity: 1;
  overflow-y: auto;
  padding: 2px 22px 14px;
  border-bottom: 1px solid var(--pig-glass-border-subtle);
  box-shadow: var(--pig-channel-summary-shadow);
  pointer-events: auto;
  transform: translateY(0);
}

.chatbot-panel .channel-summary[hidden] {
  display: none;
}

.chatbot-panel .channel-summary-description {
  font-size: 14px;
  color: var(--pig-color-subtext);
  line-height: 1.5;
}

.chatbot-panel .channel-summary-description[hidden] {
  display: none;
}

.chatbot-panel .channel-summary-meta {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  column-gap: 14px;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.chatbot-panel .channel-summary-meta[hidden] {
  display: none;
}

.chatbot-panel .channel-summary-meta-row {
  display: contents;
}

.chatbot-panel .channel-summary-meta-label {
  color: var(--pig-color-subtext);
  white-space: nowrap;
}


.chatbot-panel .channel-summary-meta-value {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .chatbot-panel .channel-summary-meta {
    grid-template-columns: auto 1fr;
  }
}

.chatbot-panel .channel-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chatbot-panel .channel-summary-chips:empty {
  display: none;
}

.chatbot-panel .channel-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--pig-color-text);
  background: var(--pig-color-bg-content);
  border: 1px solid var(--pig-color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  white-space: nowrap;
  max-width: 100%;
}

.chatbot-panel .channel-summary-chip:hover {
  border-color: var(--pig-color-primary, #1a73e8);
  background: var(--pig-color-primary-soft, #f0f6ff);
}

.chatbot-panel .channel-summary-chip:focus-visible {
  outline: none;
  border-color: var(--pig-color-primary);
  box-shadow: var(--pig-focus-ring);
}

.chatbot-panel .channel-summary-chip:active {
  transform: translateY(1px);
}

.chatbot-panel .channel-summary-chip-icon {
  font-size: 10px;
  color: var(--pig-color-primary, #1a73e8);
  flex-shrink: 0;
}

.chatbot-panel .channel-summary-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.chatbot-panel .chatbot-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chatbot-panel .chatbot-scroll-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 22px 22px 18px;
  box-sizing: border-box;
}

.chatbot-panel .chatbot-messages {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  box-sizing: border-box;
  flex-grow: 1;
}

.chatbot-panel .chatbot-page.is-intro .chatbot-messages {
  justify-content: center;
  align-items: center;
}

.chatbot-panel .chatbot-page.is-intro .chatbot-scroll-container {
  padding: 22px 34px 42px;
}

.chatbot-panel .welcome-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
  min-height: 100%;
  align-items: stretch;
  justify-content: center;
  padding: 4px 0 0;
}

.chatbot-panel .chatbot-page.is-intro .welcome-content {
  max-width: 1200px;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 0;
  margin-top: -30px;
}

.chatbot-panel .empty-state-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  min-height: 100%;
  gap: 18px;
}

.chatbot-panel .chatbot-page.is-intro .empty-state-view {
  flex: 0 0 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.chatbot-panel .chatbot-intro-heading {
  width: 100%;
  text-align: center;
}

.chatbot-panel .chatbot-intro-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 500;
}

.chatbot-panel .chatbot-intro-description {
  margin: 8px 0 0;
  color: var(--pig-color-subtext);
  font-size: 0.95rem;
  line-height: 1.5;
}


.chatbot-panel .chatbot-intro-input-slot {
  display: contents;
}

.chatbot-panel .chatbot-page.is-intro .chatbot-intro-input-slot {
  display: block;
  width: 100%;
}

.chatbot-panel .chat-message {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}

.chatbot-panel .chat-message:first-child {
  margin-top: auto;
}

.chatbot-panel .chat-message.is-user {
  align-items: flex-end;
}

.chatbot-panel .chat-message.is-assistant {
  align-items: flex-start;
}

.chatbot-panel .chat-message-bubble {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.94rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid transparent;
}

.chatbot-panel .chat-message.is-user .chat-message-bubble {
  background: rgba(var(--pig-color-primary-rgb), 0.08);
}

.chatbot-panel .chat-message.is-assistant .chat-message-bubble {
  padding: 0 4px;
}

/* markdown-content — _outputs.scss 동일 수준 */
.chatbot-panel .chat-message-bubble.markdown-content {
  white-space: normal;
}

.chatbot-panel .markdown-content {
  line-height: 1.6;
  font-size: 0.94rem;
}

.chatbot-panel .markdown-content strong {
  font-weight: 500;
}

.chatbot-panel .markdown-content a {
  color: #4f9cf9;
  text-decoration: none;
}

.chatbot-panel .markdown-content a:hover {
  text-decoration: underline;
}

.chatbot-panel .markdown-content h1 {
  font-size: 1.75rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.chatbot-panel .markdown-content h2 {
  font-size: 1.25rem;
  line-height: 1.35;
  margin-bottom: 0.75rem;
}

.chatbot-panel .markdown-content h3 {
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.chatbot-panel .markdown-content h4 {
  font-size: 0.94rem;
  line-height: 1.5;
}

.chatbot-panel .markdown-content h5 {
  font-size: 0.94rem;
}

.chatbot-panel .markdown-content p {
  margin: 0.25rem 0;
}

.chatbot-panel .markdown-content ul,
.chatbot-panel .markdown-content ol {
  margin: 0.5rem 0 1rem;
  padding-inline-start: 27px;
}

.chatbot-panel .markdown-content ul {
  list-style-type: disc;
}

.chatbot-panel .markdown-content ul ul {
  list-style-type: circle;
}

.chatbot-panel .markdown-content ul ul ul {
  list-style-type: square;
}

.chatbot-panel .markdown-content ol {
  list-style-type: decimal;
}

.chatbot-panel .markdown-content ol ol {
  list-style-type: lower-alpha;
}

.chatbot-panel .markdown-content ol ol ol {
  list-style-type: lower-roman;
}

.chatbot-panel .markdown-content li {
  margin: 0.5rem 0;
}

.chatbot-panel .markdown-content li p {
  padding-left: 0.25rem;
}

.chatbot-panel .markdown-content code {
  background-color: var(--pig-color-bg-subtle);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-weight: 400;
}

.chatbot-panel .markdown-content pre {
  background-color: var(--pig-color-bg-subtle);
  padding: 0.75rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-bottom: 0.75rem;
}

.chatbot-panel .markdown-content pre code {
  background: transparent;
  padding: 0;
}

.chatbot-panel .markdown-content hr {
  width: 100%;
  margin: 1.5rem 0;
  border: none;
  border-top: 1px solid var(--pig-color-border);
}

.chatbot-panel .markdown-content blockquote {
  min-height: 22px;
  margin: 0 0 0.9rem;
  padding: 0 0 0 0.9rem;
  font-size: 0.94rem;
  border-left: 3px solid var(--pig-color-border);
  color: var(--pig-color-subtext);
}

.chatbot-panel .markdown-content table {
  display: table;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.5;
  border-top: 1px solid var(--pig-color-border);
  margin: 0 0 0.75rem;
  overflow-x: auto;
}

.chatbot-panel .markdown-content table th,
.chatbot-panel .markdown-content table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--pig-color-border);
  overflow-wrap: break-word;
  white-space: normal;
  word-break: break-word;
}

.chatbot-panel .markdown-content table th {
  font-weight: 500;
  color: var(--pig-color-subtext);
  background-color: var(--pig-color-bg-lighter);
  font-size: 0.8rem;
}

.chatbot-panel .markdown-content table tbody tr:nth-child(even) {
  background-color: var(--pig-color-bg-subtle);
}

.chatbot-panel .markdown-content table p {
  margin: 0;
}

.chatbot-panel .markdown-content em {
  font-style: italic;
}

.chatbot-panel .markdown-content del {
  text-decoration: line-through;
  opacity: 0.7;
}

.chatbot-panel .markdown-content img {
  max-width: 100%;
  border-radius: 0.5rem;
}

.chatbot-panel .chat-message .message-actions {
  display: flex;
  width: 100%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.chatbot-panel .chat-message:hover .message-actions,
.chatbot-panel .chat-message:focus-within .message-actions {
  opacity: 1;
}

.chatbot-panel .chat-message .message-actions-inner {
  display: flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  box-shadow: none;
  margin-top: 4px;
}

.chatbot-panel .chat-message.is-user .message-actions {
  justify-content: flex-end;
}

.chatbot-panel .chat-message.is-assistant .message-actions {
  justify-content: flex-start;
}

.chatbot-panel .chat-message .message-timestamp {
  display: block;
  margin: 0 4px 0 8px;
  padding: 0;
  color: var(--pig-color-text);
  font-size: 13px;
  line-height: 1.2;
  opacity: 0.7;
  pointer-events: none;
}

.chatbot-panel .action-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  padding: 0;
  color: var(--pig-color-text);
  background: transparent;
  cursor: pointer;
  opacity: 0.8;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.chatbot-panel .btn-no-deco {
  background: none;
  border: 0;
  padding: 0;
  outline: none;
  box-shadow: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.chatbot-panel .btn-no-deco:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.chatbot-panel .icon-18 {
  width: 18px;
  height: 18px;
}

.chatbot-panel .icon-18 svg {
  width: 100%;
  height: 100%;
}

.chatbot-panel .message-actions .action-icon-btn:hover,
.chatbot-panel .message-actions .action-icon-btn:focus-visible,
.chatbot-panel .message-actions .action-icon-btn.is-copied {
  opacity: 1 !important;
  color: var(--pig-color-text);
  background-color: var(--pig-color-surface-selected) !important;
}

.chatbot-panel .message-actions .action-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--pig-focus-ring);
}

.chatbot-panel .message-actions .icon-18,
.chatbot-panel .message-actions .icon-18 .icon,
.chatbot-panel .message-actions .icon-18 svg {
  width: 16px;
  height: 16px;
}

.chatbot-panel .message-actions .icon-18 svg {
  stroke-width: 1.5;
}

.chatbot-panel .flex-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chatbot-panel .chat-skill-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(107, 114, 128, 0.25);
  color: var(--pig-color-subtext);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 1px 6px;
  margin-right: 6px;
  vertical-align: middle;
  letter-spacing: 0.01em;
}

.chatbot-panel .chat-message.is-pending .chat-message-bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 54px;
  min-height: 42px;
}

.chatbot-panel .chat-history-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 96px;
  margin: auto 0;
  padding: 24px 4px;
}

.chatbot-panel .chat-history-spinner {
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(var(--pig-color-primary-rgb), 0.12);
  border-top-color: var(--pig-color-primary);
  border-radius: 50%;
  animation: chat-history-spinner-rotate 0.9s linear infinite;
}

.chatbot-panel .chat-history-more {
  width: 100%;
  min-height: 1px;
  flex: 0 0 1px;
}

@keyframes chat-history-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.chatbot-panel .chat-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--pig-color-subtext);
  opacity: 0.45;
  animation: chat-typing-pulse 1s ease-in-out infinite;
}

.chatbot-panel .chat-typing-dot:nth-child(2) {
  animation-delay: 0.12s;
}

.chatbot-panel .chat-typing-dot:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes chat-typing-pulse {

  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }

  40% {
    transform: translateY(-3px);
    opacity: 0.9;
  }
}

.chatbot-panel .chatbot-input {
  padding: 0 22px 22px;
}

.chatbot-panel .chatbot-page.is-intro .chatbot-input {
  width: 100%;
  max-width: 1100px;
  padding: 0;
}

.chatbot-panel .chatbot-input-wrapper {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  border-radius: 16px;
  background:
    linear-gradient(180deg, var(--pig-glass-surface-strong), var(--pig-glass-surface)),
    var(--pig-color-bg);
  border: 1px solid var(--pig-glass-border);
  box-shadow: inset 0 1px 0 var(--pig-glass-highlight), 0 16px 38px rgba(29, 29, 31, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chatbot-panel .chatbot-page.is-intro .chatbot-input-wrapper {
  border-radius: 16px;
}

.chatbot-panel .chatbot-textarea {
  width: 100%;
  resize: none;
  border: 0;
  padding: 12px 16px 0;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  height: var(--pig-chat-textarea-min-height);
  min-height: var(--pig-chat-textarea-min-height);
  max-height: var(--pig-chat-textarea-max-height);
  overflow-y: auto;
  background-color: transparent;
  color: var(--pig-color-text);
}

.chatbot-panel .chatbot-textarea::placeholder {
  color: var(--pig-color-subtext);
  opacity: 0.7;
}

.chatbot-panel .chatbot-textarea:focus {
  outline: none;
}

.chatbot-panel .chatbot-footer {
  padding: 8px 10px 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.chatbot-panel .chatbot-footer-tools {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chatbot-panel .view-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.chatbot-panel .view-shell.page-chat {
  --chatbot-view-header-height: 50px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.chatbot-panel .view-shell.page-automation {
  position: relative;
}

.chatbot-panel .view-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0px 12px 0px 20px;
  flex: 0 0 auto;
  isolation: isolate;
  height: 50px;
}

.chatbot-panel .page-chat .view-header {
  position: relative;
  z-index: 3;
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  flex: 0 0 auto;
  height: auto;
  min-height: var(--chatbot-view-header-height);
}

.chatbot-panel .page-chat .chatbot-body {
  flex: 1;
  min-height: 0;
  padding-top: 0;
  box-sizing: border-box;
}

.chatbot-panel .view-header-main {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0px 12px 0px 20px;
  flex: 0 0 auto;
}

.chatbot-panel .view-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto;
}

.chatbot-panel .view-header-actions-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chatbot-panel .view-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 20px 22px;
}

.chatbot-panel .automation-view-content {
  width: 100%;
  max-width: 920px;
  min-height: 100%;
  margin: 0 auto;
}

.chatbot-panel .view-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.chatbot-panel .view-breadcrumb-root {
  border: 0;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--pig-color-subtext);
  cursor: pointer;
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chatbot-panel .view-breadcrumb-root:hover,
.chatbot-panel .view-breadcrumb-root:focus-visible {
  color: var(--pig-color-text);
}

.chatbot-panel .view-breadcrumb-root:focus-visible {
  outline: none;
  border-radius: 8px;
  box-shadow: var(--pig-focus-ring);
}

.chatbot-panel .view-breadcrumb-item {
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--pig-color-subtext);
}

.chatbot-panel .view-breadcrumb-item.is-current {
  line-height: 1.2;
  color: var(--pig-color-text);
}

.chatbot-panel .view-breadcrumb-chevron,
.chatbot-panel .view-breadcrumb-chevron .icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}

.chatbot-panel .view-breadcrumb-chevron {
  color: var(--pig-color-subtext);
}

.chatbot-panel .view-breadcrumb-separator {
  color: var(--pig-color-border-strong, #c2c8d0);
  font-size: 0.95rem;
  line-height: 1;
}

.chatbot-panel .view-breadcrumb-separator::before {
  content: "/";
}

.chatbot-panel .view-primary-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(var(--pig-color-primary-rgb), 0.92), var(--pig-color-primary));
  color: var(--pig-color-primary-contrast);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(var(--pig-color-primary-rgb), 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 10px;
}

.chatbot-panel .view-primary-action[data-tooltip]::after,
.chatbot-panel .view-icon-action[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  max-width: 180px;
  padding: 7px 9px;
  border: 1px solid var(--pig-glass-border-subtle);
  border-radius: 8px;
  background: rgba(29, 29, 31, 0.92);
  color: #fff;
  box-shadow: 0 8px 20px rgba(29, 29, 31, 0.16);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.chatbot-panel .view-primary-action[data-tooltip]:hover::after,
.chatbot-panel .view-primary-action[data-tooltip]:focus-visible::after,
.chatbot-panel .view-icon-action[data-tooltip]:hover::after,
.chatbot-panel .view-icon-action[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.chatbot-panel .view-primary-action:hover,
.chatbot-panel .view-primary-action:focus-visible {
  opacity: 0.92;
}

.chatbot-panel .view-primary-action:focus-visible {
  outline: none;
  box-shadow: var(--pig-focus-ring);
}

.chatbot-panel .view-primary-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chatbot-panel .view-primary-action-label {
  display: inline-block;
}

.chatbot-panel .view-primary-action .icon {
  width: 16px;
  height: 16px;
}

.chatbot-panel .view-icon-action {
  position: relative;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pig-color-subtext);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chatbot-panel .view-icon-action:hover {
  background: rgba(var(--pig-color-primary-rgb), 0.06);
}

.chatbot-panel .view-icon-action-glyph,
.chatbot-panel .view-icon-action-glyph .icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.chatbot-panel .section-caption {
  font-size: 0.95rem;
  color: var(--pig-color-subtext);
  font-weight: 500;
}

.chatbot-panel .content-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.chatbot-panel .section-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chatbot-panel .section-group+.section-group {
  margin-top: 30px;
}

.chatbot-panel .empty-state-card {
  margin-top: 15px;
}

.chatbot-panel .empty-state-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--pig-color-text);
}

.automation-list-sections {
  padding: 0 3px;
}

.chatbot-panel .empty-state-text {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--pig-color-subtext);
}

.chatbot-panel .form-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%;
}

.chatbot-panel .form-group {
  margin-bottom: 18px;
}

.chatbot-panel .form-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 22px;
}

.chatbot-panel .form-section-title {
  margin: 0 0 14px;
  color: var(--pig-color-text);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.chatbot-panel .form-layout {
  display: flex;
  gap: 36px;
  align-items: stretch;
  flex: 1;
  min-height: 100%;
  position: relative;
}

.chatbot-panel .form-layout::before {
  content: "";
  align-self: stretch;
  flex: 0 0 1px;
  order: 1;
  background: var(--pig-glass-border-subtle);
}

.chatbot-panel .form-layout-main,
.chatbot-panel .form-layout-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.chatbot-panel .form-layout-main {
  order: 0;
  flex: 1.2 1 0;
}

.chatbot-panel .form-layout-side {
  order: 2;
  min-width: 280px;
  width: 30%;
}

.chatbot-panel .form-label {
  font-size: 0.85rem;
  margin-bottom: 4px;
  display: block;
  color: var(--pig-color-subtext);
  font-weight: 500;
}

.chatbot-panel .form-text {
  margin-top: 4px;
  color: var(--pig-color-subtext);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
}

.chatbot-panel .form-text:empty {
  display: none;
}

.chatbot-panel .form-control {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--pig-glass-border-subtle);
  border-radius: 6px;
  padding: 12px 14px;
  background: var(--pig-glass-surface-strong);
  color: var(--pig-color-text);
  font-size: 0.94rem;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 var(--pig-glass-highlight);
}

.chatbot-panel .form-control:focus {
  outline: none;
  border-color: #8bb8ff;
  box-shadow: var(--pig-focus-ring);
}

.chatbot-panel select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' fill='none' stroke='%23212529' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}

.chatbot-panel select.form-control::-ms-expand {
  display: none;
}

.chatbot-panel .form-control.is-textarea {
  min-height: 120px;
  resize: vertical;
}


.chatbot-panel .form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--pig-color-text);
}

.chatbot-panel .form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--pig-color-text);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  user-select: none;
}

.chatbot-panel input[type="checkbox"],
.chatbot-panel input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  border: 1px solid var(--pig-glass-border-subtle);
  background-color: var(--pig-glass-surface-strong);
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 var(--pig-glass-highlight);
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.chatbot-panel input[type="checkbox"] {
  border-radius: 5px;
}

.chatbot-panel input[type="radio"] {
  border-radius: 50%;
}

.chatbot-panel input[type="checkbox"]:hover,
.chatbot-panel input[type="radio"]:hover {
  border-color: rgba(var(--pig-color-primary-rgb), 0.28);
  background-color: var(--pig-color-hover-bg);
}

.chatbot-panel input[type="checkbox"]:focus-visible,
.chatbot-panel input[type="radio"]:focus-visible {
  outline: none;
  border-color: #8bb8ff;
  box-shadow: var(--pig-focus-ring);
}

.chatbot-panel input[type="checkbox"]:checked,
.chatbot-panel input[type="radio"]:checked {
  border-color: var(--pig-color-primary);
  background-color: var(--pig-color-primary);
}

.chatbot-panel input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.1 5.8 10 11 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px 14px;
}

.chatbot-panel input[type="radio"]:checked {
  background-image: radial-gradient(circle, var(--pig-color-primary-contrast) 0 34%, transparent 38%);
}

.chatbot-panel input[type="checkbox"]:active,
.chatbot-panel input[type="radio"]:active {
  transform: scale(0.94);
}

.chatbot-panel input[type="checkbox"]:disabled,
.chatbot-panel input[type="radio"]:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.chatbot-panel input[type="checkbox"]:disabled+*,
.chatbot-panel input[type="radio"]:disabled+* {
  cursor: not-allowed;
}

.chatbot-panel .list-item-card {
  border-radius: 8px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 2px;
  position: relative;
  box-shadow: inset 0 1px 0 transparent;
}


.chatbot-panel .list-item-card.has-leading {
  margin-left: -10px;
  margin-right: -8px;
}

.chatbot-panel .list-item-card.is-running {}

.chatbot-panel .list-item-card.is-selected {
  border-color: var(--pig-glass-border-subtle);
  background: var(--pig-glass-surface-strong);
  box-shadow: inset 0 1px 0 var(--pig-glass-highlight);
}

.chatbot-panel .list-item-card:hover,
.chatbot-panel .list-item-card:focus-within {
  background: rgba(var(--pig-color-primary-rgb), 0.08);

}

.chatbot-panel .list-item-state-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chatbot-panel .list-item-state-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--pig-color-text-muted);
}

.chatbot-panel .list-item-state-glyph {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s ease;
}

.chatbot-panel .list-item-state-glyph.is-hover {
  opacity: 0;
}

.chatbot-panel .list-item-state-btn:hover .list-item-state-glyph.is-current,
.chatbot-panel .list-item-state-btn:focus-visible .list-item-state-glyph.is-current {
  opacity: 0;
}

.chatbot-panel .list-item-state-btn:hover .list-item-state-glyph.is-hover,
.chatbot-panel .list-item-state-btn:focus-visible .list-item-state-glyph.is-hover {
  opacity: 1;
}

.chatbot-panel .list-item-state-icon .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.chatbot-panel .list-item-main {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.chatbot-panel .list-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chatbot-panel .list-item-title {
  display: block;
  font-size: 0.95rem;
  color: var(--pig-color-text);
}

.chatbot-panel .list-item-meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: var(--pig-color-subtext);
  margin-left: auto;
  min-width: 120px;
}

.chatbot-panel .list-item-caption {
  font-size: 0.92rem;
  white-space: nowrap;
  transition: opacity 0.12s ease;
}

.chatbot-panel .list-item-actions {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.chatbot-panel .list-item-meta:hover .list-item-caption,
.chatbot-panel .list-item-meta:focus-within .list-item-caption {
  opacity: 0;
}

.chatbot-panel .list-item-meta:hover .list-item-actions,
.chatbot-panel .list-item-meta:focus-within .list-item-actions {
  opacity: 1;
  pointer-events: auto;
}

.chatbot-panel .list-item-action-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--pig-color-subtext);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chatbot-panel .list-item-action-btn:hover,
.chatbot-panel .list-item-action-btn:focus-visible {
  color: var(--pig-color-primary);
}

.chatbot-panel .list-item-action-icon,
.chatbot-panel .list-item-action-icon .icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot-panel .detail-view {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  min-height: 100%;
  padding: 16px 6px;
}

.chatbot-panel .feedback-banner {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 24;
  width: min(480px, calc(100% - 32px));
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.16);
  background: var(--pig-color-primary);
  border: 1px solid var(--pig-color-primary);
  color: var(--pig-color-bg);
  animation: pig-feedback-toast-in 0.22s ease;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.chatbot-panel .feedback-banner.is-hiding {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.chatbot-panel .feedback-copy {
  font-size: 0.9rem;
  line-height: 1.5;
  min-width: 0;
}

.chatbot-panel .feedback-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}

.chatbot-panel .detail-main-section+.detail-main-section {
  margin-top: 32px;
}

.chatbot-panel .detail-hero-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pig-color-text);
}

.chatbot-panel .detail-hero-copy {
  margin-top: 18px;
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--pig-color-text);
}

.chatbot-panel .detail-side-group:not(:last-child) {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chatbot-panel .detail-side-group+.detail-side-group {
  padding-top: 24px;
  border-top: 1px solid var(--pig-glass-border-subtle);
}

.chatbot-panel .detail-side-group.is-muted {
  color: var(--pig-color-subtext);
}

.chatbot-panel .side-title {
  margin: 0 0 6px;
  color: var(--pig-color-text);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.3;
}

.chatbot-panel .data-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-top: 10px;
}

.chatbot-panel .data-label {
  font-size: 0.85rem;
  color: var(--pig-color-text);
  margin-top: 2px;
}

.chatbot-panel .data-value {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--pig-color-text);
  text-align: right;
  word-break: break-all;
}

.chatbot-panel .badge-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 8px 0px;
  border: 0;
  border-radius: 999px;
  background: var(--pig-color-bg-subtle);
  color: var(--pig-color-subtext);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.chatbot-panel .badge-status.is-success,
.chatbot-panel .badge-status.is-running {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
}

.chatbot-panel .badge-status.is-failed {
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
}

.chatbot-panel .badge-status.is-paused,
.chatbot-panel .badge-status.is-pending,
.chatbot-panel .badge-status.is-muted {
  background: rgba(var(--pig-color-primary-rgb), 0.06);
  color: var(--pig-color-subtext);
}

.chatbot-panel .detail-side-empty {
  font-size: 0.92rem;
  color: var(--pig-color-subtext);
}

.chatbot-panel .history-list {
  padding-top: 6px;
}

.chatbot-panel .history-item {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  padding: 0 0 24px;
}

.chatbot-panel .history-item+.history-item {
  margin-top: 0;
}

.chatbot-panel .history-item::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: -12px;
  left: 6px;
  width: 1px;
  background: var(--pig-color-border);
}

.chatbot-panel .history-item:last-child {
  padding-bottom: 0;
}

.chatbot-panel .history-item:last-child::before {
  bottom: auto;
  height: 14px;
}

.chatbot-panel .history-item-marker {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: 7px;
}

.chatbot-panel .history-item-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--pig-color-text-muted);
}

.chatbot-panel .history-item-dot.is-success {
  background: var(--pig-color-primary);
}

.chatbot-panel .history-item-dot.is-failed {
  background: var(--pig-color-text-muted);
}

.chatbot-panel .history-item-body {
  min-width: 0;
  font-size: .9rem;
}

.chatbot-panel .history-item-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}

.chatbot-panel .history-item-time {
  font-size: 0.85rem;
  width: 115px;
}

.chatbot-panel .history-item-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--pig-color-subtext);
}

.chatbot-panel .modal-card {
  width: min(420px, calc(100% - 32px));
  border-radius: 18px;
  background: var(--pig-glass-surface-strong);
  border: 1px solid var(--pig-glass-border);
  box-shadow: var(--pig-glass-shadow);
  backdrop-filter: var(--pig-glass-filter);
  -webkit-backdrop-filter: var(--pig-glass-filter);
  padding: 22px;
}

.chatbot-panel .modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pig-color-text);
}

.chatbot-panel .modal-text {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--pig-color-subtext);
}

.chatbot-panel .modal-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.chatbot-panel .modal-btn {
  min-height: 42px;
  border: 1px solid var(--pig-color-border);
  border-radius: 12px;
  padding: 0 16px;
  background: var(--pig-color-bg);
  color: var(--pig-color-text);
  font-weight: 600;
  cursor: pointer;
}

.chatbot-panel .modal-btn.is-danger {
  background: #17171c;
  border-color: #17171c;
  color: #fff;
}

.chatbot-panel.widget.active~#btnSupportFloating {
  opacity: 0 !important;
  pointer-events: none !important;
}

#btnSupportFloating {
  position: fixed;
  bottom: 40px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 99999 !important;
  transition: right 0.3s ease, bottom 0.3s ease, opacity 0.3s ease;
  touch-action: none;
  user-select: none;
}

#btnSupportFloating.is-dragging,
#btnSupportFloating.is-restoring-position {
  transition: none;
}

#btnSupportFloating.is-dragging {
  cursor: grabbing;
}

#btnSupportFloating .floating-action-btn {
  width: 60px;
  height: 60px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#btnSupportFloating.is-dragging .floating-action-btn {
  cursor: grabbing;
}

#btnSupportFloating .floating-action-btn.btn-support {
  appearance: none;
  -webkit-appearance: none;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 112px;
  height: 140px;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  animation: pig-agent-breath 3s ease-in-out infinite;
  --idle-opacity: 1;
  --pig-figure-idle-x: 0px;
  --pig-figure-expression-x: -112px;
}

#btnSupportFloating .floating-action-btn.btn-support:hover,
#btnSupportFloating .floating-action-btn.btn-support.active {
  --breath-y-0: -4px;
  --breath-scale-0: 1.04;
  --breath-y-50: -10px;
  --breath-scale-50: 1.09;
  --expression-opacity: 1;
  --idle-opacity: 0;
}

#btnSupportFloating .floating-action-btn.btn-support::before,
#btnSupportFloating .floating-action-btn.btn-support::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--pig-figure-atlas);
  /* v1 sprite(pig_figure.png 1024x320, 4프레임 각 256x320, aspect 4:5)에 맞춤.
     448x140 → 112x140/frame = aspect 4:5 유지. 이전 560x140은 140x140(1:1)로 가로 늘어남. */
  background-size: 448px 140px;
  background-position-y: 0;
  background-repeat: no-repeat;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

#btnSupportFloating .floating-action-btn.btn-support::before {
  background-position-x: var(--pig-figure-idle-x);
  opacity: var(--idle-opacity);
  z-index: 1;
}

#btnSupportFloating .floating-action-btn.btn-support::after {
  background-position-x: var(--pig-figure-expression-x);
  opacity: var(--expression-opacity, 0);
  z-index: 2;
}

#btnSupportFloating .floating-action-btn.btn-support.active {
  --pig-figure-expression-x: -224px;
}

#btnSupportFloating .pig-speech-bubble {
  position: absolute;
  top: 0;
  left: calc(100% - 10px);
  transform: translateY(-50%);
  background: rgba(33, 37, 41, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px 20px 20px 4px;
  padding: 12px 16px;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2);
  max-width: 210px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-out, visibility 0.6s ease-out, left 0.6s ease-out;
}

#btnSupportFloating.is-on-right .pig-speech-bubble {
  left: auto;
  right: calc(100% - 10px);
  border-radius: 20px 20px 4px 20px;
}

#btnSupportFloating .pig-speech-bubble .bubble-content {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 1180px) {
  .chatbot-panel.widget {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    top: 50%;
    left: 50%;
  }

  .chatbot-panel.widget.pignito-window-panel {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    min-width: 0;
    top: 12px;
    left: 12px;
  }
}

@media (max-width: 860px) {
  .chatbot-panel.widget.pignito-window-panel {
    min-height: 0;
  }

  .chatbot-panel.widget.pignito-window-panel .pignito-window-resize-handle {
    display: none;
  }

  .chatbot-panel .chatbot-workspace {
    flex-direction: column;
  }

  .chatbot-panel .agent-sidebar {
    width: 100%;
    flex: 0 0 auto;
    border-right: 0;
  }

}

@media (max-width: 640px) {
  .chatbot-panel.widget {
    width: 100dvw;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    inset: 0;
    border-radius: 0;
  }

  .chatbot-panel .chatbot-scroll-container {
    padding: 16px 14px 12px;
  }

  .chatbot-panel .chatbot-input,
  .chatbot-panel .view-scroll {
    padding: 14px;
  }

  .chatbot-panel .chatbot-page.is-intro .chatbot-input {
    padding: 0;
  }

  .chatbot-panel .chatbot-page.is-intro .chatbot-scroll-container {
    padding: 16px 14px 32px;
  }

  .chatbot-panel .view-header {
    padding: 14px;
  }

  .chatbot-panel .view-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .chatbot-panel .detail-view .form-layout-side {
    padding: 24px 0 0;
  }

}

@media (max-width: 640px) {

  .chatbot-panel .view-header-actions,
  .chatbot-panel .view-header-actions-group {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .chatbot-panel .form-layout {
    flex-direction: column;
    gap: 18px;
  }

  .chatbot-panel .form-layout::before {
    display: none;
  }

  .chatbot-panel .form-layout-main {
    flex: 0 1 auto;
  }

  .chatbot-panel .form-layout-side {
    flex: 0 1 auto;
    border-left: 0;
    border-top: 1px solid var(--pig-color-border);
  }

  .chatbot-panel .feedback-banner {
    bottom: 16px;
    width: min(100%, calc(100% - 24px));
    padding: 13px 16px;
  }

  .chatbot-panel .view-primary-action {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================ */
/* Plan 스케줄 — 배너 / 스텝 / 원본 메시지 / 위험 */
/* ============================================ */

.chatbot-panel .plan-banner {
  padding: 0 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--pig-glass-border-subtle, #ececef);
}

.chatbot-panel .plan-banner-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pig-color-text);
  line-height: 1.4;
}

.chatbot-panel .plan-banner-summary {
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--pig-color-text-muted, #777);
  line-height: 1.55;
}

.chatbot-panel .plan-original-message {
  background: var(--pig-glass-bg-subtle, #f7f7fa);
  border-left: 3px solid rgba(99, 102, 241, 0.5);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.chatbot-panel .plan-original-message-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pig-color-text-muted, #777);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.chatbot-panel .plan-original-message-body {
  font-size: 0.88rem;
  color: var(--pig-color-text);
  line-height: 1.5;
}

.chatbot-panel .plan-steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.chatbot-panel .plan-step-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.chatbot-panel .plan-step-row+.plan-step-row {
  border-top: 1px solid var(--pig-glass-border-subtle, #ececef);
}

.chatbot-panel .plan-step-index {
  flex: 0 0 auto;
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--pig-color-text-muted, #888);
  min-width: 16px;
}

.chatbot-panel .plan-step-index::after {
  content: '.';
}

.chatbot-panel .plan-step-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chatbot-panel .plan-step-label {
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--pig-color-text);
  line-height: 1.4;
}

.chatbot-panel .plan-step-skill {
  font-size: 0.78rem;
  color: rgb(79, 82, 221);
  font-weight: 500;
}

.chatbot-panel .plan-step-goal {
  font-size: 0.8rem;
  color: var(--pig-color-text-muted, #666);
  line-height: 1.5;
  margin-top: 2px;
}

.chatbot-panel .plan-risk-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--pig-glass-border-subtle, #ececef);
}

.chatbot-panel .plan-risk-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pig-color-text-muted, #888);
  margin-bottom: 4px;
}

.chatbot-panel .plan-risk-block ul {
  margin: 0;
  padding-left: 16px;
  font-size: 0.82rem;
  color: var(--pig-color-text-muted, #666);
  line-height: 1.55;
}

.chatbot-panel .plan-risk-block li+li {
  margin-top: 2px;
}

/* automation 리스트 — plan 행의 부제 (N개 스킬) */
.chatbot-panel .list-item-subtitle {
  display: block;
  font-size: 0.74rem;
  color: var(--pig-color-text-muted, #777);
  margin-top: 2px;
  font-weight: 500;
}

/* 자연어 입력 모드 — 보조 안내문 + 에러 + 액션 정렬 */
.chatbot-panel .form-section-desc {
  font-size: 0.82rem;
  color: var(--pig-color-text-muted, #666);
  line-height: 1.55;
  margin: 0 0 12px;
}

.chatbot-panel .form-section-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.chatbot-panel .form-error {
  font-size: 0.82rem;
  color: rgb(192, 49, 49);
  background: rgba(192, 49, 49, 0.06);
  border-left: 3px solid rgba(192, 49, 49, 0.5);
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0 12px;
}

/* automation 리스트 — 인라인 삭제 확인 */
.chatbot-panel .list-item-actions.is-confirm-delete {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chatbot-panel .list-item-confirm-text {
  font-size: 0.8rem;
  color: var(--pig-color-text-muted, #666);
}

.chatbot-panel .list-item-confirm-btn {
  border: 1px solid var(--pig-glass-border-subtle, #d0d5dd);
  background: #fff;
  color: var(--pig-color-text);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.2;
}

.chatbot-panel .list-item-confirm-btn:hover {
  background: #f7f8fa;
}

.chatbot-panel .list-item-confirm-btn.is-danger {
  color: rgb(192, 49, 49);
  border-color: rgba(192, 49, 49, 0.35);
}

.chatbot-panel .list-item-confirm-btn.is-danger:hover {
  background: rgba(192, 49, 49, 0.06);
}

.chatbot-panel .list-item-card.is-pending-delete {
  background: rgba(192, 49, 49, 0.03);
}

/* 채팅 메시지 — 인라인 삭제 확인 (스케줄 삭제와 동일한 list-item-confirm-* 클래스 재사용) */
.chatbot-panel .message-actions.is-confirm-delete .message-actions-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* 채팅 메시지 — confirm 중일 때 액션 영역을 sticky 로 유지 (hover 해제돼도 안 사라짐) */
.chatbot-panel .chat-message.is-pending-delete .message-actions,
.chatbot-panel .chat-message.is-pending-delete .message-actions-inner {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ============================================================
   Chatbot Surface (v1 origin) — chatbot.js DOM 전용 규칙
   ============================================================ */

@keyframes pig-bubble-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes pig-agent-breath {

  0%,
  100% {
    transform: translateY(var(--breath-y-0, 0)) scale(var(--breath-scale-0, 1));
  }

  50% {
    transform: translateY(var(--breath-y-50, -3px)) scale(var(--breath-scale-50, 1.03));
  }
}

@keyframes pig-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pig-message-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(10px) translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes pig-message-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-10px) translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes pig-dots {

  0%,
  20% {
    content: '.';
  }

  40% {
    content: '..';
  }

  60%,
  100% {
    content: '...';
  }
}

@keyframes pig-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes pig-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes pig-typing-dot {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }

  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* ============================================================
   5. Chatbot Panel  (_chatbot.scss)
   ============================================================ */

.chatbot-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* --- cb-inline: 특정 div에 삽입되는 인라인 챗봇 (widget 클래스 없음) --- */
.chatbot-panel.cb-inline {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--pig-color-bg);
  border: 1px solid var(--pig-color-border);
  border-radius: 10px;
  box-shadow: none;
}

/* --- Widget 모드 (chatbot surface 전용; .cb-surface 마커로 scope 격리)
       agent surface 는 line 193 의 v2 룰(min(1400px, …))을 그대로 사용. --- */

.chatbot-panel.widget.cb-surface {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: -1;
  position: fixed;
  top: 50%;
  right: 20px;
  left: auto;
  /* v2의 left:50% 무력화 */
  width: 720px;
  height: 620px;
  border: 1px solid var(--pig-color-border-thick);
  box-shadow: 1px 1px 11px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transform: translateY(-50%);
  min-width: 320px;
  min-height: 600px;
  max-width: 80vw;
  max-height: 90vh;
  background-color: var(--pig-color-bg);
  overflow: hidden;
  /* v2 기본 룰의 backdrop-filter는 chatbot에서 비활성 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chatbot-panel.widget.cb-surface.active {
  opacity: 1;
  z-index: 1050;
  /* v2 .widget.active의 transform 덮어쓰기 (chatbot은 right 기준이라 translate(-50%, -50%) 쓰면 안됨) */
  transform: translateY(-50%);
}

.chatbot-panel.widget.cb-surface.dragging {
  user-select: none;
  transition: none;
}

.chatbot-panel.widget.cb-surface .chatbot-header {
  cursor: move;
  user-select: none;
}

/* --- Header --- */

.chatbot-panel .chatbot-header {
  padding: 10px 12px 10px 20px;
  border-bottom: 1px solid var(--pig-color-border);
  background: var(--pig-color-bg);
  border-radius: 1rem 1rem 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chatbot-panel .chatbot-header .chatbot-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--pig-color-text);
}

/* --- Body --- */

.chatbot-panel .chatbot-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.chatbot-panel .chatbot-body .chatbot-scroll-container {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* --- Messages --- */

.chatbot-panel .chatbot-messages {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  flex-grow: 1;
  container-type: inline-size;
  container-name: pig-messages-container;
}

/* Welcome / Empty State */

.chatbot-panel .chatbot-messages .welcome-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.chatbot-panel .chatbot-messages .welcome-content .empty-state-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  gap: 10px;
  animation: pig-fade-in-up 0.6s ease-out both;
}

.chatbot-panel .chatbot-messages .welcome-content .empty-state-view .agent-welcome-bubble {
  position: relative;
  background: var(--pig-color-bg);
  border: 1px solid var(--pig-color-border);
  padding: 16px 24px;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  font-size: 15px;
  line-height: 1.6;
  color: var(--pig-color-text);
  margin-bottom: 5px;
  animation: pig-bubble-float 3s ease-in-out infinite;
}

.chatbot-panel .chatbot-messages .welcome-content .empty-state-view .agent-welcome-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--pig-color-border);
}

.chatbot-panel .chatbot-messages .welcome-content .empty-state-view .agent-welcome-bubble::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid var(--pig-color-bg);
  z-index: 1;
}

.chatbot-panel .chatbot-messages .welcome-content .empty-state-view .agent-stand-graphic {
  width: 180px;
  height: 225px;
  background-image: var(--pig-figure-atlas);
  background-size: 720px 225px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.08));
  animation: pig-agent-breath 3s ease-in-out infinite;
}

/* Quick Actions chips (welcome 영역 하단) */
.sdk-quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  padding: 0 12px;
}

.sdk-quick-action-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 16px;
  background: rgba(124, 111, 224, 0.08);
  border: 1px solid rgba(124, 111, 224, 0.25);
  color: var(--pig-color-primary, #7c6fe0);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}

.sdk-quick-action-chip:hover {
  background: rgba(124, 111, 224, 0.15);
  border-color: rgba(124, 111, 224, 0.45);
  transform: translateY(-1px);
}

.sdk-quick-action-chip:active {
  transform: translateY(0);
}

/* --- Messages (user / assistant) — ID 스코프로 .message 충돌 방지 --- */

#chatbotPanelWidget .message {
  border-radius: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  margin-bottom: 12px;
  width: fit-content;
  font-size: 1rem;
  color: var(--pig-color-text);
}

#chatbotPanelWidget .message p {
  margin: 0;
}

#chatbotPanelWidget .message.user {
  max-width: 75%;
  padding: 12px 16px;
  margin-left: auto;
  margin-right: 6px;
  background-color: var(--pig-color-bg-lighter);
  color: var(--pig-color-text);
  border-radius: 20px 0 20px 20px;
  animation: pig-message-slide-in-right 0.25s cubic-bezier(0.2, 0, 0.2, 1) both;
}

#chatbotPanelWidget .message.assistant {
  position: relative;
  top: 3px;
  line-height: 1.5;
  color: var(--pig-color-text);
}

/* --- Typing indicator --- */

.chatbot-panel .typing-indicator {
  align-self: flex-start;
  padding: 12px 16px;
  background: var(--pig-color-bg-subtle);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  font-style: italic;
  color: var(--pig-color-subtext);
  font-size: 14px;
  margin-bottom: 12px;
}

.chatbot-panel .typing-indicator .dots {
  display: inline-block;
}

.chatbot-panel .typing-indicator .dots::after {
  content: '';
  animation: pig-dots 1.4s infinite;
}

/* --- Loading message (appendAILoadingMessage에서 생성) --- */

#chatbotPanelWidget .message.loading-message {
  padding: 10px 16px;
  background-color: transparent;
  border-radius: 0;
  margin-bottom: 0;
  width: auto;
}

#chatbotPanelWidget .typing-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}

#chatbotPanelWidget .typing-dots span {
  width: 8px;
  height: 8px;
  background-color: var(--pig-color-subtext);
  border-radius: 50%;
  display: inline-block;
  animation: pig-typing-dot 1.4s infinite ease-in-out;
}

#chatbotPanelWidget .typing-dots span:nth-child(1) {
  animation-delay: 0s;
}

#chatbotPanelWidget .typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

#chatbotPanelWidget .typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* --- Input area --- */

.chatbot-panel .chatbot-input {
  padding: 0 10px 10px;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  position: relative;
  z-index: 1;
}

.chatbot-panel .chatbot-input .chatbot-input-wrapper {
  position: relative;
  border-radius: 24px;
  background-color: var(--pig-color-bg-lighter);
}

.chatbot-panel .chatbot-input .chatbot-input-wrapper .chatbot-textarea {
  width: 100%;
  resize: none;
  border: 0;
  padding: 12px 20px 0;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', '돋움', Dotum, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  min-height: 2rem;
  max-height: 150px;
  overflow-y: auto;
  background-color: transparent;
  color: var(--pig-color-text);
  field-sizing: content;
}

.chatbot-panel .chatbot-input .chatbot-input-wrapper .chatbot-textarea::placeholder {
  color: var(--pig-color-subtext);
  opacity: 0.7;
}

.chatbot-panel .chatbot-input .chatbot-input-wrapper .chatbot-textarea:focus {
  outline: none;
}

.chatbot-panel .chatbot-input .chatbot-footer {
  padding: 12px 14px;
  display: flex;
  justify-content: flex-end;
}

/* --- Resize handle --- */

.chatbot-panel .chatbot-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.chatbot-panel .chatbot-resize-handle::before {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 10px;
  height: 10px;
  background-image:
    radial-gradient(circle at 2px 2px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 6px 2px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 2px 6px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 10px 2px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 6px 6px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 2px 10px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 10px 6px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 6px 10px, var(--pig-color-subtext) 1px, transparent 1px),
    radial-gradient(circle at 10px 10px, var(--pig-color-subtext) 1px, transparent 1px);
  background-size: 12px 12px;
}

.chatbot-panel .chatbot-resize-handle:hover {
  opacity: 1;
}

.chatbot-panel .chatbot-resize-handle:hover::before {
  background-image:
    radial-gradient(circle at 2px 2px, var(--pig-color-text) 1px, transparent 1px),
    radial-gradient(circle at 6px 2px, var(--pig-color-text) 1px, transparent 1px),
    radial-gradient(circle at 2px 6px, var(--pig-color-text) 1px, transparent 1px),
    radial-gradient(circle at 10px 2px, var(--pig-color-text) 1px, transparent 1px),
    radial-gradient(circle at 6px 6px, var(--pig-color-text) 1px, transparent 1px),
    radial-gradient(circle at 2px 10px, var(--pig-color-text) 1px, transparent 1px),
    radial-gradient(circle at 10px 6px, var(--pig-color-text) 1px, transparent 1px),
    radial-gradient(circle at 6px 10px, var(--pig-color-text) 1px, transparent 1px),
    radial-gradient(circle at 10px 10px, var(--pig-color-text) 1px, transparent 1px);
}

/* --- AI thumbnail + message wrap --- */

.chatbot-panel .ai-thumbnail {
  width: 60px;
  height: 60px;
  background-image: var(--pig-thumb-atlas);
  background-size: 240px 60px;
  background-position: -120px 0;
  background-repeat: no-repeat;
  flex: 0 0 60px;
}

.chatbot-panel .ai-thumbnail.is-smile {
  background-position: 0 0;
}

.chatbot-panel .ai-thumbnail.is-love {
  background-position: -60px 0;
}

.chatbot-panel .ai-thumbnail.is-neutral {
  background-position: -120px 0;
}

.chatbot-panel .ai-thumbnail.is-cry {
  background-position: -180px 0;
}

.chatbot-panel .message-assistant-wrap {
  display: flex;
  align-items: flex-start;
  max-width: 85%;
  gap: 6px;
  padding: 20px 0;
  animation: pig-message-slide-in-left 0.25s cubic-bezier(0.2, 0, 0.2, 1) both;
}

.chatbot-panel .message-assistant-wrap .service-name {
  animation: pig-message-slide-in-left 0.25s cubic-bezier(0.2, 0, 0.2, 1) both;
}

/* ============================================================
   Agent Surface Sidebar Figure — SubAgent 목록 상단 PiG 캐릭터
   ============================================================ */
.agent-sidebar-figure {
  padding: 10px 20px 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-top: 1px solid var(--pig-glass-border-subtle);
}

.agent-sidebar-figure .agent-stand-graphic {
  width: 120px;
  height: 150px;
  background-image: var(--pig-figure-atlas);
  background-size: 480px 150px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.08));
  animation: pig-agent-breath 3s ease-in-out infinite;
}

/* 사이드바 접힌 상태에선 숨김 */
.chatbot-panel.is-sidebar-collapsed .agent-sidebar-figure {
  display: none;
}

#inline-chatbot-container .chatbot-header {
  display: none !important;
}

#inline-chatbot-container .chatbot-panel {
  border: 0 !important;
}