/* ---------- M365 Copilot client ---------- */
.cop{height:100%;display:flex;background:#1b1b1b;color:#e6e6e6;font-size:11px}
.cop .ci{display:grid;place-items:center;color:#adadad;cursor:pointer;border-radius:4px;padding:2px}
.cop .ci:hover{color:#fff;background:rgba(255,255,255,.08)}
.copside{width:158px;flex:none;display:flex;flex-direction:column;background:#202020;
  border-right:1px solid #2e2e2e;min-height:0}
.copbrand{display:flex;align-items:center;gap:5px;padding:8px 8px 6px}
.copbrand .cglyph{display:flex;flex:none;margin-right:1px}
.copbrand .cw{flex:1;font-size:13px;font-weight:600;color:#f2f2f2}
.coptabs{display:flex;gap:3px;margin:2px 8px 8px;background:#191919;border-radius:5px;padding:2px}
.coptabs button{flex:1;height:22px;border:0;border-radius:4px;background:transparent;color:#b8b8b8;
  font:inherit;font-size:10.5px;cursor:pointer}
.coptabs button.on{background:#333;color:#fff;font-weight:600}
.copnew{display:flex;align-items:center;gap:7px;margin:0 8px 8px;height:26px;padding:0 8px;border:0;
  border-radius:5px;background:#2d2d2d;color:#f0f0f0;font:inherit;font-size:11px;font-weight:600;cursor:pointer}
.copnew:hover{background:#383838}
.copnew .plus{width:14px;height:14px;border-radius:50%;background:#f0f0f0;color:#2d2d2d;
  display:grid;place-items:center;flex:none}
.copnav{padding:0 6px}
.copnav div{display:flex;align-items:center;gap:8px;height:24px;padding:0 6px;border-radius:5px;
  color:#dcdcdc;cursor:pointer;white-space:nowrap;overflow:hidden}
.copnav div:hover{background:rgba(255,255,255,.07)}
.pdot{width:13px;height:13px;border-radius:4px;flex:none}
.copcap{padding:11px 12px 4px;font-size:9.5px;color:#8f8f8f}
.copchats{flex:1;min-height:0;overflow:auto;padding:0 6px 6px}
.copchats div{height:23px;line-height:23px;padding:0 6px;border-radius:5px;color:#d2d2d2;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copchats div:hover{background:rgba(255,255,255,.07)}
.copchats div.on{background:#333;color:#fff}
.copuser{flex:none;display:flex;align-items:center;gap:7px;padding:8px;border-top:1px solid #2e2e2e}
.cavatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex:none;background:#3a3a3a}
.cavatar img{width:100%;height:100%;display:block}
.cwho{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.cn{font-size:10.5px;color:#f0f0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn b{font-size:8.5px;font-weight:600;background:#3d3d3d;color:#dcdcdc;border-radius:3px;padding:1px 4px;margin-right:4px}
.cs{font-size:9px;color:#9a9a9a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.copmain{flex:1;min-width:0;display:flex;flex-direction:column;background:#1b1b1b}
/* Copilot draws its own title bar, so .coptop *is* the window's drag handle and
   carries the min/max/close buttons flush into the top-right corner. */
.coptop{flex:none;display:flex;align-items:center;gap:6px;padding:9px 0 9px 12px;
  cursor:grab;touch-action:none}
.coptop .spacer{flex:1}
.coptop .wctls{margin:-9px 0 -9px 6px}
.coptop .wctl{height:40px}
.pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 10px;border-radius:5px;
  color:#cfcfcf;font-size:10.5px;cursor:pointer}
.pill.on{background:#333;color:#fff;font-weight:600}
.pill:hover{background:rgba(255,255,255,.07)}
.copbody{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;padding:12px 16px 22px;gap:14px}
.copask{font-size:19px;font-weight:400;color:#ededed;letter-spacing:-.01em;text-align:center}
.copfeed{width:100%;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:4px 0}
.bub{max-width:86%;padding:9px 12px;border-radius:12px;font-size:11px;line-height:1.6}
.bub p{margin:0 0 9px}
.bub p:last-child{margin-bottom:0}
.bub b{font-weight:600;color:#fff}
.bub.ai{align-self:flex-start;background:#282828;color:#e6e6e6;border-bottom-left-radius:4px}
/* A file the agent produced, attached under its reply. */
.bub .att{display:flex;align-items:center;gap:9px;margin-top:10px;padding:8px 11px;border-radius:8px;
  background:#1f1f1f;border:1px solid #3a3a3a;cursor:pointer}
.bub .att:hover{background:#252525;border-color:#4a4a4a}
.bub .att img{display:block;flex:none}
.bub .att .an{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.bub .att .an b{font-size:11px;font-weight:600;color:#eaeaea;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.bub .att .an > span{font-size:10px;color:#9a9a9a}
.bub.me{align-self:flex-end;background:#3a3a3a;color:#fff;border-bottom-right-radius:4px}
.copinput{width:100%;max-width:430px;flex:none;display:flex;align-items:center;gap:8px;height:38px;
  padding:0 12px;border-radius:19px;border:1px solid #3a3a3a;background:#242424}
.copinput input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#eaeaea;
  font:inherit;font-size:11.5px}
.copinput input::placeholder{color:#9a9a9a}
.copinput .ci.ring{border:1px solid #4a4a4a;border-radius:50%;width:22px;height:22px}
.copchips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:440px}
.copchips button{height:26px;padding:0 12px;border-radius:13px;border:1px solid #3a3a3a;background:transparent;
  color:#dcdcdc;font:inherit;font-size:10.5px;cursor:pointer}
.copchips button:hover{background:rgba(255,255,255,.07)}
.copchips button.more{padding:0 9px;border-color:transparent;color:#9a9a9a}
.copchips button.on{border-color:#4cc2ff;color:#eaf6ff;background:rgba(76,194,255,.12)}
/* The running commentary: what the agent is doing at this exact step. */
.bub.think{display:flex;gap:9px;align-items:flex-start;background:#242424;border:1px solid #3a3a3a}
.bub.think b{font-weight:600}
.bub .tdet{color:#a8a8a8;font-size:10.5px}
.bub .dots{display:inline-flex;gap:3px;padding-top:5px;flex:none}
.bub .dots i{width:4px;height:4px;border-radius:50%;background:#7fd4ff;animation:copDot 1s infinite}
.bub .dots i:nth-child(2){animation-delay:.16s}
.bub .dots i:nth-child(3){animation-delay:.32s}
@keyframes copDot{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ---------- Outlook desktop client ----------
   The "new Outlook" light chrome: near-white shell, white rounded panes,
   #0f6cbd accent, Danish UI. Like the Copilot client this app draws its own
   title bar (chromeless in DESKTOP_APPS). All content is dummy data. */
.ol{height:100%;display:flex;flex-direction:column;background:#faf9f8;color:#242424;font-size:11.5px}
.ol .oi{display:grid;place-items:center;color:#424242;cursor:pointer;border-radius:4px;padding:4px}
.ol .oi:hover{background:rgba(0,0,0,.06)}
.ol .cv{display:grid;place-items:center;width:13px;color:#605e5c;cursor:pointer;border-radius:3px}
.ol .cv:hover{background:rgba(0,0,0,.06)}

.oltitle{flex:none;display:flex;align-items:center;gap:10px;height:42px;padding-left:12px;
  background:#faf9f8;cursor:grab;touch-action:none}
.oltitle .obrand{display:flex;align-items:center;gap:9px;flex:none;width:210px}
.oltitle .obrand b{font-size:14px;font-weight:600;color:#1b1b1b;letter-spacing:-.01em}
.olsearch{flex:1;max-width:440px;margin:0 auto;display:flex;align-items:center;gap:9px;height:30px;
  padding:0 12px;border-radius:4px;background:#fff;border:1px solid #d1d1d1;color:#605e5c}
.oltitle .oright{flex:none;display:flex;align-items:center;gap:3px;width:210px;justify-content:flex-end}
.oltitle .wctls{margin:0 0 0 8px;align-self:stretch}
.oltitle .wctl{height:42px;width:34px;color:#3b3b3b}
.oltitle .wctl:hover{background:rgba(0,0,0,.07);color:#111}
.oltitle .wctl.x:hover{background:#c42b1c;color:#fff}
.olme{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none;margin-left:5px;background:#c9cdd3}
.olme img{width:100%;height:100%;object-fit:cover;display:block}

.olribbon{flex:none;display:flex;align-items:center;gap:3px;height:34px;padding:0 12px;background:#faf9f8}
.oltab{height:26px;padding:0 10px;border:0;border-radius:4px;background:transparent;color:#242424;
  font:inherit;font-size:12px;cursor:pointer;position:relative}
.oltab:hover{background:rgba(0,0,0,.06)}
.oltab.on{font-weight:600;color:#0f6cbd}
.oltab.on::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:2px;
  border-radius:1px;background:#0f6cbd}
.olevent{margin-left:auto;display:flex;align-items:center;gap:9px;color:#242424}
.olevent .ot{display:flex;flex-direction:column;line-height:1.4;text-align:left;max-width:200px}
.olevent b{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.olevent span{font-size:10.5px;color:#605e5c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.olcmd{position:relative;flex:none;display:flex;align-items:center;gap:2px;height:48px;padding:0 10px;
  background:#faf9f8}
/* One button: icon, label and chevron together, not a split control. */
.olnew{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 13px 0 16px;border:0;
  border-radius:5px;background:#0f6cbd;color:#fff;font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;margin-right:4px}
.olnew:hover{background:#115ea3}
.olcmd .osep{width:1px;height:20px;background:#e1dfdd;margin:0 5px;flex:none}
.olcmd .cb{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 7px;border-radius:4px;
  cursor:pointer;color:#242424;font-size:12px;white-space:nowrap}
.olcmd .cb:hover{background:rgba(0,0,0,.06)}
.olcmd .grow{flex:1}
/* Kept clear of the centred Sync button: on a narrow window the commands clip
   at the edge rather than being overlapped mid-word. */
.olcmds{display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden;
  max-width:calc(50% - 92px)}
/* Centred on the window, not on the leftover space, so it reads as the middle. */
.olsync{position:absolute;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 16px;border:1px solid #e1dfdd;
  border-radius:4px;background:#fff;color:#242424;font:inherit;font-size:12.5px;cursor:pointer;
  white-space:nowrap}
.olsync:hover{background:#f3f2f1;border-color:#d1d1d1}
.olsync svg{color:#605e5c}
.olcop{width:36px;height:36px;flex:none;border-radius:50%;background:#fff;border:1px solid #e1dfdd;
  display:grid;place-items:center;cursor:pointer;margin-left:6px}
.olcop:hover{border-color:#c7c7c7}

/* The rail runs the full height beside the ribbon, so the mail icon sits up in
   the top-left corner and the ribbon and command bar start to its right. */
.olshell{flex:1;min-height:0;display:flex}
.olright{flex:1;min-width:0;display:flex;flex-direction:column}
.olmain{flex:1;min-height:0;display:flex;background:#faf9f8;padding:0 6px 6px 0}
.olrail{width:52px;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:6px 0;background:#faf9f8}
.olrail .ra{width:38px;height:34px;display:grid;place-items:center;border-radius:5px;cursor:pointer;
  color:#424242;position:relative}
.olrail .ra:hover{background:rgba(0,0,0,.06)}
.olrail .ra.on{color:#0f6cbd}
.olrail .ra.on::before{content:'';position:absolute;left:-6px;top:7px;bottom:7px;width:3px;
  border-radius:2px;background:#0f6cbd}
.olrail .sq{width:19px;height:19px;border-radius:3px;display:grid;place-items:center;
  color:#fff;font-size:10px;font-weight:700}

.olfolders{width:172px;flex:none;display:flex;flex-direction:column;padding:6px 4px 0;overflow:auto;
  min-height:0}
.olgrp{display:flex;align-items:center;gap:7px;height:30px;padding:0 8px;color:#242424;
  font-size:12.5px;cursor:pointer;border-radius:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.olgrp:hover{background:rgba(0,0,0,.05)}
.olf{display:flex;align-items:center;gap:9px;height:30px;padding:0 8px 0 20px;border-radius:4px;
  color:#242424;cursor:pointer;font-size:12.5px}
.olf:hover{background:rgba(0,0,0,.05)}
.olf.on{background:#eaeaea;font-weight:600}
.olf .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.olf .fc{color:#242424;font-size:11.5px}
.olf.on .fc{font-weight:600}
.olf .tw{width:11px;flex:none;margin-left:-13px;display:grid;place-items:center;color:#605e5c}
.oladd{display:flex;align-items:center;gap:9px;height:32px;padding:0 8px;color:#242424;
  cursor:pointer;border-radius:4px;font-size:12.5px;margin-top:4px}
.oladd:hover{background:rgba(0,0,0,.05)}

.olpane{flex:none;width:326px;display:flex;flex-direction:column;background:#fff;border:1px solid #edebe9;
  border-radius:8px;min-height:0;overflow:hidden}
.olhead{flex:none;display:flex;align-items:center;gap:4px;height:46px;padding:0 10px 0 14px}
.olhead .ht{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.olhead .ht .st{color:#f0a500;display:grid;place-items:center}
.olhead .grow{flex:1}
.olhead .by{font-size:12px;color:#242424;padding:0 4px;cursor:pointer;white-space:nowrap}
.olsum{width:28px;height:28px;flex:none;border-radius:50%;border:1px solid #d8d4ee;background:#fff;
  display:grid;place-items:center;cursor:pointer;color:#7a5af8}
.olbrief{margin:0 10px 10px;border:1px solid #edebe9;border-radius:6px;padding:11px 12px;display:flex;
  gap:11px;align-items:flex-start;cursor:pointer}
.olbrief:hover{background:#faf9f8}
.olbrief .bi{color:#7a5af8;flex:none;margin-top:1px}
.olbrief .bt{font-size:12.5px;line-height:1.45}
.olbrief .bt b{font-weight:600}
.olbrief .bt span{color:#424242}

.olsec{display:flex;align-items:center;gap:7px;height:28px;padding:0 12px;color:#242424;font-size:12px;
  border-top:1px solid #f0eeed;border-bottom:1px solid #f0eeed;background:#fff}
.olrows{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.olrow{display:flex;gap:10px;padding:9px 12px 10px;cursor:pointer;border-bottom:1px solid #f3f2f1;
  position:relative}
.olrow:hover{background:#f5f5f5}
.olrow.on{background:#eaeaea}
.olrow.unread::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#0f6cbd}
/* "This is the mail that just arrived" -- the row the current step is about. */
.olrow.look{background:#eaf3fb;animation:mailLook 1.8s ease-in-out infinite}
@keyframes mailLook{
  0%,100%{box-shadow:inset 0 0 0 2px rgba(15,108,189,.55)}
  50%    {box-shadow:inset 0 0 0 2px rgba(15,108,189,1)}}
.olav{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  color:#fff;font-size:11px;font-weight:600;margin-top:1px}
.olav img{width:100%;height:100%;object-fit:cover}
.olrow .rw{flex:1;min-width:0}
.olrow .rw > span{display:block}
.olrow .rw > .r1{display:flex;align-items:baseline;gap:8px}
.olrow .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.olrow.unread .who{font-weight:700}
.olrow .when{flex:none;font-size:11.5px;color:#424242}
.olrow.unread .when{color:#0f6cbd;font-weight:600}
.olrow .subj{margin-top:2px;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.olrow.unread .subj{color:#0f6cbd;font-weight:600}
.olrow .prev{margin-top:2px;font-size:12px;color:#605e5c;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

.olread{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff;margin-left:6px;
  border:1px solid #edebe9;border-radius:8px;min-height:0;overflow:hidden}
.olempty{flex:1;display:flex;align-items:center;justify-content:center}
.olrhead{flex:none;padding:16px 20px 12px;border-bottom:1px solid #f0eeed}
.olrhead .rs{font-size:17px;font-weight:600;line-height:1.35}
.olrmeta{display:flex;align-items:center;gap:11px;padding:12px 20px}
.olrmeta .rn{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.olrmeta .rn b{font-size:12.5px}
.olrmeta .rn span{font-size:11.5px;color:#605e5c}
.olrmeta .rt{font-size:11.5px;color:#605e5c;flex:none}
.olrbody{flex:1;min-height:0;overflow:auto;padding:4px 20px 20px;font-size:12.5px;line-height:1.7;
  color:#242424;white-space:pre-wrap}

/* ---- the flow's own outgoing mail ----
   An order round the agent writes: one row per partner, grouped, each row
   drafting, drafted or sent. `.olrows` already scrolls, so a long round does
   not stretch the window. */
.olsec.sub{height:25px;border-top:0;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#605e5c}
.olrow .ostat{flex:none;align-self:center;padding:3px 9px;border-radius:999px;font-size:10.5px;
  font-weight:700;white-space:nowrap}
.olrow .ostat.wait{color:#605e5c;background:rgba(0,0,0,.06)}
.olrow .ostat.draft{color:#8a5300;background:rgba(240,165,0,.20)}
.olrow .ostat.sent{color:#0e6027;background:rgba(16,124,65,.16)}
/* The folder count the flow put there, rather than the standing one. */
.olf .fc.live{color:#0f6cbd;font-weight:600}
/* A file the agent has just written, under the list. */
.olfile{flex:none;display:flex;align-items:center;gap:9px;margin:6px 8px 8px;padding:8px 10px;
  border:1px solid #edebe9;border-radius:7px;background:#faf9f8}
.olfile img{display:block;flex:none}
.olfile .fnm{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.olfile .fnm b{font-size:11.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.olfile .fnm > span{font-size:10.5px;color:#605e5c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.olfile .fdot{width:7px;height:7px;border-radius:50%;flex:none;background:#107c41;
  animation:olFile 1.6s ease-in-out infinite}
@keyframes olFile{0%,100%{opacity:.3}50%{opacity:1}}