/**
 * Connect / Breakroom — X-style timeline tokens (scoped).
 * Marketing site keeps NurseMove navy/teal; feed chrome follows X Default + Dim.
 */

/* -------------------------------------------------------------------------
   Design tokens (Connect)
   ------------------------------------------------------------------------- */
/* Connect tokens on :root so action modals (outside .nurse-connect-layout) inherit them */
:root {
    --connect-blue: #1d9bf0;
    --connect-blue-hover: #1a8cd8;
    --connect-blue-soft: rgba(29, 155, 240, 0.1);
    --connect-teal: var(--color-teal, #127d72); /* NurseMove brand CTA */
    --connect-like: #f91880;
    --connect-like-soft: rgba(249, 24, 128, 0.1);
    --connect-repost: #00ba7c;
    --connect-repost-soft: rgba(0, 186, 124, 0.1);
    --connect-surface: #ffffff;
    --connect-surface-lift: #ffffff;
    --connect-bg: #ffffff;
    --connect-hover: rgba(15, 20, 25, 0.03);
    --connect-border: #eff3f4;
    --connect-border-strong: #cfd9de;
    --connect-text: #0f1419;
    --connect-text-muted: #536471;
    --connect-text-soft: #536471;
    --connect-radius: 16px;
    --connect-radius-sm: 9999px;
    --connect-radius-lg: 16px;
    --connect-radius-xl: 9999px;
    --connect-shadow: none;
    --connect-shadow-md: none;
    --connect-shadow-lg: 0 8px 24px rgb(15 20 25 / 0.12);
    --connect-focus-ring: 0 0 0 2px var(--connect-blue);
    --connect-accent: #1d9bf0;
    --connect-accent-hover: #1a8cd8;
    --connect-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[data-theme="dark"] {
    /* Fallback dark (non–night-clinic) */
    --connect-blue: #1d9bf0;
    --connect-blue-hover: #1a8cd8;
    --connect-blue-soft: rgba(29, 155, 240, 0.12);
    --connect-teal: #2fd0bd;
    --connect-like: #f91880;
    --connect-like-soft: rgba(249, 24, 128, 0.12);
    --connect-repost: #00ba7c;
    --connect-repost-soft: rgba(0, 186, 124, 0.12);
    --connect-surface: #15202b;
    --connect-surface-lift: #1e2732;
    --connect-bg: #15202b;
    --connect-hover: rgba(255, 255, 255, 0.03);
    --connect-border: #38444d;
    --connect-border-strong: #5b7083;
    --connect-text: #e7e9ea;
    --connect-text-muted: #8b98a5;
    --connect-text-soft: #c8d0d8;
    --connect-shadow-md: none;
    --connect-shadow-lg: none;
    --connect-accent: #1d9bf0;
    --connect-accent-hover: #1a8cd8;
    --connect-focus-ring: 0 0 0 2px var(--connect-blue);
}
/* NurseMove night theme — Breakroom dark default.
   Surface matches canvas so posts aren't boxed with side edges (X-style). */
html[data-palette="night-clinic"][data-theme="dark"] {
    --connect-blue: var(--color-teal, #2fd0bd);
    --connect-blue-hover: var(--color-teal-hover, #4adccb);
    --connect-blue-soft: rgba(47, 208, 189, 0.14);
    --connect-teal: var(--color-teal, #2fd0bd);
    --connect-like: #f91880;
    --connect-like-soft: rgba(249, 24, 128, 0.12);
    --connect-repost: #00ba7c;
    --connect-repost-soft: rgba(0, 186, 124, 0.12);
    --connect-bg: var(--color-soft, #081522);
    --connect-surface: var(--color-soft, #081522);
    --connect-surface-lift: var(--color-surface, #10243a);
    --connect-hover: rgba(255, 255, 255, 0.04);
    --connect-border: var(--color-border, #2d4b6d);
    --connect-border-strong: var(--color-border-strong, #456789);
    --connect-text: var(--color-ink, #ffffff);
    --connect-text-muted: var(--muted, #9eb0c3);
    --connect-text-soft: var(--color-ink-secondary, #f0f4f8);
    --connect-shadow-md: none;
    --connect-shadow-lg: none;
    --connect-accent: var(--color-teal, #2fd0bd);
    --connect-accent-hover: var(--color-teal-hover, #4adccb);
    --connect-focus-ring: 0 0 0 2px var(--connect-blue);
}
.nurse-connect-layout {
    --connect-blue: #1d9bf0;
    --connect-blue-hover: #1a8cd8;
    --connect-blue-soft: rgba(29, 155, 240, 0.1);
    --connect-teal: var(--color-teal, #127d72);
    --connect-like: #f91880;
    --connect-like-soft: rgba(249, 24, 128, 0.1);
    --connect-repost: #00ba7c;
    --connect-repost-soft: rgba(0, 186, 124, 0.1);
    --connect-surface: #ffffff;
    --connect-surface-lift: #ffffff;
    --connect-bg: #ffffff;
    --connect-hover: rgba(15, 20, 25, 0.03);
    --connect-border: #eff3f4;
    --connect-border-strong: #cfd9de;
    --connect-text: #0f1419;
    --connect-text-muted: #536471;
    --connect-text-soft: #536471;
    --connect-radius: 16px;
    --connect-radius-sm: 9999px;
    --connect-radius-lg: 16px;
    --connect-radius-xl: 9999px;
    --connect-shadow: none;
    --connect-shadow-md: none;
    --connect-shadow-lg: 0 8px 24px rgb(15 20 25 / 0.12);
    --connect-focus-ring: 0 0 0 2px var(--connect-blue);
    --connect-accent: #1d9bf0;
    --connect-accent-hover: #1a8cd8;
    --connect-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-family: var(--connect-font);
    font-size: 15px;
    line-height: 1.4;
    color: var(--connect-text);
    background: var(--connect-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-theme="dark"] .nurse-connect-layout {
    --connect-blue: #1d9bf0;
    --connect-blue-hover: #1a8cd8;
    --connect-blue-soft: rgba(29, 155, 240, 0.12);
    --connect-teal: #2fd0bd;
    --connect-like: #f91880;
    --connect-like-soft: rgba(249, 24, 128, 0.12);
    --connect-repost: #00ba7c;
    --connect-repost-soft: rgba(0, 186, 124, 0.12);
    --connect-surface: #15202b;
    --connect-surface-lift: #1e2732;
    --connect-bg: #15202b;
    --connect-hover: rgba(255, 255, 255, 0.03);
    --connect-border: #38444d;
    --connect-border-strong: #5b7083;
    --connect-text: #e7e9ea;
    --connect-text-muted: #8b98a5;
    --connect-text-soft: #c8d0d8;
    --connect-shadow-md: none;
    --connect-shadow-lg: none;
    --connect-accent: #1d9bf0;
    --connect-accent-hover: #1a8cd8;
}
[data-palette="night-clinic"][data-theme="dark"] .nurse-connect-layout {
    --connect-blue: var(--color-teal, #2fd0bd);
    --connect-blue-hover: var(--color-teal-hover, #4adccb);
    --connect-blue-soft: rgba(47, 208, 189, 0.14);
    --connect-teal: var(--color-teal, #2fd0bd);
    --connect-bg: var(--color-soft, #081522);
    --connect-surface: var(--color-soft, #081522);
    --connect-surface-lift: var(--color-surface, #10243a);
    --connect-hover: rgba(255, 255, 255, 0.04);
    --connect-border: var(--color-border, #2d4b6d);
    --connect-border-strong: var(--color-border-strong, #456789);
    --connect-text: var(--color-ink, #ffffff);
    --connect-text-muted: var(--muted, #9eb0c3);
    --connect-text-soft: var(--color-ink-secondary, #f0f4f8);
    --connect-accent: var(--color-teal, #2fd0bd);
    --connect-accent-hover: var(--color-teal-hover, #4adccb);
}

[data-theme="dark"] .dt-connect .dt-card,
[data-theme="dark"] .dt-connect .connect-post-card,
[data-theme="dark"] .dt-connect .dt-composer-card,
[data-theme="dark"] .dt-connect .feed-tabs-dropdown,
[data-theme="dark"] .dt-connect .repost-menu,
[data-theme="dark"] .dt-connect [style*="background:#fff"],
[data-theme="dark"] .dt-connect [style*="background: #fff"],
[data-theme="dark"] .dt-connect [style*="background:#f3f2ef"] {
    background: var(--connect-surface) !important;
    border-color: var(--connect-border) !important;
}
[data-theme="dark"] .dt-connect [style*="color:#0f1419"],
[data-theme="dark"] .dt-connect [style*="color: #0f1419"],
[data-theme="dark"] .dt-connect [style*="color:#1E2A38"],
[data-theme="dark"] .dt-connect [style*="color: #1E2A38"] {
    color: var(--connect-text) !important;
}
[data-theme="dark"] .dt-connect [style*="color:#536471"],
[data-theme="dark"] .dt-connect [style*="color: #536471"] {
    color: var(--connect-text-muted) !important;
}
[data-theme="dark"] .dt-connect [style*="border-color:#eff3f4"],
[data-theme="dark"] .dt-connect [style*="border-color: #eff3f4"],
[data-theme="dark"] .dt-connect [style*="border:1px solid #cfd9d9"],
[data-theme="dark"] .dt-connect [style*="border: 1px solid #cfd9d9"] {
    border-color: var(--connect-border) !important;
}
[data-theme="dark"] .nurse-connect-layout .connect-post-comment-item,
[data-theme="dark"] .nurse-connect-layout .connect-post-delete-confirm {
    background-color: var(--connect-surface-lift, #183452);
}
[data-theme="dark"] .nurse-connect-layout .connect-post-card:hover,
[data-theme="dark"] .dt-connect .dt-list-item:hover,
[data-theme="dark"] .dt-connect .feed-tabs-dropdown-item:hover,
[data-theme="dark"] .dt-connect .repost-menu-item:hover {
    background-color: var(--connect-surface-lift, #183452) !important;
}
[data-theme="dark"] .nurse-connect-layout input,
[data-theme="dark"] .nurse-connect-layout textarea,
[data-theme="dark"] .nurse-connect-layout select {
    background-color: var(--connect-surface-lift, #183452) !important;
    border-color: #3a4654 !important;
    color: #eef2f6 !important;
}
[data-theme="dark"] .nurse-connect-layout input::placeholder,
[data-theme="dark"] .nurse-connect-layout textarea::placeholder {
    color: #9aa8b5 !important;
}

/* -------------------------------------------------------------------------
   Layout – production social feed
   ------------------------------------------------------------------------- */
.nurse-connect-layout {
    min-height: 100vh;
    background-color: transparent;
    overflow-x: hidden;
}

.nurse-connect-container {
    width: 100%;
    max-width: 1290px;          /* X.com max width */
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px) {
    .nurse-connect-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .nurse-connect-container { padding-left: 1rem; padding-right: 1rem; }
}

.nurse-connect-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;                       /* X.com uses borders, not gaps */
    align-items: start;
    min-width: 0;
}
.nurse-connect-grid > * { min-width: 0; }

@media (min-width: 768px) {
    .nurse-connect-grid {
        grid-template-columns: 88px 1fr;  /* X.com icon rail + content */
    }
    .nurse-connect-grid #leftSidebar {
        grid-column: 1 / 2;
        grid-row: 1;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
    .nurse-connect-grid #mainFeed {
        grid-column: 2 / 3;
        grid-row: 1;
        min-height: 100vh;
    }
    .nurse-connect-grid #rightSidebar {
        grid-column: 1 / 3;
        grid-row: 2;
    }
}

@media (min-width: 1024px) {
    .nurse-connect-grid {
        grid-template-columns: 275px minmax(0, 600px) 1fr;
        gap: 0;
    }
    .nurse-connect-grid #leftSidebar {
        grid-column: 1;
        grid-row: auto;
        position: sticky;
        top: 0;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        padding-right: 1rem;
    }
    .nurse-connect-grid #mainFeed {
        grid-column: 2;
        grid-row: auto;
        min-height: 100vh;
        border-left: none;
        border-right: none;
    }
    .nurse-connect-grid #rightSidebar {
        grid-column: 3;
        grid-row: auto;
        position: sticky;
        top: 0;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        padding-left: 1.5rem;
    }
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* -------------------------------------------------------------------------
   Cards & profile
   ------------------------------------------------------------------------- */
/* ----- Profile card (X.com-style left rail) ----- */
.nurse-connect-layout .profile-card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    overflow: visible;
}

.nurse-connect-layout .profile-banner { display: none; }

.nurse-connect-layout .profile-content {
    padding: 0;
    margin-top: 0;
}

.nurse-connect-layout .avatar-container,
.nurse-connect-layout .avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    margin-bottom: 0;
    box-shadow: none;
}
.nurse-connect-layout .avatar-container { object-fit: cover; }
.nurse-connect-layout .avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.125rem;
    background: var(--connect-accent);
}

.nurse-connect-layout .profile-name {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--connect-text);
    margin: 0 0 2px 0;
    line-height: 1.25;
}
.nurse-connect-layout .profile-specialty {
    font-size: 0.875rem;
    color: var(--connect-text-muted);
    margin: 0 0 8px 0;
    line-height: 1.3;
}
.nurse-connect-layout .profile-location {
    font-size: 0.75rem;
    color: var(--connect-text-muted);
    margin: 0;
}

.nurse-connect-layout .profile-links {
    border-top: none;
    padding: 8px 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
}
.nurse-connect-layout .profile-link-primary {
    color: var(--connect-blue);
    font-weight: 700;
    text-decoration: none;
}
.nurse-connect-layout .profile-link-primary:hover { text-decoration: underline; }
.nurse-connect-layout .profile-link-secondary {
    color: var(--connect-text-muted);
    text-decoration: none;
}
.nurse-connect-layout .profile-link-secondary:hover { color: var(--connect-blue); text-decoration: underline; }

/* ----- Cards (feed, sidebar) ----- */
.nurse-connect-layout .card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    padding: 0;
    min-width: 0;
    max-width: 100%;
}
.nurse-connect-layout .card > *,
.nurse-connect-layout .profile-content,
.nurse-connect-layout .connect-post-content,
.nurse-connect-layout .connect-post-comment-body,
.dt-connect :where(.dt-card, .breakroom-profile-card, .breakroom-explore-card, .breakroom-ad-card) > * {
    min-width: 0;
}
.nurse-connect-layout :where(.card, .connect-post-card, .breakroom-activity-card),
.dt-connect :where(.dt-card, .breakroom-profile-card, .breakroom-explore-card, .breakroom-ad-card) {
    max-width: 100%;
}
.nurse-connect-layout :where(.card, .connect-post-card, .breakroom-activity-card) :where(h1, h2, h3, h4, h5, h6, p, a),
.dt-connect :where(.dt-card, .breakroom-profile-card, .breakroom-explore-card, .breakroom-ad-card) :where(h1, h2, h3, h4, h5, h6, p, a) {
    overflow-wrap: anywhere;
}
.nurse-connect-layout :where(.card, .connect-post-card, .breakroom-activity-card) :where(img, video, iframe),
.dt-connect :where(.dt-card, .breakroom-profile-card, .breakroom-explore-card, .breakroom-ad-card) :where(img, video, iframe) {
    max-width: 100%;
}
.nurse-connect-layout .card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--connect-text);
    margin: 0 0 12px 0;
}

/* -------------------------------------------------------------------------
   Stats grid
   ------------------------------------------------------------------------- */
.nurse-connect-layout .stats-grid {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.nurse-connect-layout .stat-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    padding: 6px 12px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.nurse-connect-layout .stat-item:hover {
    background: rgba(29, 155, 240, 0.1);
}
.nurse-connect-layout .stat-label {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--connect-text);
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    line-height: 1.25;
}
.nurse-connect-layout .stat-label:hover { color: var(--connect-blue); }
.nurse-connect-layout .stat-value {
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--connect-text-muted);
}
.nurse-connect-layout .list-item-icon {
    width: 1.625rem;
    height: 1.625rem;
    color: var(--connect-text);
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.nurse-connect-layout .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    text-decoration: none;
    border: 1px solid transparent;
    line-height: 1.25;
    box-shadow: none;
}
.nurse-connect-layout .btn:focus-visible {
    outline: 2px solid var(--connect-blue);
    outline-offset: 2px;
    box-shadow: none;
}
.nurse-connect-layout .btn-brand {
    background: var(--connect-accent);
    color: #fff;
    border-color: var(--connect-accent);
    box-shadow: none;
}
.nurse-connect-layout .btn-brand:hover {
    background: var(--connect-accent-hover);
    border-color: var(--connect-accent-hover);
    box-shadow: none;
}
.nurse-connect-layout .btn-outline {
    background: transparent;
    color: var(--connect-accent);
    border-color: var(--connect-border-strong);
    box-shadow: none;
}
.nurse-connect-layout .btn-outline:hover {
    background: transparent;
    border-color: var(--connect-accent);
    box-shadow: none;
}

/* Plain buttons across Breakroom — no glow, soft tint, or drop shadow */
.nurse-connect-layout button,
.nurse-connect-layout .btn,
.nurse-connect-layout .connect-button,
.nurse-connect-layout .suggestion-connect-btn,
.nurse-connect-layout .breakroom-feed-create__cta,
.nurse-connect-layout .breakroom-feed-empty__cta,
.nurse-connect-layout .breakroom-discover-bar__btn,
.nurse-connect-layout .breakroom-post-fab,
.nurse-connect-layout .breakroom-activity-card__cta,
.nurse-connect-layout .breakroom-ad-card__cta,
.dt-connect button,
.dt-connect .btn,
.dt-connect .connect-button,
.dt-connect .breakroom-feed-create__cta,
.dt-connect .breakroom-feed-empty__cta,
.dt-connect .breakroom-discover-bar__btn,
.dt-connect .breakroom-post-fab,
.dt-connect .breakroom-activity-card__cta,
.dt-connect .breakroom-ad-card__cta {
    box-shadow: none !important;
    filter: none;
}
.nurse-connect-layout button:hover,
.nurse-connect-layout button:focus,
.nurse-connect-layout button:active,
.dt-connect button:hover,
.dt-connect button:focus,
.dt-connect button:active {
    box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   Badges & action list
   ------------------------------------------------------------------------- */
.nurse-connect-layout .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.nurse-connect-layout .badge-teal { background: transparent; color: var(--connect-text-muted, #536471); border: 1px solid var(--connect-border, #eff3f4); }
.nurse-connect-layout .badge-slate { background: var(--connect-bg); color: var(--connect-text-soft); }
.nurse-connect-layout .badge-connected { background: transparent; color: var(--connect-text-muted, #536471); border: 1px solid var(--connect-border, #eff3f4); }
.nurse-connect-layout .badge-pending { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
.nurse-connect-layout .badge-default { background: var(--connect-bg); color: var(--connect-text-soft); }

.nurse-connect-layout .action-list { display: flex; flex-direction: column; gap: 0.25rem; }
.nurse-connect-layout .action-button {
    width: 100%;
    justify-content: flex-start;
    gap: 0.75rem;
}

.nurse-connect-layout .card-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--connect-border);
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.85);
    position: sticky;
    top: 0;
    z-index: 10;
}
.nurse-connect-layout .card-header-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--connect-text);
    margin: 0;
}
.nurse-connect-layout .card-body-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* -------------------------------------------------------------------------
   Forms (action modals)
   ------------------------------------------------------------------------- */
.nurse-connect-layout .action-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}
.nurse-connect-layout .action-form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--connect-text-soft);
}
.nurse-connect-layout .action-form-input,
.nurse-connect-layout .action-form-textarea,
.nurse-connect-layout .action-form-select {
    width: 100%;
    border: 1px solid var(--connect-border-strong);
    border-radius: var(--connect-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
}
.nurse-connect-layout .action-form-input:focus,
.nurse-connect-layout .action-form-textarea:focus,
.nurse-connect-layout .action-form-select:focus {
    outline: none;
    border-color: var(--connect-blue);
    box-shadow: var(--connect-focus-ring);
}
.nurse-connect-layout .action-form-textarea { min-height: 6rem; resize: vertical; }
.nurse-connect-layout .action-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}
.nurse-connect-layout .action-form-error {
    font-size: 0.8125rem;
    color: var(--color-danger, #ef4444);
    margin-top: 0.5rem;
}

.nurse-connect-layout .list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--connect-text-soft);
    padding: 0.25rem 0;
    text-decoration: none;
    transition: color 0.2s;
}
.nurse-connect-layout .list-item:hover { color: var(--connect-blue); }

.nurse-connect-layout .discover-toggle {
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--connect-text-soft);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--connect-radius-sm);
    transition: background-color 0.2s;
}
.nurse-connect-layout .discover-toggle:hover { background: var(--connect-bg); }
.nurse-connect-layout .discover-toggle:focus-visible {
    outline: none;
    box-shadow: var(--connect-focus-ring);
}
.nurse-connect-layout .discover-icon { width: var(--icon-sm, 1rem); height: var(--icon-sm, 1rem); }

/* ----- Composer: "What's happening?" (X.com style) ----- */
.nurse-connect-layout .add-post-trigger-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--connect-text-muted);
    font-size: 1.25rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.nurse-connect-layout .add-post-trigger-btn:hover {
    background: transparent;
    color: var(--connect-text);
}
.nurse-connect-layout .add-post-trigger-btn:focus-visible {
    outline: none;
    box-shadow: var(--connect-focus-ring);
}
.nurse-connect-layout .add-post-trigger-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--connect-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.nurse-connect-layout .add-post-trigger-text { flex: 1; }

.nurse-connect-layout .composer-container { display: flex; gap: 0.75rem; }
.nurse-connect-layout .composer-avatar { flex-shrink: 0; }
.nurse-connect-layout .composer-avatar-img,
.nurse-connect-layout .composer-avatar-placeholder {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}
.nurse-connect-layout .composer-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    background: var(--connect-blue);
}
.nurse-connect-layout .composer-content { flex: 1; }
.nurse-connect-layout .composer-textarea {
    width: 100%;
    border: 1px solid var(--connect-border-strong);
    border-radius: var(--connect-radius-sm);
    resize: none;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
}
.nurse-connect-layout .composer-textarea:focus {
    outline: none;
    border-color: var(--connect-blue);
    box-shadow: var(--connect-focus-ring);
}
.nurse-connect-layout .composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
}
.nurse-connect-layout .composer-buttons {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--connect-text-soft);
    align-items: center;
}

/* Post style pills (add post modal) */
.nurse-connect-layout .post-style-row { margin-top: 0.5rem; }
.nurse-connect-layout .post-style-pill {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    border: 1px solid var(--connect-border);
    background: var(--connect-surface);
    color: var(--connect-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.nurse-connect-layout .post-style-pill:hover {
    border-color: var(--connect-border-strong);
    color: var(--connect-text);
}
.nurse-connect-layout .post-style-pill.active {
    border-color: var(--connect-blue);
    background: #eff6ff;
    color: var(--connect-blue);
}

/* Styled post body (16:9, icon) */
.nurse-connect-layout .post-styled-body.post-styled-169 {
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--connect-radius-sm);
}
.nurse-connect-layout .post-styled-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.12;
    color: currentColor;
}
.nurse-connect-layout .post-styled-icon svg {
    width: 35%;
    height: 35%;
    max-width: 100px;
    max-height: 100px;
}
.nurse-connect-layout .post-styled-text {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ----- Feed tabs (X.com-style sticky header) ----- */
.nurse-connect-layout .feed-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    border: none;
    font-size: 0.875rem;
    font-weight: 400;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 53px;
    border-bottom: 1px solid var(--connect-border);
    position: sticky;
    top: 0;
    z-index: 20;
}
.nurse-connect-layout .feed-tab {
    flex: 1 1 auto;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--connect-text-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
}
.nurse-connect-layout .feed-tab:hover {
    color: var(--connect-text);
    background-color: transparent;
}
.nurse-connect-layout .feed-tab:active {
    transform: none;
}
.nurse-connect-layout .feed-tab-active {
    border-bottom-color: var(--connect-blue);
    color: var(--connect-text);
    font-weight: 700;
    background-color: transparent;
}
.nurse-connect-layout .feed-tabs-more { position: relative; z-index: 70; flex: 0 0 auto; }
.nurse-connect-layout .feed-tab-more-trigger {
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    font-weight: 700;
    padding: 16px 16px;
    color: var(--connect-text-muted);
    border-bottom: 4px solid transparent;
    margin-bottom: -1px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nurse-connect-layout .feed-tab-more-trigger:hover {
    color: var(--connect-text);
    background-color: rgba(15, 20, 25, 0.04);
}
.nurse-connect-layout .feed-tab-more-trigger:active {
    transform: none;
}
.nurse-connect-layout .feed-tab-more-trigger.feed-tab-active {
    background-color: transparent;
    color: var(--connect-text);
}
.nurse-connect-layout .feed-tabs-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    min-width: 180px;
    background: var(--connect-surface);
    border: 1px solid var(--connect-border);
    border-radius: var(--connect-radius);
    box-shadow: var(--connect-shadow-lg);
    padding: 4px;
    z-index: 9999;
    display: none;
}
.nurse-connect-layout .feed-tabs-dropdown[aria-hidden="false"] { display: block; }
.nurse-connect-layout .feed-tabs-dropdown-item {
    display: block;
    padding: 10px 12px;
    border-radius: var(--connect-radius-sm);
    color: var(--connect-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}
.nurse-connect-layout .feed-tabs-dropdown-item:hover {
    background: var(--connect-bg);
    color: var(--connect-blue);
}
.nurse-connect-layout .feed-tabs-dropdown-item.feed-tab-active {
    color: var(--connect-blue);
    font-weight: 600;
}

/* ----- Posts feed (X.com-style timeline) ----- */
.nurse-connect-layout .posts-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    min-width: 0;
}
/* Livewire feed root: stack post cards with no gap (X.com uses dividers) */
.nurse-connect-layout .posts-feed #connectFeedLivewire {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.nurse-connect-layout .new-posts-banner {
    position: fixed;
    top: 5.5rem;
    left: 0;
    z-index: 90;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0.35rem 0.75rem;
    overflow: visible;
    background: transparent;
    border: none;
    pointer-events: none;
    animation: connectSlideDown 0.3s ease-out;
}
.nurse-connect-layout .new-posts-banner.is-visible {
    display: flex;
}
.nurse-connect-layout .new-posts-banner[hidden] {
    display: none !important;
}
@keyframes connectSlideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

.nurse-connect-layout .new-posts-button {
    pointer-events: auto;
    background: var(--connect-accent);
    color: white;
    border: none;
    margin-top: 0.45rem;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 8px 20px rgb(15 39 72 / 0.28) !important;
    transition: background-color 0.15s, opacity 0.15s;
}
.nurse-connect-layout .new-posts-button:hover {
    background: var(--connect-accent-hover);
    transform: none;
    box-shadow: 0 8px 20px rgb(15 39 72 / 0.28) !important;
}
.nurse-connect-layout .new-posts-button:active { transform: none; }
.nurse-connect-layout .new-posts-button:focus-visible {
    outline: 2px solid var(--connect-blue);
    outline-offset: 2px;
    box-shadow: none;
}

/* ----- Post cards (X.com-style timeline post) ----- */
/* Soft hairline dividers — bottom only, never boxed sides */
.nurse-connect-layout .connect-post-card {
    background: var(--connect-surface);
    border-radius: 0;
    box-shadow: none;
    border: none !important;
    border-bottom: 1px solid var(--connect-border) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    padding: 12px 16px;
    transition: background-color 0.15s ease;
}
.nurse-connect-layout .connect-post-card:hover {
    background: var(--connect-hover);
    box-shadow: none;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom-color: var(--connect-border) !important;
}

/* ----- Activity cards (For you seasoning) — match post timeline ----- */
.nurse-connect-layout .breakroom-activity-card,
.dt-connect .breakroom-activity-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--connect-surface);
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--connect-border);
    padding: 12px 16px;
    transition: background-color 0.15s ease;
}
.nurse-connect-layout .breakroom-activity-card:hover,
.dt-connect .breakroom-activity-card:hover {
    background: var(--connect-hover);
}
.nurse-connect-layout .breakroom-activity-card__avatar-link,
.dt-connect .breakroom-activity-card__avatar-link {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}
.nurse-connect-layout .breakroom-activity-card__avatar,
.dt-connect .breakroom-activity-card__avatar,
.nurse-connect-layout .breakroom-activity-card__avatar-fallback,
.dt-connect .breakroom-activity-card__avatar-fallback {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--connect-bg);
}
.nurse-connect-layout .breakroom-activity-card__avatar-fallback,
.dt-connect .breakroom-activity-card__avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: var(--connect-accent);
}
.nurse-connect-layout .breakroom-activity-card__avatars,
.dt-connect .breakroom-activity-card__avatars {
    position: relative;
    width: 52px;
    height: 40px;
    flex-shrink: 0;
}
.nurse-connect-layout .breakroom-activity-card__avatar-link--primary,
.dt-connect .breakroom-activity-card__avatar-link--primary {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.nurse-connect-layout .breakroom-activity-card__avatar-link--secondary,
.dt-connect .breakroom-activity-card__avatar-link--secondary {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}
.nurse-connect-layout .breakroom-activity-card__avatar-link--secondary .breakroom-activity-card__avatar,
.dt-connect .breakroom-activity-card__avatar-link--secondary .breakroom-activity-card__avatar {
    width: 28px;
    height: 28px;
    border: 2px solid var(--connect-surface);
}
.nurse-connect-layout .breakroom-activity-card__body,
.dt-connect .breakroom-activity-card__body {
    min-width: 0;
    flex: 1;
}
.nurse-connect-layout .breakroom-activity-card__topline,
.dt-connect .breakroom-activity-card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.nurse-connect-layout .breakroom-activity-card__type,
.dt-connect .breakroom-activity-card__type {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--connect-blue);
}
.nurse-connect-layout .breakroom-activity-card__time,
.dt-connect .breakroom-activity-card__time {
    font-size: 0.75rem;
    color: var(--connect-text-muted);
    white-space: nowrap;
}
.nurse-connect-layout .breakroom-activity-card__title,
.dt-connect .breakroom-activity-card__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--connect-text);
}
.nurse-connect-layout .breakroom-activity-card__title a,
.dt-connect .breakroom-activity-card__title a {
    color: inherit;
    text-decoration: none;
}
.nurse-connect-layout .breakroom-activity-card__title a:hover,
.dt-connect .breakroom-activity-card__title a:hover {
    color: var(--connect-blue);
    text-decoration: underline;
}
.nurse-connect-layout .breakroom-activity-card__meta,
.dt-connect .breakroom-activity-card__meta {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--connect-text-muted);
    line-height: 1.35;
}
.nurse-connect-layout .breakroom-activity-card__meta a,
.dt-connect .breakroom-activity-card__meta a {
    color: var(--connect-text);
    font-weight: 600;
    text-decoration: none;
}
.nurse-connect-layout .breakroom-activity-card__meta a:hover,
.dt-connect .breakroom-activity-card__meta a:hover {
    color: var(--connect-blue);
    text-decoration: underline;
}
.nurse-connect-layout .breakroom-activity-card__actions,
.dt-connect .breakroom-activity-card__actions {
    margin-top: 10px;
}
.nurse-connect-layout .breakroom-activity-card__actions--row,
.dt-connect .breakroom-activity-card__actions--row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.nurse-connect-layout .breakroom-activity-card__actions form,
.dt-connect .breakroom-activity-card__actions form {
    margin: 0;
    display: inline-flex;
}
.nurse-connect-layout .breakroom-activity-card__cta,
.dt-connect .breakroom-activity-card__cta {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 9999px;
    border: none;
    background: var(--connect-blue);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    box-shadow: none;
}
.nurse-connect-layout .breakroom-activity-card__cta:hover,
.dt-connect .breakroom-activity-card__cta:hover {
    background: var(--connect-blue-hover, #1a8cd8);
}
.nurse-connect-layout .breakroom-activity-card__cta--muted,
.dt-connect .breakroom-activity-card__cta--muted {
    color: var(--connect-text-muted);
    background: transparent;
    border: 1px solid var(--connect-border-strong);
}
.nurse-connect-layout .breakroom-activity-card__unavailable,
.dt-connect .breakroom-activity-card__unavailable {
    font-size: 0.75rem;
    color: var(--connect-text-muted);
}

.nurse-connect-layout .posts-feed .breakroom-for-you-seasoning--job .admin-card,
.nurse-connect-layout .posts-feed #connectFeedLivewire .breakroom-for-you-seasoning--job .admin-card,
.nurse-connect-layout .posts-feed .breakroom-for-you-seasoning--store .admin-card,
.nurse-connect-layout .posts-feed #connectFeedLivewire .breakroom-for-you-seasoning--store .admin-card {
    background: var(--connect-surface) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--connect-border) 55%, transparent) !important;
    margin: 0 !important;
}
.nurse-connect-layout .posts-feed .breakroom-for-you-seasoning--suggestion .breakroom-people-row,
.nurse-connect-layout .posts-feed #connectFeedLivewire .breakroom-for-you-seasoning--suggestion .breakroom-people-row {
    border-bottom: 1px solid color-mix(in srgb, var(--connect-border) 55%, transparent);
}

