/* Office conversation: two voices floating in the scene. */
.office-hud .office-history { display:none; }
.office-scene.reply-expanded { overflow:visible; z-index:8; }
.office-conversation {
  position:absolute; z-index:3; inset:18% 4% auto 46%; max-height:76%;
  display:flex; flex-direction:column; align-items:flex-start; gap:24px;
  pointer-events:none; transition:top .18s ease, max-height .18s ease, height .18s ease;
}
.office-conversation.expanded {
  top:6px; bottom:auto; height:calc(100dvh - 134px); max-height:calc(100dvh - 134px);
  gap:10px; z-index:8;
}
.office-conversation.expanded .office-user-bubble { display:none; }
.office-conversation.expanded .office-reply-bubble {
  flex:1 1 auto; width:100%; max-height:100%;
  box-shadow:0 18px 48px #0f091c66;
}
.office-conversation.expanded .office-reply-text { flex:1 1 auto; }
.office-user-bubble, .office-reply-bubble {
  position:relative; min-width:0; max-width:100%; pointer-events:auto;
  box-shadow:0 10px 28px #140d2429; backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.office-user-bubble {
  align-self:flex-end; flex-shrink:0; max-width:88%; max-height:210px; overflow:auto;
  padding:12px 18px; border:1px solid #dec7ed66; border-radius:22px 22px 5px 22px;
  background:linear-gradient(135deg,#9b7ab7e8,#70567fef); color:#fff5ff;
  font-size:15px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere;
  scrollbar-width:thin;
}
.office-reply-bubble {
  flex:0 1 auto; min-height:0; padding:20px 24px; border:1px solid #d9bbdc77;
  border-radius:6px 26px 26px 26px; background:linear-gradient(135deg,#493347ed,#292335f2);
  color:#f6edf6; display:flex; flex-direction:column;
}
/* 말꼬리: 45° 돌린 작은 사각형의 바깥 절반만 보여, 말풍선 테두리가 끊기지 않고 꼬리 끝까지 이어진다 */
.office-reply-bubble::before {
  content:''; position:absolute; z-index:1; left:-8px; top:16px; width:14px; height:14px;
  background:#47334a; border-left:1px solid #d9bbdc77; border-bottom:1px solid #d9bbdc77;
  transform:rotate(45deg); clip-path:polygon(0 0,0 100%,100% 100%); pointer-events:none;
}
.office-reply-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-shrink:0; }
.office-speaker { color:#b5dfcf; font-size:15px; font-weight:650; }
[data-speaker='claude'] .office-speaker { color:#f1bb9e; }
[data-speaker='gemini'] .office-speaker { color:#cbc4fa; }
[data-speaker='beiko'] .office-speaker { color:#efbdd9; }
.office-status { color:#c6b6cc; font-size:10px; }
.office-status.running { color:#c1decf; }
.office-status.running::before { content:''; display:inline-block; width:5px; height:5px; margin-right:6px; border-radius:50%; background:currentColor; }
.office-expand {
  margin-left:auto; padding:4px 10px; border:1px solid #e2c7eb4d; border-radius:99px;
  background:#ffffff12; color:#ead9f2; font-size:11px; line-height:1.2; cursor:pointer;
}
.office-expand:hover { background:#ffffff22; border-color:#edd6f588; color:#fff; }
.office-expand[aria-expanded='true'] { background:#b99ad938; border-color:#dec5f7aa; color:#fff; }
.office-reply-text { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; font-size:16px; line-height:1.85; overflow-wrap:anywhere; }
.office-reply-text > :first-child { margin-top:0; }
.office-reply-text > :last-child { margin-bottom:0; }
.office-reply-text p { margin:0 0 .8em; }
.office-reply-text a { color:#dfc3ff; }
.office-reply-text pre { padding:12px; background:#1c1824; border-radius:10px; overflow:auto; }
.office-reply-text pre code { padding:0; background:none; }
.office-reply-text ul, .office-reply-text ol { padding-left:1.4em; }
.office-reply-text table { width:100%; border-collapse:collapse; font-size:14px; }
.office-reply-text th, .office-reply-text td { padding:6px 10px; border-bottom:1px solid #d9bbdc33; text-align:left; }
.office-reply-text th { color:#ebd8f5; border-bottom-color:#d9bbdc66; font-weight:600; }
.office-reply-text img { display:block; width:auto; height:auto; max-width:100%; max-height:min(50vh,480px); object-fit:contain; margin:10px 0; }
.office-reply-text blockquote { margin:0 0 .8em; padding-left:12px; border-left:2px solid #b69aca66; }
.composer { border:1px solid #e0c0dd55; border-radius:20px; margin-top:12px; }
.composer .picker { border-top:0; padding-top:0; }
.composer textarea { background:#1e182449; }
.history-open .composer { border-radius:20px; }
@media (min-width:1101px) {
  .main { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; column-gap:0; }
  .office-scene, .messages { grid-column:1; grid-row:1; }
  .composer { grid-column:1; grid-row:2; margin:12px 0 0; }
  .composer .picker { border-top:0; padding-top:0; }
  .office-character { left:0; width:52%; max-width:52%; height:100%; }
  .messages { border-radius:20px; }
  .composer-actions { width:auto; }
}
@media (max-width:1100px) {
  .office-conversation { inset:17% 4% auto 43%; gap:18px; max-height:78%; }
  .office-conversation.expanded { top:6px; bottom:auto; height:calc(100dvh - 155px); max-height:calc(100dvh - 155px); }
  .office-user-bubble { font-size:13px; padding:10px 14px; }
  .office-reply-bubble { padding:15px 18px; }
  .office-reply-text { font-size:14px; }
  .composer { margin:10px; }
}
@media (max-width:600px) {
  .office-character { left:23%; max-width:80%; }
  .office-conversation { inset:auto 14px 14px 27%; max-height:75%; gap:13px; }
  .office-conversation.expanded { inset:6px 14px auto 14px; height:calc(100dvh - 145px); max-height:calc(100dvh - 145px); }
  .office-user-bubble { max-width:92%; max-height:85px; font-size:12px; padding:8px 12px; }
  .office-reply-bubble { padding:13px 16px; border-radius:5px 20px 20px 20px; }
  .office-reply-head { gap:8px; margin-bottom:6px; }
  .office-speaker { font-size:13px; }
  .office-status { font-size:9px; }
  .office-expand { padding:3px 8px; font-size:10px; }
  .office-reply-text { font-size:13px; line-height:1.75; }
}
@media (max-height:620px) {
  .office-conversation { top:15%; bottom:auto; max-height:80%; gap:10px; }
  .office-conversation.expanded { top:6px; bottom:auto; height:calc(100dvh - 125px); max-height:calc(100dvh - 125px); }
  .office-user-bubble { max-height:60px; }
}
@media (prefers-reduced-motion:reduce) {
  .office-conversation { transition:none; }
}

/* The office itself contains the conversation history; the character stays in place. */
.office-conversation {
  top:8%; bottom:14px; max-height:none; overflow-y:auto; overflow-x:hidden;
  pointer-events:auto; padding:14px 16px 36px; scrollbar-width:thin;
  scrollbar-color:#c2a6d055 transparent; overscroll-behavior:contain;
}
.office-conversation:focus { outline:none; }
.office-conversation:focus-visible { outline:1px solid #ddc5ee66; outline-offset:2px; }
.office-previous-turns, .office-following-turns { display:flex; flex-direction:column; align-items:flex-start; gap:24px; width:100%; flex-shrink:0; }
.office-previous-turns:empty, .office-following-turns:empty { display:none; }
.office-conversation:not(.expanded) .office-user-bubble { max-height:none; overflow:visible; }
.office-conversation:not(.expanded) .office-reply-bubble { flex-shrink:0; }
.office-conversation:not(.expanded) .office-reply-text { overflow:visible; }
.office-conversation.expanded { overflow:visible; }
.office-conversation.expanded .office-previous-turns, .office-conversation.expanded .office-following-turns { display:none; }
.office-latest { position:absolute; bottom:16px; right:6%; z-index:5; padding:8px 14px; font-size:12px; border-radius:99px; color:#f6e9ff; background:#5c416be8; border:1px solid #d9bde580; box-shadow:0 4px 18px #21132d44; }
@media (max-width:1100px) {
  .office-conversation { top:8%; bottom:14px; max-height:none; }
}
@media (max-width:600px) {
  .office-conversation { top:12%; bottom:10px; max-height:none; padding:10px 12px 36px; }
  .office-previous-turns, .office-following-turns { gap:13px; }
}
@media (max-height:620px) {
  .office-conversation { top:8%; bottom:10px; max-height:none; }
}

/* A warm task slip distinguishes the queued request from the conversation. */
.office-scene { --office-next-space:128px; }
.office-scene .office-conversation:not(.expanded) { bottom:var(--office-next-space); }
.office-scene .office-latest { bottom:calc(var(--office-next-space) + 6px); }
.office-next-work {
  position:absolute; inset:auto 4% 12px 46%; z-index:4; display:flex; gap:13px;
  padding:15px 18px; min-height:92px; max-height:112px; border:1px solid #ddbd8566;
  border-top:2px solid #dcb67a; border-radius:15px;
  background:linear-gradient(115deg,#574332ee,#302a34f2); color:#f2e2c9;
  box-shadow:0 8px 26px #170f222b; backdrop-filter:blur(18px);
}
.office-next-icon { flex-shrink:0; display:grid; place-items:center; align-self:flex-start; width:32px; height:32px; border-radius:10px; border:1px solid #e0be8266; background:#d7ac631b; color:#f0ce91; font-size:22px; }
.office-next-copy { min-width:0; display:flex; flex-direction:column; gap:7px; }
.office-next-head { display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; }
.office-next-head strong { color:#f4d598; font-size:12px; letter-spacing:.04em; }
.office-next-agent { font-size:10px; color:#cdbb9f; }
.office-next-content { min-height:0; overflow:auto; scrollbar-width:thin; font-size:13px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.office-next-work:not(.has-work) { border-color:#c2b3a64d; border-top-color:#baa99488; background:linear-gradient(115deg,#423a39cf,#292531dc); }
.office-next-work:not(.has-work) .office-next-content { color:#c9bdb2; }
.reply-expanded .office-next-work { visibility:hidden; }
@media (max-width:1100px) {
  .office-next-work { left:43%; padding:12px 14px; }
}
@media (max-width:600px) {
  .office-scene { --office-next-space:112px; }
  .office-next-work { left:14px; right:14px; bottom:8px; min-height:84px; max-height:96px; gap:10px; padding:10px 12px; }
  .office-next-content { font-size:12px; }
}
@media (max-height:620px) {
  .office-scene { --office-next-space:100px; }
  .office-next-work { max-height:86px; min-height:72px; padding:10px 12px; }
}

/* The history reaches near the top of the scene and dissolves into it with only a thin fade, keeping the reading area tall. */
.office-conversation:not(.expanded) {
  top:6px; padding-top:16px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 24px),transparent 100%);
}
@media (max-width:600px) {
  .office-conversation:not(.expanded) { padding-top:12px; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 20px),transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 20px),transparent 100%); }
}

.office-user-bubble:has(.office-attachments) { max-height:none; overflow:visible; }
.office-attachments { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; white-space:normal; }
.office-attachments a { display:block; min-width:0; max-width:100%; color:#fff5ff; overflow-wrap:anywhere; }
.office-attachments img { display:block; width:auto; max-width:100%; height:auto; max-height:220px; object-fit:contain; border:1px solid #f3dfff66; border-radius:10px; background:#24182d55; }

/* 방금 보낸 요청: 아래에서 톡 올라오며 금빛으로 한 번 반짝이고, 답변 말풍선이 바로 뒤따라 열린다 */
.office-request-row.office-new-turn { animation:office-request-in .55s cubic-bezier(.2,.9,.3,1.15) both; }
.office-new-turn .office-user-bubble { animation:office-request-glow 1.7s ease-out .15s both; }
.office-reply-bubble.office-new-turn { animation:office-reply-in .5s cubic-bezier(.2,.8,.25,1) .28s both; }
.messages .user-msg.fresh-request { animation:office-request-in .55s cubic-bezier(.2,.9,.3,1.15) var(--fresh-offset,0ms) both, office-request-glow 1.7s ease-out calc(150ms + var(--fresh-offset,0ms)) both; }
@keyframes office-request-in {
  from { opacity:0; transform:translateY(22px) scale(.94); }
  to { opacity:1; transform:none; }
}
@keyframes office-request-glow {
  0% { box-shadow:0 0 0 0 #f2cd8a00; }
  25% { box-shadow:0 0 0 4px #f2cd8acc,0 0 28px #e8b96a88; }
  55% { box-shadow:0 0 0 2px #f2cd8a77,0 0 14px #e8b96a44; }
  100% { box-shadow:0 0 0 0 #f2cd8a00; }
}
@keyframes office-reply-in {
  from { opacity:0; transform:translateY(16px); clip-path:inset(0 0 100% 0 round 26px); }
  to { opacity:1; transform:none; clip-path:inset(-40px round 26px); }
}
@media (prefers-reduced-motion:reduce) {
  .office-request-row.office-new-turn, .office-new-turn .office-user-bubble, .office-reply-bubble.office-new-turn, .messages .user-msg.fresh-request { animation:none; }
}

/* 작업 중: 글자 대신 답변 말풍선 테두리를 따라 빛이 돌고, 맡긴 질문은 금빛 테두리로 숨 쉬듯 강조된다 */
@property --bubble-spin { syntax:'<angle>'; initial-value:0deg; inherits:false; }
.office-status.running { display:none; }
.office-reply-bubble[data-status='running']::after, .messages .card.running .speech-bubble::after {
  content:''; position:absolute; inset:-1px; z-index:2; padding:2px; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from var(--bubble-spin),transparent 0 55%,#bfa6ff 72%,#9fe7cf 84%,#fff6 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:bubble-spin 2.2s linear infinite;
}
.office-request-row[data-status='running'] .office-user-bubble, .messages .user-msg:has(+ .responses .card.running) {
  border-color:#f2cd8a; animation:request-working 2.4s ease-in-out infinite;
}
@keyframes bubble-spin { to { --bubble-spin:360deg; } }
@keyframes request-working {
  0%,100% { box-shadow:0 0 0 1px #f2cd8a88,0 0 10px #e8b96a33; }
  50% { box-shadow:0 0 0 3px #f2cd8acc,0 0 24px #e8b96a77; }
}
@media (prefers-reduced-motion:reduce) {
  .office-reply-bubble[data-status='running']::after, .messages .card.running .speech-bubble::after { animation:none; background:#bfa6ff99; }
  .office-request-row[data-status='running'] .office-user-bubble, .messages .user-msg:has(+ .responses .card.running) { animation:none; box-shadow:0 0 0 2px #f2cd8acc; }
}

/* 다음 업무: 금빛 강조를 걷어내고 차분한 어두운 카드로. 대기 업무가 없으면 더 어둡게 가라앉힌다 */
.office-next-work {
  border:1px solid #ffffff14; border-top:1px solid #ffffff1f;
  background:#1d1822cc; color:#d9d0dc; box-shadow:0 6px 18px #0f0a1422;
}
.office-next-icon { border-color:#ffffff1a; background:#ffffff0a; color:#b8abbd; }
.office-next-head strong { color:#cbbdd2; font-weight:600; }
.office-next-agent { color:#9a8d9f; }
.office-next-work:not(.has-work) { border-color:#ffffff0d; border-top-color:#ffffff0d; background:#16121acc; opacity:.6; }
.office-next-work:not(.has-work) .office-next-icon { color:#7d7282; }
.office-next-work:not(.has-work) .office-next-head strong, .office-next-work:not(.has-work) .office-next-content { color:#8a7f8e; }

/* 다음 업무는 왼쪽 캐릭터 쪽 아래 구석으로 옮기고, 대화는 장면 맨 아래까지 쓴다 */
.office-scene { --office-next-space:14px; }
.office-next-work {
  inset:auto auto 14px 14px; width:min(300px,calc(39% - 28px)); min-height:0; max-height:96px;
  gap:10px; padding:10px 12px;
}
.office-next-icon { width:26px; height:26px; border-radius:8px; font-size:17px; }
.office-next-copy { gap:4px; }
.office-next-content { font-size:12px; line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
@container (max-width:680px) {
  .office-next-work { width:calc(26% - 24px); min-width:150px; }
}
/* 좁은 화면은 왼쪽 자리가 없어 아래에 한 줄짜리 띠로 줄인다 */
@container (max-width:480px) {
  .office-conversation, .office-latest { --office-next-space:54px; }
  .office-next-work { inset:auto 10px 8px 10px; width:auto; min-width:0; max-height:40px; padding:7px 10px; align-items:center; }
  .office-next-icon { width:22px; height:22px; font-size:14px; align-self:center; }
  .office-next-copy { flex-direction:row; align-items:center; gap:8px; }
  .office-next-head { flex-wrap:nowrap; flex-shrink:0; }
  .office-next-content { -webkit-line-clamp:1; }
}
@media (max-width:600px) {
  .office-scene { --office-next-space:54px; }
  .office-next-work { inset:auto 10px 8px 10px; width:auto; min-width:0; min-height:0; max-height:40px; padding:7px 10px; align-items:center; }
  .office-next-icon { width:22px; height:22px; font-size:14px; align-self:center; }
  .office-next-copy { flex-direction:row; align-items:center; gap:8px; }
  .office-next-head { flex-wrap:nowrap; flex-shrink:0; }
  .office-next-content { -webkit-line-clamp:1; }
}
.office-next-now {
  margin-left:auto; padding:4px 12px; border:1px solid #f0ce9199; border-radius:99px;
  background:linear-gradient(180deg,#e9c27e33,#d7ac6314); color:#ffe2ad; font-size:11px; font-weight:700; cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease;
}
.office-next-now:hover:not(:disabled) { background:#e9c27e4d; box-shadow:0 0 12px #f0ce9155; }
.office-next-now:disabled { opacity:.5; cursor:default; }
.office-next-now[hidden] { display:none; }
.office-next-remove {
  flex-shrink:0; width:24px; height:24px; margin-left:6px; padding:0; border:1px solid #ffffff33; border-radius:50%;
  background:#ffffff12; color:#f2e8f5cc; font-size:11px; line-height:1; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.office-next-now[hidden] + .office-next-remove { margin-left:auto; }
.office-next-remove:hover:not(:disabled) { background:#e0707040; border-color:#f0a0a088; color:#fff; }
.office-next-remove:disabled { opacity:.5; cursor:default; }
.office-next-remove[hidden] { display:none; }
.office-next-work .office-next-copy { flex:1; }

/* 사진 배경 위에서도 스크롤바가 늘 보이도록.
   맥은 스크롤할 때만 잠깐 뜨는 겹침 스크롤바가 기본이라, Chrome·Safari 는 ::-webkit-scrollbar 로 항상 보이는 막대를 그린다.
   Chrome 은 scrollbar-color·width 가 지정돼 있으면 ::-webkit-scrollbar 를 무시하므로 여기서 auto 로 되돌린다. */
.office-conversation, .office-reply-text, .office-user-bubble, .messages { scrollbar-width:auto; scrollbar-color:auto; }
.office-conversation::-webkit-scrollbar, .office-reply-text::-webkit-scrollbar, .office-user-bubble::-webkit-scrollbar, .messages::-webkit-scrollbar { width:12px; height:12px; }
.office-conversation::-webkit-scrollbar-track, .office-reply-text::-webkit-scrollbar-track, .office-user-bubble::-webkit-scrollbar-track, .messages::-webkit-scrollbar-track { background:#1a12242e; border-radius:12px; }
.office-conversation::-webkit-scrollbar-thumb, .office-reply-text::-webkit-scrollbar-thumb, .office-user-bubble::-webkit-scrollbar-thumb, .messages::-webkit-scrollbar-thumb { min-height:40px; background:#e3cdeedd; border-radius:12px; border:3px solid transparent; background-clip:padding-box; }
.office-conversation::-webkit-scrollbar-thumb:hover, .office-reply-text::-webkit-scrollbar-thumb:hover, .office-user-bubble::-webkit-scrollbar-thumb:hover, .messages::-webkit-scrollbar-thumb:hover { background:#f6ebfb; background-clip:padding-box; }
.office-conversation::-webkit-scrollbar-corner, .office-reply-text::-webkit-scrollbar-corner, .messages::-webkit-scrollbar-corner { background:transparent; }
/* Firefox 는 ::-webkit-scrollbar 를 모르므로 표준 속성으로 */
@supports (-moz-appearance:none) {
  .office-conversation, .office-reply-text, .office-user-bubble, .messages { scrollbar-width:auto; scrollbar-color:#e3cdeedd #1a12242e; }
}

/* 대화는 오른쪽 끝까지 넓게 쓰고, 입력창은 왼쪽 아래에 작게 둔다. */
.office-scene .office-conversation { left:var(--office-conv-left,32%); right:calc(var(--office-conv-right,0%) + 12px); }
.office-scene .office-latest { right:18px; }
.office-conversation .office-reply-bubble { width:100%; }
.office-conversation .office-user-bubble { max-width:96%; }
.office-reply-head .office-status, .office-reply-head .office-expand { flex-shrink:0; white-space:nowrap; }
@media (min-width:901px) {
  .main > .composer { width:50%; min-width:0; margin-left:0; margin-right:0; justify-self:start; align-self:flex-start; }
  .main > .composer .composer-main { min-width:min(120px,100%); }
  .main > .composer .composer-actions { flex-wrap:wrap; }
}
@media (max-width:900px) {
  .office-scene .office-conversation { left:8%; right:8px; }
}
@media (max-width:600px) {
  .office-scene .office-conversation { left:4px; right:4px; }
}

/* 대화 영역 왼쪽 경계 손잡이: 끌어서 폭 조절(두 번 누르면 기본값). 넓은 화면에서만 쓴다 */
.office-resize { display:none; }
@media (min-width:901px) {
  .office-resize {
    display:block; position:absolute; z-index:4; top:8%; bottom:var(--office-next-space,14px);
    left:var(--office-conv-left,32%); width:16px; transform:translateX(-50%);
    cursor:col-resize; touch-action:none;
  }
  .office-resize::before {
    content:''; position:absolute; top:50%; left:50%; width:4px; height:64px; transform:translate(-50%,-50%);
    border-radius:4px; background:#e8cfa2; opacity:0; transition:opacity .15s ease;
  }
  .office-scene:hover .office-resize::before { opacity:.35; }
  .office-resize:hover::before, .office-resize:focus-visible::before, .resizing-conversation .office-resize::before { opacity:1; background:#f3d69e; }
  .office-resize.office-resize-right { left:auto; right:calc(var(--office-conv-right,0%) + 12px); transform:translateX(50%); }
  .office-resize:focus-visible { outline:none; }
  .office-scene.reply-expanded .office-resize { display:none; }
  .office-scene.resizing-conversation { cursor:col-resize; user-select:none; -webkit-user-select:none; }
  .office-scene.resizing-conversation .office-conversation { transition:none; }
}

/* 메신저처럼: 내가 쓴 말은 오른쪽, 비서 답은 왼쪽 말풍선. 시각은 내 말풍선 위 오른쪽에 작게 */
.office-request-row {
  display:flex; flex-direction:column; align-items:flex-end; gap:5px;
  width:100%; flex-shrink:0; pointer-events:none;
}
.office-request-time {
  padding-right:6px; color:#e6d6ea99; font-size:11px; line-height:1.4; font-variant-numeric:tabular-nums;
}
.office-request-time:empty { display:none; }
.office-conversation .office-request-row .office-user-bubble { align-self:flex-end; max-width:min(78%,640px); }
.office-conversation .office-reply-bubble { align-self:flex-start; width:fit-content; min-width:min(320px,100%); max-width:88%; }
.office-conversation.expanded .office-reply-bubble { width:100%; max-width:100%; }
@media (max-width:600px) {
  .office-conversation .office-request-row .office-user-bubble { max-width:86%; }
  .office-conversation .office-reply-bubble { max-width:94%; min-width:0; }
}

/* 넓은 화면: 캐릭터를 왼쪽 끝으로 붙여 대화 영역 자리를 더 비운다 */
@media (min-width:1101px) {
  .office-scene .office-character { left:-2%; width:44%; max-width:44%; }
  .office-scene .office-character-image, .office-scene .office-character .portrait-motion { object-position:left bottom; }
  .office-scene .office-conversation { left:var(--office-conv-left,27%); }
}

/* 휴대폰: 입력창이 장면 아래를 24px 덮으므로(.composer margin-top:-24px) 다음 업무 띠를 그만큼 올려 가려지지 않게 한다 */
@media (max-width:600px) {
  .main:not(.history-open):has(> .office-scene:not([hidden])) :is(.office-scene, .office-conversation, .office-latest) { --office-next-space:78px; }
  .main:not(.history-open):has(> .office-scene:not([hidden])) .office-next-work { bottom:32px; }
}

/* 답변 바로 복사: '크게 보기' 옆의 작은 알약 버튼 */
.reply-copy {
  flex-shrink:0; margin-left:auto; padding:4px 10px; border:1px solid #e2c7eb4d; border-radius:99px;
  background:#ffffff12; color:#ead9f2; font-size:11px; line-height:1.2; white-space:nowrap; cursor:pointer;
}
.reply-copy:hover { background:#ffffff22; border-color:#edd6f588; color:#fff; }
.reply-copy.copied { background:#9fd8bd26; border-color:#9fd8bd88; color:#c9f0dc; }
.office-reply-head .reply-copy + .office-expand { margin-left:0; }
.card-head .reply-copy { padding:2px 9px; font-size:10px; }
@media (max-width:600px) { .reply-copy { padding:3px 8px; font-size:10px; } }

/* 가장 최근 질문·답변: 지난 대화(보라)와 달리 따뜻한 금빛으로 칠해 지금 주고받는 말이 한눈에 보이게 */
.office-conversation .office-request-row.office-latest-turn .office-user-bubble {
  background:linear-gradient(135deg,#c48a5ef2,#94586af5); border-color:#f6d9a2cc; color:#fff8ee;
  box-shadow:0 0 0 1px #f2cd8a55,0 8px 26px #e8b96a33;
}
.office-conversation .office-reply-bubble.office-latest-turn {
  background:linear-gradient(135deg,#5a4049f2,#2f2638f5); border-color:#f2cd8ab3;
  box-shadow:inset 3px 0 0 #f2cd8a,0 0 0 1px #f2cd8a40,0 10px 30px #e8b96a2e;
}
.office-conversation .office-request-row.office-latest-turn .office-request-time { color:#f6d9a2; }

/* 진행 중 업무: 경과 시간 · 지금 단계 · 최근 단계를 말풍선 위쪽에 보여 줘 멈췄는지 바로 알 수 있게 한다 */
.office-progress { flex-shrink:0; margin:0 0 12px; padding:9px 12px; border:1px solid #9fe7cf40; border-radius:12px; background:#0f1a1a66; color:#d6ece3; font-size:13px; line-height:1.5; }
.office-progress[hidden] { display:none; }
.office-progress-head { display:flex; align-items:center; gap:8px; font-weight:650; color:#bff0dc; }
.office-progress-who { position:relative; flex:none; width:34px; height:34px; }
.office-progress-face { display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; border:2px solid #7fe3bfaa; background:#806975; box-sizing:border-box; }
.office-progress-avatar { display:block; width:100%; height:230%; object-fit:cover; object-position:50% 2%; }
.office-progress-avatar[src*="/mascots-v1/"] { height:100%; object-fit:contain; object-position:center; }
.office-progress[data-agent="gemini"] .office-progress-face { border-color:#98a4e0; }
.office-progress[data-agent="beiko"] .office-progress-face { border-color:#dc9db4; }
.office-progress-avatar:not([src]) { visibility:hidden; }
.office-progress-who .office-progress-dot { position:absolute; right:-1px; bottom:-1px; border:2px solid #14201f; width:10px; height:10px; box-sizing:border-box; }
.office-progress-name { color:#fff; font-weight:750; }
.office-progress-dot { width:7px; height:7px; border-radius:50%; background:#7fe3bf; box-shadow:0 0 0 0 #7fe3bf88; animation:office-progress-pulse 1.6s ease-out infinite; }
.office-progress-stop { margin-left:auto; padding:2px 10px; border:1px solid #f0b4b466; border-radius:99px; background:#ffffff10; color:#f3d0d0; font-size:11px; cursor:pointer; }
.office-progress-stop:hover { background:#f0b4b42a; color:#fff; }
.office-progress-now { margin-top:3px; color:#e6f3ee; }
.office-progress-note { margin-top:4px; color:#f4d79b; }
.office-progress-steps { margin:5px 0 0; padding:0; list-style:none; color:#a9c2b9; font-size:12px; }
.office-progress-steps:empty { display:none; }
.office-progress.stale { border-color:#f4d79b66; background:#2a210f66; }
.office-progress.stale .office-progress-dot { background:#f4c76b; animation:none; }
@keyframes office-progress-pulse { to { box-shadow:0 0 0 7px #7fe3bf00; } }
@media (prefers-reduced-motion:reduce) { .office-progress-dot { animation:none; } }


/* 완료된 답변마다 도장을 찍어 오피스에서도 업무가 끝난 대화를 구분한다. */
.office-reply-bubble.stamped { padding-bottom:96px; }
.office-reply-bubble > .office-done-stamp {
  width:88px; height:88px; right:18px; bottom:8px; opacity:.95; flex:none;
}
.office-reply-bubble[data-speaker='codex'] > .office-done-stamp { color:#8fe0c4; }
.office-reply-bubble[data-speaker='claude'] > .office-done-stamp { color:#ffab78; }
.office-reply-bubble[data-speaker='gemini'] > .office-done-stamp { color:#aab6ff; }
.office-reply-bubble[data-speaker='beiko'] > .office-done-stamp { color:#f4a9c6; }
@media (max-width:600px) {
  .office-reply-bubble.stamped { padding-bottom:78px; }
  .office-reply-bubble > .office-done-stamp { width:70px; height:70px; right:12px; bottom:6px; }
}