/* The Agent Hub (hub.js), laid out like Instagram in the app’s glass style: the header’s +, the Feed, Following, Agents and Chat
   tabs, the live row, one feed of posts and reel tiles, and the full-screen Reels viewer. Every colour is read from the
   Studio tokens in index.html (the LIVE red is broadcast.css's); nothing here defines its own. .hub-card belongs to the
   Admin hub (workspace.css) and is not used here. */
.hub-pane{margin-top:12px}
.hub-empty{margin:4px 0;font-size:13.5px;line-height:1.45;color:var(--text-2)}
#hubFeedMessage:empty,#hubItemMessage:empty,#hubComposeMessage:empty,#hubDraftsMessage:empty{display:none}
#hubFeedMessage{margin:0 4px 12px}
#hubFeedMessage:not(:empty)~#hubFeedEmpty{display:none}
.hub-feed-empty .card{margin:0 0 12px}
/* A department without Social: the server's one sentence, and nothing else. */
.hub-no-access #hubTabs,.hub-no-access #hubLiveRow,.hub-no-access #hubDraftsEntry,.hub-no-access #hubFeed,.hub-no-access #hubMore,.hub-no-access .hub-create{display:none!important}

/* ---- The + (New post, New reel, End-of-day reel): Tasks' round button at the bottom right (.tasks-fab in
   tasks-page.css), on the Hub feed and the drafts only; a post, the compose form and Chat keep the foot for their own
   controls. The feed's last card clears it as Tasks' does. ---- */
#hubScreen:not([data-pane="hub"]):not([data-pane="drafts"]) .hub-create{display:none}
#hubScreen.active:is([data-pane="hub"],[data-pane="drafts"]){padding-bottom:calc(92px + 56px + 16px)}
/* Its arrival animates once per session (hub.js adds .hub-entered when it ends), not on every return to the Hub. */
#hubScreen.active:not(.hub-entered) .hub-create{animation:tasks-fab-in .36s var(--spring)}
#hubCreateMenu{transform-origin:bottom right}
.hub-menu{position:fixed;z-index:60;display:grid;gap:2px;min-width:216px;max-width:calc(100vw - 16px);padding:6px;border:1px solid var(--line);border-radius:var(--r-row);background:var(--glass-solid);box-shadow:var(--shadow)}
/* The + menu (and the document Export menu, which shares the class) grows out of its button's corner and fades back
   into it on a tap. Reduced motion: the fade only. */
.hub-menu{transform-origin:top right;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
@starting-style{.hub-menu{opacity:0;transform:scale(.95)}}
.hub-menu.hidden.leaving{display:grid!important;opacity:0;transform:scale(.95);pointer-events:none;transition-duration:150ms}
@media (prefers-reduced-motion:reduce){.hub-menu{transition-property:opacity}}
.hub-menu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 12px;border:0;border-radius:var(--r-inner);background:none;color:var(--text);font:inherit;font-size:14.5px;font-weight:600;text-align:left;transition:opacity .12s ease}
.hub-menu-item:active,.hub-menu-item:focus-visible{background:var(--pressed)}
.hub-menu-item .icon,.hub-menu-item .hub-play-mark{flex:none;width:20px;height:20px;color:var(--b);fill:currentColor}
.hub-menu-item .icon{fill:none}

