:root {
    --color-bg: #f7f5f7;
    --color-surface: #ffffff;
    --color-text: #2b2530;
    --color-text-muted: #837c88;
    --color-border: #ece6ea;
    --color-accent: #8c3350;
    --color-accent-hover: #79293f;
    --color-accent-soft: rgba(140, 51, 80, 0.12);
    --color-link: #6672d6;
    --color-link-hover: #525fc4;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-pill: 999px;
    --shadow-soft: 0 8px 24px rgba(43, 38, 32, 0.06);
    --shadow-soft-lg: 0 16px 40px rgba(43, 38, 32, 0.08);
    --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-link-hover);
}

/* Nav */

.site-nav {
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.site-nav__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-nav__logo {
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--color-text);
}

.site-nav__logo:hover {
    color: var(--color-text);
}

.site-nav__logo-img {
    height: 100px;
    width: auto;
    display: block;
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-nav__link {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 1rem;
}

.site-nav__link:hover {
    color: var(--color-link);
}

.site-nav__cta {
    padding: 0.55rem 1.35rem;
}

/* Buttons */

.btn {
    font-family: var(--font-sans);
    font-weight: 700;
    border-radius: var(--radius-md);
    transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.btn-pill {
    border-radius: var(--radius-pill);
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

.btn-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    box-shadow: 0 6px 16px rgba(140, 51, 80, 0.28);
    transform: translateY(-1px);
    color: #fff;
}

.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-outline-secondary:hover {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.btn-link {
    text-decoration: none;
    font-weight: 600;
}

.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 4px var(--color-accent-soft);
    outline: none;
}

/* Forms */

.form-label {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.form-control {
    font-family: var(--font-sans);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background-color: var(--color-surface);
}

.form-control::placeholder {
    color: #b7b0a4;
}

.form-control:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

/* Hero */

.hero {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3.5rem;
    max-width: 1100px;
    width: 100%;
}

.hero__media-img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
}

.hero__content {
    text-align: left;
}

.hero__title {
    font-weight: 800;
    font-size: 2.75rem;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.hero__subtitle {
    color: var(--color-text-muted);
    font-size: 1.15rem;
    margin-bottom: 2.25rem;
}

.hero__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    .hero__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero__content {
        text-align: center;
    }

    .hero__actions {
        justify-content: center;
    }
}

/* Auth pages */

.auth-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft-lg);
    padding: 2.5rem 2.25rem;
}

.auth-card__title {
    font-weight: 800;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.auth-card__subtitle {
    color: var(--color-text-muted);
    text-align: center;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.auth-form__link {
    font-size: 0.9rem;
    font-weight: 600;
}

.auth-form__footer {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-top: 1.75rem;
    margin-bottom: 0;
}

.auth-form__footer a {
    font-weight: 700;
}

/* Chat app shell */

body.page-chat {
    height: 100vh;
    overflow: hidden;
}

body.page-chat main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.chat-app {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
    background-color: var(--color-surface);
}

/* App rail (far-left icon sidebar) */

.app-rail {
    width: 72px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 0;
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-border);
}

.app-rail__item {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.app-rail__item:hover {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.app-rail__item.is-active {
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
}

/* Settings cog (ceo_admin only) — pinned to the bottom of the desktop
   rail, separate from the section-switching buttons above it. Scoped to
   #appRail specifically so it doesn't affect the mobile tab bar's copy of
   the same button, which is a horizontal row (margin-top: auto there
   would just cross-axis-align it, not push it anywhere useful). */
#appRail .app-rail__item--settings {
    margin-top: auto;
}

/* Mobile bottom tab bar — same sections as .app-rail, shown instead of
   it below 900px (see the max-width:900px rules further down). Hidden
   here by default so it doesn't render as a stray block on desktop. */

.mobile-tab-bar {
    display: none;
}

/* Avatars & status dots */

.avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    overflow: hidden;
    flex-shrink: 0;
}

.avatar--lg {
    width: 40px;
    height: 40px;
    font-size: 0.82rem;
}

.avatar--sm {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
}

.avatar--channel {
    background-color: var(--color-border);
    color: var(--color-text-muted);
    font-weight: 800;
}

.avatar--project {
    background-color: rgba(102, 114, 214, 0.14);
    color: var(--color-link);
    font-weight: 800;
}

/* Org-wide "group chat" (everyone in the organization) — same treatment
   as a regular DM avatar (colored initials circle, not a "#" channel
   icon), just its own tint so it's still visually distinct from a
   one-on-one DM at a glance. */
.avatar--group {
    background-color: rgba(76, 158, 116, 0.16);
    color: #2f8a5c;
    font-weight: 800;
}

.status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--color-surface);
}

.status-dot--online {
    background-color: #45b57e;
}

.status-dot--away {
    background-color: #e3a13c;
}

.status-dot--offline {
    background-color: #c9c3cc;
}

