/* ==========================================================================
   Tansi Chat — moved from Chat.razor's inline <style> (phase 1) plus the
   workspace pieces: conversation list, room header, browse, dialogs.
   ========================================================================== */
    /* Chat — built on the Refined Clarity tokens (app.css / ui.css).
       Light/dark flip via the .mud-theme-* body classes, never media queries. */
    .chat-shell {
        --chat-accent: var(--mud-palette-primary);
        --chat-accent-ink: var(--chat-accent);
        --chat-accent-soft: color-mix(in srgb, var(--chat-accent) 10%, transparent);
        display: flex;
        height: calc(100dvh - 104px);
        min-height: 480px;
        border: 1px solid var(--card-border);
        border-radius: var(--radius-lg);
        background: var(--card-bg);
        box-shadow: var(--shadow-card);
        overflow: hidden;
    }

    .mud-theme-dark .chat-shell {
        --chat-accent-ink: color-mix(in srgb, var(--chat-accent) 58%, #ffffff);
        --chat-accent-soft: color-mix(in srgb, var(--chat-accent) 16%, transparent);
    }

    /* ------------------------------------------------------------------
       Sidebar
       ------------------------------------------------------------------ */
    .chat-sidebar {
        display: flex;
        flex-direction: column;
        width: 340px;
        min-width: 280px;
        flex-shrink: 0;
        border-right: 1px solid var(--card-border);
        min-height: 0;
    }

    .chat-sidebar__header {
        padding: 18px 16px 14px;
        border-bottom: 1px solid var(--card-border);
    }

    .chat-sidebar__title {
        margin: 0 0 12px;
        font-size: 1.375rem;
        font-weight: 700;
        letter-spacing: -0.015em;
        line-height: 1.2;
        color: var(--text-heading);
    }

    .chat-search-anchor { position: relative; }

    .chat-search-results {
        position: absolute;
        z-index: 1200;
        inset-inline: 0;
        top: calc(100% + 6px);
        max-height: 300px;
        overflow-y: auto;
        border-radius: var(--radius-md);
        border: 1px solid var(--card-border);
        background: var(--card-bg);
        box-shadow: var(--shadow-card-hover);
        transform-origin: top center;
        animation: chat-pop-in 160ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
    }

    .chat-search-results__label {
        padding: 10px 14px 4px;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-caption);
    }

    .chat-search-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 10px 14px;
        cursor: pointer;
        transition: background-color 120ms ease;
    }

    .chat-search-item:hover { background: var(--chat-accent-soft); }
    .chat-search-item:focus-visible {
        outline: 2px solid var(--chat-accent-ink);
        outline-offset: -2px;
        border-radius: var(--radius-sm);
    }

    /* Conversation list */
    .chat-conv-list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 6px;
    }

    .chat-conv-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 10px 12px;
        border-radius: var(--radius-md);
        cursor: pointer;
        text-align: left;
        transition: background-color 120ms ease;
    }

    .chat-conv-item:hover { background: var(--mud-palette-action-default-hover); }
    .chat-conv-item:active { background: var(--chat-accent-soft); }
    .chat-conv-item.selected { background: var(--chat-accent-soft); }
    .chat-conv-item:focus-visible {
        outline: 2px solid var(--chat-accent-ink);
        outline-offset: -2px;
    }

    .chat-conv-item__body { flex: 1; min-width: 0; }

    .chat-conv-item__top {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
    }

    .chat-conv-item__name {
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--text-heading);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-conv-item.unread .chat-conv-item__name { font-weight: 700; }

    .chat-conv-item__time {
        flex-shrink: 0;
        font-size: 0.75rem;
        color: var(--text-caption);
    }

    .chat-conv-item__preview {
        margin-top: 2px;
        font-size: 0.8125rem;
        color: var(--text-caption);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-conv-item.unread .chat-conv-item__preview {
        color: var(--text-body);
        font-weight: 500;
    }

    .chat-conv-item__hint {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 3px;
        font-size: 0.75rem;
        color: var(--text-caption);
    }

    .chat-unread-pill {
        flex-shrink: 0;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--chat-accent);
        color: var(--mud-palette-primary-text);
        font-size: 0.6875rem;
        font-weight: 700;
    }

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

    .chat-online-dot {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--mud-palette-success);
        border: 2px solid var(--card-bg);
    }

    /* Invitations */
    .chat-invites {
        padding: 12px 12px 6px;
        border-bottom: 1px solid var(--card-border);
    }

    .chat-invites__title {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0 4px 8px;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-caption);
    }

    .chat-invites__count {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: var(--chat-accent);
        color: var(--mud-palette-primary-text);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0;
    }

    .chat-invite-card {
        display: flex;
        gap: 10px;
        padding: 10px 12px;
        margin-bottom: 6px;
        border: 1px solid var(--card-border);
        border-radius: var(--radius-md);
        background: var(--mud-palette-background-grey);
        transition: opacity 180ms cubic-bezier(0.2, 0.7, 0.3, 1),
                    transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
    }

    /* Applied for the 180ms before the card is removed from the list, so
       Accept/Decline visibly lands on the card instead of teleporting it away. */
    .chat-invite-card.is-leaving {
        opacity: 0;
        transform: scale(0.97);
    }

    /* ------------------------------------------------------------------
       Chat pane
       ------------------------------------------------------------------ */
    .chat-main {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        min-height: 0;
    }

    .chat-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        border-bottom: 1px solid var(--card-border);
        background: color-mix(in srgb, var(--mud-palette-surface) 85%, transparent);
        backdrop-filter: blur(12px) saturate(160%);
    }

    @media (prefers-reduced-transparency: reduce) {
        .chat-header {
            background: var(--mud-palette-surface);
            backdrop-filter: none;
        }
    }

    .chat-header__name {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--text-heading);
        line-height: 1.3;
    }

    .chat-header__status {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.75rem;
        color: var(--text-caption);
    }

    .chat-header__status .online { color: var(--mud-palette-success); }
    .chat-header__status .typing {
        color: var(--chat-accent-ink);
        font-weight: 500;
    }

    .chat-status-pill {
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 0.6875rem;
        font-weight: 600;
    }

    .chat-status-pill--pending {
        color: var(--mud-palette-warning-darken);
        background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
    }

    .chat-back-btn { display: none; }

    /* Connection banner (only shown while not connected) */
    .chat-conn-banner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 5px 12px;
        overflow: hidden;
        animation: chat-banner-in 200ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--mud-palette-warning-darken);
        background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
        border-bottom: 1px solid var(--card-border);
    }

    .chat-conn-banner--error {
        color: var(--mud-palette-error);
        background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    }

    /* Messages */
    .chat-messages {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 16px 16px 10px;
        background: var(--mud-palette-background-grey);
        overscroll-behavior: contain;
    }

    .chat-day-sep {
        display: flex;
        justify-content: center;
        margin: 14px 0 10px;
    }

    .chat-day-sep span {
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--text-caption);
        background: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent);
    }

    .chat-load-older {
        display: flex;
        justify-content: center;
        margin: 4px 0 8px;
    }

    .chat-msg-deleted {
        color: var(--mud-palette-text-secondary);
    }

    .chat-msg-edited {
        margin-left: 6px;
        font-size: 0.75rem;
        color: var(--mud-palette-text-secondary);
    }

    /* On the accent bubble the secondary grey would fail contrast; keep the bubble's text colour. */
    .chat-bubble.sent .chat-msg-deleted,
    .chat-bubble.sent .chat-msg-edited {
        color: inherit;
    }

    .chat-msg-row {
        display: flex;
        flex-direction: column;
        margin-bottom: 2px;
        animation: chat-msg-in 180ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
    }

    .chat-msg-row.grp-last { margin-bottom: 12px; }
    .chat-msg-row.sent { align-items: flex-end; }
    .chat-msg-row.received { align-items: flex-start; }

    .chat-bubble {
        max-width: min(70%, 560px);
        padding: 8px 12px;
        border-radius: 18px;
        overflow-wrap: break-word;
        word-break: break-word;
        font-size: 0.875rem;
        line-height: 1.45;
    }

    .chat-bubble.sent {
        background: var(--chat-accent);
        color: var(--mud-palette-primary-text);
    }

    .chat-bubble.received {
        background: var(--card-bg);
        color: var(--text-body);
        border: 1px solid var(--card-border);
    }

    /* Grouped-corner geometry: consecutive messages read as one thread */
    .chat-bubble.sent.cont-top { border-top-right-radius: 6px; }
    .chat-bubble.sent.cont-bottom { border-bottom-right-radius: 6px; }
    .chat-bubble.received.cont-top { border-top-left-radius: 6px; }
    .chat-bubble.received.cont-bottom { border-bottom-left-radius: 6px; }

    .chat-msg-time {
        font-size: 0.6875rem;
        color: var(--text-caption);
    }

    /* Timestamp + delivery ticks share one baseline under the last bubble */
    .chat-msg-meta {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 3px 6px 0;
    }

    /* A message the user just sent, still in flight to the server. It enters
       from the composer's corner rather than the neutral list entrance. */
    .chat-msg-row.sent.is-outgoing {
        transform-origin: bottom right;
        animation: chat-msg-send-in 200ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
    }

    /* ---- Delivery status ticks (sent / delivered / read) ---- */
    .chat-ticks {
        position: relative;
        flex-shrink: 0;
        width: 17px;
        height: 12px;
        color: var(--text-caption);
        /* State indication: only the colour crosses between states, so a message
           settling from delivered to read never jumps. */
        transition: color 160ms cubic-bezier(0.2, 0.7, 0.3, 1),
                    opacity 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
    }

    .chat-ticks svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 12px;
        height: 12px;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

    .chat-tick--first { left: 0; }

    .chat-tick--second {
        left: 5px;
        opacity: 0;
        transform: translateX(-4px);
        transition: opacity 160ms cubic-bezier(0.2, 0.7, 0.3, 1),
                    transform 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
    }

    .chat-ticks.is-delivered .chat-tick--second,
    .chat-ticks.is-read .chat-tick--second {
        opacity: 1;
        transform: none;
    }

    /* Read is the only state that earns colour - it is the one the sender waits for.
       chat-accent-ink is the light-mode accent and its lightened dark-mode twin, so
       this stays legible on both grounds. */
    .chat-ticks.is-read { color: var(--chat-accent-ink); }

    .chat-ticks.is-pending { opacity: 0.6; }

    .chat-attachment-image {
        display: block;
        max-width: 100%;
        max-height: 260px;
        border-radius: 12px;
        cursor: pointer;
        margin-bottom: 4px;
    }

    .chat-bubble.sent .chat-attachment-file {
        color: var(--mud-palette-primary-text);
        border-color: color-mix(in srgb, var(--mud-palette-primary-text) 50%, transparent);
    }

    /* Typing indicator */
    .chat-typing {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 12px 14px;
    }

    .chat-typing span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--text-caption);
        animation: chat-typing-pulse 1.2s ease-in-out infinite;
    }

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

    /* Restriction notice */
    .chat-restriction {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 12px 16px 0;
        padding: 10px 14px;
        border-radius: var(--radius-md);
        border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 35%, transparent);
        background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    }

    /* Composer */
    .chat-composer {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-top: 1px solid var(--card-border);
        background: var(--mud-palette-surface);
    }

    .chat-composer .chat-composer-field .mud-input-outlined-border { border-radius: 22px; }
    .chat-composer .chat-composer-field .mud-input-slot { padding: 10px 16px; }

    .chat-send-btn {
        transition: transform 100ms ease-out, opacity 150ms ease;
    }

    .chat-send-btn:active { transform: scale(0.92); }

    /* Voice notes */
    .chat-voice-player {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 210px;
        padding: 2px 0;
    }

    .chat-voice-play {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        color: var(--chat-accent-ink);
        background: var(--chat-accent-soft);
        transition: transform 100ms ease-out;
    }

    .chat-voice-play:active { transform: scale(0.92); }

    .chat-bubble.sent .chat-voice-play {
        color: var(--chat-accent);
        background: var(--mud-palette-primary-text);
    }

    .chat-voice-player .chat-voice-icon-pause { display: none; }
    .chat-voice-player.is-playing .chat-voice-icon-pause { display: block; }
    .chat-voice-player.is-playing .chat-voice-icon-play { display: none; }

    .chat-voice-track {
        position: relative;
        flex: 1;
        height: 4px;
        min-width: 110px;
        border-radius: 2px;
        cursor: pointer;
        background: color-mix(in srgb, var(--mud-palette-text-secondary) 25%, transparent);
    }

    .chat-bubble.sent .chat-voice-track {
        background: color-mix(in srgb, var(--mud-palette-primary-text) 35%, transparent);
    }

    .chat-voice-progress {
        position: absolute;
        inset: 0 auto 0 0;
        width: 0%;
        border-radius: 2px;
        background: var(--chat-accent-ink);
    }

    .chat-bubble.sent .chat-voice-progress {
        background: var(--mud-palette-primary-text);
    }

    .chat-voice-time {
        flex-shrink: 0;
        min-width: 34px;
        font-size: 0.75rem;
        font-variant-numeric: tabular-nums;
        text-align: right;
        opacity: 0.85;
    }

    /* Composer while recording / previewing */
    .chat-voice-rec {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
        padding: 0 6px;
        font-size: 0.875rem;
        font-variant-numeric: tabular-nums;
        color: var(--text-body);
    }

    .chat-voice-rec__dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--mud-palette-error);
        animation: chat-rec-pulse 1.2s ease-in-out infinite;
    }

    .chat-voice-preview {
        flex: 1;
        min-width: 0;
        padding: 4px 10px;
        border-radius: 22px;
        background: var(--mud-palette-background-grey);
    }

    @keyframes chat-rec-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.35; transform: scale(0.8); }
    }

    /* Empty states */
    .chat-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 100%;
        padding: 24px;
        text-align: center;
    }

    .chat-empty__icon {
        width: 64px;
        height: 64px;
        display: grid;
        place-items: center;
        margin-bottom: 8px;
        border-radius: 50%;
        color: var(--chat-accent-ink);
        background: var(--chat-accent-soft);
    }

    .chat-empty__title {
        margin: 0;
        font-size: 1.0625rem;
        font-weight: 600;
        color: var(--text-heading);
    }

    .chat-empty__hint {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-caption);
        max-width: 320px;
    }

    /* ------------------------------------------------------------------
       Motion
       ------------------------------------------------------------------ */
    @keyframes chat-msg-in {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes chat-msg-send-in {
        from { opacity: 0; transform: translateY(14px) scale(0.96); }
        to { opacity: 1; transform: none; }
    }

    @keyframes chat-pop-in {
        from { opacity: 0; transform: scale(0.98) translateY(-4px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes chat-typing-pulse {
        0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
        30% { opacity: 1; transform: translateY(-3px); }
    }

    @keyframes chat-pane-in {
        from { opacity: 0; transform: translateX(24px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes chat-pane-in-left {
        from { opacity: 0; transform: translateX(-24px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes chat-banner-in {
        from { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
        to { max-height: 32px; opacity: 1; }
    }

    @keyframes chat-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
        .chat-msg-row, .chat-search-results { animation: none; }
        .chat-typing span { animation: chat-typing-pulse 1.2s ease-in-out infinite; transform: none !important; }
        .chat-send-btn:active { transform: none; }
        /* Gentler, not zero: keep the opacity bridge, drop the movement. */
        .chat-conn-banner,
        .chat-shell.chat-open .chat-main,
        .chat-shell:not(.chat-open) .chat-sidebar { animation-name: chat-fade-in; }
        .chat-invite-card.is-leaving { transform: none; }
        /* Keep the opacity blink (it signals "recording"), drop the movement. */
        .chat-voice-rec__dot { transform: none !important; }
        .chat-voice-play:active { transform: none; }
        /* The outgoing bubble still fades in - that is the "it sent" signal - but
           it no longer travels up from the composer. */
        .chat-msg-row.sent.is-outgoing { animation-name: chat-fade-in; }
        /* The second tick still appears; it just stops sliding into place. */
        .chat-tick--second { transform: none !important; }
    }

    /* ------------------------------------------------------------------
       Mobile: one pane at a time
       ------------------------------------------------------------------ */
    @media (max-width: 767px) {
        .chat-shell { height: calc(100dvh - 96px); min-height: 0; }
        .chat-sidebar { width: 100%; min-width: 0; border-right: none; }
        .chat-main { display: none; }
        .chat-shell.chat-open .chat-sidebar { display: none; }
        /* Entry-only spatial story: the chat slides in from the right, the list
           returns from the left. The entering pane covers the swap, so no exit
           animation (and no removal delay) is needed. */
        .chat-shell.chat-open .chat-main {
            display: flex;
            animation: chat-pane-in 200ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
        }
        .chat-shell:not(.chat-open) .chat-sidebar {
            animation: chat-pane-in-left 200ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
        }
        .chat-back-btn { display: inline-flex; }
        .chat-bubble { max-width: 82%; }
    }

/* ==========================================================================
   Workspace chat (phase 1): conversation list, room header, Chat home,
   Browse channels and the chat dialogs. Colours come from the MudBlazor
   palette so light and dark follow the app theme. Dialogs render outside
   .chat-shell, so their rules are not scoped under it.
   ========================================================================== */

.tc-shell :focus-visible,
.tc-form :focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ---- buttons ---- */
.tc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--mud-palette-lines-inputs, var(--mud-palette-text-secondary));
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.tc-btn:hover { background: var(--mud-palette-action-default-hover); }
.tc-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.tc-btn--sm { min-height: 30px; padding: 3px 10px; font-size: 0.8125rem; }
.tc-btn--primary {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text, #fff);
}
.tc-btn--primary:hover { background: var(--mud-palette-primary-darken, var(--mud-palette-primary)); }
.tc-btn--danger {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

.tc-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: 1.15rem;
    cursor: pointer;
}
.tc-iconbtn[aria-pressed="true"] { color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); }
.tc-iconbtn:hover { background: var(--mud-palette-action-default-hover); }

.tc-linkbtn {
    border: 0;
    padding: 0;
    background: none;
    color: var(--mud-palette-error);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.tc-hint { margin: 2px 0 6px; font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }
.tc-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* ---- the conversation list ---- */
.tc-side__top {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.tc-side__ws {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}
.tc-side__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tc-side__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 6px 16px; }
.tc-side__note { margin: 4px 10px; font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }

.tc-list { list-style: none; margin: 0; padding: 0; }
.tc-list--nav { margin-bottom: 6px; }

.tc-sec { margin-top: 8px; }
.tc-sec__h { margin: 0; font-size: inherit; }
.tc-sec__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 30px;
    padding: 4px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
}
.tc-sec__toggle:hover { background: var(--mud-palette-action-default-hover); }
.tc-sec__chev { width: 1em; }

.tc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 5px 10px;
    border-radius: 8px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}
.tc-item:hover { background: var(--mud-palette-action-default-hover); }
.tc-item[aria-current="page"] {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}
.tc-item.is-unread .tc-item__name { font-weight: 700; }
.tc-item.is-muted .tc-item__name { color: var(--mud-palette-text-secondary); }
.tc-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    height: 24px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    font-size: 0.75rem;
    font-weight: 700;
}
.tc-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-badge {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text, #fff);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.chat-invites__title { font-size: 0.8125rem; margin: 12px 10px 6px; }

/* ---- room header ---- */
.tc-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }
.tc-head__back { display: none; }
.tc-head__main { flex: 1; min-width: 0; }
.tc-head__title { display: flex; align-items: center; gap: 6px; }
.tc-head__h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}
.tc-head__h1:focus { outline: none; }
.tc-head__h1:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.tc-head__glyph { margin-right: 2px; color: var(--mud-palette-text-secondary); }
.tc-head__sub { margin: 2px 0 0; font-size: 0.875rem; color: var(--mud-palette-text-secondary); }
.tc-head__flag {
    display: inline-block;
    margin: 6px 0 0;
    padding: 2px 10px;
    border: 1px solid var(--mud-palette-warning);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}
.tc-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.tc-cannot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 6px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}
.tc-cannot p { margin: 0; }

/* ---- Chat home, Browse channels ---- */
.tc-page { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }
.tc-page__h1 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.tc-page__h1:focus { outline: none; }
.tc-page__h1:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.tc-page__h2 { margin: 20px 0 8px; font-size: 1.05rem; font-weight: 700; }
.tc-page__lede { margin: 0 0 16px; color: var(--mud-palette-text-secondary); max-width: 70ch; }
.tc-unread { list-style: none; margin: 0 0 16px; padding: 0; }
.tc-unread li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.tc-unread a { font-weight: 600; color: var(--mud-palette-primary); }

.tc-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 16px; }
.tc-toolbar__field { display: flex; flex-direction: column; min-width: 180px; }
.tc-toolbar__grow { flex: 1; }
.tc-tablewrap { overflow-x: auto; }
.tc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tc-table caption { text-align: left; padding: 0 0 8px; color: var(--mud-palette-text-secondary); }
.tc-table th, .tc-table td { padding: 10px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); text-align: left; vertical-align: top; }
.tc-table thead th { font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }
.tc-table tbody th { font-weight: 600; }
.tc-table tbody th a { color: var(--mud-palette-primary); }
.tc-table__sub { display: block; margin-top: 2px; font-weight: 400; font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }

/* ---- forms and dialogs ---- */
.tc-form { display: flex; flex-direction: column; gap: 4px; }
.tc-label { display: block; margin: 10px 0 2px; font-size: 0.875rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.tc-input {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-inputs, var(--mud-palette-text-secondary));
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
}
.tc-input[aria-invalid="true"] { border: 2px solid var(--mud-palette-error); }
.tc-input[readonly] { background: var(--mud-palette-background-grey); }
.tc-fielderr { margin: 4px 0 0; color: var(--mud-palette-error); font-weight: 600; font-size: 0.875rem; }
.tc-error {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-left: 4px solid var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
    font-weight: 600;
}
.tc-errsum {
    margin-bottom: 8px;
    padding: 10px 14px;
    border: 2px solid var(--mud-palette-error);
    border-radius: 8px;
}
.tc-errsum:focus { outline: 3px solid var(--mud-palette-error); outline-offset: 2px; }
.tc-errsum__h { margin: 0 0 4px; font-size: 1rem; }
.tc-errsum ul { margin: 0; padding-left: 18px; }
.tc-fieldset { margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
.tc-radio, .tc-pick {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 4px;
    border-radius: 6px;
    cursor: pointer;
}
.tc-radio input, .tc-pick input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--mud-palette-primary); }
.tc-pick:hover, .tc-radio:hover { background: var(--mud-palette-action-default-hover); }
.tc-pick__text { display: flex; flex-direction: column; min-width: 0; }
.tc-pick__name { margin: 0; font-weight: 600; color: var(--mud-palette-text-primary); }
.tc-pick__meta { display: block; margin: 0; font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }
.tc-picklist {
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 4px;
}
.tc-danger { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--mud-palette-lines-default); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tc-danger__h { flex-basis: 100%; margin: 0 0 4px; font-size: 0.9rem; }
.tc-members { list-style: none; margin: 0 0 8px; padding: 0; max-height: 280px; overflow-y: auto; }
.tc-member { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.tc-member__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }

@media (max-width: 767px) {
    .tc-head__back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
        flex-basis: 100%;
        color: var(--mud-palette-primary);
        font-weight: 600;
        text-decoration: none;
    }
    .tc-page { padding: 16px; }
    .tc-page .tc-head__back { margin-bottom: 8px; }
}

