/* The person's group under their name (person-group.js): the account button is its head; its pages sit just beneath,
   a step in from the main menu so they read as the person's own. */
.person-group-items{display:grid;gap:2px;margin:6px 0 10px 18px;padding-inline-start:6px;border-inline-start:2px solid var(--line)}
.person-group-items[hidden]{display:none}
.person-group-items .nav-item{min-height:44px;padding:10px;gap:10px;font-size:.88rem}
.person-group-items .nav-item>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.person-group-items .nav-item.danger{color:var(--red)}
.account-button[data-person-group]>.icon{transition:transform .15s ease}
.account-button[data-person-group][aria-expanded=true]>.icon{transform:rotate(180deg)}
.collapsed .person-group-items{margin-inline-start:0;padding-inline-start:0;border-inline-start:0}
@media (max-width:700px){.collapsed .person-group-items{margin-inline-start:18px;padding-inline-start:6px;border-inline-start:2px solid var(--line)}}
@media (prefers-reduced-motion:reduce){.account-button[data-person-group]>.icon{transition:none}}

/* A Workspace's page (workspace-hero.js): the cover across the top with Back inside it, then one row of name and one
   small control. The cover is the person's picture, or the Workspace's tint until one is set. */
.ws-hero{margin:-6px 0 18px}
.ws-hero-cover{position:relative;isolation:isolate;height:clamp(154px,26vw,240px);border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.ws-hero-cover .ws-cover{position:absolute;inset:0;z-index:0}
.ws-hero-cover .ws-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ws-hero-cover:has(.ws-cover img) .ws-cover,[data-theme=dark] .ws-hero-cover:has(.ws-cover img) .ws-cover{filter:none}
/* The soft scrim: a shade along the top so the Back pill reads on a white picture as on a dark one. */
.ws-hero-cover::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,10,35,.32) 0%,rgba(20,10,35,0) 55%)}
.ws-hero-cover>a.ws-hero-back{position:absolute;top:10px;inset-inline-start:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;max-width:calc(100% - 20px);padding:0 14px;border-radius:999px;background:rgba(20,12,30,.52);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-weight:600;font-size:.95rem;text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.35);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ws-hero-cover>a.ws-hero-back:hover{background:rgba(20,12,30,.66)}
.ws-hero-cover>a.ws-hero-back:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--purple)}
.ws-hero-back .page-back-arrow{color:#fff}
/* Set cover sits on the cover, bottom-right: the same dark glass pill as Back, so it reads on any picture and on the tint. */
.ws-hero-cover>button.ws-hero-cover-set{position:absolute;inset-inline-end:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;min-height:44px;min-width:44px;max-width:calc(100% - 20px);padding:0 14px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(20,12,30,.58);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:inherit;font-weight:600;font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap;cursor:pointer}
.ws-hero-cover>button.ws-hero-cover-set:hover{background:rgba(20,12,30,.72)}
.ws-hero-cover>button.ws-hero-cover-set:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--purple)}
.page-heading.ws-hero-row{display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:space-between;gap:12px;margin:14px 0 0}
.page-heading.ws-hero-row>div:first-child{min-width:0;flex:1 1 auto}
.page-heading.ws-hero-row h1{margin-bottom:4px;overflow-wrap:anywhere}
.page-heading.ws-hero-row>.ws-held{display:none!important}
/* Chat and call on the cover, top right (the Founder, 21 October 2026): round, on the scrim the pencil wears. */
.ws-hero-cover>.ws-hero-calls{position:absolute;top:10px;inset-inline-end:10px;z-index:2;display:inline-flex;align-items:center;gap:8px}
.ws-hero-calls>:is(.icon-button,.group-call-join){display:inline-grid;place-items:center;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(20,12,30,.58);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff}
.ws-hero-calls>:is(.icon-button,.group-call-join):hover{background:rgba(20,12,30,.72)}
.ws-hero-calls>:is(.icon-button,.group-call-join):focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--purple)}
.ws-hero-calls .icon,.ws-hero-calls svg{width:18px;height:18px}
.ws-hero-calls .chat-call-said{padding:0 10px;border-radius:999px;background:rgba(20,12,30,.58);color:#fff;line-height:40px}
.ws-menu{display:grid;gap:4px;min-width:min(280px,100%)}
.ws-menu-item{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 12px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer}
.ws-menu-item:hover,.ws-menu-item:focus-visible{background:var(--soft)}
.ws-menu-item .icon{flex:0 0 20px;width:20px;height:20px}
@media (max-width:700px){.ws-hero{margin-top:-8px}.ws-hero-cover{height:132px;border-radius:14px}}

/* On a phone a list row's status sits beside the agent's name. */
@media (max-width:699px){
 #main .task-row{grid-template-columns:auto minmax(0,1fr);column-gap:10px}
 #main .task-row>div:first-child{grid-column:1/-1}
 #main .task-row>.row{grid-column:1;grid-row:2}
 #main .task-row>.badge{grid-column:2;grid-row:2;justify-self:start;max-width:none}
}

/* The name card in two layers (person-group.js; the Founder, 8 October 2026, 03:34). On top, the account layer: its logo
   in a circle and its name in full, on its own colours (near-black with white in light, near-white with black in dark),
   a mention that opens nothing. Under it, the person's row: face, name, and their part in the account. Both on one grid:
   the same padding, a 40 px circle and the same gap, so the two names start at one line. */
:root{--account-layer-bg:#16141c;--account-layer-ink:#fff;--account-layer-ring:rgba(255,255,255,.3)}
[data-theme=dark]{--account-layer-bg:#f0f1f5;--account-layer-ink:#14151a;--account-layer-ring:rgba(20,21,26,.28)}
.account-layer{display:flex;align-items:center;gap:12px;min-height:64px;margin-bottom:-12px;padding:12px;border-radius:16px;background:var(--account-layer-bg);color:var(--account-layer-ink);cursor:default}
.account-layer-name{flex:1;min-width:0;font-size:.95rem;font-weight:600;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.account-logo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--account-layer-bg);color:var(--account-layer-ink);box-shadow:inset 0 0 0 1px var(--account-layer-ring)}
.account-logo .icon{width:20px;height:20px}
.account-logo.has-logo{background:#fff;box-shadow:inset 0 0 0 1px var(--account-layer-ring)}
.account-logo img{display:block;width:100%;height:100%;object-fit:contain}
.account-logo.large{flex-basis:64px;width:64px;height:64px}.account-logo.large .icon{width:30px;height:30px}
.sidebar .account-button{gap:12px;align-items:center}
.account-button .name-card-name{display:block;font-size:.9rem;font-weight:600;line-height:1.3;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.account-button .name-card-part{display:block;margin-top:2px;color:var(--muted);font-size:.8rem;font-weight:400;line-height:1.3;white-space:normal}
.account-button[data-person-group]{min-height:64px}
.account-button[data-person-group]>.icon{flex:0 0 20px;width:20px;height:20px}
/* The collapsed rail: the account is its circle alone, named on hover; the person their face, as before. */
.collapsed .account-layer{justify-content:center;min-height:0;margin-bottom:-14px;padding:0;background:none}
.collapsed .account-layer-name{display:none}
@media (max-width:700px){.collapsed .account-layer{justify-content:flex-start;min-height:64px;margin-bottom:-12px;padding:12px;background:var(--account-layer-bg)}.collapsed .account-layer-name{display:block}}

/* Admin's account card (account-logo.js): the account's name with its logo and a pencil on the logo, as the person's own
   picture has (profile-face.css); the pencil opens the same window. */
.admin-account-logo-open{position:relative;flex:none;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;color:inherit}
.admin-account-logo-open:focus-visible{outline:3px solid #7929c3;outline-offset:3px}
.admin-account-logo-open .profile-face-badge{width:26px;height:26px;inset-inline-end:-4px;bottom:-4px;border-width:2px}
.admin-account-logo-open .profile-face-badge .icon{width:13px;height:13px}
.logo-flow-circle{display:flex;justify-content:center;margin:4px 0 16px}
.account-logo.xlarge{flex-basis:120px;width:120px;height:120px}.account-logo.xlarge .icon{width:52px;height:52px}
.admin-account{display:grid;gap:12px;margin-bottom:16px}
.admin-account-head{display:flex;align-items:center;gap:16px;min-width:0}
.admin-account-name{min-width:0}.admin-account-name .meta{margin:0}.admin-account-name h2{margin:2px 0 0;overflow-wrap:anywhere}
.admin-account-actions{display:flex;flex-wrap:wrap;gap:8px}
.admin-account-actions .btn{min-height:44px}
.admin-account-status{margin:0;min-height:1.2em;font-size:.88rem}
.admin-account-status:empty{display:none}

/* The cover's pencil (the Founder, 6 October 2026): a small round button in the corner, never a worded button; at the
   bottom right, under the chat and call icons (the Founder, 21 October 2026). */
.ws-hero-cover>button.ws-hero-cover-set{inset-inline-end:10px;top:auto;bottom:10px;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;justify-content:center;border-radius:999px}
.ws-hero-cover>button.ws-hero-cover-set svg{width:18px;height:18px}
/* Profile & identity: the one row naming the enterprise its admin runs, opening Admin (human-photo.js organisationRow). */
.profile-organisation{padding:4px 18px;margin-bottom:16px}
.profile-organisation .setting-row{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-height:48px}
.profile-organisation .grow{display:grid;gap:2px;min-width:0}
.profile-organisation strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* The account, then the person, apart (the Founder, 8 October 2026, 19:00, after one black block "doesn't feel right"):
   no block behind them. The account's row is its logo, a black circle with the white stroke (the admin's own logo when
   one is uploaded), and its name in a narrow black pill of its own, only as wide as the name. Under it, the person's
   pill as it was before the account came in, kept low: face, name, their part. The logo and the face share one left
   edge. A person alone keeps the pill alone; the collapsed rail keeps the circle above the face. */
:root{--name-pill-bg:#fff;--name-pill-ink:#24212d;--name-pill-muted:#686577}
[data-theme=dark]{--name-pill-bg:#1e2028;--name-pill-ink:#f4f4f7;--name-pill-muted:#b0aebb}
.name-card{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.name-card>.account-layer{gap:10px;min-height:0;margin:0;padding:0 0 0 7px;border-radius:0;background:none;color:inherit}
.name-card .account-layer-name{flex:0 1 auto;display:inline-block;padding:0 13px;border-radius:999px;background:var(--account-layer-bg);color:var(--account-layer-ink);font-size:.85rem;line-height:28px;max-width:100%;overflow-wrap:anywhere}
/* The name sits on the pill's middle (the Founder, 8 October 2026, 21:04: "not sitting in the centre of the field"): its
   words trimmed to their capitals and baseline, the pill's padding even above and below them. */
@supports (text-box:trim-both cap alphabetic){.name-card .account-layer-name{line-height:1.2;text-box:trim-both cap alphabetic;padding:9px 13px}}
.name-card .account-logo{box-shadow:none}
.name-card .account-logo.has-logo{box-shadow:inset 0 0 0 1px var(--line)}
.sidebar .name-card>.account-button{gap:10px;min-height:0;padding:6px 10px 6px 6px;background:var(--name-pill-bg);color:var(--name-pill-ink)}
.name-card>.account-button .name-card-part{color:var(--name-pill-muted);margin-top:0}
@media (min-width:701px){
 .collapsed .name-card{gap:0}
 .collapsed .name-card>.account-layer{justify-content:center;padding:0}
 .collapsed .name-card .account-layer-name{display:none}
 .collapsed .sidebar .name-card>.account-button{padding:9px;background:none;color:inherit}
}

/* Placing the logo (account-logo.js): the cropper's frame drawn as the circle it will fill, on a checked ground so the
   clear corners of a square logo show as clear. */
.account-logo-crop .photo-crop-stage{border-radius:50%;width:min(100%,280px);background:repeating-conic-gradient(#ececf2 0 25%,#fff 0 50%) 0 0/16px 16px}
.admin-account-place{margin:0 0 6px;font-size:1.05rem}

/* The organization's Admin presses the account layer (org-admin): a button drawn as the layer was, pressable at 44 px. */
button.account-layer.account-layer-press,.name-card>button.account-layer.account-layer-press{min-height:44px}
button.account-layer-press{appearance:none;border:0;width:100%;font:inherit;text-align:start;cursor:pointer}
.name-card>button.account-layer-press{padding:0 0 0 7px}
.account-layer-press:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.collapsed .name-card>button.account-layer.account-layer-press{min-height:0}
/* Chat and call on the cover in the agent page's own pill: one white rounded bar, the two icons in the person's colour; the
   pencil small, at the cover's top left (the Founder, 22 October 2026, 02:40, on his iPhone). */
.ws-hero-cover>.ws-hero-calls{gap:0;border:1px solid var(--line,#e4e1ea);border-radius:999px;background:var(--surface,#fff);overflow:hidden;box-shadow:0 1px 2px #24212d12}
.ws-hero-calls>:is(.icon-button,.group-call-join),.ws-hero-calls>:is(.icon-button,.group-call-join):hover{width:44px;height:44px;min-width:44px;min-height:44px;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--purple,#6d28b5)}
.ws-hero-calls>:is(.icon-button,.group-call-join) .icon{width:22px;height:22px}
.ws-hero-cover>button.ws-hero-cover-set{top:10px;bottom:auto;inset-inline-start:10px;inset-inline-end:auto;justify-content:center;min-width:32px;min-height:32px;width:32px;height:32px;padding:0}
.ws-hero-cover>button.ws-hero-cover-set .icon,.ws-hero-cover>button.ws-hero-cover-set svg{width:16px;height:16px}
/* The room's new messages on the cover's chat icon, top right (workspace-hero.js; the Founder, 22 October 2026): the Feed
   button's circle, 22 px in the person's colour, two figures and 99+ smaller. The pill lets it stand over its edge. */
.ws-hero-cover>.ws-hero-calls{overflow:visible}
.ws-hero-calls>.workspace-chat-link{position:relative;border-start-start-radius:999px;border-end-start-radius:999px}
.ws-hero-calls .ws-chat-count{position:absolute;top:-7px;inset-inline-end:-5px;display:grid;place-items:center;box-sizing:border-box;width:22px;min-width:22px;height:22px;padding:0;border-radius:50%;background:var(--purple,#6d28b5);color:#fff;font:700 12px/1 system-ui,sans-serif;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;box-shadow:0 0 0 2px var(--surface,#fff);pointer-events:none}
.ws-hero-calls .ws-chat-count[data-digits="2"]{font-size:11px}
.ws-hero-calls .ws-chat-count[data-digits="3"]{font-size:8px;letter-spacing:-.02em}
body[data-theme=dark] .ws-hero-calls .ws-chat-count{color:#14151a}