/* The existing conversation UI, set inside Seolhwa's illustrated reading room. */
#bf-saju-preview{
  --bf-room-paper:#faf6ec;
  --bf-room-ink:#2b332d;
  --bf-room-pine:#293f34;
  --bf-room-brass:#927d58;
  background:#443a2b url('./assets/saju-room-v1-1600.webp') center / cover no-repeat;
  color:var(--bf-room-ink);
}
#bf-saju-preview .bf-wrap{width:min(100%,1280px);max-width:1280px;padding-inline:32px}
#bf-saju-preview .bf-header{
  width:min(calc(100% - 64px),1216px);max-width:1216px;margin-top:20px;padding:10px 22px;
  border:1px solid var(--bf-room-brass);background:var(--bf-room-pine);color:#f7eedc;
}
#bf-saju-preview .bf-header .bf-logo{color:#f7eedc;font-size:25px}
#bf-saju-preview .bf-brand>span+span{color:#e2d8c1}
#bf-saju-preview .bf-header-link{color:#f0e5cf}
#bf-saju-preview .bf-main{padding-top:0;padding-bottom:max(24px,env(safe-area-inset-bottom))}
#bf-saju-preview .bf-chat-layout{grid-template-columns:300px minmax(0,1fr);gap:0;border:1px solid var(--bf-room-brass);background:var(--bf-room-paper);overflow:hidden}
#bf-saju-preview .bf-guide-figure{align-self:stretch;display:flex;flex-direction:column;min-height:0;padding:0;background:var(--bf-room-pine);overflow:hidden}
#bf-saju-preview .bf-guide-crop{display:block;flex:1;min-height:0;width:100%;height:auto;overflow:hidden}
#bf-saju-preview .bf-guide-picture{display:block;width:100%;height:100%}
#bf-saju-preview .bf-guide-crop img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 30%;transform:none}
#bf-saju-preview .bf-guide-figure figcaption{flex:none;margin:0;padding:24px 26px 28px;text-align:left;color:#f7eedc}
#bf-saju-preview .bf-guide-figure h1{color:#f7eedc;font-size:26px;line-height:1.55;margin-bottom:12px;font-weight:500}
#bf-saju-preview .bf-guide-figure figcaption>span{color:#e2d8c1;font-size:13px;line-height:1.85}
#bf-saju-preview .bf-chat-column{padding:12px 24px 14px;background:var(--bf-room-paper)}
#bf-saju-preview .bf-chat-toolbar{margin-bottom:10px;flex-wrap:wrap}
#bf-saju-preview .bf-new-reading{margin-inline-end:auto;padding-inline:12px;white-space:nowrap}
#bf-saju-preview .bf-chat-toolbar .bf-text-button{color:#384d3c}
#bf-saju-preview .bf-chat-scroll{scrollbar-color:#9b957d var(--bf-room-paper);padding-bottom:18px}
#bf-saju-preview .bf-suggested-questions{display:grid;grid-template-rows:1fr;margin:6px 0 18px;opacity:1;transition:grid-template-rows .18s ease-in-out,opacity .14s ease-out,margin .18s ease-in-out}
#bf-saju-preview .bf-suggested-content{min-height:0;overflow:hidden}
#bf-saju-preview .bf-suggested-questions[data-state="hiding"]{grid-template-rows:0fr;margin-block:0;opacity:0}
#bf-saju-preview .bf-suggested-questions[inert]{pointer-events:none}
@media(prefers-reduced-motion:reduce){#bf-saju-preview .bf-suggested-questions{transition:none}}
#bf-saju-preview .bf-suggested-label{color:var(--bf-room-ink);font-size:14px;line-height:1.7;margin:0 0 8px}
#bf-saju-preview .bf-suggested-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#bf-saju-preview .bf-suggested-question{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--bf-room-brass);background:var(--bf-room-paper);color:var(--bf-room-ink);font-size:14px;line-height:1.7;text-align:left;white-space:normal;overflow-wrap:anywhere}
#bf-saju-preview .bf-suggested-question:not(:disabled){cursor:pointer}
@media(max-width:760px){#bf-saju-preview .bf-suggested-list{grid-template-columns:minmax(0,1fr)}#bf-saju-preview .bf-suggested-question{font-size:14px;padding:8px 10px}}
#bf-saju-preview .bf-chat-compose{background:var(--bf-room-paper)}
#bf-saju-preview .bf-control{background:#fffdf6;border-color:#888570;color:var(--bf-room-ink)}
#bf-saju-preview textarea::placeholder{color:#646958}
#bf-saju-preview .bf-message-body{background:#e7ecdd;color:#293b2c}
#bf-saju-preview .bf-chat-message-user .bf-message-body{background:#ece3d2;color:#3c3c30}
#bf-saju-preview .bf-chat-author{color:#59644e}
#bf-saju-preview .bf-chat-event .bf-message-body{background:transparent;color:#59644e}
#bf-saju-preview .bf-compose-notice,#bf-saju-preview .bf-compose-label>span{color:#59644e}
#bf-saju-preview .bf-compose-label label{color:#42563d}
#bf-saju-preview .bf-utility-dialog,#bf-saju-preview .bf-profile-dialog,#bf-saju-preview .bf-result-dialog{background:var(--bf-room-paper);color:var(--bf-room-ink);border-color:var(--bf-room-brass)}
#bf-saju-preview .bf-utility-dialog::backdrop,#bf-saju-preview .bf-profile-dialog::backdrop,#bf-saju-preview .bf-result-dialog::backdrop{background:rgb(27 25 19 / .64)}
#bf-saju-preview .bf-message-profile-actions .bf-button{background:#fffdf6;border-color:#888570}
#bf-saju-preview .bf-result-guide img{object-fit:cover;object-position:50% 27%;transform:scale(1.55);transform-origin:50% 27%}
#bf-saju-preview .bf-result-guide{width:64px;height:82px}
#bf-saju-preview .bf-header :focus-visible{outline-color:#e9d5a8}
#bf-saju-preview :focus-visible{outline-color:#5a7147}
@media(min-width:761px) and (max-width:1000px){
  #bf-saju-preview .bf-chat-layout{grid-template-columns:240px minmax(0,1fr)}
  #bf-saju-preview .bf-wrap{padding-inline:24px}
  #bf-saju-preview .bf-header{width:calc(100% - 48px)}
  #bf-saju-preview .bf-chat-column{padding-inline:18px}
  #bf-saju-preview .bf-guide-figure figcaption{padding:20px}
  #bf-saju-preview .bf-guide-figure h1{font-size:23px}
}
@media(max-width:760px){
  #bf-saju-preview{background-image:url('./assets/saju-room-v1-960.webp');background-position:48% center}
  #bf-saju-preview .bf-wrap{padding-inline:12px}
  #bf-saju-preview .bf-header{width:calc(100% - 24px);margin-top:10px;padding:5px 14px;min-height:50px}
  #bf-saju-preview .bf-header .bf-logo{font-size:23px}
  #bf-saju-preview .bf-brand{gap:10px}
  #bf-saju-preview .bf-main{padding-top:0;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  #bf-saju-preview .bf-chat-layout{display:flex;gap:0}
  #bf-saju-preview .bf-guide-figure{display:flex;flex-direction:row;flex:none;align-items:center;padding:12px 14px;gap:14px;min-height:84px}
  #bf-saju-preview .bf-guide-crop{flex:0 0 56px;width:56px;height:64px}
  #bf-saju-preview .bf-guide-crop img{object-position:50% 25%;transform:scale(1.65);transform-origin:50% 25%}
  #bf-saju-preview .bf-guide-figure figcaption{padding:0}
  #bf-saju-preview .bf-guide-figure h1{font-size:18px;line-height:1.6;margin:0}
  #bf-saju-preview .bf-guide-figure h1 br{display:none}
  #bf-saju-preview .bf-guide-figure figcaption>span{display:none}
  #bf-saju-preview .bf-chat-column{padding:4px 12px 8px}
  #bf-saju-preview .bf-chat-toolbar{margin-bottom:2px;gap:22px}
  #bf-saju-preview .bf-chat-scroll{padding-bottom:12px;scrollbar-gutter:auto}
  #bf-saju-preview .bf-message-body{padding:12px 14px}
  #bf-saju-preview .bf-chat-compose{padding-top:8px}
  #bf-saju-preview .bf-compose-notice{font-size:11px}
  #bf-saju-preview .bf-compose-notice .bf-text-button{font-size:11px}
  #bf-saju-preview .bf-result-guide{width:52px;height:66px}
  #bf-saju-preview .bf-result-guide img{object-position:50% 25%;transform:scale(1.55);transform-origin:50% 25%}
}
/* Short visual viewports include an open software keyboard, even when layout height stays tall. */
#bf-saju-preview[data-short-viewport] .bf-header{display:none}
#bf-saju-preview[data-short-viewport] .bf-main{padding:6px 12px max(6px,env(safe-area-inset-bottom))}
#bf-saju-preview[data-short-viewport] .bf-chat-column{padding:2px 12px 6px}
#bf-saju-preview[data-short-viewport] .bf-chat-toolbar{margin-bottom:0}
#bf-saju-preview[data-short-viewport] .bf-chat-compose{padding-top:4px}
#bf-saju-preview[data-short-viewport] .bf-chat-compose textarea{height:52px;min-height:52px}
#bf-saju-preview[data-short-viewport] .bf-compose-notice{display:none}
@media(min-width:761px){
  #bf-saju-preview[data-short-viewport] .bf-chat-layout{grid-template-columns:180px minmax(0,1fr)}
  #bf-saju-preview[data-short-viewport] .bf-guide-figure figcaption{padding:14px 16px}
  #bf-saju-preview[data-short-viewport] .bf-guide-figure h1{font-size:19px;margin:0}
  #bf-saju-preview[data-short-viewport] .bf-guide-figure figcaption>span{display:none}
}
@media(max-width:760px){
  #bf-saju-preview[data-short-viewport] .bf-guide-figure{display:none}
  #bf-saju-preview[data-short-viewport] .bf-main{padding-inline:6px}
  #bf-saju-preview[data-short-viewport] .bf-chat-column{padding-inline:10px}
}

/* The report is another page in the same reading room. */
#bf-saju-preview .bf-result-dialog-bar{background:var(--bf-room-paper)}
#bf-saju-preview .bf-result-room-intro{margin-bottom:28px;background:var(--bf-room-pine)}
#bf-saju-preview .bf-result-room-scene{height:122px;overflow:hidden;background:#56452e}
#bf-saju-preview .bf-result-room-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
#bf-saju-preview .bf-result-room-intro .bf-result-heading{grid-template-columns:64px minmax(0,1fr);align-items:start;gap:18px;padding:22px 24px 24px;margin:0;color:#f7eedc}
#bf-saju-preview .bf-result-room-intro #bf-result-title{font-size:26px;color:#f7eedc;font-weight:500;line-height:1.5;margin-bottom:10px}
#bf-saju-preview .bf-result-room-intro #bf-result-scope{font-size:13px;line-height:1.85;color:#e2d8c1;max-width:66ch}
#bf-saju-preview .bf-result-room-intro .bf-result-guide{width:64px;height:82px;margin-top:4px}
#bf-saju-preview .bf-recap{gap:26px}
#bf-saju-preview .bf-recap h2{font-weight:500;color:#344c37;font-size:18px;line-height:1.6}
#bf-saju-preview .bf-recap p{font-size:16px;line-height:1.95;color:var(--bf-room-ink);max-width:68ch}
#bf-saju-preview .bf-consultation-reading{min-width:0}
#bf-saju-preview .bf-consultation-reading p{white-space:pre-wrap}
#bf-saju-preview .bf-recap-action{background:#e7ecdd;padding:20px 22px}
#bf-saju-preview .bf-result-closing{font-size:15px;line-height:1.9;color:#40523a}
#bf-saju-preview .bf-result-visuals{margin-top:28px}
#bf-saju-preview .bf-visual-gallery{align-items:start;gap:24px}
#bf-saju-preview .bf-visual-gallery figure{background:#fffdf6;border:1px solid #b7aa8d;padding:14px}
#bf-saju-preview .bf-visual-gallery img{width:100%;height:auto;max-height:440px;aspect-ratio:auto;object-fit:contain;background:#f2ecdf}
#bf-saju-preview .bf-visual-gallery figcaption{padding-top:14px}
#bf-saju-preview .bf-visual-gallery h3{font-size:18px;line-height:1.65;overflow-wrap:anywhere}
#bf-saju-preview .bf-visual-gallery p{font-size:14px;line-height:1.85;overflow-wrap:anywhere}
#bf-saju-preview .bf-result-actions .bf-button{font-size:14px;min-height:48px}
#bf-saju-preview .bf-result-guide{flex:none}
#bf-saju-preview .bf-result-pdf{background:var(--bf-room-paper)}
#bf-saju-preview .bf-pdf-preview-heading{flex-wrap:wrap;gap:8px 16px}
#bf-saju-preview .bf-result-dialog[data-result-view="pdf"] #bf-pdf-preview{background:#e6dfcf;border-color:#9b9179}
#bf-saju-preview .bf-result-view-switch .bf-button{background:#fffdf6;border-color:#888570}
#bf-saju-preview .bf-result-view-switch [aria-pressed="true"]{background:#344a3b;color:#fff;border-color:#344a3b}
@media(max-width:760px){
  #bf-saju-preview .bf-result-room-scene{height:52px}
  #bf-saju-preview .bf-result-room-intro{margin-bottom:18px}
  #bf-saju-preview .bf-result-room-intro .bf-result-heading{grid-template-columns:44px minmax(0,1fr);gap:10px;padding:14px 14px 16px}
  #bf-saju-preview .bf-result-room-intro #bf-result-title{font-size:20px;line-height:1.5;margin-bottom:6px}
  #bf-saju-preview .bf-result-room-intro #bf-result-scope{font-size:13px;line-height:1.7}
  #bf-saju-preview .bf-result-room-intro .bf-result-guide{width:44px;height:56px}
  #bf-saju-preview .bf-recap{gap:22px}
  #bf-saju-preview .bf-recap h2{font-size:17px}
  #bf-saju-preview .bf-recap p{font-size:16px;line-height:1.9}
  #bf-saju-preview .bf-recap-action{padding:18px 16px}
  #bf-saju-preview .bf-visual-gallery{grid-template-columns:minmax(0,1fr);gap:22px}
  #bf-saju-preview .bf-visual-gallery[data-count="1"]{grid-template-columns:minmax(0,1fr)}
  #bf-saju-preview .bf-visual-gallery figure{padding:12px}
  #bf-saju-preview .bf-visual-gallery img{max-height:min(70dvh,520px)}
  #bf-saju-preview .bf-visual-gallery h3{font-size:17px}
  #bf-saju-preview .bf-result-actions{gap:10px}
  #bf-saju-preview .bf-result-actions .bf-button{font-size:14px;line-height:1.6}
}
@media(max-width:480px){
  #bf-saju-preview .bf-result-actions{grid-template-columns:minmax(0,1fr)}
  #bf-saju-preview .bf-result-actions [data-pdf]{grid-column:auto}
  #bf-saju-preview .bf-pdf-preview-heading{align-items:stretch;flex-direction:column}
  #bf-saju-preview .bf-pdf-preview-heading #bf-pdf-preview-download{align-self:flex-start;max-width:100%}
}

/* Read-only title focus is announced without looking like an editable field. */
#bf-saju-preview #bf-result-title:focus{outline:none}

#bf-saju-preview .bf-result-room-intro #bf-result-title{text-wrap:balance}
@media(max-width:360px){
  #bf-saju-preview .bf-result-room-intro .bf-result-heading>div{display:contents}
  #bf-saju-preview .bf-result-room-intro .bf-result-guide{grid-column:1;grid-row:1}
  #bf-saju-preview .bf-result-room-intro #bf-result-title{grid-column:2;align-self:center;margin-bottom:0}
  #bf-saju-preview .bf-result-room-intro #bf-result-scope{grid-column:1 / -1}
}
#bf-saju-preview[data-short-viewport] .bf-result-room-scene{display:none}
#bf-saju-preview .bf-visual-gallery[data-count="1"]{justify-content:center}

/* Keep Korean words and sentence paragraphs readable in personal results. */
#bf-saju-preview .bf-visual-gallery h3,#bf-saju-preview .bf-visual-gallery p,#bf-saju-preview .bf-result-heading p,#bf-saju-preview .bf-consultation-reading p,#bf-saju-preview .bf-profile-dialog p,#bf-saju-preview .bf-profile-dialog .bf-field-help{word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
#bf-saju-preview .bf-visual-gallery p+p{margin-top:8px}
#bf-saju-preview [data-pdf][aria-disabled="true"]{pointer-events:none;opacity:.65}

/* Keep the native dialogs within the visible viewport, including keyboard panning. */
#bf-saju-preview{
  --bf-dialog-top-gap:max(16px,env(safe-area-inset-top));
  --bf-dialog-bottom-gap:max(16px,env(safe-area-inset-bottom));
  --bf-dialog-left-gap:max(16px,env(safe-area-inset-left));
  --bf-dialog-right-gap:max(16px,env(safe-area-inset-right));
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
}
#bf-saju-preview .bf-profile-dialog,#bf-saju-preview .bf-result-dialog,#bf-saju-preview .bf-utility-dialog{
  position:fixed;height:fit-content;
  top:calc(var(--bf-viewport-offset,0px) + var(--bf-dialog-top-gap));
  bottom:calc(100dvh - var(--bf-viewport-offset,0px) - var(--bf-viewport-height,100dvh) + var(--bf-dialog-bottom-gap));
  left:var(--bf-dialog-left-gap);right:var(--bf-dialog-right-gap);margin:auto;
  max-width:calc(100vw - var(--bf-dialog-left-gap) - var(--bf-dialog-right-gap));
  max-height:calc(var(--bf-viewport-height,100dvh) - var(--bf-dialog-top-gap) - var(--bf-dialog-bottom-gap));
}
#bf-saju-preview .bf-result-dialog[open][data-result-view="pdf"]{height:calc(var(--bf-viewport-height,100dvh) - var(--bf-dialog-top-gap) - var(--bf-dialog-bottom-gap))}
#bf-saju-preview .bf-recap p,#bf-saju-preview .bf-result-closing,#bf-saju-preview .bf-result-story p,#bf-saju-preview .bf-result-details p,#bf-saju-preview .bf-confirmed-result p,#bf-saju-preview .bf-result-save-notice{word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
#bf-saju-preview .bf-profile-help [data-forget-profile]{display:inline-flex;align-items:center;min-width:44px;min-height:44px;padding:8px 4px}
#bf-saju-preview .bf-compose-notice .bf-text-button{min-width:44px;min-height:44px}
#bf-saju-preview .bf-result-recovery{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-block:14px}
#bf-saju-preview .bf-result-recovery .bf-button,#bf-saju-preview .bf-result-recovery .bf-text-button,#bf-saju-preview #bf-visual-refresh,#bf-saju-preview #bf-image-reload,#bf-saju-preview #bf-result-resume-top{min-width:44px;min-height:44px;font-size:14px;line-height:1.6;white-space:normal}
#bf-saju-preview .bf-result-recovery .bf-text-button{padding:8px 4px}
#bf-saju-preview .bf-result-save-notice,#bf-saju-preview .bf-recap .bf-result-save-notice{max-width:68ch;margin:0;font-size:14px;line-height:1.75;color:#4c5d43}
@media(max-width:760px){
  #bf-saju-preview .bf-result-dialog .bf-result-heading #bf-result-title{font-size:20px}
  #bf-saju-preview{
    --bf-dialog-top-gap:max(12px,env(safe-area-inset-top));
    --bf-dialog-bottom-gap:max(12px,env(safe-area-inset-bottom));
    --bf-dialog-left-gap:max(12px,env(safe-area-inset-left));
    --bf-dialog-right-gap:max(12px,env(safe-area-inset-right));
  }
}
@media(max-width:400px){
  #bf-saju-preview .bf-profile-dialog .bf-profile-grid{grid-template-columns:minmax(0,1fr)}
  #bf-saju-preview .bf-profile-step-actions{flex-wrap:wrap;gap:8px 12px}
  #bf-saju-preview .bf-profile-step-actions>.bf-button{flex:1 1 180px;min-width:0}
}