/* Override generic feed flatteners for activity cards */
.nurse-connect-layout .posts-feed .breakroom-activity-card,
.nurse-connect-layout .posts-feed #connectFeedLivewire .breakroom-activity-card,
.nurse-connect-layout .secondary-feed-grid .breakroom-activity-card {
    background: var(--connect-surface) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--connect-border) 55%, transparent) !important;
    padding: 12px 16px !important;
    margin: 0 !important;
}

/* Post header: avatar + author + timestamp */
.nurse-connect-layout .connect-post-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 2px;
}
.nurse-connect-layout .connect-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--connect-bg);
}
.nurse-connect-layout .connect-post-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    background: var(--connect-accent);
    flex-shrink: 0;
}
.nurse-connect-layout .connect-post-author {
    flex: 1;
    min-width: 0;
}
.nurse-connect-layout .connect-post-author-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--connect-text);
    line-height: 20px;
    margin: 0;
    display: inline;
}
.nurse-connect-layout .connect-post-author-name:hover {
    color: var(--connect-text);
    text-decoration: underline;
}
.nurse-connect-layout .connect-post-author-meta {
    font-size: 15px;
    color: var(--connect-text-muted);
    line-height: 20px;
    margin: 0;
    display: inline;
    font-weight: 400;
}
.nurse-connect-layout .connect-post-author-meta a {
    color: inherit;
    text-decoration: none;
}
.nurse-connect-layout .connect-post-author-meta a:hover {
    text-decoration: underline;
}
.nurse-connect-layout .connect-post-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.nurse-connect-layout .connect-post-time {
    font-size: 0.75rem;
    color: var(--connect-text-muted);
    white-space: nowrap;
}
.nurse-connect-layout .connect-post-header-connect-form {
    margin: 0;
    flex-shrink: 0;
}
.nurse-connect-layout .connect-post-header-connect-btn {
    padding: 4px 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 9999px;
    border: 1px solid var(--connect-border-strong, #cfd9de);
    color: var(--connect-text, #0f1419);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    box-shadow: none;
}
.nurse-connect-layout .connect-post-header-connect-btn:hover {
    background: var(--connect-hover, rgba(15, 20, 25, 0.03));
    color: var(--connect-text, #0f1419);
    border-color: var(--connect-text-muted, #536471);
}
.nurse-connect-layout .connect-post-header-follow-btn,
.suggestion-follow-btn {
    padding: 4px 16px;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 9999px;
    border: 1px solid transparent;
    color: #fff;
    background: #0f1419;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.nurse-connect-layout .connect-post-header-follow-btn:hover,
.suggestion-follow-btn:hover {
    background: #272c30;
    border-color: transparent;
}
html[data-theme="dark"] .nurse-connect-layout .connect-post-header-follow-btn:not(.is-following),
html[data-theme="dark"] .suggestion-follow-btn:not(.is-following) {
    background: #eff3f4 !important;
    color: #0f1419 !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .nurse-connect-layout .connect-post-header-follow-btn:not(.is-following):hover,
html[data-theme="dark"] .suggestion-follow-btn:not(.is-following):hover {
    background: #e7e9ea !important;
}
.nurse-connect-layout .connect-post-header-follow-btn.is-following,
.suggestion-follow-btn.is-following,
.breakroom-people-row__btn.follow-toggle.is-following,
.timeline-btn.follow-toggle.is-following {
    background: transparent;
    color: var(--connect-text, #0f1419);
    border-color: var(--connect-border-strong, #cfd9de);
}
html[data-theme="dark"] .nurse-connect-layout .connect-post-header-follow-btn.is-following,
html[data-theme="dark"] .suggestion-follow-btn.is-following,
html[data-theme="dark"] .breakroom-people-row__btn.follow-toggle.is-following,
html[data-theme="dark"] .timeline-btn.follow-toggle.is-following {
    background: transparent !important;
    color: var(--connect-text, #e7e9ea) !important;
    border-color: var(--connect-border-strong, #5b7083) !important;
}
.follow-count {
    font-weight: 650;
    color: inherit;
}
.breakroom-story-card__cta.follow-toggle.is-following,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__cta.follow-toggle.is-following {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.68) !important;
    color: var(--story-ink, #fff) !important;
}
@media (max-width: 480px) {
    .nurse-connect-layout .connect-post-header {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .nurse-connect-layout .connect-post-author {
        min-width: 8.5rem;
    }
    .nurse-connect-layout .connect-post-header-right {
        gap: 4px;
    }
    .nurse-connect-layout .connect-post-header-follow-btn,
    .nurse-connect-layout .connect-post-header-connect-btn,
    .nurse-connect-layout .connect-post-header-connect-badge {
        padding: 3px 10px;
        font-size: 0.75rem;
    }
}
.nurse-connect-layout .connect-post-header-connect-badge {
    padding: 4px 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 9999px;
    white-space: nowrap;
}
.nurse-connect-layout .connect-post-header-connect-connected {
    background: transparent;
    color: var(--connect-text-muted, #536471);
    border: 1px solid var(--connect-border, #eff3f4);
}
.nurse-connect-layout .connect-post-header-connect-pending {
    background: var(--connect-bg);
    color: var(--connect-text-muted);
}

/* Post menu (three dots) - author only */
.nurse-connect-layout .connect-post-menu-wrap { position: relative; flex-shrink: 0; }
.nurse-connect-layout .connect-post-menu-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--connect-text-muted); cursor: pointer; transition: color 0.15s; box-shadow: none; }
.nurse-connect-layout .connect-post-menu-btn:hover { background: transparent; color: var(--connect-blue); }
.nurse-connect-layout .connect-post-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 160px; padding: 4px 0; background: var(--connect-surface); border: 1px solid var(--connect-border); border-radius: 12px; box-shadow: var(--connect-shadow-lg); z-index: 20; display: none; }
.nurse-connect-layout .connect-post-dropdown.connect-post-dropdown-open { display: block; }
.nurse-connect-layout .connect-post-dropdown-item { display: block; width: 100%; padding: 10px 16px; text-align: left; font-size: 0.875rem; font-weight: 700; color: var(--connect-text); background: none; border: none; cursor: pointer; transition: background 0.15s; }
.nurse-connect-layout .connect-post-dropdown-item:hover { background: rgba(247,249,249,0.8); }
.nurse-connect-layout .connect-post-dropdown-delete:hover { color: #f4212e; background: rgba(244,33,46,0.1); }
.nurse-connect-layout .connect-post-delete-confirm { padding: 12px 0; margin: 8px 0 0; background: transparent; border-radius: 0; border: none; }
.nurse-connect-layout .connect-post-delete-confirm-text { margin: 0 0 12px 0; font-size: 0.9375rem; color: var(--connect-text); }
.nurse-connect-layout .connect-post-delete-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.nurse-connect-layout .connect-post-delete-btn { padding: 6px 16px; font-size: 0.875rem; font-weight: 700; border-radius: 9999px; cursor: pointer; border: 1px solid var(--connect-border-strong); background: transparent; color: var(--connect-text); transition: background 0.15s, color 0.15s; }
.nurse-connect-layout .connect-post-delete-no:hover { background: rgba(15,20,25,0.04); }
.nurse-connect-layout .connect-post-delete-yes { background: #f4212e; border-color: #f4212e; color: #fff; }
.nurse-connect-layout .connect-post-delete-yes:hover { background: #d61a26; border-color: #d61a26; color: #fff; }

.nurse-connect-layout .connect-post-avatar-link {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}

/* Post content wrapper */
.nurse-connect-layout .connect-post-content {
    margin-bottom: 0;
    min-width: 0;
}

/* Post body text — X uses ~15px / 20px line-height */
.nurse-connect-layout .connect-post-body,
.nurse-connect-layout .connect-post-content .post-main-body p {
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    color: var(--connect-text);
    margin: 0 0 8px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* NurseMove news / admin alerts — same X post shell as connect-post-card */
.nurse-connect-layout .breakroom-news-card__title {
    display: block;
    font-weight: 700;
    color: var(--connect-text);
}
.nurse-connect-layout .breakroom-news-card__prompt {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--connect-text-muted);
    font-style: italic;
}
/* X-style single media: full-bleed frame, cover-crop, rounded shell */
.nurse-connect-layout .breakroom-news-card__media,
.nurse-connect-layout .connect-post-media {
    position: relative;
    margin: 10px 0 2px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--connect-border) 75%, transparent);
    background: color-mix(in srgb, var(--connect-text) 6%, var(--connect-bg, #f3f6f9));
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: min(420px, 56vh);
    line-height: 0;
}
.nurse-connect-layout .breakroom-news-card__media a,
.nurse-connect-layout .connect-post-media a {
    display: block;
    position: absolute;
    inset: 0;
    line-height: 0;
}
.nurse-connect-layout .breakroom-news-card__media img,
.nurse-connect-layout .connect-post-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 639px) {
    .nurse-connect-layout .breakroom-news-card__media,
    .nurse-connect-layout .connect-post-media {
        border-radius: 12px;
        max-height: min(320px, 48vh);
    }
}
.nurse-connect-layout .breakroom-news-card__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--connect-text-muted);
}
.nurse-connect-layout .breakroom-news-card__source a,
.nurse-connect-layout .breakroom-news-card__read-more {
    color: var(--connect-blue);
    font-weight: 600;
    text-decoration: none;
}
.nurse-connect-layout .breakroom-news-card__source a:hover,
.nurse-connect-layout .breakroom-news-card__read-more:hover {
    text-decoration: underline;
}

/* For You seasoning (jobs / store / events) — same shell as posts */
.nurse-connect-layout .breakroom-seasoning-card .connect-post-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nurse-connect-layout .breakroom-seasoning-card__title {
    color: var(--connect-text);
    font-weight: 700;
    text-decoration: none;
}
.nurse-connect-layout .breakroom-seasoning-card__title:hover {
    text-decoration: underline;
}
.nurse-connect-layout .breakroom-seasoning-card__meta {
    display: block;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--connect-text-muted);
    font-weight: 400;
}
.nurse-connect-layout .breakroom-seasoning-card__meta--pay {
    color: var(--connect-teal, #127d72);
    font-weight: 600;
}
.nurse-connect-layout .breakroom-seasoning-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: var(--connect-text-muted);
}
.nurse-connect-layout .breakroom-seasoning-card__chips span:not(:last-child)::after {
    content: " ·";
    margin-left: 10px;
    color: color-mix(in srgb, var(--connect-text-muted) 70%, transparent);
}
.nurse-connect-layout .breakroom-seasoning-card__cta-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: 10px 0 0;
}
.nurse-connect-layout .breakroom-seasoning-card__cta-row--split {
    justify-content: space-between;
}
.nurse-connect-layout .breakroom-seasoning-card__cta-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.nurse-connect-layout .breakroom-seasoning-card__cta {
    color: var(--connect-blue);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}
.nurse-connect-layout .breakroom-seasoning-card__cta:hover {
    text-decoration: underline;
}
.nurse-connect-layout .breakroom-seasoning-card__price {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--connect-teal, #127d72);
    white-space: nowrap;
}
.nurse-connect-layout .breakroom-seasoning-card .connect-post-avatar-placeholder.breakroom-event-date-tile {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}
.nurse-connect-layout .breakroom-seasoning-card .breakroom-event-attend {
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
}
.nurse-connect-layout .connect-post-topic {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--connect-blue);
    font-weight: 500;
}
.nurse-connect-layout .posts-feed .card-footer,
.nurse-connect-layout .posts-feed #connectFeedLivewire .card-footer {
    border: none !important;
    background: transparent !important;
    padding: 8px 0 0 !important;
    margin: 0 !important;
}

/* Hashtag links inside post body (X.com-style) */
.nurse-connect-layout .post-hashtag,
.post-hashtag {
    color: var(--connect-blue, #1d9bf0);
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
    transition: text-decoration 0.15s;
}
.nurse-connect-layout .post-hashtag:hover,
.post-hashtag:hover {
    text-decoration: underline;
}

/* Post actions bar — every action sits on the card */
.nurse-connect-layout .connect-post-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 2px 4px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: none;
    max-width: none;
    width: 100%;
    margin-left: -8px;
}

@media (max-width: 479px) {
    .nurse-connect-layout .connect-post-actions {
        gap: 2px;
        margin-left: 0;
        max-width: 100%;
    }
    .nurse-connect-layout .connect-post-action-btn {
        min-width: 0;
        padding-inline: 5px;
    }
}

@media (max-width: 767px) {
    .nurse-connect-layout .connect-post-actions {
        max-width: 100%;
        justify-content: flex-start;
    }
}

.nurse-connect-layout .connect-post-bio {
    margin-top: 0.45rem;
}
.nurse-connect-layout .connect-post-bio__toggle {
    list-style: none;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--connect-blue, #1d9bf0);
}
.nurse-connect-layout .connect-post-bio__toggle::-webkit-details-marker { display: none; }
.nurse-connect-layout .connect-post-bio__text {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--connect-text-muted, #536471);
}

.breakroom-link-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%) translateY(12px);
    z-index: 12050;
    padding: 0.65rem 1rem;
    border-radius: 9999px;
    background: #0f1419;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
html[data-theme="dark"] .breakroom-link-toast {
    background: #eff3f4;
    color: #0f1419;
}
.breakroom-link-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (max-width: 767px) {
    .breakroom-link-toast {
        bottom: calc(3.5rem + 1rem + env(safe-area-inset-bottom, 0px));
    }
}

.breakroom-people-strip {
    display: none;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.75rem;
    padding: 0.65rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 1023px) {
    .breakroom-people-strip { display: flex; }
}
.breakroom-people-strip__label {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--connect-text-muted, #536471);
    white-space: nowrap;
}
.breakroom-people-strip__avatars {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-width: 0;
}
.breakroom-people-strip__avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    object-fit: cover;
    border: 2px solid var(--connect-surface, #fff);
    box-shadow: 0 0 0 1px var(--connect-border, #e0ddd6);
}
.breakroom-people-strip__more {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--connect-blue, #1d9bf0);
    text-decoration: none;
    white-space: nowrap;
}
/* Press/feedback animations for action buttons */
@keyframes connect-like-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@keyframes connect-repost-spin {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}
@keyframes connect-button-press {
    0% { transform: scale(1); }
    50% { transform: scale(0.92); }
    100% { transform: scale(1); }
}

.nurse-connect-layout .connect-post-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border: none;
    background: transparent;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 400;
    color: var(--connect-text-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    position: relative;
}
.nurse-connect-layout .connect-post-action-btn:hover {
    background: var(--connect-blue-soft);
    color: var(--connect-blue);
}
.nurse-connect-layout .connect-post-action-btn:active {
    transform: none;
}
.nurse-connect-layout .connect-post-action-btn[title="Comment"]:hover,
.nurse-connect-layout .connect-post-action-btn[title="Share"]:hover {
    background: var(--connect-blue-soft);
    color: var(--connect-blue);
}
.nurse-connect-layout .connect-post-action-btn[title="Repost"]:hover {
    background: var(--connect-repost-soft);
    color: var(--connect-repost);
}
.nurse-connect-layout .connect-post-action-btn[title="Like"]:hover {
    background: var(--connect-like-soft);
    color: var(--connect-like);
}
.nurse-connect-layout .connect-post-action-btn[title="Bookmark"]:hover,
.nurse-connect-layout .connect-post-action-btn[title="Save"]:hover {
    background: var(--connect-blue-soft);
    color: var(--connect-blue);
}


/* ─── Connect icon size safety net ─── */
.nurse-connect-layout svg:not([width]):not([height]):not([class*="w-"]):not([class*="h-"]) {
    width: var(--icon-md, 1.25rem);
    height: var(--icon-md, 1.25rem);
    max-width: 1.5rem;
    max-height: 1.5rem;
    flex-shrink: 0;
}
.nurse-connect-layout .connect-post-action-btn svg,
.nurse-connect-layout .connect-post-actions svg,
.dt-connect .connect-post-action-btn svg,
.dt-connect .connect-post-actions svg {
    width: var(--icon-md, 1.25rem) !important;
    height: var(--icon-md, 1.25rem) !important;
    max-width: 1.25rem !important;
    max-height: 1.25rem !important;
    flex-shrink: 0;
}
.nurse-connect-layout .post-styled-icon svg {
    width: 3rem !important;
    height: 3rem !important;
    max-width: 3rem !important;
    max-height: 3rem !important;
}
.nurse-connect-layout .breakroom-post-fab svg,
.breakroom-post-fab svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
    max-width: 1.5rem !important;
    max-height: 1.5rem !important;
}
.nurse-connect-layout .dt-composer-option svg,
.dt-connect .dt-composer-option svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}
.nurse-connect-layout .breakroom-right-search__icon,
.breakroom-right-search__icon {
    width: 1.125rem !important;
    height: 1.125rem !important;
}
.dt-connection-request-item svg {
    width: var(--icon-sm, 1rem);
    height: var(--icon-sm, 1rem);
    flex-shrink: 0;
}

.nurse-connect-layout .connect-post-action-btn svg {
    width: var(--icon-md, 1.25rem);
    height: var(--icon-md, 1.25rem);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
/* Repost glyph is denser; keep it optically matched to sibling icons */
.nurse-connect-layout .connect-post-action-btn .connect-post-action-icon--repost,
.nurse-connect-layout .repost-wrapper > .connect-post-action-btn > svg {
    width: 1.125rem;
    height: 1.125rem;
}
.nurse-connect-layout .connect-post-action-btn.action-animate-like svg {
    animation: connect-like-pop 0.45s ease;
}
.nurse-connect-layout .connect-post-action-btn.action-animate-repost svg {
    animation: connect-repost-spin 0.5s ease;
}
.nurse-connect-layout .connect-post-action-btn.liked {
    color: var(--connect-like);
}
.nurse-connect-layout .connect-post-action-btn.liked:hover {
    background: var(--connect-like-soft);
    color: var(--connect-like);
}
.nurse-connect-layout .connect-post-action-btn.reposted {
    color: var(--connect-repost);
}
.nurse-connect-layout .connect-post-action-btn.reposted:hover {
    background: var(--connect-repost-soft);
    color: var(--connect-repost);
}
.nurse-connect-layout .connect-post-action-btn.bookmarked {
    color: var(--connect-blue);
}
.nurse-connect-layout .connect-post-action-btn.bookmarked:hover {
    background: var(--connect-blue-soft);
    color: var(--connect-blue);
}
.nurse-connect-layout .connect-post-content .post-main-body {
    margin-bottom: 12px;
}
.nurse-connect-layout .connect-post-content .post-main-body:first-child {
    margin-top: 0;
}

/* Comment section inside post card — hidden by default (X.com style) */
.nurse-connect-layout .connect-post-comments-section {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    background: transparent;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    border-radius: 0;
    display: none;
}
.nurse-connect-layout .connect-post-comments-section[hidden] {
    display: none !important;
}
.nurse-connect-layout .connect-post-comments-section.connect-post-comments-section-open {
    display: block;
    padding-top: 12px;
    margin-top: 8px;
}
.nurse-connect-layout .connect-post-comments-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--connect-text);
    margin: 0 0 12px 0;
}
.nurse-connect-layout .connect-post-comments-count {
    font-weight: 500;
    color: var(--connect-text-muted);
}
.nurse-connect-layout .connect-post-comment-form {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.nurse-connect-layout .connect-post-comment-input {
    flex: 1;
    padding: 10px 16px;
    font-size: 0.9375rem;
    border: 1px solid var(--connect-border-strong);
    border-radius: 9999px;
    background: var(--connect-surface);
    color: var(--connect-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.nurse-connect-layout .connect-post-comment-input::placeholder {
    color: var(--connect-text-muted);
}
.nurse-connect-layout .connect-post-comment-input:focus {
    outline: none;
    border-color: var(--connect-blue);
    box-shadow: 0 0 0 1px var(--connect-blue);
}
/* Dark brand flips to teal; keep card comment/reply fields on a neutral ring. */
[data-theme="dark"] .nurse-connect-layout .connect-post-comment-input:focus,
[data-theme="dark"] .nurse-connect-layout .connect-post-comment-input:focus-visible {
    outline: none !important;
    border-color: color-mix(in srgb, var(--connect-text-muted, #8fa0b3) 42%, var(--connect-border, #2e4a6b)) !important;
    box-shadow: 0 0 0 3px rgb(143 160 179 / 0.18) !important;
}
.nurse-connect-layout .connect-post-comment-submit {
    padding: 8px 20px;
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    background: var(--connect-accent);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.nurse-connect-layout .connect-post-comment-submit:hover {
    background: var(--connect-accent-hover);
}
.nurse-connect-layout .connect-post-comment-submit:active {
    transform: scale(0.97);
}
.nurse-connect-layout .connect-post-comment-login {
    font-size: 0.8125rem;
    color: var(--connect-text-muted);
    padding: 8px 0 14px 0;
}
.nurse-connect-layout .connect-post-comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nurse-connect-layout .connect-post-comment-item {
    padding: 8px 0;
    background: transparent;
    border-radius: 0;
    border: none;
}
.nurse-connect-layout .connect-post-comment-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: baseline;
}
.nurse-connect-layout .connect-post-comment-author {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--connect-blue);
    flex-shrink: 0;
}
.nurse-connect-layout a.connect-post-comment-author {
    text-decoration: none;
}
.nurse-connect-layout a.connect-post-comment-author:hover {
    text-decoration: underline;
}
.nurse-connect-layout .connect-post-comment-text {
    font-size: 0.8125rem;
    color: var(--connect-text);
    line-height: 1.4;
}
.nurse-connect-layout .connect-post-comment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.nurse-connect-layout .connect-post-comment-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--connect-text-muted);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.nurse-connect-layout .connect-post-comment-action:hover {
    color: var(--connect-text);
    background: var(--connect-bg);
}
.nurse-connect-layout .connect-post-comment-action-active {
    color: #e74c3c;
}
.nurse-connect-layout .connect-post-comment-action-dislike-active {
    color: var(--connect-text-muted, #536471);
}
.nurse-connect-layout .connect-post-reply-form {
    margin-top: 8px;
}
.nurse-connect-layout .connect-post-comment-replies {
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid var(--connect-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nurse-connect-layout .connect-post-comment-reply {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: baseline;
    font-size: 0.8125rem;
    padding: 6px 0;
    background: transparent;
    border-radius: 0;
}
.nurse-connect-layout .connect-post-card [id^="comment-form-"] {
    margin-top: 0;
}

/* Pagination and empty state inside feed */
.nurse-connect-layout .posts-feed #connectFeedLivewire > .card,
.nurse-connect-layout .posts-feed #connectFeedLivewire > nav[aria-label="Pagination"] {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--connect-border);
    padding: 1rem 1rem;
}
.nurse-connect-layout .posts-feed #connectFeedLivewire > .card {
    color: var(--connect-text-muted);
    font-size: 0.9375rem;
    text-align: center;
}

/* -------------------------------------------------------------------------
   Tag/category dropdowns, form extras
   ------------------------------------------------------------------------- */
.nurse-connect-layout .tag-dropdown-wrapper,
.nurse-connect-layout .category-dropdown-wrapper { position: relative; }
.nurse-connect-layout .tag-dropdown,
.nurse-connect-layout .category-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.5rem;
    background: var(--connect-surface);
    border: 1px solid var(--connect-border);
    border-radius: var(--connect-radius-sm);
    box-shadow: var(--connect-shadow-md);
    min-width: 250px;
    z-index: 50;
    padding: 0.5rem;
}
.nurse-connect-layout .category-dropdown { min-width: 280px; padding: 0.75rem; }
.nurse-connect-layout .category-select,
.nurse-connect-layout .tag-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--connect-border);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: var(--connect-surface);
    font-family: inherit;
}
.nurse-connect-layout .category-select:focus,
.nurse-connect-layout .tag-input:focus {
    outline: none;
    border-color: var(--connect-blue);
    box-shadow: var(--connect-focus-ring);
}
.nurse-connect-layout .tag-suggestions { max-height: 200px; overflow-y: auto; }
.nurse-connect-layout .tag-suggestion-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: var(--connect-text-soft);
    cursor: pointer;
    transition: background 0.2s;
}
.nurse-connect-layout .tag-suggestion-item:hover { background: var(--connect-bg); }

.nurse-connect-layout .btn-text {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--connect-text-soft);
    font-size: 0.8125rem;
}
.nurse-connect-layout .btn-text:hover { background: var(--connect-bg); }
.nurse-connect-layout .btn-text svg { width: 1rem; height: 1rem; }
.nurse-connect-layout .error-message {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--color-danger, #ef4444);
}

/* -------------------------------------------------------------------------
   Image preview (legacy / if re-enabled)
   ------------------------------------------------------------------------- */
.nurse-connect-layout .image-preview-container { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.nurse-connect-layout .image-preview-wrapper {
    position: relative;
    display: inline-block;
    border-radius: var(--connect-radius-sm);
    overflow: hidden;
    border: 2px solid var(--connect-border);
}
.nurse-connect-layout .image-preview {
    max-width: 100%;
    max-height: 300px;
    display: block;
    border-radius: var(--connect-radius-sm);
}
.nurse-connect-layout .image-remove-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.nurse-connect-layout .image-remove-btn:hover { background: rgba(0, 0, 0, 0.9); }

/* -------------------------------------------------------------------------
   Repost menu
   ------------------------------------------------------------------------- */
.nurse-connect-layout .repost-wrapper { position: relative; }
.nurse-connect-layout .repost-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.5rem;
    background: var(--connect-surface);
    border: 1px solid var(--connect-border);
    border-radius: var(--connect-radius);
    box-shadow: var(--connect-shadow-lg);
    z-index: 50;
    min-width: 180px;
    overflow: hidden;
    animation: connectRepostSlide 0.2s ease-out;
}
@keyframes connectRepostSlide {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.nurse-connect-layout .repost-menu-item {
    width: 100%;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--connect-text-soft);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
    font-family: inherit;
}
.nurse-connect-layout .repost-menu-item:hover { background: var(--connect-bg); }
.nurse-connect-layout .repost-menu-item svg {
    width: var(--icon-md, 1.25rem);
    height: var(--icon-md, 1.25rem);
    flex-shrink: 0;
}

/* Suggested jobs */
.nurse-connect-layout .suggested-jobs-card {
    background: var(--connect-surface);
    border: none;
}
.nurse-connect-layout .suggested-jobs-header { padding: 0.875rem 1rem 0.625rem; }
.nurse-connect-layout .suggested-jobs-header h3 {
    margin: 0;
    color: var(--connect-text);
    font-size: 0.9375rem;
    font-weight: 700;
}
.nurse-connect-layout .suggested-jobs-header p {
    margin: 0.2rem 0 0;
    color: var(--connect-text-muted);
    font-size: 0.75rem;
}
.nurse-connect-layout .suggested-jobs-list { border-top: none; }
.nurse-connect-layout .suggested-job-item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 1rem;
    gap: 0.625rem;
    align-items: start;
    padding: 0.75rem 1rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--connect-border) 45%, transparent);
    transition: background-color 0.15s ease;
}
.nurse-connect-layout .suggested-job-item:hover { background: transparent; }
.nurse-connect-layout .suggested-job-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--connect-blue);
    background: rgba(29, 155, 240, 0.12);
    border-radius: 0.375rem;
}
.nurse-connect-layout .suggested-job-content { min-width: 0; }
.nurse-connect-layout .suggested-job-title,
.nurse-connect-layout .suggested-job-employer,
.nurse-connect-layout .suggested-job-meta,
.nurse-connect-layout .suggested-job-reason { display: block; }
.nurse-connect-layout .suggested-job-title {
    color: var(--connect-text);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
}
.nurse-connect-layout .suggested-job-employer,
.nurse-connect-layout .suggested-job-meta {
    margin-top: 0.15rem;
    color: var(--connect-text-muted);
    font-size: 0.71875rem;
    line-height: 1.35;
}
.nurse-connect-layout .suggested-job-reason {
    margin-top: 0.35rem;
    color: var(--connect-blue);
    font-size: 0.6875rem;
    font-weight: 600;
}
.nurse-connect-layout .suggested-job-arrow {
    margin-top: 0.4rem;
    color: var(--connect-text-muted);
}
.nurse-connect-layout .suggested-jobs-more {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--connect-blue);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.nurse-connect-layout .suggested-jobs-more:hover { background: transparent; }
.nurse-connect-layout .suggested-jobs-empty {
    padding: 1rem;
    color: var(--connect-text-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
    border-top: 1px solid var(--connect-border);
    border-bottom: 1px solid var(--connect-border);
}

/* -------------------------------------------------------------------------
   Quote modal
   ------------------------------------------------------------------------- */
.nurse-connect-layout .quote-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.nurse-connect-layout .quote-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
}
.nurse-connect-layout .quote-modal-content {
    position: relative;
    background: var(--connect-surface);
    border-radius: 16px;
    width: 90%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--connect-shadow-lg);
    border: 1px solid var(--connect-border);
    animation: connectModalIn 0.25s ease-out;
}
@keyframes connectModalIn {
    from { opacity: 0; transform: scale(0.98) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.nurse-connect-layout .quote-modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--connect-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nurse-connect-layout .quote-modal-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--connect-text);
    margin: 0;
}
.nurse-connect-layout .quote-modal-close {
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--connect-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}
.nurse-connect-layout .quote-modal-close:hover {
    background: var(--connect-bg);
    color: var(--connect-text);
}
.nurse-connect-layout .quote-modal-body { padding: 1.5rem; }
.nurse-connect-layout .quote-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--connect-border-strong);
    border-radius: 12px;
    font-size: 1rem;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}
