.collab-shell{--collab-gap:16px;box-sizing:border-box;max-width:1600px;margin:0 auto;padding:20px;min-width:0;color:var(--ink)}
.collab-shell *{box-sizing:border-box;min-width:0}
.collab-shell button,.collab-shell input,.collab-shell select,.collab-shell textarea{font:inherit}
.collab-shell button{cursor:pointer;touch-action:manipulation}
.collab-shell button:disabled{cursor:not-allowed;opacity:.48}
.collab-shell :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.collab-skip{position:fixed;left:16px;top:8px;z-index:1000;transform:translateY(-150%);padding:10px 14px;background:var(--surface);border:1px solid var(--accent);border-radius:var(--r-sm);color:var(--ink)}
.collab-skip:focus{transform:none}
.collab-header,.collab-project-head,.collab-section-head,.collab-card-top,.collab-toolbar,.collab-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.collab-header{margin-bottom:14px}
.collab-header h1,.collab-project-head h2{margin:0;font-size:clamp(24px,3vw,36px);line-height:1.15}
.collab-header p,.collab-project-head p{margin:4px 0 0;color:var(--mute)}
.collab-eyebrow{font-family:var(--mono);font-size:11px!important;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)!important}
.collab-layout{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:var(--collab-gap);align-items:start}
.collab-sidebar,.collab-workspace,.collab-section,.collab-card,.collab-metric,.collab-board-column,.collab-drawer{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.collab-sidebar{position:sticky;top:12px;max-height:calc(100dvh - 24px);overflow:auto;padding:14px}
.collab-sidebar h2,.collab-section h3,.collab-canvas-index h3{font-size:14px;margin:0 0 10px}
.collab-create-project{display:grid;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.collab-projects{padding-top:14px;display:grid;gap:6px}
.collab-project{min-height:56px;width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 8px;text-align:left;border:1px solid transparent;border-radius:var(--r-xs);background:transparent;color:var(--ink);padding:9px 10px}
.collab-project span:not(.collab-badge){color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.collab-project .collab-badge{grid-column:2;grid-row:1/3}
.collab-project:hover{background:var(--surface-2)}
.collab-project.active{border-color:var(--accent);background:var(--surface-2)}
.collab-workspace{overflow:hidden}
.collab-project-head{padding:18px 20px;border-bottom:1px solid var(--line-soft)}
.collab-tabs{display:flex;gap:4px;padding:8px;overflow-x:auto;border-bottom:1px solid var(--line-soft);scrollbar-width:thin}
.collab-tabs button{flex:0 0 auto}
.collab-tabs button,.collab-segmented button{min-height:44px;border:0;border-radius:var(--r-xs);padding:8px 12px;background:transparent;color:var(--mute);white-space:nowrap}
.collab-tabs button:hover,.collab-segmented button:hover{background:var(--surface-2);color:var(--ink)}
.collab-tabs button.active,.collab-segmented button.active{background:var(--ink);color:var(--surface);font-weight:650}
.collab-main{padding:16px;min-height:480px}
.collab-stack{display:grid;gap:12px}
.collab-section{padding:12px}
.collab-section-head{margin-bottom:12px}
.collab-section-head h3{margin:0}
.collab-metrics{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px}
.collab-metric{padding:12px;display:grid;gap:3px}
.collab-metric span,.collab-metric small{color:var(--mute);font-size:12px}
.collab-metric strong{font-size:22px;line-height:1.2;overflow-wrap:anywhere}
.collab-btn{min-height:44px;border:1px solid var(--line);border-radius:var(--r-xs);padding:8px 14px;background:var(--surface);color:var(--ink);font-weight:600}
.collab-btn:hover{background:var(--surface-2)}
.collab-btn.primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.collab-btn.secondary{background:var(--surface)}
.collab-btn.danger{border-color:var(--accent);color:var(--accent);background:var(--surface)}
.collab-btn.danger:hover{background:var(--surface-2)}
.collab-link{min-height:44px;border:0;background:transparent;color:inherit;text-decoration:underline;margin-left:8px}
.collab-field{display:grid;align-content:start;gap:5px;color:var(--ink-2);font-size:12px;font-weight:600}
.collab-field input,.collab-field select,.collab-field textarea{width:100%;min-height:44px;border:1px solid var(--line);border-radius:var(--r-xs);padding:9px 10px;background:var(--surface);color:var(--ink);font-size:16px;font-weight:400;resize:vertical}
.collab-field small{color:var(--mute);font-weight:400;line-height:1.4}
.collab-inline-form{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:10px;align-items:end;margin-bottom:14px}
.collab-inline-form.compact{grid-template-columns:minmax(180px,1fr) auto}
.collab-inline-form>.collab-field:has(textarea){grid-column:1/-1}
.collab-inline-form>.collab-btn{justify-self:start}
.collab-check{min-height:44px;display:flex;align-items:center;gap:8px;font-size:13px}
.collab-check input{width:20px;height:20px}
.collab-notice{padding:11px 12px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-xs);background:var(--surface-2);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.collab-notice.error{border-left-color:var(--accent)}
.collab-notice code,.collab-row code{overflow-wrap:anywhere;white-space:normal}
.collab-empty{padding:20px;text-align:center;border:1px dashed var(--line);border-radius:var(--r-xs);color:var(--mute)}
.collab-empty strong{color:var(--ink)}
.collab-empty p{margin:5px 0 0}
.collab-loading{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:86px;padding:12px}
.collab-loading span{border-radius:var(--r-xs);background:var(--surface-2);animation:collab-pulse 1.2s ease-in-out infinite alternate}
.collab-loading span:nth-child(2){animation-delay:.15s}.collab-loading span:nth-child(3){animation-delay:.3s}
.collab-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid var(--line);border-radius:var(--r-pill);font-family:var(--mono);font-size:10px;letter-spacing:.02em;white-space:nowrap;background:var(--surface-2);color:var(--ink-2)}
.collab-badge.success{border-color:var(--accent);color:var(--accent)}
.collab-badge.danger{border-color:var(--accent);color:var(--accent)}
.collab-activity{margin:0;padding-left:20px;display:grid;gap:10px}
.collab-activity li{display:flex;justify-content:space-between;gap:12px}.collab-activity span{color:var(--mute);font-size:12px}
.collab-segmented{display:flex;gap:4px;overflow-x:auto;padding:4px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.collab-toolbar{flex-wrap:wrap}
.collab-toolbar>span{font-size:12px;color:var(--mute)}
.collab-list,.collab-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.collab-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.collab-card{padding:12px;overflow-wrap:anywhere}
.collab-card p{color:var(--mute);font-size:13px}
.collab-work-card{display:grid;gap:7px;width:100%;min-height:120px;text-align:left;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);padding:12px}
.collab-work-card:hover{background:var(--surface-2);border-color:var(--accent)}
.collab-work-card>span:not(.collab-card-top){color:var(--mute);font-size:13px;line-height:1.45}
.collab-work-card small{color:var(--faint)}
.collab-board{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:10px;overflow-x:auto;padding-bottom:8px}
.collab-board-column{padding:10px;display:grid;align-content:start;gap:8px}
.collab-board-column h3{display:flex;justify-content:space-between;align-items:center;margin:0 2px;font-size:13px;text-transform:capitalize}
.collab-timeline{list-style:none;margin:0;padding:0 0 0 130px;display:grid;gap:12px}
.collab-timeline li{position:relative}.collab-timeline time{position:absolute;right:calc(100% + 16px);top:10px;width:110px;text-align:right;color:var(--mute);font-size:11px}
.collab-graph{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.collab-graph-node{position:relative}.collab-graph-node>span{display:block;text-align:center;color:var(--mute);font-size:11px;padding-top:5px}
.collab-drawer{position:fixed;z-index:100;right:0;top:0;width:min(640px,100vw);height:100dvh;overflow:auto;padding:20px;border-radius:0;border-width:0 0 0 1px;box-shadow:var(--shadow)}
.collab-drawer-head{display:flex;justify-content:space-between;gap:12px;align-items:start;position:sticky;top:-20px;z-index:2;background:var(--surface);padding:18px 0 12px;border-bottom:1px solid var(--line-soft)}
.collab-drawer h2{margin:0}.collab-comment,.collab-message{border-left:3px solid var(--line);padding:4px 10px;margin:8px 0}.collab-comment p,.collab-message p{margin:0 0 4px;white-space:pre-wrap}.collab-comment small,.collab-message small{color:var(--mute)}
.collab-composer{display:grid;gap:8px;margin-top:12px}.collab-composer .collab-btn{justify-self:end}
.collab-row{min-height:52px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.collab-row:last-child{border-bottom:0}.collab-row>div{display:grid;gap:3px}.collab-row small{display:block;color:var(--mute);overflow-wrap:anywhere}
.collab-canvas-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:12px;min-height:540px}
.collab-canvas{position:relative;display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));align-content:start;gap:12px;max-height:68dvh;overflow:auto;padding:18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.collab-canvas .collab-composer{grid-column:1/-1}
.collab-canvas-object{min-height:130px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);display:grid;align-content:start;gap:8px;overflow-wrap:anywhere}
.collab-canvas-object.canonical{border-style:double}.collab-canvas-object small{color:var(--mute)}
.collab-canvas-index{max-height:68dvh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--surface)}
.collab-canvas-index h3:not(:first-child){margin-top:18px}
.collab-index-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:48px;text-align:left;padding:8px;border:0;border-bottom:1px solid var(--line-soft);background:transparent;color:var(--ink)}
.collab-index-row:hover{background:var(--surface-2)}
.collab-messages{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;min-height:420px}
.collab-message-nav{padding:8px;border-right:1px solid var(--line);background:var(--surface-2);display:flex;flex-direction:column;gap:4px}
.collab-message-nav button{min-height:52px;display:grid;gap:2px;text-align:left;border:1px solid transparent;border-radius:var(--r-xs);background:transparent;color:var(--ink);padding:8px}
.collab-message-nav button.active{border-color:var(--accent);background:var(--surface)}.collab-message-nav span{color:var(--mute);font-size:11px}
.collab-message-pane{display:grid;grid-template-rows:auto minmax(220px,1fr) auto;padding:14px}.collab-message-list{overflow:auto;max-height:430px;padding-right:6px}
.collab-manifest{display:grid;gap:12px}.collab-manifest-items{max-height:340px;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.collab-manifest-items article{padding:10px;border:1px solid var(--line);border-radius:var(--r-xs);display:grid;gap:6px;overflow-wrap:anywhere}.collab-manifest-items small{color:var(--mute)}
.collab-result{max-height:320px;overflow:auto;margin:0;padding:12px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface-2);font:12px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.collab-danger-zone{margin-top:20px;padding-top:16px;border-top:1px solid var(--accent)}
@keyframes collab-pulse{from{opacity:.45}to{opacity:1}}
@media(max-width:1100px){.collab-metrics{grid-template-columns:repeat(2,minmax(120px,1fr))}.collab-card-grid,.collab-graph{grid-template-columns:repeat(2,minmax(0,1fr))}.collab-inline-form{grid-template-columns:repeat(2,minmax(140px,1fr))}}
@media(max-width:820px){.collab-shell{padding:12px}.collab-layout{grid-template-columns:1fr}.collab-sidebar{position:static;max-height:none}.collab-projects{grid-template-columns:repeat(2,minmax(0,1fr))}.collab-canvas-layout{grid-template-columns:1fr}.collab-canvas-index{max-height:360px}.collab-messages{grid-template-columns:1fr}.collab-message-nav{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;overflow-x:auto}.collab-message-nav button{min-width:180px}.collab-manifest-items{grid-template-columns:1fr}}
@media(max-width:560px){.collab-shell{padding:8px}.collab-header,.collab-project-head{align-items:flex-start;flex-direction:column}.collab-header>.collab-btn{width:100%}.collab-projects,.collab-list,.collab-card-grid,.collab-graph{grid-template-columns:1fr}.collab-main,.collab-project-head{padding:12px}.collab-inline-form,.collab-inline-form.compact{grid-template-columns:1fr}.collab-inline-form>.collab-btn{width:100%}.collab-metrics{grid-template-columns:1fr 1fr}.collab-board{grid-template-columns:repeat(5,minmax(78vw,1fr))}.collab-timeline{padding-left:0}.collab-timeline time{position:static;display:block;width:auto;text-align:left;margin-bottom:4px}.collab-canvas{grid-template-columns:1fr;max-height:none}.collab-drawer{padding:14px}.collab-segmented{width:100%}.collab-toolbar{align-items:stretch;flex-direction:column}.collab-messages{min-height:560px}.collab-message-pane{padding:10px}.collab-row{align-items:flex-start;flex-direction:column}.collab-row>.collab-btn{width:100%}
/* Mobile-viewport fix (2026-07-13): .collab-tabs relied on overflow-x:auto +
   scrollbar-width:thin for its "scroll for more tabs" affordance, but iOS/Android mobile
   browsers hide scrollbars entirely except during an active scroll gesture — so on a phone
   the tabs past the fold (Messaging/Telepathy/Access/MCP) were invisible with zero
   indication more existed, extending ~320px past the viewport edge. Wrap instead so every
   tab is always visible, no scroll-to-discover. */
.collab-tabs{flex-wrap:wrap;overflow-x:visible}
.collab-tabs button{flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce){.collab-loading span{animation:none}.collab-shell *{scroll-behavior:auto!important;transition:none!important}}