/* Copyright (c) 2026 matoio.com. All rights reserved. */
/* 「我的办公室」 window (assets/office.js). Sized in em: set font-size on the [data-office] element to
   scale it. Three looks follow Mato Pai's own themes: paper (网格·白天), night (夜间), brand (MyAITeam 紫蓝). */
.o {
  --o-bg: #ffffff; --o-side: #fafafa; --o-line: #e6e6e6; --o-ink: #151515; --o-sub: #7a7a7a; --o-faint: #b3b3b3;
  --o-accent: #e0452f; --o-mention: #e0452f; --o-chip: #f3f3f3; --o-me: #1f1f1f; --o-me-ink: #fff;
  --o-busy: #2f6bf0; --o-wait: #e0452f; --o-ok: #1f9d55; --o-card: #fbfbfb; --o-shadow: 0 2em 5em -2.4em rgba(20, 20, 30, .35);
  --o-radius: 1.1em; --o-h: 40em;
  container-type: inline-size;
  font: 400 1em/1.5 "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--o-ink); text-align: left;
}
.o[data-look="night"] {
  --o-bg: #1e1c3b; --o-side: #23214a; --o-line: rgba(255, 255, 255, .1); --o-ink: #f2f1fb; --o-sub: #a9a7ca; --o-faint: #6f6c98;
  --o-accent: #ff6b57; --o-mention: #ff8a73; --o-chip: rgba(255, 255, 255, .07); --o-me: #ffd84a; --o-me-ink: #1b1a2e;
  --o-busy: #6ea0ff; --o-wait: #ff6b57; --o-ok: #4ade80; --o-card: rgba(255, 255, 255, .05); --o-shadow: 0 2.4em 6em -2em rgba(0, 0, 0, .7);
}
.o[data-look="brand"] {
  --o-bg: #ffffff; --o-side: #f7f6ff; --o-line: #e7e3fb; --o-ink: #18163a; --o-sub: #6f6b95; --o-faint: #aaa6cc;
  --o-accent: #6c4dff; --o-mention: #5b3ff5; --o-chip: #f1eeff; --o-me: linear-gradient(120deg, #3b6cff, #7b4dff); --o-me-ink: #fff;
  --o-busy: #3b6cff; --o-wait: #ef4a6b; --o-ok: #16a34a; --o-card: #fbfaff; --o-shadow: 0 2.4em 6em -2.4em rgba(60, 40, 160, .45);
}
.o *, .o *::before, .o *::after { box-sizing: border-box; }
.o :where(p) { margin: 0; }
.o :where(ul) { margin: 0; padding: 0; list-style: none; }
.o-i { width: 1.15em; height: 1.15em; flex: none; }
.o-av { display: block; width: 2.2em; height: 2.2em; border-radius: 50%; overflow: hidden; flex: none; background: var(--o-chip); }
.o-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.o-av-xs { width: 1.35em; height: 1.35em; box-shadow: 0 0 0 .12em var(--o-bg); }

.o-win { display: grid; grid-template-columns: 15em minmax(0, 1fr) 16.5em; grid-template-rows: auto minmax(0, 1fr); height: var(--o-h); border-radius: var(--o-radius); overflow: hidden; background: var(--o-bg); border: 1px solid var(--o-line); box-shadow: var(--o-shadow); }

