/* 완료 알림: 보라빛 유리 카드에 얼굴 아바타, 한 줄 요약, 결과 확인 버튼 (작게) */
.completion-reports { width:min(300px,calc(100vw - 24px)); }
.completion-reports .completion-pop {
  display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%; min-height:0;
  padding:11px 12px 9px; overflow:hidden; text-align:left;
  border:1px solid #c9b2e266; border-radius:13px;
  background:linear-gradient(150deg,#3b2c47f2,#271f31f7 60%,#221b2bfa);
  color:#f3ecf7; box-shadow:0 10px 28px #0c0614cc,inset 0 1px #ffffff1c;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.completion-reports .completion-pop:hover { border-color:#dcc5f299; box-shadow:0 12px 32px #0c0614dd,inset 0 1px #ffffff26; }
.completion-reports .completion-pop:focus-visible { outline:2px solid #d8c2f3; outline-offset:3px; }
.completion-pop-head { display:flex; align-items:center; gap:8px; padding-right:22px; }
.completion-pop-avatar { position:relative; flex:0 0 28px; width:28px; height:28px; }
.completion-pop-face {
  display:block; width:100%; height:100%; border-radius:50%;
  background:#4a3a58 no-repeat 50% 6%/230% auto; box-shadow:0 0 0 1.5px #d8c2f3aa,0 2px 6px #0007;
}
.completion-pop-check {
  position:absolute; right:-3px; bottom:-2px; display:grid; place-items:center; width:12px; height:12px;
  border:1.5px solid #2a2133; border-radius:50%; background:#58b68a; color:#fff; font-size:7px; font-weight:800; line-height:1;
}
.completion-pop-who { display:flex; align-items:baseline; gap:5px; min-width:0; font-size:12.5px; }
.completion-pop-who strong { color:#fff; font-weight:700; }
.completion-pop-sep { color:#a996b8; }
.completion-pop-state { color:#cdb5f0; font-weight:700; }
.completion-pop-when { margin-left:auto; flex-shrink:0; color:#b6a6c3; font-size:10.5px; }
.completion-pop-title {
  display:-webkit-box; margin-top:7px; overflow:hidden; color:#fff; font-size:13.5px; font-weight:800; line-height:1.35;
  overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:1;
}
.completion-pop-result {
  display:-webkit-box; margin-top:2px; overflow:hidden; color:#d9cde2; font-size:12px; line-height:1.45;
  overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:1;
}
.completion-pop-foot { display:flex; align-items:center; gap:8px; margin-top:8px; padding-top:7px; border-top:1px solid #ffffff1f; }
.completion-pop-record { display:flex; flex:1 1 auto; align-items:center; gap:6px; min-width:0; color:#b6a6c3; font-size:10.5px; }
.completion-pop-record > span:last-child { flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.completion-pop-doc {
  position:relative; flex:0 0 10px; height:12px; border:1px solid #b6a6c3; border-radius:2px;
  background:linear-gradient(#b6a6c3,#b6a6c3) 2px 3px/4px 1px no-repeat,linear-gradient(#b6a6c3,#b6a6c3) 2px 6px/4px 1px no-repeat;
}
.completion-pop-open {
  margin-left:auto; flex-shrink:0; padding:5px 10px; border-radius:8px;
  background:#d7c2f2; color:#2c2137; font-size:11px; font-weight:800; box-shadow:0 2px 8px #b49bd855;
  transition:background .15s ease, transform .15s ease;
}
.completion-reports .completion-pop:hover .completion-pop-open { background:#e6d6f8; transform:translateX(2px); }
/* 닫기(×)는 카드 오른쪽 위 안쪽에 겹쳐 둔다(테마와 상관없이 위치를 여기서 정한다) */
.completion-reports .completion-report-wrap { position:relative; }
.completion-reports .completion-report-dismiss {
  position:absolute; z-index:1; display:grid; place-items:center; padding:0; border:0; cursor:pointer; pointer-events:auto; line-height:1;
  top:8px; right:8px; width:22px; height:22px; border-radius:6px;
  background:transparent; color:#cbbad8; font-size:16px; font-weight:300;
}
.completion-reports .completion-report-dismiss:hover { background:#ffffff14; color:#fff; }
@media (max-width:600px) {
  .completion-reports { width:min(300px,calc(100vw - 24px)); }
}

/* 완료 팝업으로 이동하면: 질문에 금빛이 은은하게 번지며 살짝 떠오르고, 이어서 답변이 아래에서 부드럽게 떠올라
   문단이 차례로 스며든다. 튀거나 깜빡이지 않게 크기 변화 없이 위치·투명도·빛만 천천히 움직인다 */
.messages .user-msg.completion-focus { animation:question-recall 1.6s cubic-bezier(.22,1,.36,1) calc(150ms + var(--focus-offset,0ms)) both; }
.messages .user-msg.completion-focus::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,#fff3d055 50%,transparent 65%) -150% 0/250% 100% no-repeat;
  animation:question-shine 1.4s cubic-bezier(.4,0,.2,1) calc(300ms + var(--focus-offset,0ms)) both;
}
.messages .completion-focus .speech-bubble {
  animation:
    answer-rise .9s cubic-bezier(.22,1,.36,1) calc(550ms + var(--focus-offset,0ms)) both,
    completion-result-glow 3s ease-in-out calc(550ms + var(--focus-offset,0ms)) both;
}
.messages .completion-focus .dialogue-portrait { animation:portrait-rise .9s cubic-bezier(.22,1,.36,1) calc(550ms + var(--focus-offset,0ms)) both; }
.messages .completion-focus .speech-bubble > .body > * { animation:answer-line-in .7s cubic-bezier(.22,1,.36,1) calc(var(--line-delay,800ms) + var(--focus-offset,0ms)) both; }
@keyframes question-recall {
  0% { transform:translateY(6px); box-shadow:0 0 0 0 #e9c48a00; }
  40% { transform:none; box-shadow:0 0 0 2px #e9c48a99,0 0 24px #d4ac7055; }
  100% { transform:none; box-shadow:0 0 0 0 #e9c48a00; }
}
@keyframes question-shine { from { background-position:-150% 0; } to { background-position:150% 0; } }
@keyframes answer-rise {
  from { opacity:0; transform:translateY(18px); filter:blur(3px); }
  to { opacity:1; transform:none; filter:none; }
}
@keyframes completion-result-glow {
  0% { box-shadow:0 0 0 0 #e9c48a00; }
  35% { box-shadow:0 0 0 2px #e9c48a88,0 0 28px #d4ac7044; }
  100% { box-shadow:0 0 0 0 #e9c48a00; }
}
@keyframes portrait-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes answer-line-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) {
  .messages .user-msg.completion-focus, .messages .user-msg.completion-focus::after,
  .messages .completion-focus .speech-bubble, .messages .completion-focus .dialogue-portrait,
  .messages .completion-focus .speech-bubble > .body > * { animation:none; }
  .messages .user-msg.completion-focus { outline:2px solid #e9c48a; }
}
.completion-pop-key { margin-left:8px; padding:1px 6px; border:1px solid #2c213740; border-radius:5px; background:#ffffff59; color:#4a3a58; font:600 10px/1.5 var(--font); }
@media (pointer:coarse) { .completion-pop-key { display:none; } }

/* 휴대폰·태블릿: 완료 알림은 한 줄짜리 얇은 띠로 줄여 대화를 가리지 않게 하고, 잠시 뒤 스스로 사라진다 */
@media (max-width:600px), (pointer:coarse) and (max-width:1024px) {
  .completion-reports {
    top:calc(8px + env(safe-area-inset-top)); bottom:auto; right:50%; transform:translateX(50%);
    width:min(360px,calc(100vw - 24px));
  }
  .completion-reports .completion-pop {
    flex-direction:row; align-items:center; gap:8px; padding:6px 34px 6px 8px; border-radius:99px;
    box-shadow:0 6px 18px #0c0614aa;
  }
  .completion-reports .completion-pop-head { flex:none; padding-right:0; }
  .completion-reports .completion-pop-avatar { flex-basis:24px; width:24px; height:24px; }
  .completion-reports .completion-pop-sep, .completion-reports .completion-pop-when,
  .completion-reports .completion-pop-result, .completion-reports .completion-pop-foot { display:none; }
  .completion-reports .completion-pop-who { font-size:12px; }
  .completion-reports .completion-pop-who strong { display:none; }
  .completion-reports .completion-pop-title { flex:1; min-width:0; margin:0; font-size:12.5px; font-weight:700; }
  .completion-reports .completion-report-dismiss { top:50%; right:7px; transform:translateY(-50%); background:transparent; }
}

/* 넓은 화면: 알림을 하나씩 밑으로 쌓는다. 대화창 오른쪽에 자리가 있으면 그 빈 공간에 대화창 윗선과 맞춰 붙인다 */
.completion-reports.stacked {
  display:flex; flex-direction:column; gap:10px; max-height:calc(100dvh - 48px);
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none;
}
.completion-reports.stacked::-webkit-scrollbar { display:none; }
.completion-reports.stacked > .completion-report-wrap { flex-shrink:0; }
.completion-reports.beside-chat { right:auto; bottom:auto; }
.completion-reports.beside-chat .completion-pop-title { -webkit-line-clamp:2; }
.completion-reports.beside-chat .completion-pop-result { -webkit-line-clamp:2; }
.completion-reports.stacked .completion-pop-key[hidden] { display:none; }

/* 넓은 화면에서 대화창 옆에 알림 놓을 자리가 모자라면 대화 영역 오른쪽을 비워 알림 기둥 자리를 만든다(tasks.js 가 폭을 정한다) */
.main.reports-docked { box-sizing:border-box; padding-right:var(--report-dock,0px); }