/* Icon buttons */

.icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.icon-btn:hover {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Sidebar */

.chat-sidebar {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-border);
    min-height: 0;
}

.chat-sidebar__profile {
    position: relative;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.chat-sidebar__profile-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.chat-sidebar__profile-toggle:hover {
    background-color: var(--color-bg);
}

.chat-sidebar__profile-info {
    flex: 1;
    min-width: 0;
}

.chat-sidebar__profile-caret {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.chat-sidebar__profile-name {
    font-weight: 700;
    font-size: 0.9rem;
    margin: 0;
}

.chat-sidebar__profile-status {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0;
}

.chat-sidebar__search {
    padding: 0.9rem 1.1rem 0.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-sidebar__search .search-field {
    flex: 1;
    min-width: 0;
}

.chat-sidebar__new-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background-color: var(--color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: background-color 0.15s ease;
}

.chat-sidebar__new-btn:hover {
    background-color: var(--color-accent-hover);
}

.search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.search-field__icon {
    position: absolute;
    left: 0.85rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-field__input {
    width: 100%;
    font-family: var(--font-sans);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    border-radius: var(--radius-pill);
    padding: 0.55rem 0.9rem 0.55rem 2.4rem;
    font-size: 0.85rem;
}

.search-field__input::placeholder {
    color: #b0a8b6;
}

.search-field__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
    background-color: var(--color-surface);
}

.sidebar-section {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.4rem 0.6rem 1rem;
    flex-direction: column;
    gap: 0.15rem;
}

.sidebar-section.is-active {
    display: flex;
}

.sidebar-empty {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--color-text-muted);
}

.sidebar-empty p {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
}

.sidebar-empty__hint {
    font-size: 0.78rem;
}

/* Admin-only "Notices you've sent" section at the top of the sidebar's
   Notifications tab (see chat-sidebar.php) — reuses .notice-card and
   .settings-list/.settings-empty-state as-is from the Settings → Notices
   styling above, just adds the section heading/divider around them. */

.sidebar-notices {
    padding: 0.85rem 1rem 0;
}

.sidebar-notices .settings-list {
    gap: 0.6rem;
}

.sidebar-notices__heading {
    margin: 0 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sidebar-notices__divider {
    margin: 1rem 1rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.notification-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.6rem 0.65rem;
    border-radius: var(--radius-md);
}

.notification-row.is-unread {
    background-color: var(--color-accent-soft);
}

.notification-row__icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-surface);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-row__meta {
    flex: 1;
    min-width: 0;
}

.notification-row__message {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.notification-row__time {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.notification-row--expandable {
    cursor: pointer;
}

.notification-row__chevron {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.notification-row--expandable.is-expanded .notification-row__chevron {
    transform: rotate(180deg);
}

.notification-row__body {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text);
    line-height: 1.45;
}

/* Unread dot on the Notifications bell — shared by the desktop rail and
   the mobile tab bar (see chat-app-rail.php), both of which need
   position: relative for it to anchor correctly. */
.app-rail__item {
    position: relative;
}

.rail-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent);
    border: 2px solid var(--color-surface);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rail-badge--tab-bar {
    top: -3px;
    right: calc(50% - 20px);
    /* The mobile tab bar itself is solid --color-accent (see the
       max-width:900px rules), so the default accent-on-white badge would
       vanish against it — invert to accent-on-white instead. */
    background-color: #fff;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.chat-sidebar__profile-menu {
    min-width: 200px;
    padding: 0.4rem;
    border-color: var(--color-border);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}

.chat-sidebar__profile-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Used two places: as a Bootstrap .dropdown-item (mobile — profile
   dropdown, sizing/padding already comes from
   .chat-sidebar__profile-menu .dropdown-item above) and standalone as a
   plain <button> in .chat-sidebar__footer (desktop) — the reset
   properties below only matter for that second, non-Bootstrap-assisted
   use. */
.chat-sidebar__logout {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.chat-sidebar__logout:hover,
.chat-sidebar__logout:focus {
    background-color: var(--color-bg);
    color: var(--color-accent);
}

.chat-sidebar__footer {
    flex-shrink: 0;
    padding: 0.6rem;
    border-top: 1px solid var(--color-border);
}

.chat-sidebar__footer form {
    margin: 0;
}

/* PWA push-notification toggle — same row treatment as .chat-sidebar__logout
   (they share the footer), plus a small pill switch on the right so the
   on/off state reads at a glance. Hidden by default in markup; JS
   (initPushToggle() in chat.php) reveals it only when the browser
   actually supports the Push API. */
.chat-sidebar__push-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.chat-sidebar__push-toggle:hover,
.chat-sidebar__push-toggle:focus {
    background-color: var(--color-bg);
    color: var(--color-accent);
}

.chat-sidebar__push-toggle-label {
    flex: 1;
}

.chat-sidebar__push-toggle-switch {
    position: relative;
    width: 30px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 999px;
    background-color: var(--color-border);
    transition: background-color 0.15s ease;
}

.chat-sidebar__push-toggle-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
    transition: transform 0.15s ease;
}

.chat-sidebar__push-toggle.is-on .chat-sidebar__push-toggle-switch {
    background-color: var(--color-accent);
}

.chat-sidebar__push-toggle.is-on .chat-sidebar__push-toggle-switch::after {
    transform: translateX(12px);
}

.chat-sidebar__push-toggle:disabled {
    opacity: 0.6;
    cursor: default;
}

.conversation-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.65rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-sans);
    color: inherit;
}

.conversation-row:hover {
    background-color: var(--color-bg);
}

.conversation-row.is-active {
    background-color: var(--color-accent-soft);
}

.conversation-row__meta {
    flex: 1;
    min-width: 0;
}

.conversation-row__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.conversation-row__name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 0.87rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-row__time {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.conversation-row__preview {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

.conversation-row__preview-text {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-row__badge {
    flex-shrink: 0;
    background-color: var(--color-accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* Chat window (center) */

.chat-window {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
}

.chat-window__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1.5rem;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.chat-window__back {
    display: none;
}

.chat-window__header-info {
    flex: 1;
    min-width: 0;
}

.chat-window__title {
    font-weight: 800;
    font-size: 0.98rem;
    margin: 0;
}

.chat-window__subtitle {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    margin: 0;
}

.chat-window__subtitle--clickable {
    cursor: pointer;
    width: fit-content;
}

.chat-window__subtitle--clickable:hover,
.chat-window__subtitle--clickable:focus-visible {
    text-decoration: underline;
    color: var(--color-text);
}

.chat-window__actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.message-list {
    flex: 1;
    overflow-y: auto;
    padding: 1.1rem 1.5rem;
}

.message-panel {
    display: none;
    flex-direction: column;
    min-height: 100%;
}

.message-panel.is-active {
    display: flex;
}

.message-list__empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    text-align: center;
}

.system-message {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    margin: 1.1rem 0;
}

.date-separator {
    display: flex;
    justify-content: center;
    margin: 1.1rem 0 0.75rem;
}

.date-separator span {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
}

.message-group {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.message-group.is-own {
    flex-direction: row-reverse;
}

.message-group__avatar {
    width: 32px;
    flex-shrink: 0;
}

.message-group__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 60%;
}

.message-group.is-own .message-group__body {
    align-items: flex-end;
}

.message-group__sender {
    font-size: 0.76rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.message-group__item {
    display: flex;
    flex-direction: column;
    position: relative;
}

.message-group.is-own .message-group__item {
    align-items: flex-end;
}

.message-group__item + .message-group__item {
    margin-top: 0.15rem;
}

.message-bubble {
    background-color: #efedf1;
    color: var(--color-text);
    padding: 0.4rem 0.7rem;
    border-radius: 16px;
    font-size: 0.83rem;
    line-height: 1.4;
    word-break: break-word;
}

.message-bubble--own {
    background-color: var(--color-accent-soft);
}

.message-bubble--deleted {
    background-color: transparent;
    border: 1px dashed var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
}

.mention {
    color: var(--color-accent);
    font-weight: 700;
    background-color: var(--color-accent-soft);
    border-radius: 4px;
    padding: 0 0.15rem;
}

.message-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    word-break: break-all;
}

.message-link:hover,
.message-link:focus {
    opacity: 0.8;
}

/* Rich text formatting inside message bubbles */

.message-bubble__text strong {
    font-weight: 700;
}

.message-bubble__text em {
    font-style: italic;
}

.msg-code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.8em;
    background-color: rgba(0, 0, 0, 0.07);
    border-radius: 4px;
    padding: 0.1em 0.35em;
}

.message-bubble--own .msg-code {
    background-color: rgba(0, 0, 0, 0.1);
}

.msg-blockquote {
    margin: 0.2rem 0;
    padding: 0.15rem 0.6rem;
    border-left: 3px solid var(--color-accent);
    color: var(--color-text-muted);
    font-style: italic;
}

.msg-list {
    margin: 0.2rem 0 0.2rem 1.1rem;
    padding: 0;
}

.msg-list li {
    margin-bottom: 0.1rem;
}

.message-attachment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 220px;
    height: 140px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ece6ea, #e2dbe6);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.message-reactions {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.55rem;
    font-size: 0.76rem;
    box-shadow: var(--shadow-soft);
}

.message-bubble__footer {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.message-group__item:hover .message-bubble__footer,
.message-group__item--last .message-bubble__footer,
.message-group__item--failed .message-bubble__footer {
    opacity: 1;
}

.message-bubble__time {
    font-size: 0.66rem;
    color: var(--color-text-muted);
}

.message-edited-label {
    font-size: 0.66rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Optimistic sends — appended the instant you hit send, before the
   server has confirmed anything (see sendMessage()/reconcilePendingMessage()
   in chat.php). Dimmed + a small clock instead of a timestamp until the
   real message comes back; a thin red outline and a click-to-retry label
   if it never does. */
.message-bubble--pending {
    opacity: 0.65;
}

.message-bubble__time--pending {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
}

.message-bubble--failed {
    border: 1px solid rgba(217, 83, 79, 0.45);
}

.message-group__item--failed {
    cursor: pointer;
}

.message-failed-label {
    font-size: 0.66rem;
    color: #c0392b;
    font-weight: 700;
}

/* Own-message hover actions (edit/delete) */

.message-actions {
    position: absolute;
    top: -0.4rem;
    display: flex;
    gap: 0.15rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.15rem;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.message-group.is-own .message-actions {
    left: -0.4rem;
}

.message-group:not(.is-own) .message-actions {
    right: -0.4rem;
}

.message-group__item:hover .message-actions {
    opacity: 1;
    pointer-events: auto;
}

.message-action {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.message-action:hover {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Attachments — inline image thumbnail or a file card */

.attachment-image {
    display: block;
    max-width: 220px;
    max-height: 220px;
    border-radius: 12px;
    object-fit: cover;
    cursor: pointer;
    background-color: var(--color-border);
}

.attachment-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 12px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    max-width: 220px;
}

.attachment-file:hover {
    border-color: var(--color-accent);
}

.attachment-file__icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.attachment-file__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.attachment-file__name {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-file__size {
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

.message-bubble .attachment-image + .message-bubble__text,
.message-bubble .attachment-file + .message-bubble__text {
    margin-top: 0.4rem;
}

.typing-indicator {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.5rem 0.6rem;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.typing-dots {
    display: inline-flex;
    gap: 3px;
}

.typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-text-muted);
    animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.chat-composer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.chat-composer__input {
    flex: 1;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    border-radius: var(--radius-pill);
    padding: 0.65rem 1.1rem;
}

.chat-composer__input::placeholder {
    color: #b0a8b6;
}

.chat-composer__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
    background-color: var(--color-surface);
}

.chat-composer__send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
    color: #fff;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.chat-composer__send:not(:disabled):hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-1px);
}

.chat-composer__send:disabled {
    background-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* Composer popovers: attach dropup, emoji picker, @mention suggestions.
   All anchored the same way — a relatively-positioned wrapper around the
   trigger, a popover absolutely positioned above it ("dropup", since the
   composer sits at the bottom of the window). */

.composer-popover-anchor {
    position: relative;
    flex-shrink: 0;
    display: flex;
}

.attach-menu,
.emoji-picker {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    right: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft-lg);
    z-index: 20;
}

.attach-menu {
    display: flex;
    flex-direction: column;
    padding: 0.35rem;
    min-width: 160px;
}

.attach-menu__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    text-align: left;
    font-size: 0.85rem;
    color: var(--color-text);
}

.attach-menu__item:hover {
    background-color: var(--color-bg);
}

.attach-menu__icon {
    display: inline-flex;
    width: 1.1rem;
    justify-content: center;
    font-size: 1rem;
    color: var(--color-text-muted);
}

.emoji-picker {
    /* Fixed number of columns visible (6) and rows (4) — extra emoji past
       that get their own implicit column further right (grid-auto-flow:
       column fills each explicit row-slot top-to-bottom before starting a
       new column), revealed by scrolling the picker sideways instead of
       growing it downward off the bottom of the screen. */
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.15rem;
    padding: 0.5rem;
    width: 260px;
    height: 168px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
}

.emoji-picker__item {
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.35rem;
    cursor: pointer;
    scroll-snap-align: start;
}

.emoji-picker__item:hover {
    background-color: var(--color-bg);
}

.composer-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
}

.mention-suggestions {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft-lg);
    z-index: 20;
    overflow: hidden;
}

.mention-suggestions__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.85rem;
    color: var(--color-text);
}

.mention-suggestions__item.is-active,
.mention-suggestions__item:hover {
    background-color: var(--color-accent-soft);
}

/* Editing banner + attachment-picked preview, shown above the composer */

.composer-editing-banner,
.attachment-preview {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.5rem;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.composer-editing-banner button {
    border: none;
    background: transparent;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
}

.attachment-preview__chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.5rem;
}

.attachment-preview__thumb {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
}

.attachment-preview__icon {
    font-size: 1rem;
}

.attachment-preview__name {
    font-size: 0.78rem;
    color: var(--color-text);
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-preview__remove {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}

.attachment-preview__remove:hover {
    color: var(--color-text);
}

/* Details panel (right) */

.chat-details {
    display: none;
    width: 260px;
    flex-shrink: 0;
    flex-direction: column;
    background-color: var(--color-surface);
    border-left: 1px solid var(--color-border);
    overflow-y: auto;
}

.chat-details.is-open {
    display: flex;
}

.chat-details__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.chat-details__title {
    font-weight: 800;
    font-size: 0.88rem;
    margin: 0;
}

.chat-details__section {
    padding: 1rem 0.5rem 1.25rem;
}

.chat-details__section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
}

.member-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
}

.member-row:hover {
    background-color: var(--color-bg);
}

.member-row__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.member-row__name {
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-row__role {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.add-member-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: calc(100% - 0.5rem);
    margin: 0.4rem 0.25rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.add-member-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.add-member-btn__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--color-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.chat-backdrop {
    display: none;
}

/* Chat app — mobile */

@media (max-width: 900px) {
    .app-rail {
        display: none;
    }

    /* Mobile keeps logout tucked into the profile dropdown (no room for
       a dedicated footer row once the bottom tab bar is also there) —
       desktop shows a plain footer instead (see the min-width:901px
       block below), so this only needs to exist below the breakpoint. */
    .chat-sidebar__footer {
        display: none;
    }

    .mobile-tab-bar {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 15;
        align-items: stretch;
        justify-content: space-around;
        /* Solid brand color instead of a near-white tint, with white
           icons/labels on top — reads as a distinct bar rather than
           blending into the white sidebar content sitting above it. */
        background-color: var(--color-accent);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Switching sections only means something while the sidebar itself
       is showing — once a conversation is open the composer owns the
       bottom of the screen instead. */
    .chat-app.conversation-active .mobile-tab-bar {
        display: none;
    }

    .mobile-tab-bar__item {
        flex: 1;
        width: auto;
        height: auto;
        min-height: 56px;
        border-radius: 0;
        flex-direction: column;
        justify-content: center;
        gap: 0.15rem;
        padding: 0.4rem 0;
        color: rgba(255, 255, 255, 0.75);
    }

    .mobile-tab-bar__item:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .mobile-tab-bar__item.is-active {
        background-color: rgba(255, 255, 255, 0.16);
        color: #fff;
    }

    .mobile-tab-bar__label {
        font-size: 0.62rem;
        font-weight: 600;
    }

    .chat-sidebar {
        position: absolute;
        inset: 0;
        z-index: 10;
        width: 100%;
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
        transform: translateX(0);
        transition: transform 0.25s ease;
    }

    .chat-app.conversation-active .chat-sidebar {
        transform: translateX(-100%);
        pointer-events: none;
    }

    .chat-window {
        position: absolute;
        inset: 0;
        width: 100%;
        transform: translateX(100%);
        transition: transform 0.25s ease;
    }

    .chat-app.conversation-active .chat-window {
        transform: translateX(0);
    }

    .chat-window__back {
        display: inline-flex;
    }

    .message-group__body {
        max-width: 78%;
    }

    .chat-details {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 85%;
        max-width: 320px;
        z-index: 30;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        box-shadow: var(--shadow-soft-lg);
    }

    .chat-details.is-open {
        display: flex;
        transform: translateX(0);
    }

    .chat-details.is-open ~ .chat-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(20, 16, 22, 0.35);
        z-index: 25;
    }
}

/* Desktop keeps a plain, always-visible "Log out" row at the bottom of
   the sidebar (.chat-sidebar__footer, shown by default, hidden below
   900px above) instead of tucking it into the profile dropdown — there's
   room for it, and it's one click instead of two. The dropdown markup
   still exists at this width (see chat-sidebar.php) since Bootstrap
   drives it via JS regardless of viewport, but it's made inert here:
   no caret, no hover affordance, and the popover itself never shows. */
@media (min-width: 901px) {
    .chat-sidebar__profile-caret {
        display: none;
    }

    .chat-sidebar__profile-toggle {
        cursor: default;
    }

    .chat-sidebar__profile-toggle:hover {
        background-color: transparent;
    }

    .chat-sidebar__profile-menu {
        display: none !important;
    }
}

/* 404 */

.error-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
}

.error-page__code {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.error-page__title {
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.error-page__subtitle {
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

/* Legal pages (privacy / terms / conditions) */

.legal-page {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 3.5rem 1.5rem;
}

.legal-page__inner {
    max-width: 720px;
    width: 100%;
}

.legal-page__title {
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: 0.35rem;
}

.legal-page__updated {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: 2rem;
}

.legal-page__inner h2 {
    font-weight: 800;
    font-size: 1.15rem;
    margin-top: 2rem;
    margin-bottom: 0.6rem;
}

.legal-page__inner p {
    color: var(--color-text-muted);
    line-height: 1.65;
}

.legal-page__inner a {
    color: var(--color-link);
}

/* Footer */

.site-footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.site-footer__links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.6rem;
}

.site-footer__links a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--color-link);
    text-decoration: underline;
}

/* Media / docs / links modal */

.media-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.media-modal.is-open {
    display: flex;
}

.media-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(20, 16, 22, 0.45);
}

.media-modal__panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 85vh;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.media-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0.5rem;
    flex-shrink: 0;
}

.media-modal__title {
    font-weight: 800;
    font-size: 1.05rem;
    margin: 0;
}

.media-modal__subtitle {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0.15rem 0 0;
}

.media-modal__header-actions {
    display: flex;
    gap: 0.15rem;
    flex-shrink: 0;
}

.media-modal__header-actions .icon-btn.is-active {
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
}

.media-modal__search {
    display: none;
    padding: 0 1.5rem;
    margin-top: 0.75rem;
    flex-shrink: 0;
}

.media-modal__search.is-open {
    display: block;
}

.media-modal__tabs {
    display: flex;
    padding: 1rem 1.5rem 0;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.media-modal__tab {
    border: none;
    background: transparent;
    padding: 0.55rem 0.1rem;
    margin-right: 1.5rem;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.media-modal__tab.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.media-modal__storage {
    padding: 0.9rem 1.5rem 0;
    flex-shrink: 0;
}

.media-modal__storage-bar {
    height: 6px;
    border-radius: var(--radius-pill);
    background-color: var(--color-border);
    overflow: hidden;
}

.media-modal__storage-bar span {
    display: block;
    height: 100%;
    background-color: var(--color-accent);
    border-radius: var(--radius-pill);
    transition: width 0.25s ease;
}

.media-modal__storage-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0.4rem 0 0;
}

.media-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem 1.5rem;
}

.media-modal__section {
    display: none;
}

.media-modal__section.is-active {
    display: block;
}

.media-modal__empty {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    text-align: center;
    padding: 2rem 0;
}

.media-modal__group-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 1.1rem 0 0.5rem;
}

