/* 회고 앱이 iframe 으로 띄운 inAX 화면에만 입힌다(html[data-retro] — inax-inject.js 가 iframe 안에서만 붙인다).
   select: 폴라 대화만 남기고, 최근 하루 정리 카드에 초점 · 업무를 펼치면 오른쪽에 inAX 업무 상세
   run:    폴라 대화가 왼쪽으로 밀려 나가고 업무 상세가 화면을 채운다(회고 폴라는 iframe 밖 오른쪽) */
:root {
  --rt-50: #f5f3ff;
  --rt-100: #ede9fe;
  --rt-200: #ddd6fe;
  --rt-600: #7c3aed;
  --rt-700: #6d28d9;
  --rt-ease: cubic-bezier(.22, .8, .24, 1);
}

/* 다른 기능은 보이지 않게: 전역 레일 · 폴라 사이드바 · 머리 버튼 · 입력창 · 패널 손잡이 */
html[data-retro] #root > div > aside,
html[data-retro] .agent-surface__panel-resize,
html[data-retro] .agent-main__actions,
html[data-retro] .agent-composer,
html[data-retro] .detail-panel-header__left,
html[data-retro] .agent-day-wrapup__foot-actions { display: none !important; }

/* 사이드바는 display:none 대신 숨김 — 머리의 폴라 얼굴이 사이드바 안 SVG 그라디언트(id)를 참조한다 */
html[data-retro] .agent-snb { visibility: hidden !important; }

html[data-retro] .agent-surface {
  grid-template-columns: 0px minmax(0, 1fr) 0px !important;
  overflow: hidden;
  transition: grid-template-columns .56s var(--rt-ease);
}
html[data-retro] .agent-surface:has(.agent-surface__right-panel .wp-dp) { grid-template-columns: 0px minmax(0, 1fr) minmax(0, 50%) !important; }
html[data-retro="run"] .agent-surface,
html[data-retro="run"] .agent-surface:has(.agent-surface__right-panel .wp-dp) { grid-template-columns: 0px 0px minmax(0, 1fr) !important; }

html[data-retro] .agent-main { min-width: 0 !important; transition: opacity .3s ease, transform .56s var(--rt-ease); }
html[data-retro="run"] .agent-main { opacity: 0; transform: translateX(-36%); pointer-events: none; }
html[data-retro] .agent-surface__right-panel { min-width: 0 !important; width: auto !important; max-width: none !important; overflow: hidden; }

/* 입력창이 빠진 자리 — 회고 폴라 안내가 놓일 만큼 비운다 */
html[data-retro] .agent-thread__inner { padding-bottom: 208px !important; }

/* 초점: 최근 하루 정리 카드만 또렷하게, 나머지 대화는 물러난다 */
/* inAX 메시지의 등장 애니메이션이 opacity 를 쥐고 있어 !important 로 이긴다 */
html[data-retro] .agent-thread__inner > * { opacity: .28 !important; transition: opacity .5s ease; pointer-events: none; }
html[data-retro] .agent-thread__inner > :has(.retro-focus) { opacity: 1 !important; }
html[data-retro] .agent-date-divider, html[data-retro] .agent-partner-loadmore { opacity: 1 !important; }
html[data-retro] .retro-focus { scroll-margin-top: 28px; }
html[data-retro] .retro-focus { pointer-events: none; transition: box-shadow .5s ease, border-color .5s ease; }
html[data-retro="select"] .retro-focus { box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 12px 32px -12px rgba(17, 24, 39, .14); }
html[data-retro] .retro-focus [data-retro-pick] {
  pointer-events: auto; cursor: pointer;
  border-radius: 6px; margin-left: -6px; padding: 2px 6px;
  transition: background-color .18s ease, color .18s ease;
}
html[data-retro] .retro-focus [data-retro-pick]:hover { background: var(--rt-50); color: var(--rt-700); }
html[data-retro] .retro-focus [data-retro-pick].is-picked { background: var(--rt-100); color: var(--rt-700); }

/* 좁은 화면: 업무를 펼치면 상세가 화면을 채운다 */
@media (max-width: 760px) {
  html[data-retro] .agent-surface:has(.agent-surface__right-panel .wp-dp) { grid-template-columns: 0px 0px minmax(0, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-retro] .agent-surface, html[data-retro] .agent-main, html[data-retro] .agent-thread__inner > * { transition: none !important; }
}