.nurse-connect-layout .quote-textarea:focus {
    outline: none;
    border-color: var(--connect-blue);
    box-shadow: var(--connect-focus-ring);
}
.nurse-connect-layout .quoted-post-preview {
    border: 1px solid var(--connect-border);
    border-radius: var(--connect-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--connect-bg);
}
.nurse-connect-layout .quote-modal-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

/* -------------------------------------------------------------------------
   Action modals (Create group, Create event, Create newsletter)
   May be outside .nurse-connect-layout in DOM, so base rules apply to .action-modal directly.
   ------------------------------------------------------------------------- */
.action-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 12000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-family: inherit;
}
.action-modal[style*="display: flex"] {
    display: flex !important;
}
.nurse-connect-layout .action-modal {
    display: none;
}
.nurse-connect-layout .action-modal[style*="display: flex"] {
    display: flex !important;
}
.action-modal-overlay,
.nurse-connect-layout .action-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.action-modal-content,
.nurse-connect-layout .action-modal-content {
    position: relative;
    background: var(--connect-surface);
    border-radius: 16px;
    box-shadow: var(--connect-shadow-lg);
    border: 1px solid var(--connect-border);
    width: min(520px, calc(100% - 2rem));
    max-height: calc(100vh - 2rem);
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.action-modal-header,
.nurse-connect-layout .action-modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--connect-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
}
.action-modal-header h3,
.nurse-connect-layout .action-modal-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--connect-text);
    margin: 0;
}
.action-modal-close,
.nurse-connect-layout .action-modal-close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--connect-text-muted);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 0.25rem;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-modal-close:hover,
.nurse-connect-layout .action-modal-close:hover {
    background: var(--connect-bg);
    color: var(--connect-text);
}
.action-modal-body,
.nurse-connect-layout .action-modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.action-modal-body .action-form-field,
.nurse-connect-layout .action-modal-body .action-form-field {
    margin-bottom: 1rem;
}
.action-modal-body .action-form-field:last-of-type,
.nurse-connect-layout .action-modal-body .action-form-field:last-of-type {
    margin-bottom: 0;
}
.action-modal-body .action-form-label,
.nurse-connect-layout .action-modal-body .action-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--connect-text);
    margin-bottom: 0.375rem;
}
.action-modal-body .action-form-input,
.action-modal-body .action-form-textarea,
.action-modal-body .action-form-select,
.nurse-connect-layout .action-modal-body .action-form-input,
.nurse-connect-layout .action-modal-body .action-form-textarea,
.nurse-connect-layout .action-modal-body .action-form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    border: 1px solid var(--connect-border-strong);
    border-radius: 12px;
    background: var(--connect-surface);
    color: var(--connect-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.action-modal-body .action-form-input:focus,
.action-modal-body .action-form-textarea:focus,
.action-modal-body .action-form-select:focus,
.nurse-connect-layout .action-modal-body .action-form-input:focus,
.nurse-connect-layout .action-modal-body .action-form-textarea:focus,
.nurse-connect-layout .action-modal-body .action-form-select:focus {
    outline: none;
    border-color: var(--connect-blue);
    box-shadow: var(--connect-focus-ring);
}
.action-modal-body .action-form-textarea,
.nurse-connect-layout .action-modal-body .action-form-textarea {
    min-height: 4rem;
    resize: vertical;
}
.action-modal-body .action-form-actions,
.nurse-connect-layout .action-modal-body .action-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--connect-border);
}
.action-modal-body .action-form-error,
.nurse-connect-layout .action-modal-body .action-form-error {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-danger, #ef4444);
}
.action-modal-body .btn,
.nurse-connect-layout .action-modal-body .btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    box-shadow: none;
}
.action-modal-body .btn-outline,
.nurse-connect-layout .action-modal-body .btn-outline {
    background: transparent;
    border: 1px solid var(--connect-border-strong);
    color: var(--connect-text);
    box-shadow: none;
}
.action-modal-body .btn-outline:hover,
.nurse-connect-layout .action-modal-body .btn-outline:hover {
    background: transparent;
    border-color: var(--connect-text);
}
.action-modal-body .btn-brand,
.nurse-connect-layout .action-modal-body .btn-brand {
    background: var(--connect-accent);
    color: #fff;
    border: 1px solid var(--connect-accent);
    box-shadow: none;
}
.action-modal-body .btn-brand:hover,
.nurse-connect-layout .action-modal-body .btn-brand:hover {
    background: var(--connect-accent-hover);
    border-color: var(--connect-accent-hover);
}

/* -------------------------------------------------------------------------
   Suggestions & filters
   ------------------------------------------------------------------------- */
/* ----- Right sidebar: Who to follow (X.com-style) ----- */
.nurse-connect-layout .suggestions-list {
    display: flex;
    flex-direction: column;
    max-height: none;
    overflow-y: visible;
}
.nurse-connect-layout .suggestion-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--connect-border) 45%, transparent);
    transition: background 0.15s;
}
.nurse-connect-layout .suggestion-item:hover { background: transparent; }
.nurse-connect-layout .suggestion-item:last-of-type { border-bottom: none; }
.nurse-connect-layout .suggestion-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-left: 52px;
}
.nurse-connect-layout .suggestion-actions .ajax-connection-form {
    margin: 0;
    flex-shrink: 0;
}
.nurse-connect-layout .suggestion-actions .suggestion-follow-btn,
.nurse-connect-layout .suggestion-actions .suggestion-connect-btn,
.nurse-connect-layout .suggestion-actions .connect-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 14px;
    font-size: 0.78125rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
}
.nurse-connect-layout .suggestion-avatar-wrap,
.nurse-connect-layout .suggestion-item .presence-avatar-wrap {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    position: relative;
    overflow: visible;
    z-index: 1;
}
.nurse-connect-layout .suggestion-avatar-link {
    flex-shrink: 0;
    line-height: 0;
    display: block;
}
.nurse-connect-layout .suggestion-item .presence-indicator,
.breakroom-people-row .presence-indicator {
    right: 1px;
    bottom: 1px;
    z-index: 2;
}
.nurse-connect-layout .suggestion-connect-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 9999px;
    border: 1px solid var(--connect-blue);
    background: var(--connect-surface);
    color: var(--connect-blue);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nurse-connect-layout .suggestion-connect-btn:hover {
    background: var(--connect-blue);
    color: #fff;
}
.nurse-connect-layout .suggestion-connect-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: -1px;
}
.nurse-connect-layout .suggestion-more {
    padding: 12px 16px;
    border-top: 1px solid var(--connect-border);
    text-align: center;
}
.nurse-connect-layout .suggestion-more a {
    color: var(--connect-blue);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}
.nurse-connect-layout .suggestion-more a:hover { text-decoration: underline; }
.nurse-connect-layout .suggestion-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--connect-text-muted);
    font-size: 0.875rem;
}
.nurse-connect-layout .suggestion-empty p { margin: 0; }
.nurse-connect-layout .suggestion-profile,
.nurse-connect-layout .suggestion-profile-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.nurse-connect-layout .suggestion-profile-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    min-width: 0;
}
.nurse-connect-layout .suggestion-avatar,
.nurse-connect-layout .suggestion-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.nurse-connect-layout .suggestion-avatar-placeholder {
    background: var(--connect-accent);
    color: white;
    font-size: 0.9375rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nurse-connect-layout .suggestion-info {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
}
.nurse-connect-layout .suggestion-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--connect-text);
    text-decoration: none;
    margin: 0 0 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nurse-connect-layout .suggestion-name:hover {
    text-decoration: underline;
}
.nurse-connect-layout .suggestion-specialty,
.nurse-connect-layout .suggestion-location {
    font-size: 0.75rem;
    color: var(--connect-text-muted);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nurse-connect-layout .suggestion-meta {
    margin-top: 6px;
}
.nurse-connect-layout .suggestion-item .connect-button {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 700;
    min-width: auto;
    border-radius: 9999px;
    background: var(--connect-surface);
    color: var(--connect-blue);
    border: 1px solid var(--connect-blue);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nurse-connect-layout .suggestion-item .connect-button:hover {
    background: var(--connect-blue);
    color: #fff;
}
.nurse-connect-layout .suggestion-item .connect-button:disabled {
    background: transparent;
    color: var(--connect-text-muted);
    border-color: var(--connect-border-strong);
}
.nurse-connect-layout .suggestion-item .connect-button:active,
.connect-button:active {
    transform: scale(0.96);
    box-shadow: none;
}
/* Connect button (connection request) - nice press animation anywhere */
.connect-button {
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.nurse-connect-layout .suggestion-bio {
    font-size: 0.75rem;
    color: var(--connect-text-muted);
    margin: 4px 0 0 0;
    line-height: 1.35;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nurse-connect-layout .empty-state {
    padding: 1.5rem 1rem;
    font-size: 0.875rem;
    color: var(--connect-text-soft);
    text-align: center;
}

.nurse-connect-layout .filter-card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    padding: 0;
}
.nurse-connect-layout .filter-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8125rem;
}
.nurse-connect-layout .filter-field { display: flex; flex-direction: column; }
.nurse-connect-layout .filter-label {
    color: var(--connect-text-soft);
    display: block;
    margin-bottom: 0.25rem;
}
.nurse-connect-layout .filter-select {
    width: 100%;
    border-radius: 0.25rem;
    border: 1px solid var(--connect-border-strong);
    padding: 0.5rem;
    font-size: 0.875rem;
    font-family: inherit;
}
.nurse-connect-layout .filter-checkbox-label { font-size: 0.75rem; }

/* -------------------------------------------------------------------------
   Utilities & global connect (e.g. add-post modal which may be outside .nurse-connect-layout)
   ------------------------------------------------------------------------- */
/* Ensure --cura-blue/teal still work where referenced in JS or partials */
.nurse-connect-layout,
.nurse-connect-container {
    --cura-blue: var(--connect-blue);
    --cura-teal: var(--connect-teal);
}

/* Loading spinner (used in connect) */
@keyframes connectSpin {
    to { transform: rotate(360deg); }
}
.nurse-connect-layout .loading-indicator .spinner,
.nurse-connect-layout [id="loading-indicator"] [style*="animation"] {
    animation: connectSpin 0.8s linear infinite;
}

/* Connection toast & mutual popover (global-ish, often inside connect) */
#connection-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
}
.connection-toast {
    background: var(--connect-surface);
    border: 1px solid var(--connect-border);
    padding: 0.75rem 1rem;
    border-radius: var(--connect-radius-sm);
    box-shadow: var(--connect-shadow-md);
    max-width: 20rem;
    font-size: 0.875rem;
    color: var(--connect-text);
    margin-bottom: 0.5rem;
}
.connection-toast-countdown {
    font-size: 0.75rem;
    color: var(--connect-text-muted);
    margin-top: 0.25rem;
}

#mutual-popover {
    position: absolute;
    z-index: 12000;
    background: var(--connect-surface);
    border: 1px solid var(--connect-border);
    border-radius: var(--connect-radius-sm);
    box-shadow: var(--connect-shadow-md);
    padding: 0.5rem;
    min-width: 12rem;
}
#mutual-popover .mutual-item {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0.5rem;
}
#mutual-popover .mutual-item img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
#mutual-popover .mutual-empty {
    color: var(--connect-text-muted);
    font-size: 0.875rem;
    padding: 0.5rem;
}
#mutual-popover .mutual-close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    border: none;
    background: transparent;
    color: var(--connect-text-muted);
    cursor: pointer;
}

/* Secondary feed grid — X.com style: single column, divider lines */
.secondary-feed-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Margin helper for main feed cards */
.nurse-connect-layout .mb-4 { margin-bottom: 1rem; }

/* Flatten all feed items (admin-card, activity, etc.) to X.com divider style */
.nurse-connect-layout .posts-feed .admin-card,
.nurse-connect-layout .posts-feed #connectFeedLivewire .admin-card,
.nurse-connect-layout .posts-feed article.admin-card,
.nurse-connect-layout .posts-feed article[class*="bg-white rounded"],
.nurse-connect-layout .secondary-feed-grid .admin-card,
.nurse-connect-layout .secondary-feed-grid article:not(.breakroom-people-row) {
    background: var(--connect-surface) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--connect-border) 55%, transparent) !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    transition: background-color 0.15s ease !important;
    transform: none !important;
}
.nurse-connect-layout .posts-feed .admin-card:hover,
.nurse-connect-layout .posts-feed #connectFeedLivewire .admin-card:hover,
.nurse-connect-layout .posts-feed article.admin-card:hover,
.nurse-connect-layout .posts-feed article[class*="bg-white rounded"]:hover,
.nurse-connect-layout .secondary-feed-grid .admin-card:hover,
.nurse-connect-layout .secondary-feed-grid article:not(.breakroom-people-row):hover {
    background: var(--connect-surface) !important;
    box-shadow: none !important;
    transform: none !important;
    border-color: var(--connect-border) !important;
}
/* Flatten card-header inside feed items */
.nurse-connect-layout .posts-feed .card-header,
.nurse-connect-layout .posts-feed #connectFeedLivewire .card-header,
.nurse-connect-layout .secondary-feed-grid .card-header {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
/* Flatten card-body inside feed items */
.nurse-connect-layout .posts-feed .card-body,
.nurse-connect-layout .posts-feed #connectFeedLivewire .card-body,
.nurse-connect-layout .secondary-feed-grid .card-body {
    padding: 0 !important;
}

/* Main feed: clearer hierarchy */
.nurse-connect-layout .connect-main-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.nurse-connect-layout .connect-composer-card {
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--connect-border);
    background: transparent;
    padding: 0;
}
.nurse-connect-layout .connect-composer-card .add-post-trigger-btn {
    border-radius: 0;
}