.media-modal__group-label:first-child {
    margin-top: 0;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.6rem;
}

.media-tile {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-bg);
    transition: opacity 0.15s ease;
    cursor: pointer;
}

.media-tile__thumb {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ece6ea, #e2dbe6);
    color: var(--color-text-muted);
}

.media-tile__thumb--video {
    background: linear-gradient(135deg, #e4dde8, #d8cfe0);
}

.media-tile__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-tile__label {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-tile__delete {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background-color: rgba(20, 16, 22, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: pointer;
}

.media-tile:hover .media-tile__delete {
    opacity: 1;
}

.media-tile__checkbox {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    display: none;
    margin: 0;
}

.media-modal.is-selecting .media-tile__checkbox {
    display: block;
}

.media-modal.is-selecting .media-tile__delete {
    display: none;
}

.media-tile__checkbox input {
    position: absolute;
    opacity: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}

.media-tile__checkbox span {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: rgba(20, 16, 22, 0.35);
}

.media-tile__checkbox input:checked + span {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.media-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.4rem;
    border-radius: var(--radius-md);
    transition: opacity 0.15s ease;
}

.media-row:hover {
    background-color: var(--color-bg);
}

.media-row__checkbox {
    position: static;
    display: none;
    flex-shrink: 0;
}

.media-modal.is-selecting .media-row__checkbox {
    display: block;
}

.media-row__checkbox span {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background-color: var(--color-surface);
}

.media-row__checkbox input {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.media-row__checkbox input:checked + span {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.media-row__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.media-row__icon--link {
    color: var(--color-link);
    background-color: rgba(102, 114, 214, 0.1);
}

.media-row__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.media-row__meta--link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.media-row__meta--link:hover .media-row__name {
    color: var(--color-link);
    text-decoration: underline;
}

.media-row__name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-row__sub {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-row__delete {
    flex-shrink: 0;
    opacity: 0;
}

.media-row:hover .media-row__delete {
    opacity: 1;
}

.media-modal.is-selecting .media-row__delete {
    display: none;
}

.media-modal__selection-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.5rem;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.media-modal.has-selection .media-modal__selection-bar {
    display: flex;
}

.media-modal__selection-bar span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .media-modal {
        padding: 0;
    }

    .media-modal__panel {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }
}

/* Media preview (lightbox) */

.media-preview {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.media-preview.is-open {
    display: flex;
}

.media-preview__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 12, 17, 0.82);
}

.media-preview__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.media-preview__close {
    position: absolute;
    top: -3rem;
    right: 0;
    color: #fff;
}

.media-preview__close:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.media-preview__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.media-preview__nav:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

.media-preview__nav--prev {
    left: -3.25rem;
}

.media-preview__nav--next {
    right: -3.25rem;
}

.media-preview__nav[hidden] {
    display: none;
}

.media-preview__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft-lg);
}

.media-preview__thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ece6ea, #e2dbe6);
    color: var(--color-text-muted);
}

.media-preview__thumb.is-video {
    background: linear-gradient(135deg, #e4dde8, #d8cfe0);
}

.media-preview__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.media-preview__caption {
    margin-top: 1rem;
    text-align: center;
    color: #fff;
}

.media-preview__name {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
}

.media-preview__meta {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.2rem;
}

@media (max-width: 640px) {
    .media-preview {
        padding: 1.25rem;
    }

    .media-preview__nav--prev {
        left: 0.25rem;
    }

    .media-preview__nav--next {
        right: 0.25rem;
    }

    .media-preview__close {
        top: 0.5rem;
        right: 0.5rem;
    }
}

/* ------------------------------------------------------------------
 * Admin settings page (/settings) — design/UI pass, see settings.php's
 * docblock for what's real (Members) vs. mock (Notices/Permissions/
 * Projects). Mirrors the chat app shell's full-viewport treatment
 * (body.page-settings, set in layout.php) rather than the marketing
 * site's centered-content look.
 * ------------------------------------------------------------------ */

body.page-settings {
    height: 100vh;
    overflow: hidden;
}

body.page-settings main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.settings-app {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
}

.settings-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.5rem;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.settings-header__back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background-color: var(--color-bg);
    flex-shrink: 0;
}

.settings-header__back:hover {
    color: var(--color-text);
}

.settings-header__titles {
    flex: 1;
    min-width: 0;
}

.settings-header__title {
    margin: 0;
    font-weight: 800;
    font-size: 1.05rem;
}

.settings-header__subtitle {
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.settings-header__badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.settings-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.settings-tabs {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.25rem 1rem;
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
}

.settings-tabs__item {
    text-align: left;
    border: none;
    background: transparent;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.settings-tabs__item:hover {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.settings-tabs__item.is-active {
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
}

.settings-panels {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 1.75rem 2rem 3rem;
}

.settings-panel {
    display: none;
}

.settings-panel.is-active {
    display: block;
}

.settings-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.settings-panel__title {
    margin: 0 0 0.15rem;
    font-weight: 800;
    font-size: 1.15rem;
}

.settings-panel__desc {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    max-width: 46ch;
}

.settings-panel__header .btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.settings-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 720px;
}

/* Notices */

.notice-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.15rem;
    box-shadow: var(--shadow-soft);
}

.notice-card--pinned {
    border-color: var(--color-accent-soft);
    background-color: rgba(140, 51, 80, 0.03);
}

.notice-card__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.notice-card__title {
    margin: 0;
    font-weight: 700;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.notice-card__title .bi-pin-angle-fill {
    color: var(--color-accent);
    font-size: 0.8rem;
}

.notice-card__date {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.notice-card__body {
    margin: 0.4rem 0 0.6rem;
    font-size: 0.85rem;
    color: var(--color-text);
    line-height: 1.5;
}

.notice-card__audience {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-accent);
    background-color: var(--color-accent-soft);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
}

.notice-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.notice-card__delete {
    color: var(--color-text-muted);
}

.notice-card__delete:hover {
    color: #c0392b;
}

.settings-empty-state {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    padding: 1rem 0;
}

/* Create-notice modal — same overlay/backdrop/panel shell as
   .create-channel-modal (chat-create-channel-modal.php), reused directly
   for the header/body/footer classes; only the parts unique to notices
   (recipient checklist, pinned checkbox) get their own rules below. */

.create-notice-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.create-notice-modal.is-open {
    display: flex;
}

.create-notice-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(20, 16, 22, 0.45);
}

.create-notice-modal__panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notice-modal__textarea {
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
}

.notice-recipient-picker {
    margin-top: 0.5rem;
}

.notice-recipient-list {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
}

.notice-recipient-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    font-size: 0.82rem;
}

.notice-recipient-row:last-child {
    border-bottom: none;
}

.notice-recipient-row input {
    flex-shrink: 0;
}

.notice-recipient-row__name {
    font-weight: 700;
    flex-shrink: 0;
}

.notice-recipient-row__email {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-pinned-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

#createNoticeError {
    color: #c0392b;
    font-weight: 600;
    margin-top: 0.6rem;
}

/* Invite-member modal — same overlay/backdrop/panel shell as
   .create-notice-modal, reused for the same reason that one reused
   .create-channel-modal's header/body/footer classes. */

.invite-member-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.invite-member-modal.is-open {
    display: flex;
}

.invite-member-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(20, 16, 22, 0.45);
}