/* The save guide keeps its full touch target and text space above the PDF. */
#bf-saju-preview .bf-pdf-save-help{flex:none;min-width:0;font-size:14px;line-height:1.75;color:#4c5d43}
#bf-saju-preview .bf-pdf-save-help>summary{min-height:44px;padding-block:10px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
#bf-saju-preview .bf-pdf-save-help>p{margin:8px 0 12px;font-size:14px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}
#bf-saju-preview #bf-pdf-preview-name{flex:none;min-width:0;max-width:100%;font-size:13px;line-height:1.6;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}

/* Keep the answer's save note and follow-up link together without crowding the next reading. */
#bf-saju-preview .bf-recap-reading{row-gap:8px}
#bf-saju-preview .bf-recap-reading>.bf-recap-insight,#bf-saju-preview .bf-recap-reading>.bf-consultation-reading{margin-top:14px}
#bf-saju-preview #bf-result-resume-top{justify-self:start;text-align:left;padding:8px 0}
@media(max-width:760px){
  #bf-saju-preview .bf-recap-reading>.bf-recap-insight,#bf-saju-preview .bf-recap-reading>.bf-consultation-reading{margin-top:10px}
}

/* Render the same downloadable PDF without a browser PDF plug-in. */
#bf-saju-preview .bf-pdf-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;flex:none}
#bf-saju-preview .bf-pdf-control-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
#bf-saju-preview .bf-pdf-controls .bf-button{min-width:44px;min-height:44px;padding:7px 10px;font-size:14px}
#bf-saju-preview #bf-pdf-page-number,#bf-saju-preview #bf-pdf-zoom-level{font-size:13px;white-space:nowrap}
#bf-saju-preview #bf-pdf-render-status{flex:none;margin:0;font-size:13px;line-height:1.6}
#bf-saju-preview #bf-pdf-render-status:empty{display:none}
#bf-saju-preview #bf-pdf-render-retry{flex:none;align-self:flex-start;min-height:44px}
#bf-saju-preview .bf-result-dialog[data-result-view="pdf"] #bf-pdf-preview{overflow-x:auto;overflow-y:scroll;overscroll-behavior:contain;min-height:240px;min-width:0}
#bf-saju-preview #bf-pdf-page{display:block;max-width:none;margin:0 auto;background:#fff}