/* ==========================================================================
   Phase 2: messages as articles in day lists, message text, actions menu,
   thread panel, message box with @ / # suggestions, saved list.
   ========================================================================== */

.tc-day { margin: 0; }
.tc-mlist { list-style: none; margin: 0; padding: 0; }
.tc-mlist > li { margin: 0; }

/* Full row width: the bubble's max-width (70%) is measured against the row, not against the
   message's own content (a short message with no footer — the guest page — wrapped letter by letter). */
.tc-msg { position: relative; display: flex; flex-direction: column; align-items: inherit; width: 100%; max-width: 100%; }
.chat-msg-row.sent .tc-msg { align-items: flex-end; }
.chat-msg-row.received .tc-msg { align-items: flex-start; }
.tc-msg:focus { outline: none; }
.tc-msg:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; border-radius: 10px; }

.tc-msg__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 8px 0 2px; font-size: 0.8125rem; }
.tc-msg__name { font-weight: 700; color: var(--mud-palette-text-primary); }
.tc-msg__when { color: var(--mud-palette-text-secondary); }
.tc-msg__flag {
    padding: 0 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.chat-msg-row.is-mention .chat-bubble.received {
    box-shadow: inset 3px 0 0 var(--mud-palette-warning);
}

/* System lines: centred, small. */
.tc-sysrow { display: flex; justify-content: center; margin: 6px 0; }
.tc-sys {
    max-width: 90%;
    padding: 2px 10px;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}
.tc-sys:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.tc-sys__time { margin-left: 6px; }

/* Message text */
.tc-mline { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.tc-mline:empty::after { content: "\00a0"; }
.tc-mul { margin: 2px 0; padding-left: 20px; }
.tc-mcode {
    padding: 0 4px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.9em;
}
.chat-bubble a { color: inherit; text-decoration: underline; }
.tc-mention {
    padding: 0 3px;
    border-radius: 4px;
    font-weight: 600;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}
.chat-bubble.sent .tc-mention { background: color-mix(in srgb, #ffffff 22%, transparent); }
.tc-mention--me { outline: 1px solid var(--mud-palette-warning); }
.tc-chlink { font-weight: 600; }

/* Thread summary under a message */
.tc-thsum {
    margin-top: 4px;
    padding: 2px 8px;
    min-height: 28px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}
.tc-thsum:hover { background: var(--mud-palette-action-default-hover); }

/* Actions: shown on hover and keyboard focus, always reachable by Tab. */
.tc-acts {
    position: absolute;
    top: -14px;
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}
.chat-msg-row.sent .tc-acts { right: 4px; }
.chat-msg-row.received .tc-acts { left: 4px; }
.tc-msg:hover .tc-acts,
.tc-msg:focus-within .tc-acts,
.tc-acts.is-open { opacity: 1; pointer-events: auto; }
.tc-ab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
    cursor: pointer;
}
.tc-ab:hover, .tc-ab[aria-expanded="true"] { background: var(--mud-palette-action-default-hover); }
.tc-ab:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 1px; }

.tc-menu {
    position: absolute;
    top: 100%;
    margin: 4px 0 0;
    padding: 4px;
    min-width: 200px;
    list-style: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    z-index: 10;
}
.chat-msg-row.sent .tc-menu { right: 0; }
.chat-msg-row.received .tc-menu { left: 0; }
.tc-menu button {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}
.tc-menu button:hover, .tc-menu button:focus { background: var(--mud-palette-action-default-hover); outline: none; }
.tc-menu button:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }
.tc-menu .tc-menu__danger { color: var(--mud-palette-error); }

/* Inline edit */
.tc-edit { min-width: min(420px, 70vw); color: var(--mud-palette-text-primary); }
.tc-edit__box { resize: vertical; }
.chat-bubble.sent .tc-edit .tc-hint { color: inherit; }

/* Images open from a button */
.chat-attachment-imagebtn { display: block; border-radius: 10px; }
.chat-attachment-imagebtn:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Message box with suggestions */
.chat-composer-field { flex: 1; min-width: 0; }
.tc-box { display: flex; flex-direction: column; min-width: 0; }
.tc-box .tc-label { margin: 0 0 2px; font-size: 0.8125rem; }
.tc-box__field { position: relative; }
.tc-box__input { min-height: 40px; max-height: 220px; resize: vertical; line-height: 1.4; }
.tc-box .tc-hint { margin: 2px 0 0; font-size: 0.75rem; }
.tc-sugg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 4px);
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    z-index: 20;
}
.tc-sugg__opt {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.tc-sugg__opt[aria-selected="true"] {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}
.tc-sugg__opt.is-outside .tc-pick__meta { font-style: italic; }

.tc-invite {
    margin: 0 12px 8px;
    padding: 10px 12px;
    border-left: 4px solid var(--mud-palette-info);
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent);
}
.tc-invite p { margin: 0 0 6px; }