.invite-member-modal__panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 85vh;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#inviteMemberError {
    color: #c0392b;
    font-weight: 600;
}

/* Permissions */

.permission-group {
    margin-bottom: 1.75rem;
    max-width: 720px;
}

.permission-group__title {
    margin: 0 0 0.6rem;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.permission-table {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.permission-table__row {
    display: grid;
    grid-template-columns: 1fr 70px 100px 70px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.82rem;
}

.permission-table__row:last-child {
    border-bottom: none;
}

.permission-table__row--head {
    color: var(--color-text-muted);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
}

.permission-table__row--head .permission-table__label {
    text-align: left;
}

.permission-table__label {
    font-weight: 600;
}

.permission-toggle {
    justify-self: center;
    position: relative;
    display: inline-flex;
    width: 34px;
    height: 20px;
    cursor: not-allowed;
}

.permission-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.permission-toggle span {
    position: absolute;
    inset: 0;
    background-color: var(--color-border);
    border-radius: var(--radius-pill);
    transition: background-color 0.15s ease;
}

.permission-toggle span::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.permission-toggle input:checked + span {
    background-color: var(--color-accent);
}

.permission-toggle input:checked + span::before {
    transform: translateX(14px);
}

/* Projects table */

.settings-table {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-width: 720px;
}

.settings-table__row {
    display: grid;
    grid-template-columns: 1fr 110px 90px 44px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.settings-table__row:last-child {
    border-bottom: none;
}

.settings-table__row--head {
    color: var(--color-text-muted);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.settings-table__name {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
}

.settings-table__actions {
    display: flex;
    justify-content: flex-end;
}

.status-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
}

.status-pill--active {
    color: #2f8f5b;
    background-color: rgba(47, 143, 91, 0.12);
}

.status-pill--archived {
    color: var(--color-text-muted);
    background-color: var(--color-border);
}

/* Members */

.member-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0.65rem 1rem;
}

.member-row__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.member-row__name {
    font-weight: 700;
    font-size: 0.88rem;
}

.member-row__email {
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

.role-pill {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.22rem 0.65rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
}

.role-pill--staff {
    background-color: rgba(102, 114, 214, 0.12);
    color: var(--color-link);
}

.role-pill--receptionist {
    background-color: var(--color-border);
    color: var(--color-text-muted);
}

@media (max-width: 900px) {
    .settings-tabs {
        width: 76px;
        padding: 1rem 0.4rem;
        align-items: center;
    }

    .settings-tabs__item {
        text-align: center;
        font-size: 0.68rem;
        padding: 0.55rem 0.3rem;
    }

    .settings-panels {
        padding: 1.25rem 1rem 2.5rem;
    }

    .permission-table__row,
    .settings-table__row {
        grid-template-columns: 1fr 50px 60px 50px;
        font-size: 0.74rem;
    }
}

/* ------------------------------------------------------------------
 * "Create a channel" modal — design/UI pass, see
 * chat-create-channel-modal.php's docblock for what's real vs. mock.
 * Same overlay/backdrop/panel structure as .media-modal.
 * ------------------------------------------------------------------ */

.create-channel-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.create-channel-modal.is-open {
    display: flex;
}

.create-channel-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(20, 16, 22, 0.45);
}

.create-channel-modal__panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.create-channel-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0.75rem;
    flex-shrink: 0;
}

.create-channel-modal__title {
    font-weight: 800;
    font-size: 1.05rem;
    margin: 0 0 0.15rem;
}

.create-channel-modal__subtitle {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0;
}

.create-channel-modal__body {
    padding: 0 1.5rem 1.25rem;
    overflow-y: auto;
}

.create-channel-modal__label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 1.1rem 0 0.5rem;
}