/* ========================================================================
   X.com-style layout (dt-*) – used on main Connect
   ======================================================================== */
.nurse-connect-layout.dt-connect {
    padding-top: 0;
    background: var(--connect-bg);
    --breakroom-nav-offset: 53px;
    --breakroom-rail-pad: 0.75rem;
    --breakroom-bottom-nav: 0px;
}
.dt-connect .dt-container {
    width: 100%;
    max-width: 1290px;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}
.dt-connect .dt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
    min-width: 0;
}
.dt-connect .dt-grid > * {
    min-width: 0;
}
/* Left rail is desktop-only */
.dt-connect .dt-left {
    display: none;
}
@media (min-width: 768px) {
    .dt-connect .dt-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .dt-connect .dt-grid {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 1rem;
    }
    .dt-connect .dt-right {
        grid-column: 1 / -1;
    }
}
/* Mobile + tablet: center column scrolls; Start a post sticks at top (same as desktop) */
@media (max-width: 1023px) {
    /* Keep desktop navigation out of the mobile feed entirely. */
    .dt-connect .dt-left {
        display: none !important;
    }
    .dt-connect {
        --breakroom-mobile-gutter: 0.75rem;
    }
    .dt-connect .dt-container {
        padding-left: 0;
        padding-right: 0;
    }
    .dt-connect .dt-center {
        height: calc(100dvh - var(--breakroom-bottom-nav, 0px));
        max-height: calc(100dvh - var(--breakroom-bottom-nav, 0px));
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding-top: 0;
        padding-bottom: 1rem;
        min-height: 0;
    }
    .dt-connect .breakroom-feed-header.nm-hero-shell,
    .dt-connect .breakroom-feed-header {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .dt-connect .dt-center-inner,
    .dt-connect .breakroom-search-filters,
    .dt-connect .new-posts-banner,
    .dt-connect .breakroom-requests-panel,
    .dt-connect .dt-right .breakroom-right-stack {
        padding-left: var(--breakroom-mobile-gutter);
        padding-right: var(--breakroom-mobile-gutter);
    }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .dt-connect {
        --breakroom-mobile-gutter: 1.25rem;
    }
}
@media (max-width: 767px) {
    .dt-connect .dt-center {
        height: 100dvh;
        max-height: 100dvh;
    }
    .dt-connect .dt-container {
        padding-bottom: 0;
    }
    .dt-connect .dt-right {
        padding-bottom: calc(3.5rem + 1rem);
    }
}
@media (min-width: 1024px) {
    .dt-connect .dt-grid {
        grid-template-columns: 260px minmax(0, 600px) 320px;
        column-gap: 1.25rem;
        justify-content: center;
    }
    .dt-connect .dt-left {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        position: sticky;
        top: var(--breakroom-nav-offset, 53px);
        margin-top: var(--breakroom-nav-offset, 53px);
        height: calc(100dvh - var(--breakroom-nav-offset, 53px) - var(--breakroom-bottom-nav, 0px));
        max-height: calc(100dvh - var(--breakroom-nav-offset, 53px) - var(--breakroom-bottom-nav, 0px));
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding-right: 0;
        padding-top: var(--breakroom-rail-pad, 0.75rem);
        padding-bottom: 1.5rem;
    }
    .dt-connect .dt-center {
        grid-column: 2;
        border-left: none;
        border-right: none;
        min-height: 0;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding-top: 0;
        padding-bottom: 2rem;
    }
    .dt-connect .dt-right {
        grid-column: 3;
        grid-row: 1;
        position: sticky;
        top: var(--breakroom-nav-offset, 53px);
        margin-top: var(--breakroom-nav-offset, 53px);
        height: calc(100dvh - var(--breakroom-nav-offset, 53px) - var(--breakroom-bottom-nav, 0px));
        max-height: calc(100dvh - var(--breakroom-nav-offset, 53px) - var(--breakroom-bottom-nav, 0px));
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding-left: 0;
        padding-top: var(--breakroom-rail-pad, 0.75rem);
        padding-bottom: 1.5rem;
        max-width: none;
    }
    .dt-connect .dt-left > *,
    .dt-connect .breakroom-left-rail > .dt-card,
    .dt-connect .dt-right > *,
    .dt-connect .breakroom-right-stack > * {
        flex-shrink: 0;
        min-height: min-content;
        position: relative;
        z-index: 0;
    }
}
.dt-connect .dt-card {
    background: var(--connect-surface);
    border-radius: 16px;
    box-shadow: none;
    border: none;
    overflow: hidden;
    margin-bottom: 0;
}
.dt-connect .dt-profile-card .dt-profile-banner { display: block; }
.dt-connect .dt-profile-card .dt-profile-body {
    padding: 0 16px 12px;
    margin-top: 0;
}
.dt-connect .dt-profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--connect-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 8px;
    box-shadow: none;
}
.dt-connect .dt-profile-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--connect-text);
    margin: 0 0 2px 0;
}
.dt-connect .dt-profile-headline {
    font-size: 0.8125rem;
    color: var(--connect-text-muted);
    margin: 0 0 4px 0;
}
.dt-connect .dt-profile-links {
    border-top: none;
    padding: 8px 0 0;
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    font-size: 0.875rem;
}
.dt-connect .dt-profile-links a {
    color: var(--connect-blue);
    font-weight: 700;
    text-decoration: none;
}
.dt-connect .dt-profile-links a:hover {
    text-decoration: underline;
}
.dt-connect .dt-profile-links a:last-child {
    color: var(--connect-text-muted);
    font-weight: 400;
}
.dt-connect .dt-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--connect-text);
    margin: 0 0 8px 0;
    padding: 12px 16px 0;
}
.dt-connect .dt-list {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dt-connect .dt-list-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--connect-text);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    overflow: hidden;
    white-space: nowrap;
}
.dt-connect .dt-list-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dt-connect .dt-list-item:hover {
    background: rgba(15, 39, 72, 0.08);
    color: var(--connect-blue);
}
.dt-connect .dt-list-item span:last-child {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--connect-text-muted);
}

/* ----- Left rail polish ----- */
.dt-connect .breakroom-left-rail {
    gap: 0.875rem;
}
/* Profile identity card is desktop-only. */
.dt-connect .breakroom-profile-card {
    display: none;
    overflow: visible;
    border-radius: 12px;
}
@media (min-width: 1024px) {
    .dt-connect .breakroom-profile-card {
        display: block;
    }
}
.dt-connect .breakroom-profile-card__body {
    padding: 16px 16px 14px;
    text-align: center;
}
.dt-connect .breakroom-profile-card__avatar-link {
    display: inline-block;
    margin: 0 auto 8px;
    line-height: 0;
    border-radius: 50%;
}
.dt-connect .breakroom-profile-card .presence-avatar-wrap {
    display: inline-block;
    margin: 0 auto 8px;
}
.dt-connect .breakroom-profile-card__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid var(--connect-surface, #fff);
    background: var(--connect-bg);
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.12);
}
.dt-connect .breakroom-profile-card__name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--connect-text);
    text-decoration: none;
    margin: 0 0 2px;
    line-height: 1.25;
}
.dt-connect .breakroom-profile-card__name:hover {
    color: var(--connect-blue);
}
.dt-connect .breakroom-profile-card__specialty {
    margin: 0 0 2px;
    font-size: 0.8125rem;
    color: var(--connect-text);
    font-weight: 500;
}
.dt-connect .breakroom-profile-card__location {
    margin: 0 0 12px;
    font-size: 0.75rem;
    color: var(--connect-text-muted);
}
.dt-connect .breakroom-profile-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.25rem;
    padding: 10px 0;
    border-top: 1px solid var(--connect-border);
    border-bottom: 1px solid var(--connect-border);
}
.dt-connect .breakroom-profile-card__stat {
    text-decoration: none;
    text-align: center;
    padding: 0.35rem 0.1rem;
    border-radius: 10px;
    min-width: 0;
    transition: background-color 0.15s ease;
}
.dt-connect .breakroom-profile-card__stat:hover {
    background: rgba(15, 39, 72, 0.08);
}
.dt-connect .breakroom-profile-card__stat-value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--connect-text);
    line-height: 1.2;
}
.dt-connect .breakroom-profile-card__stat-label {
    display: block;
    font-size: 0.6875rem;
    color: var(--connect-text-muted);
    margin-top: 2px;
    white-space: nowrap;
}
.dt-connect .breakroom-profile-card__stat--alert .breakroom-profile-card__stat-value {
    color: var(--connect-blue);
}
.dt-connect .breakroom-profile-card__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-top: 10px;
}
.dt-connect .breakroom-profile-card__link {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--connect-blue);
    text-decoration: none;
}
.dt-connect .breakroom-profile-card__link:hover {
    text-decoration: underline;
}
.dt-connect .breakroom-profile-card__link--muted {
    color: var(--connect-text-muted);
    font-weight: 600;
}
/* In-feed create prompts for Breakroom / Events / Newsletters */
.dt-connect .breakroom-feed-create {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin: 0 0 0.5rem;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 14px;
    background: var(--connect-surface, #fff);
}
.dt-connect .breakroom-feed-create__copy {
    min-width: 0;
    flex: 1 1 14rem;
}
.dt-connect .breakroom-feed-create__title {
    margin: 0;
    font-size: 0.975rem;
    font-weight: 750;
    color: var(--connect-text);
}
.dt-connect .breakroom-feed-create__hint {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--connect-text-muted);
}
.dt-connect .breakroom-feed-create__cta {
    flex-shrink: 0;
    appearance: none;
    border: 0;
    border-radius: 9999px;
    padding: 0.55rem 1rem;
    background: var(--connect-blue);
    color: #fff;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
}
.dt-connect .breakroom-feed-create__cta:hover {
    background: var(--connect-blue-hover, #1a8cd8);
    box-shadow: none;
}
[data-theme="dark"] .dt-connect .breakroom-feed-create {
    background: var(--connect-surface, #151c24);
    border: none;
}

/* Explore card is desktop-only (same as profile card). */
.dt-connect .breakroom-explore-card {
    display: none;
}
@media (min-width: 1024px) {
    .dt-connect .breakroom-explore-card {
        display: block;
    }
}
.dt-connect .breakroom-explore-card__title {
    margin: 0;
    padding: 12px 16px 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--connect-text-muted);
}
.dt-connect .breakroom-explore-card__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px 10px;
}
.dt-connect .breakroom-explore-card__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--connect-text);
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dt-connect .breakroom-explore-card__link:hover {
    background: rgba(15, 39, 72, 0.08);
    color: var(--connect-blue);
}
.dt-connect .breakroom-explore-card__count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--connect-blue);
    background: rgba(15, 39, 72, 0.1);
    border-radius: 9999px;
    padding: 0.15rem 0.55rem;
    min-width: 1.5rem;
    text-align: center;
}

/* Left rail sponsored ad slot */
/* Sponsored ad card is desktop-only (same as profile / explore). */
.dt-connect .breakroom-ad-card {
    display: none;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .dt-connect .breakroom-ad-card {
        display: block;
    }
}
.dt-connect .breakroom-ad-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem 0.15rem;
}
.dt-connect .breakroom-ad-card__badge {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--connect-text-muted);
}
.dt-connect .breakroom-ad-card__label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--connect-text-muted);
    border: 1px solid var(--connect-border);
    border-radius: 9999px;
    padding: 0.1rem 0.45rem;
}
.dt-connect .breakroom-ad-card__body {
    display: block;
    padding: 0.45rem 0.9rem 0.95rem;
    text-decoration: none;
    color: inherit;
    border-radius: 0 0 16px 16px;
    transition: background-color 0.15s ease;
}
.dt-connect .breakroom-ad-card__body:hover {
    background: rgba(15, 39, 72, 0.06);
}
.dt-connect .breakroom-ad-card__kicker {
    margin: 0 0 0.3rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--connect-teal, #127d72);
}
.dt-connect .breakroom-ad-card__title {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--connect-text);
}
.dt-connect .breakroom-ad-card__meta {
    margin: 0 0 0.55rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--connect-text-muted);
}
.dt-connect .breakroom-ad-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
}
.dt-connect .breakroom-ad-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: rgba(15, 39, 72, 0.1);
    color: var(--connect-blue);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: capitalize;
}
.dt-connect .breakroom-ad-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    background: var(--connect-blue);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}
.dt-connect .breakroom-ad-card__body:hover .breakroom-ad-card__cta {
    background: var(--connect-blue-hover);
}
[data-theme="dark"] .dt-connect .breakroom-ad-card__body:hover {
    background: rgba(15, 39, 72, 0.12);
}

.dt-connect .breakroom-store-card {
    display: none;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .dt-connect .breakroom-store-card {
        display: block;
    }
}
.dt-connect .breakroom-store-card__header {
    padding: 0.75rem 0.9rem 0.35rem;
}
.dt-connect .breakroom-store-card__header h3 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--connect-text);
}
.dt-connect .breakroom-store-card__header p {
    margin: 0.15rem 0 0;
    font-size: 0.6875rem;
    color: var(--connect-text-muted);
}
.dt-connect .breakroom-store-card__item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
    padding: 0.55rem 0.9rem;
    text-decoration: none;
    color: inherit;
    border-top: 1px solid color-mix(in srgb, var(--connect-border) 50%, transparent);
}
.dt-connect .breakroom-store-card__item:hover {
    background: rgba(15, 39, 72, 0.05);
}
.dt-connect .breakroom-store-card__thumb {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.45rem;
    object-fit: cover;
    background: var(--connect-bg, #f4f7f8);
}
.dt-connect .breakroom-store-card__thumb--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--connect-blue);
    background: rgba(15, 39, 72, 0.08);
}
.dt-connect .breakroom-store-card__copy {
    min-width: 0;
}
.dt-connect .breakroom-store-card__kicker {
    display: block;
    margin: 0 0 0.12rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--connect-teal, #127d72);
}
.dt-connect .breakroom-store-card__item--job .breakroom-store-card__kicker {
    color: var(--connect-blue);
}
.dt-connect .breakroom-store-card__name,
.dt-connect .breakroom-store-card__meta {
    display: block;
}
.dt-connect .breakroom-store-card__name {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--connect-text);
}
.dt-connect .breakroom-store-card__meta {
    margin-top: 0.15rem;
    font-size: 0.6875rem;
    color: var(--connect-text-muted);
}
.dt-connect .breakroom-store-card__more {
    display: block;
    padding: 0.65rem 0.9rem 0.8rem;
    border-top: 1px solid color-mix(in srgb, var(--connect-border) 50%, transparent);
    color: var(--connect-blue);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.dt-connect .breakroom-store-card__more:hover {
    background: var(--connect-hover, rgba(15, 20, 25, 0.03));
}

.dt-connect .dt-composer-card {
    --breakroom-sticky-lift: 0.75rem;
    position: sticky;
    top: calc(-1 * var(--breakroom-sticky-lift));
    z-index: 60;
    padding: var(--breakroom-sticky-lift) 0 0.35rem;
    margin: 0;
    background: var(--connect-bg, #ffffff);
    border-bottom: none;
    box-shadow: none;
    isolation: isolate;
}
.dt-connect .dt-composer-card.breakroom-feed-header {
    --breakroom-sticky-lift: 0;
    top: 0;
    padding: 0;
    background: var(--connect-bg, #fff);
    overflow: hidden;
}
.dt-connect .dt-composer-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--breakroom-sticky-lift));
    height: var(--breakroom-sticky-lift);
    background: var(--connect-bg, #ffffff);
    pointer-events: none;
}
.dt-connect .dt-composer-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 12px;
    background: var(--connect-bg, #ffffff);
    pointer-events: none;
}
.dt-connect .dt-composer-card.breakroom-feed-header::before,
.dt-connect .dt-composer-card.breakroom-feed-header::after {
    content: none;
}
/* Mobile/tablet share the desktop sticky model (pin to top of center scrollport) */
@media (max-width: 1023px) {
    .dt-connect .dt-composer-card {
        --breakroom-sticky-lift: 0.5rem;
        top: calc(-1 * var(--breakroom-sticky-lift));
    }
}
.dt-connect .dt-composer-inner {
    background: var(--connect-surface, #fff);
    border: none;
    border-radius: 14px;
    padding: 12px 16px;
    margin: 0 0 0.5rem;
    transition: none;
    box-shadow: none;
}
.dt-connect .dt-composer-inner:hover {
    border-color: transparent;
    box-shadow: none;
}
.dt-connect .dt-composer-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--connect-text-muted);
    font-size: 0.875rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: color 0.15s;
    box-shadow: none;
}
.dt-connect .dt-composer-trigger:hover {
    border-color: transparent;
    background: transparent;
    color: var(--connect-text);
    box-shadow: none;
}
.dt-connect .dt-composer-trigger:focus-visible {
    outline: 2px solid var(--connect-blue);
    outline-offset: 2px;
}
.dt-connect .dt-composer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--connect-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    flex-shrink: 0;
    border: none;
    box-shadow: none;
}
.dt-connect .dt-composer-trigger span.dt-composer-label {
    flex: 1;
    font-weight: 400;
}
.dt-connect .dt-composer-options {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--connect-border);
}
.dt-connect .dt-composer-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--connect-blue);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dt-connect .dt-composer-option:hover {
    background: rgba(29, 155, 240, 0.1);
    color: var(--connect-blue);
}
.dt-connect .dt-composer-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.dt-connect .dt-composer-option:disabled:hover {
    background: transparent;
    color: var(--connect-blue);
}
.dt-connect .dt-composer-option svg {
    width: 20px;
    height: 20px;
    opacity: 1;
}
/* Soft feed switches — X-style top spinner with subtle transition */
#connectFeedLivewire.is-soft-loading,
.posts-feed.is-soft-loading,
#posts-container.is-soft-loading {
    opacity: 0.88;
    transition: opacity 0.12s ease;
}
.dt-x-spinner {
    display: inline-block;
    width: 1.375rem;
    height: 1.375rem;
    border: 2.5px solid color-mix(in srgb, var(--connect-blue, #1d9bf0) 22%, transparent);
    border-top-color: var(--connect-blue, #1d9bf0);
    border-radius: 9999px;
    animation: spin 0.65s linear infinite;
    flex-shrink: 0;
}
.dt-x-top-loader {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--connect-border, #eff3f4);
}
html[data-breakroom-feed-mode="story"] .dt-x-top-loader,
.nurse-connect-layout[data-breakroom-feed-mode="story"] .dt-x-top-loader,
html.breakroom-story-active .dt-x-top-loader {
    display: none !important;
}
/*
 * Swipe tab switches still soft-fade (wire:target is handleSetFeed, not loadMoreStories).
 * Prefetch stays silent because loadMoreStories is excluded from wire:target.
 */
html[data-breakroom-feed-mode="story"] #connectFeedLivewire.is-soft-loading,
html.breakroom-story-active #connectFeedLivewire.is-soft-loading {
    opacity: 0.72;
    transition: opacity 0.14s ease;
    pointer-events: none;
}
.breakroom-story-feed__loading {
    display: none !important;
}

.dt-connect .dt-feed-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    margin: 0;
    border: none;
    border-bottom: none;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 400;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 48px;
    position: relative;
    z-index: 20;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
@media (min-width: 640px) {
    .dt-connect .dt-feed-tabs {
        justify-content: center;
    }
}
.dt-connect .dt-feed-tabs::-webkit-scrollbar { display: none; }
.dt-connect .dt-feed-tab {
    flex: 1 1 0;
    max-width: 11rem;
    padding: 0.875rem 0.75rem;
    color: var(--connect-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dt-connect .dt-feed-tab:hover {
    color: var(--connect-text);
    background-color: transparent;
}
.dt-connect .dt-feed-tab:active {
    transform: none;
}
.dt-connect .dt-feed-tab.active,
.dt-connect .dt-feed-tab.feed-tab-active {
    border-bottom-color: var(--connect-blue);
    color: var(--connect-text);
    font-weight: 700;
    background-color: transparent;
}
.dt-connect .dt-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
}
.dt-connect .dt-right-card {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}
.dt-connect .dt-right-card .dt-card-header {
    padding: 12px 16px;
    border-bottom: none;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--connect-text);
    flex-shrink: 0;
    background: transparent;
}
.dt-connect .dt-right .suggestions-list {
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: none;
    overflow-y: visible;
}
.dt-connect .dt-suggestion {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: none;
    transition: background 0.15s;
}
.nurse-connect-layout .dt-connect .suggestion-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--connect-border) 45%, transparent);
    transition: background 0.15s;
}
.dt-connect .dt-suggestion:hover,
.nurse-connect-layout .dt-connect .suggestion-item:hover {
    background: transparent;
}
.dt-connect .dt-suggestion:last-child,
.nurse-connect-layout .dt-connect .suggestion-item:last-child {
    border-bottom: none;
}
.dt-connect .dt-suggestion-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--connect-accent);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dt-connect .dt-suggestion-info {
    flex: 1;
    min-width: 0;
}
.dt-connect .dt-suggestion-name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--connect-text);
    margin: 0 0 2px 0;
}
.dt-connect .dt-suggestion-headline {
    font-size: 0.8125rem;
    color: var(--connect-text-muted);
    margin: 0;
}
.dt-connect .dt-suggestion .dt-btn {
    width: auto;
    padding: 6px 16px;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 9999px;
    border: 1px solid var(--connect-accent);
    color: #fff;
    background: var(--connect-accent);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}
.dt-connect .dt-suggestion .dt-btn:hover {
    background: var(--connect-accent-hover);
    border-color: var(--connect-accent-hover);
}
.dt-connect .dt-list-icon {
    width: 20px;
    height: 20px;
    color: var(--connect-text-muted);
    margin-right: 0;
    vertical-align: middle;
    flex-shrink: 0;
}
/* dt-connect: center column scroll for infinite scroll */
.dt-connect .dt-center-inner {
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
}
@media (min-width: 1024px) {
    .dt-connect .dt-center-inner {
        max-height: none;
    }
}

/* -------------------------------------------------------------------------
   Breakroom UX utilities (composer, empty, discover, FAB)
   ------------------------------------------------------------------------- */