/* Thread panel */
.tc-thread {
    display: flex;
    flex-direction: column;
    width: 380px;
    min-width: 300px;
    flex-shrink: 0;
    min-height: 0;
    border-left: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}
.tc-thread__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.tc-thread__h { margin: 0; font-size: 1.05rem; font-weight: 700; }
.tc-thread__h:focus { outline: none; }
.tc-thread__h:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.tc-thread__body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px; }
.tc-thread__count {
    margin: 12px 0 6px;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}
.tc-thread__composer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Saved messages */
.tc-hits { list-style: none; margin: 0; padding: 0; }
.tc-hit { padding: 12px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.tc-hit__head { margin: 0 0 4px; }
.tc-hit__head a { color: var(--mud-palette-primary); font-weight: 600; }
.tc-hit__text { margin-bottom: 8px; }

@media (max-width: 1100px) {
    .tc-thread {
        position: fixed;
        inset: 64px 0 0 auto;
        width: min(420px, 100vw);
        z-index: 1200;
        box-shadow: -6px 0 18px rgba(0, 0, 0, 0.18);
    }
}

@media (max-width: 767px) {
    .tc-thread { inset: 56px 0 0 0; width: 100vw; min-width: 0; }
}

/* Phase 3: files picked for the next message */
.tc-staged {
    margin: 0 12px 8px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    max-height: 45vh;
    overflow-y: auto;
}
.tc-staged__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tc-staged__item { padding-bottom: 8px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.tc-staged__item:last-child { border-bottom: 0; padding-bottom: 0; }
.tc-staged__item--busy { display: flex; align-items: center; gap: 8px; color: var(--mud-palette-text-secondary); }
.tc-staged__row { display: flex; align-items: center; gap: 10px; }
.tc-staged__thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.tc-staged__glyph,
.tc-file__glyph {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 4px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.tc-staged__name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.tc-staged__size { font-weight: 400; color: var(--mud-palette-text-secondary); }
.tc-staged .tc-label { margin-top: 6px; }
.tc-staged__warn {
    margin-top: 8px;
    padding: 10px 12px;
    border-left: 4px solid var(--mud-palette-warning);
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
}
.tc-staged__warn p { margin: 0 0 6px; }

/* Files on a message */
.tc-files { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 6px; }
.tc-file__figure { margin: 0; }
.tc-file__row { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; }
.tc-file__row--blocked { color: var(--mud-palette-error); }
/* Inside your own (coloured) bubble the error red and the dimmed meta fall below 4.5:1
   (1.2:1 and 4.45:1 in the light theme): use the bubble's own text colour there. */
.chat-bubble.sent .tc-file__row--blocked { color: inherit; font-weight: 600; }
.chat-bubble.sent .tc-file__meta { opacity: 1; }
.tc-file__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tc-file__name { font-weight: 600; overflow-wrap: anywhere; }
.tc-file__meta { font-size: 0.8125rem; opacity: 0.85; overflow-wrap: anywhere; }
.tc-file__save { margin-top: 6px; }
.tc-file__video { display: block; max-width: 100%; max-height: 300px; border-radius: 10px; background: #000; }
.tc-file__audio { display: block; width: 100%; min-width: 220px; }
.tc-file__transcript { margin-top: 4px; font-size: 0.875rem; }
.tc-file__transcript summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.tc-file__transcript p { margin: 4px 0 0; white-space: pre-wrap; }
.chat-bubble.sent .tc-file__glyph { background: color-mix(in srgb, var(--mud-palette-primary-text) 18%, transparent); color: inherit; }
.chat-bubble.sent .tc-btn { color: var(--mud-palette-text-primary); }

/* Tasks made from a message */
.tc-tasks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; max-width: 520px; }
.tc-task {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}
.tc-task.is-done { border-left-color: var(--mud-palette-success); }
.tc-task.is-done .tc-task__title { text-decoration: line-through; }
.tc-task__glyph { font-weight: 700; color: var(--mud-palette-text-secondary); }
.tc-task.is-done .tc-task__glyph { color: var(--mud-palette-success-darken, var(--mud-palette-success)); }
.tc-task__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tc-task__title { font-weight: 600; overflow-wrap: anywhere; }
.tc-task__meta { font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }
.tc-task__late { color: var(--mud-palette-error); font-weight: 600; }
.chat-msg-row.sent .tc-tasks { margin-left: auto; }

/* Phase 4: search */
.tc-search { margin: 8px 0 16px; padding: 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-surface); }
.tc-search__row { display: flex; gap: 8px; }
.tc-search__row .tc-input { flex: 1; min-width: 0; }
.tc-search__filters { margin-top: 10px; }
.tc-search__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 12px; }
.tc-search__count { margin: 8px 0; }
.tc-search__count:focus { outline: none; }
.tc-search__count:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Phase 4: activity */
.tc-page__headrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tc-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.tc-tab {
    min-height: 40px;
    padding: 6px 12px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.tc-tab[aria-selected="true"] { color: var(--mud-palette-text-primary); border-bottom-color: var(--mud-palette-primary); }
.tc-tab:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }
#ca-panel:focus { outline: none; }
.tc-act.is-unread { background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); padding-left: 8px; border-left: 4px solid var(--mud-palette-primary); }
.tc-act__dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--mud-palette-primary); vertical-align: middle; }

