/* =============================================================================
Team Spaces stylesheet manifest
-----------------------------------------------------------------------------
Split when the single file passed the 1,000-line limit (CLAUDE.md rule 3),
mirroring the teams.css manifest beside it.
Do not reorder these imports: later modules intentionally override rules from
earlier ones (the modal restyles EasyMDE's own CSS, the attachment gallery
sits on top of the post card).
Note the Space HEADER is not here — it renders the chat header's markup and
is styled in teams/teams-conversation.css beside the chat's own, so the two
cannot drift.
============================================================================= */
/* ==========================================================================
Team Spaces — the post feed
--------------------------------------------------------------------------
A separate feature stylesheet: Teams styles are modularized under
chat_page/css/teams/, so the post feed remains independently maintainable.
Scoping (CLAUDE.md rule 2): every selector is prefixed `.space-` or nested
under `.spaces-panel`. The chat page loads many stylesheets at once, so a
bare `.card` / `.post` here would collide with the admin panel and the widget.
Theming ALIASES the Teams `--tm-*` tokens rather than restating colours.
This block used to hardcode its own palette (a #4a6cf7 indigo against the
app's #2d5f84 slate-blue), so every Spaces button was visibly not from this
product — and its dark mode was keyed on `prefers-color-scheme`, which this
app does not use: the theme is `body.dark-theme`. Aliasing fixes both at
once, and any future change to the Teams palette carries here for free.
========================================================================== */
/* The token block is declared on the panel AND on every detached Space surface.
Overlays (`.space-post-detail`, `.space-post-modal`, `.space-media-viewer`)
are appended to `document.body`, so they are NOT inside `.spaces-panel` and
inherit nothing from it. Declaring the tokens only on the panel left every
`var(--sp-*)` in those three files resolving to nothing — which is why the
post-discussion send button rendered as an invisible white square: its
`background: var(--sp-accent)` was simply void.
Custom-property declarations style nothing on their own, so listing extra
roots here cannot collide with another stylesheet (CLAUDE.md rule 2). The
LAYOUT rules further down stay panel-only, which is why they are split out
below rather than sharing this selector. */
.spaces-panel,
.space-post-detail,
.space-post-modal,
.space-media-viewer,
.space-members-modal {
/* Aliases, not values — see the header. */
--sp-gap: 16px;
--sp-radius: var(--tm-r-lg, 12px);
--sp-card-bg: var(--tm-surface, #f8f5f0);
--sp-card-border: var(--tm-border, #d8d3c8);
--sp-text: var(--tm-msg-text, #1f1e1d);
--sp-text-muted: var(--tm-text-1, #6f6e6d);
--sp-accent: var(--tm-accent, #2d5f84);
--sp-accent-hover: var(--tm-accent-hover, #245070);
--sp-hover: var(--tm-bg-alt, #f0ede6);
--sp-danger: var(--tm-danger, #c0392b);
--sp-pin: #f0a500;
}
/* Layout is the PANEL's alone — an overlay that inherited `overflow: hidden`
and `height: 100%` would clip its own dialog. */
.spaces-panel {
/* Same reason as spacesRoot(): this sits inside a column flex container, so
it must GROW, not merely declare a height. Without flex:1 the whole panel
shrinks to its content and the composer dock stops reaching the bottom. */
flex: 1 1 auto;
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
color: var(--sp-text);
font-family: var(--tm-font-ui, system-ui, sans-serif);
}
.space-post-detail,
.space-post-modal,
.space-media-viewer,
.space-members-modal {
color: var(--sp-text);
font-family: var(--tm-font-ui, system-ui, sans-serif);
}
/* ── Space members / guests dialog ───────────────────────────────────────────
The member LIST itself is teams-members.js' markup and is styled with the
Teams modal rules already; only the guest block below is ours. */
.space-members-modal .space-guests {
margin-top: 18px;
border-top: 1px solid var(--sp-card-border);
padding: 15px;
background: var(--tm-bg);
border-radius: 8px;
}
.space-members-modal .space-guests__heading {
margin: 0 0 4px;
font-size: 14px;
font-weight: 600;
color: var(--sp-text);
}
.space-members-modal .space-guests__note {
margin: 0 0 10px;
font-size: 12px;
line-height: 1.45;
color: var(--sp-text-muted);
}
.space-members-modal .space-guests__list { margin-top: 10px; }
.space-members-modal .space-guests__row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
}
.space-members-modal .space-guests__name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.space-members-modal .space-guests__badge {
flex: 0 0 auto;
padding: 2px 8px;
border-radius: 999px;
background: var(--sp-hover);
color: var(--sp-text-muted);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.space-members-modal .space-guests__remove { flex: 0 0 auto; }
.space-members-modal .space-guests__empty {
padding: 8px 0;
font-size: 13px;
color: var(--sp-text-muted);
}
/* No dark-theme block here, and the reason is worth stating so nobody adds one:
`--tm-*` is redefined under `body.dark-theme .teams-panel` (which contains the
panel) and under `body.dark-theme .teams-modal-overlay` (which BOTH
`.space-post-detail` and `.space-post-modal` carry as a second class). Since
`--sp-*` are aliases, they follow automatically. `.space-media-viewer` is the
one Space surface with neither ancestor nor that class, so it is added to the
existing dark selector list in teams/teams-foundation.css rather than getting
a competing set of overrides here. */
/* ── Shared header ───────────────────────────────────────────────────────────
The Feed/Chats tab strip is GONE. The Space feed renders the same header a
chat renders (headerChassis() in teams-conversation-header.js).
ITS BUTTONS ARE STYLED IN teams/teams-conversation.css, BESIDE THE CHAT'S
OWN — not here. They were styled here first, with `--sp-*` under a different
scope, and the result was a header whose icons visibly did not match the same
header one click away. Anything that renders inside the chassis belongs with
the chassis; only the layout AROUND it belongs to Spaces. */
/* The panel's content column: header, feed, dock. An earlier refactor dropped
this rule, and without it the column had no growth model at all — the dock
stopped short of the bottom and the pane showed bare background beneath it. */
.spaces-panel__body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.spaces-panel__context {
flex: 0 0 auto;
}
.space-icon-btn {
appearance: none;
width: 34px;
height: 34px;
border-radius: 8px;
border: 1px solid var(--sp-card-border);
background: var(--sp-card-bg);
color: var(--sp-text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.space-icon-btn:hover { background: var(--sp-hover); color: var(--sp-text); }
.space-icon-btn--on { color: var(--sp-accent); border-color: var(--sp-accent); }
/* An explicitly muted space must LOOK muted — otherwise the commonest support
question is "why am I not getting notifications". */
.space-icon-btn--muted { color: var(--sp-danger); border-color: var(--sp-danger); }
/* ── Scroller ────────────────────────────────────────────────────────────── */
.space-feed__scroller {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 24px 16px 24px;
}
/* Phones only: the feed dissolves at both edges instead of being guillotined by
the header above it and the pane edge below. A MASK rather than two gradient
overlays — the panel can be showing a user's background photo, and an overlay
painted in `--tm-bg` would sit on that picture as two grey bars. The mask
fades whatever is actually behind.
Applied to the scroller, whose floating children ("N new posts") are its
SIBLINGS under `[data-feed-host]`, so neither is faded with the content.
Desktop keeps hard edges: the feed there is a column inside a wide stage with
its own gutters, and a fade only muddies the top of the first card. */
@media (max-width: 768px) {
.spaces-panel .space-feed__scroller {
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0,
#000 22px,
#000 calc(100% - 30px),
transparent 100%);
mask-image: linear-gradient(
to bottom,
transparent 0,
#000 22px,
#000 calc(100% - 30px),
transparent 100%);
}
}
/* Virtualization spacers. The feed keeps a bounded number of rendered post
nodes and replaces the rest with these two height-only elements, so scroll
position and scrollbar length stay honest while the DOM stays small. */
.space-feed__spacer { width: 100%; flex: 0 0 auto; }
.space-feed__list {
display: flex;
flex-direction: column;
gap: var(--sp-gap);
max-width: 720px;
margin: 0 auto;
}
/* ── "N new posts" ───────────────────────────────────────────────────────────
Posts that arrived while the reader was reading. FLOATS over the feed rather
than sitting in the flow: inserting it in the document would push the post
being read down by its own height the moment it appears, which is the exact
disruption the whole deferred-insert design exists to avoid.
ANCHORED TO THE BOTTOM. It is an offer, not an alert — it must be reachable
without being in the way of what is being read, and the bottom edge is where
a thumb already rests on a phone. The arrow points up because the posts it
reveals go in at the TOP of the feed, which is where clicking it lands you.
Anchored to `[data-feed-host]`, which is already `position: relative`. */
.space-feed__new {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 16px;
border: none;
border-radius: 999px;
background: var(--sp-accent);
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
/* Reads as a floating control rather than a card that scrolled into place. */
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.space-feed__new:hover:not(:disabled) { filter: brightness(1.08); }
.space-feed__new:disabled { opacity: 0.7; cursor: default; }
/* Clear of the mobile chrome at the bottom of the pane, and clear of the
home-indicator inset on iOS — otherwise the pill sits under the composer
bar or the system gesture area and cannot be tapped. */
@media (max-width: 768px) {
.space-feed__new {
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
/* A tap target, not a hover affordance: this control has no other way
to be reached on a phone. */
min-height: 40px;
padding: 9px 18px;
}
}
/* ── Back to top ──────────────────────────────────────────────────────────
Appears once the reader is two screens down (see TO_TOP_AFTER_SCREENS).
ANCHORED TO THE FEED COLUMN, NOT THE PANE, which is the only part of this
worth arguing about. The obvious `right: 16px` on the host would put it in
the pane's bottom-right corner — and on a wide screen that corner belongs to
the sticky rail, so the button would float over its cards. The dock is
centred at the feed track's own width instead, so the button lands on the
FEED's right edge when the gutters exist and on the pane's edge when they do
not, with no JavaScript involved either way.
It cannot collide with the new-posts pill at any width: that one is centred,
this one is right-aligned, and they would only meet on a pane narrower than
any phone. The dock ignores pointer events so it never steals a click from
the post underneath it. */
.space-feed__dock {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
/* The feed track's own width, from spaces-stage.css. One number in two
files: a dock any wider puts the button over the rail. */
width: min(100%, 720px);
box-sizing: border-box;
padding: 0 16px;
z-index: 5;
display: flex;
justify-content: flex-end;
/* The dock spans the feed; only the button in it may be clicked, or an
invisible strip would swallow clicks on the post underneath. */
pointer-events: none;
}
.space-feed__totop {
pointer-events: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 999px;
border: 0.5px solid var(--sp-card-border, #d8d3c8);
/* Quieter than the new-posts pill on purpose: that one is news, this is
only a way back. Two accent-coloured floating controls in one corner of
one screen compete for the same glance. */
background: var(--sp-card-bg, #f8f5f0);
color: var(--sp-text-muted, #6f6e6d);
font-size: 14px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}
.space-feed__totop:hover {
background: var(--sp-hover, #f0ede6);
color: var(--sp-text, #1f1e1d);
}
@media (max-width: 768px) {
/* Clear of the mobile chrome and the home-indicator inset, exactly as the
pill is — and a full tap target rather than a hover affordance. */
.space-feed__dock { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.space-feed__totop { width: 42px; height: 42px; }
}
/* `hidden` loses to any class that sets `display` — the UA rule is
element-level, so `.space-feed__new { display: inline-flex }` beats it and
the pill would render permanently. The same trap the composer's assist row
and the drop veil both fell into. */
.space-feed__totop[hidden] { display: none; }
.space-feed__new[hidden] { display: none; }
/* =============================================================================
Team Spaces — post card, reactions, comments, popovers
-----------------------------------------------------------------------------
Part of the spaces.css manifest. Scoping (CLAUDE.md rule 2): every selector is
prefixed `.space-` or nested under `.spaces-panel` / `.space-post-modal`.
============================================================================= */
/* ── Post card ───────────────────────────────────────────────────────────── */
.space-post {
/* NOT `--sp-card-bg`: that resolves to `--tm-surface`, the same tone the feed
itself is painted in, so the cards dissolved into their own background and
only the border said where one post ended. `--tm-real-white` is the raised
surface and IS theme-aware (#fff light, #363f4a dark — teams-foundation.css),
so this stays correct in both themes. */
background: var(--tm-real-white);
border: 1px solid var(--sp-card-border);
border-radius: var(--sp-radius);
padding: 14px 16px;
}
/* A post and its optional comment preview are siblings. Keeping their shared
shell unpainted means the preview follows the post rather than interrupting
its content, engagement, or action rows. */
.space-post-shell { width: 100%; }
.space-post--has-comment-preview {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.space-post--pinned {
border-color: var(--sp-pin);
box-shadow: inset 3px 0 0 var(--sp-pin);
}
.space-post--pinned-for-me {
box-shadow: inset 3px 0 0 #6f42c1;
}
.space-post .space-post__body a {
color: var(--tm-space-href);
}
.space-post--important {
border-left: 5px solid var(--sp-danger);
}
.space-post__head {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 20px;
}
.space-post__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
flex: 0 0 auto;
background: var(--sp-accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
/* overflow: hidden; */
}
.space-post__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.space-post__avatar--agent {
background: transparent;
}
.space-post__byline {
flex: 1 1 auto;
min-width: 0;
align-self: anchor-center;
gap: 2px;
display: grid;
align-items: center;
}
.space-post__author {
font-weight: 600;
font-size: 14px;
}
/* "(inactive)" — the author's account was disabled (they left). */
.space-post__author .teams-inactive-suffix,
.space-comment__author .teams-inactive-suffix {
font-weight: 400;
font-style: italic;
color: var(--sp-text-muted);
}
.space-post__meta {
font-size: 12px;
color: var(--sp-text-muted);
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.space-post__pin-status--everyone { color: var(--sp-pin); }
.space-post__pin-status--self { color: #6f42c1; }
/* Author badges. `pr` is deliberately prominent: a stranger posting into your
office feed has to be attributable to be trusted. */
.space-post__badge {
display: inline-block;
padding: 1px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: text-top;
}
.space-post__badge--pr {
background: #6f42c1;
color: #fff;
}
.space-post__badge--admin {
background: var(--sp-accent);
color: #fff;
}
/* A company-wide announcement, surfaced in the feed as a global post. Warm and
distinct from the team badges above: it comes from nobody's team, and a
reader scanning the merged feed needs to tell that at a glance rather than
reading the author name. */
.space-post__badge--announcement {
background: #b45309;
color: #fff;
}
/* An authored post addressed to the whole company. Distinct from
`--announcement` (a mandatory-announcement carrier, which has no human
author) so the two are never read as the same thing. */
.space-post__badge--global {
background: var(--sp-accent, #2563eb);
color: #fff;
}
.space-post__badge--agent {
background: #0e9f6e;
color: #fff;
}
/* ── "Open the full announcement" ────────────────────────────────────────────
Offered only on an announcement that actually carries designed HTML, which
the card itself cannot draw — it has no sandbox, and admin-authored HTML
rendered without one is stored XSS against every reader. This opens the
sandboxed review modal instead, so the announcement looks the same whether it
is reached from here or from the Notification Center.
Styled as a full-width banner rather than a text link: it stands in for
content the reader can SEE is missing from the card, so it has to read as the
rest of the announcement, not as a footnote about it. The amber matches the
ANNOUNCEMENT badge above it, so the card has one accent and not two. */
.space-post__announcement-open {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
margin-top: 12px;
padding: 12px 14px;
border: 1px solid color-mix(in srgb, #b45309 35%, transparent);
border-radius: 10px;
background: color-mix(in srgb, #b45309 8%, transparent);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.space-post__announcement-open:hover:not(:disabled) {
background: color-mix(in srgb, #b45309 14%, transparent);
border-color: color-mix(in srgb, #b45309 55%, transparent);
}
.space-post__announcement-open:disabled {
opacity: 0.6;
cursor: progress;
}
.space-post__announcement-open-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 50%;
background: #b45309;
color: #fff;
font-size: 14px;
}
/* `min-width: 0` so a long localized string wraps instead of pushing the
arrow out of the card — the usual flex-child overflow trap. */
.space-post__announcement-open-text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 auto;
min-width: 0;
}
.space-post__announcement-open-text strong {
font-size: 14px;
font-weight: 600;
}
.space-post__announcement-open-text small {
font-size: 12px;
opacity: 0.75;
}
.space-post__announcement-open-go {
flex: 0 0 auto;
font-size: 12px;
opacity: 0.6;
}
/* Pin state is visible directly on the post card, not only in the secondary
header. The colour difference makes global and private pins distinguishable. */
.space-post__action--pin.is-pinned-everyone {
color: var(--sp-pin);
background: color-mix(in srgb, var(--sp-pin) 12%, transparent);
}
.space-post__action--pin.is-pinned-self {
color: #6f42c1;
background: color-mix(in srgb, #6f42c1 12%, transparent);
}
.space-post__action--pin.is-pinned-everyone:hover,
.space-post__action--pin.is-pinned-self:hover {
filter: brightness(0.9);
}
/* Which space a post came from — only rendered in the merged "All spaces"
feed, where a card without it is ambiguous. */
.space-post__origin {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 600;
color: var(--sp-accent);
cursor: pointer;
}
/* WHO A TARGETED PUBLIC ANNOUNCEMENT REACHED — rendered only for holders of
`spaces.can_post_global_announcement`, and only on a post that actually
narrows its audience. The server omits the field for everyone else, so this
rule is styling, never the access control.
Warmer than `--origin` beside it and deliberately so: the two sit in the same
meta row and say different kinds of thing — one is WHERE the post lives and
is clickable, this one is WHO it was aimed at and is not. Same weight would
read as a second Space. */
.space-post__audience {
display: inline-flex;
align-items: center;
font-weight: 600;
color: var(--sp-warning, #b5451b);
}
.space-post__title {
font-size: 16px;
font-weight: 700;
margin: 2px 0 6px;
line-height: 1.35;
}
/* ── Engagement + actions ────────────────────────────────────────────────── */
/* Reactions and comment total form a quiet read-only summary immediately after
media; the interaction controls live on the row below. */
.space-post__engagement {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 34px;
margin-top: 10px;
padding: 7px 0;
border-bottom: 1px solid var(--sp-card-border);
}
.space-post__reaction-summary { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
/* Reach, beside the discussion count. Quieter than it deliberately — how many
people saw a post is context, and the comment count is a control. Not a
button and never will be: the product shows the number and never the names,
and making this clickable is the first step toward a surveillance surface. */
.space-post__views {
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
margin-left: auto;
padding: 3px 0;
color: var(--sp-text-muted);
font-size: 12px;
font-weight: 600;
cursor: default;
}
/* The comment count owned `margin-left: auto` before the view count existed.
With both present the views take it and the comments sit to their right, so
the pair stays a group rather than splitting across the card. */
.space-post__views + .space-post__comment-count { margin-left: 14px; }
.space-post__comment-count {
appearance: none;
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
padding: 3px 0;
border: 0;
background: transparent;
color: var(--sp-text-muted);
cursor: pointer;
font: inherit;
font-size: 12px;
font-weight: 600;
}
.space-post__comment-count:hover { color: var(--sp-accent); }
/* A post that HAS a discussion reads darker, with the filled glyph, so it is
distinguishable while scanning before the number is read. */
.space-post__comment-count.has-comments {
color: var(--sp-text);
}
.space-post__comment-count.has-comments i {
color: var(--sp-accent);
}
/* One gentle pulse the first time a commented post scrolls into view. Applied
by SpacesFeed's IntersectionObserver, once per card. */
@keyframes space-comment-reveal {
0% { transform: scale(1); }
45% { transform: scale(1.18); }
100% { transform: scale(1); }
}
.space-post__comment-count.is-revealed i {
animation: space-comment-reveal 0.55s ease-out;
transform-origin: center;
}
/* The stronger, deliberate one: the viewer just posted a comment, the dialog
has closed, and the only evidence is a number one higher than before. */
@keyframes space-comment-bump {
0% { transform: scale(1); background: transparent; }
25% { transform: scale(1.22); background: var(--tm-accent-subtle); box-shadow: 0 0 0 5px var(--tm-accent-subtle); }
55% { transform: scale(1.08); background: var(--tm-accent-subtle); }
100% { transform: scale(1); background: transparent; }
}
.space-post__comment-count.is-bumped {
animation: space-comment-bump 2.4s ease-out;
border-radius: 999px;
padding: 3px 8px;
color: var(--sp-accent);
}
/* Motion here is decoration on a number that is already correct, so it is the
first thing to drop when the reader has asked for less of it. */
@media (prefers-reduced-motion: reduce) {
.space-post__comment-count.is-revealed i,
.space-post__comment-count.is-bumped {
animation: none;
}
}
.space-post__footer {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
padding-top: 4px;
flex-wrap: wrap;
}
.space-react {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid var(--sp-card-border);
background: transparent;
font-size: 13px;
cursor: pointer;
color: var(--sp-text-muted);
}
.space-react:hover { background: var(--sp-hover); }
/* Was a hardcoded rgba of #4a6cf7 — the indigo this feature was supposed to have
stopped using. Aliased like every other colour here so a palette change carries. */
.space-react--mine {
border-color: var(--sp-accent);
color: var(--sp-accent);
background: var(--tm-accent-subtle);
}
.space-react__count { font-size: 12px; font-weight: 600; }
/* The reaction landed. The tray closes the moment an emoji is picked, so
without this the glyph the user clicked just disappears and a chip they were
not looking at silently ticks up. */
@keyframes space-reaction-applied {
0% { transform: scale(1); box-shadow: 0 0 0 0 var(--tm-accent-subtle); }
35% { transform: scale(1.22); box-shadow: 0 0 0 6px var(--tm-accent-subtle); }
100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
.space-react.is-bumped {
animation: space-reaction-applied 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
.space-react.is-bumped { animation: none; }
}
/* ── Reaction offer: one face at rest, the emoji slide out of it ──────────── */
/* The quick emoji used to sit permanently in the action row, where they were
indistinguishable from the APPLIED-reaction chips in the summary row above.
Collapsing them behind the outline face makes the offer a verb and leaves the
tally the only emoji visible at rest. */
/* The anchor the tray slides out from. `relative` is what takes the tray OUT
of the footer's flow — see the tray rule below. */
.space-post__reactions {
position: relative;
display: inline-flex;
align-items: center;
min-width: 0;
}
.space-post__reaction-toggle.is-active,
.space-post__reaction-toggle:hover { color: var(--sp-accent); }
/* Slides out to the RIGHT of the toggle, OVER the rest of the row.
`position: absolute` is the whole point: an animated `max-width` kept the
tray in flow, so opening it shoved "Comment" and "Continue in chat" sideways
and the row visibly reflowed on every click. Out of flow, the buttons stay
exactly where they were and the tray passes across them.
It therefore needs its own opaque surface — it is now painted on top of live
controls rather than beside them — so it reads as a floating pill and the
text underneath cannot show through.
`visibility` still does the work `opacity` cannot: a fully transparent tray
is still clickable and still focusable, and tabbing into invisible reaction
buttons is how a keyboard user gets lost. */
.space-post__reaction-tray {
position: absolute;
z-index: 3;
left: 100%;
top: 50%;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 6px;
border-radius: 999px;
background: var(--tm-real-white, #fff);
box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
opacity: 0;
visibility: hidden;
white-space: nowrap;
transform: translate(-8px, -50%);
transition:
opacity 0.18s ease,
transform 0.24s ease,
visibility 0s linear 0.24s;
}
.space-post__reaction-tray.is-open {
opacity: 1;
visibility: visible;
transform: translate(4px, -50%);
transition:
opacity 0.2s ease,
transform 0.26s ease,
visibility 0s;
}
.space-post__quickreact {
appearance: none;
width: 28px;
height: 28px;
flex: 0 0 auto;
border: 0;
border-radius: 999px;
background: transparent;
cursor: pointer;
font-size: 16px;
line-height: 1;
transition: background 0.12s ease, transform 0.12s ease;
}
.space-post__quickreact:hover { background: var(--sp-hover); transform: scale(1.12); }
.space-post__reaction-more { margin-left: 2px; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
.space-post__reaction-tray { transition: none; transform: none; }
.space-post__reaction-tray.is-open { transition: none; }
}
.space-post__action {
appearance: none;
background: none;
border: 0;
padding: 4px 8px;
border-radius: 6px;
font-size: 13px;
color: var(--sp-text-muted);
cursor: pointer;
}
.space-post__action:hover { background: var(--sp-hover); color: var(--sp-text); }
/* ── The owner group, and its narrow-pane overflow ────────────────────────
Pin / edit / delete / moderate travel together, so a pane too narrow for the
whole footer can collapse them behind one "…" rather than wrapping the row
in two — which is what a card with every control enabled did on a phone.
`display: contents` is what makes this free on wide screens: the group's
buttons stay direct flex children of the footer, in the same order, with the
same spacing they had before the wrapper existed.
The reaction, comment and chat controls are deliberately NOT collapsed. They
are what a reader does with a post; the group behind the "…" is what is done
TO it — its author's controls, its moderator's, and Repost, which puts a copy
somewhere else. That is the half worth a second tap. */
.space-post__own { display: contents; }
.space-post__overflow { display: none; }
@media (max-width: 768px) {
.space-post__own { display: none; }
/* Not `inline-flex` on a shared class: `.space-post__action` sets no
display, so the button keeps its own and only becomes visible here. */
.space-post__overflow { display: inline-flex; align-items: center; }
}
/* Rows in the overflow menu carry the control's own icon, so the menu reads as
the same set of controls rather than a separate list of commands. */
.space-popover--menu button > i {
width: 16px;
margin-right: 8px;
text-align: center;
}
.space-popover button[disabled] { opacity: 0.45; cursor: not-allowed; }
/* Disabled rather than hidden, with a tooltip stating the limit — a control
that silently disappears reads as a missing feature (the same reasoning as
the Teams message edit button). */
.space-post__action[disabled] { opacity: 0.45; cursor: not-allowed; }
.space-post__action[disabled]:hover { background: none; color: var(--sp-text-muted); }
/* ── Popovers (reaction picker, moderation menu) ─────────────────────────── */
/* Appended to and positioned with fixed coordinates, so they escape the
feed scroller's overflow clipping. That means they cannot inherit the
.spaces-panel token block and must declare their own colours. */
.space-popover {
background: #ffffff;
border: 1px solid #e3e6ea;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
padding: 6px;
display: flex;
gap: 2px;
}
.space-popover--menu { flex-direction: column; min-width: 180px; }
.space-popover button {
appearance: none;
background: none;
border: 0;
cursor: pointer;
border-radius: 6px;
padding: 7px 10px;
font-size: 14px;
color: #1f2329;
text-align: left;
white-space: nowrap;
}
.space-popover button:hover { background: #f4f6f8; }
body.dark-theme .space-popover {
background: #24272d;
border-color: #3a3d45;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
body.dark-theme .space-popover button { color: #e8eaed; }
body.dark-theme .space-popover button:hover { background: #33363d; }
/* ── Comments ────────────────────────────────────────────────────────────── */
.space-comments { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
/* Feed previews are intentionally bounded by the server to two comments.
They sit BELOW the completed card, as a compact continuation of the post —
not as message bubbles competing with the post body. */
.space-post__comment-previews {
box-sizing: border-box;
padding: 12px 16px 11px;
border: 1px solid var(--sp-card-border);
border-top: 0;
border-radius: 0 0 calc(var(--sp-radius) - 2px) calc(var(--sp-radius) - 2px);
background: var(--tm-space-post-comments);
border-left: 3px solid var(--td-sparkle-color);
}
.space-post__comment-previews .space-comments {
position: relative;
margin: 0;
gap: 11px;
}
/* The line connects the two preview avatars without turning a compact preview
into a second, full discussion UI. */
.space-post__comment-previews .space-comments::before {
content: '';
position: absolute;
top: 24px;
bottom: 7px;
left: 12px;
width: 1px;
background: var(--sp-card-border);
}
.space-post-detail .space-post-detail__dialog {
max-width: 820px;
}
.space-post__comment-previews .space-comment { position: relative; gap: 9px; }
.space-post__comment-previews .space-comment__avatar {
position: relative;
z-index: 1;
width: 25px;
height: 25px;
font-size: 10px;
border: 2px solid var(--tm-real-white);
}
.space-post__comment-previews .space-comment__bubble {
padding: 0;
border-radius: 0;
background: transparent;
font-size: 13px;
line-height: 1.42;
}
.space-post__comment-previews .space-comment__author { margin-right: 5px; }
.space-post__comment-previews .space-comment__time { font-size: 11px; }
/* A preview is a glimpse, not the comment: at most two lines, then an ellipsis.
A comment can be a whole formatted write-up (headings, lists, line breaks),
and line-clamp only counts lines it can flow, so every descendant is
flattened into one inline run — block edges and
s become spaces. Media
and link embeds stay in the discussion dialog, which the preview opens. */
.space-post__comment-previews [data-comment-body] {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
margin-top: 1px;
}
.space-post__comment-previews [data-comment-body] * {
display: inline;
margin: 0;
padding: 0;
font-size: inherit;
line-height: inherit;
}
.space-post__comment-previews [data-comment-body] :is(p, div, li, h1, h2, h3, h4, h5, h6, blockquote, pre)::after {
content: ' ';
}
.space-post__comment-previews [data-comment-body] br,
.space-post__comment-previews [data-comment-body] :is(img, video, audio, iframe, figure, .space-link-embed) {
display: none;
}
.space-post__comment-previews .space-comment { cursor: pointer; }
.space-comment { display: flex; gap: 8px; }
.space-comment__avatar {
width: 28px;
height: 28px;
font-size: 12px;
border-radius: 50%;
flex: 0 0 auto;
background: var(--sp-text-muted);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
overflow: hidden;
}
.space-comment__bubble {
background: var(--sp-hover);
border-radius: 10px;
padding: 7px 11px;
font-size: 13.5px;
line-height: 1.5;
min-width: 0;
overflow-wrap: anywhere;
}
.space-comment__author { font-weight: 600; margin-right: 6px; }
.space-comment__time { font-size: 11px; color: var(--sp-text-muted); }
.space-comments__more {
appearance: none;
background: none;
border: 0;
align-self: flex-start;
padding: 2px 0 2px 36px;
color: var(--sp-accent);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.space-post__comment-previews .space-comments__more {
margin: 0 0 8px;
padding: 0 0 0 34px;
font-size: 12.5px;
}
/* ── Embedded links ──────────────────────────────────────────────────────────
Media a reader PASTED into the body, as opposed to attachments they uploaded
(which are the gallery above). Scoped under `.space-link-embed`, applied by
spaces-link-embed.js.
These rules exist because the shared chat renderer's own styling is scoped to
`.bot-message` / `.user-message`, so its markup arrived in a post card with no
styling at all — which is what put an unstyled "giphy.gif / Open image" row
under a pasted GIF. */
.spaces-panel .space-link-embed {
margin: 10px 0 0;
border-radius: var(--sp-radius);
overflow: hidden;
background: var(--sp-hover);
}
.spaces-panel .space-link-embed--image .chat-rich-embed-link {
display: block;
width: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: zoom-in;
}
/* An image the author placed in the text (markdown). It keeps its own shape and sits at
the LEFT edge, like the text around it: no stretched box, no grey panel behind a
narrow picture. (The chat renderer used to force `width:100%; height:260px` inline —
spaces-link-embed.js drops that style, so this is the only place the look is set.)
Specificity is deliberate: it must beat `.space-post .space-post__body
img:not([width][height])` in spaces-attachments.css. */
.spaces-panel .space-link-embed--image {
width: fit-content;
background: none;
}
.space-post .space-post__body .space-link-embed--image .chat-rich-embed-link img.chat-rich-embed-image-el {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 260px;
margin: 0;
object-fit: contain;
background: none;
}
/* Until the bytes arrive (a protected image is fetched first) there is no `src` and the
image would be 0px tall, so the post jumps when it lands: hold a little room. */
.space-post .space-post__body .space-link-embed--image .chat-rich-embed-link img.chat-rich-embed-image-el:not([src]) {
min-height: 160px;
min-width: 160px;
background: var(--sp-hover);
}
/* 16:9 without a wrapper hack. An iframe has no intrinsic ratio, so without
this it collapses to the HTML default of 150px tall. */
.spaces-panel .space-link-embed--video iframe {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
background: #000;
}
/* The original link, kept under every player: an embed can be refused by an
enterprise proxy or by an owner who disabled embedding, and a dead black
rectangle with no way to reach the video is worse than a plain link. */
.spaces-panel .space-link-embed__source {
display: block;
padding: 6px 10px;
color: var(--sp-text-muted);
font-size: 12px;
text-decoration: none;
}
.spaces-panel .space-link-embed__source:hover {
color: var(--sp-accent);
text-decoration: underline;
}
/* ── Your drafts ─────────────────────────────────────────────────────────────
The strip above the feed listing posts you started and have not published.
LOUD ON PURPOSE. The whole point of a draft is not forgetting about it, and a
tastefully quiet reminder is one nobody acts on. The amber rail is the only
place in Spaces that colour is used to mean "this is yours and unfinished" —
it must not read as an error (red) or as an announcement (the accent blue). */
.spaces-panel .space-drafts {
flex: 0 0 auto;
margin: 10px 16px 0;
padding: 10px 12px;
border: 1px solid var(--sp-pin);
border-left-width: 4px;
border-radius: var(--sp-radius);
background: color-mix(in srgb, var(--sp-pin) 8%, transparent);
}
/* `hidden` loses to any class that sets `display`; this strip is toggled with
the attribute, so it needs the guard at higher specificity. */
.spaces-panel .space-drafts[hidden] { display: none; }
.spaces-panel .space-drafts__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
margin-bottom: 8px;
}
.spaces-panel .space-drafts__title {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--sp-text);
}
.spaces-panel .space-drafts__count {
min-width: 18px;
padding: 0 6px;
border-radius: 999px;
background: var(--sp-pin);
color: #3b2a00;
font-size: 11px;
font-weight: 700;
text-align: center;
}
.spaces-panel .space-drafts__hint {
color: var(--sp-text-muted);
font-size: 11px;
}
.spaces-panel .space-drafts__list {
margin: 0;
padding: 0;
list-style: none;
}
.spaces-panel .space-drafts__item {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
}
.spaces-panel .space-drafts__item + .space-drafts__item {
border-top: 1px solid color-mix(in srgb, var(--sp-pin) 30%, transparent);
}
.spaces-panel .space-drafts__text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.spaces-panel .space-drafts__preview {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: var(--sp-text);
}
.spaces-panel .space-drafts__meta {
display: flex;
gap: 8px;
color: var(--sp-text-muted);
font-size: 11px;
}
.spaces-panel .space-drafts__actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
}
.spaces-panel .space-drafts__discard {
padding: 4px 6px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--sp-text-muted);
cursor: pointer;
}
.spaces-panel .space-drafts__discard:hover { color: var(--sp-danger); }
.spaces-panel .space-drafts__toggle {
margin-top: 6px;
padding: 0;
border: 0;
background: none;
color: var(--sp-text-muted);
font-size: 12px;
cursor: pointer;
}
.spaces-panel .space-drafts__toggle:hover { text-decoration: underline; }
@media (max-width: 640px) {
.spaces-panel .space-drafts__item { flex-wrap: wrap; }
.spaces-panel .space-drafts__actions { width: 100%; justify-content: flex-end; }
}
/* "You were mentioned" — the one thing on a card that is about the READER
rather than the post, so it is the one thing allowed to use the accent while
the rest of the engagement row stays muted. It sits with the counts because
that is where the discussion is. */
.space-post__mentions-you {
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
margin-left: auto;
padding: 2px 9px;
border-radius: 999px;
background: var(--tm-accent-subtle);
color: var(--sp-accent);
font-size: 11.5px;
font-weight: 700;
white-space: nowrap;
}
/* Whichever of these appears first takes the auto margin; the rest sit beside
it so the group stays together on the right instead of splitting apart. */
.space-post__mentions-you ~ .space-post__views,
.space-post__mentions-you ~ .space-post__comment-count { margin-left: 14px; }
/* Lock indicator: a locked post must say so, or the missing Comment button
reads as a bug. */
.space-post__comments-locked {
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
margin-left: 14px;
padding: 3px 0;
font-size: 13px;
color: var(--sp-text-muted, #6b7280);
}
/* The card's body slot — prose, headings, inline images, embeds, tags. Split
out of spaces-post.css when a body could be formatted markup as well as
markdown; loaded immediately after it, because it styles what that file
lays out. */
/* ── The post BODY ───────────────────────────────────────────────────────────
*
* Everything inside `.space-post__body`: the prose, its headings and rules, the
* images an author placed in the text, the embedded links and the tag chips
* that follow it.
*
* SPLIT OUT OF spaces-post.css (2026-08-31) when a post body could be FORMATTED
* markup as well as markdown and that file reached the 1000-line ceiling. The
* seam is a real one rather than a convenience: the CARD is a layout — header,
* body slot, engagement, footer — and this is what goes in the slot. Both kinds
* of body land on the same rules, which is the point: a post written in the
* formatting editor and one written in markdown are the same document to a
* reader, so they must not be styled by two different files.
*
* SCOPING (CLAUDE.md rule 2). Everything here is a `.space-post__body`
* descendant — the one exception being the `tm-al-*` alignment classes, which
* are declared once beside the sanitizers that allow them, in
* teams/teams-rich-editor.css, because the composer and the card must agree
* about what "centred" looks like.
*/
.space-post__body {
font-size: 14px;
line-height: 1.6;
overflow-wrap: anywhere;
}
.space-post__body ul,
.space-post__body ol {
padding-left: 15px;
}
.space-post__body p { margin: 0 0 8px; }
.space-post__body p:last-child { margin-bottom: 0; }
.space-post__body img { max-width: 100%; height: auto; border-radius: 8px; }
/* ── A FORMATTED body (migration 314) ────────────────────────────────────────
The markdown renderer emits headings too, so these are not "the rich post's
headings" — they are the card's, and both kinds of body land on them. Written
here rather than left to the browser because a UA `h2` inside a 14px card is
two and a half times the body size, which reads as a different document
pasted into the feed.
Alignment classes (`tm-al-*`) are NOT declared here: they live once, beside
the sanitizers that allow them, in teams/teams-rich-editor.css. Declaring
them a second time is how the composer and the card start disagreeing about
what "centred" looks like. */
.space-post__body h1,
.space-post__body h2,
.space-post__body h3,
.space-post__body h4 {
margin: 14px 0 6px;
font-weight: 700;
line-height: 1.3;
}
.space-post__body h1:first-child,
.space-post__body h2:first-child,
.space-post__body h3:first-child,
.space-post__body h4:first-child { margin-top: 0; }
.space-post__body h1 { font-size: 1.35em; }
.space-post__body h2 { font-size: 1.2em; }
.space-post__body h3 { font-size: 1.08em; }
.space-post__body h4 { font-size: 1em; }
.space-post__body hr {
margin: 14px 0;
border: 0;
border-top: 1px solid var(--sp-card-border);
}
/* ── Inline images ───────────────────────────────────────────────────────────
An image the author placed IN the update, as markdown. The chat renderer's
filename + "Open image" row is stripped in spaces-link-embed.js, so the image
is the only affordance left — which means the image itself has to say it is
clickable. `zoom-in` plus a lift on hover; the click opens the media modal. */
.space-post__body .chat-rich-embed-image {
max-width: min(560px, 100%);
margin: 10px 0;
}
.space-post__body .chat-rich-embed-link {
display: block;
padding: 0;
border: 0;
background: none;
border-radius: 8px;
cursor: zoom-in;
transition: box-shadow 0.14s ease, transform 0.14s ease;
}
.space-post__body .chat-rich-embed-link:hover,
.space-post__body .chat-rich-embed-link:focus-visible {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
transform: translateY(-1px);
}
/* A FORMATTED post's inline image is a bare ![]()
— the same affordance, put on
the image itself (wireInlineImageViewer in spaces-post-images.js). */
.space-post__body .space-post__inline-image {
cursor: zoom-in;
border-radius: 8px;
transition: box-shadow 0.14s ease, transform 0.14s ease;
}
.space-post__body .space-post__inline-image:hover,
.space-post__body .space-post__inline-image:focus-visible {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
transform: translateY(-1px);
}
.space-post__body .space-post__inline-image:focus-visible {
outline: 3px solid var(--sp-accent);
outline-offset: 2px;
}
.space-post__body .chat-rich-embed-link img { display: block; }
/* Wide content must scroll inside its own box — the page itself must never
scroll sideways. */
.space-post__body pre,
.space-post__body table {
display: block;
max-width: 100%;
overflow-x: auto;
}
/* A TALL post is collapsed with a fade + "Show more" so one essay — or one
post carrying three screenshots — cannot occupy the entire feed. The height
is measured in JS (CLAMP_PX in spaces-post.js); keep the two in step. */
.space-post__body--clamped {
max-height: 250px;
overflow: hidden;
position: relative;
}
.space-post__body--clamped::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 64px;
background: linear-gradient(to bottom, transparent, var(--sp-card-bg));
}
.space-post__more {
appearance: none;
background: none;
border: 0;
padding: 4px 0;
color: var(--sp-accent);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.space-post__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* A tag is a LINK, and has to look like one. It was a grey pill with no hover
and no cursor, so nobody discovered that the feed can be filtered by tag at
all — the affordance is the whole feature. Styled as a button element (it is
one now) rather than an anchor: it filters the feed in place, and an with
no href is a promise of navigation this does not keep. */
.space-post__tag {
font: inherit;
font-size: 12px;
color: var(--sp-accent);
background: transparent;
padding: 0;
border: none;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.space-post__tag:hover,
.space-post__tag:focus-visible {
font-weight: 600;
}
/* `blockquote` (an author's pull-quote — e.g. a "Quote of the day" post) has
no rule of its own in here, so it falls back to the UA default `margin: 1em
40px`. That 80px of combined side margin barely registers on a ~700px
desktop card, but on a mobile card (~300-340px wide) it eats a third of the
available width, wrapping a short sentence into a cramped three-line column.
Zeroing just the side margin (not adding a border/left-padding accent, which
would fight a CENTER-aligned quote — see `tm-al-center` in
teams-rich-editor.css) is the minimal fix; the vertical margin and the
quote's own text styling are untouched. Scoped to mobile only — desktop
keeps its current look exactly. */
body.mobile-standalone .space-post__body blockquote {
margin-left: 0;
margin-right: 0;
}
/* =============================================================================
Team Spaces — composer, dock, empty states, banner
-----------------------------------------------------------------------------
Part of the spaces.css manifest. Scoping (CLAUDE.md rule 2): every selector is
prefixed `.space-` or nested under `.spaces-panel` / `.space-post-modal`.
============================================================================= */
/* ── Composer ────────────────────────────────────────────────────────────── */
.space-composer {
background: var(--sp-card-bg);
border: 1px solid var(--sp-card-border);
border-radius: var(--sp-radius);
padding: 12px 14px;
max-width: 720px;
margin: 0 auto var(--sp-gap);
width: 100%;
/* Without border-box this card is `100% + 28px padding + 2px border` wide,
so the FEED — not just the composer — scrolled sideways by 30px on a
phone. (No global border-box reset in this app.) */
box-sizing: border-box;
}
/* "You may read here but not post" — stated quietly rather than left as an
unexplained absence of a composer. */
.space-composer--readonly {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 13px;
color: var(--sp-text-muted);
background: transparent;
border-style: dashed;
}
.space-composer__row { display: flex; align-items: center; gap: 8px; }
.space-composer__row + .space-composer__row { margin-top: 8px; }
/* The target picker is NOT optional decoration. With multi-space filtering
there is no single "current" space, so the destination must be stated
rather than inferred — a post landing in the wrong space is worse than one
extra click. */
.space-composer__target {
appearance: none;
border: 1px solid var(--sp-card-border);
border-radius: 8px;
background: var(--sp-card-bg);
color: var(--sp-text);
font-size: 13px;
font-weight: 600;
padding: 6px 10px;
max-width: 260px;
}
.space-composer__title,
.space-composer__body {
width: 100%;
border: 0;
background: transparent;
color: var(--sp-text);
font-family: inherit;
resize: none;
outline: none;
}
.space-composer__title { font-size: 15px; font-weight: 700; padding: 4px 0; }
.space-composer__body {
font-size: 14px;
line-height: 1.55;
min-height: 44px;
max-height: 320px;
padding: 4px 0;
}
.space-composer__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--sp-card-border);
}
.space-composer__tools { display: flex; align-items: center; gap: 4px; }
.space-btn {
appearance: none;
border-radius: 8px;
border: 1px solid transparent;
padding: 7px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
background: var(--sp-accent);
color: #fff;
}
.space-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.space-btn--ghost { background: transparent; border-color: var(--sp-card-border); color: var(--sp-text-muted); }
.space-btn--ghost:hover { background: var(--sp-hover); color: var(--sp-text); }
.space-composer__hint { font-size: 12px; color: var(--sp-text-muted); }
.space-composer__error { font-size: 12px; color: var(--sp-danger); margin-top: 6px; }
/* ── States ──────────────────────────────────────────────────────────────── */
.space-empty, .space-error {
text-align: center;
padding: 48px 24px;
color: var(--sp-text-muted);
max-width: 520px;
margin: 0 auto;
}
.space-empty__icon { font-size: 32px; margin-bottom: 12px; opacity: 0.5; }
.space-empty h3 { font-size: 16px; color: var(--sp-text); margin: 0 0 6px; }
.space-empty p { font-size: 13.5px; margin: 0; line-height: 1.5; }
.space-feed__loading { text-align: center; padding: 18px; color: var(--sp-text-muted); font-size: 13px; }
/* The post skeletons (`.space-skeleton`) live in spaces-skeleton.css with the
gutter skeletons and the shared `space-pulse` keyframes. */
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.space-feed__scroller {
padding: 0 10px 20px;
overflow-x: hidden;
}
.space-post { border-radius: 10px; padding: 12px; }
.space-composer { border-radius: 10px; }
.space-composer__target { max-width: 100%; }
}
/* ── Composer trigger ────────────────────────────────────────────────────────
A one-line affordance that OPENS the New-post modal. It looks like a
composer and behaves like a button, so post creation keeps a single code
path while the familiar social-feed cue survives. */
.space-composer--trigger {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
text-align: left;
cursor: pointer;
color: var(--sp-text-muted);
font-size: 14px;
}
.space-composer--trigger:hover {
border-color: var(--sp-accent);
color: var(--sp-text);
}
.space-composer--trigger i { color: var(--sp-accent); }
/* ── First-run banner ────────────────────────────────────────────────────────
Deliberately NOT a seeded post — see SpacesFeed._renderEmpty for why (N
identical welcome posts in the merged feed, author_kind, one language). */
.space-empty__actions {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 18px;
flex-wrap: wrap;
}
.space-welcome p { max-width: 46ch; margin-inline: auto; }
/* ── Responsive: the Space header on a narrow pane ───────────────────────────
The header is the chat's, so it already reflows — these only cover the parts
Spaces adds. The participant summary is the first thing to go: on a phone the
ACTIONS are what the header is for, and a truncated roster earns none of the
width it takes. */
@media (max-width: 768px) {
.spaces-panel__context .teams-conversation__participants {
display: none;
}
/* Line the header up with the feed's own 16px gutter. At 10px the title and
the New-post button sat closer to the screen edges than every card below
them, which reads as the header being unpadded rather than compact. */
.spaces-panel__context .teams-conversation__header {
padding: 12px 16px;
}
/* The banner is centred prose; give it the full narrow column. */
.space-welcome p { max-width: none; }
.space-empty__actions { flex-direction: column; align-items: stretch; }
.space-post-modal__dialog { max-width: 100%; }
.space-post-modal__textarea { min-height: 120px; }
}
/* Very narrow: the merged-feed subtitle is the next thing that stops earning
its line, since the title above it already says where you are. */
@media (max-width: 520px) {
.spaces-panel__context .space-scope-sub { display: none; }
}
.spaces-panel__context .space-scope-clear {
appearance: none;
border: 0;
background: transparent;
color: var(--sp-accent);
cursor: pointer;
font: inherit;
font-size: 12px;
font-weight: 600;
}
/* The only post-creation entry point in Spaces: compact, visible in both
My Feed and one-Team views, and intentionally styled as a header action. */
.spaces-panel__context .teams-conversation__new-post {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--tm-border, var(--sp-card-border));
border-radius: 8px;
background: var(--sp-card-bg);
color: var(--tm-text-2);
cursor: pointer;
font-size: 15px;
}
.spaces-panel__context .teams-conversation__new-post:hover {
background: var(--sp-accent);
border-color: var(--sp-accent);
color: #fff;
}
/* =============================================================================
Team Spaces — the New-post modal
-----------------------------------------------------------------------------
Part of the spaces.css manifest. Scoping (CLAUDE.md rule 2): every selector is
prefixed `.space-` or nested under `.spaces-panel` / `.space-post-modal`.
============================================================================= */
/* ══════════════════════════════════════════════════════════════════════════════
NEW-POST MODAL
------------------------------------------------------------------------------
Scoped under `.space-post-modal` throughout, so it cannot collide with the
Teams modals whose shell (`.teams-modal`) it borrows. Everything colour-wise
comes from the aliased --sp-* tokens, so it follows the app into dark mode.
══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ `[hidden]` MUST WIN OVER OUR OWN `display`.
The UA stylesheet's `[hidden] { display: none }` is an element-level rule, so
ANY class here that sets `display` silently beats it and the element stays on
screen. That is not hypothetical: it left the drag-and-drop veil painted over
the post text permanently, and showed the moderator-only "Mark as important"
checkbox to everyone — a control the server then ignores.
Specificity (0,2,0) here beats the (0,1,0) class rules below, so this needs
no !important. Every `hidden` toggle in this modal depends on it. */
.space-post-modal [hidden] { display: none; }
/* THE DEFAULT IS THE SMALL-SCREEN ANSWER, and it is deliberately unchanged.
`calc(100vw - 32px)` is what keeps the dialog off the bezels on a phone; the
680px cap is what stops a line of body text growing past a comfortable
measure on a laptop. Both are still exactly what they were. */
.teams-modal-overlay .space-post-modal__dialog {
max-width: 680px;
width: min(680px, calc(100vw - 32px));
max-height: min(88vh, 900px);
display: flex;
flex-direction: column;
padding: 0 10px;
}
/* Very large screens only.
People composing on a 27" monitor asked for a bigger dialog, and the obvious
change — raising the base width — is the wrong one: `width: min(880px, …)`
widens it on EVERY viewport past ~912px, so a 1280px laptop gets the large-
screen treatment too. That is the opposite of "leave smaller screens alone",
and it is invisible in testing unless you happen to be on a laptop.
A min-width query is the only shape that says what was actually meant. 1600px
clears 1280 and 1440 laptops entirely and starts at the desktop monitors this
is for. `calc(100vw - 32px)` stays in the min() so a narrow window on a wide
display still cannot push the dialog past its edges.
(A paired `max-width: 800vw` is what the first attempt used. It is eight
times the viewport, so it caps nothing at all — the width declaration was
doing the whole job on its own, which is why the regression reached every
screen size.) */
@media (min-width: 1600px) {
.teams-modal-overlay .space-post-modal__dialog {
max-width: 990px;
width: min(990px, calc(100vw - 32px));
}
}
.space-post-modal__body {
position: relative; /* the drop veil anchors to this */
display: flex;
flex-direction: column;
gap: 18px;
overflow-y: auto;
}
.space-post-modal__row { display: flex; gap: 14px; }
.space-post-modal__field { display: flex; flex-direction: column; gap: 7px; }
.space-post-modal__field--grow { flex: 1 1 auto; min-width: 0; }
.space-post-modal__label,
.space-post-modal__location-group {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--sp-text-muted);
}
.space-post-modal__label em {
font-style: normal;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
opacity: 0.7;
}
/* `box-sizing` is NOT decoration here. This app has no global border-box reset,
so `width: 100%` + 24px of padding + 2px of border made every one of these
controls 26px wider than the column holding it — the dialog scrolled
sideways and the Tags field ran off the right edge of a phone screen.
Declared per-control rather than as a `.space-post-modal__dialog *` blanket:
a blanket rule reaches into the formatting editor this dialog hosts, whose
toolbar and editable surface size themselves, and a component that is styled
in one file should not be resized from a second one. */
.space-post-modal__input,
.space-post-modal__select,
.space-post-modal__textarea {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid var(--sp-card-border);
border-radius: var(--tm-r, 8px);
background: var(--tm-real-white, #fff);
color: var(--sp-text);
font: inherit;
font-size: 14px;
}
.space-post-modal__input::placeholder,
.space-post-modal__textarea::placeholder { color: var(--tm-text-3); }
.space-post-modal__input:focus,
.space-post-modal__select:focus,
.space-post-modal__textarea:focus {
outline: none;
border-color: var(--sp-accent);
box-shadow: 0 0 0 3px var(--tm-accent-subtle);
}
/* One space in scope: state the destination rather than offering a picker of
one, which is a control that cannot be used. */
.space-post-modal__fixed {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid var(--sp-card-border);
border-radius: var(--tm-r, 8px);
background: var(--sp-hover);
font-size: 14px;
font-weight: 650;
color: var(--sp-text);
}
/* "Choose a space to post to" — the answer to a paste that could not be
uploaded yet, sitting DIRECTLY under the control that is blocking it.
It used to live in the attachment tray, beside the chips those files would
eventually become. That was wrong twice: the tray is below the editor and
usually off-screen, and the tray is not what the author has to act on. A
notice has to sit against the control it is talking about. */
.space-post-modal__deferred {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 9px 12px;
border-radius: var(--tm-r, 8px);
background: var(--tm-accent-subtle);
color: var(--sp-accent);
font-size: 12.5px;
font-weight: 600;
line-height: 1.4;
}
/* And point at the picker unmistakably. The first version was a 2px ring, which
the author reported as "I barely see a highlight" — a hint competing with a
whole dialog for attention has to win, not merely exist. */
.space-post-modal .is-awaiting-choice {
border-radius: var(--tm-r, 8px);
box-shadow: 0 0 0 3px var(--sp-accent);
animation: space-post-await 1.6s ease-in-out 2;
}
@keyframes space-post-await {
0%, 100% { box-shadow: 0 0 0 3px var(--sp-accent); }
50% { box-shadow: 0 0 0 7px var(--tm-accent-subtle); }
}
/* Respect a reader who has asked the OS for less motion; the ring alone still
carries the message. */
@media (prefers-reduced-motion: reduce) {
.space-post-modal .is-awaiting-choice { animation: none; }
}
/* Choosing the company-wide destination is not a thing to discover after
pressing Post. */
.space-post-modal__global-note {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding: 8px 10px;
border-radius: var(--tm-r, 8px);
background: var(--tm-accent-subtle);
color: var(--sp-accent);
font-size: 12.5px;
font-weight: 600;
}
/* Department and OFFICE targeting for a GLOBAL announcement. Shown only while
the global destination is chosen — a team post is addressed by membership,
and the server drops both for every other space. Offices reuse this class
and `__department-list`: two identical checkbox grids styled twice is how
they come to disagree. */
.space-post-modal__departments {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 8px;
}
/* LOCATIONS + DREAMPORT (migration 365) — the shared admin control
(js/shared/location-targeting.js), given this host's classes. Its
TagMultiselect picks up the `.space-post-modal .admin-tagms*` restyle below. */
.space-post-modal .space-post-modal__location-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.space-post-modal .space-post-modal__location-select { cursor: pointer; }
.space-post-modal .space-post-modal__location-warning {
margin: 0;
font-size: 12.5px;
color: var(--sp-danger);
}
/* THE OFFICE PICKER is the admin panel's TagMultiselect, reused rather than
reimplemented — the same control the announcement form and the AI rule editor
target offices with. Its own stylesheet lives with the admin panel and is
written against admin tokens (`--admin-gray-300` and friends), which do not
exist here, so the component is restyled for THIS host instead of loading
that sheet onto the chat page where it would meet a different token set.
Scoped under `.space-post-modal` on purpose: these rules carry a host
ancestor, so they cannot leak into the admin panel where the component is
already styled correctly. */
.space-post-modal .admin-tagms {
display: flex;
flex-direction: column;
gap: 6px;
background: var(--sp-surface, #fff);
border: 1px solid var(--sp-border, #e3e1de);
border-radius: 8px;
padding: 6px 8px;
}
.space-post-modal .admin-tagms-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.space-post-modal .admin-tagms-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 999px;
background: var(--sp-surface-2, #f4f3f1);
color: var(--sp-text, #1f1e1d);
font-size: 12px;
}
.space-post-modal .admin-tagms-chip-remove {
border: 0;
background: transparent;
color: var(--sp-text-muted, #6f6e6d);
cursor: pointer;
line-height: 1;
padding: 0;
}
.space-post-modal .admin-tagms-input-wrap { position: relative; }
.space-post-modal .admin-tagms-input {
width: 100%;
border: 0;
outline: none;
background: transparent;
color: var(--sp-text, #1f1e1d);
font-size: 13px;
padding: 2px 0;
}
/* The dropdown is positioned inside the wrap and must sit above the fields
below it — the composer's own stacking context, not the page's. */
.space-post-modal .admin-tagms-dropdown {
position: absolute;
z-index: 5;
left: 0;
right: 0;
top: calc(100% + 4px);
max-height: 220px;
overflow-y: auto;
background: var(--sp-surface, #fff);
border: 1px solid var(--sp-border, #e3e1de);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.space-post-modal .admin-tagms-option {
padding: 7px 10px;
font-size: 13px;
color: var(--sp-text, #1f1e1d);
cursor: pointer;
}
.space-post-modal .admin-tagms-option:hover,
.space-post-modal .admin-tagms-option.is-active {
background: var(--sp-surface-2, #f4f3f1);
}
.space-post-modal .admin-tagms-empty,
.space-post-modal .admin-tagms-emptyhint {
padding: 7px 10px;
font-size: 12px;
color: var(--sp-text-muted, #6f6e6d);
}
/* HOW THE TWO PICKERS COMBINE, said in the composer rather than left to be
discovered. Dimensions intersect, and a narrower reach than an author
expected reads as a bug unless the form says so first. Sits under both
pickers because it describes the pair, not either one. */
.space-post-modal__targeting-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 8px;
padding: 8px 10px;
border-radius: 8px;
background: var(--sp-surface-2, #f4f3f1);
color: var(--sp-text-muted, #6f6e6d);
font-size: 12px;
line-height: 1.45;
}
.space-post-modal__targeting-note i {
margin-top: 2px;
flex: 0 0 auto;
}
.space-post-modal__department-list {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
max-height: 120px;
overflow-y: auto;
}
.space-post-modal__department {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--tm-text-2);
font-size: 13px;
cursor: pointer;
}
.space-post-modal__department-empty {
color: var(--tm-text-3);
font-size: 12.5px;
font-style: italic;
}
/* The autosave line. Quiet on purpose: a background save that announces itself
loudly is worse than the loss it prevents. */
.space-post-modal__autosave {
margin-left: auto;
padding-right: 10px;
color: var(--tm-text-3);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 40%;
}
/* ── The editor ─────────────────────────────────────────────────────────────
The formatting editor (`TeamsRichEditor`, inline mode) mounts inside this
field. Its own chrome — toolbar, buttons, swatch menu, editable surface — is
styled once in teams/teams-rich-editor.css under three scopes, `.space-post-
modal` among them; what is here is only how that component sits INSIDE this
dialog's field box.
The component draws its own border and radius for a bubble edit, which is one
border too many inside a field that already has one, so the inline shell is
flattened below rather than restyled from scratch. */
.space-post-modal__field--editor {
border: 1px solid var(--sp-card-border);
border-radius: var(--tm-r, 8px);
background: var(--tm-real-white, #fff);
padding: 10px 12px 8px;
gap: 0;
}
.space-post-modal__field--editor .space-post-modal__label { margin-bottom: 8px; }
.space-post-modal__editor { min-width: 0; }
.space-post-modal .teams-rich--inline {
border: 0;
border-radius: 0;
background: transparent;
}
.space-post-modal .teams-rich--inline .teams-rich__bar {
padding: 0 0 7px;
background: transparent;
border-bottom: 1px solid var(--sp-card-border);
}
/* A post is long-form: the writing surface starts at the height the markdown
editor used to occupy, so the dialog does not visibly shrink for authors who
knew the old one. */
.space-post-modal .teams-rich--inline .teams-rich__editor {
min-height: 300px;
max-height: 46vh;
padding: 10px 0 0;
font-size: 14.5px;
line-height: 1.6;
color: var(--sp-text);
}
.space-guests .teams-modal-overlay .teams-modal__search {
padding: 9px 12px 9px 9px;
}
.space-guests .teams-modal-overlay .teams-modal__add {
padding: 0;
}
/* The editor could not be mounted: the bare textarea is the editor, and it must
not look unfinished. Hidden by the modal when the editor DID mount, so this
only ever paints on the fallback path. */
.space-post-modal__field--editor .space-post-modal__textarea {
border: 0;
padding: 8px 0 0;
background: transparent;
resize: vertical;
min-height: 190px;
}
.space-post-modal__field--editor .space-post-modal__textarea:focus { box-shadow: none; }
/* ── Tools row ──────────────────────────────────────────────────────────────
Attach + emoji sit INSIDE the editor box, where a chat composer puts them,
so the two writing surfaces feel like the same product. */
.space-post-modal__tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 8px;
border-top: 1px solid var(--sp-card-border);
margin-top: 8px;
}
.space-post-modal__tools-left { display: flex; align-items: center; gap: 2px; }
.space-post-modal__tool {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--sp-text-muted);
cursor: pointer;
font-size: 14px;
}
.space-post-modal__tool:hover { background: var(--sp-hover); color: var(--sp-text); }
.space-post-modal__count {
font-size: 11.5px;
color: var(--tm-text-3);
font-variant-numeric: tabular-nums;
}
/* ── Footer + errors ───────────────────────────────────────────────────── */
.space-post-modal .teams-modal__footer { align-items: center; }
.space-post-modal__foothint {
margin-right: auto;
font-size: 12px;
color: var(--tm-text-3);
}
.space-post-modal__check {
display: flex;
align-items: center;
gap: 9px;
font-size: 13.5px;
color: var(--sp-text);
}
.space-post-modal__error {
font-size: 13px;
color: var(--sp-danger);
padding: 9px 11px;
border: 1px solid var(--sp-danger);
border-radius: var(--tm-r, 8px);
background: var(--tm-danger-bg);
}
@media (max-width: 640px) {
.space-post-modal__dialog { max-height: 94vh; }
.space-post-modal__row { flex-direction: column; }
.space-post-modal .teams-rich--inline .teams-rich__editor,
.space-post-modal__field--editor .space-post-modal__textarea { min-height: 140px; }
.space-post-modal__foothint { display: none; }
}
/* ── Draft assist ────────────────────────────────────────────────────────────
Improve / Shorten / Translate, below the editor. Deliberately quiet: it is an
offer beside the author's own writing, not a call to action competing with
Post. Scoped to the modal (CLAUDE.md rule 2). */
.space-post-modal .space-draft-assist {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--sp-card-border);
}
.space-post-modal .space-draft-assist__label {
display: inline-flex;
align-items: center;
gap: 5px;
margin-right: 2px;
color: var(--sp-text-muted);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.space-post-modal .space-draft-assist__btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border: 1px solid var(--sp-card-border);
border-radius: 999px;
background: transparent;
color: var(--sp-text-muted);
font-size: 12px;
cursor: pointer;
}
.space-post-modal .space-draft-assist__btn:hover:not(:disabled) {
border-color: var(--sp-accent);
background: var(--sp-hover);
color: var(--sp-accent);
}
.space-post-modal .space-draft-assist__btn:disabled {
opacity: 0.5;
cursor: default;
}
/* Undo is the safety net for a rewrite that replaced text the author WROTE, so
it reads as the recovery action rather than a fifth suggestion. */
.space-post-modal .space-draft-assist__undo {
border-color: var(--sp-accent);
color: var(--sp-accent);
}
.space-post-modal .space-draft-assist__status {
flex: 1 1 100%;
min-width: 0;
color: var(--sp-text-muted);
font-size: 11px;
}
/* The AI mark in front of the label. An ![]()
rather than a Font Awesome glyph
because this is the product's own Ask-AI icon, and the row was previously
easy to miss entirely — the whole point of adding it. `aria-hidden` and an
empty alt: the adjacent text already names the control, so announcing the
image would just repeat it. */
.space-post-modal .space-draft-assist__icon {
width: 18px;
height: 18px;
object-fit: contain;
/* Keeps its own colours in both themes; it is a brand mark, not a glyph
that should inherit the muted label colour. */
flex: 0 0 auto;
}
/* Write / Generate lead the row: they produce something from nothing, whereas
the rewrites need a draft to act on. Filled rather than outlined so the
distinction survives at a glance. */
.space-post-modal .space-draft-assist__btn--lead {
border-color: var(--sp-accent);
color: var(--sp-accent);
font-weight: 600;
}
/* The `hidden` attribute loses to any class that sets `display` — the UA rule is
element-level, so `.space-draft-assist__btn { display: inline-flex }` beats it
and the Undo button would render while hidden. This has bitten the feature
twice already (the drop veil, the moderator-only checkbox).
(0,2,1) beats the (0,2,0) rule above, so no `!important` is needed — and this
stylesheet uses none anywhere, which a test enforces. */
.space-post-modal .space-draft-assist [hidden] { display: none; }
/* Save-as-draft sits between Cancel and Post: it is a real commitment (the post
is stored) but not the primary one, so it reads as a secondary action rather
than competing with Post for the eye. */
.space-post-modal .space-post-modal__draft {
display: inline-flex;
align-items: center;
gap: 6px;
}
.space-post-modal .space-post-modal__draft:disabled { opacity: 0.5; cursor: default; }
/* Preview reads as the quietest footer control: it changes nothing, it only
shows you what you already have. Same shape as Save-as-draft so the footer
stays one row of like-sized buttons. */
.space-post-modal .space-post-modal__preview {
display: inline-flex;
align-items: center;
gap: 6px;
}
.space-post-modal .space-post-modal__preview:disabled { opacity: 0.5; cursor: default; }
/* ── Post preview ────────────────────────────────────────────────────────────
A second layer ON TOP of the composer, which is itself an overlay. The
composer stays mounted underneath — closing this must return the author to
their draft exactly as they left it, so nothing here may unmount it.
Scoped to .space-preview (CLAUDE.md rule 2). */
.space-preview-overlay {
/* Above the composer. The shared .teams-modal-overlay z-index puts the two
on the same layer, where paint order alone decides — and a preview that
renders BEHIND the dialog that opened it looks like a dead button. */
z-index: 12000;
}
.space-preview { max-width: 780px; width: 100%; }
.space-preview__body {
max-height: 70vh;
overflow-y: auto;
}
.space-preview__note {
margin: 0 0 14px;
color: var(--sp-text-muted);
font-size: 12px;
}
/* The stage carries the feed's own background so the card sits on what it will
actually sit on. A card previewed on the modal's flat surface reads lighter
than it does in the feed, which is the one thing a preview must not do. */
.space-preview__stage {
background: var(--sp-bg, transparent);
border-radius: 10px;
}
/* The real card is width-constrained by the feed's list; reproduce that here
rather than letting it stretch to the dialog, or long lines wrap differently
in the preview than they will in the feed. */
.space-preview__stage .space-post {
max-width: 720px;
margin: 0 auto;
}
/* An inline image in a preview must never be able to push the dialog wider
than the viewport. The feed gets this from its own list width; this stage
has to say so itself. */
.space-preview__stage img {
max-width: 100%;
height: auto;
}
/* ── The "what do you want?" popover ─────────────────────────────────────────
Write a post / Generate image ask for an instruction before they run. This
replaced a one-line in the assist row, which fit the layout and
nothing else: a brief long enough to be useful scrolled away inside a field
about fourteen words wide, so the author could not read back what they had
written before committing to it.
Layered ABOVE the composer, which stays visible and untouched behind it. */
.space-assist-prompt-overlay {
/* Same layer as the post preview: both sit on top of the composer, which
is itself an overlay. Without this the shared .teams-modal-overlay
z-index leaves paint order to decide, and a popover that renders BEHIND
the dialog that opened it looks like a dead button. */
z-index: 11000;
}
.space-assist-prompt { max-width: 560px; width: 100%; }
.space-assist-prompt__body {
display: flex;
flex-direction: column;
gap: 8px;
}
.space-assist-prompt__label {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--sp-text-muted);
}
/* The whole point: big enough to READ BACK a long instruction. Resizable, and
`min-height` rather than rows alone so a seeded prompt that arrives longer
than six rows still opens showing most of itself. */
.space-assist-prompt__input {
width: 100%;
box-sizing: border-box; /* no global border-box reset in this app */
min-height: 140px;
padding: 12px 14px;
border: 1px solid var(--sp-card-border);
border-radius: var(--tm-r, 8px);
background: var(--tm-real-white, #fff);
color: var(--sp-text);
font: inherit;
font-size: 14px;
line-height: 1.55;
resize: vertical;
}
.space-assist-prompt__input:focus {
outline: none;
border-color: var(--sp-accent);
box-shadow: 0 0 0 3px var(--tm-accent-subtle);
}
.space-assist-prompt__input::placeholder { color: var(--tm-text-3); }
.space-assist-prompt__meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font-size: 11.5px;
color: var(--sp-text-muted);
}
.space-assist-prompt__count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.space-assist-prompt .teams-btn:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 600px) {
/* A phone keyboard takes most of the screen; a 140px field plus a header
and a footer does not fit above it. */
.space-assist-prompt__input { min-height: 96px; }
}
/* ===========================================================================
spaces-target-picker.css — the "which Spaces does this go to?" control
Split out of spaces-modal.css and RE-SCOPED. These rules were written as
`.space-post-modal .space-target__*`, which tied a reusable component to one
dialog: the Repost dialog instantiates the same `SpaceTargetPicker` and got
a raw checkbox list with bullets and a native-looking select, because not one
of these rules matched it.
Scoping is now the component's own `.space-target` block. That still honours
the project rule — `.space-target__*` is a Spaces-specific prefix, not a bare
`.chip` or `.popover` that could collide with the admin panel or the widget —
while letting any dialog mount the picker and have it look like the picker.
=========================================================================== */
/* ── The multi-destination picker ───────────────────────────────────────────
Chips for what is chosen, a popover of checkboxes for changing it.
The chip row is the load-bearing part: a control whose mistake is "you posted
to the wrong team" has to show its whole answer without being opened. */
.space-target { position: relative; }
.space-target__control {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
min-height: 42px;
padding: 7px 12px;
border: 1px solid var(--sp-card-border);
border-radius: var(--tm-r, 8px);
background: var(--tm-real-white, #fff);
color: var(--sp-text);
font: inherit;
text-align: left;
cursor: pointer;
/* The control is a focusable div, not a