/* Duet Office Stories: desktop pairs the illustrated office with the transcript. */
:root { color-scheme:light; --bg:#f6f5f3; --panel:#fff; --text:#302e38; --muted:#817b87; --border:#e4e0e7; --accent:#79678e; --accent-text:#fff; --bubble:#eee8f2; --code-bg:#f1eef4; --danger:#bc555f; --ok:#488674; --radius:16px; }
body { background:var(--bg); color:var(--text); }
button, input, textarea, select { transition:background .18s,border-color .18s,box-shadow .18s; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid #a18ab7; outline-offset:3px; }
button:hover:not(:disabled) { border-color:#a899b4; }
.app, .app.tasks-open { grid-template-columns:228px minmax(0,1fr); overflow:hidden; }
.sidebar { background:#24252c; border-right:1px solid #ffffff0b; color:#eeedf2; }
.sidebar-head { padding:24px 18px 19px; align-items:center; gap:6px; }
.brand { font:29px/1.1 Georgia,'Iowan Old Style',serif; color:#f5f0e8; letter-spacing:-.8px; }
.brand-sigil { color:#c4a98c; font-size:28px; }
.brand-sub { color:#93919f; font:7px/1.5 var(--font); letter-spacing:1.65px; margin-top:10px; }
.sidebar-head .primary { font:11px var(--font); color:#f5f0e8; background:#3c3b46; border:1px solid #ffffff16; border-radius:9px; margin:0; padding:8px; }
.sidebar-label { color:#9d99a8; letter-spacing:1px; font-size:10px; padding:16px 20px 10px; }
.sidebar-clear { margin:-27px 15px 13px auto; font-size:10px; border:0; color:#a5a0ae; padding:2px 5px; }
.sidebar-clear:hover { color:#fff; }
.conversation-list { padding:0 10px 12px; scrollbar-width:thin; scrollbar-color:#57525f transparent; }
.conv-row { margin:3px 0; }
.conv-item { border:1px solid transparent; border-radius:10px; padding:12px 29px 12px 12px; min-height:65px; }
.conv-item .t { color:#e5e1e9; font-size:12px; font-weight:500; }
.conv-item .s { font-size:10px; color:#9994a4; margin-top:6px; }
.conv-item:hover { background:#ffffff06; }
.conv-item.active { background:#3d3747; border-color:#6f5e805c; }
.conv-item.working { background:#ffffff04; border-color:#ffffff12; padding-right:69px; }
.conv-item.working.active { background:#3d3747; border-color:#9d80b64d; }
.conv-item .s-working { color:#c7b4d7; }
.conv-item.working::after { height:1px; background:linear-gradient(90deg,transparent,#c5acd9,transparent); }
.conv-del { color:#a49aaf; }
.crew-face { width:28px; height:28px; border-width:1px; margin-left:-8px; box-shadow:none; animation:crew-bob 3s ease-in-out infinite; }
.conv-crew { right:27px; }
.sidebar-foot { padding:14px; gap:15px; border-color:#ffffff10; background:#202127; }
.agent-status { gap:8px; font-size:10px; color:#b8b3c1; }
.agent-status .small { display:none; }
.dot { width:5px; height:5px; }
.foot-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.foot-actions button { color:#bcb5c7; background:#ffffff03; border:1px solid #ffffff0e; padding:8px 4px; font-size:10px; border-radius:7px; }
.foot-actions button:last-child { grid-column:1/-1; border:0; background:none; color:#837e8d; padding:3px; }
.main { background:var(--bg); min-width:0; position:relative; }
.topbar { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-rows:auto auto; align-items:center; gap:12px; background:#faf9f7; padding:15px 24px 13px; border-bottom:1px solid #e6e1df; z-index:3; }
.conversation-heading { grid-column:1/3; min-width:0; }
.workspace-kicker { display:block; color:#a59aa9; font:8px/1.5 var(--font); letter-spacing:2px; margin-bottom:4px; }
.conv-title { color:#403a47; font-size:14px; font-weight:600; line-height:1.4; order:initial; }
.tasks-toggle { order:initial; margin:0; padding:8px 11px; display:flex; align-items:center; gap:6px; border:1px solid #e5dfea; border-radius:9px; background:#fff; color:#72697c; font-size:11px; grid-column:4; }
.tasks-toggle[aria-expanded='true'] { background:#eee7f3; border-color:#cbb8dc; }
.tasks-toggle.busy::after { top:-5px; right:-5px; background:#9076a5; color:#fff; border:2px solid #faf9f7; font-size:9px; min-width:18px; height:18px; line-height:14px; }
.history-toggle { grid-column:3; color:#83768c; background:transparent; border:0; padding:8px 7px; font-size:11px; white-space:nowrap; }
#target-picker { order:initial; grid-column:1/-1; grid-row:2; width:100%; min-width:0; display:grid; grid-template-columns:80px repeat(4,minmax(0,1fr)); gap:7px; border:0; padding:0; overflow:visible; max-width:none; }
#target-picker button.target-card, #target-picker button.target-card.target-auto { position:relative; isolation:auto; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:9px; width:auto; height:70px; min-height:0; min-width:0; max-width:none; padding:8px 11px; background:#f3f0ee; border:1px solid transparent; border-radius:11px; box-shadow:none; white-space:normal; overflow:hidden; align-self:stretch; }
#target-picker button.target-card::before { display:none; }
#target-picker button.target-card:hover:not(:disabled) { background:#efeaef; transform:none; border-color:#d9cfdf; }
#target-picker button.target-card[aria-checked='true'] { background:#f0e8f3; border-color:#b19abf; box-shadow:0 0 0 2px #b19abf12; }
.target-avatar { flex:none; width:39px; height:48px; border-radius:9px; overflow:hidden; background:#e6e0dc; }
#target-picker .target-portrait { display:block; position:static; transform:none; z-index:auto; width:100%; height:230%; object-fit:cover; object-position:50% 2%; filter:none; }
.target-info { gap:3px; position:static; width:auto; flex:1; min-width:0; }
.target-name { color:#4b4254; font-size:12px; font-weight:650; }
.target-subtitle { color:#a08d9e; font-size:9px; }
#target-picker .target-auto .target-auto { margin:0; font:23px Georgia,serif; color:#a58fb2; }
#target-picker button.target-card.target-auto { flex-direction:column; justify-content:center; gap:2px; padding:7px; }
#target-picker .target-auto .target-subtitle { display:none; }
.target-usage { gap:3px; }
.quota-text { font-size:9px; color:#9b8f9e; white-space:nowrap; }
.quota-meter { width:100%; height:2px; background:#ded8e2; border-radius:4px; }
.quota-meter::-webkit-progress-bar { background:#ded8e2; }
.quota-meter::-webkit-progress-value { background:#a28caf; }
.quota-meter.low::-webkit-progress-value { background:#ca8c76; }
.quota-meter::-moz-progress-bar { background:#a28caf; }
.quota-unavailable { height:2px; background:#ded8e2; }
.target-live { background:none; border:0; box-shadow:none; padding:0; margin-top:2px; font-size:8px; color:#90759f; line-height:1.3; }
.target-live-text { -webkit-line-clamp:1; }
.target-live-dot { width:3px; height:3px; flex-basis:3px; background:#9f87b2; margin-top:3px; box-shadow:none; }
.default-mark { display:none; }
/* The actual game scene, with an illustrated background plate and transparent character sprites. */
.office-scene { position:relative; flex:1; min-height:240px; overflow:hidden; isolation:isolate; background:#b3a18d; }
.office-backdrop { position:absolute; z-index:-3; inset:0; background:#c7b7a2 url('/static/characters/duet-office-vn-v1.png') center 52%/cover no-repeat; }
.office-shade { position:absolute; z-index:-2; inset:0; background:linear-gradient(180deg,#342d3510 45%,#26213391 100%); }
.office-hud { position:absolute; inset:15px 22px auto; display:flex; align-items:center; justify-content:flex-end; z-index:2; }
.office-history { border:1px solid #ffffff55; background:#ffffffbd; color:#786675; backdrop-filter:blur(8px); border-radius:8px; font-size:10px; padding:7px 11px; }
.office-character { position:absolute; z-index:-1; bottom:80px; left:50%; transform:translateX(-50%); width:auto; height:calc(100% - 30px); max-width:64%; aspect-ratio:9/16; filter:drop-shadow(0 15px 18px #3023304d); animation:office-arrive .5s ease-out both; transform-origin:center bottom; }
.office-character-image, .office-character .portrait-motion { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
.office-character .portrait-motion[hidden] { display:none; }
.office-character.motion-ready > .office-character-image { opacity:0; }
.office-character.working { animation:office-breathe 5s ease-in-out infinite; }
.office-floor { position:absolute; z-index:-1; left:50%; bottom:90px; width:260px; height:25px; border-radius:50%; background:#1c17234d; filter:blur(16px); transform:translateX(-50%); }
.office-presence { position:absolute; top:65px; right:24px; font-size:9px; color:#fffdf9; text-shadow:0 1px 5px #32232a80; writing-mode:vertical-rl; letter-spacing:2px; }
.vn-dialogue { position:absolute; inset:auto 28px 19px; max-width:980px; margin:auto; padding:17px 24px 12px; border:1px solid #eee3e04d; border-radius:16px; background:linear-gradient(125deg,#302a38ee,#282431f2); color:#fff5ec; box-shadow:0 10px 40px #24202e45,inset 0 1px #ffffff14; backdrop-filter:blur(16px); }
.vn-head { display:flex; align-items:center; gap:10px; margin-bottom:9px; min-width:0; }
.vn-name { font-size:16px; font-weight:650; color:#edc3ae; }
[data-speaker='codex'] .vn-name { color:#b6ded7; }
[data-speaker='gemini'] .vn-name { color:#c4c9f0; }
[data-speaker='beiko'] .vn-name { color:#f3c4d4; }
.vn-status { padding:2px 6px; border:1px solid #ffffff26; border-radius:4px; color:#bcb4c5; font-size:8px; flex:none; }
.vn-status.running { color:#eac796; border-color:#d5ad6a66; }
.vn-status.completed { color:#b3d4bf; border-color:#8daf9555; }
.vn-status.failed, .vn-status.interrupted { color:#f1a3a9; }
.vn-request { margin:0 0 16px; padding:10px 13px; border:1px solid #ffffff20; border-radius:12px; background:#ffffff0b; color:#f0e4f2; font-size:14px; line-height:1.55; max-height:5.1em; overflow:hidden; overflow-wrap:anywhere; }
.vn-request::before { content:'내가 한 질문'; display:block; margin-bottom:5px; color:#d1b4dd; font-size:10px; font-weight:600; letter-spacing:.02em; }
.vn-request:empty { display:none; }
.vn-text { font-size:14px; line-height:1.85; min-height:0; max-height:180px; overflow:auto; color:#eee7ed; scrollbar-width:thin; scrollbar-color:#766778 transparent; overflow-wrap:anywhere; }
.vn-text p { margin:0 0 .5em; }
.vn-text p:last-child { margin-bottom:0; }
.vn-text a { color:#d7c1e9; }
.vn-text code { color:#eadcf5; background:#ffffff0c; }
.vn-text pre { background:#181620; padding:9px 12px; border-radius:7px; overflow:auto; }
.vn-text img { max-height:120px; max-width:100%; object-fit:contain; }
/* The transcript retains full answers, attachments and every existing action. */
.messages { background-color:#f6f5f3; background-image:linear-gradient(#f6f1ea66,#f6f1ea8c),url('/static/characters/office-chat-bg.jpg'); background-size:100% auto; background-position:center top; background-repeat:repeat-y; background-attachment:local; padding:28px 32px; scrollbar-width:thin; scrollbar-color:#cfc6d5 transparent; }
.thread { max-width:920px; gap:28px; }
.responses { gap:25px; }
.card.dialogue-row, .card.dialogue-row.codex { width:100%; flex-direction:row; align-self:stretch; gap:15px; }
.dialogue-portrait { width:82px; height:138px; }
.portrait-art { border-radius:44% 44% 18% 18%; mask-image:linear-gradient(#000 0%,#000 82%,transparent 100%); }
.portrait-art img, .portrait-art .portrait-motion { width:100%; height:190%; max-width:none; left:0; right:auto; top:0; bottom:auto; transform:none; object-fit:contain; object-position:center top; }
.portrait-art img { filter:drop-shadow(0 3px 4px #4d3d4a19); }
.portrait-halo { display:none; }
.speech-bubble, .codex .speech-bubble, .gemini .speech-bubble, .beiko .speech-bubble { background:#fff; border:1px solid #e6dfe8; border-radius:15px; padding:18px 22px; box-shadow:0 4px 18px #41344c05; }
.speech-bubble::before, .codex .speech-bubble::before, .gemini .speech-bubble::before, .beiko .speech-bubble::before { display:none; }
.speech-bubble.listening { padding-top:18px; }
.card-head { gap:8px; flex-wrap:wrap; }
.card-head .name { font:650 14px var(--font); color:#a46c56; }
.codex .card-head .name { color:#4b8a7b; }
.gemini .card-head .name { color:#7775ac; }
.beiko .card-head .name { color:#a46883; }
.card-head .character-title { display:none; }
.card-head .meta { color:#afa5b4; font-size:9px; margin-left:auto; }
.card-head .small-btn { padding:2px 7px; font-size:9px; color:#ad7e85; background:#fff; border:1px solid #eddee0; }
.badge, .badge.completed { font-size:8px; border-color:#d5e4da; color:#8caa95; background:none; }
.body { font-size:14px; line-height:1.85; color:#55515b; }
/* Notebook-style ruled lines under each line of prose for readability. */
.body p, .body li { line-height:1.85; background-image:linear-gradient(transparent calc(100% - 1px),color-mix(in srgb,currentColor 16%,transparent) 0); background-size:100% 1.85em; background-repeat:repeat-y; }
.body li > p, .body li > ul, .body li > ol { background-image:none; }
.reply-progress { padding:7px 10px; margin:10px 0 0; background:#f8f5f9; border-radius:8px; color:#9b7dad; font-size:11px; }
.user-msg { justify-self:end; margin:0 0 0 80px; width:fit-content; max-width:min(660px,85%); background:#ece5f0; border:0; border-radius:16px 16px 3px 16px; padding:13px 17px; box-shadow:none; color:#665371; font-size:13px; }
.user-msg::before { display:none; }
.user-msg .to { color:#a998b3; font-size:9px; margin-top:7px; text-align:right; }
.delegation { margin-left:87px; color:#9a86a4; font-size:11px; }
/* 완료 도장 크기·진하기는 companions.css 한 곳에서 정한다(여기서 작게 덮어쓰면 잘 안 보인다) */

.queued-request { background:#f7f3f9; border-color:#c7b1d5; color:#8f7a9d; font-size:12px; }
.queued-request small { color:#b39cbe; }
.empty { margin:10vh auto; }
.empty h2 { color:#6d5c79; font-size:22px; }
.empty p { color:#a69aab; font-size:13px; }
.empty-ornament { color:#c3a7cf; }
/* Composer doubles as the game's action bar. */
.composer { position:relative; z-index:6; background:#faf9f7; border-color:#e6e1e7; padding:12px 24px 16px; gap:9px; flex-wrap:wrap; }
.picker { gap:7px; margin-bottom:0; }
.pick-name { min-width:0; color:#9a8f9e; font-size:10px; }
.pick-group { gap:5px; }
.pick-select, .pick-fixed { font-size:10px; padding:4px 23px 4px 9px; border-color:#e6dfe9; background-color:#fff; color:#8e8096; }
.pick-menu { border-color:#dfd4e5; background:#fff; box-shadow:0 12px 32px #2c1f3824; }
.pick-option { color:#554860; font-size:11.5px; padding:6px 10px; }
.pick-option:hover, .pick-option:focus-visible { background:#f3eef6; border-color:transparent; }
.pick-option.selected, .pick-option.selected:hover { background:#8c749d; color:#fff; }
.pick-hint { color:#b4a6b9; font-size:9px; }
.composer-main { min-width:120px; }
.composer textarea { border:1px solid #e5dce9; border-radius:11px; background:#fff; padding:13px 14px; font-size:12px; min-height:45px; max-height:140px; scrollbar-width:thin; scrollbar-color:#cec0d6 transparent; box-shadow:0 2px 8px #51385803; }
.composer textarea:focus { border-color:#b99dc8; box-shadow:0 0 0 3px #ba9bcc12; }
.composer textarea::placeholder { color:#b6a9bc; }
.composer .attach { color:#a68bb2; display:flex; align-items:center; align-self:center; padding:4px; }
.composer-actions { gap:6px; align-self:flex-end; }
.composer .primary { color:white; background:#8c749d; border:1px solid #8c749d; border-radius:9px; padding:12px 16px; font-size:11px; }
.composer .secondary { border:1px solid #dfd4e5; background:#f3eef6; color:#a48aae; border-radius:9px; padding:12px 13px; font-size:11px; }
.composer .danger { background:#fff3f3; color:#b87980; border:1px solid #f1d9db; padding:12px 10px; font-size:10px; border-radius:9px; }
/* Task drawer floats over the office, so opening it never squeezes the scene. */
.task-panel { position:fixed; inset:16px 16px 16px auto; width:min(352px,calc(100vw - 24px)); height:auto; z-index:30; border:1px solid #e2d9e9; border-radius:18px; background:#fbf9fc; box-shadow:0 18px 90px #2720353d; overflow:hidden; }
.task-panel-head { border-color:#e9e0ee; padding:20px; background:#fff; }
.task-panel-head strong { color:#665170; font-size:16px; }
.task-count { color:#ab98b7; margin-top:5px; font-size:10px; }
.task-close { color:#a28dad; font-size:15px; }
.task-list { gap:10px; padding:12px 15px 20px; scrollbar-color:#d2c4dc transparent; }
.task-section { margin:10px 1px 2px; color:#aa98b6; font-size:10px; }
.task-card, .task-card.codex, .task-card.gemini, .task-card.beiko { background:#fff; border:1px solid #e9e0ed; border-radius:12px; padding:13px; box-shadow:0 2px 5px #4b345807; }
.task-card { animation:none; }
.task-card.running { box-shadow:0 0 0 1px #e3d5ed; }
.task-bar::after, .task-steps .step.now i { animation:none; }
.task-title { color:#6c5b76; font-size:12px; font-weight:600; }
.task-face { width:33px; height:33px; border:1px solid #e5d5ed; background:#f6f0f9; }
.task-meta, .task-meta b { color:#b09abd; font-size:9px; font-weight:400; }
.task-badge, .task-badge.running { color:#bc9273; border-color:#f0e0d1; font-size:8px; }
.task-badge.completed { color:#8ba999; border-color:#dde9df; }
.task-badge.failed, .task-badge.interrupted { color:#c7838e; border-color:#efd7dd; }
.task-clock { color:#b8a9c0; margin-left:42px; font-size:9px; }
.task-stop { color:#b59ebc; border-color:#e7deec; font-size:9px; }
.task-stop:hover { background:#f8f3fa; }
.task-bar { margin-left:42px; height:2px; background:#f2edf5; }
.task-bar::after, .codex .task-bar::after { background:linear-gradient(90deg,transparent,#b598c5,transparent); }
.task-steps { margin-left:42px; gap:5px; }
.task-steps .step { font-size:10px; color:#b1a0bb; }
.task-steps .step.ok { color:#97b1a3; }
.task-steps .step.now { color:#ae91bf; }
.task-empty { color:#a894b4; }
.task-error { color:#c18a94; font-size:10px; }
.task-children { border-color:#eee5f3; }
.task-approve { width:40px; height:40px; margin-top:2px; opacity:.8; }
.task-approve-all { color:#ba8a96; border-color:#e7ced5; background:#fff6f8; }
/* Existing dialogs and vault keep their full functionality with a light surface. */
.settings, .login-card { background:#fff; color:var(--text); border-color:#e0d4e6; }
.settings-head, .tabs, .settings-foot { border-color:#e9e0ed; }
.field select, .field input[type='text'], .field input[type='number'], .field textarea, .vault-form input, .vault-form textarea, .vault-secret input { background:#faf7fc; color:#665570; border-color:#e3d8e9; }
.cli-account { background:#faf7fc; border-color:#e5d9ec; }
.cli-account-email { color:#84718f; }
.cli-account-portrait { background:#efe7f4; }
.cli-login-status { border-color:#dacde4; color:#a68ab5; }
.trans-card { border-color:#ded9ee; background:#f6f3fa; }
.trans-head { background:#eee9f5; border-color:#e1d9ed; }
.trans-lang { color:#a18bb7; }
.trans-text { color:#72617f; }
.copy-btn { background:#fff; color:#aa90b8; border-color:#e0d3e9; }
.completion-report { background:#fff; border:1px solid #ddcfe6; box-shadow:0 16px 52px #3d2d4b26; color:#7e658a; }
.completion-report-title { color:#867190; }
.completion-report-result { color:#af9bb8; }
.completion-report-head strong { color:#9c7baa; font:600 15px var(--font); }
.completion-report-badge { color:#93ac9b; border-color:#d2e1d6; }
.completion-report-meta { color:#bbabc2; }
@keyframes office-arrive { from { opacity:0; translate:10px 0; } to { opacity:1; translate:0 0; } }
@keyframes office-breathe { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-3px); } }
@media (min-width:1600px) { .office-character { bottom:90px; height:calc(100% - 25px); max-height:760px; } .vn-dialogue { bottom:25px; } }
@media (max-width:1100px) { .app, .app.tasks-open { grid-template-columns:202px minmax(0,1fr); } .sidebar-head { padding:22px 13px; } .topbar { padding:12px 17px; } #target-picker { grid-template-columns:62px repeat(4,minmax(0,1fr)); } #target-picker button.target-card { gap:6px; padding:8px; } .target-avatar { width:30px; height:43px; } .composer { padding:11px 17px; } .composer-actions { width:100%; justify-content:flex-end; } .vn-dialogue { inset:auto 18px 16px; } }
@media (max-width:900px) { .app, .app.tasks-open { grid-template-columns:minmax(0,1fr); } .sidebar { background:#24252c; width:258px; } #menu { display:block; grid-column:1; grid-row:1; color:#9b86aa; padding:5px; } .conversation-heading { grid-column:2; } .tasks-toggle { grid-column:4; } .history-toggle { grid-column:3; } .topbar { grid-template-columns:auto minmax(0,1fr) auto auto; gap:9px; } .workspace-kicker { font-size:7px; } .composer-actions { width:auto; } }
@media (max-width:600px) { .topbar { padding:10px 12px; gap:8px; } .workspace-kicker { font-size:6px; letter-spacing:1px; } .conv-title { font-size:12px; } .tasks-toggle { padding:7px; } .tasks-toggle span { display:none; } .history-toggle { font-size:10px; padding:5px; } #target-picker { display:flex; overflow-x:auto; gap:5px; padding-bottom:2px; scrollbar-width:none; } #target-picker button.target-card { flex:0 0 108px; height:60px; padding:6px 8px; } #target-picker button.target-card.target-auto { flex:0 0 50px; width:50px; min-width:50px; height:60px; } .target-avatar { width:29px; height:42px; } .target-name { font-size:10px; } .quota-text { font-size:8px; } .target-live { display:none; } .office-scene { min-height:240px; } .office-character { bottom:115px; height:calc(100% - 70px); max-width:85%; left:50%; } .office-hud { inset:12px 14px auto; } @media (max-height:620px) and (min-width:700px) { .workspace-kicker { display:none; } .topbar { gap:8px; padding:9px 18px; } #target-picker button.target-card, #target-picker button.target-card.target-auto { height:55px; } .target-avatar { height:38px; } .vn-text { min-height:35px; max-height:85px; font-size:12px; } .vn-dialogue { padding:11px 17px; inset:auto 20px 10px; } .office-character { bottom:65px; } .composer { padding:8px 17px; } }
@media (prefers-reduced-motion:reduce) { .office-character, .office-character.working, .crew-face { animation:none; } }
@media (max-width:600px) { .messages .dialogue-portrait { width:58px; height:100px; } }

/* Keep heads in frame and closed native dialogs out of the document flow. */
dialog:not([open]) { display:none; }
.office-character { bottom:0; height:calc(100% - 22px); }
@media (min-width:1600px) { .office-character { bottom:0; height:calc(100% - 26px); } }
@media (max-width:600px) { .office-character { bottom:0; height:calc(100% - 34px); } }
@media (max-height:620px) and (min-width:700px) { .office-character { bottom:0; height:calc(100% - 12px); } }
.office-character { mask-image:linear-gradient(#000 0%,#000 70%,transparent 94%); }
/* A completed-job notification must never cover the message send controls. */
.completion-reports { top:auto; bottom:24px; right:22px; width:min(310px,calc(100vw - 28px)); }
.completion-report { min-height:114px; border-radius:13px; padding-right:12px; }
.completion-report-character { flex-basis:77px; margin-right:9px; }
.completion-report-character img { height:120px; }
.completion-report-copy { padding:10px 0; gap:4px; }
.completion-report-head strong { font-size:12px; }
.completion-report-title { font-size:11px; }
.completion-report-result { font-size:10px; }
.completion-report-meta { font-size:8px; }
@media (max-width:600px) { .completion-reports { top:auto; bottom:calc(88px + env(safe-area-inset-bottom)); right:12px; width:min(280px,calc(100vw - 24px)); } }
.office-scene { min-height:min(240px,32dvh); }

.office-scene:focus, .messages:focus { outline:none; }
.completion-report-wrap { position:relative; }
.completion-report-dismiss { position:absolute; top:6px; right:6px; display:grid; place-items:center; width:21px; height:21px; padding:0; border:0; border-radius:50%; color:#ac98b6; background:#f6f0f8; cursor:pointer; font-size:14px; pointer-events:auto; }
.completion-report-dismiss:hover { color:#745881; background:#eadfee; }
.completion-report-head { padding-right:17px; }
.foot-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
.foot-actions button, .foot-actions button:last-child { grid-column:auto; padding:8px 3px; background:#ffffff03; border:1px solid #ffffff0e; font-size:9px; white-space:nowrap; }
.foot-actions button:last-child { color:#8d8599; }
.quota-text { color:#81718b; font-size:10px; }
.pick-select, .pick-fixed { color:#7a6686; }
.composer .secondary { color:#7c638a; }
.composer textarea::placeholder { color:#94839e; }
.completion-report.claude .completion-report-head strong { color:#a46c56; }
.completion-report.codex .completion-report-head strong { color:#4b8a7b; }
.completion-report.gemini .completion-report-head strong { color:#7775ac; }
.completion-report.beiko .completion-report-head strong { color:#a46883; }

/* Wide screens keep the character and composer beside the full conversation. */
@media (min-width:1101px) {
  .main { display:grid; grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr); grid-template-rows:auto minmax(0,1fr) auto; }
  .topbar { grid-column:1/-1; grid-row:1; }
  .office-scene { grid-column:1; grid-row:2; min-height:0; }
  .composer { grid-column:1; grid-row:3; padding:12px 16px 16px; }
  .composer-actions { width:100%; justify-content:flex-end; }
  .composer-actions button { flex:1; padding:10px 8px; }
  .messages { grid-column:2; grid-row:2/4; min-width:0; min-height:0; border-left:1px solid #e2d9e7; padding:24px 20px; scroll-padding-block:24px; }
  .messages .thread { width:100%; max-width:none; grid-template-columns:minmax(0,1fr); gap:22px; }
  .messages .responses { min-width:0; }
  .messages .dialogue-portrait { width:72px; height:124px; }
  .messages .card.dialogue-row { gap:10px; }
  .messages .speech-bubble { min-width:0; padding:16px; }
  .messages .speech-bubble.stamped { padding-bottom:38px; }
  .messages .user-msg { margin-left:40px; max-width:90%; }
  .office-character { max-width:94%; height:calc(100% - 38px); }
  .office-hud { inset:14px 16px auto; }
  .office-presence { top:62px; right:16px; }
  .office-history { display:none; }
  .vn-dialogue { inset:auto 14px 14px; padding:13px 16px 10px; }
  .vn-text { min-height:38px; max-height:105px; font-size:12px; }
  .vn-page { max-width:110px; }
  .vn-controls { gap:4px; }
  .vn-controls button { padding:5px 7px; }
}
/* 맥스튜디오 사무실: 그 PC 설정에서 '맥스튜디오 사무실' 모드를 고르면 배경이 바뀐다 */
.office-scene[data-office="studio-v1"] .office-backdrop { background-image:url('/static/characters/office-studio-v3/background.png'); background-position:center 60%; }