/* Three panels: staff stories, selected conversation, tasks and approvals. */
.app.wide .main .pane:has(> .staff-workspace) { padding:0;overflow:hidden;background:var(--surface); }
.staff-workspace { display:grid;grid-template-columns:180px minmax(0,1fr) 320px;height:100%;min-height:0; }
.staff-selector,.staff-conversation,.staff-work { display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface);overflow:hidden; }
.staff-selector { border-right:1px solid var(--line); }
.staff-selector>header { padding:22px 18px 18px; }
.staff-selector h2,.staff-work h2 { font-size:14px;font-weight:600;margin:0 0 5px;letter-spacing:-.02em; }
.staff-selector>header>span { color:var(--muted);font-size:11px; }
.staff-stories { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:16px 4px;padding:6px 10px 20px;overflow:auto;flex:1; }
.staff-story { display:flex;flex-direction:column;align-items:center;gap:7px;min-height:82px;padding:4px 0;background:transparent;color:var(--text); }
.staff-story-ring { position:relative;display:grid;place-items:center;width:60px;height:60px;border:1px solid var(--line2);border-radius:50%;padding:4px; }
.staff-story.selected .staff-story-ring { border:2px solid var(--text);padding:3px; }
.staff-story:hover .staff-story-ring { border-color:var(--text); }
.staff-avatar { display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--panel);color:var(--text);font-size:18px;font-weight:500;flex:none; }
.staff-avatar svg { width:23px;height:23px; }
.staff-avatar.small { width:32px;height:32px;font-size:12px; }
.staff-story-name { font-size:11px;line-height:1.3; }
.staff-story.selected .staff-story-name { font-weight:600; }
.staff-attention { position:absolute;top:1px;right:1px;width:8px;height:8px;background:var(--text);border:2px solid var(--surface);border-radius:50%; }
.staff-selector>footer { flex:none;font-size:10px;line-height:1.5;color:var(--muted);padding:12px 18px;border-top:1px solid var(--line); }
.staff-chat-header { display:flex;align-items:center;gap:11px;padding:20px 24px;border-bottom:1px solid var(--line);flex:none;min-height:80px; }
.staff-chat-header h2 { margin:0 0 4px;font-size:16px;font-weight:600;letter-spacing:-.025em; }
.staff-chat-header p { margin:0;color:var(--muted);font-size:11px; }
#showWork { margin-left:auto;display:none;background:transparent;font-size:11px; }
.team-messages { flex:1;min-height:0;overflow-y:auto;padding:28px max(24px,calc((100% - 680px)/2));scroll-behavior:smooth; }
.team-message { font-size:14px;line-height:1.75;margin-bottom:28px;overflow-wrap:anywhere; }
.team-message.from-owner { width:fit-content;max-width:88%;margin-left:auto;padding:10px 15px;border:1px solid var(--line);border-radius:18px 18px 4px 18px; }
.team-speaker { display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:12px; }
.team-speaker strong { font-weight:600; }
.team-speaker .staff-avatar { width:24px;height:24px;font-size:10px; }
.team-message-text { white-space:pre-wrap;overflow-wrap:anywhere; }
.team-message a,.work-task a { color:var(--text);text-decoration:underline;text-underline-offset:3px; }
.team-source { display:inline-block;font-size:11px;margin:10px 12px 5px 0; }
.system-note { font-size:12px;color:var(--muted); }
.chat-work-link { display:block;padding:8px 0;margin-top:8px;background:transparent;color:var(--muted);font-size:11px; }
.chat-work-link:hover { color:var(--text); }
.team-welcome { min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px 0; }
.team-welcome>.staff-avatar { margin-bottom:20px; }
.team-welcome h2 { font-size:26px;font-weight:600;letter-spacing:-.04em;margin:0 0 10px; }
.team-welcome p { max-width:340px;font-size:13px;line-height:1.7;color:var(--muted);margin:0; }
.team-composer { flex:none;width:100%;max-width:728px;align-self:center;padding:12px 24px 18px; }
.team-inputbox { position:relative;display:flex;align-items:flex-end;gap:10px;padding:12px;border:1px solid var(--line2);border-radius:20px; }
.team-inputbox:focus-within { border-color:var(--text); }
.team-inputbox textarea { flex:1;min-width:0;min-height:40px;max-height:160px;resize:none;border:0;border-radius:0;box-shadow:none;outline:none;background:transparent;color:var(--text);padding:5px 3px;font:inherit;font-size:14px; }
.team-inputbox button[type=submit] { flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;font-size:22px;background:transparent; }
.team-inputbox button:disabled { opacity:.35; }
.team-composer-meta { display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-size:10px;color:var(--muted); }
.team-composer-meta label { display:flex;align-items:center;gap:6px;cursor:pointer; }
.team-composer-meta input { width:12px;height:12px;margin:0;accent-color:#333; }
.team-mention { position:absolute;bottom:calc(100% + 7px);left:0;right:0;z-index:5;background:var(--surface);border:1px solid var(--line2);border-radius:12px;max-height:240px;overflow:auto;box-shadow:0 8px 20px #0000000a; }
.team-mention button { display:block;width:100%;padding:12px;text-align:left;font-size:12px;background:transparent; }
.team-mention button:hover { background:var(--hover); }
.team-mention span { display:block;font-size:10px;color:var(--muted);margin-top:3px; }
.staff-work { border-left:1px solid var(--line); }
.staff-work>header { display:flex;align-items:center;justify-content:space-between;padding:22px 20px 18px;border-bottom:1px solid var(--line);flex:none; }
.staff-work>header p { font-size:11px;color:var(--muted);margin:0; }
#closeWork { display:none; }
.staff-work-scroll { flex:1;min-height:0;overflow-y:auto;padding:0 20px 24px; }
#staffProfile details { font-size:11px;color:var(--muted);border-bottom:1px solid var(--line); }
#staffProfile summary { padding:15px 0;cursor:pointer; }
#staffProfile ul { padding-left:16px;line-height:1.7;margin:0 0 14px; }
.team-assign-toggle { width:100%;padding:16px 0;text-align:left;background:transparent;color:var(--text);font-size:12px;border-bottom:1px solid var(--line); }
.team-assign-form { display:grid;gap:9px;margin:15px 0;font-size:12px; }
.team-assign-form input,.team-assign-form select,.team-assign-form textarea { width:100%;padding:10px;background:transparent;border:1px solid var(--line);color:var(--text);border-radius:8px;font:inherit;font-size:12px; }
.team-assign-form .btn { justify-self:start;background:transparent; }
.work-section { margin-top:24px; }
.work-section h3 { display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;font-size:12px;font-weight:600; }
.work-section h3>span { font-size:11px;color:var(--muted);font-weight:400; }
.work-empty { font-size:11px;color:var(--muted);padding:12px 0;margin:0; }
.work-task,.work-approval { padding:16px 0;border-bottom:1px solid var(--line);font-size:12px; }
.work-task-top { display:flex;flex-direction:column;gap:5px; }
.work-task-top strong { font-size:12px;font-weight:500;line-height:1.6; }
.work-task-top>span { font-size:10px;color:var(--muted); }
.work-person { font-size:10px;color:var(--muted);padding:7px 0 0;background:transparent; }
.work-task details,.work-approval details { font-size:12px;margin-top:9px; }
.work-task summary,.work-approval summary { cursor:pointer;color:var(--muted);padding:6px 0; }
.work-task details .team-message-text,.work-approval details .team-message-text { line-height:1.7;margin-top:8px; }
.work-approval>p { font-size:11px;color:var(--muted);overflow-wrap:anywhere;margin:8px 0; }
.work-buttons { display:flex;flex-wrap:wrap;gap:8px;margin-top:10px; }
.work-buttons:empty { display:none; }
.work-buttons .btn { font-size:11px;background:transparent;padding:6px 10px; }
.team-working { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding-bottom:18px; }
.team-working>span { width:6px;height:6px;background:currentColor;border-radius:50%;animation:team-pulse 1.4s ease-in-out infinite; }
@keyframes team-pulse {50%{opacity:.25;}}
@media(max-width:1150px) and (min-width:901px) { .staff-workspace{grid-template-columns:108px minmax(0,1fr) 278px;}.staff-stories{grid-template-columns:1fr;}.staff-selector>header{padding:20px 10px;}.staff-selector>footer{padding:12px 10px;}.staff-chat-header{padding:18px;}.staff-work-scroll{padding:0 16px 20px;} }
@media(max-width:900px) { .staff-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);}.staff-selector{border-right:0;border-bottom:1px solid var(--line);}.staff-selector>header,.staff-selector>footer{display:none;}.staff-stories{display:flex;gap:14px;flex:none;padding:12px 16px;overflow-x:auto;}.staff-story{flex:none;min-width:58px;min-height:0;padding:0;gap:6px;}.staff-story-ring{width:52px;height:52px;}.staff-story-ring .staff-avatar{width:40px;height:40px;font-size:15px;}.staff-story-name{font-size:10px;}.staff-conversation{grid-row:2;}.staff-chat-header{padding:14px 16px;min-height:66px;}#showWork{display:block;}.staff-work{display:none;position:absolute;inset:0 0 0 auto;width:min(360px,100%);z-index:15;box-shadow:-12px 0 30px #0000000d;}.staff-workspace{position:relative;}.staff-workspace.show-work .staff-work{display:flex;}#closeWork{display:grid;min-width:44px;min-height:44px;}.team-messages{padding:20px 16px;}.team-composer{padding:10px 16px 16px;}.team-inputbox textarea{font-size:16px;}.team-inputbox button[type=submit]{width:44px;height:44px;}.team-welcome h2{font-size:23px;}.team-composer-meta{font-size:9px;}.work-buttons .btn{min-height:40px;} }
@media(prefers-reduced-motion:reduce){.team-messages{scroll-behavior:auto;}.team-working>span{animation:none;}}
/* Sage, ink and soft individual avatar colors. Keep color concentrated on useful cues. */
.staff-workspace { --work-ink:#24372f;--work-accent:#326e5a;--work-line:#e5ebe7;color:#24312e; }
.staff-selector { background:#f7faf8;border-color:var(--work-line); }
.staff-work { background:#f8f9fc;border-color:#e6e9f0; }
.staff-selector>header { padding-top:25px; }
.staff-selector h2,.staff-work h2 { color:#293c34; }
.staff-selector>footer { color:#65756d;border-color:var(--work-line); }
.staff-story-ring { border-color:#dbe4de;transition:border-color .18s,box-shadow .18s; }
.staff-story.selected .staff-story-ring { border-color:var(--person-ink,#326e5a);box-shadow:0 0 0 3px var(--person-bg,#e6f1ec); }
.staff-story:hover .staff-story-ring { border-color:var(--person-ink,#326e5a); }
.staff-avatar { background:var(--person-bg,#e6f1ec);color:var(--person-ink,#326e5a);font-weight:600; }
.staff-story.selected .staff-story-name { color:var(--person-ink,#326e5a); }
.staff-attention { background:#477b66;border-color:#f7faf8; }
.staff-chat-header { border-color:#edf0ed;background:#fff; }
.staff-chat-header h2 { color:#24362e; }
.staff-chat-header p { color:#6c7872; }
.team-message.from-owner { background:#f1f0f8;border-color:#e7e4f1;color:#3f3a55; }
.team-speaker strong { color:#33473c; }
.team-source,.chat-work-link { color:#437963; }
.team-inputbox { background:#fff;border-color:#dce5df;box-shadow:0 3px 18px #254b3510;transition:border-color .18s,box-shadow .18s; }
.team-inputbox:focus-within { border-color:#789d8b;box-shadow:0 3px 20px #254b3516; }
.team-inputbox button[type=submit] { background:#326e5a;color:#fff;border-color:#326e5a; }
.team-inputbox button[type=submit]:hover { background:#265a48;border-color:#265a48; }
.team-composer-meta input { accent-color:#326e5a; }
.team-mention { border-color:#dce5df; }
.team-mention button:hover { background:#f2f7f4; }
.staff-work>header { background:#f8f9fc;border-color:#e6e9f0; }
.work-section h3 { color:#48556b;letter-spacing:.015em; }
.work-section h3>span:not(:empty),#workCount:not(:empty) { display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:#e9edf5;color:#52617a;font-size:10px;padding:0 5px; }
#approvalCount:not(:empty) { background:#eee9f6;color:#765b91; }
.team-assign-toggle { color:#326e5a;border-color:#e6e9f0;font-weight:500; }
.team-assign-form input,.team-assign-form textarea,.team-assign-form select { background:#fff;border-color:#dde3e9; }
.team-assign-form .btn { color:#326e5a;border-color:#c6d9cf;background:#f2f8f4; }
.work-task,.work-approval { background:#fff;border:1px solid #e6e9ef;border-radius:12px;margin:10px 0;padding:14px; }
.work-task-top strong { color:#35434c;font-weight:550;font-size:12px; }
.work-status { display:flex;align-items:center;gap:6px; }
.work-status::before { content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none; }
.work-status[data-status=running] { color:#6c6095; }
.work-status[data-status=needs_review] { color:#326e5a; }
.work-status[data-status=completed] { color:#527763; }
.work-status[data-status=blocked],.work-status[data-status=interrupted] { color:#945c6b; }
.work-buttons .btn { border-color:#dde4e0;color:#466354;background:#fff;border-radius:8px; }
.work-buttons [data-approve],.work-buttons [data-accept] { background:#f0f6f2;border-color:#ccded2;color:#32654e; }
.work-buttons [data-dismiss] { color:#727886;border-color:#e5e8ed;background:#fff; }
.work-empty { color:#687381;font-size:11px; }
.team-working { color:#527f69; }
.staff-workspace :focus-visible { outline-color:#719782; }
@media(max-width:900px) { .staff-selector{border-color:#e1e9e4;}.staff-work{box-shadow:-14px 0 36px #223d3020;}#showWork{border-color:#dfe7e1;color:#456a56;}.staff-chat-header{background:#fff;} }
.work-email-links { display:flex;flex-wrap:wrap;gap:8px 12px;margin:10px 0 2px; }
.work-email-links a { display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#326e5a;text-decoration:underline;text-underline-offset:3px;line-height:1.6; }
.work-email-links svg { width:14px;height:14px;flex:none; }
.work-email-links a:hover { color:#204b3b; }
@media(max-width:900px){.work-email-links a{min-height:40px;}}

/* Type box: text on top, a slim toolbar below (Browse web, model, hint, send) */
.team-composer { padding: 10px 24px 18px; }
.team-inputbox { flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 12px 8px 16px; border-radius: 18px; background: #fff; border: 1px solid #dfe3e8; box-shadow: 0 6px 24px rgba(16,24,40,.07); }
.team-inputbox:focus-within { border-color: #b9c2cc; box-shadow: 0 6px 28px rgba(16,24,40,.11); }
.team-inputbox textarea { min-height: 52px; padding: 4px 0 2px; font-size: 14.5px; line-height: 1.55; }
.team-inputbox textarea::placeholder { color: #9aa3ad; }
.team-toolbar { display: flex; align-items: center; gap: 6px; }
.team-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.team-chip input { position: absolute; opacity: 0; pointer-events: none; }
.team-chip span { font-size: 12px; color: #6b7480; padding: 5px 10px; border-radius: 14px; border: 1px solid transparent; transition: background .15s, color .15s; }
.team-chip:hover span { background: #f3f5f7; }
.team-chip input:checked + span { color: #2f6b57; background: #eef6f2; }
.team-hint { font-size: 11px; color: #9aa3ad; margin-right: 6px; white-space: nowrap; }
.team-inputbox .team-toolbar button[type=submit] { width: 32px; height: 32px; font-size: 17px; display: grid; place-items: center; }
.team-composer-meta { display: none; }
@media (max-width: 700px) { .team-hint { display: none; } }