.messages-title { display:flex; align-items:center; justify-content:space-between; margin:8px 2px 14px; }
.messages-new-btn { box-shadow:var(--shadow-sm); }
.messages-title h1 { font-size:1.55rem; font-weight:800; margin-top:2px; }
.eyebrow { font-size:.68rem; letter-spacing:.13em; font-weight:800; color:var(--primary); }
.social-search { display:flex; align-items:center; gap:10px; background:var(--surface); border-radius:18px; padding:11px 14px; box-shadow:var(--shadow-sm); margin-bottom:8px; }
.social-search .material-symbols-rounded { color:var(--muted); font-size:22px; }
.social-search input { border:0; outline:0; background:transparent; flex:1; font:inherit; color:var(--text); }
.search-suggestions { margin-bottom:12px; }
.search-suggestions.hidden { display:none; }
.social-results { background:var(--surface); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-md); }
.social-result { display:flex; align-items:center; gap:11px; width:100%; border:0; background:none; padding:11px 13px; text-align:left; cursor:pointer; }
.social-result + .social-result { border-top:1px solid var(--border); }
.social-result strong,.social-result span { display:block; }
.social-result span { color:var(--muted); font-size:.78rem; margin-top:2px; }
.search-loading,.search-empty { padding:13px 15px; color:var(--muted); font-size:.82rem; }
.conversation-list { display:flex; flex-direction:column; gap:9px; }
.convo-avatar { position:relative; flex:0 0 auto; }
.convo-kind-badge {
    position:absolute; right:-3px; bottom:-3px;
    width:18px; height:18px; font-size:12px !important;
    display:grid; place-items:center;
    border-radius:50%; background: var(--primary-btn-from); color: var(--on-primary);
    border:2px solid var(--surface);
}
.conversation-card { width:100%; display:flex; align-items:center; gap:12px; background:transparent; border:0; border-radius:14px; padding:10px 4px; text-align:left; cursor:pointer; }
.conversation-card:active { background:var(--surface-alt); }
.conversation-main { flex:1; min-width:0; }
.conversation-top { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.conversation-top strong { font-size:.96rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conversation-top span { color:var(--muted); font-size:.68rem; white-space:nowrap; }
.conversation-sub { color:var(--muted); font-size:.79rem; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conversation-chevron { color:var(--muted); font-size:20px; }
.new-chat-sheet h3 { font-size:1.2rem; margin:0 0 14px; }
.action-tile { width:100%; display:flex; align-items:center; gap:13px; text-align:left; border:1px solid var(--border); background:var(--surface); border-radius:18px; padding:13px; margin-bottom:8px; }
.action-tile > .material-symbols-rounded { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); }
.action-tile strong,.action-tile span { display:block; }
.action-tile span { color:var(--muted); font-size:.78rem; margin-top:2px; }
.action-tile.selected { border-color:var(--primary); background:var(--primary-soft); }

/* Social inbox / group polish */
.section-label { display:flex; justify-content:space-between; align-items:center; margin:14px 4px 7px; color:var(--muted); font-size:.69rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.section-label span:last-child { min-width:22px; text-align:center; border-radius:999px; background:var(--surface-2, rgba(127,127,127,.1)); padding:3px 7px; }
.groups-label { margin-top:18px; }
/* DM cards are now identical to group cards — flat rows, no special
   shadow (see .conversation-card above). */
.result-arrow { margin-left:auto; color:var(--muted); font-size:20px; }
.action-tile { position:relative; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.action-tile:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.action-tile-primary { border-color:color-mix(in srgb, var(--primary) 35%, var(--border)); }
.action-arrow { margin-left:auto; color:var(--muted); font-size:20px; }
.sheet-kicker { color:var(--primary); font-size:.67rem; font-weight:900; letter-spacing:.12em; }
.sheet-copy { color:var(--muted); font-size:.82rem; line-height:1.45; margin:4px 0 14px; }
.school-create-panel { margin:12px 0 14px; }
.school-create-panel.hidden { display:none; }
.inline-loading,.empty-inline { display:flex; align-items:center; gap:9px; padding:15px; border:1px dashed var(--border); border-radius:16px; color:var(--muted); font-size:.82rem; }
.empty-inline { flex-direction:column; align-items:flex-start; }
.empty-inline strong { color:var(--text); font-size:.88rem; }
.empty-inline .material-symbols-rounded { color:var(--primary); }
.empty-inline.compact { flex-direction:row; padding:12px; }
.inline-loading .spin { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.school-hint { color:var(--muted); font-size:.72rem; margin-top:6px; }
.school-selected { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius:16px; background:color-mix(in srgb, var(--primary) 6%, var(--surface)); margin-bottom:12px; }
.school-selected > .avatar { flex:0 0 auto; aspect-ratio:1/1; }
.school-selected > div:not(.avatar) { flex:1 1 auto; min-width:0; }
.school-selected > div:not(.avatar) strong { display:block; font-size:.9rem; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.school-selected > div:not(.avatar) span { display:block; color:var(--muted); font-size:.72rem; margin-top:2px; }
.school-selected > .material-symbols-rounded { color:var(--primary); font-size:20px; }
.quick-role-row { display:flex; gap:7px; overflow:auto; padding:2px 0 10px; scrollbar-width:none; }
.quick-role-row::-webkit-scrollbar { display:none; }
.quick-role { flex:0 0 auto; display:flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:8px 10px; color:var(--text); font:inherit; font-size:.72rem; cursor:pointer; }
.quick-role .material-symbols-rounded { font-size:17px; color:var(--primary); }
.quick-role em { font-style:normal; color:var(--muted); }
.picker-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 7px; font-size:.8rem; }
.picker-heading > div > span { display:block; color:var(--muted); font-size:.7rem; margin-top:2px; }
.selection-count { color:var(--primary); font-size:.7rem; font-weight:800; }
.school-member-picker { display:flex; flex-direction:column; gap:6px; max-height:320px; overflow-y:auto; overflow-x:hidden; padding:2px; margin:-2px; scrollbar-width:none; overscroll-behavior:contain; }
.school-member-picker::-webkit-scrollbar { display:none; }
.picker-person,.invite-person { display:flex; align-items:center; gap:10px; width:100%; border-radius:15px; background:var(--surface); box-shadow:var(--shadow-sm); padding:9px 10px; text-align:left; cursor:pointer; }
.picker-person { position:relative; }
.picker-person:hover,.picker-person.selected { background:color-mix(in srgb, var(--primary) 6%, var(--surface)); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent), var(--shadow-sm); }
.picker-person input { position:absolute; opacity:0; pointer-events:none; }
.picker-person-copy { flex:1; min-width:0; }
.picker-person-copy strong,.picker-person-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker-person-copy span { color:var(--muted); font-size:.7rem; margin-top:2px; }
.picker-check { color:var(--muted); font-size:21px; }
.picker-person.selected .picker-check { color:var(--primary); }
.group-detail-hero { position:relative; display:flex; align-items:center; gap:14px; padding:8px 0 16px; }
.group-hero-avatar { flex:0 0 auto; position:relative; }
.group-hero-avatar.editable { position:relative; }
.avatar-edit-badge { position:absolute; right:-2px; bottom:-2px; width:24px; height:24px; border-radius:50%; background: var(--primary-btn-from); color: var(--on-primary); display:grid; place-items:center; border:2px solid var(--bg); pointer-events:none; }
.avatar-edit-badge .material-symbols-rounded { font-size:13px; }
.group-hero-avatar.uploading { opacity:.55; pointer-events:none; }
.group-hero-avatar.uploading .avatar-edit-badge { animation:pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@media (prefers-reduced-motion: reduce) { .group-hero-avatar.uploading .avatar-edit-badge { animation:none; } }
.group-hero-copy { flex:1; min-width:0; }
.group-hero-copy h2 { margin:2px 0 4px; font-size:1.35rem; letter-spacing:-.02em; }
.group-hero-copy p { color:var(--muted); font-size:.8rem; line-height:1.4; margin:0 0 9px; }
.group-hero-meta { display:flex; flex-wrap:wrap; gap:6px; }
.role-pill { display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:5px 8px; background:color-mix(in srgb, var(--primary) 10%, var(--surface)); color:var(--primary); font-size:.68rem; font-weight:800; }
.role-pill .material-symbols-rounded { font-size:14px; }
.role-pill.muted { color:var(--muted); background:var(--surface-2, rgba(127,127,127,.08)); }
.group-action-stack { display:flex; flex-direction:column; gap:7px; margin-bottom:15px; }
.group-action-stack .btn { margin:0; }
.group-members-head { display:flex; justify-content:space-between; align-items:center; margin:3px 0 8px; }
.group-members-head h3 { margin:0; font-size:1rem; }
.group-members-head span { color:var(--muted); font-size:.7rem; }
.member-count { min-width:26px; text-align:center; border-radius:999px; padding:4px 7px; background:var(--surface-2, rgba(127,127,127,.08)); }
.group-members { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.member-card { display:flex; align-items:center; gap:10px; width:100%; border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); padding:9px; text-align:left; cursor:pointer; }
.member-card:hover { box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent), var(--shadow-sm); }
.member-copy { flex:1; min-width:0; }
.member-copy strong,.member-copy span,.member-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.member-copy span { color:var(--muted); font-size:.68rem; margin-top:2px; }
.member-copy small { color:var(--muted); opacity:.8; font-size:.62rem; margin-top:2px; }
.member-role-btn { display:flex; align-items:center; gap:4px; min-height:36px; border:1px solid var(--border); background:var(--surface-2, rgba(127,127,127,.08)); color:var(--text); border-radius:999px; padding:8px 12px; font:inherit; font-size:.7rem; font-weight:800; cursor:pointer; }
.member-role-btn .material-symbols-rounded { font-size:14px; color:var(--muted); }
.role-option { margin-bottom:7px; }
.role-option .role-selected { margin-left:auto; color:var(--primary); }
.danger-zone-btn { margin-top:3px; }
.invite-results { max-height:390px; overflow:auto; }
.invite-person { margin-bottom:6px; }
.invite-person > .material-symbols-rounded { margin-left:auto; color:var(--primary); }
.btn-soft { border:1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); background:color-mix(in srgb, var(--primary) 7%, var(--surface)); color:var(--primary); }

/* ------------------------------------------------------------------
   CHAT THREAD (group + DM) — single source of truth.
   Full-screen fixed surface, WhatsApp/Instagram-style:
     .chat-page (fixed, 100dvh, flex column)
       .chat-topbar   flex:0 0 auto  — back + avatar/name + actions
       .chat-scroll   flex:1 1 auto  — the ONLY thing that scrolls
       .typing-status flex:0 0 auto
       .composer      flex:0 0 auto  — pinned by flow, not position hacks
       .emoji-dock    flex:0 0 auto  — swaps in for the native keyboard
   The bottom tab bar is removed from the DOM while this is open
   (see router.js) so there's nothing left for the composer to fight.
------------------------------------------------------------------ */
/* #app-content carries the app's page gutter + bottom-nav padding; the
   chat surface is full-bleed, so it resets both (ID selector needed to
   beat #app-content's specificity). */
#app-content.chat-page,
.chat-page {
    padding: 0;
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
}
.chat-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: max(10px, env(safe-area-inset-top)) 12px 10px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}
.back-btn {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--surface); box-shadow: var(--shadow-sm);
    color: var(--text); cursor: pointer;
}
.back-btn:active { transform: scale(.92); }
.chat-identity {
    display: flex; align-items: center; gap: 10px;
    flex: 1 1 auto; min-width: 0;
    border: 0; background: transparent; padding: 2px;
    text-align: left; cursor: pointer;
}
.chat-identity h1 { font-size: 1.05rem; font-weight: 700; line-height: 1.25; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header-text { min-width: 0; display: flex; flex-direction: column; }
.chat-header-text h1 { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.chat-header-sub { display: block; color: var(--muted); font-size: .72rem; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-topbar .btn-icon {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--primary); cursor: pointer;
}
.chat-topbar .btn-icon:active { transform: scale(.92); }
.chat-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex; flex-direction: column; gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 12px 14px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
/* ---------------- MESSAGE GROUPING (Instagram-style) ----------------
   Consecutive messages from the same sender sit close together
   (.chat-scroll's 2px gap); a new sender/side gets a bit of breathing
   room via .cluster-start. In a group thread, only the LAST bubble of
   someone else's run shows their avatar (.msg-avatar-slot), and their
   name appears once above the FIRST bubble (.msg-sender-label). A DM
   never shows either — it's obvious who's who with just two people. */
.msg-row { display:flex; flex-direction:column; width:100%; position:relative; }
.msg-row.mine { align-items:flex-end; }
.msg-row.theirs { align-items:flex-start; }
.msg-row.cluster-start { margin-top: 12px; }

.msg-sender-label {
    display:block; margin:0 0 3px 36px; padding:0; border:0; background:none;
    color:var(--primary); font:inherit; font-size:.68rem; font-weight:700; cursor:pointer;
}
.msg-line { display:flex; align-items:flex-end; gap:8px; max-width:100%; }
.msg-avatar-slot { flex:0 0 auto; width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer; }
.msg-avatar-slot .avatar { width:28px; height:28px; font-size:.7rem; }
.msg-avatar-slot.spacer { visibility:hidden; pointer-events:none; }

.bubble-col { display:flex; flex-direction:column; max-width:min(78%, 440px); }
.msg-row.mine .bubble-col { align-items:flex-end; }
.msg-row.theirs .bubble-col { align-items:flex-start; }

.bubble { padding:9px 13px; border-radius:20px; background:var(--surface); cursor:default; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
.msg-row.mine .bubble { background:var(--bubble-mine, var(--primary)); color:var(--on-primary); }
.msg-row.theirs .bubble { color:var(--text); }
.bubble-text { display:block; white-space:pre-wrap; overflow-wrap:anywhere; font-size:.88rem; line-height:1.4; }
.bubble-time { display:block; text-align:right; color:var(--muted); font-size:.58rem; margin-top:4px; }
.msg-row.mine .bubble-time { color:rgba(255,255,255,.75); }
.msg-row.pending .bubble { opacity:.62; }
.msg-row.pending .bubble-time { font-style:italic; }
.reaction-row { display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; }
.reaction-row:empty { display:none; }
.reaction-chip { font-size:.72rem; line-height:1; padding:3px 7px; border-radius:999px; background:var(--surface); box-shadow:var(--shadow-sm); cursor:pointer; }
.reaction-chip.mine { box-shadow:0 0 0 1.5px color-mix(in srgb, var(--primary) 55%, transparent), var(--shadow-sm); background:color-mix(in srgb, var(--primary) 14%, var(--surface)); }
.reaction-picker { position:absolute; z-index:12; top:-46px; display:flex; gap:4px; padding:6px 8px; border-radius:20px; background:var(--surface); box-shadow:var(--shadow-md, var(--shadow-sm)); animation:reactionPickerIn .12s ease-out; max-width:calc(100vw - 24px); flex-wrap:wrap; }
.reaction-picker.below { top:auto; bottom:-46px; }
.msg-row.mine .reaction-picker { right:0; }
.msg-row.theirs .reaction-picker { left:0; }
.reaction-picker button { font-size:1.15rem; background:none; border:0; cursor:pointer; padding:2px 3px; transition:transform .1s ease; }
.reaction-picker button:hover, .reaction-picker button:active { transform:scale(1.2); }
@keyframes reactionPickerIn { from { opacity:0; transform:translateY(4px) scale(.92); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .reaction-picker { animation:none; } }

/* Long-press feedback: a slow, subtle scale-down while held, then a
   quick pop back out right as the reaction tray opens. Mirrors the
   ~3s WhatsApp-style hold without blocking the tap/click path. */
.bubble.long-pressing { transition:transform 3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; transform:scale(.97); box-shadow:var(--shadow-md, var(--shadow-sm)); }
.bubble.long-press-release { animation:longPressRelease .22s cubic-bezier(.34,1.56,.64,1); }
@keyframes longPressRelease { 0% { transform:scale(.97); } 55% { transform:scale(1.035); } 100% { transform:scale(1); } }
@media (prefers-reduced-motion: reduce) { .bubble.long-pressing, .bubble.long-press-release { transition:none; animation:none; transform:none; } }
.typing-status { flex: 0 0 auto; color:var(--primary); font-weight:600; font-size:.74rem; padding:0 14px 6px; min-height:18px; transition:opacity .18s ease; }
.typing-status.hidden { visibility:hidden; opacity:0; }

.composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 12px max(10px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
}
.composer textarea {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-height: 46px;
    max-height: 132px;
    resize: none;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    color: var(--text);
    padding: 13px 18px;
    outline: none;
    font: inherit;
    font-size: .93rem;
    line-height: 1.35;
    box-shadow: var(--shadow-sm);
}
.composer textarea:focus { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.composer-icon, .send-btn {
    width: 46px; height: 46px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--surface); color: var(--primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}
.composer-icon.active { background: var(--primary-btn-from); color: var(--on-primary); }
.send-btn { background: var(--primary-btn-from); color: var(--on-primary); }
.send-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.composer-icon:active, .send-btn:active { transform: scale(.92); }

/* Emoji dock — replaces the native keyboard in place, WhatsApp-style,
   instead of floating over the composer. It's a normal flex child
   (not position:absolute), so the message list naturally shrinks to
   make room and nothing overlaps. */
.emoji-dock {
    flex: 0 0 auto;
    display: none;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    height: min(280px, 34vh);
    overflow-y: auto;
    padding: 10px 8px max(10px, env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.emoji-dock.open { display: grid; }
.emoji-dock button {
    border: 0; background: transparent; border-radius: 10px;
    font-size: 1.35rem; line-height: 1; padding: 8px 0; cursor: pointer;
}
.emoji-dock button:active { background: var(--surface-2, rgba(127,127,127,.12)); }

.dm-wall {
    flex: 0 0 auto;
    margin: 0 10px 8px;
    padding: 12px 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border));
    color: var(--text);
    font-size: .82rem;
    line-height: 1.4;
    text-align: center;
}

/* ---------------- CREATE-TYPE SEGMENTED CONTROL (spec §45) ---------------- */
/* Equal-width columns instead of flex-wrap: with flex, the widest
   label ("Announcements") grew past its min-width and pushed the last
   segment onto its own full-width row, which is what made the type
   picker look lopsided on Android. A grid gives every option exactly
   the same width at every screen size, and the labels wrap instead of
   the control overflowing. */
.type-segment-group { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; width:100%; }
.type-segment {
    min-width:0; min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    padding:10px 6px; text-align:center; line-height:1.2; overflow-wrap:anywhere; box-sizing:border-box; border-radius:var(--radius-md); border:2px solid var(--border); background:var(--surface);
    color:var(--text); font:inherit; font-size:.82rem; font-weight:700; cursor:pointer;
    transition:border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease;
}
.type-segment .material-symbols-rounded { font-size:19px; color:var(--muted); transition:color .15s ease; }
.type-segment:hover { border-color:color-mix(in srgb, var(--primary) 35%, var(--border)); }
.type-segment:active { transform:scale(.97); }
.type-segment:focus-visible { outline:none; box-shadow:0 0 0 4px var(--primary-soft-strong); border-color:var(--primary); }
.type-segment.selected { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, var(--surface)); color:var(--primary-dark, var(--primary)); }
.type-segment.selected .material-symbols-rounded { color:var(--primary); }
@media (max-width: 360px) {
    .type-segment { font-size:.74rem; padding:9px 4px; }
    .type-segment .material-symbols-rounded { font-size:18px; }
}

/* ---------------- AUDIENCE PICKER (school groups + announcements) ---------------- */
.overlay-stacked { z-index:1100; }
.school-choice-list { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.school-choice { display:flex; align-items:center; gap:10px; width:100%; min-height:58px; padding:10px 12px; border-radius:var(--radius-md, 14px); background:var(--surface); box-shadow:var(--shadow-sm); text-align:left; cursor:pointer; }
.school-choice:active { transform:scale(.985); }
.school-choice-copy { flex:1; min-width:0; }
.school-choice-copy strong { display:block; font-size:.9rem; }
.school-choice-copy span { display:block; color:var(--muted); font-size:.7rem; margin-top:2px; text-transform:capitalize; }
.school-choice > .material-symbols-rounded { color:var(--muted); }

.audience-panel { margin-top:12px; }
.audience-tiles { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.audience-tile { display:flex; align-items:center; gap:11px; width:100%; min-height:60px; padding:10px 12px; border:2px solid var(--border); border-radius:var(--radius-md, 14px); background:var(--surface); color:var(--text); font:inherit; text-align:left; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease; }
.audience-tile:active { transform:scale(.985); }
.audience-tile > .material-symbols-rounded:first-child { font-size:22px; color:var(--muted); }
.audience-tile-copy { flex:1; min-width:0; }
.audience-tile-copy strong { display:block; font-size:.88rem; }
.audience-tile-copy span { display:block; color:var(--muted); font-size:.7rem; margin-top:2px; }
.audience-tile-mark { color:var(--muted); }
.audience-tile.selected { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.audience-tile.selected > .material-symbols-rounded:first-child,
.audience-tile.selected .audience-tile-mark { color:var(--primary); }

.audience-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.audience-chip { display:inline-flex; align-items:center; gap:4px; padding:6px 6px 6px 11px; border-radius:999px; background:color-mix(in srgb, var(--primary) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); color:var(--primary); font-size:.72rem; font-weight:700; }
.audience-chip .chip-x { display:grid; place-items:center; width:20px; height:20px; border:0; border-radius:50%; background:color-mix(in srgb, var(--primary) 18%, transparent); color:inherit; cursor:pointer; }
.audience-chip .chip-x .material-symbols-rounded { font-size:14px; }
.audience-hint { margin-top:10px; color:var(--muted); font-size:.72rem; }
.class-picker-sheet .field + .field { margin-top:10px; }
.class-picker-sheet select, .manual-invite-sheet input { width:100%; min-height:46px; }

/* Inbox polish — keep long names/previews on one line on small screens */
.conversation-card { min-height:66px; }
.conversation-top strong, .conversation-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-top { gap:8px; }
.conversation-top span { flex:0 0 auto; font-size:.64rem; color:var(--muted); }
.messages-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* Infinite-scroll-up "load more history" spinner row (chat.js
   _loadMoreHistory) — sits pinned above the earliest loaded message. */
.history-loader { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; font-size: .78rem; color: var(--muted); }

/* Instagram-style unread badge (conversation list rows). Caps its own
   text at "99+" in JS — this just keeps the pill itself compact. */
.unread-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
/* Cold-start "something's new" signal — we know a message arrived but
   not how many, so it's a plain dot rather than a number. See
   flagColdUnread in services/notifications.js. */
.unread-badge.dot-only { min-width: 10px; width: 10px; height: 10px; padding: 0; }