/* Member bar */
.o-bar { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 1em; padding: 1.4em 1.2em .7em; border-bottom: 1px solid var(--o-line); background: var(--o-side); }
.o-brand { display: flex; align-items: center; gap: .55em; align-self: center; margin-right: .4em; }
.o-brand img { width: 2em; height: 2em; }
.o-brand span { display: grid; line-height: 1.2; }
.o-brand b { font-size: .95em; }
.o-brand small { font-size: .68em; color: var(--o-sub); letter-spacing: .04em; }
.o-on, .o-all { align-self: center; display: grid; justify-items: center; padding: .3em .55em; border-radius: .6em; background: var(--o-chip); font-size: .72em; line-height: 1.3; color: var(--o-sub); }
.o-on b, .o-all b { font: 800 1.35em/1 "Plus Jakarta Sans", system-ui, sans-serif; color: var(--o-accent); }
.o-all { margin-left: auto; }
.o-crew { display: flex; gap: .7em; min-width: 0; }
.o-crew li { position: relative; display: grid; justify-items: center; gap: .25em; width: 3.6em; }
.o-crew .o-av { width: 2.7em; height: 2.7em; box-shadow: 0 0 0 .14em var(--o-bg); transition: box-shadow .3s; }
.o-crew li.is-busy .o-av, .o-crew li:has(.o-bub.is-on) .o-av, .o-list li.is-busy .o-av { box-shadow: 0 0 0 .16em var(--o-busy); }
.o-crew b { font-size: .68em; font-weight: 600; white-space: nowrap; color: var(--o-sub); }
.o-bub { position: absolute; bottom: calc(100% - .3em); left: 50%; transform: translate(-50%, .3em) scale(.9); opacity: 0; padding: .15em .5em; border-radius: .5em; background: var(--o-busy); color: #fff; font: 700 .62em/1.4 inherit; font-style: normal; white-space: nowrap; transition: opacity .25s, transform .25s; z-index: 1; }
.o-bub.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.o-bub.is-wait { background: var(--o-wait); }

/* Left list */
.o-list { display: flex; flex-direction: column; gap: .5em; padding: .9em .7em; border-right: 1px solid var(--o-line); background: var(--o-side); min-height: 0; overflow: hidden; }
.o-busyline { display: flex; align-items: center; gap: .45em; padding: 0 .4em .6em; border-bottom: 1px solid var(--o-line); font-size: .78em; font-weight: 700; color: var(--o-accent); }
.o-busyline i { width: .55em; height: .55em; border-radius: 2px; background: var(--o-ink); }
.o-cap { padding: .35em .4em 0; font-size: .7em; font-weight: 700; color: var(--o-sub); }
.o-red { color: var(--o-accent); }
.o-cap small { font-weight: 500; color: var(--o-sub); }
.o-people { display: grid; gap: .1em; }
.o-people li { display: flex; align-items: center; gap: .6em; padding: .45em .4em; border-radius: .6em; transition: background .3s; }
.o-people li.is-busy { background: var(--o-chip); }
.o-people p { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.o-people b { font-size: .8em; }
.o-people span { font-size: .68em; color: var(--o-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-tag { font-style: normal; font-size: .58em; font-weight: 700; padding: .1em .45em; border-radius: .4em; color: var(--o-busy); background: color-mix(in srgb, var(--o-busy) 12%, transparent); opacity: 0; white-space: nowrap; max-width: 9em; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s; }
.o-tag.is-on { opacity: 1; }
.o-tag.is-wait { color: var(--o-wait); background: color-mix(in srgb, var(--o-wait) 12%, transparent); }
.o-groups { display: grid; gap: .2em; }
.o-groups li { display: flex; align-items: center; gap: .55em; padding: .5em .45em; border-radius: .7em; }
.o-groups li.is-on { background: var(--o-bg); box-shadow: inset 0 0 0 1px var(--o-line); }
.o-stack { display: grid; grid-template-columns: repeat(2, 1.35em); gap: .1em; flex: none; }
.o-chat-head .o-stack { display: flex; }
.o-chat-head .o-stack .o-av + .o-av { margin-left: -.35em; }
.o-groups p { display: grid; min-width: 0; line-height: 1.35; }
.o-groups b { font-size: .78em; }
.o-groups span { font-size: .66em; color: var(--o-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-me { margin-top: auto; display: flex; gap: .5em; }
.o-me-btn { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .6em; background: var(--o-ink); color: var(--o-bg); font-size: .8em; font-weight: 800; }
.o-link { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4em; border-radius: .6em; border: 1px solid var(--o-line); font-size: .74em; font-weight: 700; }

/* Chat */
.o-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.o-chat-head { display: flex; align-items: center; gap: .6em; padding: .75em 1.1em; border-bottom: 1px solid var(--o-line); white-space: nowrap; }
.o-chat-head > b { font-size: .9em; }
.o-meta { font-size: .7em; color: var(--o-sub); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.o-works-btn { margin-left: auto; padding: .25em .7em; border-radius: .5em; border: 1px solid var(--o-line); font-size: .7em; font-weight: 700; }
.o-works-btn b { color: var(--o-accent); }
.o-msgs { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: .75em; padding: 1em 1.6em .6em; scroll-behavior: smooth; }
.o-row { display: grid; gap: .4em; animation: o-in .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes o-in { from { opacity: 0; transform: translateY(.6em); } }
.o-sys { justify-self: center; font-size: .66em; color: var(--o-faint); }
.o-row.is-me { justify-items: end; }
.o-me-bub { max-width: 82%; padding: .6em .9em; border-radius: .9em .9em .25em .9em; background: var(--o-me); color: var(--o-me-ink); font-size: .8em; font-weight: 600; }
.o-me-bub em { font-style: normal; font-weight: 800; }
.o-who { display: flex; align-items: center; gap: .5em; font-size: .78em; }
.o-who .o-av { width: 1.9em; height: 1.9em; }
.o-admin { font-style: normal; font-size: .78em; font-weight: 700; padding: .05em .45em; border-radius: .35em; background: #ffd84a; color: #1b1a2e; }
.o-who time { font-size: .82em; color: var(--o-faint); font-family: ui-monospace, monospace; }
.o-body { margin-left: 1.6em; display: grid; gap: .35em; padding: .7em .9em; border-radius: .25em .9em .9em .9em; border: 1px solid var(--o-line); background: var(--o-card); font-size: .78em; line-height: 1.65; max-width: 92%; justify-self: start; }
.o-body em { font-style: normal; font-weight: 700; color: var(--o-mention); }
.o-files { display: flex; flex-wrap: wrap; gap: .4em; }
.o-files span { display: inline-flex; align-items: center; gap: .35em; padding: .3em .6em; border-radius: .5em; border: 1px solid var(--o-line); background: var(--o-bg); font-size: .92em; font-weight: 600; }
.o-ask { margin-left: 1.25em; justify-self: start; width: min(24em, 92%); padding: .8em .95em; border-radius: .25em .9em .9em .9em; border: 1.5px solid var(--o-accent); background: color-mix(in srgb, var(--o-accent) 5%, var(--o-bg)); }
.o-ask-t { font-size: .66em; font-weight: 800; color: var(--o-accent); letter-spacing: .06em; }
.o-ask-q { margin-top: .2em; font-size: .8em; }
.o-ask-q b { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 1.15em; }
.o-opts { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .6em; }
.o-opts span { padding: .3em .75em; border-radius: .55em; border: 1px solid var(--o-line); background: var(--o-bg); font-size: .72em; font-weight: 700; }
.o-opts .is-pick { border-color: var(--o-accent); color: var(--o-accent); }
.o-ask.is-done .o-opts .is-pick { background: var(--o-accent); color: #fff; }
.o-ask.is-done .o-opts span:not(.is-pick) { opacity: .45; }
.o-pill { justify-self: center; padding: .3em .8em; border-radius: .5em; background: var(--o-ink); color: var(--o-bg); font-size: .7em; font-weight: 600; }
.o-req { display: flex; align-items: center; gap: .55em; padding: .6em .9em; border-radius: .7em; border: 1px solid var(--o-line); background: var(--o-chip); font-size: .74em; color: var(--o-sub); }
.o-req time { margin-left: auto; font-family: ui-monospace, monospace; }
.o-run { display: flex; align-items: center; gap: .5em; font-size: .72em; color: var(--o-sub); }
.o-run .o-av { width: 1.5em; height: 1.5em; }
.o-dots { display: inline-flex; gap: .2em; margin-left: .2em; vertical-align: middle; }
.o-dots i { width: .3em; height: .3em; border-radius: 50%; background: currentColor; animation: o-blink 1s infinite; }
.o-dots i:nth-child(2) { animation-delay: .15s; } .o-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes o-blink { 50% { opacity: .2; } }
.o-done { font-size: .72em; color: var(--o-sub); padding-bottom: .5em; border-bottom: 1px solid var(--o-line); }
.o-hint { padding: 0 1.6em .35em; font-size: .64em; color: var(--o-faint); }
.o-composer { display: flex; align-items: center; gap: .6em; margin: 0 1.4em 1em; padding: .55em .55em .55em .7em; border-radius: .9em; border: 1px solid var(--o-line); background: var(--o-bg); }
.o-plus { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; border: 1px solid var(--o-line); color: var(--o-sub); font-size: .85em; }
.o-ph { flex: 1; min-width: 0; font-size: .72em; color: var(--o-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-mic { color: var(--o-sub); display: grid; }
.o-send { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--o-busy); color: #fff; }
.o-send .o-i { width: .95em; height: .95em; }

/* Right panel */
.o-panel { display: flex; flex-direction: column; gap: .7em; padding: .9em .9em; border-left: 1px solid var(--o-line); background: var(--o-side); min-height: 0; overflow: hidden; }
.o-panel-head { display: flex; align-items: center; gap: .45em; padding-bottom: .6em; border-bottom: 1px solid var(--o-line); }
.o-panel-head b { font-size: .86em; }
.o-count { font-size: .64em; font-weight: 700; color: var(--o-accent); background: color-mix(in srgb, var(--o-accent) 12%, transparent); padding: .05em .4em; border-radius: .35em; }
.o-set { margin-left: auto; font-size: .66em; font-weight: 700; padding: .2em .55em; border-radius: .45em; border: 1px solid var(--o-line); }
.o-gm li { padding: .35em .3em; }
.o-gm .o-av { width: 1.9em; height: 1.9em; }
.o-notice { font-size: .7em; color: var(--o-sub); line-height: 1.55; }
.o-notice b { color: var(--o-ink); margin-right: .3em; }
.o-memory { display: grid; gap: .4em; }
.o-mem { padding: .45em .6em; border-radius: .55em; border: 1px solid var(--o-line); background: var(--o-bg); font-size: .68em; line-height: 1.5; }
.o-mem:not([hidden]) { animation: o-in .45s ease-out; }
.o-remember { display: flex; justify-content: space-between; gap: .5em; font-size: .66em; color: var(--o-faint); padding: .4em .6em; border-radius: .55em; border: 1px dashed var(--o-line); }
.o-remember b { color: var(--o-sub); }
.o-works { display: grid; gap: .4em; }
.o-tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: .5em; overflow: hidden; border: 1px solid var(--o-line); font-size: .68em; font-weight: 700; text-align: center; }
.o-tabs span { padding: .3em; color: var(--o-sub); }
.o-tabs .is-on { background: var(--o-ink); color: var(--o-bg); }
.o-works ul { display: grid; gap: .3em; }
.o-works li { display: flex; align-items: center; gap: .45em; padding: .4em .55em; border-radius: .55em; background: var(--o-bg); border: 1px solid var(--o-line); font-size: .68em; font-weight: 600; min-width: 0; }
.o-works li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-works li.is-new { animation: o-in .45s ease-out; border-color: var(--o-ok); }
.o-works li .o-i { color: var(--o-accent); }
.o-routine { display: grid; gap: .35em; }
.o-rt { display: flex; align-items: center; gap: .45em; padding: .45em .55em; border-radius: .55em; border: 1px dashed var(--o-line); font-size: .66em; color: var(--o-sub); }
.o-rt b { color: var(--o-ink); }
.o-rt .o-i { color: var(--o-accent); }

/* Focus: dim everything but the highlighted region */
.o[data-focus]:not([data-focus=""]) [data-region] { transition: opacity .35s, box-shadow .35s; }
.o[data-focus]:not([data-focus=""]) .o-win > [data-region], .o[data-focus]:not([data-focus=""]) .o-panel > [data-region], .o[data-focus]:not([data-focus=""]) .o-panel > p { opacity: .28; }
.o[data-focus="bar"] [data-region="bar"], .o[data-focus="list"] [data-region="list"], .o[data-focus="chat"] [data-region="chat"],
.o[data-focus="ask"] [data-region="chat"], .o[data-focus="memory"] [data-region="panel"], .o[data-focus="routine"] [data-region="panel"],
.o[data-focus="works"] [data-region="panel"], .o[data-focus="notice"] [data-region="panel"], .o[data-focus="members"] [data-region="panel"],
.o[data-focus="memory"] [data-region="memory"], .o[data-focus="routine"] [data-region="routine"], .o[data-focus="works"] [data-region="works"],
.o[data-focus="notice"] [data-region="notice"], .o[data-focus="members"] [data-region="members"] { opacity: 1 !important; }
.o[data-focus="memory"] [data-region="memory"], .o[data-focus="routine"] [data-region="routine"], .o[data-focus="works"] [data-region="works"],
.o[data-focus="notice"] [data-region="notice"], .o[data-focus="members"] [data-region="members"], .o[data-focus="ask"] .o-ask,
.o[data-focus="bar"] .o-crew { border-radius: .7em; box-shadow: 0 0 0 .2em color-mix(in srgb, var(--o-accent) 55%, transparent); }

/* Narrow windows drop the side columns */
@container (max-width: 980px) { .o-win { grid-template-columns: 14em minmax(0, 1fr); } .o-panel { display: none; } .o-all { display: none; } }
@container (max-width: 680px) {
  .o-win { grid-template-columns: minmax(0, 1fr); }
  .o-list, .o-on, .o-brand small, .o-meta, .o-hint { display: none; }
  .o-crew { gap: .35em; overflow: hidden; }
  .o-crew li { width: 3em; }
  .o-crew li:nth-child(n+5) { display: none; }
  .o-crew b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .o-msgs { padding: .9em 1em .5em; }
  .o-composer { margin: 0 .8em .8em; }
  .o-body, .o-ask { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .o *, .o *::before, .o *::after { animation: none !important; transition: none !important; } }