.breakroom-composer {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
}
.breakroom-composer__prompt {
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--connect-border, #d5dee8);
    border-radius: 9999px;
    color: var(--connect-text-muted, #536471);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    text-align: left;
    appearance: none;
}
.breakroom-composer:hover .breakroom-composer__prompt {
    background: transparent;
    border-color: var(--connect-blue);
    color: var(--connect-text);
}
.breakroom-feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    min-height: 14rem;
    text-align: center;
    border-bottom: none;
}
.breakroom-feed-empty__title {
    margin: 0;
    color: var(--connect-text, #0f1419);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.breakroom-feed-empty__body {
    margin: 0;
    max-width: 22rem;
    color: var(--connect-text-muted, #536471);
    font-size: 0.875rem;
    line-height: 1.45;
}
.breakroom-feed-empty__cta {
    margin-top: 0.65rem;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 9999px;
    background: var(--connect-blue);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
.breakroom-feed-empty__cta:hover {
    background: var(--connect-blue-hover);
    box-shadow: none;
}
.breakroom-discover-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.25rem;
    background: transparent;
    border: none;
    border-radius: 0;
}
.breakroom-discover-bar__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--connect-text, #0f1419);
}
.breakroom-discover-bar__btn {
    padding: 0.375rem 0.875rem;
    border: none;
    border-radius: 9999px;
    background: var(--connect-blue);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
}
.breakroom-discover-bar__btn:hover {
    background: var(--connect-blue-hover, #1a8cd8);
}
.breakroom-post-fab {
    display: none;
    position: fixed;
    right: 1rem;
    /* Sit above the mobile marketing bottom tab bar */
    bottom: calc(3.5rem + 0.85rem + env(safe-area-inset-bottom, 0px));
    z-index: 10040;
    width: 3.5rem;
    height: 3.5rem;
    border: none;
    border-radius: 9999px;
    background: #0f1419;
    color: #fff;
    box-shadow: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}
.breakroom-post-fab:hover {
    background: #272c30;
}
html[data-theme="dark"] .breakroom-post-fab {
    background: #eff3f4;
    color: #0f1419;
}
html[data-theme="dark"] .breakroom-post-fab:hover {
    background: #e7e9ea;
}
.breakroom-post-fab:active {
    transform: scale(0.96);
}
.breakroom-post-fab svg {
    width: 1.5rem;
    height: 1.5rem;
}
.breakroom-right-search {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--connect-bg, #ffffff) 92%, transparent);
    backdrop-filter: blur(12px);
    padding: 0.5rem 0 0.75rem;
    margin-bottom: 0.75rem;
}
.breakroom-right-search__field {
    position: relative;
}
.breakroom-right-search__icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--connect-text-muted);
    pointer-events: none;
}
.breakroom-right-search__input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: none;
    border-radius: 9999px;
    font-size: 0.875rem;
    background: var(--connect-surface);
    color: var(--connect-text);
    outline: none;
}
.breakroom-right-search__input::placeholder {
    color: var(--connect-text-muted);
}
.breakroom-right-search__input:focus {
    background: var(--connect-surface);
    border-color: transparent;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--connect-blue) 35%, transparent);
}
[data-theme="dark"] .breakroom-right-search {
    background: color-mix(in srgb, var(--connect-bg, #0a1b33) 94%, var(--connect-blue, #1d9bf0) 6%);
}
[data-theme="dark"] .breakroom-right-search__input,
[data-theme="dark"] .breakroom-right-search__select {
    background: var(--connect-surface-lift, #183452) !important;
    border-color: #2a3441 !important;
    color: #eef2f6 !important;
}
[data-theme="dark"] .breakroom-right-search__input:focus,
[data-theme="dark"] .breakroom-right-search__select:focus {
    border-color: var(--connect-blue) !important;
    box-shadow: 0 0 0 1px var(--connect-blue);
}
.breakroom-right-search__filters {
    margin-top: 0.5rem;
}
.breakroom-right-search__filters > summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--connect-blue);
    padding: 0.25rem 0.25rem 0.5rem;
}
.breakroom-right-search__filters > summary::-webkit-details-marker { display: none; }
.breakroom-right-search__filters-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.breakroom-right-search__select {
    width: 100%;
    padding: 0.5rem 1.75rem 0.5rem 0.75rem;
    border: none;
    border-radius: 9999px;
    font-size: 0.8125rem;
    background: var(--connect-surface);
    color: var(--connect-text);
    appearance: none;
    cursor: pointer;
    outline: none;
}
.breakroom-right-search__select:focus {
    border-color: var(--connect-blue);
}
.breakroom-right-search__clear {
    display: none;
    margin-top: 0.5rem;
    margin-left: auto;
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--connect-blue);
    cursor: pointer;
}
.breakroom-right-search__clear:hover {
    background: rgba(15, 39, 72, 0.1);
}
.breakroom-people-card__title {
    margin: 0;
    padding: 12px 16px 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--connect-text);
}
.breakroom-people-card__meta {
    margin: 0 16px 8px;
    font-size: 0.75rem;
    color: var(--connect-text-muted);
}
.breakroom-loading-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--connect-border, #eff3f4);
    border-top-color: var(--connect-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@media (max-width: 1023px) {
    /* People search / suggestions live in the People tab — free mobile room for story swipe */
    .breakroom-discover-bar { display: none !important; }
    .dt-connect .dt-right,
    .nurse-connect-layout #rightSidebar {
        display: none !important;
    }
}
@media (max-width: 767px) {
    .nurse-connect-layout.dt-connect {
        --breakroom-bottom-nav: 0px;
    }
    .breakroom-post-fab { display: inline-flex; }
}

/* -------------------------------------------------------------------------
   Mobile responsive – smaller fonts and tighter spacing on phones
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Post card: tighter padding */
    .nurse-connect-layout .connect-post-card {
        padding: 10px 12px;
    }
    /* Post body text: smaller on mobile */
    .nurse-connect-layout .connect-post-body,
    .nurse-connect-layout .connect-post-content .post-main-body p {
        font-size: 0.8125rem;
        line-height: 1.45;
    }
    /* Author name and meta: smaller */
    .nurse-connect-layout .connect-post-author-name {
        font-size: 0.8125rem;
    }
    .nurse-connect-layout .connect-post-author-meta {
        font-size: 0.6875rem;
    }
    .nurse-connect-layout .connect-post-time {
        font-size: 0.6875rem;
    }
    /* Post avatar: smaller on mobile */
    .nurse-connect-layout .connect-post-avatar,
    .nurse-connect-layout .connect-post-avatar-placeholder {
        width: 36px;
        height: 36px;
    }
    /* Action buttons: smaller */
    .nurse-connect-layout .connect-post-action-btn {
        font-size: 0.6875rem;
        padding: 4px 6px;
    }
    .nurse-connect-layout .connect-post-action-btn svg {
        width: var(--icon-sm, 1rem);
        height: var(--icon-sm, 1rem);
    }
    /* Feed tabs: smaller, less padding */
    .nurse-connect-layout .feed-tabs {
        font-size: 0.8125rem;
        min-height: 44px;
    }
    .nurse-connect-layout .feed-tab {
        padding: 10px 8px;
        font-size: 0.8125rem;
    }
    /* Connect button in post header: smaller */
    .nurse-connect-layout .connect-post-header-connect-btn {
        font-size: 0.75rem;
        padding: 3px 12px;
    }
    .nurse-connect-layout .connect-post-header-connect-badge {
        font-size: 0.6875rem;
        padding: 3px 8px;
    }
    /* Comment text: smaller */
    .nurse-connect-layout .connect-post-comment-text {
        font-size: 0.75rem;
    }
    .nurse-connect-layout .connect-post-comment-author {
        font-size: 0.6875rem;
    }
    .nurse-connect-layout .connect-post-comment-input {
        font-size: 0.8125rem;
        padding: 8px 14px;
    }
    .nurse-connect-layout .connect-post-comment-submit {
        font-size: 0.75rem;
        padding: 6px 14px;
    }
    /* Feed item dividers: tighter padding */
    .nurse-connect-layout .posts-feed .admin-card,
    .nurse-connect-layout .posts-feed #connectFeedLivewire .admin-card,
    .nurse-connect-layout .posts-feed article.admin-card,
    .nurse-connect-layout .posts-feed article[class*="bg-white rounded"],
    .nurse-connect-layout .secondary-feed-grid .admin-card,
    .nurse-connect-layout .secondary-feed-grid article {
        padding: 10px 12px !important;
    }
}

/* Dark cards: hairline bottom only (no side borders — matches X timeline) */
html[data-theme="dark"] .nurse-connect-layout .connect-post-card,
html[data-theme="dark"] .nurse-connect-layout .breakroom-activity-card,
html[data-theme="dark"] .nurse-connect-layout .breakroom-people-row {
    background: var(--connect-surface);
    border: none;
    border-bottom: 1px solid var(--connect-border);
    box-shadow: none;
    border-radius: 0;
}
html[data-theme="dark"] .nurse-connect-layout .suggested-jobs-card,
html[data-theme="dark"] .nurse-connect-layout .discover-card,
html[data-theme="dark"] .nurse-connect-layout .feed-tabs {
    background: var(--connect-surface);
    border: none;
    border-bottom: 1px solid var(--connect-border);
    box-shadow: none;
}
html[data-theme="dark"] .nurse-connect-layout .connect-post-action-btn:hover {
    background: color-mix(in srgb, var(--connect-blue) 14%, transparent);
    color: var(--connect-blue);
}
html[data-theme="dark"] .nurse-connect-layout .connect-post-action-btn.is-active {
    color: var(--connect-blue);
}
html[data-theme="dark"] .nurse-connect-layout .add-post-trigger-btn {
    border: 1px solid var(--connect-border);
    background: var(--connect-surface);
}
html[data-theme="dark"] .nurse-connect-layout .feed-tab.is-active {
    color: var(--connect-blue);
    box-shadow: inset 0 -2.5px 0 0 var(--connect-blue);
}

