/* Office Stories: warm illustration, plum glass, and quiet game controls. */
:root {
  color-scheme:dark;
  --bg:#231c27; --panel:#372b3b; --text:#f5edf3; --muted:#c3afc7;
  --border:#d9b4c836; --accent:#b49bd4; --accent-text:#21182a;
  --bubble:#685071; --code-bg:#211c29; --danger:#e69aa5; --ok:#94d2bc;
  --game-glass:linear-gradient(145deg,#49303fdb,#261e30ed);
  --game-edge:#efd0cd66; --game-shadow:0 14px 42px #140c2545,inset 0 1px #fff1;
}
body { background:#241c29; }
.app { background:linear-gradient(180deg,#27172d1a 45%,#26182e66),url('/static/characters/duet-office-vn-v1.png') center/cover no-repeat; }
.main { background:transparent; }
.sidebar, .topbar, .messages, .composer, .vn-dialogue, .task-panel {
  background:var(--game-glass); border-color:var(--game-edge);
  box-shadow:var(--game-shadow); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.game-wordmark { display:flex; align-items:center; gap:6px; font:30px/1.1 Georgia,'Iowan Old Style',serif; color:#fff1e2; white-space:nowrap; }
.game-wordmark > span { color:#efd0a0; font-size:31px; }
.game-wordmark small { margin-left:9px; font:9px var(--font); letter-spacing:2.2px; color:#e7c9ac; }
.conv-title { margin-top:5px; color:#c6b1c9; font-size:10px; font-weight:400; }
.brand { color:#f4d3b4; font:500 16px var(--font); letter-spacing:.5px; white-space:nowrap; }
.brand-sigil { color:#d7b7bc; font-size:20px; padding-right:4px; }
.sidebar-head { padding:17px 14px 12px; }
.sidebar-head .primary { background:#ffffff09; border-color:#dec5d56b; color:#ebdce9; }
.sidebar-label { color:#bc9fc2; font-size:9px; padding:10px 17px; }
.sidebar-clear { color:#baa6bd; font-size:9px; margin-top:-24px; }
.conversation-list { padding:0 10px 12px; scrollbar-color:#b18fbb55 transparent; }
.conv-row { margin:4px 0; }
.conv-item, .conv-item.working { position:relative; padding:14px 27px 14px 14px; min-height:79px; background:transparent; border:1px solid transparent; border-bottom-color:#ebc4dd1c; border-radius:0; }
.conv-item.working { display:grid; grid-template-columns:26px minmax(0,1fr); column-gap:8px; row-gap:8px; padding:14px 27px 14px 14px; overflow:hidden; align-items:center; }
.conv-item.active, .conv-item.working.active, .conv-item.active:hover {
  background:linear-gradient(110deg,#28565a,#243a48); border:1px solid #a6ded5;
  border-radius:12px; box-shadow:inset 4px 0 #b7eee2,0 0 0 1px #a6ded51a;
}
.conv-item:not(.active):hover { background:#e3c4e90d; }
.conv-item.active .t { color:#f0fffb; }
.conv-item:focus-visible { outline:2px dashed #e8cf9b; outline-offset:2px; }
.conv-item .t { font-size:12px; color:#f4e8ef; white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
.conv-item.working .t { grid-column:1 / -1; grid-row:1; }
.conv-item .s, .conv-item .s-working { color:#c5afce; font-size:10px; margin-top:7px; }
.conv-avatar { position:relative; grid-column:1; grid-row:2; width:26px; height:28px; border-radius:50%; border:2px solid #6fbba3; background:#806975; overflow:hidden; }
.conv-avatar.gemini { border-color:#98a4e0; }
.conv-avatar.beiko { border-color:#dc9db4; }
.conv-avatar img { display:block; width:100%; height:230%; object-fit:cover; object-position:50% 2%; }
.conv-item.working::after { content:''; position:absolute; left:0; bottom:0; height:2px; width:40%; background:linear-gradient(90deg,transparent,#c9a9e3,transparent); animation:task-bar 1.6s ease-in-out infinite; }
.conv-crew { display:none; }
.conv-item.working .s { grid-column:2; grid-row:2; margin-top:0; min-width:0; }
.conv-work-times { grid-column:1 / -1; display:flex; flex-direction:column; gap:3px; min-width:0; color:#efcf9e; font-size:11px; line-height:1.5; }
.conv-work-time { display:block; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.conv-del { color:#cfb8d3; }
.sidebar-foot { background:transparent; border-color:#dbb8cf2e; padding:12px; gap:12px; }
.agent-status { color:#cdb8cc; font-size:9px; }
.foot-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
.foot-actions button, .foot-actions button:last-child { color:#d8c3d9; border-color:#dfbddd2b; background:#ffffff08; font-size:9px; }
.topbar { border-bottom:1px solid #eac9d346; }
.history-toggle, .tasks-toggle { color:#e7d6e7; background:#ffffff0d; border:1px solid #d6b6cf55; border-radius:99px; padding:8px 12px; font-size:10px; }
.tasks-toggle[aria-expanded='true'] { border-color:#ccafe1; background:#ab83c238; }
.tasks-toggle.busy::after { border-color:#51374c; background:#c5a7e0; color:#35243d; }
#target-picker { gap:5px; }
#target-picker button.target-card, #target-picker button.target-card.target-auto { height:58px; padding:5px 8px; border-radius:12px; background:transparent; border:1px solid transparent; gap:9px; }
#target-picker button.target-card:hover:not(:disabled) { background:#efd7f40b; border-color:#d9badb33; }
#target-picker button.target-card[aria-checked='true'] { background:#b396d017; border-color:#c5a8df73; box-shadow:0 5px 12px -9px #e0c4ff; }
.target-avatar { width:40px; height:44px; border:1px solid #e3c2ad99; border-radius:50%; background:#8e7387; }
#target-picker .target-portrait { height:230%; object-fit:cover; object-position:50% 2%; }
#target-picker .target-avatar .portrait-motion { top:0; bottom:auto; }
#target-picker button[aria-checked='true'] .target-avatar { border-color:#d7bcff; box-shadow:0 0 0 3px #b69ad647,0 0 13px #ccadf58c; }
.target-name { color:#f4e5f2; font-size:12px; font-weight:500; }
.quota-text, .target-subtitle { color:#cfb9e0; font-size:9px; }
.quota-meter, .quota-meter::-webkit-progress-bar { background:#ffffff15; }
.quota-meter::-webkit-progress-value { background:#c3a1df; }
.quota-meter::-moz-progress-bar { background:#c3a1df; }
.target-live { color:#a8d6bc; font-size:8px; }
.target-live-dot { animation:none; background:#9bd7b8; }
.office-scene { background:transparent; }
.office-backdrop, .office-shade, .office-floor { display:none; }
.office-presence { writing-mode:horizontal-tb; top:60px; right:20px; font-size:9px; color:#f3dccc; letter-spacing:.5px; }
.office-character { animation:none; filter:drop-shadow(0 14px 22px #27172e66); mask-image:linear-gradient(#000 0%,#000 83%,transparent 99%); }
.office-character.working { animation:none; }
@media (prefers-reduced-motion: reduce) { .conv-avatar, .conv-item.working::after, .conv-item .s-working i { animation:none; } }
.vn-dialogue { color:#fff1f6; border-radius:18px 18px 0 0; border-color:#edc6ce8c; background:linear-gradient(130deg,#553344e6,#292035ed); }
.vn-dialogue::before { content:''; position:absolute; left:-18px; top:48%; width:20px; height:28px; background:#49303fe8; clip-path:polygon(100% 0,100% 100%,0 50%); filter:drop-shadow(-1px 0 #edc6ce8c); }
.vn-name { font-size:18px; color:#f5e8f3; }
.vn-head { margin-bottom:7px; }
.vn-status { font-size:9px; border-radius:5px; color:#dbc3e4; }
.vn-status.running { color:#f0cd9e; border-color:#dfaf7559; }
.vn-text { min-height:0; max-height:min(34vh,260px); font-size:15px; line-height:1.85; color:#f2e5ee; }
.vn-request { color:#f5eaf6; border-color:#e8d0ed2b; background:#160e2080; }
.vn-request::before { color:#d7b8e4; }
.composer { border:1px solid #edc6ce8c; border-top:0; border-radius:0 0 18px 18px; padding:10px 16px 15px; }
.composer textarea { color:#f2e6f5; background:#20162955; border-color:#d4afce66; box-shadow:inset 0 2px 12px #19112125; border-radius:10px; font-size:12px; min-height:44px; }
.composer textarea::placeholder { color:#c3acc9; }
.composer textarea:focus { border-color:#d2b6eb; box-shadow:0 0 0 2px #c39ee921; }
.composer .attach { color:#dec0e3; }
.composer .primary { background:linear-gradient(135deg,#bca1d4,#a183bf); color:#fff6ff; border:1px solid #dac5ed77; border-radius:10px; }
.composer .secondary { color:#e5cee9; background:#684f7059; border-color:#d7b8d56b; border-radius:10px; }
.composer .danger { color:#f0bbc5; border-color:#c5879766; background:#69364380; }
.pick-name, .pick-hint { color:#c3aac7; }
.pick-select, .pick-fixed { color:#e5cee9; background-color:#302034bb; border-color:#c6a4cc44; border-radius:7px; }
.messages { background:var(--game-glass); color:#f0e6f3; border:1px solid #e5c2d36b; border-radius:18px; scrollbar-color:#bca0cb66 transparent; }
.transcript-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:23px; padding-bottom:14px; border-bottom:1px solid #d6b1d43b; color:#f1d5dc; font-size:14px; }
.transcript-head small { max-width:65%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:10px; color:#baa1c2; }
.speech-bubble, .codex .speech-bubble, .gemini .speech-bubble, .beiko .speech-bubble { background:#312638d9; border:1px solid #d5b3da36; border-radius:12px; box-shadow:0 4px 18px #1d102424; color:#f0e3f2; }
.body { color:#f2e8f3; font-size:14px; line-height:1.95; }
/* 대화 기록은 노트처럼 읽히도록 본문 폭과 줄 길이를 제한한다. */
.messages .body { max-width:46em; padding-left:14px; border-left:1px solid #d8b9e02c; }
.body p, .body li { line-height:1.95; background-image:linear-gradient(transparent calc(100% - 1px),#e6c6ed24 0); background-size:100% 1.95em; }
.body pre { background:#201927; color:#eee0f4; }
.body a { color:#d3b7f1; }
.card-head .meta { color:#bfa7c6; }
.card-head .name { color:#f1bb9e; }
.codex .card-head .name { color:#b5e0d0; }
.gemini .card-head .name { color:#cbc4fa; }
.beiko .card-head .name { color:#efbdd9; }
.user-msg { color:#f0e1f5; background:#9d75b147; border:1px solid #d9b7e14d; border-radius:13px 13px 3px 13px; }
.user-msg .to { color:#c8abd1; }
.reply-progress { color:#d4bcdf; background:#a47cc51a; }
.badge, .badge.completed { color:#a8d5be; border-color:#9ecbb94d; background:transparent; }
.queued-request { color:#e0c8e8; background:#a279b91c; border-color:#bc94d0; }
.empty h2 { color:#edc7d9; font-size:20px; }
.empty p { color:#ccb3d3; }
.task-panel { inset:100px 22px 24px auto; border-radius:18px; }
.task-panel-head { background:transparent; border-color:#e6bad53b; }
.task-panel-head strong { color:#f3d6de; }
.task-count, .task-section, .task-close { color:#c8b0d0; }
.task-card, .task-card.codex, .task-card.gemini, .task-card.beiko { background:#ffffff06; border-color:#d6afd345; box-shadow:none; }
.task-card.running { box-shadow:inset 0 0 20px #bb8ee412; }
.task-title { color:#f0e1ef; }
.task-meta, .task-meta b, .task-clock { color:#c3a8cf; }
.task-face { background:#6b526b; border-color:#d3b2e0; }
.task-badge.running { color:#a8dcc4; border-color:#9ed5bf66; }
.task-stop { color:#dcbbde; border-color:#cba2d452; }
.task-steps .step { color:#cbb4d4; }
.task-steps .step.ok { color:#a0ccb5; }
.task-steps .step.now { color:#d8b6ef; }
.task-bar { background:#ffffff17; }
.task-bar::after, .codex .task-bar::after { background:linear-gradient(90deg,#b896d5,#d1b9e6); }
.completion-report { background:var(--game-glass); border-color:#d4afdf80; backdrop-filter:blur(20px); color:#edddf2; }
.completion-report-title, .completion-report-result { color:#d3bddc; }
.completion-report-meta { color:#bca1c8; }
.completion-report-dismiss { color:#dcc5e5; background:#5a3c67; }
.completion-report.gemini .completion-report-head strong { color:#d0c2fa; }
.completion-report.codex .completion-report-head strong { color:#b2dfcf; }
.completion-report.claude .completion-report-head strong { color:#f0bfa6; }
.completion-report.beiko .completion-report-head strong { color:#f4c3dc; }
/* Settings stay readable above the illustrated office. */
.settings, .login-card { background:#fdf9fc; color:#49334e; color-scheme:light; }
.settings, .login-card { --panel:#fff; --text:#49334e; --muted:#87718f; --bg:#f7f0f9; --border:#e1d2e8; --accent:#9879b4; --accent-text:#fff; --code-bg:#eee5f3; }
@media (min-width:1101px) {
  .app, .app.tasks-open { grid-template-columns:236px minmax(0,1fr); padding:101px 22px 22px; gap:20px; }
  .sidebar { border:1px solid var(--game-edge); border-radius:18px; align-self:start; max-height:calc(100dvh - 145px); overflow:hidden; }
  .main { grid-template-columns:minmax(300px,1fr) minmax(340px,.86fr); grid-template-rows:minmax(0,1fr) auto; gap:0 20px; }
  .topbar { position:fixed; inset:0 0 auto; height:79px; display:grid; grid-template-columns:250px minmax(0,1fr) auto auto; grid-template-rows:auto; gap:14px; padding:9px 25px; z-index:10; border-radius:0; }
  .conversation-heading { grid-column:1; grid-row:1; }
  #target-picker { grid-column:2; grid-row:1; grid-template-columns:44px repeat(4,minmax(0,1fr)); max-width:760px; justify-self:center; }
  #target-picker button.target-card.target-auto { padding:4px; }
  #target-picker .target-auto .target-name { font-size:9px; }
  #target-picker .target-auto .target-auto { font-size:20px; color:#dcc0ee; }
  .target-live { display:none; }
  .history-toggle { grid-column:3; grid-row:1; }
  .tasks-toggle { grid-column:4; grid-row:1; }
  .office-scene { grid-column:1; grid-row:1; overflow:hidden; }
  .office-character { left:0; bottom:0; transform:none; width:55%; height:100%; max-width:55%; max-height:760px; aspect-ratio:auto; overflow:visible; }
  .office-character-image, .office-character .portrait-motion { transform:none; }
  .office-hud { inset:0 0 auto; }
    .office-presence { right:8px; top:40px; }
  .vn-dialogue { inset:50% 2% auto 48%; transform:translateY(-50%); max-width:none; max-height:78%; overflow:auto; padding:22px 25px; border-radius:28px; }
  .vn-dialogue::before { left:-19px; top:46%; }
  .vn-text { max-height:min(38vh,310px); min-height:0; font-size:15px; }
  .vn-request { max-width:40%; }
  .composer { grid-column:1; grid-row:2; position:relative; margin-top:-1px; z-index:1; }
  .composer .picker { border-top:1px solid #ebc9df33; padding-top:10px; }
  .composer-actions { margin-top:2px; }
  .messages { grid-column:2; grid-row:1/3; padding:19px 17px; }
  .messages .dialogue-portrait { width:72px; height:124px; }
  .messages .card.dialogue-row { gap:8px; }
  .messages .speech-bubble { padding:13px; }
  .messages .speech-bubble.stamped { padding-bottom:32px; }
  .messages .thread { gap:19px; }
  .completion-reports { right:30px; }
}
@media (min-width:1600px) {
  .app, .app.tasks-open { grid-template-columns:265px minmax(0,1fr); gap:26px; padding:108px 28px 26px; }
  .main { grid-template-columns:minmax(0,1fr) minmax(400px,.75fr); column-gap:26px; }
  .sidebar-head { padding:19px 17px; }
  .office-character { height:100%; max-height:760px; bottom:0; }
  .vn-dialogue { left:48%; right:2%; }
  .vn-text { max-height:min(42vh,380px); font-size:16px; }
}
@media (min-width:901px) and (max-width:1100px) {
  .app, .app.tasks-open { grid-template-columns:210px minmax(0,1fr); padding:14px; gap:14px; }
  .sidebar { border:1px solid var(--game-edge); border-radius:16px; }
  .topbar { border-radius:16px 16px 0 0; }
  .game-wordmark { font-size:24px; }
  .game-wordmark small { font-size:7px; }
  .vn-dialogue { inset:auto 0 0; }
  .composer { margin-top:-1px; }
}
@media (max-width:900px) {
  .sidebar { background:linear-gradient(145deg,#4b3346f5,#241e30fa); }
  .game-wordmark { font-size:23px; }
  .game-wordmark > span { font-size:24px; }
  .game-wordmark small { font-size:7px; letter-spacing:1px; margin-left:3px; }
  .conv-title { font-size:10px; }
  .topbar { padding:10px 13px; gap:8px; }
  #menu { color:#e6c4e9; }
  .office-scene { min-height:0; }
  .vn-dialogue { inset:auto 10px 8px; border-radius:18px; padding:12px 14px; }
  .vn-dialogue::before { display:none; }
  .vn-request { display:block; max-height:3.1em; margin-bottom:8px; font-size:11px; }
  .vn-text { max-height:94px; font-size:12px; min-height:35px; }
  .office-presence { display:none; }
  .composer { margin:0 10px 10px; padding:9px 12px calc(10px + env(safe-area-inset-bottom)); }
  .messages { margin:10px 10px 0; border-radius:16px 16px 0 0; }
  .history-open .composer { border-top:1px solid #dfb9d536; }
  .history-toggle, .tasks-toggle { font-size:9px; padding:7px 8px; }
  .task-panel { inset:14px 12px; }
}
@media (max-width:600px) {
  #target-picker { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  #target-picker button.target-card { flex-basis:105px; height:55px; }
  .target-avatar { width:32px; height:36px; }
  .target-name { font-size:10px; }
  .quota-text { font-size:8px; }
  .game-wordmark small { display:none; }
  .vn-name { font-size:16px; }
  .composer-actions button { padding:10px 7px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; }
}
/* 대화 목록: 제목 아래에 최근 질문 전체를 보여 준다(시간·비서 이름은 표시하지 않는다). */
.conv-item .conv-sub { display:block; min-width:0; }
.conv-item .conv-q { display:block; color:#dccbe2; font-size:11px; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.conv-item.active .conv-q { color:#f1e4f6; }
.conv-item, .conv-item.working { min-height:0; }

/* 상단의 ✧ Duet 로고는 빼고, 대화 제목만 남겨 한 줄로 납작하게 */
.game-wordmark { display:none; }
.topbar .conv-title { margin-top:0; font-size:16px; font-weight:600; color:#fbeff8; }