/* ---- Live now: portraits in a gradient ring with a LIVE pill, like stories; a tap opens the live. ---- */
.hub-lives{display:flex;gap:14px;margin:0 -16px 14px;padding:4px 16px 6px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.hub-lives::-webkit-scrollbar{display:none}
.hub-live{flex:none;display:grid;justify-items:center;gap:6px;width:72px;padding:0;border:0;background:none;color:var(--text);font:inherit;transition:opacity .12s ease}
.hub-live:active{opacity:.72}
.hub-live-ring{position:relative;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:conic-gradient(from 210deg,var(--b),var(--ring),var(--pink),var(--warn),var(--b))}
.hub-live-ring .hub-av{width:60px;height:60px;border-radius:50%;box-shadow:0 0 0 3px var(--night-floor);font-size:15px}
.hub-live-ring .hub-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.hub-live-pill{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);padding:1px 6px;border:2px solid var(--night-floor);border-radius:var(--r-pill);background:var(--live-fill);color:var(--on-live);font-size:9.5px;font-weight:800;letter-spacing:.08em;line-height:1.35}
.hub-live-name{max-width:72px;font-size:11.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* New post with a single agent to post as: its avatar and name, not a select. */
.hub-compose-as{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:6px}
.hub-compose-as .hub-av{flex:none;width:36px;height:36px;font-size:13px}
.hub-compose-as .hub-av img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.hub-compose-as span:last-child{display:grid;min-width:0}
.hub-compose-as small{color:var(--text-2);font-size:12.5px}
.hub-compose-as.hidden{display:none}

/* ---- Your drafts: one slim row above the feed, when there are any; then the list. ---- */
.hub-drafts-entry{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;margin:0 0 12px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-row);background:var(--fill-1);color:var(--text);font:inherit;font-size:14px;font-weight:600;text-align:left;transition:opacity .12s ease}
.hub-drafts-entry:active{opacity:.72}
.hub-drafts-entry .count{margin-left:auto;padding:1px 9px;border-radius:var(--r-pill);background:var(--chip-fill);font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text-2)}
#hubDraftsView .panel{margin-top:12px}
.hub-draft-row{width:100%;color:var(--text);font:inherit;text-align:left;transition:opacity .12s ease}
.hub-draft-row:active{opacity:.66}
.hub-draft-row small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* ---- The feed: posts and reels, newest first. ---- */
/* One column that never grows past the screen: at 320px a card's own widest line (the foot) must not push it out. */
.hub-feed{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.hub-feed>.hub-post{margin-top:0}
.hub-more{margin-top:12px}

/* ---- A post: the agent (portrait with the agent's ring, name with the AI mark, role · department), the text,
   the tags, then likes (people · agents) and comments. In the feed the top of the card opens the post. ---- */
.hub-post{padding:14px 16px 6px;border-radius:var(--r-compact)}
.hub-post.full{padding-bottom:6px}
.hub-post-body{display:block;width:100%;margin:0;padding:0 0 8px;border:0;background:none;color:var(--text);font:inherit;text-align:left}
button.hub-post-body{cursor:pointer;transition:opacity .12s ease}
button.hub-post-body:active{opacity:.72}
.hub-post:not(:has(.hub-post-foot)) .hub-post-body{padding-bottom:10px}
.hub-post-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center}
.hub-av{border:0;border-radius:var(--r-avatar);background:var(--agent-fill);box-shadow:inset 0 0 0 1.5px var(--b);color:var(--text)}
.hub-post-who{display:block;min-width:0}
.hub-post-who b{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;line-height:1.3}
.hub-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-post-who small{display:block;margin-top:2px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0;line-height:1.4;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-post-who small:empty{display:none}
.hub-when{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:0;line-height:1.3;color:var(--text-2);white-space:nowrap}
.hub-status{padding:3px 9px;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:var(--r-pill);background:var(--chip-fill);font-size:11px;font-weight:600;line-height:1.3;color:var(--warn)}
.hub-post-text{display:block;margin-top:10px;font-family:var(--mono);font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
button.hub-post-body .hub-post-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.hub-tags{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:8px}
.hub-tag{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--link)}
/* The AI mark: on everything an agent wrote or did, in the agent's colour. */
.hub-ai{flex:none;display:inline-block;padding:1px 6px;border:1px solid color-mix(in srgb,var(--b) 55%,transparent);border-radius:var(--r-pill);color:var(--b);font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.04em;line-height:1.35}
.hub-post-foot{display:flex;align-items:center;gap:4px;padding-top:2px;border-top:1px solid var(--hairline)}
.hub-like,.hub-comments-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;margin:0 -6px;padding:0 8px;border:0;border-radius:var(--r-pill);background:none;color:var(--text);transition:opacity .12s ease}
.hub-comments-btn{margin-left:auto}
.hub-trash{margin:0 -6px 0 6px}
.hub-trash .icon{fill:none}
.hub-like:active:not(:disabled),.hub-comments-btn:active{opacity:.6;background:var(--pressed)}
.hub-like .icon,.hub-comments-btn .icon{width:22px;height:22px}
.hub-like[aria-pressed="true"]{color:var(--pink)}
/* Likes: the pink eases in once the server has said yes (aria-pressed is set only then). */
.hub-like{transition:opacity .12s ease,color 150ms ease}
.hub-like[aria-pressed="true"] .icon{fill:currentColor}
.hub-like:disabled{opacity:.5;cursor:default}
.hub-likes{min-width:0;margin-left:6px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Whose words these are: "Written by <person>" or "Drafted by <agent>". */
.hub-byline{display:block;margin-top:6px;font-size:12px;line-height:1.4;color:var(--text-2)}

/* ---- A reel in the feed: a vertical tile, the portrait as its poster, a play mark, the topic and tags over it. ---- */
.hub-reel-card .hub-post-body{padding-bottom:10px}
.hub-reel-tile{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;aspect-ratio:4/5;max-height:62dvh;margin:0 0 8px;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-compact);background:var(--stage);color:var(--text);font:inherit;cursor:pointer}
.hub-reel-tile:active{opacity:.86}
.hub-reel-poster{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.hub-reel-initials{position:relative;z-index:0;font-size:44px;font-weight:700;color:var(--face)}
.hub-reel-initials[hidden]{display:none}
.hub-reel-mark{position:relative;z-index:2;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(10,4,34,.46);box-shadow:0 0 0 1.5px rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hub-play-mark{width:28px;height:28px;fill:#fff}
.hub-reel-mark .hub-play-mark{margin-left:4px}
.hub-reel-over{position:absolute;left:0;right:0;bottom:0;z-index:1;display:block;padding:44px 14px 12px;background:var(--stage-scrim);text-align:left}
.hub-reel-caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.hub-reel-over .hub-tags{margin-top:6px}

/* ---- One item: the card (a reel's stage first), what its managers can do, then the comments. Back is the title row's
   arrow (hub.js, hubPane). ---- */
#hubItemCard>.hub-post{margin-top:12px}
.hub-manage{margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline)}
.hub-manage .note{margin:0 0 10px}
.hub-brought{margin:0 4px 10px;font-size:12.5px}
#hubItemMessage{margin-top:12px}
.hub-edit textarea.field{min-height:160px}
.hub-comment{padding:10px 0}
.hub-comment+.hub-comment{border-top:1px solid var(--row-edge)}
/* An answer sits under the comment it answers. */
.hub-comment.reply{margin-left:14px;padding:8px 0 8px 12px;border-left:2px solid color-mix(in srgb,var(--b) 45%,transparent)}
.hub-comment+.hub-comment.reply{border-top:0}
.hub-comment-head{display:flex;align-items:center;gap:6px;min-width:0}
.hub-comment-head b{min-width:0;font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.hub-comment.agent .hub-comment-head b{color:var(--b)}
.hub-comment-head .hub-when{margin-left:auto;padding-left:6px}
.hub-comment-text{margin:4px 0 0;font-size:13.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.hub-comment.pending .hub-comment-text{color:var(--text-2)}
.hub-replying{display:flex;align-items:center;gap:8px;margin:10px 0 0 14px;padding-left:12px;border-left:2px solid color-mix(in srgb,var(--b) 45%,transparent);font-size:12.5px;color:var(--text-2)}
.hub-replying .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--b);animation:meeting-pulse 1.5s ease-in-out infinite alternate}
.hub-comment-bar{display:flex;gap:8px;margin-top:10px}
.hub-comment-bar .field{flex:1;min-width:0;min-height:44px}
.hub-comment-bar .btn{flex:none}
/* The floating agent button (56px, 16px in from the phone's edge, so it ends 72px in) passes this row as the page scrolls:
   the box starts after it, 8px clear (the panel's own 17px edge plus 47px), as in Hub Chat (hub-chat.css). */
body.agent-fab-on:not(.sheet-open) .hub-comment-bar{padding-left:47px}
/* Below 360px that leaves the box about 130px: tighter insides and a 14px placeholder keep "Write a comment" whole. */
@media (max-width:359px){.hub-comment-bar .field{padding:0 10px}.hub-comment-bar .field::placeholder{font-size:14px}.hub-comment-bar .btn{padding:0 12px}}

/* ---- New post and New reel. ---- */
.hub-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hub-chip{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--chip-fill);color:var(--text-2);font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:0;line-height:1.2;transition:transform 160ms var(--ease-out),opacity 120ms ease}
.hub-chip:active:not(:disabled){opacity:.72}
.hub-chip[aria-pressed="true"]{border-color:var(--ring);background:var(--pressed);box-shadow:inset 0 0 0 1px var(--ring);color:var(--text)}
.hub-chip:disabled{opacity:.4;cursor:default}
.hub-mode{margin-top:14px;-webkit-backdrop-filter:none;backdrop-filter:none}
#hubComposeText{min-height:140px}
#hubComposeView .row2+.note{margin-top:12px}

/* A reel in the item view: its topic, then the script; an end-of-day reel's facts for its owner. */
.hub-reel-topic{display:block;margin-top:10px;font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.hub-reel-topic+.hub-post-text{margin-top:4px}
.hub-facts{display:grid;gap:4px;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-inner);background:var(--fill-1)}
.hub-facts .k{margin:0 0 2px}
.hub-fact{font-size:13px;line-height:1.45;color:var(--text-2);overflow-wrap:anywhere}
.hub-fact::before{content:"· "}
/* A reel's stage in the item view: the portrait, live speech drawn over it while the reel is spoken, Play or Stop and
   what is happening, said in words. The speaking ring is the Verser stage's. */
.hub-stage{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;margin-top:12px;aspect-ratio:4/5;max-height:56dvh;width:100%;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--stage)}
.hub-stage::before{content:"";position:absolute;inset:0;z-index:0;background:var(--stage-glow);pointer-events:none}
.hub-stage-face{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
/* Live speech draws the reel's portrait frames over the still face (verser-lipsync.js, options.stage). */
.hub-stage>.lipsync-layer,.hub-reel-stage>.lipsync-layer{z-index:2}
.hub-stage-initials{position:relative;z-index:1;font-size:44px;font-weight:700;color:var(--face)}
.hub-stage-initials[hidden]{display:none}
.hub-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:3;background:var(--stage-scrim);pointer-events:none}
.hub-stage-bar{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;display:flex;align-items:center;gap:10px}
.hub-stage-bar .btn{flex:none;min-width:88px}
.hub-stage-play{position:absolute;left:50%;top:50%;z-index:4;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--night-floor) 46%,transparent);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--text) 50%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:transparent;font-size:0;cursor:pointer}
.hub-stage-play::before{content:"";width:0;height:0;margin-left:5px;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent var(--text)}
.hub-stage-play.playing::before{width:20px;height:20px;margin:0;border:0;border-radius:3px;background:var(--text)}
.hub-stage-status{flex:1;min-width:0;margin:0;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.hub-stage-status.status-error{color:var(--bad)}
.hub-stage.playing{box-shadow:0 0 0 2px var(--b),0 0 0 8px var(--ring-glow)}

/* ---- The Reels viewer: full screen over everything, the nav included. One reel per screen, snapped as it is swiped;
   the portrait fills it, the lip-synced video over it while the reel speaks. Like and comments down the right, the agent
   and the caption at the bottom, the way Instagram's Reels are laid out. ---- */
body.hub-reels-open{overflow:hidden}
.hub-reels{position:fixed;inset:0;z-index:70;background:var(--night-floor)}
.hub-reels-track{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.hub-reels-track::-webkit-scrollbar{display:none}
.hub-reel{position:relative;isolation:isolate;overflow:hidden;height:100%;scroll-snap-align:start;scroll-snap-stop:always;background:var(--stage)}
.hub-reel-stage{position:absolute;inset:0;z-index:0;display:grid;place-items:center}
.hub-reel-stage .hub-stage-face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hub-reel-stage .hub-stage-initials{font-size:64px}
.hub-reel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;z-index:1;background:var(--stage-scrim);pointer-events:none}
.hub-reel.playing .hub-reel-stage{box-shadow:inset 0 0 0 2px var(--b)}
.hub-reel-tap{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer}
.hub-reel-paused{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:rgba(10,4,34,.46);box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
.hub-reel-paused[hidden]{display:none}
.hub-reel-paused .hub-play-mark{width:34px;height:34px;margin-left:5px}
.hub-reel-rail{position:absolute;right:10px;bottom:max(104px,calc(env(safe-area-inset-bottom) + 96px));z-index:3;display:grid;justify-items:center;gap:2px;width:56px}
.hub-reel-like,.hub-reel-comments{display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:none;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.hub-reel-like .icon,.hub-reel-comments .icon{width:30px;height:30px}
.hub-reel-like[aria-pressed="true"]{color:var(--pink)}
/* Reels like: the heart gives under the finger at once (on the icon, so the 52px hit area stays); the pink comes only
   with the server's yes, as before. Reduced motion: a dim instead. */
.hub-reel-like{transition:color 150ms ease,border-color 150ms ease,opacity 120ms ease}
.hub-reel-like .icon{transition:transform 160ms var(--ease-out)}
.hub-reel-like:active:not(:disabled) .icon{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){.hub-reel-like:active:not(:disabled) .icon{transform:none}.hub-reel-like:active:not(:disabled){opacity:.72}}
.hub-reel-like[aria-pressed="true"] .icon{fill:currentColor}
.hub-reel-like:disabled{opacity:.6}
.hub-reel-count{margin:-4px 0 10px;font-family:var(--mono);font-size:12.5px;font-weight:500;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hub-reel-count.ai{margin-top:-10px;font-size:10.5px;color:var(--b)}
.hub-reel-count[hidden]{display:none}
.hub-reel-rail .hub-av{width:44px;height:44px;margin-top:4px;border-radius:50%;box-shadow:0 0 0 2px #fff}
.hub-reel-rail .hub-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.hub-reel-info{position:absolute;left:14px;right:78px;bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));z-index:3;min-width:0;pointer-events:none;color:#fff}
.hub-reel-who{display:flex;align-items:center;gap:6px;min-width:0;font-size:15px;line-height:1.3}
.hub-reel-info .hub-reel-caption{margin-top:6px;-webkit-line-clamp:3}
.hub-reel-info .hub-tags{margin-top:6px}
.hub-reel-byline{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--text-2)}
.hub-reel-info .hub-stage-status{margin-top:8px;font-size:12.5px}
.hub-reel-info .hub-stage-status:empty{display:none}
.hub-reels-close{position:absolute;top:var(--edge-top);left:12px;z-index:4;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);background:rgba(10,4,34,.42);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hub-reels-close .icon{width:20px;height:20px}
/* The comment sheet over a reel: the comments, oldest first, and the comment box. */
.hub-reel-scrim{position:absolute;inset:0;z-index:4;background:rgba(10,4,34,.5)}
.hub-reel-scrim.hidden{display:none}
.hub-reel-sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;max-height:72dvh;padding:12px 14px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--line);border-radius:var(--r-panel) var(--r-panel) 0 0;background:var(--glass-solid);box-shadow:var(--shadow)}
/* The keyboard up over the comment box (body.kb-field, index.html): the sheet sits on top of it. */
body.kb-field .hub-reel-sheet{bottom:var(--kb-field-lift,0px);max-height:calc(100dvh - var(--kb-field-lift,0px) - 16px)}
.hub-reel-sheet-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.hub-reel-sheet-head b{min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-reel-sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.hub-reel-sheet-body #hubCommentsPanel{margin:0;padding:0;border:0;background:none;box-shadow:none}
.hub-reel-sheet-body #hubCommentsPanel>.k{display:none}

/* ---- In Verser's chat: the words an agent would post in Social, quoted in full on the confirm row, and another agent's
   answer under its own name with the AI mark. ---- */
.tool-confirm .tool-quote{flex-basis:100%;margin:2px 0 4px;padding:4px 0 4px 10px;border-left:2px solid color-mix(in srgb,var(--b) 50%,transparent);font-family:var(--font);font-size:12.5px;font-weight:500;line-height:1.45;letter-spacing:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
.hub-reply-msg .msg-name .hub-ai{margin-left:4px;padding:0 5px;font-size:9.5px;vertical-align:1px}
@media (prefers-reduced-motion:reduce){.hub-reels-track{scroll-behavior:auto}}

/* ---- Agents: a search box over every agent in the organization, two cards to a line (portrait, name with the AI
   mark, owner, role, LIVE when live, Follow); a tap on a card opens the agent's profile. ---- */
.hub-search{margin:0 0 12px}
#hubAgentsMessage:empty,#hubFollowingMessage:empty,#hubProfileMessage:empty{display:none}
#hubAgentsMessage,#hubFollowingMessage,#hubProfileMessage{margin:0 4px 12px}
/* The grid: workspace.css's .agent-grid and .agent-card, the Agents tab's cards from before it left the nav. The
   portrait and the name are one button that opens the profile; Follow sits at the foot of the card. */
.hub-agent-grid{margin-top:0}
.hub-agent-open{display:flex;flex-direction:column;flex:1 1 auto;width:100%;padding:0;border:0;background:none;color:var(--text);font:inherit;text-align:left;transition:opacity .12s ease}
.hub-agent-open:active{opacity:.8}
.hub-agent-open .agent-card-media,.hub-agent-open .agent-card-open{display:block}
.hub-agent-card.no-portrait .agent-card-open{display:grid;place-items:center}
.hub-agent-open .agent-card-name{display:flex;align-items:center;gap:6px;min-width:0}
.hub-agent-open .hub-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hub-agent-open .hub-ai{flex:none}
.hub-agent-open .agent-card-body{align-content:start}
.hub-agent-card .hub-agent-follow{display:flex;align-items:center;justify-content:center;gap:6px;width:auto;min-height:44px;margin:0 12px 12px;padding:0 10px;font-size:13px}
.hub-agent-follow .icon{width:18px;height:18px}
.hub-agent-follow:disabled{opacity:.5}
.hub-agent-live{flex:none;padding:1px 6px;border-radius:var(--r-pill);background:var(--live-fill);color:var(--on-live);font-size:9.5px;font-weight:800;letter-spacing:.08em;line-height:1.35}

/* ---- An agent's profile: the portrait and who, Followers and Likes as the server counts them, Follow and Like, then
   its posts and reels as the Feed shows them. ---- */
.hub-profile{margin:12px 0}
.hub-profile-head{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center}
.hub-profile-head .hub-av{width:64px;height:64px;font-size:18px}
.hub-profile-head .hub-av img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.hub-profile-head .hub-post-who b{font-size:16px}
.hub-profile-counts{display:flex;gap:18px;margin:14px 0 0;font-size:13px;color:var(--text-2)}
.hub-profile-counts b{font-family:var(--mono);font-size:15px;color:var(--text)}
.hub-profile-actions{margin-top:14px}
.hub-profile-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.hub-profile-actions .icon{width:18px;height:18px}
#hubProfileLike[aria-pressed="true"] .icon{fill:currentColor;color:var(--pink)}

/* A portrait in the Feed, Following or a post, and an agent's name in Chat, open the agent's profile. */
.hub-av-link[data-agent-id]:not([data-agent-id=""]){cursor:pointer}
.hub-post-head>.hub-av-link{display:contents}
.hc-name.hub-av-link{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:2px}

/* Delete / Report under a comment or chat message: quiet text buttons that stay out of the way. */
/* A message's or comment's actions: one quiet ⋯ (32px to the eye, 44px to the finger), lit while its menu is open. */
.hub-mod{display:inline-flex;margin-left:auto}
.hub-mod-more{position:relative;display:grid;place-items:center;width:32px;height:28px;margin:-4px -6px -4px 0;padding:0;border:0;border-radius:var(--r-pill);background:none;color:var(--text-2);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.hub-mod-more::before{content:"";position:absolute;inset:-8px -6px}
.hub-mod-more .icon{width:20px;height:20px}
.hub-mod-more:hover,.hub-mod-more.open{background:var(--fill-2);color:var(--text)}
.hub-mod-more:active{background:var(--pressed)}
.hub-mod-more:focus-visible{outline:var(--ring-width) solid var(--ring);outline-offset:1px;color:var(--text)}
/* Its menu (the + menu's look, hub-menu): Report with a flag, Delete in the danger colour under a hairline. */
.hub-mod-menu{min-width:200px;max-width:min(300px,calc(100vw - 16px))}
.hub-mod-item{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 12px;border:0;border-radius:var(--r-inner);background:none;color:var(--text);font:inherit;font-size:14.5px;font-weight:600;text-align:left;cursor:pointer;transition:background-color .12s ease}
.hub-mod-item .icon{width:20px;height:20px;color:var(--text-2)}
.hub-mod-item:hover,.hub-mod-item:focus-visible{background:var(--pressed);outline:none}
.hub-mod-item:disabled{color:var(--text-2);cursor:default;background:none}
.hub-mod-item.danger,.hub-mod-item.danger .icon{color:var(--bad)}
.hub-mod-item.danger:hover,.hub-mod-item.danger:focus-visible{background:color-mix(in srgb,var(--bad) 14%,transparent)}
.hub-mod-item+.hub-mod-item.danger{position:relative;margin-top:5px}
.hub-mod-item+.hub-mod-item.danger::before{content:"";position:absolute;left:10px;right:10px;top:-3px;border-top:1px solid var(--hairline)}
/* Asking first, in the menu: the question, then Cancel and the action side by side. */
.hub-mod-ask{display:grid;gap:12px;width:min(272px,calc(100vw - 44px));padding:8px 6px 4px}
.hub-mod-ask p{margin:0 4px;font-size:14px;font-weight:600;line-height:1.4;color:var(--text)}
.hub-mod-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hub-mod-bar .btn{min-height:44px;padding:0 12px;font-size:14px}
.hub-mod-bar .btn[aria-busy="true"]{opacity:.7}

/* Each tab with its icon beside its name, as Tasks' My tasks and Team tasks (the lead, 2026-10-07); on a phone the four
   only fit with the icon above the name. */
.hub-tabs .seg-tab{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.hub-tabs .seg-tab .icon{flex:none;width:17px;height:17px}
@media (max-width:420px){.hub-tabs .seg-tab{flex-direction:column;gap:3px;min-height:52px;padding:4px 2px;font-size:12px}.hub-tabs .seg-tab .icon{width:18px;height:18px}}