/* MediMind Lite — 복구 화면 요소의 자리 잡기 (만료 안내 · 입력 보관본 · 저장 대기 녹음 · 다시 로그인)
 * 색 · 테두리 · 아이콘 같은 모양은 style.css 의 공용 부품(.a-banner[data-kind], .a-dialog, .a-chip …)이 맡습니다.
 * 이 파일은 위치와 간격, [hidden] 처리만 정합니다. 색을 정의하지 않습니다 (디자인 명세 §5.14 배치, §9.1). */

/* 숨김은 언제나 이깁니다(공용 부품이 display 를 정해도). */
.a-banner[hidden],
.a-banner-stack[hidden],
.a-file-name[hidden],
.a-draft-confirm[hidden] { display: none !important; }

/* 배너 묶음: 진료 화면 머리 아래 전체 폭(저장되지 않은 녹음 · 기기 보관 불가 안내). */
.a-banner-stack { display: grid; gap: 8px; margin: 0 0 12px; }
.a-banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.a-banner > .a-banner-text { flex: 1 1 auto; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.a-banner-text > b + span { display: block; }

/* 만료 안내: .a-stage 의 첫 자식(머리 위, 휴대폰 재고에서는 도구 줄 위). 붙어 있지 않고 흐름을 따라 내려갑니다. */
.a-stage > .a-expiry-banner { margin: 0 0 12px; }

/* 입력 보관본 안내: 요약 칸 위(메모 창 맨 위). 비어 있으면 자리를 차지하지 않습니다. */
.a-draft-restore:empty { display: none; }
.a-draft-restore > .a-banner { margin: 0 0 12px; }
.a-draft-confirm { margin-right: 4px; }

/* 저장 대기 녹음: 녹음 막대 아래. */
#pending-audio:empty { display: none; }
#pending-audio > .a-banner { margin-top: 10px; }

/* 진료 기록 충돌: 아래 버튼 줄 바로 위. */
#conflict:not([hidden]) { margin: 12px 0 0; }

/* 녹음 막대의 파일 선택 버튼과 파일 이름. */
.a-rec .a-file-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 진료 화면 오른쪽 위: AI 표시와 저장 상태를 두 줄로. */
.a-stage-right .a-chip { display: inline-flex; align-items: center; }
.a-stage-right #save-state { display: block; margin-top: 4px; }

/* 세션 만료: 다시 로그인 대화상자가 열려 있는 동안에는 같은 내용을 말하는 빨간 오류 토스트를 숨깁니다.
   만료는 되돌릴 수 있는 상태이고, 안내와 실패(다른 계정 · 창 차단)는 대화상자 안에서 보여 줍니다.
   다시 로그인하면 성공 토스트가 이 자리를 대신합니다(명세 §5.13 · §7). 연결 끊김 토스트는 그대로 둡니다. */
body:has(> dialog#reauth[open]) > #notice.error { display: none; }

/* 대화상자 안의 버튼 줄(다시 로그인 · 로그아웃 확인). */
.a-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.a-dialog .a-banner { margin-top: 12px; }
#drafts-logout .a-dialog-sub { margin-top: 4px; }

/* 인라인 style 을 대신하는 배치 도구(CSP 가 style 속성을 막습니다). style.css 에도 같은 규칙이 있으며, 겹쳐도 결과는 같습니다. */
.a-grow-1 { flex: 1 1 0; }
.a-grow-2 { flex: 2 1 0; }
.a-inline { display: inline; }

@media (max-width: 700px) {
  .a-banner-actions { justify-content: flex-end; }
  .a-dialog-actions { flex-direction: column-reverse; align-items: stretch; }
}