html[data-theme="dark"] .landing-search__submit,
html[data-theme="dark"] .admin-btn-primary,
html[data-theme="dark"] #search-submit-btn,
html[data-theme="dark"] .btn-brand,
html[data-theme="dark"] .landing-btn-primary,
html[data-theme="dark"] .db-btn--primary,
html[data-theme="dark"] .ed-btn--primary,
html[data-theme="dark"] .sp-btn--primary,
html[data-theme="dark"] .employer-btn--primary {
    background: var(--color-brand, #2fd0bd) !important;
    background-image: none !important;
    color: var(--color-on-brand, #06231f) !important;
    border-color: var(--color-brand, #2fd0bd) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .landing-search__submit:hover,
html[data-theme="dark"] .admin-btn-primary:hover,
html[data-theme="dark"] #search-submit-btn:hover,
html[data-theme="dark"] .btn-brand:hover,
html[data-theme="dark"] .landing-btn-primary:hover,
html[data-theme="dark"] .db-btn--primary:hover,
html[data-theme="dark"] .ed-btn--primary:hover,
html[data-theme="dark"] .sp-btn--primary:hover,
html[data-theme="dark"] .employer-btn--primary:hover {
    background: var(--color-brand-hover, #4adccb) !important;
    background-image: none !important;
    color: var(--color-on-brand, #06231f) !important;
    border-color: var(--color-brand-hover, #4adccb) !important;
}

:where(.btn-brand, .landing-btn, .admin-btn, .admin-btn-primary,
    .db-btn, .ed-btn, .sp-btn, .employer-btn, .connect-button,
    .msg-btn, .jobs-side__btn, .jobs-empty__btn,
    .breakroom-feed-create__cta, .breakroom-feed-empty__cta) {
    border-radius: 0.35rem;
    box-shadow: none !important;
    transform: none !important;
    background-image: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

:where(.landing-btn, .admin-btn, .db-btn, .ed-btn, .sp-btn, .employer-btn,
    .connect-button, .msg-btn) ::after,
:where(.landing-btn, .admin-btn, .db-btn, .ed-btn, .sp-btn, .employer-btn,
    .connect-button, .msg-btn)::after {
    content: none !important;
}


/* -------------------------------------------------------------------------
   Connection requests inbox ( /connect/requests )
   ------------------------------------------------------------------------- */
.breakroom-requests-header {
    background: var(--connect-surface, #fff);
    border-bottom: 1px solid var(--connect-border, #cfd9d9);
    position: sticky;
    top: 0;
    z-index: 20;
}
.breakroom-requests-header__bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem 0.35rem;
}
.breakroom-requests-header__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    color: var(--connect-text, #0f1419);
    text-decoration: none;
    flex-shrink: 0;
}
.breakroom-requests-header__back:hover {
    background: color-mix(in srgb, var(--connect-blue, #1d9bf0) 8%, transparent);
}
.breakroom-requests-header__titles {
    min-width: 0;
}
.breakroom-requests-header__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--connect-text, #0f1419);
    line-height: 1.2;
}
.breakroom-requests-header__sub {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--connect-text-muted, #536471);
}
.breakroom-requests-header__context {
    margin: 0;
    padding: 0.55rem 1rem 0.85rem;
    border-top: 0;
}
.breakroom-requests-panel {
    background: var(--connect-surface, #fff);
    border: 1px solid var(--connect-border, #cfd9d9);
    border-radius: 16px;
    overflow: hidden;
    border-bottom: 1px solid var(--connect-border, #cfd9d9);
}
.breakroom-requests-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.breakroom-request-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem 0.85rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border-top: 1px solid var(--connect-border, #e0dfdc);
    scroll-margin-top: 5.5rem;
    background: var(--connect-surface, #fff);
    transition: background-color 0.15s ease;
}
.breakroom-request-item:first-child {
    border-top: 0;
}
.breakroom-request-item:hover {
    background: color-mix(in srgb, var(--connect-blue, #1d9bf0) 3.5%, var(--connect-surface, #fff));
}
.breakroom-request-item:target,
.breakroom-request-item.is-highlighted {
    background: color-mix(in srgb, var(--connect-teal, #127d72) 10%, var(--connect-surface, #fff));
    box-shadow: inset 3px 0 0 var(--connect-teal, #127d72);
}
.breakroom-request-item__avatar-link {
    display: block;
    flex-shrink: 0;
    border-radius: 50%;
}
.breakroom-request-item__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--connect-border, #e0dfdc);
}
.breakroom-request-item__avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--connect-blue, #1d9bf0);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}
.breakroom-request-item__body {
    min-width: 0;
}
.breakroom-request-item__name {
    display: inline-block;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--connect-text, #0f1419);
    text-decoration: none;
    line-height: 1.25;
}
.breakroom-request-item__name:hover {
    text-decoration: underline;
    color: var(--connect-blue, #1d9bf0);
}
.breakroom-request-item__meta {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--connect-text-muted, #536471);
    line-height: 1.35;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
    align-items: baseline;
}
.breakroom-request-item__dot {
    opacity: 0.7;
}
.breakroom-request-item__note {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: var(--connect-text, #0f1419);
    line-height: 1.4;
}
.breakroom-request-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
    align-items: center;
}
.breakroom-request-item__form {
    margin: 0;
    display: inline;
}
.breakroom-request-item__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.breakroom-request-item__btn--accept {
    background: var(--connect-blue, #1d9bf0);
    color: #fff;
    border-color: var(--connect-blue, #1d9bf0);
}
.breakroom-request-item__btn--accept:hover {
    background: var(--connect-blue-hover, #1a8cd8);
}
.breakroom-request-item__btn--decline {
    background: transparent;
    color: var(--connect-text-muted, #536471);
    border-color: var(--connect-border, #cbd5e1);
}
.breakroom-request-item__btn--decline:hover {
    border-color: var(--connect-text-muted, #536471);
    color: var(--connect-text, #0f1419);
    background: color-mix(in srgb, var(--connect-text, #0f1419) 4%, transparent);
}
.breakroom-requests-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 3rem 1.25rem;
    text-align: center;
    border-bottom: 0;
}
.breakroom-requests-empty p {
    margin: 0;
    color: var(--connect-text, #0f1419);
    font-size: 0.95rem;
    font-weight: 700;
}
.breakroom-requests-empty a {
    color: var(--connect-blue, #1d9bf0);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}
.breakroom-requests-empty a:hover {
    text-decoration: underline;
}
.breakroom-requests-pagination {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--connect-border, #e0dfdc);
}
.breakroom-requests-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    padding: 0.9rem 1rem 1.25rem;
}
.breakroom-requests-footer__hint {
    margin: 0;
    flex: 1 1 14rem;
    font-size: 0.82rem;
    color: var(--connect-text-muted, #536471);
    line-height: 1.4;
}
.breakroom-requests-footer__link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--connect-blue, #1d9bf0);
    text-decoration: none;
}
.breakroom-requests-footer__link:hover {
    text-decoration: underline;
}
@media (max-width: 639px) {
    .breakroom-request-item {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "avatar body"
            "actions actions";
    }
    .breakroom-request-item__avatar-link { grid-area: avatar; }
    .breakroom-request-item__body { grid-area: body; }
    .breakroom-request-item__actions {
        grid-area: actions;
        justify-content: stretch;
    }
    .breakroom-request-item__form { flex: 1 1 auto; }
    .breakroom-request-item__btn { width: 100%; }
}
[data-theme="dark"] .breakroom-request-item:target,
[data-theme="dark"] .breakroom-request-item.is-highlighted {
    background: color-mix(in srgb, var(--connect-teal, #2fd0bd) 14%, var(--connect-surface, #10243a));
}



/* -------------------------------------------------------------------------
   Breakroom layout polish — rails + main feed
   ------------------------------------------------------------------------- */
.dt-connect .breakroom-left-rail,
.dt-connect .breakroom-right-rail {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}
.dt-connect .breakroom-left-rail > .dt-card,
.dt-connect .breakroom-right-stack > .dt-card,
.dt-connect .breakroom-right-stack > .suggested-jobs-card {
    border: 1px solid var(--connect-border, #d8e0e0);
    border-radius: 14px;
    background: var(--connect-surface, #fff);
    overflow: hidden;
}
.dt-connect .breakroom-left-rail > .dt-card {
    width: 100%;
}
.dt-connect .breakroom-left-rail > .dt-card + .dt-card,
.dt-connect .breakroom-right-stack > .dt-card + .dt-card,
.dt-connect .breakroom-right-stack > .suggested-jobs-card + .dt-card,
.dt-connect .breakroom-right-stack > .dt-card + .suggested-jobs-card {
    margin-top: 0;
}
.dt-connect .breakroom-right-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}
.dt-connect .breakroom-right-stack > .breakroom-right-search,
.dt-connect .breakroom-right-stack > .breakroom-people-card,
.dt-connect .breakroom-right-stack > .suggested-jobs-card {
    width: 100%;
    border: 1px solid var(--connect-border, #d8e0e0);
    border-radius: 14px;
    background: var(--connect-surface, #fff);
    overflow: hidden;
}
.dt-connect .breakroom-nav-card {
    padding: 0.85rem 0.75rem 0.75rem;
    background: var(--connect-surface, #fff);
    border-radius: 16px;
}
.dt-connect .breakroom-nav-card__title,
.dt-connect .breakroom-right-section-title {
    margin: 0 0 0.55rem;
    padding: 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--connect-text-muted, #536471);
}
.dt-connect .breakroom-nav-card__list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.dt-connect .breakroom-nav-card__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--connect-text, #0f1419);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
}
.dt-connect .breakroom-nav-card__link:hover {
    background: var(--connect-hover, rgba(15, 20, 25, 0.03));
}
.dt-connect .breakroom-nav-card__link.is-active {
    background: var(--connect-blue-soft, rgba(29, 155, 240, 0.1));
    color: var(--connect-blue, #1d9bf0);
}
.dt-connect .breakroom-nav-card__count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--connect-text-muted, #536471);
    background: color-mix(in srgb, var(--connect-border, #e0dfdc) 70%, transparent);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    min-width: 1.4rem;
    text-align: center;
}
.dt-connect .breakroom-nav-card__badge {
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    background: var(--connect-blue, #1d9bf0);
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
    min-width: 1.35rem;
    text-align: center;
}
.dt-connect .breakroom-profile-card__stat.is-active {
    background: var(--connect-blue-soft, rgba(29, 155, 240, 0.1));
    border-radius: 10px;
}
.dt-connect .breakroom-feed-header {
    background: var(--connect-bg, #fff);
    border-bottom: 1px solid var(--connect-border, #eff3f4);
    position: sticky;
    top: 0;
    z-index: 20;
    isolation: isolate;
    overflow: hidden;
}
/* Hide navy hero pattern — X headers are flat canvas */
.dt-connect .breakroom-feed-header .nm-hero-surface,
.dt-connect .breakroom-feed-header.nm-hero-shell > .nm-hero-surface {
    display: none !important;
}
.dt-connect .breakroom-feed-header__inner {
    position: relative;
    z-index: 1;
    padding-top: var(--breakroom-nav-offset, 53px);
}
.dt-connect .breakroom-feed-header__top {
    padding: 0.7rem 1rem 0.15rem;
    min-height: 3.65rem;
    box-sizing: border-box;
}
.dt-connect .breakroom-feed-header--compact .breakroom-feed-header__top {
    padding: 0.7rem 1rem 0.15rem;
}
.dt-connect .breakroom-feed-header__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--connect-text, #0f1419);
    line-height: 1.2;
    min-height: 1.38rem;
}
.dt-connect .breakroom-feed-header__sub {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: var(--connect-text-muted, #536471);
    line-height: 1.35;
    max-width: 36rem;
    min-height: 2.16rem;
}
.dt-connect .breakroom-feed-header__link {
    color: var(--connect-blue, #1d9bf0);
    font-weight: 600;
    text-decoration: none;
}
.dt-connect .breakroom-feed-header__link:hover {
    text-decoration: underline;
}

.nurse-connect-layout .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Collapsible job search — collapsed by default */
.dt-connect .breakroom-jobs-hook {
    margin: 0.25rem 1rem 0.55rem;
    border: 1px solid var(--connect-border, #eff3f4);
    border-radius: 9999px;
    background: var(--connect-surface-lift, var(--connect-surface, #fff));
    overflow: hidden;
}
.dt-connect .breakroom-jobs-hook[open] {
    border-radius: 16px;
}
.dt-connect .breakroom-jobs-hook__summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem 0.55rem 0.7rem;
    cursor: pointer;
    user-select: none;
}
.dt-connect .breakroom-jobs-hook__summary::-webkit-details-marker { display: none; }
.dt-connect .breakroom-jobs-hook__summary-main {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.dt-connect .breakroom-jobs-hook__summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--connect-blue, #2fd0bd) 14%, transparent);
    color: var(--connect-blue, #2fd0bd);
    flex: 0 0 auto;
}
.dt-connect .breakroom-jobs-hook__summary-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.dt-connect .breakroom-jobs-hook__summary-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--connect-text, #0f1419);
}
.dt-connect .breakroom-jobs-hook__summary-hint {
    font-size: 0.75rem;
    color: var(--connect-text-muted, #536471);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dt-connect .breakroom-jobs-hook__chevron {
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--connect-text-muted, #536471);
    border-bottom: 2px solid var(--connect-text-muted, #536471);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    margin-top: -0.15rem;
    flex: 0 0 auto;
}
.dt-connect .breakroom-jobs-hook__foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.45rem;
}
.dt-connect .breakroom-jobs-hook__browse {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--connect-blue, #2fd0bd);
    text-decoration: none;
}
.dt-connect .breakroom-jobs-hook__browse:hover {
    text-decoration: underline;
}
.dt-connect .breakroom-jobs-hook[open] .breakroom-jobs-hook__chevron {
    transform: rotate(-135deg);
    margin-top: 0.15rem;
}
.dt-connect .breakroom-jobs-hook__panel {
    padding: 0 0.75rem 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--connect-border, #eff3f4) 80%, transparent);
}
.dt-connect .breakroom-jobs-hook__row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: stretch;
    padding-top: 0.65rem;
}
.dt-connect .breakroom-jobs-hook__input {
    width: 100%;
    min-width: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--connect-border-strong, #cfd9de);
    border-radius: 9999px;
    background: var(--connect-bg, #fff);
    color: var(--connect-text, #0f1419);
    font-size: 0.875rem;
    font-weight: 500;
    outline: none;
}
.dt-connect .breakroom-jobs-hook__input::placeholder {
    color: var(--connect-text-muted, #536471);
    font-weight: 400;
}
.dt-connect .breakroom-jobs-hook__input:focus {
    border-color: var(--connect-blue, #2fd0bd);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--connect-blue, #2fd0bd) 28%, transparent);
}
.dt-connect .breakroom-jobs-hook__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1rem;
    border: none;
    border-radius: 9999px;
    background: #0f1419;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.dt-connect .breakroom-jobs-hook__submit:hover {
    background: #272c30;
}
html[data-theme="dark"] .dt-connect .breakroom-jobs-hook__submit {
    background: #eff3f4;
    color: #0f1419;
}
html[data-theme="dark"] .dt-connect .breakroom-jobs-hook__submit:hover {
    background: #e7e9ea;
}
.breakroom-story-toolbar__jobs {
    display: none;
    margin-left: auto;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid var(--connect-border-strong, #cfd9de);
    color: var(--connect-text, #0f1419);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}
.breakroom-story-toolbar__jobs:hover {
    background: var(--connect-hover, rgba(15, 20, 25, 0.03));
}
@media (max-width: 640px) {
    .dt-connect .breakroom-jobs-hook__summary-hint {
        display: none;
    }
    .dt-connect .breakroom-jobs-hook__row {
        grid-template-columns: 1fr;
    }
    .dt-connect .breakroom-jobs-hook__submit {
        width: 100%;
    }
}
.dt-connect .breakroom-feed-header [hidden],
.dt-connect .breakroom-feed-header__composer[hidden] {
    display: none !important;
}
.dt-connect .breakroom-feed-header__composer {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0.35rem 1rem 0.55rem !important;
    min-height: 3.35rem;
    box-sizing: border-box;
}
.dt-connect .breakroom-feed-header .dt-composer-inner {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0.35rem 1rem 0.55rem !important;
    box-shadow: none !important;
}
.dt-connect .breakroom-feed-header .breakroom-composer {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    margin: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.dt-connect .breakroom-feed-header .breakroom-composer__prompt {
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0;
    padding: 10px 16px;
    -webkit-appearance: none;
    appearance: none;
}
.dt-connect .breakroom-feed-header .dt-feed-tabs {
    border-top: 1px solid var(--connect-border, #eff3f4);
}
.dt-connect .breakroom-feed-header .dt-feed-tab {
    color: var(--connect-text-muted, #536471);
}
.dt-connect .breakroom-feed-header .dt-feed-tab:hover {
    color: var(--connect-text, #0f1419);
    background-color: var(--connect-hover);
}
.dt-connect .breakroom-feed-header .dt-feed-tab.feed-tab-active {
    color: var(--connect-text, #0f1419);
    font-weight: 700;
    border-bottom-color: var(--connect-blue, #1d9bf0);
}
.dt-connect .breakroom-feed-header .breakroom-composer__prompt {
    background: transparent;
    border: 1px solid var(--connect-border, #eff3f4);
    color: var(--connect-text-muted, #536471);
    border-radius: 9999px;
}
.dt-connect .breakroom-feed-header .breakroom-composer:hover .breakroom-composer__prompt {
    background: var(--connect-hover);
    border-color: var(--connect-border-strong, #cfd9de);
    color: var(--connect-text, #0f1419);
}
.dt-connect .breakroom-feed-header .dt-feed-tab.feed-tab-active {
    position: relative;
}
.dt-connect .breakroom-feed-header .dt-feed-tab.feed-tab-active::after {
    content: none;
}

/* People directory rows (Connections) */
.secondary-feed-grid--people {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.breakroom-people-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--connect-border, #cfd9d9) 70%, transparent);
    background: var(--connect-surface, #fff);
    transition: background-color 0.12s ease;
}
.breakroom-people-row:hover {
    background: var(--connect-hover, rgba(15, 20, 25, 0.03));
}
.breakroom-people-row__avatar-wrap,
.breakroom-people-row .presence-avatar-wrap {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    position: relative;
    overflow: visible;
}
.breakroom-people-row__avatar-link {
    flex: 0 0 auto;
    line-height: 0;
    text-decoration: none;
    display: block;
}
.breakroom-people-row__avatar {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    object-fit: cover;
    display: block;
    background: color-mix(in srgb, var(--connect-border, #cfd9d9) 40%, #fff);
}
.breakroom-people-row__avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--connect-text, #0f1419);
    background: color-mix(in srgb, var(--connect-blue, #1d9bf0) 12%, var(--connect-surface, #fff));
}
.breakroom-people-row__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.breakroom-people-row__text {
    min-width: 0;
    flex: 1 1 auto;
}
.breakroom-people-row__name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--connect-text, #0f1419);
}
.breakroom-people-row__name a {
    color: inherit;
    text-decoration: none;
}
.breakroom-people-row__name a:hover {
    text-decoration: underline;
}
.breakroom-people-row__meta {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: var(--connect-text-muted, #536471);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.breakroom-people-row__dot {
    margin: 0 0.2rem;
    opacity: 0.7;
}
.breakroom-people-row__time {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    color: var(--connect-text-muted, #536471);
}
.breakroom-people-row__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex: 0 0 auto;
}
.breakroom-people-row__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    border: 1px solid var(--connect-border-strong, #cfd9de);
    background: transparent;
    color: var(--connect-text, #0f1419);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.breakroom-people-row__btn:hover {
    background: var(--connect-hover, rgba(15, 20, 25, 0.03));
    border-color: var(--connect-text-muted, #536471);
    color: var(--connect-text, #0f1419);
}
.breakroom-people-row__btn--primary,
.breakroom-people-row__btn.follow-toggle:not(.is-following) {
    border-color: transparent;
    background: #0f1419;
    color: #fff;
}
.breakroom-people-row__btn--primary:hover,
.breakroom-people-row__btn.follow-toggle:not(.is-following):hover {
    background: #272c30;
    color: #fff;
    border-color: transparent;
}
html[data-theme="dark"] .breakroom-people-row__btn--primary,
html[data-theme="dark"] .breakroom-people-row__btn.follow-toggle:not(.is-following) {
    background: #eff3f4;
    color: #0f1419 !important;
    border-color: transparent;
}
html[data-theme="dark"] .breakroom-people-row__btn--primary:hover,
html[data-theme="dark"] .breakroom-people-row__btn.follow-toggle:not(.is-following):hover {
    background: #e7e9ea;
    border-color: transparent;
}
.breakroom-people-row__btn .spinner {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 9999px;
    display: inline-block;
    animation: breakroom-spin 0.7s linear infinite;
}
.breakroom-people-row--suggested {
    background: var(--connect-surface, #fff);
}
.breakroom-people-section {
    padding: 1rem 1rem 0.35rem;
    border-bottom: 1px solid color-mix(in srgb, var(--connect-border, #cfd9d9) 70%, transparent);
    background: var(--connect-surface, #fff);
}
.breakroom-people-section__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--connect-text, #0f1419);
}
.breakroom-people-section__copy {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.8rem;
    color: var(--connect-text-muted, #64748b);
}
.breakroom-people-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0 1.5rem;
}
.breakroom-people-more.dt-x-feed-more {
    padding: 0;
    min-height: 0;
}
.breakroom-people-more.dt-x-feed-more:empty {
    display: none;
}
.dt-x-feed-more__spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.5rem;
    padding: 1rem 0;
    cursor: pointer;
}
.breakroom-people-more__sentinel {
    width: 100%;
    height: 1px;
}
.breakroom-people-more__loading {
    flex-direction: column;
    align-items: center;
}
.breakroom-people-more__button {
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--connect-teal, #127d72);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--connect-teal, #127d72) 45%, transparent);
    border-radius: 999px;
    cursor: pointer;
}
.breakroom-people-more__button:hover {
    background: color-mix(in srgb, var(--connect-teal, #127d72) 8%, transparent);
}
.breakroom-people-more__end {
    margin: 0;
    font-size: 0.8rem;
    color: var(--connect-text-muted, #64748b);
}

/* Events: For You card, Events tab rows, event page */
.breakroom-event-date-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--connect-teal, #127d72) 14%, var(--connect-surface, #fff));
    color: var(--connect-teal, #127d72);
    line-height: 1;
}
.breakroom-event-date-tile--lg {
    width: 56px;
    height: 56px;
}
.breakroom-event-date-tile__month {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.breakroom-event-date-tile__day {
    margin-top: 0.15rem;
    font-size: 1.1rem;
    font-weight: 800;
}
.breakroom-event-attend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid var(--connect-teal, #127d72);
    background: transparent;
    color: var(--connect-teal, #127d72);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.breakroom-event-attend:hover {
    background: color-mix(in srgb, var(--connect-teal, #127d72) 10%, transparent);
}
.breakroom-event-attend.is-attending {
    background: var(--connect-teal, #127d72);
    color: #fff;
}
.breakroom-event-attend:disabled {
    opacity: 0.6;
    cursor: wait;
}
html[data-theme="dark"] .breakroom-event-attend.is-attending {
    background: var(--color-teal, #2fd0bd);
    border-color: var(--color-teal, #2fd0bd);
    color: var(--color-on-brand, #06231f);
}
.breakroom-event-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--connect-border, #cfd9d9) 70%, transparent);
    background: var(--connect-surface, #fff);
    transition: background-color 0.12s ease;
}
.breakroom-event-row:hover {
    background: color-mix(in srgb, var(--connect-teal, #127d72) 5%, var(--connect-surface, #fff));
}
.breakroom-event-row__media {
    flex: 0 0 auto;
    line-height: 0;
    text-decoration: none;
}
.breakroom-event-row__flyer {
    width: 56px;
    height: 56px;
    border-radius: 0.5rem;
    object-fit: cover;
    display: block;
}
.breakroom-event-row__body {
    flex: 1 1 auto;
    min-width: 0;
}
.breakroom-event-row__title {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--connect-text, #0f1419);
    text-decoration: none;
}
.breakroom-event-row__title:hover {
    text-decoration: underline;
}
.breakroom-event-row__meta {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: var(--connect-text-muted, #536471);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.breakroom-event-row__publisher {
    font-weight: 600;
    color: var(--connect-text, #0f1419);
    text-decoration: none;
}
a.breakroom-event-row__publisher:hover {
    text-decoration: underline;
}
.breakroom-event-row__badge {
    margin-left: 0.3rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0369a1;
    background: #f0f9ff;
}
.breakroom-event-row__count {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    color: var(--connect-text-muted, #536471);
}
.breakroom-event-row__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex: 0 0 auto;
}
.event-show-flyer {
    display: block;
    background: color-mix(in srgb, var(--connect-border, #cfd9d9) 30%, transparent);
}
.event-show-publisher {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.event-show-publisher__logo {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    object-fit: cover;
}
.event-show-publisher__link {
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (max-width: 640px) {
    .breakroom-event-row {
        flex-wrap: wrap;
    }
    .breakroom-event-row__actions {
        width: 100%;
        justify-content: flex-start;
        padding-left: calc(56px + 0.75rem);
    }
}
@keyframes breakroom-spin {
    to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
    .breakroom-people-row__main {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }
    .breakroom-people-row__actions {
        justify-content: flex-start;
    }
    .breakroom-people-row__meta {
        white-space: normal;
    }
    .dt-connect .breakroom-feed-header__sub {
        font-size: 0.75rem;
    }
    .dt-connect .breakroom-feed-header .breakroom-composer__prompt {
        font-size: 0.8125rem;
        padding: 9px 14px;
    }
}

.dt-connect .breakroom-main-feed {
    background: var(--connect-surface, #fff);
    min-height: 12rem;
}
.dt-connect .breakroom-feed-loading {
    text-align: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--connect-border, #cfd9d9);
    color: var(--connect-text-muted, #536471);
    font-size: 0.875rem;
}
.dt-connect .breakroom-feed-loading p {
    margin: 0.5rem 0 0;
}
.dt-connect .breakroom-search-filters {
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--connect-border, #cfd9d9);
}
.dt-connect .breakroom-reply-row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--connect-border, #cfd9d9);
}
.dt-connect .breakroom-reply-row__meta {
    font-size: 0.75rem;
    color: var(--connect-text-muted, #536471);
    margin: 0 0 4px;
}
.dt-connect .breakroom-reply-row__body {
    font-size: 0.9375rem;
    color: var(--connect-text, #0f1419);
    margin: 0 0 8px;
}
.dt-connect .breakroom-reply-row__quoted {
    border: 1px solid var(--connect-border, #eff3f4);
    border-radius: 16px;
    padding: 12px;
    margin-top: 8px;
    background: var(--connect-bg, transparent);
}
.dt-connect .breakroom-reply-row__quoted-name {
    font-weight: 700;
    color: var(--connect-text, #0f1419);
    margin: 0 0 4px;
    font-size: 0.8125rem;
}
.dt-connect .breakroom-reply-row__quoted-body {
    font-size: 0.8125rem;
    color: var(--connect-text-muted, #536471);
    margin: 0;
}
/* Right rail cards */
.dt-connect .breakroom-right-search.dt-card {
    padding: 0.85rem 0.9rem 0.95rem;
    border-radius: 16px;
    background: var(--connect-surface, #fff);
}
.dt-connect .breakroom-right-section-title {
    padding: 0;
    margin-bottom: 0.7rem;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--connect-text, #0f1419);
}
.dt-connect .breakroom-right-search__filters-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.45rem;
}
.dt-connect .dt-card.breakroom-people-card,
.dt-connect .breakroom-people-card {
    background: var(--connect-surface, #fff);
    border-radius: 16px;
    overflow: visible;
    border: none;
    max-width: 100%;
    padding: 0;
}
.dt-connect .breakroom-people-card__head {
    padding: 0.85rem 1rem 0.35rem;
}
.dt-connect .breakroom-people-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--connect-text, #0f1419);
}
.dt-connect .breakroom-people-card__meta {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--connect-text-muted, #536471);
}
.dt-connect .breakroom-people-card .suggestions-list {
    padding: 0 0 0.35rem;
}
.dt-connect .breakroom-suggestions-loading {
    display: none;
    padding: 1.25rem;
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--connect-text-muted, #536471);
}
.dt-connect .breakroom-suggestions-loading .breakroom-loading-spinner {
    width: 28px;
    height: 28px;
}
.dt-connect [data-infinite-sentinel] {
    height: 1px;
    width: 100%;
    pointer-events: none;
}
.dt-connect .breakroom-left-jobs .suggested-job-item {
    padding: 10px 16px;
}
.dt-connect .breakroom-left-more:not(:has(.breakroom-left-jobs:not([hidden]))) {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
    min-height: 0;
}
/* Keep the left rail grouped into separate navigation cards. */
.dt-connect .breakroom-explore-card {
    display: block;
}
/* Hide create-breakroom promo banner if still rendered anywhere */
.dt-connect .breakroom-feed-create,
.nurse-connect-layout .breakroom-feed-create {
    display: none !important;
}
/* Requests center: single column focus */
.dt-connect .dt-center--requests {
    min-width: 0;
}
/* Soften discover bar if residual */
.dt-connect .breakroom-discover-bar {
    display: none !important;
}
/* Suggested jobs card alignment with right stack */
.dt-connect .suggested-jobs-card {
    border-radius: 16px;
    overflow: hidden;
    background: var(--connect-surface, #fff);
    border: 1px solid var(--connect-border, #d8e0e0);
    margin: 0;
}
@media (max-width: 1023px) {
    .dt-connect .breakroom-right-rail {
        order: 3;
    }
}


/* Requests page keeps the center focused and removes unrelated sidebar content. */
.dt-connect--requests .dt-grid {
    align-items: start;
}
.dt-connect--requests .dt-left,
.dt-connect--requests .dt-right {
    top: var(--breakroom-nav-offset, 53px);
    padding-top: var(--breakroom-rail-pad, 0.75rem);
}
.dt-connect--requests .dt-composer-inner,
.dt-connect--requests .breakroom-discover-bar,
.dt-connect--requests .dt-feed-tabs,
.dt-connect--requests .dt-feed-context,
.dt-connect--requests #new-posts-banner {
    display: none !important;
}
.dt-connect--requests .dt-left .breakroom-ad-card,
.dt-connect--requests .dt-left .breakroom-store-card,
.dt-connect--requests .suggested-jobs-card {
    display: none !important;
}
.dt-connect--requests .breakroom-profile-card,
.dt-connect--requests .breakroom-people-card,
.dt-connect--requests .breakroom-right-search {
    border: 1px solid var(--connect-border, #d8e0e0);
}
.dt-connect--requests .breakroom-requests-header,
.dt-connect--requests .breakroom-requests-panel,
.dt-connect--requests .breakroom-requests-footer {
    border-left: 1px solid var(--connect-border, #d8e0e0);
    border-right: 1px solid var(--connect-border, #d8e0e0);
}

/* -------------------------------------------------------------------------
   Member presence (online / busy / available)
   ------------------------------------------------------------------------- */
.presence-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.presence-avatar-wrap .presence-avatar-img,
.presence-avatar-wrap img {
    display: block;
    border-radius: 9999px;
    object-fit: cover;
}
.network-person__avatar .network-person__avatar-img,
.network-person__avatar img {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    object-fit: cover;
}
.presence-indicator {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 9999px;
    border: 2px solid var(--connect-surface, #fff);
    box-sizing: border-box;
    pointer-events: none;
    appearance: none;
    background-clip: padding-box;
}
.presence-indicator--toggle {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    width: 16px;
    height: 16px;
    z-index: 3;
}
.presence-indicator--toggle::before {
    content: '';
    position: absolute;
    inset: -4px;
}
.presence-indicator--toggle:focus-visible {
    outline: 2px solid var(--connect-teal, #127d72);
    outline-offset: 2px;
}
.presence-indicator--sm {
    width: 10px;
    height: 10px;
}
.presence-indicator--lg {
    width: 14px;
    height: 14px;
}
.presence-indicator--online { background: #22c55e; }
.presence-indicator--free { background: #14b8a6; }
.presence-indicator--busy { background: #ef4444; }
.presence-indicator--meeting { background: #f97316; }
.presence-indicator--away { background: #eab308; }
.presence-indicator--offline { background: #94a3b8; }

.connect-post-author-name-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    min-width: 0;
}
.presence-inline {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}
.presence-indicator--inline {
    position: static;
    width: 9px;
    height: 9px;
    border-width: 1.5px;
    box-shadow: none;
}
.timeline-header__presence,
.sp-presence {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--connect-teal, #127d72);
}
.timeline-header__avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    object-fit: cover;
}

/* -------------------------------------------------------------------------
   Engagement: Discussion of the Day, activation checklist, first-post toast
   ------------------------------------------------------------------------- */
.breakroom-dotd {
    margin: 0 0 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--connect-border, #e0ddd6);
    border-radius: 16px;
    background: color-mix(in srgb, var(--connect-teal, #127d72) 8%, var(--connect-surface, #fff));
}
.breakroom-dotd__eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--connect-teal, #127d72);
}
.breakroom-dotd__title {
    margin: 0.35rem 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--connect-text, #0f1419);
}
.breakroom-dotd__hint {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: var(--connect-text-muted, #536471);
}
.breakroom-dotd__cta {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.95rem;
    border: none;
    border-radius: 9999px;
    background: var(--connect-blue, #1d9bf0);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.breakroom-dotd__cta:hover { background: var(--connect-blue-hover, #1a8cd8); }

.breakroom-activation {
    margin: 0 0 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--connect-border, #e0ddd6);
    border-radius: 16px;
    background: var(--connect-surface, #fff);
}
.breakroom-activation[hidden],
.breakroom-intro-prompt[hidden] {
    display: none !important;
}
.breakroom-activation.is-animating {
    animation: breakroom-activation-in 0.28s ease-out;
}
@keyframes breakroom-activation-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.breakroom-activation__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.breakroom-activation__eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--connect-text-muted, #536471);
}
.breakroom-activation__title {
    margin: 0.2rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--connect-text, #0f1419);
}
.breakroom-activation__copy {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--connect-text-muted, #536471);
}
.breakroom-activation__dismiss {
    border: none;
    background: transparent;
    color: var(--connect-text-muted, #536471);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.breakroom-activation__steps {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.breakroom-activation__step {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.breakroom-activation__check {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--connect-border, #e0ddd6);
    color: #fff;
    flex-shrink: 0;
}
.breakroom-activation__step.is-done .breakroom-activation__check {
    background: var(--connect-blue, #1d9bf0);
}
.breakroom-activation__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: var(--connect-text-muted, #536471);
}
.breakroom-activation__label {
    flex: 1 1 10rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--connect-text, #0f1419);
}
.breakroom-activation__step.is-done .breakroom-activation__label {
    color: var(--connect-text-muted, #536471);
    text-decoration: line-through;
}
.breakroom-activation__cta {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid var(--connect-blue, #1d9bf0);
    background: transparent;
    color: var(--connect-blue, #1d9bf0);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.breakroom-activation__cta:hover {
    background: var(--connect-blue, #1d9bf0);
    color: #fff;
}

.add-post-style-bar {
    margin-top: 0.55rem;
    padding: 0.15rem 0 0.25rem;
    border-top: 1px solid color-mix(in srgb, var(--connect-border, #e0ddd6) 70%, transparent);
}
.add-post-style-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    margin-top: 0.55rem;
    padding: 0.3rem 0.85rem;
    border-radius: var(--connect-radius-sm, 9999px);
    border: 1px solid var(--connect-border, #cbd5e1);
    background: transparent;
    color: var(--connect-text-muted, #536471);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.add-post-style-toggle.is-open,
.add-post-style-toggle:hover {
    border-color: var(--connect-blue, #1d9bf0);
    color: var(--connect-blue, #1d9bf0);
}
.add-post-style-toggle:focus-visible {
    outline: none;
    box-shadow: var(--connect-focus-ring);
}
.add-post-style-bar .add-post-tools[hidden] {
    display: none !important;
}
.add-post-style-bar .add-post-tools:not([hidden]) {
    margin-top: 0.65rem;
}

.add-post-guided {
    margin-top: 0.75rem;
    padding: 0.8rem 0.85rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--connect-blue, #1d9bf0) 5%, var(--connect-surface, #fff));
    border: 1px solid var(--connect-border, #e0ddd6);
}
.add-post-guided__title {
    margin: 0 0 0.55rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--connect-text, #0f1419);
}
.add-post-guided__picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.add-post-guided__pick {
    border: 1px solid var(--connect-border, #cbd5e1);
    background: var(--connect-surface, #fff);
    color: var(--connect-text, #0f1419);
    border-radius: var(--connect-radius-sm, 9999px);
    padding: 0.4rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.add-post-guided__pick:hover {
    border-color: var(--connect-blue, #1d9bf0);
    color: var(--connect-blue, #1d9bf0);
}
.add-post-guided__pick:focus-visible {
    outline: none;
    box-shadow: var(--connect-focus-ring);
}
.add-post-guided__skip {
    margin-top: 0.55rem;
    border: none;
    background: transparent;
    color: var(--connect-text-muted, #536471);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0;
}
.add-post-guided__skip:focus-visible,
.add-post-hint__link:focus-visible {
    outline: none;
    box-shadow: var(--connect-focus-ring);
    border-radius: 4px;
}
.add-post-hint__link {
    border: none;
    background: transparent;
    color: var(--connect-blue, #1d9bf0);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
}

.breakroom-first-post-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%) translateY(120%);
    z-index: 10050;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: var(--connect-blue, #1d9bf0);
    color: #fff;
    font-size: 0.88rem;
    line-height: 1.4;
    box-shadow: 0 12px 32px rgb(15 39 72 / 0.28);
    transition: transform 0.25s ease;
}
.breakroom-first-post-toast.is-visible { transform: translateX(-50%) translateY(0); }
.breakroom-first-post-toast__link {
    color: #5eead4;
    font-weight: 700;
    text-decoration: underline;
}
@media (max-width: 767px) {
    .breakroom-first-post-toast {
        bottom: calc(3.5rem + 1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* -------------------------------------------------------------------------
   Breakroom Story mode — TikTok-style topic swipe (mobile experiment)
   ------------------------------------------------------------------------- */
.breakroom-story-toolbar {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem 0.45rem;
}
.breakroom-mode-toggle {
    display: none;
    gap: 0.2rem;
    padding: 0.14rem;
    border-radius: 9999px;
    background: rgba(10, 27, 51, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    justify-content: center;
    margin-inline: auto;
}
.breakroom-mode-toggle__btn {
    min-height: 1.55rem;
    padding: 0.16rem 0.75rem;
    border-radius: 9999px;
    border: none;
    background: transparent !important;
    color: rgba(255,255,255,0.82) !important;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}
.breakroom-mode-toggle__btn.is-active,
.breakroom-mode-toggle__btn[aria-pressed="true"],
html[data-theme="dark"] .breakroom-mode-toggle__btn.is-active,
html[data-theme="dark"] .breakroom-mode-toggle__btn[aria-pressed="true"] {
    background: #ffffff !important;
    color: #0a1b33 !important;
}
/* Quiet label in the old Swipe/List slot. Not a control. */
.breakroom-mode-beta {
    display: none;
    align-items: center;
    padding: 0.05rem 0.15rem 0.1rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    pointer-events: none;
    user-select: none;
}
/* Header "New post" pill removed — create is the bottom-docked + in swipe mode */

.breakroom-story-feed {
    display: none;
    position: relative;
    /* Full-bleed TikTok-style height — bottom nav + Create overlay the stage */
    --story-card-h: 100dvh;
}

@media (max-width: 1023px) {
    .breakroom-story-toolbar { display: flex; justify-content: center; width: 100%; }
    .breakroom-mode-toggle { display: inline-flex; justify-content: center; margin-inline: auto; }
    .breakroom-mode-beta { display: inline-flex; }

    /* Keep site top menu visible in swipe mode */
    html[data-breakroom-feed-mode="story"] #navbar-top {
        display: block !important;
        visibility: visible !important;
    }

    /* Clear the fixed site top nav, then fill the remaining viewport */
    html[data-breakroom-feed-mode="story"] main:has(.nurse-connect-layout),
    body:has(.nurse-connect-layout[data-breakroom-feed-mode="story"]) main {
        padding-top: var(--breakroom-top-nav, 3.3125rem) !important;
    }
    /* Swipe stage owns the viewport under the site top nav; feed tabs + bottom chrome overlay cards */
    .nurse-connect-layout[data-breakroom-feed-mode="story"],
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout {
        --breakroom-bottom-nav: 0px;
        /* Tablet: Create dock only; phones override for the full tab bar */
        --breakroom-bottom-chrome: calc(3.2rem + env(safe-area-inset-bottom, 0px));
        /* Approx tabs + mode toggle until JS measures #breakroomStickyHeader */
        --breakroom-top-chrome: 3.25rem;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .dt-center,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout .dt-center {
        position: relative;
        display: flex;
        flex-direction: column;
        height: calc(100dvh - var(--breakroom-top-nav, 3.3125rem));
        max-height: calc(100dvh - var(--breakroom-top-nav, 3.3125rem));
        overflow: hidden;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        background: #0a1b33;
    }
    /*
     * Overlay feed tabs on the stage (match bottom nav): transparent, no reserved band.
     * Dual-select html[data-…] for first-paint FOUC (early script sets html before layout attr sync).
     */
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        flex: none;
        z-index: 40;
        width: 100%;
        background: transparent !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Empty chrome passes vertical pans to cards; tabs/buttons re-enable below */
        pointer-events: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        isolation: isolate;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .nm-hero-surface,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .nm-hero-surface {
        display: none !important;
        pointer-events: none;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .breakroom-feed-header__inner,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .breakroom-feed-header__inner {
        /* Site top nav is outside this column — do not add a second 53px offset */
        padding-top: 0.2rem !important;
        padding-bottom: 0.15rem !important;
        position: relative;
        z-index: 2;
        background: transparent !important;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .dt-feed-tabs,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .breakroom-story-toolbar,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .dt-feed-tabs,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .breakroom-story-toolbar {
        pointer-events: auto !important;
        border-top: none !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
        background: transparent !important;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .breakroom-story-toolbar,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .breakroom-story-toolbar {
        justify-content: space-between !important;
        width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        box-sizing: border-box;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .breakroom-mode-toggle,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .breakroom-mode-toggle {
        margin-inline: 0;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .dt-feed-tabs,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .dt-feed-tabs {
        min-height: 2.55rem;
        padding: 0.2rem 0.35rem 0;
        gap: 0.1rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .dt-feed-tabs::-webkit-scrollbar,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .dt-feed-tabs::-webkit-scrollbar {
        display: none;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .dt-feed-tab,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .dt-feed-tab {
        display: inline-flex !important;
        align-items: center;
        flex: 0 0 auto;
        padding: 0.5rem 0.7rem !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        color: rgba(255, 255, 255, 0.78) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
        white-space: nowrap;
        pointer-events: auto !important;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .dt-feed-tab.feed-tab-active,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .dt-feed-tab.active,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .dt-feed-tab.feed-tab-active,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .dt-feed-tab.active {
        color: #ffffff !important;
        border-bottom: 2px solid #2ec4b6 !important;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .breakroom-mode-toggle,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .breakroom-mode-toggle {
        background: rgba(10, 27, 51, 0.28);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-color: rgba(255, 255, 255, 0.28);
        pointer-events: auto !important;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .breakroom-mode-toggle__btn,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .breakroom-mode-toggle__btn {
        color: rgba(255, 255, 255, 0.85) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
        pointer-events: auto !important;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .breakroom-mode-toggle__btn.is-active,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .breakroom-mode-toggle__btn[aria-pressed="true"],
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .breakroom-mode-toggle__btn.is-active,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout #breakroomStickyHeader .breakroom-mode-toggle__btn[aria-pressed="true"] {
        color: #0f2748 !important;
        background: #ffffff !important;
        text-shadow: none;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .breakroom-feed-empty,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout .breakroom-feed-empty {
        flex: 1 1 auto;
        color: #ffffff;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .breakroom-feed-empty__title,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout .breakroom-feed-empty__title {
        color: #ffffff;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .breakroom-feed-empty__body,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout .breakroom-feed-empty__body {
        color: rgba(255, 255, 255, 0.78);
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .breakroom-feed-empty__cta,
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout .breakroom-feed-empty__cta {
        background: #ffffff !important;
        color: #0a1b33 !important;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .breakroom-main-feed,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #posts-container,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .connect-feed-livewire-host,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #connectFeedLivewire,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .connect-feed-root,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .connect-feed-root > div {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        background: #0a1b33;
        padding: 0;
        margin: 0;
        border: none;
        box-shadow: none;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .breakroom-story-feed,
    html[data-breakroom-feed-mode="story"] .breakroom-story-feed {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        /* Instant snap — smooth scroll fights mandatory snap on mobile */
        scroll-behavior: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        /* Appending prefetched cards must never re-anchor the scroll pos */
        overflow-anchor: none;
        margin: 0 calc(-1 * var(--breakroom-mobile-gutter, 0.75rem));
        background: #0a1b33;
        border-radius: 0;
        scrollbar-width: none;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .breakroom-story-feed::-webkit-scrollbar {
        display: none;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .breakroom-classic-feed,
    html[data-breakroom-feed-mode="story"] .breakroom-classic-feed,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .breakroom-activation,
    html[data-breakroom-feed-mode="story"] .breakroom-activation,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .breakroom-intro-prompt,
    html[data-breakroom-feed-mode="story"] .breakroom-intro-prompt,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .breakroom-feed-create,
    html[data-breakroom-feed-mode="story"] .breakroom-feed-create,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .secondary-feed-grid,
    html[data-breakroom-feed-mode="story"] .secondary-feed-grid,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .breakroom-people-more,
    html[data-breakroom-feed-mode="story"] .breakroom-people-more,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #feedInfiniteSentinel,
    html[data-breakroom-feed-mode="story"] #feedInfiniteSentinel,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #loading-indicator,
    html[data-breakroom-feed-mode="story"] #loading-indicator {
        display: none !important;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="list"] .breakroom-story-feed {
        display: none !important;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="list"] .breakroom-classic-feed {
        display: block;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="list"] .dt-center,
    html[data-breakroom-feed-mode="list"] .nurse-connect-layout .dt-center {
        height: 100dvh;
        max-height: 100dvh;
        padding-top: 0;
    }

    /* In story mode, tighten sticky header to tabs + mode toggle + Jobs */
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .breakroom-feed-header__top,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .breakroom-feed-header__composer,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .dt-composer-inner,
    .nurse-connect-layout[data-breakroom-feed-mode="story"] #breakroomStickyHeader .breakroom-jobs-hook {
        display: none !important;
    }
    .nurse-connect-layout[data-breakroom-feed-mode="story"] .breakroom-story-toolbar__jobs {
        display: inline-flex;
        align-items: center;
    }
}
@media (max-width: 767px) {
    .nurse-connect-layout[data-breakroom-feed-mode="story"],
    html[data-breakroom-feed-mode="story"] .nurse-connect-layout {
        --breakroom-bottom-chrome: calc(3.5rem + env(safe-area-inset-bottom, 0px));
        --breakroom-top-chrome: 3.25rem;
    }
}

/* FAB lives on <body>; hide in swipe when Create is a bottom-nav peer (same MQ as story-active) */
@media (max-width: 1023px) {
    html[data-breakroom-feed-mode="story"] .breakroom-post-fab {
        display: none !important;
    }
}

/* X-style scroll-hide chrome in Feed (list) mode */
#navbar-top,
.marketing-nav-top,
#breakroomStickyHeader {
    transform: translate3d(0, 0, 0);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
#navbar-top.is-scroll-hidden,
.marketing-nav-top.is-scroll-hidden,
html[data-breakroom-feed-mode="list"].breakroom-list-scroll-hidden #navbar-top,
html[data-breakroom-feed-mode="list"].breakroom-list-scroll-hidden .marketing-nav-top,
html[data-breakroom-feed-mode="list"][data-breakroom-scroll-chrome="hidden"] #navbar-top,
html[data-breakroom-feed-mode="list"][data-breakroom-scroll-chrome="hidden"] .marketing-nav-top {
    transform: translate3d(0, -100%, 0) !important;
    pointer-events: none !important;
}
html:not([data-breakroom-feed-mode="story"]) #breakroomStickyHeader.is-scroll-hidden,
html[data-breakroom-feed-mode="list"].breakroom-list-scroll-hidden #breakroomStickyHeader,
html[data-breakroom-feed-mode="list"][data-breakroom-scroll-chrome="hidden"] #breakroomStickyHeader,
.nurse-connect-layout[data-breakroom-feed-mode="list"] #breakroomStickyHeader.is-scroll-hidden {
    transform: translate3d(0, -105%, 0) !important;
    pointer-events: none !important;
}
html:not([data-breakroom-feed-mode="story"]) #breakroomStickyHeader.is-scroll-hidden *,
html[data-breakroom-feed-mode="list"].breakroom-list-scroll-hidden #breakroomStickyHeader *,
html[data-breakroom-feed-mode="list"][data-breakroom-scroll-chrome="hidden"] #breakroomStickyHeader * {
    pointer-events: none !important;
}
#navbar-bottom.is-scroll-hidden,
.marketing-nav-bottom.is-scroll-hidden,
html[data-breakroom-feed-mode="list"].breakroom-list-scroll-hidden #navbar-bottom,
html[data-breakroom-feed-mode="list"].breakroom-list-scroll-hidden .marketing-nav-bottom,
html[data-breakroom-feed-mode="list"][data-breakroom-scroll-chrome="hidden"] #navbar-bottom,
html[data-breakroom-feed-mode="list"][data-breakroom-scroll-chrome="hidden"] .marketing-nav-bottom {
    transform: translate3d(0, calc(100% + env(safe-area-inset-bottom, 0px)), 0) !important;
    pointer-events: none !important;
}
.breakroom-post-fab.is-scroll-hidden,
#breakroomPostFab.is-scroll-hidden,
html[data-breakroom-feed-mode="list"].breakroom-list-scroll-hidden .breakroom-post-fab,
html[data-breakroom-feed-mode="list"].breakroom-list-scroll-hidden #breakroomPostFab,
html[data-breakroom-feed-mode="list"][data-breakroom-scroll-chrome="hidden"] .breakroom-post-fab,
html[data-breakroom-feed-mode="list"][data-breakroom-scroll-chrome="hidden"] #breakroomPostFab {
    transform: translate3d(0, calc(100% + 4.5rem + env(safe-area-inset-bottom, 0px)), 0) scale(0.9) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Swipe create: SSR peer in #navbar-bottom (hidden in list; shown when html is story+active) */
.breakroom-story-create {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    border: none;
    background: transparent !important;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    font-family: inherit;
    position: relative;
    width: auto;
    min-width: 0;
}
/* Equal-column flex with Home / Jobs / Create / Breakroom / Messages */
.marketing-nav-bottom .breakroom-story-create,
#navbar-bottom .breakroom-story-create {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 53px;
    z-index: 1;
}
.breakroom-story-create__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Match mobile bottom-nav .linkedin-nav-item__icon (1.375rem) */
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.3rem;
    background: linear-gradient(135deg, #1fa896 0%, #5eead4 48%, #2ec4b6 100%);
    color: #0a1b33;
    box-shadow: none;
    transition: transform 0.16s ease, filter 0.16s ease;
    flex-shrink: 0;
}
.breakroom-story-create__plus svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
}
.breakroom-story-create__label {
    margin-top: 0.05rem;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.breakroom-story-create:hover .breakroom-story-create__plus {
    filter: brightness(1.06);
}
.breakroom-story-create:active .breakroom-story-create__plus {
    transform: scale(0.94);
}
.breakroom-story-create:focus-visible {
    outline: none;
}
.breakroom-story-create:focus-visible .breakroom-story-create__plus {
    box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.55);
}
@media (max-width: 1023px) {
    /* Only when mounted as a nav peer — list mode keeps Create hidden (FAB remains) */
    html[data-breakroom-feed-mode="story"].breakroom-story-active .marketing-nav-bottom .breakroom-story-create,
    html[data-breakroom-feed-mode="story"].breakroom-story-active #navbar-bottom .breakroom-story-create {
        display: inline-flex;
    }
    /* Overlay chrome: cards swipe underneath; icons sit on media (no solid/opaque band) */
    html[data-breakroom-feed-mode="story"].breakroom-story-active .marketing-nav-bottom,
    html[data-breakroom-feed-mode="story"].breakroom-story-active #navbar-bottom {
        /* Beat dark-theme navy !important fills in app.css */
        background: transparent !important;
        border-top-color: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        /* Let empty chrome space pass vertical pans to the story stage under the icons */
        pointer-events: none;
    }
    /* No gradient scrim — keep ::before inert so cards show through */
    html[data-breakroom-feed-mode="story"].breakroom-story-active .marketing-nav-bottom::before,
    html[data-breakroom-feed-mode="story"].breakroom-story-active #navbar-bottom::before {
        content: none;
        display: none;
        background: none;
    }
    html[data-breakroom-feed-mode="story"].breakroom-story-active .marketing-nav-bottom .linkedin-nav-item,
    html[data-breakroom-feed-mode="story"].breakroom-story-active #navbar-bottom .linkedin-nav-item {
        position: relative;
        z-index: 1;
        color: rgba(255, 255, 255, 0.78);
        pointer-events: auto;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    }
    html[data-breakroom-feed-mode="story"].breakroom-story-active .marketing-nav-bottom .linkedin-nav-item.active,
    html[data-breakroom-feed-mode="story"].breakroom-story-active #navbar-bottom .linkedin-nav-item.active {
        color: #ffffff;
    }
    html[data-breakroom-feed-mode="story"].breakroom-story-active .marketing-nav-bottom .linkedin-nav-item__badge,
    html[data-breakroom-feed-mode="story"].breakroom-story-active #navbar-bottom .linkedin-nav-item__badge {
        box-shadow: 0 0 0 2px rgba(10, 27, 51, 0.45);
    }
    html[data-breakroom-feed-mode="story"].breakroom-story-active .marketing-nav-bottom .breakroom-story-create,
    html[data-breakroom-feed-mode="story"].breakroom-story-active #navbar-bottom .breakroom-story-create {
        pointer-events: auto;
    }
}
/* Dim competing chrome while the immersive create sheet is open */
html.breakroom-story-compose-open .breakroom-story-create {
    visibility: hidden;
    pointer-events: none;
}
html.breakroom-story-compose-open #navbar-bottom,
html.breakroom-story-compose-open .marketing-nav-bottom {
    transform: translate3d(0, calc(100% + env(safe-area-inset-bottom, 0px)), 0) !important;
    pointer-events: none !important;
}
html.breakroom-story-compose-open .breakroom-story-feed {
    overflow: hidden;
}
html.breakroom-story-compose-open .nm-consent {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Site footer sits below main and paints a strip above the bottom tab bar on Breakroom */
body:has(.nurse-connect-layout) .site-footer {
    display: none !important;
}
@media (max-width: 1023px) {
    body:has(.nurse-connect-layout[data-breakroom-feed-mode="story"]) {
        background: #0a1b33;
    }
    body:has(.nurse-connect-layout[data-breakroom-feed-mode="story"]) main:has(.nurse-connect-layout) {
        background: #0a1b33;
        /* Top nav is visible — keep normal top offset, clear bottom strip only */
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media (min-width: 1024px) {
    .breakroom-story-feed { display: none !important; }
    .breakroom-story-toolbar { display: none !important; }
    .breakroom-mode-toggle { display: none !important; }
    .breakroom-classic-feed { display: block; }
}

.breakroom-story-card {
    --story-ink: #ffffff;
    --story-muted: rgba(255, 255, 255, 0.84);
    --story-accent: #5eead4;
    --story-cta-bg: #ffffff;
    --story-cta-fg: #0f2748;
    --story-rail-active: #5eead4;
    --story-wash-top: rgba(255, 255, 255, 0.14);
    --story-wash-bottom: rgba(0, 0, 0, 0.48);
    /* Layout rhythm — keep rail/caption/content in one system */
    --story-pad-x: 1rem;
    /* Clear overlaid feed tabs; also keeps rail avatar under overflow:hidden */
    --story-pad-top: calc(
        var(--breakroom-top-chrome, 3.25rem)
        + 0.55rem
    );
    /* Clear overlaid bottom nav + Create dock (cards themselves go full-bleed) */
    --story-pad-bottom: calc(
        var(--breakroom-bottom-chrome, calc(3.5rem + env(safe-area-inset-bottom, 0px)))
        + 0.55rem
    );
    --story-rail-w: 3.15rem;
    --story-rail-gap: 0.42rem;
    /* Keep rail + avatar/badge clear of overflow:hidden on the card's right edge */
    --story-rail-inset: max(0.75rem, env(safe-area-inset-right, 0px));
    --story-rail-reserve: calc(var(--story-rail-w) + var(--story-rail-inset) + 0.55rem);
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
    /* TikTok-style rendering window: the browser skips layout/paint for
       offscreen cards while the fixed card height keeps snap points exact.
       Without this, a 72-card swipe window forces 72 full gradient cards
       through layout on every swipe. */
    content-visibility: auto;
    contain-intrinsic-size: auto var(--story-card-h);
    overflow-anchor: none;
    flex: 0 0 var(--story-card-h);
    flex-shrink: 0;
    width: 100%;
    height: var(--story-card-h);
    min-height: var(--story-card-h);
    max-height: var(--story-card-h);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    color: var(--story-ink);
    background: #0f2748;
    /* Prevent double-click text selection from washing the whole card white */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
/* Progressive paint priority from breakroom-story-feed.js active ± near band */
.breakroom-story-card.is-active-story,
.breakroom-story-card.is-near-story {
    content-visibility: visible;
}
.breakroom-story-card ::selection,
.breakroom-story-card *::selection {
    background: transparent !important;
    color: inherit !important;
}
.nurse-connect-layout .breakroom-story-card:hover,
.nurse-connect-layout .breakroom-story-card:active,
.nurse-connect-layout .breakroom-story-card:focus,
.nurse-connect-layout .posts-feed article.breakroom-story-card:hover,
.nurse-connect-layout .posts-feed article.breakroom-story-card:active,
html[data-theme="dark"] .nurse-connect-layout .breakroom-story-card:hover,
html[data-theme="dark"] .nurse-connect-layout .posts-feed article.breakroom-story-card:hover {
    background-color: transparent !important;
    /* Keep the authored inline gradient / solid bg; do not replace with surface white */
    filter: none !important;
    opacity: 1 !important;
}

.breakroom-story-card input,
.breakroom-story-card textarea,
.breakroom-story-comments input,
.breakroom-story-comments textarea {
    -webkit-user-select: text;
    user-select: text;
}
.breakroom-story-card[data-story-ink="dark"] {
    --story-ink: #0a1b33;
    --story-muted: rgba(10, 27, 51, 0.72);
    --story-accent: #0f7b6e;
    --story-cta-bg: #0f2748;
    --story-cta-fg: #ffffff;
    --story-rail-active: #0f7b6e;
    --story-wash-top: rgba(255, 255, 255, 0.28);
    --story-wash-bottom: rgba(255, 255, 255, 0.42);
}
.breakroom-story-card__wash {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 32%, var(--story-wash-top), transparent 52%),
        linear-gradient(to top, var(--story-wash-bottom) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
/* Let the author's chosen background dominate */
.breakroom-story-card--custom .breakroom-story-card__wash {
    opacity: 0.42;
}
.breakroom-story-card--custom[data-story-ink="dark"] .breakroom-story-card__wash {
    opacity: 0.55;
}
.breakroom-story-card__stage {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Content owns the middle; caption docks to bottom; rail reserved on right */
    padding:
        var(--story-pad-top)
        var(--story-rail-reserve)
        var(--story-pad-bottom)
        var(--story-pad-x);
    gap: 0.85rem;
}
.breakroom-story-card--dotd .breakroom-story-card__stage,
.breakroom-story-card--job .breakroom-story-card__stage,
.breakroom-story-card--store .breakroom-story-card__stage,
.breakroom-story-card--event .breakroom-story-card__stage,
.breakroom-story-card--suggest .breakroom-story-card__stage,
.breakroom-story-card--person .breakroom-story-card__stage,
.breakroom-story-card--group .breakroom-story-card__stage,
.breakroom-story-card--activity .breakroom-story-card__stage {
    /* Promo cards have no action rail — reclaim the right gutter */
    --story-rail-reserve: var(--story-pad-x);
    padding-left: 1.15rem;
    padding-right: 1.15rem;
}
.breakroom-story-card__center {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Slight optical lift so body isn't dead-center against the caption band */
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
    max-width: 34rem;
    width: 100%;
    margin: 0 auto;
    padding: 0.25rem 0 0.15rem;
    overflow: hidden;
}
.breakroom-story-card__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 34rem;
}
.breakroom-story-card__topic {
    flex-shrink: 0;
    margin: 0;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--story-accent) !important;
}
.breakroom-story-card[data-story-ink="dark"] .breakroom-story-card__topic {
    background: rgba(15, 39, 72, 0.1);
    border-color: rgba(15, 39, 72, 0.18);
}
.breakroom-story-card__body,
.breakroom-story-card__body p,
.breakroom-story-card__body a,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__body,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__body p,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__body a {
    color: var(--story-ink) !important;
}
.breakroom-story-card__body {
    text-align: center;
    width: 100%;
    max-width: 22em;
    max-height: 100%;
    margin-inline: auto;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -0.01em;
    font-size: var(--story-body-size, clamp(1.35rem, 5.5vw, 1.85rem));
    text-wrap: balance;
}
.breakroom-story-card__body[data-body-size="short"] {
    font-size: var(--story-body-size, clamp(1.5rem, 6vw, 2rem));
    max-width: 18em;
}
.breakroom-story-card__body[data-body-size="mid"] {
    font-size: var(--story-body-size, clamp(1.15rem, 4.6vw, 1.45rem));
    max-width: 24em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
}
.breakroom-story-card__body[data-body-size="long"] {
    font-size: var(--story-body-size, clamp(0.95rem, 3.8vw, 1.15rem));
    line-height: 1.4;
    font-weight: 650;
    max-width: 26em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 12;
}
.breakroom-story-card__body a {
    text-decoration: underline;
    text-underline-offset: 0.12em;
}
.breakroom-story-card__body p { margin: 0 0 0.55rem; }
.breakroom-story-card__body p:last-child { margin-bottom: 0; }
.breakroom-story-card__body--prompt {
    font-size: clamp(1.45rem, 5.8vw, 2rem);
}
.breakroom-story-card__hint,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__hint {
    flex-shrink: 0;
    margin: 0;
    font-size: 0.82rem;
    color: var(--story-muted) !important;
}
.breakroom-story-card__cta,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__cta {
    flex-shrink: 0;
    align-self: center;
    min-height: 2.65rem;
    padding: 0.52rem 1.3rem;
    border: none;
    border-radius: 9999px;
    background: var(--story-cta-bg) !important;
    color: var(--story-cta-fg) !important;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.breakroom-story-card__cta:hover {
    filter: brightness(1.05);
}
.breakroom-story-card__author {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
    /* Keep caption clear of the rail column without over-padding */
    padding-right: 0.15rem;
}
.breakroom-story-card[data-story-ink="dark"] .breakroom-story-card__author {
    background: transparent;
    border: none;
}
.breakroom-story-card__author:empty {
    display: none;
}
/* Author (left) and promo stack (right) share the caption band, inside the rail reserve */
.breakroom-story-card__caption {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.55rem;
    width: 100%;
    min-width: 0;
}
.breakroom-story-card__caption > .breakroom-story-card__author {
    flex: 1 1 56%;
    width: auto;
    min-width: 52%;
    max-width: 100%;
}
.breakroom-story-card__caption:has(> .breakroom-story-card__author:empty) .breakroom-story-promos {
    margin-left: auto;
}
.breakroom-story-promos {
    flex: 0 1 11rem;
    width: min(44%, 11rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0.28rem;
    min-width: 0;
    pointer-events: auto;
}
.breakroom-story-promos__row {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    min-width: 0;
    padding: 0.2rem 0.36rem 0.2rem 0.2rem;
    border-radius: 0.55rem;
    background: rgba(8, 22, 42, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--story-ink) !important;
    text-decoration: none !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.breakroom-story-promos__row:hover {
    background: rgba(8, 22, 42, 0.56);
    border-color: rgba(255, 255, 255, 0.28);
}
.breakroom-story-card[data-story-ink="dark"] .breakroom-story-promos__row {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(15, 39, 72, 0.14);
}
@media (max-width: 400px) {
    .breakroom-story-card__caption {
        gap: 0.4rem;
    }
    .breakroom-story-card__caption > .breakroom-story-card__author {
        flex: 1 1 58%;
        min-width: 55%;
        gap: 0.42rem;
        padding-right: 0;
    }
    .breakroom-story-card__name,
    html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__name {
        font-size: 0.9rem;
    }
    .breakroom-story-card__meta,
    .breakroom-story-card__meta span,
    html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__meta,
    html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__meta span {
        font-size: 0.69rem;
    }
    .breakroom-story-promos {
        flex: 0 1 8.25rem;
        width: min(40%, 8.25rem);
        gap: 0.22rem;
    }
    .breakroom-story-promos__row {
        padding: 0.15rem 0.28rem 0.15rem 0.15rem;
        gap: 0.25rem;
        border-radius: 0.45rem;
    }
    .breakroom-story-promos__thumb {
        width: 1.32rem;
        height: 1.32rem;
        border-radius: 0.28rem;
    }
    .breakroom-story-promos__kicker,
    html[data-theme="dark"] .breakroom-story-card .breakroom-story-promos__kicker {
        font-size: 0.54rem;
    }
    .breakroom-story-promos__name,
    html[data-theme="dark"] .breakroom-story-card .breakroom-story-promos__name {
        font-size: 0.64rem;
    }
    .breakroom-story-promos__meta {
        display: none;
    }
}
.breakroom-story-promos__thumb {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.32rem;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.16);
}
.breakroom-story-promos__thumb--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--story-ink) !important;
    background: rgba(255, 255, 255, 0.16);
}
.breakroom-story-card[data-story-ink="dark"] .breakroom-story-promos__thumb--fallback {
    background: rgba(15, 39, 72, 0.1);
}
.breakroom-story-promos__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
}
.breakroom-story-promos__kicker,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-promos__kicker {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--story-accent) !important;
}
.breakroom-story-promos__name,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-promos__name {
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--story-ink) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.breakroom-story-card[data-story-ink="dark"] .breakroom-story-promos__name {
    text-shadow: none;
}
.breakroom-story-promos__meta,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-promos__meta {
    font-size: 0.62rem;
    line-height: 1.15;
    color: var(--story-muted) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.breakroom-story-card__avatar-link {
    flex-shrink: 0;
    line-height: 0;
}
.breakroom-story-card__avatar {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 9999px;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.85);
}
.breakroom-story-card__avatar--badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #5eead4;
    color: #0a1b33 !important;
    font-weight: 900;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.breakroom-story-card__author-meta {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
}
.breakroom-story-card__name,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__name {
    display: block;
    color: var(--story-ink) !important;
    font-weight: 800;
    font-size: 0.98rem;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.breakroom-story-card[data-story-ink="dark"] .breakroom-story-card__name {
    text-shadow: none;
}
.breakroom-story-card__meta,
.breakroom-story-card__meta span,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__meta,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__meta span {
    margin: 0;
    font-size: 0.74rem;
    color: var(--story-muted) !important;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.breakroom-story-card__tag,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__tag {
    display: inline-block;
    margin-top: 0.02rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--story-accent) !important;
}
.breakroom-story-card__poll {
    flex-shrink: 0;
    margin-top: 0.15rem;
    max-width: min(100%, 22rem);
    max-height: 38%;
    overflow: auto;
}

.breakroom-story-rail {
    position: absolute;
    right: var(--story-rail-inset);
    /* Inset from card top so a tall rail can't push the avatar past overflow:hidden */
    top: var(--story-pad-top);
    bottom: var(--story-pad-bottom);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--story-rail-gap);
    width: var(--story-rail-w);
    padding: 0;
    background: transparent;
    border: none;
    pointer-events: none;
}

.breakroom-story-card__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
}
/* Rail already owns Message — keep Connect / status near the name only */
.breakroom-story-card__author .breakroom-story-card__social-pill.is-message {
    display: none !important;
}
/* Collapse the social row when Message was the only pill (now hidden) */
.breakroom-story-card__author .breakroom-story-card__social:not(:has(.is-connect, .is-connected, .is-pending)) {
    display: none;
}
.breakroom-story-card__social-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.85rem;
    padding: 0.3rem 0.72rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff !important;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.breakroom-story-card__social-pill.is-connect {
    background: var(--connect-teal, #127d72);
    border-color: var(--connect-teal, #127d72);
}
.breakroom-story-card__social-pill.is-message {
    background: rgba(255, 255, 255, 0.18);
}
.breakroom-story-card__social-pill.is-connected,
.breakroom-story-card__social-pill.is-pending {
    cursor: default;
    opacity: 0.92;
}
.breakroom-story-card[data-story-ink="dark"] .breakroom-story-card__social-pill {
    border-color: rgba(15, 39, 72, 0.25);
    background: rgba(15, 39, 72, 0.08);
    color: #0f2748 !important;
}
.breakroom-story-card[data-story-ink="dark"] .breakroom-story-card__social-pill.is-connect {
    background: var(--connect-teal, #127d72);
    border-color: var(--connect-teal, #127d72);
    color: #ffffff !important;
}
.breakroom-story-card[data-story-ink="dark"] .breakroom-story-card__social-pill.is-message {
    background: rgba(15, 39, 72, 0.12);
    color: #0f2748 !important;
}
.breakroom-story-rail__avatar-stack {
    pointer-events: auto;
    position: relative;
    display: inline-flex;
    /* Extra bottom room so follow badge doesn't collide with Like */
    margin-bottom: 0.55rem;
    padding-bottom: 0.2rem;
}
.breakroom-story-rail__follow-badge {
    border: none;
    padding: 0;
    cursor: pointer;
}
.breakroom-story-rail__follow-badge.is-connected {
    background: #2ec4b6;
    cursor: default;
}
.breakroom-story-rail__follow-badge.is-pending {
    background: #64748b;
    cursor: default;
    font-size: 0.7rem;
}
a.breakroom-story-rail__btn--link {
    text-decoration: none !important;
}
.breakroom-story-rail__avatar-wrap {
    pointer-events: auto;
    position: relative;
    display: inline-flex;
    margin-bottom: 0;
    text-decoration: none;
}
/* News cards use wrap without stack — keep the same optical gap before actions */
.breakroom-story-rail > .breakroom-story-rail__avatar-wrap {
    margin-bottom: 0.55rem;
}
.breakroom-story-rail__avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    background: #0f2748;
}
.breakroom-story-rail__follow-badge {
    position: absolute;
    left: 50%;
    bottom: -0.38rem;
    transform: translateX(-50%);
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 9999px;
    background: var(--connect-teal, #127d72);
    color: #ffffff !important;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #ffffff;
}
.breakroom-story-rail__btn,
.breakroom-story-rail__btn span,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-rail__btn,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-rail__btn span {
    pointer-events: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.12rem 0;
    border: none;
    background: transparent !important;
    color: var(--story-ink) !important;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.breakroom-story-card[data-story-ink="dark"] .breakroom-story-rail__btn,
.breakroom-story-card[data-story-ink="dark"] .breakroom-story-rail__btn span {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
.breakroom-story-rail__btn svg {
    width: 1.7rem;
    height: 1.7rem;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.38));
}
.breakroom-story-card[data-story-ink="dark"] .breakroom-story-rail__btn svg {
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.45));
}
.breakroom-story-rail__btn.is-active,
.breakroom-story-rail__btn.is-active span,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-rail__btn.is-active,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-rail__btn.is-active span {
    color: var(--story-rail-active) !important;
}
.breakroom-story-rail__btn[data-story-action="like"].is-active,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-rail__btn[data-story-action="like"].is-active {
    color: #fe2c55 !important;
}

/* Short phones: keep the rail scannable without overlapping caption */
@media (max-height: 720px) {
    .breakroom-story-card {
        --story-rail-gap: 0.28rem;
        --story-pad-top: calc(
            var(--breakroom-top-chrome, 3.25rem)
            + 0.35rem
        );
        --story-pad-bottom: calc(
            var(--breakroom-bottom-chrome, calc(3.5rem + env(safe-area-inset-bottom, 0px)))
            + 0.35rem
        );
    }
    .breakroom-story-rail__btn,
    .breakroom-story-rail__btn span,
    html[data-theme="dark"] .breakroom-story-card .breakroom-story-rail__btn,
    html[data-theme="dark"] .breakroom-story-card .breakroom-story-rail__btn span {
        min-height: 2.5rem;
        gap: 0.08rem;
        font-size: 0.64rem;
    }
    .breakroom-story-rail__btn svg {
        width: 1.55rem;
        height: 1.55rem;
    }
    .breakroom-story-rail__avatar-stack,
    .breakroom-story-rail > .breakroom-story-rail__avatar-wrap {
        margin-bottom: 0.4rem;
    }
    .breakroom-story-promos {
        gap: 0.16rem;
    }
    .breakroom-story-promos__meta {
        display: none;
    }
}

/* Shared a11y helper for portaled Breakroom sheets/modals */
.breakroom-story-comments .visually-hidden,
.add-post-modal .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.breakroom-story-comments {
    position: fixed;
    inset: 0;
    /* Above marketing bottom nav + privacy consent (2147483646) */
    z-index: 2147483647;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    margin: 0;
    pointer-events: auto;
}
.breakroom-story-comments[hidden] { display: none !important; }
.breakroom-story-comments__backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(15, 39, 72, 0.42);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.breakroom-story-comments__sheet {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 32rem;
    height: min(68dvh, 36rem);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 2.75rem);
    min-height: min(48dvh, 26rem);
    overflow: hidden;
    background: var(--connect-surface, #ffffff);
    color: var(--connect-text, #0f1419);
    border: 1px solid var(--connect-border, #e0ddd6);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 0;
    box-shadow: 0 -10px 36px rgba(15, 39, 72, 0.16);
    animation: breakroomStoryCommentsIn 0.26s ease-out;
}
@keyframes breakroomStoryCommentsIn {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}
.breakroom-story-comments__grab {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0.6rem 0 0.1rem;
}
.breakroom-story-comments__grab span {
    width: 2.25rem;
    height: 0.22rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--connect-text, #0f1419) 18%, transparent);
}
.breakroom-story-comments__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 0 0 auto;
    padding: 0.35rem 0.65rem 0.7rem 1rem;
    border-bottom: 1px solid var(--connect-border, #e7eef5);
}
.breakroom-story-comments__title,
.breakroom-story-comments__head strong {
    margin: 0;
    font-size: 0.975rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--connect-text, #0f1419);
}
.breakroom-story-comments__title .connect-post-comments-count,
.breakroom-story-comments__head .connect-post-comments-count {
    font-weight: 600;
    color: var(--connect-text-muted, #536471);
}
.breakroom-story-comments__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--connect-text-muted, #536471);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.breakroom-story-comments__close:hover {
    color: var(--connect-text, #0f1419);
}
.breakroom-story-comments__close:focus-visible {
    outline: none;
    color: var(--connect-text, #0f1419);
    box-shadow: var(--connect-focus-ring);
}
.breakroom-story-comments__list,
.breakroom-story-comments .connect-post-comments-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    padding: 0.85rem 1rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.breakroom-story-comments__list[data-state="loading"]::before,
.breakroom-story-comments__list[data-state="error"]::before,
.breakroom-story-comments__list[data-state="auth"]::before,
.breakroom-story-comments__list[data-state="ready"]::before,
.breakroom-story-comments .connect-post-comments-list[data-state="loading"]::before,
.breakroom-story-comments .connect-post-comments-list[data-state="error"]::before,
.breakroom-story-comments .connect-post-comments-list[data-state="auth"]::before,
.breakroom-story-comments .connect-post-comments-list[data-state="ready"]::before {
    content: none !important;
    display: none !important;
}
.breakroom-story-comments__list:not(:has(.connect-post-comment-item))::before,
.breakroom-story-comments .connect-post-comments-list:not(:has(.connect-post-comment-item))::before {
    content: attr(data-empty-label);
    display: block;
    margin: auto;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--connect-text-muted, #7a8a9a);
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 15.5rem;
}
.breakroom-story-comments__list:not([data-empty-label]):not(:has(.connect-post-comment-item))::before,
.breakroom-story-comments .connect-post-comments-list:not([data-empty-label]):not(:has(.connect-post-comment-item))::before {
    content: "No comments yet — say something.";
}
.breakroom-story-comments__skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.2rem 0 0.6rem;
}
.breakroom-story-comments__skeleton span {
    display: block;
    height: 2.5rem;
    border-radius: 12px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--connect-text, #0f1419) 8%, var(--connect-surface, #fff)) 25%, color-mix(in srgb, var(--connect-text, #0f1419) 14%, var(--connect-surface, #fff)) 50%, color-mix(in srgb, var(--connect-text, #0f1419) 8%, var(--connect-surface, #fff)) 75%);
    background-size: 200% 100%;
    animation: breakroomCommentShimmer 1.1s ease-in-out infinite;
}
.breakroom-story-comments__skeleton span:nth-child(2) { width: 88%; }
.breakroom-story-comments__skeleton span:nth-child(3) { width: 70%; }
@keyframes breakroomCommentShimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}
.breakroom-story-comments__status {
    margin: auto;
    padding: 1.5rem 0.5rem;
    text-align: center;
    color: var(--connect-text-muted, #536471);
    font-size: 0.9rem;
    line-height: 1.45;
}
.breakroom-story-comments__status a {
    color: var(--connect-teal, #127d72);
    font-weight: 700;
}
.breakroom-story-comments__retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
    min-height: 2.5rem;
    padding: 0 1rem;
    border: none;
    border-radius: 999px;
    background: var(--connect-blue, #1d9bf0);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.breakroom-story-comments__notice {
    margin: 0;
    padding: 0.45rem 1rem 0;
    color: #b42318;
    font-size: 0.8125rem;
    line-height: 1.35;
}
.breakroom-story-comments__notice[hidden] { display: none !important; }
.breakroom-story-comments .connect-post-comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.65rem;
    margin-top: 0.28rem;
}
.breakroom-story-comments .connect-post-comment-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2rem;
    padding: 0.15rem 0.15rem;
    border: none;
    background: transparent;
    color: var(--connect-text-muted, #536471);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}
.breakroom-story-comments .connect-post-comment-action--report {
    display: none !important;
}
.breakroom-story-comments .connect-post-comment-action--like.connect-post-comment-action-active {
    color: #e74c3c;
}
.breakroom-story-comments .connect-post-comment-action--dislike.connect-post-comment-action-dislike-active {
    color: var(--connect-text, #0f1419);
}
.breakroom-story-comments .connect-post-reply-form,
.breakroom-story-comments .connect-post-reply-form.is-open {
    display: none !important;
}
.connect-post-comments-more {
    align-self: center;
    margin: 0.25rem auto 0.35rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--connect-border, #d5dee8);
    background: transparent;
    color: var(--connect-text, #0f1419);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}
.connect-post-comments-more:disabled { opacity: 0.6; cursor: progress; }
.breakroom-story-comments .connect-post-comment-replies {
    margin-top: 0.4rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--connect-border, #e7eef5);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.breakroom-story-comments__composer,
.breakroom-story-comments .connect-post-comment-form,
.breakroom-story-comments .connect-post-comment-login {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.28rem;
    margin: 0;
    padding: 0.45rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--connect-border, #e7eef5);
    background: var(--connect-surface, #ffffff);
}
.breakroom-story-comments__replying {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    min-height: 1.5rem;
    padding: 0.05rem 0.1rem 0 2.55rem;
    color: var(--connect-text-muted, #536471);
    font-size: 0.75rem;
    line-height: 1.3;
}
.breakroom-story-comments__replying[hidden] { display: none !important; }
.breakroom-story-comments__replying-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.breakroom-story-comments__replying-label b {
    font-weight: 700;
    color: var(--connect-text, #0f1419);
}
.breakroom-story-comments__reply-cancel {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: auto;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--connect-text-muted, #536471);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.breakroom-story-comments__reply-cancel:hover {
    color: var(--connect-text, #0f1419);
    background: color-mix(in srgb, var(--connect-text, #0f1419) 6%, transparent);
}
.breakroom-story-comments__reply-cancel:focus-visible {
    outline: none;
    box-shadow: var(--connect-focus-ring);
}
.breakroom-story-comments__composer-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.12rem 0.2rem 0.12rem 0.35rem;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--connect-text, #0f1419) 5.5%, transparent);
}
.breakroom-story-comments__avatar {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    border-radius: 999px;
    object-fit: cover;
    background: color-mix(in srgb, var(--connect-text, #0f1419) 8%, var(--connect-surface, #fff));
}
.breakroom-story-comments .connect-post-comment-login {
    flex-direction: row;
    align-items: center;
    min-height: 2.75rem;
    color: var(--connect-text-muted, #536471);
    font-size: 0.9rem;
    line-height: 1.35;
}
.breakroom-story-comments .connect-post-comment-login a {
    color: var(--connect-teal, #127d72);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.breakroom-story-comments .connect-post-comment-login a:focus-visible {
    outline: none;
    box-shadow: var(--connect-focus-ring);
    border-radius: 4px;
}
.breakroom-story-comments .connect-post-comment-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.25rem;
    margin: 0;
    padding: 0.4rem 0.1rem;
    font-size: 16px;
    line-height: 1.35;
    border: none !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--connect-text, #0f1419) !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none;
    caret-color: var(--connect-text, #0f1419);
    -webkit-tap-highlight-color: transparent;
}
.breakroom-story-comments .connect-post-comment-input::placeholder {
    color: var(--connect-text-muted, #536471) !important;
    opacity: 0.8;
}
.breakroom-story-comments .connect-post-comment-input:focus,
.breakroom-story-comments .connect-post-comment-input:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
.breakroom-story-comments .connect-post-comment-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent !important;
    color: color-mix(in srgb, var(--connect-text-muted, #536471) 78%, transparent) !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.breakroom-story-comments .connect-post-comment-submit:not(:disabled) {
    color: var(--connect-accent, var(--connect-teal, #127d72)) !important;
}
.breakroom-story-comments .connect-post-comment-submit:hover:not(:disabled) {
    background: color-mix(in srgb, var(--connect-accent, #1d9bf0) 10%, transparent) !important;
}
.breakroom-story-comments .connect-post-comment-submit:focus-visible {
    outline: none;
    box-shadow: var(--connect-focus-ring);
}
.breakroom-story-comments .connect-post-comment-submit:disabled {
    opacity: 1;
    cursor: default;
}
.breakroom-story-comments .connect-post-comment-item {
    padding: 0;
}
.breakroom-story-comments .connect-post-comment-body {
    display: block;
    line-height: 1.45;
}
.breakroom-story-comments .connect-post-comment-author {
    color: var(--connect-text, #0f1419) !important;
    font-weight: 700;
    font-size: 0.875rem;
    margin-right: 0.35rem;
}
.breakroom-story-comments .connect-post-comment-text {
    color: color-mix(in srgb, var(--connect-text, #0f1419) 88%, transparent) !important;
    font-size: 0.9rem;
    font-weight: 450;
}
@media (min-width: 600px) {
    .breakroom-story-comments {
        align-items: center;
        padding: 1.25rem;
    }
    .breakroom-story-comments__sheet {
        height: min(70dvh, 34rem);
        max-height: min(70dvh, 34rem);
        min-height: 22rem;
        border-radius: 18px;
        border-bottom: 1px solid var(--connect-border, #e0ddd6);
        box-shadow: var(--connect-shadow-lg, 0 8px 24px rgb(15 39 72 / 0.12));
        animation-name: breakroomStoryCommentsInDesk;
    }
    .breakroom-story-comments__grab { display: none; }
    .breakroom-story-comments__composer,
    .breakroom-story-comments .connect-post-comment-form,
    .breakroom-story-comments .connect-post-comment-login {
        padding-bottom: 0.85rem;
    }
    @keyframes breakroomStoryCommentsInDesk {
        from { opacity: 0; transform: translateY(10px) scale(0.985); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
}
html[data-theme="dark"] .breakroom-story-comments__backdrop {
    background: rgba(0, 0, 0, 0.58);
}
html[data-theme="dark"] .breakroom-story-comments__sheet,
html[data-theme="dark"] .breakroom-story-comments__composer,
html[data-theme="dark"] .breakroom-story-comments .connect-post-comment-form,
html[data-theme="dark"] .breakroom-story-comments .connect-post-comment-login {
    background: var(--connect-surface, #121a22) !important;
    color: var(--connect-text, #e8eef5) !important;
    border-color: var(--connect-border, #243041);
}
html[data-theme="dark"] .breakroom-story-comments__head {
    border-bottom-color: var(--connect-border, #243041);
}
html[data-theme="dark"] .breakroom-story-comments__title,
html[data-theme="dark"] .breakroom-story-comments__head strong,
html[data-theme="dark"] .breakroom-story-comments .connect-post-comment-author {
    color: var(--connect-text, #f3f7fb) !important;
}
html[data-theme="dark"] .breakroom-story-comments__title .connect-post-comments-count,
html[data-theme="dark"] .breakroom-story-comments__close,
html[data-theme="dark"] .breakroom-story-comments .connect-post-comment-text,
html[data-theme="dark"] .breakroom-story-comments .connect-post-comment-login {
    color: var(--connect-text-muted, #a8b6c6) !important;
}
html[data-theme="dark"] .breakroom-story-comments__grab span {
    background: color-mix(in srgb, var(--connect-text, #e8eef5) 28%, transparent);
}
html[data-theme="dark"] .breakroom-story-comments .connect-post-comment-replies {
    border-left-color: var(--connect-border, #314255);
}
html[data-theme="dark"] .breakroom-story-comments__replying-label b {
    color: var(--connect-text, #f3f7fb);
}
html[data-theme="dark"] .breakroom-story-comments__composer-row {
    background: color-mix(in srgb, var(--connect-text, #e8eef5) 8%, transparent);
}
html[data-theme="dark"] .breakroom-story-comments .connect-post-comment-input,
html[data-theme="dark"] .breakroom-story-comments .connect-post-comment-input:focus,
html[data-theme="dark"] .breakroom-story-comments .connect-post-comment-input:focus-visible {
    background: transparent !important;
    border: none !important;
    color: var(--connect-text, #f3f7fb) !important;
    box-shadow: none !important;
    caret-color: var(--connect-text, #f3f7fb);
}
html.breakroom-story-comments-open,
html.breakroom-story-comments-open body {
    overflow: hidden !important;
}
html.breakroom-story-comments-open .breakroom-story-feed {
    overflow: hidden;
    touch-action: none;
}
html.breakroom-story-comments-open #navbar-bottom,
html.breakroom-story-comments-open .marketing-nav-bottom {
    transform: translate3d(0, calc(100% + env(safe-area-inset-bottom, 0px)), 0) !important;
    pointer-events: none !important;
}
/* Keep privacy consent under the sheet while comments are open */
html.breakroom-story-comments-open .nm-consent {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Lock page scroll while swipe mode owns the viewport */
html.breakroom-story-active,
html.breakroom-story-active body {
    overscroll-behavior: none;
    overflow: hidden;
    height: 100%;
    touch-action: manipulation;
}

.breakroom-story-heart-burst {
    position: absolute;
    z-index: 6;
    color: #fe2c55;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.35);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.4), opacity 0.42s ease;
    filter: drop-shadow(0 4px 14px rgba(254, 44, 85, 0.45));
    will-change: transform, opacity;
}
.breakroom-story-heart-burst.is-on {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.breakroom-story-heart-burst.is-out {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.15);
}

.breakroom-story-hint {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%) scale(0.96);
    z-index: 5;
    padding: 0.65rem 1rem;
    border-radius: 9999px;
    background: rgba(15, 39, 72, 0.88);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.breakroom-story-hint.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* No opacity settle animation — it washed cards white on re-activation / double-tap. */

/* Prefetch is silent — no on-card loading pill (it caused visible swipe jank). */
.breakroom-story-feed__loading,
.breakroom-story-feed__loading.is-visible {
    display: none !important;
}
.breakroom-story-feed__spinner {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #5eead4;
    animation: breakroom-story-spin 0.7s linear infinite;
}
@keyframes breakroom-story-spin { to { transform: rotate(360deg); } }

.breakroom-story-feed__sentinel {
    height: 2px;
    width: 100%;
    flex: 0 0 2px;
    pointer-events: none;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
    overflow: hidden;
    opacity: 0;
}

.breakroom-story-card--dotd {
    background: linear-gradient(165deg, #0f2748 0%, #127d72 100%);
}
.breakroom-story-card--job {
    background: linear-gradient(165deg, #0f2748 0%, #1e3a5f 58%, #8a5a12 145%);
}
.breakroom-story-card--store {
    background: linear-gradient(165deg, #12263a 0%, #127d72 100%);
}
.breakroom-story-card--news {
    background: linear-gradient(165deg, #0a1b33 0%, #0f2748 52%, #127d72 125%);
}
.breakroom-story-card--event {
    background:
        radial-gradient(ellipse at 50% 18%, rgba(46, 196, 182, 0.22), transparent 48%),
        linear-gradient(165deg, #143d59 0%, #0f2748 55%, #0a1b33 100%);
}
.breakroom-story-card--event .breakroom-story-card__stage {
    justify-content: center;
}
.breakroom-story-card__media--event {
    width: min(82%, 16rem);
    max-height: 12rem;
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.breakroom-story-card__media-link {
    display: block;
    line-height: 0;
    border-radius: 1rem;
}
.breakroom-story-card__date-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
}
.breakroom-story-card__date-tile-month {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5eead4;
}
.breakroom-story-card__date-tile-day {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.breakroom-story-card__hint--clamp {
    max-width: 26em;
    margin-inline: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.breakroom-story-card__badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    background: rgba(94, 234, 212, 0.2);
    border: 1px solid rgba(94, 234, 212, 0.45);
    color: #5eead4;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}
.breakroom-story-card--suggest,
.breakroom-story-card--person {
    background: linear-gradient(165deg, #0f2748 0%, #1fa896 100%);
}
.breakroom-story-card--group {
    background: linear-gradient(165deg, #12263a 0%, #1e4d6b 55%, #127d72 130%);
}
.breakroom-story-card--activity {
    background: linear-gradient(165deg, #1e2a38 0%, #0f2748 100%);
}
.breakroom-story-card--group .breakroom-story-card__stage,
.breakroom-story-card--person .breakroom-story-card__stage {
    justify-content: center;
}
.breakroom-story-card__avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--story-ink, #fff) 18%, transparent);
    color: var(--story-ink, #fff);
    border-radius: 999px;
}
.breakroom-story-card__cta--ghost,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__cta--ghost {
    background: transparent !important;
    border: 1.5px solid color-mix(in srgb, var(--story-ink, #fff) 55%, transparent);
    color: var(--story-ink, #fff) !important;
}
.breakroom-story-card__cta.is-attending,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__cta.is-attending {
    background: color-mix(in srgb, var(--story-accent, #1fa896) 85%, #0a1b33) !important;
}
.breakroom-story-card__media {
    width: min(78%, 14rem);
    max-height: 10rem;
    object-fit: cover;
    border-radius: 0.85rem;
    border: 2px solid color-mix(in srgb, var(--story-ink) 28%, transparent);
    flex-shrink: 0;
}
.breakroom-story-card--news .breakroom-story-card__center {
    gap: 0.55rem;
}
.breakroom-story-card--news .breakroom-story-card__hint {
    max-width: 24em;
    margin-inline: auto;
    line-height: 1.35;
}
.breakroom-story-card__salary,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__salary {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--story-accent) !important;
}
.breakroom-story-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.breakroom-story-card__chips span,
html[data-theme="dark"] .breakroom-story-card .breakroom-story-card__chips span {
    padding: 0.24rem 0.65rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--story-ink) !important;
    font-size: 0.72rem;
    font-weight: 700;
}
.breakroom-story-card__avatar--square { border-radius: 0.65rem; }
.breakroom-story-card__avatar--lg {
    width: 5.5rem;
    height: 5.5rem;
}
.breakroom-story-card__avatar-link--hero {
    margin: 0.35rem 0;
}