/* Phase 4: preferences */
.tc-prefs { max-width: 760px; }
.tc-prefs__sec { margin: 0 0 22px; padding: 0; border: 0; }
.tc-prefs__sec > .tc-sec__h,
.tc-prefs__sec > legend { margin-bottom: 6px; }
.tc-prefs__times { display: flex; gap: 12px; flex-wrap: wrap; }
.tc-prefs__times > div { min-width: 140px; }
.tc-prefs__warn { margin: 0 0 8px; padding: 8px 12px; border-left: 4px solid var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent); }
.tc-prefs__save { position: sticky; bottom: 0; padding: 10px 0; background: var(--mud-palette-background); }
.tc-check { width: 20px; height: 20px; accent-color: var(--mud-palette-primary); }

/* Phase 5: record Chat tab and workspace settings */
.tc-rec { max-width: 760px; }
.tc-rec__meta { margin: 0 0 8px; color: var(--mud-palette-text-secondary); }
.tc-rec__meta strong { color: var(--mud-palette-text-primary); }
.tc-rec__h3 { margin: 12px 0 4px; font-size: 0.9375rem; font-weight: 700; }
.tc-rec .tc-hits { margin-bottom: 12px; }
.tc-input--short { max-width: 140px; }

/* Phase 6: guests */
.tc-guestbanner {
    margin: 0 12px 8px;
    padding: 8px 12px;
    border-left: 4px solid var(--mud-palette-warning);
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    font-weight: 600;
}
.tc-guest-auth { max-width: 520px; margin: 48px auto; padding: 0 16px; }
.tc-guest { display: flex; flex-direction: column; min-height: 100vh; background: var(--mud-palette-background); }
.tc-guest__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}
/* EmptyLayout floats the language switcher over the top-right corner: keep the bar's own
   buttons (Download my messages, Sign out) clear of it. */