.create-channel-modal__label:first-child {
    margin-top: 0;
}

.create-channel-modal__input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.85rem;
    font-family: inherit;
    font-size: 0.88rem;
    background-color: var(--color-bg);
}

.create-channel-modal__input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.create-channel-modal__hint {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin: 0.5rem 0 0;
}

.channel-type-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.channel-type-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    border: 1.5px solid var(--color-border);
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.channel-type-card:hover {
    border-color: var(--color-accent-soft);
}

.channel-type-card.is-selected {
    border-color: var(--color-accent);
    background-color: var(--color-accent-soft);
}

.channel-type-card__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--color-surface);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.channel-type-card__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.channel-type-card__name {
    font-weight: 700;
    font-size: 0.88rem;
}

.channel-type-card__desc {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.channel-type-card__check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background-color: var(--color-surface);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.channel-type-card.is-selected .channel-type-card__check {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.invite-link-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.invite-link-row__input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.75rem;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    background-color: var(--color-bg);
}

.create-channel-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .create-channel-modal {
        padding: 0.75rem;
    }
}

/* ---- Confirm / alert modal (chat-confirm-modal.php) ---- */
.confirm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.confirm-modal.is-open {
    display: flex;
}

.confirm-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(20, 16, 22, 0.45);
}

.confirm-modal__panel {
    position: relative;
    width: 100%;
    max-width: 380px;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.confirm-modal__title {
    font-weight: 800;
    font-size: 1rem;
    margin: 0;
}

.confirm-modal__body {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.confirm-modal__body:empty {
    display: none;
}

.confirm-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.75rem;
}