.tc-guest__bar { padding-right: 270px; }
@media (max-width: 599.98px) { .tc-guest__bar { padding-right: 150px; } }
.tc-guest__bar p { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc-guest__shell { flex: 1; min-height: 0; }
.tc-guest__navh { padding: 12px 12px 4px; margin: 0; }
.tc-guest__note { margin: 0 12px 8px; padding: 6px 10px; border-radius: 6px; background: var(--mud-palette-background-grey); font-size: 0.875rem; }
.tc-guest__attach { cursor: pointer; flex-shrink: 0; }
.tc-guest__attach:focus-within { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Accessibility pack: held messages, Jump to, keyboard focus in the feed */
.tc-held { display: flex; justify-content: center; margin: 0 12px 8px; }
.tc-kbd {
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--mud-palette-lines-inputs, var(--mud-palette-text-secondary));
    border-radius: 4px;
    font: 600 0.75rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--mud-palette-text-secondary);
}
.tc-jump__list { max-height: 50vh; overflow-y: auto; }
.tc-jump__list .tc-sugg__opt { display: flex; flex-direction: column; padding: 8px 10px; cursor: pointer; border-radius: 6px; }
.tc-jump__list .tc-sugg__opt.is-active { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); outline: 2px solid var(--mud-palette-primary); }
[data-tc-feed]:focus { outline: none; }
[data-tc-feed]:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }
article.tc-msg:focus-visible, article.tc-sys:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; border-radius: 6px; }

/* Presence and status */
.tc-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-text-secondary);
    background: transparent;
    vertical-align: middle;
}
.tc-dot--active { border-color: var(--mud-palette-success); background: var(--mud-palette-success); }
.tc-dot--away { border-color: var(--mud-palette-warning); background: transparent; }
.tc-dot--donotdisturb { border-color: var(--mud-palette-error); background: var(--mud-palette-error); }
.tc-dot--offline { border-color: var(--mud-palette-text-secondary); }
.tc-side__status { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 8px; font-size: 0.875rem; text-align: left; }

/* Reactions: one chip per emoji under the message (pressed = yours), and the picker in the action bar. */
.tc-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-msg-row.sent .tc-reacts { justify-content: flex-end; }
.tc-react {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 26px; padding: 0 8px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 999px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    font-size: 0.8125rem; font-variant-numeric: tabular-nums; cursor: pointer;
}
.tc-react.is-mine { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover, var(--mud-palette-action-default-hover)); }
.tc-react:disabled { cursor: default; }
.tc-react:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 1px; }
.tc-reactpick { display: flex; gap: 2px; padding-right: 4px; margin-right: 2px; border-right: 1px solid var(--mud-palette-lines-default); }
.tc-reactpick .tc-ab[aria-pressed="true"] { background: var(--mud-palette-action-default-hover); }